/* Sistema visual de las apps de campo: muelle (/proveedor), aliados (/aliado)
   y la demostración (/demo).

   Escena: un dueño de flota en el muelle a pleno sol, o el capitán de sala de
   un restaurante, con el teléfono en la mano y un huésped enfrente. Diez
   segundos para confirmar algo que mueve dinero.

   - Fondo porcelana (blanco apenas frío, no crema) y tinta obsidiana: se lee
     con sol de frente, que es donde más se usa.
   - Color principal: obsidiana de altamar en el muelle, vino en aliados. Va
     en la acción principal y en la marca; nada más.
   - Secundario: el cobre del atardecer sobre la bahía, en filetes, en lo que
     se cobra y en el estado activo. Nunca como relleno de botón.
   - Figtree (autoalojada) en TODO, incluidos los títulos grandes: conserva
     formas abiertas y peso estable bajo el sol. Bodoni Moda salió de los
     títulos (2026-09-21, a petición del dueño): es una Didone y sus trazos
     finos son de 1px en un teléfono, así que con sol de frente se borran por
     grandes que sean. El peso de los títulos lo da ahora el grosor (800) y el
     interletrado apretado, no el contraste del trazo.
   - Lujo por contención: filetes de 1px, aire, fotos sin adornos, sin sombras
     de relieve. */

@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/vendor/figtree-latin.woff2) format("woff2")}

:root{
  --h:235;
  --bg:oklch(0.982 0.003 var(--h));
  --s1:oklch(1 0 0);
  --s2:oklch(0.965 0.004 var(--h));
  --s3:oklch(0.94 0.006 var(--h));
  --line:oklch(0.91 0.006 var(--h));
  --line-2:oklch(0.8 0.01 var(--h));
  --tx:oklch(0.21 0.02 var(--h));
  --tx2:oklch(0.42 0.016 var(--h));
  --tx3:oklch(0.52 0.014 var(--h));

  --prim:oklch(0.25 0.035 var(--h));
  --prim-hi:oklch(0.33 0.04 var(--h));
  --prim-tx:oklch(0.985 0.003 80);

  --cobre:oklch(0.55 0.11 48);
  --cobre-luz:oklch(0.76 0.1 55);
  --cobre-veil:oklch(0.76 0.1 55 / .16);

  --ok:oklch(0.47 0.09 162);  --ok-veil:oklch(0.72 0.1 162 / .16);
  --warn:oklch(0.5 0.1 70);   --warn-veil:oklch(0.82 0.12 82 / .26);
  --info:oklch(0.47 0.09 245); --info-veil:oklch(0.75 0.08 245 / .18);
  --bad:oklch(0.5 0.16 28);   --bad-veil:oklch(0.72 0.14 28 / .14);

  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(18px,4.8vw,36px);
  --r:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-top:20; --z-nav:30; --z-overlay:50; --z-aviso:60;
  color-scheme:light;
}
:root[data-app="aliado"]{--h:18;--prim:oklch(0.31 0.075 18);--prim-hi:oklch(0.39 0.085 18)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cobre);outline-offset:3px;border-radius:6px}
.tab{font-variant-numeric:tabular-nums}
/* Etiquetas compactas pero sin versalitas: se distinguen por peso y color sin
   deformar las letras que hay que leer deprisa en una pantalla pequeña. */
.etq{font-size:.92rem;letter-spacing:.01em;color:var(--tx2);font-weight:700}

/* ── Controles ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;
  padding:.85rem 1.5rem;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-weight:600;font-size:.98rem;letter-spacing:.015em;text-decoration:none;
  background:var(--prim);color:var(--prim-tx);
  transition:background-color .2s var(--ease),transform .2s var(--ease),border-color .2s,opacity .2s}
.btn:hover{background:var(--prim-hi)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:progress}
.btn svg{width:19px;height:19px;flex:none}
.btn.sec{background:transparent;color:var(--tx);border-color:var(--line-2)}
.btn.sec:hover{border-color:var(--tx);background:transparent}
.btn.ghost{background:transparent;color:var(--tx2);min-height:44px;padding:.6rem 1rem}
.btn.ghost:hover{color:var(--tx);background:var(--s2)}
.btn.bloque{width:100%}
.enlace{background:none;border:0;padding:.45rem .2rem;color:var(--tx2);cursor:pointer;font-size:.9rem;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2);text-decoration-thickness:1px}
.enlace:hover{color:var(--tx);text-decoration-color:var(--cobre)}

.campo{display:grid;gap:.45rem}
.campo > span{font-size:.94rem;letter-spacing:.01em;color:var(--tx2);font-weight:700}
.campo input{width:100%;min-height:54px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--s1);padding:.85rem 1rem;font-size:1.05rem;color:var(--tx);transition:border-color .2s,box-shadow .2s}
.campo input::placeholder{color:oklch(0.62 0.012 var(--h))}
.campo input:focus{outline:none;border-color:var(--tx);box-shadow:0 0 0 3px var(--cobre-veil)}
.err{color:var(--bad);font-size:.9rem;min-height:1.3em;margin:0}

.chip{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.24rem .7rem;
  font-size:.82rem;font-weight:700;letter-spacing:.015em;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.pend{color:var(--warn);background:var(--warn-veil)}
.chip.ok{color:var(--ok);background:var(--ok-veil)}
.chip.cola,.chip.cor{color:var(--info);background:var(--info-veil)}
.chip.no{color:var(--bad);background:var(--bad-veil)}

/* ── Marca ─────────────────────────────────────────────────────────────── */
.marca{display:flex;align-items:center;gap:.75rem;min-width:0}
.marca .sello{width:40px;height:40px;flex:none;border-radius:50%;background:var(--prim);
  display:grid;place-items:center;overflow:hidden}
.marca .sello img{width:100%;height:100%;object-fit:contain}
.marca .nom{min-width:0}
.marca b{display:block;font:700 1.12rem/1.15 var(--sans);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca small{display:block;color:var(--tx3);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Barra superior ────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:var(--z-top);background:oklch(0.982 0.003 var(--h) / .88);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line)}
.top .in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:.8rem;
  padding:.75rem var(--gutter);padding-top:max(.75rem, env(safe-area-inset-top,0px))}
.top .marca{flex:1}
main{max-width:1120px;margin:0 auto;padding:1.4rem var(--gutter) 0}

/* ── Entrada ───────────────────────────────────────────────────────────── */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:2rem var(--gutter)}
.entrar .caja{width:100%;max-width:400px;display:grid;gap:1.05rem}
.entrar .emblema{width:88px;height:88px;margin:0 auto .5rem;border-radius:22px}
.entrar h1{font:800 2.15rem/1.1 var(--sans);letter-spacing:-.022em;text-align:center;margin:0;text-wrap:balance}
.entrar p.lema{text-align:center;color:var(--tx2);margin:0 0 .8rem;text-wrap:pretty}
.entrar .pie{text-align:center;color:var(--tx3);font-size:.78rem;margin-top:.8rem;letter-spacing:.04em}
.filete{height:1px;background:linear-gradient(90deg,transparent,var(--cobre-luz),transparent);margin:.2rem 0}

/* ── Avisos en línea ───────────────────────────────────────────────────── */
.aviso{display:flex;gap:.7rem;align-items:flex-start;border-radius:var(--r);padding:.85rem 1rem;
  margin:0 0 1rem;font-size:.92rem;line-height:1.45}
.aviso svg{width:20px;height:20px;flex:none;margin-top:.1rem}
.aviso.off{color:var(--warn);background:var(--warn-veil)}
.aviso.cola{color:var(--info);background:var(--info-veil)}
.aviso span{color:var(--tx)}

/* ── Encabezado de sección ─────────────────────────────────────────────── */
.encab{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:.6rem 0 1.1rem}
.encab h2{font:800 clamp(1.65rem,4.4vw,2.15rem)/1.1 var(--sans);letter-spacing:-.022em;margin:0;text-wrap:balance}
.encab p{margin:.4rem 0 0;color:var(--tx2);font-size:1rem}
.encab .lado{color:var(--tx3);font-size:.9rem;text-align:right;white-space:nowrap}

.resumen{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;padding:1rem 0 1.15rem;margin-bottom:1.3rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.resumen div{display:grid;gap:.1rem}
.resumen b{font-size:1.35rem;font-weight:600}
.resumen b.cobre{color:var(--cobre)}

/* ── Reservaciones ─────────────────────────────────────────────────────── */
.lista-res{display:grid;gap:1.1rem}
@media(min-width:760px){.lista-res{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.lista-res{grid-template-columns:1fr 1fr 1fr}}
.res{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;animation:entra .45s var(--ease) both}
.res:nth-child(2){animation-delay:.05s}.res:nth-child(3){animation-delay:.1s}.res:nth-child(4){animation-delay:.15s}
.res .foto{position:relative;aspect-ratio:16/9;background:var(--s3)}
.res .foto img{width:100%;height:100%;object-fit:cover}
.res .foto .chip{position:absolute;top:.75rem;left:.75rem;background:oklch(1 0 0 / .92)}
.res .cuerpo{padding:1.05rem 1.15rem 1.1rem;display:grid;gap:.5rem;align-content:start}
.res .cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.res .ref{font:500 .8rem var(--mono);letter-spacing:.14em;color:var(--tx3)}
.res h3{margin:0;font:700 1.28rem/1.2 var(--sans);letter-spacing:-.012em;text-wrap:balance}
.res .meta{color:var(--tx2);font-size:.97rem}
.res .cobro{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.8rem 0 .9rem;margin-top:.25rem;border-top:1px solid var(--line)}
.res .cobro b{font-size:1.4rem;font-weight:600;color:var(--tx)}
.res .cobro b.pagado{font-size:.95rem;color:var(--ok)}
.res.llego .foto img{filter:grayscale(.7) brightness(1.04);opacity:.75}
.res.llego h3{color:var(--tx2)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.vacio{color:var(--tx2);text-align:center;padding:3rem 1rem;display:grid;gap:.45rem;justify-items:center}
.vacio b{font:700 1.35rem/1.2 var(--sans);color:var(--tx)}

/* ── Botón flotante ────────────────────────────────────────────────────── */
.fab{position:fixed;left:50%;transform:translateX(-50%);z-index:var(--z-nav);
  bottom:max(1.1rem, calc(env(safe-area-inset-bottom,0px) + .6rem));
  display:inline-flex;align-items:center;gap:.6rem;min-height:56px;padding:.9rem 1.7rem;border-radius:999px;
  border:0;background:var(--prim);color:var(--prim-tx);font-weight:600;font-size:1rem;letter-spacing:.015em;cursor:pointer;
  box-shadow:0 4px 8px oklch(0.2 0.02 var(--h) / .22)}
.fab svg{width:21px;height:21px}
@media(min-width:640px){.fab{left:auto;right:max(var(--gutter), calc((100vw - 1120px)/2 + var(--gutter)));transform:none}}

/* ── Escáner ───────────────────────────────────────────────────────────── */
#scan{position:fixed;inset:0;z-index:var(--z-overlay);background:#000;display:none;flex-direction:column}
#scan.on{display:flex}
#scan video{flex:1;width:100%;object-fit:cover}
#scan .mira{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(64vw,300px);aspect-ratio:1;border-radius:22px;pointer-events:none;box-shadow:0 0 0 100vmax oklch(0 0 0 / .48)}
#scan .mira::before{content:"";position:absolute;inset:0;border-radius:22px;border:2px solid oklch(1 0 0 / .92)}
#scan .mira::after{content:"";position:absolute;left:10%;right:10%;height:2px;top:12%;
  background:var(--cobre-luz);box-shadow:0 0 12px var(--cobre-luz);animation:barre 2.2s var(--ease) infinite alternate}
@keyframes barre{to{top:88%}}
#scan .quien{position:absolute;left:0;right:0;top:max(1.2rem, env(safe-area-inset-top,0px));
  text-align:center;color:#fff;font:700 1.25rem/1.25 var(--sans);padding:0 1rem}
#scan .indica{position:absolute;left:0;right:0;top:calc(42% + min(34vw,160px) + 1.1rem);text-align:center;
  color:oklch(1 0 0 / .86);font-size:.95rem;padding:0 1.5rem}
#scan .abajo{position:absolute;left:0;right:0;bottom:max(1.4rem, env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;padding:0 1rem}
#scan .abajo button{background:oklch(1 0 0 / .14);border:1px solid oklch(1 0 0 / .5);color:#fff;border-radius:999px;
  padding:.85rem 1.4rem;font-weight:600;cursor:pointer}
/* Teclear el código de la hoja cuando la cámara no lee */
#scan .teclear{position:absolute;left:0;right:0;bottom:0;background:var(--bg);color:var(--tx);
  border-radius:18px 18px 0 0;padding:1.3rem var(--gutter) max(1.3rem, env(safe-area-inset-bottom,0px));display:grid;gap:.8rem}
#scan .teclear h4{margin:0;font:700 1.3rem/1.2 var(--sans)}
#scan .teclear p{margin:0;color:var(--tx2);font-size:.92rem}
#scan .teclear input{text-transform:uppercase;letter-spacing:.22em;font-family:var(--mono);font-weight:600;text-align:center}
#scan .teclear .dos{display:grid;grid-template-columns:1fr 1.4fr;gap:.6rem}

/* ── Franja de demostración ────────────────────────────────────────────── */
.franja-demo{position:relative;z-index:var(--z-aviso);display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding:.45rem var(--gutter);padding-top:max(.45rem, env(safe-area-inset-top,0px));
  background:var(--prim);color:var(--prim-tx);font-size:.8rem;letter-spacing:.02em}
.franja-demo > span{display:flex;align-items:center;gap:.5rem}
.franja-demo > span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cobre-luz)}
.franja-demo nav{display:flex;gap:.25rem;flex:none}
.franja-demo a,.franja-demo button{color:var(--prim-tx);background:oklch(1 0 0 / .1);border:0;border-radius:999px;
  padding:.3rem .75rem;font:inherit;text-decoration:none;cursor:pointer}
.franja-demo .largo{display:none}
@media(min-width:560px){.franja-demo .largo{display:inline}}

.version{display:block;text-align:center;color:var(--tx3);font-size:.72rem;margin:2.5rem 0 1rem;font-variant-numeric:tabular-nums}

/* ── Aviso flotante ────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(6.2rem + env(safe-area-inset-bottom,0px));z-index:var(--z-aviso);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:.6rem;
  width:max-content;max-width:min(92vw,440px);padding:.85rem 1.15rem;border-radius:12px;background:var(--prim);color:var(--prim-tx);
  font-weight:500;font-size:.95rem;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:20px;height:20px;flex:none;color:var(--cobre-luz)}
.toast.mal{background:var(--bad);color:#fff}
.toast.mal svg{color:#fff}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #scan .mira::after{display:none}
}

/* ── Mi perfil (app de aliados) ─────────────────────────────────────────── */
.formPerfil{display:grid;gap:1.15rem;margin-top:1.1rem}
.formPerfil textarea{width:100%;min-height:6.5rem;border-radius:10px;
  border:1px solid var(--line-2);background:var(--s1);padding:.85rem 1rem;
  font-size:1.05rem;line-height:1.5;resize:vertical;transition:border-color .2s,box-shadow .2s}
.formPerfil textarea:focus{outline:none;border-color:var(--tx);box-shadow:0 0 0 3px var(--cobre-veil)}
.formPerfil .pista{display:block;margin-top:.35rem;font-size:.86rem;color:var(--tx3);line-height:1.45}
.formPerfil .aviso{margin:0;min-height:1.3em;font-size:.92rem;color:var(--ok);font-weight:600}
.fotoPerfil{display:grid;gap:.7rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.fotoPrevia{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--s2);
  border:1px solid var(--line);display:grid;place-items:center}
.fotoPrevia img{width:100%;height:100%;object-fit:cover}
.fotoPrevia .sinFoto{color:var(--tx3);font-size:.92rem}
.fotoPerfil .pista{margin:0;font-size:.86rem;color:var(--tx3);line-height:1.45}