:root{--azul:#083b5c;--azul2:#0d5e89;--fondo:#f3f6f9;--texto:#17212b;--verde:#14a44d;--rojo:#d93025;--amarillo:#fff4cc;--borde:#e3e8ef}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--fondo);color:var(--texto);padding-bottom:92px}
.topbar{background:linear-gradient(135deg,var(--azul),var(--azul2));color:white;padding:18px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
.topbar h1{margin:0;font-size:24px}.topbar p{margin:2px 0 0;opacity:.85}main{max-width:1080px;margin:auto;padding:14px}
.pantalla{display:none}.pantalla.activa{display:block}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.card{background:white;border:1px solid var(--borde);border-radius:16px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card span{display:block;font-size:12px;color:#667085}.card strong{display:block;font-size:18px;margin-top:4px;color:var(--azul)}
.panel{background:white;border:1px solid var(--borde);border-radius:18px;padding:14px;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.panel h2{margin:0 0 12px}.buscador{display:flex;gap:8px;margin-top:10px}input{width:100%;padding:13px;font-size:16px;border:1px solid #ccd5df;border-radius:12px;outline:none;margin:4px 0}input:focus{border-color:var(--azul2)}
button,.importar{border:0;background:var(--azul);color:white;padding:12px 14px;border-radius:12px;font-weight:bold;cursor:pointer;display:inline-block;text-align:center;margin:3px}button:active{transform:scale(.98)}
.ghost{background:rgba(255,255,255,.18)}.mini{padding:8px 10px;font-size:12px;background:#e8eef5;color:var(--azul)}.principal{width:100%;background:var(--verde);font-size:16px;padding:16px}.danger{background:var(--rojo);width:100%;margin-top:10px}
.resultados{margin-top:10px}.item,.resultado-item,.pedido-item,.stock-item,.ranking-item,.producto-item{border:1px solid var(--borde);border-radius:14px;padding:12px;margin:8px 0;background:#fff}
.stock-alerta{background:var(--amarillo);border-color:#f2d36b}.sin-stock{background:#ffecec;border-color:#f5b5b5}.baja{opacity:.62;background:#f1f1f1}
.alerta{padding:10px 12px;border-radius:14px;margin-bottom:8px;font-weight:bold}.alerta.roja{background:#ffecec;color:#9b1c1c}.alerta.amarilla{background:#fff4cc;color:#775600}.ok{background:#eaf8ed;color:#147a3d;padding:10px;border-radius:12px;margin-top:10px}.warn{background:#fff4cc;color:#775600;padding:10px;border-radius:12px;margin-top:10px}
.resultado-item{display:flex;justify-content:space-between;gap:10px;align-items:center}.descripcion{font-weight:bold}.detalle{font-size:13px;color:#667085;margin-top:4px;line-height:1.35}
.controles{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.controles button{padding:8px 10px}.fila{display:flex;justify-content:space-between;align-items:center;gap:10px}.carrito-vacio{color:#667085;text-align:center;padding:20px}
.total-box{background:#eef8f1;border:1px solid #c8eed4;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;margin:12px 0}.total-box strong{font-size:28px;color:var(--verde)}
.acciones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.acciones button{min-height:58px}.filtros{display:flex;flex-wrap:wrap}.paginador{text-align:center;margin:14px 0}
.estado,.badge{font-weight:bold;border-radius:999px;padding:4px 8px;font-size:12px}.badge-baja{background:#eee;color:#555}.badge-activo{background:#eaf8ed;color:#147a3d}
.nav{position:fixed;left:0;right:0;bottom:0;background:white;border-top:1px solid var(--borde);display:grid;grid-template-columns:repeat(6,1fr);padding:8px 6px env(safe-area-inset-bottom);z-index:20}
.nav button{background:white;color:#667085;padding:7px 2px;border-radius:12px;font-size:17px}.nav button.activo{background:#e8f2fb;color:var(--azul)}.nav span{display:block;font-size:10px;margin-top:2px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:flex;align-items:center;justify-content:center;padding:14px}.modal.oculto{display:none}
.modal-contenido{background:white;border-radius:18px;width:100%;max-width:540px;padding:14px;max-height:92vh;overflow:auto}#reader{width:100%;min-height:260px}.ayuda{font-size:13px;color:#667085;line-height:1.4}.importar input{display:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.ranking-num{font-weight:bold;color:var(--azul);font-size:20px;margin-right:8px}
@media(max-width:820px){.cards{grid-template-columns:1fr 1fr}.acciones{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr}}
@media(max-width:560px){main{padding:10px}.topbar h1{font-size:21px}.resultado-item{align-items:flex-start;flex-direction:column}.cards{grid-template-columns:1fr 1fr}.acciones{grid-template-columns:1fr}.nav button{font-size:15px}.nav span{font-size:9px}.grid2{grid-template-columns:1fr}}

.nav7{grid-template-columns:repeat(7,1fr)}
@media(max-width:560px){.nav7{grid-template-columns:repeat(7,1fr)}.nav7 button{font-size:14px}.nav7 span{font-size:8px}}

.cloudbar{
  background:#e8f2fb;
  border:1px solid #c9e2f5;
  border-radius:16px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.cloudbar span{
  font-weight:bold;
  color:#083b5c;
  margin-right:auto;
}