/* El Pescador · Caja — tema "Futuro": blanco puro, líneas finas, tipografía técnica.
   Va DESPUÉS de blanco.css y solo cambia la apariencia (la estructura y la lógica no se tocan).
   Ideas: blanco real sin degradados ni marfil; bordes de 1 px en lugar de sombras; esquinas más rectas;
   títulos y cifras en Unbounded (ancha, futurista), texto en Geist, etiquetas y números en Geist Mono;
   el verde de la marca solo en detalles (indicador activo, insignias). */

:root{
  --fondo:#FFFFFF; --sup:#FFFFFF; --sup2:#F6F6F7; --sup3:#EFEFF1;
  --linea:#E9E9EC; --linea2:#DCDCE0; --campo:#8E8E96;            /* --campo: borde de campos, 3,3:1 sobre blanco */
  --texto:#0B0B0C; --texto2:#55555C; --texto3:#6B6B73;          /* --texto3: 5,3:1 sobre blanco (AA) */
  --faro-turq:#0F8F82;                                            /* turquesa FaroTech oscurecido: 4,5:1 sobre blanco */
  --tinta-btn:#0B0B0C;
  --radio:14px; --radio-chico:10px;
  --sombra:none; --sombra-alta:0 1px 0 rgba(11,11,12,.04),0 30px 60px -30px rgba(11,11,12,.25);
  --f-display:"Unbounded",Geist,system-ui,sans-serif;
  --f-texto:Geist,-apple-system,"SF Pro Text",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --t-display:1.75rem; --t-cifra:1.6rem;
}
@media (min-width:1000px){:root{--t-display:2.15rem}}

/* ---------- base ---------- */
html,body{background:#FFFFFF;font-family:var(--f-texto);letter-spacing:-.005em;font-feature-settings:"ss01","cv11"}
.aurora{display:none}
h1,h2,h3,.tit{font-family:var(--f-texto);font-weight:600;letter-spacing:-.02em}
.num,.total,.vuelto,.kpi .v,.prod .p,.linea .q{font-variant-numeric:tabular-nums}

/* etiquetas técnicas: mayúsculas mono, pequeñas y espaciadas */
label,.card > h3,.card .fila > h3,.card h3:first-child,.kpi .l,nav.bottom button,.chip-red,.est{
  font-family:var(--f-mono);font-weight:500;letter-spacing:.06em}
label,.card > h3,.card .fila > h3,.card h3:first-child,.kpi .l{text-transform:uppercase;font-size:.72rem;color:var(--texto3)}

/* títulos de pantalla y cifras: Unbounded liviana */
.titulo-vista h1{font-family:var(--f-display);font-weight:400;letter-spacing:-.04em;line-height:1.02;font-size:var(--t-display)}
.total,.vuelto,.kpi .v{font-family:var(--f-display);font-weight:300;letter-spacing:-.05em}
.kpi .v{font-size:1.9rem}
@media (min-width:1000px){main.v-panel .kpi .v{font-size:2.6rem}}
.card h2{font-family:var(--f-texto);font-weight:600;font-size:1.05rem;letter-spacing:-.02em}

/* ---------- encabezado ---------- */
header.top{background:rgba(255,255,255,.88);border-bottom:1px solid var(--linea)}
header .nombre{font-family:var(--f-texto);font-weight:600}
header .sub{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.chip-red{background:transparent;border:1px solid var(--linea);border-radius:999px;font-size:.66rem;text-transform:uppercase;padding:6px 10px;color:var(--texto2)}
.btn-rol{background:transparent;border:1px solid var(--linea);border-radius:999px;font-weight:500;font-size:.85rem}

.banner{border-radius:var(--radio-chico);box-shadow:none;border:1px solid var(--linea);font-weight:500;font-size:.9rem}

/* ---------- tarjetas: sin sombra, línea fina ---------- */
.card{border:1px solid var(--linea);border-radius:var(--radio);box-shadow:none}
.item,.linea{border-bottom:1px solid var(--linea)}
.item:last-child,.linea:last-child{border-bottom:0}

/* ---------- botones: rectos, finos y con peso ---------- */
.btn{border-radius:var(--radio-chico);border:1px solid var(--linea2);box-shadow:none;font-weight:500;letter-spacing:-.01em;min-height:48px;
  transition:background .25s var(--suave),border-color .25s var(--suave),color .2s,transform .35s var(--suave)}
.btn.pri{background:var(--tinta-btn);color:#fff;border:1px solid var(--tinta-btn);font-family:var(--f-texto);font-weight:500;letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);position:relative;overflow:hidden}
/* brillo fino que cruza el botón principal al pasar el puntero */
.btn.pri::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.btn.acento{background:transparent;color:var(--mal);border:1px solid color-mix(in srgb,var(--mal) 35%,white)}
.btn.turq{background:transparent}
.btn:disabled{opacity:.35}
.mini{border-radius:8px;border:1px solid var(--linea2);background:transparent}
/* objetivos táctiles de 44 px sin cambiar el dibujo: el área de toque crece con un pseudo-elemento invisible */
.mini,.seg button,.btn-rol{position:relative}
.mini::after,.seg button::after,.btn-rol::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}

/* control segmentado: subrayado en vez de pastilla negra */
.seg{background:transparent;border:1px solid var(--linea);border-radius:var(--radio-chico);padding:3px}
.seg button{border-radius:7px;font-weight:500;color:var(--texto2)}
.seg button.on{background:var(--sup2);color:var(--texto);box-shadow:inset 0 0 0 1px var(--linea2)}

/* ---------- productos ---------- */
.prod{border:1px solid var(--linea);border-radius:var(--radio);box-shadow:none;background:#fff}
.prod .em{background:transparent;border:1px solid var(--linea);border-radius:var(--radio-chico)}
.prod .n{font-weight:500;letter-spacing:-.015em}
.prod .p{font-family:var(--f-mono);font-size:.82rem;color:var(--texto2);letter-spacing:0}
.badge{background:var(--acento-tono);border:2px solid #fff;box-shadow:none;font-family:var(--f-mono);font-weight:500}
.carrito{border:1px solid var(--linea);box-shadow:var(--sombra-alta);border-radius:var(--radio)}

/* ---------- estados ---------- */
.est{border-radius:6px;font-size:.66rem;text-transform:uppercase;padding:4px 8px}

/* ---------- formularios ---------- */
input,select,textarea{border:1px solid var(--campo);border-radius:var(--radio-chico);background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--texto);box-shadow:0 0 0 3px rgba(11,11,12,.06)}

/* ---------- navegación ---------- */
nav.bottom{background:rgba(255,255,255,.92);border-top:1px solid var(--linea)}
nav.bottom button{font-size:.7rem;text-transform:uppercase;color:var(--texto3);position:relative;border-radius:0}
nav.bottom button.on{background:transparent;color:var(--texto)}
nav.bottom button.on .ico{color:var(--texto)}
/* indicador activo: una línea fina con el color de la marca */
nav.bottom button.on::before{content:"";position:absolute;left:28%;right:28%;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--acento-tono)}

/* ---------- ventanas ---------- */
.velo{background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hoja{border:1px solid var(--linea);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -30px 60px -30px rgba(11,11,12,.25)}
.hoja::before{background:var(--linea2);height:4px;width:32px}
.hoja .card{background:#fff}
.toast{background:var(--texto);border-radius:var(--radio-chico);font-weight:500;letter-spacing:-.005em}

/* ---------- pantalla de entrada ---------- */
.nube-entrada{background:#fff;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:56px 56px;background-position:center}
.nube-caja{border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 40px 80px -40px rgba(11,11,12,.3)}
.nube-caja h2{font-family:var(--f-display);font-weight:400;letter-spacing:-.04em;font-size:1.45rem}
.nube-llave,.nube-reglas{font-family:var(--f-mono)}
.nube-reglas{font-size:.75rem}
.nube-ver{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}

/* ---------- computadora ---------- */
@media (min-width:1000px){
  nav.bottom{background:#fff;border-right:1px solid var(--linea)}
  nav.bottom button{font-size:.72rem;border-radius:var(--radio-chico)}
  nav.bottom button.on{background:var(--sup2)}
  nav.bottom button.on::before{left:0;right:auto;top:22%;bottom:22%;width:2px;height:auto;border-radius:0 2px 2px 0}
  .lado-pie,.lado-marca{border-color:var(--linea)}
  .hoja{border-radius:var(--radio);border:1px solid var(--linea)}
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:none;box-shadow:none;border-color:var(--texto)}
  .btn.pri:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14);background:#1A1A1C}
  .prod:hover,main:not(.v-pedido) > .card:hover{transform:none;box-shadow:none;border-color:var(--linea2)}
  .prod:hover .em{border-color:var(--texto)}
  .seg button:not(.on):not(:disabled):hover{color:var(--texto);background:var(--sup2)}
  .mini:hover{border-color:var(--texto)}
  .btn-rol:hover{border-color:var(--linea2)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn.pri:hover::after{transform:translateX(120%);transition:transform .9s var(--suave)}
}
.btn:active,.prod:active{transform:scale(.985)}

/* marca de agua "farotech" en su letra */
footer.faro{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
footer.faro b,.lado-pie .wm{font-family:Unbounded,var(--f-texto);text-transform:none;letter-spacing:-.02em}
footer.faro .tech,.lado-pie .wm i{color:var(--faro-turq)}
.cols span.b{background:#E6E6EA}
.cols span.b.hoy{background:var(--texto)}
.barra i{background:var(--texto)}

/* ---------- movimiento lento y fluido (suave.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .por-aparecer{opacity:0;transform:translateY(22px)}
  .aparece{transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1)}
  /* al cambiar de pantalla: entrada corta y escalonada (pocos pasos, para no hacer esperar) */
  main.entra > :not(.prods){animation-duration:.32s;animation-timing-function:cubic-bezier(.23,1,.32,1);animation-delay:calc(min(var(--i,0),4) * 35ms)}
  .hoja{animation-duration:.3s}
  .velo{animation-duration:.24s}
}

/* ---------- activar el código de 6 dígitos ---------- */
.nube-pasos{margin:0 0 4px;padding-left:1.2em;display:grid;gap:6px;font-size:.9rem;color:var(--texto2)}
.nube-pasos b{color:var(--texto);font-weight:600}
.nube-qr{display:block;margin:6px auto 2px;width:184px;height:184px;border:1px solid var(--linea);border-radius:var(--radio-chico);padding:6px;background:#fff;image-rendering:pixelated}
.nube-manual summary{cursor:pointer;font-size:.8rem;color:var(--texto2);padding:6px 0}
.nube-manual[open] summary{color:var(--texto)}

/* =================== pulido (pasada 1) =================== */
/* estados: frase corta, letra de texto, sin mayúsculas forzadas */
.est{font-family:var(--f-texto);text-transform:none;letter-spacing:0;font-size:.74rem;font-weight:500;border-radius:6px;padding:3px 8px;line-height:1.3;display:inline-block}
.est.ok{color:#17663A;background:#EEF6F0}
.est.warn{color:#7A4A00;background:#FBF3E2}
.est.mal{color:#A8261C;background:#FBEDEB}
.est.neu{color:var(--texto2);background:var(--sup2)}

/* métricas: etiqueta corta + comparación en su propia línea */
.kpi .l{margin-top:4px}
.kpi .cmp{margin-top:6px;font-family:var(--f-texto);font-size:.75rem;color:var(--texto2)}
.kpi .cmp.sube{color:#17663A}
.kpi .cmp.baja{color:#A8261C}
.pie-card{margin-top:14px;padding-top:12px;border-top:1px solid var(--linea)}
.card > h3:first-child{text-transform:uppercase}
.card > h3:first-letter{text-transform:uppercase}

/* filas de listas */
.item{align-items:center;min-height:44px}
.item .rank{font-family:var(--f-mono);font-size:.75rem;color:var(--texto3);width:26px;flex:none}
.item .nom{display:block;font-weight:500}
.item .chica{display:block;margin-top:2px}
.item.suma{border-top:1px solid var(--texto);border-bottom-color:var(--linea)}
.item.suma b{font-weight:600}

/* pedidos del día */
.item.pedido{align-items:flex-start;padding:14px 0}
.ped-cab{display:flex;align-items:baseline;gap:10px}
.ped-num{font-family:var(--f-mono);font-size:.78rem;color:var(--texto3)}
.ped-canal{font-weight:500}
.ped-hora{font-family:var(--f-mono);font-size:.72rem;color:var(--texto3)}
.ped-total{margin-left:auto;font-weight:600}
.ped-det{display:block;margin:4px 0 8px}
.ped-est{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ped-fact{font-family:var(--f-mono);font-size:.7rem;color:var(--texto3)}
.item.pedido > .btn,.item.pedido > .fila .btn{min-height:40px;padding:8px 14px;font-size:.85rem;align-self:center}
.item.pedido > .fila{gap:6px}
.resumen-cab .total{font-size:1.9rem}

/* pantallas con introducción: el texto va suelto, sin caja */
.card.intro{border:0;background:transparent;padding:0;margin-top:-6px}
.card.intro .chica,.intro-texto{font-size:.9rem;color:var(--texto2);max-width:52ch;margin:0}
.intro-texto{margin-top:-6px}

/* resumen nocturno: vista previa del mensaje */
.card.mensaje{padding:0;overflow:hidden}
.mensaje-cab{padding:12px 16px;border-bottom:1px solid var(--linea);background:var(--sup2)}
.mensaje-cab .chica{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.mensaje-total{padding:18px 16px 10px;display:flex;flex-direction:column;gap:4px}
.mensaje-total .total{font-size:2.2rem}
.card.mensaje .item{margin:0 16px}
.card.mensaje .item .num{text-align:right;max-width:62%}
.card.mensaje > .chica{padding:12px 16px 16px;margin:0}
.chica-l{color:var(--texto2);font-size:.88rem}

/* encabezado: más aire entre el logo y el estado del turno */
header .sub{margin-top:4px}
/* pasada 2 */
.item.largo{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}
.titulo-vista + .intro-texto,.titulo-vista + .card.intro{margin-top:-4px}
.barra{height:4px;background:var(--sup3);border-radius:99px;margin-top:8px}
.barra i{background:var(--texto)}
main.v-panel .card .fila b,.card .fila.sep > b:first-child{font-weight:500}
.cols span.b{border-radius:6px 6px 2px 2px}
.cols small.num{font-family:var(--f-mono);font-size:.68rem;color:var(--texto3)}
/* encabezado en celular: nada se sale por la derecha */
header.top .der{display:flex;align-items:center;gap:6px;flex:none}
@media (max-width:420px){
  .chip-red{font-size:.6rem;padding:5px 8px;letter-spacing:.04em}
  .btn-rol{padding:6px 10px;font-size:.8rem;min-height:34px}
  header.top{padding-left:16px;padding-right:16px}
}
/* carrito y listas: nombres en peso medio, cantidades técnicas */
.linea .nm,.linea b:not(.num){font-weight:500}
.linea .q{font-family:var(--f-mono);font-weight:500;font-size:.85rem}
.item b:not(.num):not(.ped-total){font-weight:500}
.card > button[data-a="receta"]{padding-bottom:0}
/* títulos de ventanas con la misma letra que los de pantalla */
.hoja > h2,.hoja > .fila > h2,.hoja > .sep > h2{font-family:var(--f-display);font-weight:400;letter-spacing:-.04em;font-size:1.3rem}
.hoja .total{font-size:1.8rem}

/* =================== auditoría de acabados =================== */
/* avisos y banners por clase (sin estilos en línea) */
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 22%,white)}
/* una sola familia de texto: Geist (Inter ya no se descarga) */
.prod .n,.logo-neg,.lado-marca b,header .nombre{font-family:var(--f-texto)}
.marca-sub{font-family:var(--f-mono);font-weight:500}
/* la hoja recibe el foco al abrir (para lectores de pantalla), sin anillo */
.hoja:focus{outline:none}
/* alto contraste pedido por el sistema */
@media (prefers-contrast:more){
  :root{--linea:#BDBDC4;--linea2:#9C9CA4;--campo:#5E5E66;--texto2:#3F3F46;--texto3:#4F4F57}
}

/* =================== ronda 1 del dueño exigente =================== */
/* Encabezado: el nombre del negocio y la línea del turno nunca pisan la pastilla de conexión.
   El bloque del nombre toma el espacio que sobra y corta con puntos suspensivos; el logo y la derecha no se estiran. */
header.top > div.logo-neg,header.top > img.logo-img{flex:0 0 auto}   /* gana a «header.top > div:first-child{flex:1}» de blanco.css */
header.top > div.ident{flex:1 1 auto;min-width:0;overflow:hidden}
header.top > div.der{flex:0 0 auto;min-width:max-content}   /* con el logo en letras la derecha queda 2.ª y «div:nth-child(2){flex:1}» (styles.css) la encogía */
header.top .ident .nombre:not(.con-marca),header.top .ident .sub{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.top .ident .nombre:not(.con-marca){line-height:1.2}
header.top .ident .nombre.con-marca{overflow:visible}

/* Pedido en el celular: la barra fija de abajo tiene SIEMPRE la misma altura (total + botones); las líneas van en una
   tarjeta normal debajo de los productos. Agregar productos ya no hace crecer nada encima de la grilla. */
.carrito-resumen{margin:0 0 10px;gap:10px;min-height:2.2rem}
.carrito-resumen .vacio-txt{color:var(--texto2)}
.ver-lista{background:none;border:0;padding:8px 0;margin:-8px 0;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--linea2);text-underline-offset:4px}
.carrito-lista > h3{margin:0 0 2px}
@media (max-width:999px){
  .carrito .lineas{display:none}
}
@media (min-width:1000px){
  .carrito-lista{display:none}
  .carrito .lineas + .carrito-resumen{margin-top:10px}
  .ver-lista{text-decoration:none;cursor:default}
}

/* Pie: sin conexión se dice claro y en rojo */
footer.faro .conexion.off{color:var(--mal)}