/* app.css — interfaz. Diseñado a 380 px y ensanchado hacia arriba.
   Todos los colores y tipografías vienen de tokens.css. */

@import url('tokens.css');
@import url('fuentes.css');

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0}

body{
  font-family:var(--f-texto);
  font-size:15px;
  line-height:1.45;
  color:var(--texto);
  background:var(--fondo);
  -webkit-text-size-adjust:100%;
}

button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* Los códigos IMPA, SKU, revisiones y cantidades van siempre en monoespaciada.
   No es decoración: es lo que hace legible una lista de 170 ítems. */
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- Marca ---------- */
.marca{display:flex;align-items:center;gap:9px;min-width:0}
.marca-t{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.marca-t b{
  font-family:var(--f-titular);font-size:12.5px;font-weight:400;
  letter-spacing:.01em;white-space:nowrap;
}
.marca-t span{
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.isotipo{flex:none;display:block}
.isotipo .m-tallo{fill:none;stroke-width:1.4;stroke-linecap:round}

/* Sobre --papel: la marca a color. */
.isotipo--color .m-esfera{fill:var(--v-500)}
.isotipo--color .m-hoja-baja{fill:var(--v-700)}
.isotipo--color .m-hoja{fill:var(--v-300)}
.isotipo--color .m-tallo{stroke:var(--v-700)}

/* Sobre --v-900: nunca el logo a color. Silueta clara con la hoja en negativo. */
.isotipo--claro .m-esfera{fill:var(--v-300)}
.isotipo--claro .m-hoja-baja{fill:var(--v-900)}
.isotipo--claro .m-hoja{fill:var(--v-100)}
.isotipo--claro .m-tallo{stroke:var(--v-100)}

/* ---------- Logotipo completo ---------- */
.logotipo{display:block;height:auto;max-width:100%}


/* ================= BARRA SUPERIOR ================= */
.barra{
  position:sticky;top:0;z-index:40;
  background:var(--v-900);color:var(--texto-claro);
  border-bottom:1px solid var(--linea-oscura);
  padding-top:env(safe-area-inset-top);
}
.barra-t{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px}
.marca-iso{display:flex;flex:none}
.barra .marca-t span{color:var(--texto-claro-suave)}

.lang{display:flex;flex:none;border:1px solid var(--linea-oscura);border-radius:3px;overflow:hidden}
.lang button{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:5px 9px;color:var(--texto-claro-tenue);
}
.lang button.on{background:var(--v-300);color:var(--v-900)}

/* Selector de vista. El demo se muestra desde una sola dirección y las tres
   vistas son tres archivos; sin esto habría que escribir la ruta a mano. */
.vistas{
  display:flex;border-top:1px solid var(--linea-oscura);
}
.vistas a{
  flex:1;text-align:center;text-decoration:none;
  padding:9px 6px;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--texto-claro-tenue);
  border-right:1px solid var(--linea-oscura);
  border-bottom:2px solid transparent;
}
.vistas a:last-child{border-right:0}
.vistas a.on{color:var(--v-300);border-bottom-color:var(--v-300)}


/* ================= ESTRUCTURA ================= */
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
body.cargando main{opacity:0}

.pantalla{display:none;padding:16px 14px 4px}
.pantalla.on{display:block}

.titulo{font-family:var(--f-titular);font-weight:400;font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
.sub{margin:0 0 15px;font-size:12.5px;color:var(--texto-suave);max-width:52ch}
.nota{
  margin:20px 0 0;font-size:10.5px;line-height:1.55;color:var(--texto-tenue);
  border-top:1px solid var(--linea);padding-top:11px;max-width:60ch;
}
.vacio{
  grid-column:1/-1;margin:0;padding:30px 16px;text-align:center;
  font-size:12.5px;color:var(--texto-tenue);
  background:var(--v-100);border-radius:4px;
}


/* ================= BUSCADOR Y CHIPS ================= */
.buscador{
  display:flex;align-items:center;gap:8px;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:4px;
  padding:9px 11px;margin-bottom:10px;
}
.buscador svg{width:15px;height:15px;flex:none;color:var(--texto-tenue)}
.buscador input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px}
.buscador input::placeholder{color:var(--texto-tenue)}
.buscador input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Envuelven en varias líneas. Antes desbordaban en horizontal y, sin barra
   visible, no parecían deslizables: parecían cortadas. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{
  flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap;
  border:1px solid var(--linea);border-radius:3px;background:var(--tarjeta);
  padding:7px 10px;font-size:11.5px;font-weight:600;color:var(--texto-suave);
}
.chip em{font-style:normal;font-size:9.5px;font-weight:500;color:var(--texto-tenue)}
.chip.on{background:var(--v-900);border-color:var(--v-900);color:var(--texto-claro)}
.chip.on em{color:var(--texto-claro-tenue)}


/* ================= GRILLA DE PRODUCTOS ================= */
.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:620px){.grilla{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grilla{grid-template-columns:repeat(4,1fr)}}

.tarjeta{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;
}
.tarjeta.es-agotado .foto{opacity:.55}

/* Foto o silueta. Nunca un hueco ni un ícono roto.
   Cuadrada: las fotos entregadas son 1080×1080 y recortarlas a 4:3 cortaba
   producto en los sacos y los bidones. */
.foto{
  position:relative;aspect-ratio:1/1;background:var(--v-100);
  display:grid;place-items:center;overflow:hidden;
}
.foto .silueta{width:34%;height:auto;color:var(--v-500);opacity:.42}
.foto-nota{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--v-700);opacity:.5;
}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.sello{
  position:absolute;top:6px;left:6px;z-index:2;
  font-family:var(--f-mono);font-size:8px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 5px;border-radius:2px;color:var(--sobre-color);
}
.sello--disponible{background:var(--estado-disponible)}
.sello--pedido{background:var(--estado-pedido)}
.sello--agotado{background:var(--estado-agotado)}

.tarjeta-b{padding:9px;display:flex;flex-direction:column}
.impa{font-size:9.5px;font-weight:500;letter-spacing:.02em;color:var(--texto-tenue)}
.nombre{
  margin:2px 0 3px;font-size:12.5px;font-weight:600;line-height:1.25;
  /* dos líneas fijas: la tarjeta no puede cambiar de alto entre ítems */
  height:2.5em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.presentacion{font-size:10.5px;color:var(--texto-suave)}


/* ================= CONTROL DE CANTIDAD =================
   Alto fijo: al pasar de "Añadir" al selector la tarjeta no cambia de altura
   y la grilla no se reacomoda. */
.control{
  height:52px;margin-top:8px;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}

.anadir{
  height:36px;width:100%;border-radius:3px;
  background:var(--v-500);color:var(--sobre-color);
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
}
.anadir:disabled{
  background:transparent;border:1px solid var(--linea);
  color:var(--texto-tenue);font-weight:600;cursor:not-allowed;
}

.paso{
  height:36px;display:flex;align-items:stretch;
  border:1px solid var(--v-500);border-radius:3px;overflow:hidden;
}
.paso button{
  width:34px;flex:none;font-size:17px;line-height:1;font-weight:700;
  color:var(--v-700);background:var(--v-100);
}
.paso button:active{background:var(--v-300)}
.paso-n{
  flex:1;width:auto;font-size:13.5px;font-weight:700;
  background:var(--tarjeta);color:var(--texto);
}
.paso--editando{border-color:var(--v-300);background:var(--tarjeta)}
.paso-i{
  flex:1;min-width:0;border:0;outline:0;background:none;text-align:center;
  font-size:13.5px;font-weight:700;padding:0 6px;
}
.paso-u{
  font-size:10px;line-height:1.3;text-align:center;color:var(--texto-suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


/* ================= REQUISICIÓN ================= */
.req-fila{
  display:flex;align-items:center;gap:12px;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:4px;
  padding:10px 11px;margin-bottom:7px;
}
.req-datos{flex:1;min-width:0}
.req-nombre{font-size:13px;font-weight:600;line-height:1.3;margin:1px 0 2px}
.req-fila .control{width:104px;flex:none;height:auto;margin:0}
.req-fila .paso{height:34px}
.req-fila .paso button{width:30px}


/* ================= DATOS DEL BUQUE ================= */
.bloque-t{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-tenue);margin:0 0 10px;
}
.buque{margin-top:20px;border-top:1px solid var(--linea);padding-top:16px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo--ancho{grid-column:1/-1}
.campo span{font-size:10.5px;font-weight:600;color:var(--texto-suave)}
.campo input{
  height:38px;padding:0 10px;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:3px;
  font-size:14px;outline:0;min-width:0;width:100%;
}
.campo input:focus{border-color:var(--v-500)}
.campo input[aria-invalid="true"]{border-color:var(--rojo)}
.campo-err{font-size:10.5px;font-style:normal;color:var(--rojo)}
.campo-err[hidden]{display:none}


/* ================= ACCIONES ================= */
.acciones{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.acciones[hidden]{display:none}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 14px;border-radius:3px;
  font-size:13px;font-weight:700;letter-spacing:.01em;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--wa{background:var(--v-500);color:var(--sobre-color)}
.btn--papel{background:var(--tarjeta);border:1px solid var(--linea);color:var(--texto)}
.btn--vaciar{color:var(--texto-suave);font-weight:600;min-height:38px}
.btn--vaciar.confirmando{background:var(--rojo);color:var(--sobre-color);font-weight:700}
.btn:disabled{opacity:.45;cursor:not-allowed}


/* ================= PANEL DEL ADMINISTRADOR ================= */
body.sin-tabs{padding-bottom:24px}

.ojo{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--v-500);font-weight:700;margin:0 0 5px;
}

/* Sello de control. Solo en el panel: a un capitán no le dice nada que el
   catálogo esté sin publicar. */
.sello-ctrl{
  display:flex;align-items:stretch;
  border-top:1px solid var(--linea-oscura);
  background:rgba(255,255,255,.03);color:var(--texto-claro);
}
.sello-ctrl div{
  flex:1;min-width:0;padding:6px 10px;
  border-right:1px solid var(--linea-oscura);
  display:flex;flex-direction:column;gap:2px;
}
.sello-ctrl div:last-child{border-right:0}
.sello-ctrl span{
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-claro-tenue);
}
.sello-ctrl b{
  font-size:12px;font-weight:700;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sello-ctrl .sucio b{color:var(--v-300)}
.sello-ctrl .sucio b::before{content:"▲ "}

/* ---------- Indicadores ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}
@media(min-width:620px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:4px;
  padding:11px 12px;display:flex;flex-direction:column;gap:2px;
}
.kpi b{font-size:22px;font-weight:700;line-height:1.1;color:var(--v-700)}
.kpi span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-tenue)}
.kpi--alerta b{color:var(--rojo)}

/* ---------- Bloques ---------- */
.bloque{
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:4px;
  margin-bottom:12px;overflow:hidden;
}
.bloque-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 13px;background:var(--v-100);border-bottom:1px solid var(--linea);
}
.bloque-h h2{
  font-family:var(--f-titular);font-weight:400;font-size:14px;margin:0;
  letter-spacing:-.01em;color:var(--v-900);
}
.bloque-h small{font-size:10px;color:var(--v-700);opacity:.75;text-align:right}
.bloque-c{padding:12px 13px;display:flex;flex-direction:column;gap:10px}
.bloque-c .nota{margin:0;border:0;padding:0}

.selector{
  width:100%;height:40px;padding:0 10px;
  background:var(--papel);border:1px solid var(--linea);border-radius:3px;
  font-size:13.5px;
}

/* ---------- Disponibilidad ---------- */
.fila-disp{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--linea-clara);
}
.fila-disp:last-of-type{border-bottom:0}
.fila-i{flex:1;min-width:0}
.fila-n{
  font-size:12.5px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.interruptor{
  flex:none;width:44px;height:25px;border-radius:13px;
  background:var(--linea);position:relative;transition:background .15s;
}
.interruptor::after{
  content:"";position:absolute;top:3px;left:3px;
  width:19px;height:19px;border-radius:50%;
  background:var(--sobre-color);transition:transform .15s;
  box-shadow:0 1px 2px var(--sombra);
}
.interruptor.on{background:var(--v-500)}
.interruptor.on::after{transform:translateX(19px)}

/* ---------- Registro de la carga masiva ---------- */
.registro{
  margin:0;padding:10px 11px;border-radius:3px;
  background:var(--v-900);color:var(--texto-claro-suave);
  font-size:10.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  max-height:190px;overflow:auto;
}
.registro[hidden]{display:none}
.registro .ok{color:var(--v-300)}
.registro .aviso{color:var(--ambar)}

/* ---------- Datos de la empresa ---------- */
.campo-ayuda{font-style:normal;font-size:10px;color:var(--ambar)}
.aviso{
  margin:0;font-size:11.5px;font-weight:600;color:var(--v-700);
  background:var(--v-100);border-radius:3px;padding:8px 10px;
}
.aviso[hidden]{display:none}

.volver{margin:22px 0 0;text-align:center}
.volver a{font-size:12.5px;font-weight:600;color:var(--v-700)}


/* ================= PANEL DEL CAPITÁN ================= */
.ficha-buque{
  background:var(--v-900);color:var(--texto-claro);
  border-radius:4px;padding:14px 14px 12px;margin-bottom:12px;
}
.buque-n{
  font-family:var(--f-titular);font-weight:400;font-size:17px;margin:0 0 11px;
  letter-spacing:-.01em;
}
.buque-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 12px}
.buque-datos div:first-child,
.buque-datos div:nth-child(4){grid-column:auto}
.buque-datos span{
  display:block;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-claro-tenue);margin-bottom:1px;
}
.buque-datos b{
  font-size:12.5px;font-weight:600;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.btn--ancho{width:100%;margin-bottom:10px}

/* ---------- Tarjeta de requisición ---------- */
.req-card{border-bottom:1px solid var(--linea-clara);padding-bottom:14px}
.req-card:last-child{border-bottom:0;padding-bottom:0}
.req-card + .req-card{padding-top:14px}
.req-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.req-card-h b{display:block;font-size:13px;font-weight:700;letter-spacing:.02em}
/* Solo la fecha, no la etiqueta de estado: si se estilan todos los span de la
   cabecera, ganan por especificidad y dejan el sello gris e ilegible. */
.req-card-h > div > span{font-size:10.5px;color:var(--texto-tenue)}

.etiqueta{
  flex:none;font-family:var(--f-mono);font-size:8.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 6px;border-radius:2px;color:var(--sobre-color);
}
.etiqueta--enviada{background:var(--texto-tenue)}
.etiqueta--cotizada{background:var(--ambar)}
.etiqueta--confirmada{background:var(--v-500)}
.etiqueta--entregada{background:var(--v-700)}

/* ---------- Línea de tiempo ---------- */
.linea{display:grid;grid-template-columns:repeat(4,1fr);margin:13px 0 11px}
.linea-p{position:relative;padding-top:15px;text-align:center;min-width:0}
/* El riel que entra a cada paso viene del punto anterior, y se pinta cuando
   ese paso está cumplido. El primero no tiene tramo de entrada. */
.linea-p::before{
  content:"";position:absolute;top:4px;left:-50%;right:50%;height:2px;
  background:var(--linea);
}
.linea-p:first-child::before{display:none}
.linea-p.cumplido::before{background:var(--v-500)}
.linea-p i{
  position:absolute;top:0;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;
  background:var(--papel);border:2px solid var(--linea);
}
.linea-p.cumplido i{background:var(--v-500);border-color:var(--v-500)}
.linea-p b{
  display:block;font-size:8.5px;font-weight:700;line-height:1.2;
  color:var(--texto-tenue);padding:0 2px;
}
.linea-p.cumplido b{color:var(--v-700)}
.linea-p span{display:block;font-size:8.5px;color:var(--texto-tenue);margin-top:2px}

.req-card-p{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11.5px;color:var(--texto-suave);margin-bottom:10px;
}
/* Donde iría un monto va la leyenda. En este demo no hay precios. */
.cotizacion{
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--v-700);
  background:var(--v-100);padding:3px 7px;border-radius:2px;
}

.req-card-a{display:flex;gap:7px}
.req-card-a .btn{flex:1;min-height:38px;font-size:11.5px}

/* ---------- Listas guardadas ---------- */
.lista-g{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--linea-clara);
}
.lista-g:last-child{border-bottom:0}
.lista-i{flex:1;min-width:0}
.lista-n{font-size:13px;font-weight:600;line-height:1.3}
.lista-c{font-size:10.5px;color:var(--texto-tenue)}
.lista-g .btn{flex:none;min-height:36px;font-size:11.5px;padding:0 12px}


/* ================= BARRA INFERIOR ================= */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:var(--v-900);
  border-top:1px solid var(--linea-oscura);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 4px 12px;color:var(--texto-claro-tenue);
  font-size:10px;font-weight:600;letter-spacing:.03em;
}
.tab svg{width:19px;height:19px}
.tab.on{color:var(--v-300)}

.contador{
  position:absolute;top:6px;left:50%;margin-left:5px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;font-style:normal;
  background:var(--v-300);color:var(--v-900);border-radius:9px;
}
.contador[hidden]{display:none}