/* Apps por rol de la plataforma — «Carta náutica».
   Va sobre apps-base.css (base común: cáscara, barra, píldora, listas, odómetro) y sólo trae lo propio:
   - papel claro para leer con sol y tarjetas «noche» con la carta náutica viva (carta-nautica.js);
   - la barra de secciones flota abajo como un muelle de vidrio; en escritorio es lateral (núcleo);
   - piezas por rol: pase de abordar (huésped), tarjeta de cortesía y sonar (aliados), tablero de zarpes
     (operadores), tarjeta de enlace (promotores); escáner, entrada, hoja, aviso y celebración comunes.
   Color: sólo tokens (tokens.css). Lo que sigue a la marca usa --marca/--noche/--champan: marca-ident.js los
   reemplaza cuando la marca trae color propio. */

body.ap{--fondo:var(--papel);--superficie:var(--tarjeta);--sans:var(--apps-sans);--display:var(--apps-sans);
  font-family:var(--apps-sans);font-weight:400;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(110% 50% at 100% -8%,color-mix(in srgb,var(--marca) 9%,transparent),transparent 60%),
    radial-gradient(80% 40% at -10% 0%,color-mix(in srgb,var(--acento) 7%,transparent),transparent 55%),
    var(--papel);
  padding-bottom:calc(104px + env(safe-area-inset-bottom))}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(/vendor/figtree-latin.woff2) format("woff2")}
body.ap *,body.ap *::before,body.ap *::after{box-sizing:border-box}
:where(body.ap) :where(button,input,select,textarea){font:inherit;color:inherit}
body.ap [hidden]{display:none!important}
body.ap img{max-width:100%}
body.ap.sin-sesion{padding-bottom:0}
@media (pointer:coarse){body.ap input,body.ap select,body.ap textarea{font-size:16px}}

/* ── Cabecera ── */
.ap-top{border-bottom:1px solid color-mix(in srgb,var(--tinta) 7%,transparent)}
.ap-simbolo{background:var(--noche);box-shadow:0 0 0 1px color-mix(in srgb,var(--champan) 40%,transparent);overflow:hidden;border-radius:50%}
.ap-simbolo img{width:100%;height:100%;object-fit:contain}
.ap-simbolo.ap-icono{border-radius:10px;box-shadow:none}
.ap-simbolo.ap-icono img{object-fit:cover}
.ap-marca{font-weight:800;letter-spacing:-.01em}
.ap-rol small{display:block;font:600 .78rem/1.1 var(--apps-sans);color:var(--tinta-3);letter-spacing:0}
.ap-salir{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tinta) 12%,transparent);
  background:var(--tarjeta);color:var(--tinta-2);font-weight:700;font-size:.9rem;cursor:pointer}
.ap-salir:hover{color:var(--tinta)}
.ap-salir{display:inline-flex;align-items:center;gap:6px}
.ap-salir svg{width:20px;height:20px;flex:none}
@media (max-width:480px){.ap-salir{width:44px;padding:0;justify-content:center}.ap-salir span{display:none}.ap-top{gap:6px}}

/* ── Barra de secciones: muelle de vidrio flotante (teléfono) ── */
@media (max-width:899px){
  .ap-nav{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px));
    padding:6px;border-radius:28px;border:1px solid color-mix(in srgb,var(--tinta) 8%,transparent);overflow:hidden;
    box-shadow:0 20px 44px -18px color-mix(in srgb,var(--noche) 60%,transparent),0 2px 6px color-mix(in srgb,var(--noche) 8%,transparent);
    backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
  .ap-nav a{min-height:58px;border-radius:22px;font-size:.76rem}
  .ap-pildora{border-radius:22px}
}
.ap-nav a{color:var(--tinta-3)}
.ap-nav a[aria-current="page"]{color:var(--tinta)}
.ap-nav .emoji.nav{width:30px;height:30px;filter:saturate(.5) opacity(.72);transition:filter var(--dur-normal) var(--curva),transform .35s var(--curva)}
.ap-nav a[aria-current="page"] .emoji.nav{filter:none;transform:translateY(-2px) scale(1.12)}
.ap-pildora{background:color-mix(in srgb,var(--marca) 22%,var(--tarjeta));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--marca) 35%,transparent)}
@media (min-width:900px){
  .ap-nav{background:color-mix(in srgb,var(--tarjeta) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .ap-nav .emoji.nav{width:28px;height:28px}
}

/* ── Vista ── */
.ap-vista{padding-top:18px}
@media (min-width:900px){.ap-vista{max-width:1080px}}
.vista-cab h1{font-size:clamp(1.75rem,6vw,2.4rem);letter-spacing:-.03em;line-height:1.05}
.vista-cab p{color:var(--tinta-2)}
.vista-cab .kick{display:block;margin:0 0 .3rem;font:700 .78rem/1.2 var(--apps-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--marca-oscura)}
.tarjeta{background:var(--tarjeta);box-shadow:0 1px 2px color-mix(in srgb,var(--noche) 5%,transparent),0 16px 36px -24px color-mix(in srgb,var(--noche) 45%,transparent);
  border:1px solid color-mix(in srgb,var(--tinta) 5%,transparent);padding:clamp(16px,4vw,22px)}
.t-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.t-cab h2{margin:0}
.t-cab small{color:var(--tinta-3)}
.rejilla{display:grid;gap:14px}
@media (min-width:760px){.rejilla.dos{grid-template-columns:1fr 1fr;align-items:start}.rejilla.dos>*{margin:0}}
.gris{color:var(--tinta-2)}
.chip{background:color-mix(in srgb,var(--marca) 20%,var(--tarjeta));color:var(--marca-oscura)}
.chip.info{background:color-mix(in srgb,var(--info) 12%,var(--tarjeta));color:var(--info)}
.btn{background:var(--noche);color:var(--sobre-noche);font-weight:700;letter-spacing:.01em}
.btn:hover{background:var(--noche-2)}
.btn.marca{background:var(--marca);color:var(--sobre-marca)}
.btn.marca:hover{background:var(--marca-hover)}
.btn.claro{background:var(--tarjeta);color:var(--tinta);border:1px solid color-mix(in srgb,var(--tinta) 14%,transparent)}
.btn.ancho{width:100%}
.btn svg{width:20px;height:20px;flex:none}
/* Emoji 3D de las acciones (acciones-emoji.js), al tamaño de los emojis chicos de botón (.emoji.mini). */
.btn .acc-ico{--acc:24px}
.ap-salir .acc-ico{--acc:28px}
.sonar .ojo .acc-ico{--acc:60px}
.ayuda .wa .acc-ico{--acc:38px}
.campo input,.campo select,.campo textarea{background:var(--tarjeta);border-color:color-mix(in srgb,var(--tinta) 18%,transparent);border-radius:14px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid color-mix(in srgb,var(--marca) 45%,transparent);outline-offset:1px;border-color:var(--marca-oscura)}
.campo .pista{font-weight:400;color:var(--tinta-3)}
.error-txt{min-height:1.3em;margin:0;color:var(--error);font-size:.92rem}
.vacio{display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 12px;color:var(--tinta-2)}
.vacio b{color:var(--tinta);font-size:1.05rem}
.fila-dato{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fila-dato small{display:block;color:var(--tinta-3)}
.fila-dato .der{display:grid;justify-items:end;gap:4px;text-align:right}
.fila-dato .der b{font-variant-numeric:tabular-nums}
.lista>li{box-shadow:none;border:1px solid color-mix(in srgb,var(--tinta) 6%,transparent)}
.num{font-variant-numeric:tabular-nums}

/* ── Tarjeta «noche»: la carta náutica viva detrás ─────────────────────────── */
.noche{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radio-heroe);color:var(--sobre-noche);
  padding:clamp(18px,5vw,28px);margin:0 0 14px;display:grid;gap:16px;
  background:radial-gradient(120% 90% at 92% -10%,color-mix(in srgb,var(--acento) 26%,transparent),transparent 58%),
    linear-gradient(158deg,var(--noche) 30%,var(--noche-2));
  box-shadow:var(--sombra-alta)}
.noche canvas.carta{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:0;transition:opacity 1.1s var(--curva)}
.noche canvas.carta.viva{opacity:1}
.noche::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--noche) 70%,transparent),color-mix(in srgb,var(--noche) 10%,transparent) 65%)}
.noche .rosa{position:absolute;right:-18px;top:-18px;width:132px;height:132px;opacity:.5;pointer-events:none;color:var(--champan)}
.kicker{margin:0;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;
  font:700 .76rem/1.2 var(--apps-sans);letter-spacing:.17em;text-transform:uppercase;color:var(--champan)}
.noche h1,.noche h2{margin:0;color:var(--sobre-noche);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.noche h1{font-size:clamp(2rem,8.5vw,3rem)}
.noche h2{font-size:clamp(1.4rem,5.5vw,1.9rem)}
.noche p{margin:0;color:color-mix(in srgb,var(--sobre-noche) 78%,transparent);max-width:34rem}
.noche .odo{font-size:clamp(3rem,15vw,4.6rem);letter-spacing:-.04em;color:var(--sobre-noche)}
.noche .odo.dinero{color:var(--champan)}
.noche .od-suf{color:color-mix(in srgb,var(--sobre-noche) 70%,transparent)}
.cifra-grande{display:grid;gap:4px}
.cifra-grande small{color:color-mix(in srgb,var(--sobre-noche) 72%,transparent);font-weight:600;font-size:.92rem}
.vidrios{display:flex;flex-wrap:wrap;gap:8px}
.vidrio{display:inline-grid;gap:1px;min-width:7rem;padding:9px 13px;border-radius:18px;background:var(--vidrio-noche);
  border:1px solid color-mix(in srgb,var(--sobre-noche) 16%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vidrio span{font-size:.78rem;font-weight:600;color:color-mix(in srgb,var(--sobre-noche) 72%,transparent)}
.vidrio b{font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vidrio b>span.importe{font-size:inherit;font-weight:inherit;color:inherit}
.noche .btn{background:var(--marca);color:var(--sobre-marca)}
.noche .btn.vidrio-btn{background:var(--vidrio-noche);color:var(--sobre-noche);border:1px solid color-mix(in srgb,var(--sobre-noche) 26%,transparent)}
.noche a{color:var(--sobre-noche)}
.noche .chip{background:var(--vidrio-noche);color:var(--sobre-noche);border:1px solid color-mix(in srgb,var(--sobre-noche) 18%,transparent)}
.noche .chip.marca{background:var(--marca);color:var(--sobre-marca);border:0}

/* ── Anillo de avance ── */
.anillo{position:relative;display:grid;place-items:center;flex:none;width:112px;height:112px}
.anillo svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:8}
.anillo .fondo{stroke:color-mix(in srgb,var(--sobre-noche) 14%,transparent)}
.anillo .avance{stroke:var(--marca);stroke-linecap:round}
.anillo b{font:800 1.75rem/1 var(--apps-sans);letter-spacing:-.02em}
.anillo small{display:block;margin-top:3px;font-size:.7rem;color:color-mix(in srgb,var(--sobre-noche) 70%,transparent);text-align:center}

/* ── Pase de abordar (huésped) ── */
.pase{padding:0;gap:0}
.pase-cuerpo{display:grid;gap:14px;padding:clamp(18px,5vw,26px)}
.pase-ruta{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px}
.pase-ruta b{display:block;font:800 2.3rem/1 var(--apps-sans);letter-spacing:-.02em}
.pase-ruta small{display:block;font-size:.8rem;opacity:.75}
.pase-ruta .der{text-align:right}
.pase-linea{position:relative;height:26px;margin-bottom:10px}
.pase-linea::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed color-mix(in srgb,var(--sobre-noche) 40%,transparent)}
.pase-linea i{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--marca);transform-origin:0 50%;transform:scaleX(0)}
.pase-barco{position:absolute;top:50%;left:0;width:28px;height:28px;margin:-15px 0 0 -14px;color:var(--marca)}
.pase-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0}
.pase-datos dt{font-size:.78rem;opacity:.72}
.pase-datos dd{margin:0;font-weight:700}
.pase-corte{position:relative;height:0;margin:0 22px;border-top:2px dashed color-mix(in srgb,var(--sobre-noche) 30%,transparent)}
.pase-corte::before,.pase-corte::after{content:"";position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--papel)}
.pase-corte::before{left:-35px}.pase-corte::after{right:-35px}
.pase-talon{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px clamp(18px,5vw,26px) 20px}
.pase-talon p{margin:0 0 8px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--champan)}
.pase-qr{display:grid;place-items:center;width:96px;height:96px;padding:6px;border-radius:14px;background:var(--tarjeta)}
.pase-qr img{width:100%;height:100%}
.cuenta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cuenta li{overflow:hidden;padding:7px 2px;border-radius:12px;text-align:center;background:var(--vidrio-noche);border:1px solid color-mix(in srgb,var(--sobre-noche) 16%,transparent)}
.cuenta b{display:block;font:800 1.45rem/1.1 var(--apps-sans);font-variant-numeric:tabular-nums}
.cuenta b.tic{animation:tic .45s var(--curva)}
@keyframes tic{0%{transform:translateY(-40%);opacity:.2}100%{transform:none;opacity:1}}
.cuenta small{font-size:.7rem;opacity:.8}
/* Pase con la foto real del tour (hoja de reservación, evento a bordo): la foto arriba es el boleto, el título se
   lee sobre su degradado y el talón trae el QR grande para escanear con el código debajo. Misma pieza (pase-reserva.js). */
.pase-boleto .pase-foto{position:relative;aspect-ratio:16/9;max-height:230px;width:100%;overflow:hidden;background:var(--noche-2)}
.pase-boleto .pase-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pase-boleto .pase-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,var(--noche) 70%,transparent) 62%,var(--noche))}
.pase-boleto .pase-cuerpo{position:relative;margin-top:-34px;padding-top:0;gap:12px}
.pase-boleto .kicker{color:var(--sobre-noche);text-shadow:0 1px 8px color-mix(in srgb,var(--noche) 80%,transparent)}
.pase-boleto .kicker,.pase-grande .kicker{font-size:.875rem;letter-spacing:.12em}
.pase-boleto .pase-ruta small,.pase-grande .pase-ruta small{font-size:.875rem}
.cab-color .ap-rol small{font-size:.875rem}
.pase-boleto h1{font-size:clamp(1.55rem,6.4vw,2.1rem);line-height:1.05}
.pase-boleto .pase-ruta b{font-size:1.9rem}
.pase-estado{display:inline-flex;align-items:center;gap:6px;min-height:28px;font-size:.875rem;padding:3px 10px;border-radius:999px;letter-spacing:.08em;
  background:var(--vidrio-noche);border:1px solid color-mix(in srgb,var(--sobre-noche) 22%,transparent);color:var(--sobre-noche)}
.pase-estado::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pase-estado.ok{background:var(--marca);color:var(--sobre-marca);border-color:transparent}
.pase-estado.espera{background:var(--champan);color:var(--noche);border-color:transparent}
.pase-estado.usado{background:var(--sobre-noche);color:var(--noche);border-color:transparent}
.pase-estado.mal{background:var(--error);color:var(--sobre-noche);border-color:transparent}
.pase-chips{display:flex;flex-wrap:wrap;gap:8px}
.pase-chips .chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border-radius:999px;font-size:.9rem;font-weight:700}
.pase-chips .chip .emoji{width:20px;height:20px}
.pase-cuenta p{margin:0 0 8px;font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--champan)}
.pase-grande .pase-talon{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
.pase-qr.grande{width:min(62vw,232px);height:auto;margin:0;padding:12px 12px 8px;border-radius:20px;gap:4px}
.pase-qr.grande img{width:100%;height:auto;aspect-ratio:1}
.pase-qr.grande figcaption{font:800 clamp(1.35rem,6.4vw,1.7rem)/1.1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--noche)}
.pase-talon .pide{margin:0;max-width:30ch;font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--sobre-noche)}
.pase-talon .pide small{display:block;margin-top:4px;font-weight:500;font-size:.9rem;color:color-mix(in srgb,var(--sobre-noche) 88%,transparent)}

/* Ruta del viaje: línea con nodos (reservas del huésped, ventas del promotor) */
.ruta{position:relative;list-style:none;margin:0;padding:0 0 0 30px;display:grid;gap:12px}
.ruta::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:3px;border-radius:3px;background:color-mix(in srgb,var(--tinta) 10%,transparent)}
.ruta .relleno{position:absolute;left:10px;top:14px;width:3px;border-radius:3px;height:calc(100% - 28px);background:linear-gradient(var(--marca),var(--marca-oscura));transform-origin:50% 0;transform:scaleY(0)}
.ruta>li{position:relative}
.ruta>li::before{content:"";position:absolute;left:-26px;top:24px;width:13px;height:13px;border-radius:50%;background:var(--tarjeta);border:3px solid var(--marca-oscura);z-index:1}
.ruta>li.hecho::before{background:var(--marca-oscura)}
.ruta>li.ahora::before{background:var(--marca);border-color:var(--noche);box-shadow:0 0 0 6px color-mix(in srgb,var(--marca) 35%,transparent);animation:latido 2.4s ease-in-out infinite}
@keyframes latido{50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--marca) 6%,transparent)}}

/* Tarjeta de viaje (huésped) */
.viaje{display:grid;grid-template-columns:104px 1fr;overflow:hidden;padding:0;border-radius:22px}
.viaje .foto{position:relative;background:var(--noche)}
.viaje .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viaje .cuerpo{padding:14px 16px;display:grid;gap:6px;min-width:0}
.viaje h3{margin:0;font-size:1.05rem;line-height:1.2;letter-spacing:-.01em}
.viaje .meta{color:var(--tinta-3);font-size:.86rem}
.viaje .acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.viaje input[type=date]{min-height:44px;padding:0 10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tinta) 18%,transparent);background:var(--tarjeta)}
@media (min-width:560px){.viaje{grid-template-columns:160px 1fr}}

/* Mosaicos de experiencias (huésped › Explore) */
.mosaico{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.exp{position:relative;display:grid;align-content:end;min-height:230px;overflow:hidden;border-radius:24px;color:var(--sobre-noche);text-decoration:none;isolation:isolate;
  background:var(--noche);box-shadow:0 16px 36px -24px color-mix(in srgb,var(--noche) 70%,transparent)}
.exp img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--curva)}
.exp::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,color-mix(in srgb,var(--noche) 88%,transparent),transparent 62%)}
.exp:hover img{transform:scale(1.05)}
.exp .t{padding:16px;display:grid;gap:4px}
.exp b{font-size:1.08rem;line-height:1.2}
.exp small{opacity:.82}
.exp .precio{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.exp .precio strong{color:var(--champan);font-size:1.05rem}
.filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:2px}
.filtros button{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tinta) 12%,transparent);background:var(--tarjeta);font-weight:700;cursor:pointer;color:var(--tinta-2)}
.filtros button[aria-pressed="true"]{background:var(--noche);color:var(--sobre-noche);border-color:var(--noche)}
.buscador{position:relative;margin:0 0 12px}
.buscador input{width:100%;min-height:52px;padding:0 16px 0 46px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tinta) 14%,transparent);background:var(--tarjeta);font-size:1rem}
.buscador svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--tinta-3)}

/* Clima: la semana como un horizonte */
.clima{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.dia{display:grid;justify-items:center;gap:4px;padding:14px 8px;border-radius:20px;background:var(--tarjeta);border:1px solid color-mix(in srgb,var(--tinta) 6%,transparent);text-align:center}
.dia .i{font-size:2rem;line-height:1}
.dia b{font-size:1.25rem}
.dia small{color:var(--tinta-3)}
.dia.hoy{background:var(--noche);color:var(--sobre-noche);border-color:var(--noche)}
.dia.hoy small{color:color-mix(in srgb,var(--sobre-noche) 70%,transparent)}

/* ── Tarjeta física que se inclina (cortesía del aliado, enlace del promotor) ── */
.fisica{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;color:var(--sobre-noche);padding:20px 22px;min-height:190px;
  display:grid;align-content:space-between;gap:10px;touch-action:pan-y;will-change:transform;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--marca) 55%,transparent),transparent 58%),
    radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--champan) 26%,transparent),transparent 60%),
    linear-gradient(150deg,var(--noche),var(--noche-2));
  box-shadow:var(--sombra-alta)}
.fisica .brillo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 45% at var(--bx,30%) var(--by,20%),color-mix(in srgb,var(--sobre-noche) 24%,transparent),transparent 70%)}
.fisica .arriba{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 .74rem/1.2 var(--apps-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--champan)}
.fisica code{font:600 .98rem ui-monospace,Menlo,monospace;letter-spacing:.2em;color:var(--sobre-noche);overflow-wrap:anywhere}
.fisica .monto{font:800 clamp(2.6rem,12vw,3.4rem)/1 var(--apps-sans);letter-spacing:-.035em;color:var(--champan)}
.fisica small{color:color-mix(in srgb,var(--sobre-noche) 76%,transparent)}
.fisica .chip-oro{width:44px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--champan),color-mix(in srgb,var(--champan) 40%,var(--noche)))}

/* ── Sonar: el botón grande de escanear (aliados) ── */
.sonar{position:relative;display:grid;justify-items:center;gap:10px;padding:34px 16px 26px;border:0;background:none;width:100%;cursor:pointer;color:var(--sobre-noche);text-align:center}
.sonar .ojo{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--marca);color:var(--sobre-marca);
  box-shadow:0 0 0 10px color-mix(in srgb,var(--marca) 18%,transparent)}
.sonar .ojo svg{width:48px;height:48px}
.sonar .ojo::before,.sonar .ojo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--marca);animation:sonar 2.6s var(--curva) infinite}
.sonar .ojo::after{animation-delay:1.3s}
@keyframes sonar{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.3);opacity:0}}
.sonar b{font-size:1.2rem;font-weight:800}
.sonar span{font-size:.92rem;color:color-mix(in srgb,var(--sobre-noche) 76%,transparent)}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:p}
.pasos li{counter-increment:p;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.pasos li::before{content:counter(p);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--marca) 22%,var(--tarjeta));color:var(--marca-oscura);font-weight:800}
.pasos b{display:block}
.pasos small{color:var(--tinta-2)}

/* ── Tablero de zarpes (operadores): letras de solapa como en un muelle ── */
.tablero{display:grid;gap:8px;margin:4px 0 0}
.zarpe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--vidrio-noche);border:1px solid color-mix(in srgb,var(--sobre-noche) 12%,transparent)}
.zarpe .hora{display:flex;gap:2px;grid-row:span 2}
.zarpe .estado{justify-self:start}
.solapa{display:inline-grid;place-items:center;width:1.12em;height:1.55em;border-radius:5px;font:800 1rem/1 ui-monospace,Menlo,monospace;color:var(--sobre-noche);
  background:linear-gradient(180deg,color-mix(in srgb,var(--noche) 55%,var(--noche-2)) 50%,var(--noche) 50%);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--sobre-noche) 10%,transparent);
  animation:solapa .5s var(--curva) both;animation-delay:calc(var(--i,0) * 70ms)}
.solapa.sep{width:.4em;background:none;box-shadow:none}
@keyframes solapa{0%{transform:rotateX(90deg);opacity:0}60%{transform:rotateX(-12deg);opacity:1}100%{transform:none}}
.zarpe .que{min-width:0}
.zarpe .que b{display:block;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zarpe .que small{font-size:.8rem;color:color-mix(in srgb,var(--sobre-noche) 70%,transparent)}
.zarpe .estado{font:700 .66rem/1 var(--apps-sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 7px;white-space:nowrap;border-radius:8px;background:color-mix(in srgb,var(--champan) 20%,transparent);color:var(--champan)}
.zarpe .estado.ok{background:color-mix(in srgb,var(--marca) 25%,transparent);color:var(--marca)}

/* Reservación del operador */
.salidas{display:grid;gap:12px}
@media (min-width:760px){.salidas{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.salidas{grid-template-columns:1fr 1fr 1fr}}
.salida{display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0;border-radius:24px;margin:0}
.salida .foto{position:relative;aspect-ratio:16/8;background:var(--noche)}
.salida .foto img{width:100%;height:100%;object-fit:cover}
.salida .foto .chip{position:absolute;top:12px;left:12px;background:var(--tarjeta);color:var(--tinta)}
.salida .foto .chip.ok{color:var(--ok)}
.salida .cuerpo{display:grid;gap:8px;padding:14px 16px 16px}
.salida .ref{font:600 .78rem ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--tinta-3)}
.salida h3{margin:0;font-size:1.2rem;line-height:1.2;letter-spacing:-.015em}
.salida .meta{color:var(--tinta-2);font-size:.94rem}
.salida .cobro{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--tinta) 8%,transparent)}
.salida .cobro b{font-size:1.35rem;letter-spacing:-.01em}
.salida .cobro b.pagado{font-size:.95rem;color:var(--ok)}
.salida.llego .foto img{filter:grayscale(.7);opacity:.7}
.fab-escanear{position:fixed;z-index:25;right:max(16px,env(safe-area-inset-right));bottom:calc(96px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;
  min-height:58px;padding:0 26px;border:0;border-radius:999px;background:var(--marca);color:var(--sobre-marca);font-weight:800;font-size:1.02rem;cursor:pointer;
  box-shadow:0 16px 34px -12px color-mix(in srgb,var(--noche) 60%,transparent),0 0 0 6px color-mix(in srgb,var(--marca) 22%,transparent)}
.fab-escanear svg{width:22px;height:22px}
@media (min-width:900px){.fab-escanear{right:32px;bottom:32px}}
.banda{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;margin:0 0 12px;font-size:.93rem;line-height:1.45}
.banda svg{width:20px;height:20px;flex:none;margin-top:1px}
.banda.off{background:color-mix(in srgb,var(--aviso) 14%,var(--tarjeta));color:var(--aviso)}
.banda.cola{background:color-mix(in srgb,var(--info) 12%,var(--tarjeta));color:var(--info)}
.banda span{color:var(--tinta)}
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 14px}
@media (min-width:760px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifra{display:grid;gap:2px;padding:14px 16px;border-radius:20px;background:var(--tarjeta);border:1px solid color-mix(in srgb,var(--tinta) 6%,transparent)}
.cifra span{font-size:.82rem;font-weight:700;color:var(--tinta-2)}
.cifra b{font:800 1.6rem/1.1 var(--apps-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifra img{width:36px;height:36px;object-fit:contain;margin-bottom:4px}
.dia-rep{display:grid;grid-template-columns:3.4rem 1fr auto;gap:12px;align-items:center}
.dia-rep .d{text-align:center;line-height:1.05}
.dia-rep .d b{display:block;font-size:1.4rem}
.dia-rep .d small{color:var(--tinta-3);font-size:.74rem}

/* ── Segmentado con píldora (vistas del operador, clase de salida) ── */
.segmento{position:relative;isolation:isolate;display:inline-flex;gap:2px;padding:4px;border-radius:999px;margin:0 0 14px;
  background:color-mix(in srgb,var(--tarjeta) 70%,transparent);border:1px solid color-mix(in srgb,var(--tinta) 8%,transparent)}
.segmento button{position:relative;z-index:1;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;font-weight:700;color:var(--tinta-2);cursor:pointer;transition:color .2s}
.segmento button[aria-pressed="true"]{color:var(--tinta)}
.segmento .pildora{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--tarjeta);box-shadow:0 2px 8px color-mix(in srgb,var(--noche) 14%,transparent);pointer-events:none}

/* ── Escáner ── */
.escaner{position:fixed;inset:0;z-index:70;background:var(--noche);display:flex;flex-direction:column}
.escaner video{flex:1;width:100%;object-fit:cover}
.escaner canvas{flex:1;display:block;width:100%;min-height:0}
/* «Probar escáner» (sólo hosts demo-*, aliado-nucleo.js): bajo el sonar, antes de escribir el folio. */
.probar-escaner{display:grid;gap:6px;margin:12px 0}
.chip-prueba{justify-self:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--tinta) 35%,transparent);
  background:transparent;color:var(--tinta-2);font-size:.9375rem;cursor:pointer}
.chip-prueba b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--tinta)}
#formPerfil .campo{margin-bottom:14px}
/* «Mi perfil» en la demo: la cuenta de ejemplo la comparten todos los visitantes (aliado-nucleo.js). */
.aviso-demo{margin:0 0 14px;padding:12px 14px;border-radius:12px;font-weight:700;font-size:.9375rem;color:var(--tinta);
  background:color-mix(in srgb,var(--aviso) 12%,var(--tarjeta));border:1px solid color-mix(in srgb,var(--aviso) 40%,transparent)}
.escaner .mira{position:absolute;left:50%;top:42%;width:min(64vw,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28px;pointer-events:none;
  box-shadow:0 0 0 100vmax color-mix(in srgb,var(--noche) 55%,transparent)}
.escaner .mira::before{content:"";position:absolute;inset:0;border-radius:28px;border:2px solid var(--sobre-noche)}
.escaner .mira::after{content:"";position:absolute;left:8%;right:8%;top:10%;height:2px;background:var(--marca);box-shadow:0 0 14px var(--marca);animation:barre 2.2s var(--curva) infinite alternate}
@keyframes barre{to{top:88%}}
.escaner .quien{position:absolute;left:0;right:0;top:max(20px,env(safe-area-inset-top));padding:0 16px;text-align:center;color:var(--sobre-noche);font-weight:800;font-size:1.2rem}
.escaner .indica{position:absolute;left:0;right:0;top:calc(42% + min(34vw,160px) + 16px);padding:0 24px;text-align:center;color:color-mix(in srgb,var(--sobre-noche) 85%,transparent)}
.escaner .abajo{position:absolute;left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 16px}
.escaner .abajo button{min-height:48px;padding:0 20px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sobre-noche) 45%,transparent);background:var(--vidrio-noche);color:var(--sobre-noche);font-weight:700;cursor:pointer}
.escaner .teclear{position:absolute;left:0;right:0;bottom:0;display:grid;gap:12px;padding:20px 20px max(20px,env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:var(--tarjeta);color:var(--tinta)}
.escaner .teclear h2{margin:0}
.escaner .teclear input{text-transform:uppercase;letter-spacing:.22em;text-align:center;font-family:ui-monospace,Menlo,monospace;font-weight:700}
.escaner .teclear .dos{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}

/* ── Hoja de confirmación, aviso flotante, celebración (apps-rol.js) ── */
/* La hoja en sí (dialog.hoja, su cabecera de color y su cuerpo) vive en hoja.css, compartida con el sitio público. */
.hoja-botones{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:6px}
.hoja-botones .btn{min-height:50px}
/* ── Barra y cabecera de cada pantalla sobre la noche de la marca; el contenido, claro, debajo ──
   Tres tonos: la barra (el más oscuro), la cabecera de la pantalla (la noche) y el contenido (papel). El modelo es la
   página pública de un negocio. Vale para todos los giros de la app de aliados y no depende del modo claro u oscuro:
   la cabecera siempre es noche con texto claro, y el contenido usa los tokens de cada modo. */
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion){--cab-barra:color-mix(in srgb,var(--noche) 72%,#000);--cab-fondo:var(--noche);--cab-tinta:var(--sobre-noche);
  --cab-tinta-2:color-mix(in srgb,var(--sobre-noche) 80%,var(--noche))}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion) .ap-top{background:var(--cab-barra);border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion) :is(.ap-marca,.ap-rol){color:var(--cab-tinta)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion) .ap-rol small{color:var(--cab-tinta-2)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion) :is(.ap-salir,.ap-coment,.ap-cab){background:transparent;border-color:color-mix(in srgb,var(--cab-tinta) 38%,transparent);color:var(--cab-tinta)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion) .ap-simbolo{box-shadow:0 0 0 1px color-mix(in srgb,var(--champan) 60%,transparent)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"],.cab-color):not(.sin-sesion) .ap-top :focus-visible{outline-color:var(--cab-tinta)}
/* La cabecera de la pantalla sangra hasta los bordes de la vista y se cierra con una curva sobre el contenido. */
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista > .vista-cab,body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista > div > .vista-cab{
  margin:-18px calc(-1 * max(16px,env(safe-area-inset-right))) 18px calc(-1 * max(16px,env(safe-area-inset-left)));
  padding:20px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));border-radius:0 0 26px 26px;background:var(--cab-fondo);color:var(--cab-tinta)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista .vista-cab h1{color:var(--cab-tinta)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista .vista-cab p{color:var(--cab-tinta-2)}
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista .vista-cab .kick{color:var(--champan)}
@media (min-width:900px){
  body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista > .vista-cab,body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"],[data-login-role="desarrollador"]) .ap-vista > div > .vista-cab{margin:-28px 0 22px;padding:26px 28px 28px;border-radius:0 0 26px 26px}
}

/* ── La hoja con cabecera de color (§4c) y contenido propio (§4d): abrirHoja() en aliado-nucleo.js ── */
.hoja-cuerpo .noche{margin:0}
/* La hoja de confirmación de siempre (apps-rol.js) también lleva su título sobre color. */

/* ── Páginas cortas (§4d): lo secundario de una pantalla, en botones compactos que abren su hoja ── */
.hojas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.abre-hoja{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic nombre fl" "ic dato fl";align-items:center;column-gap:10px;min-height:64px;padding:10px 12px;
  border:1px solid var(--linea);border-radius:16px;background:var(--tarjeta);color:var(--tinta);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--rc-sombra,var(--sombra))}
.abre-hoja .emoji{grid-area:ic;width:34px;height:34px}
.ah-nombre{grid-area:nombre;font-weight:700;font-size:.9375rem;line-height:1.2}
.ah-dato{grid-area:dato;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-2);font-weight:600;font-size:.875rem;font-variant-numeric:tabular-nums}
.ah-flecha{grid-area:fl;color:var(--tinta-3)}
.abre-hoja:focus-visible{outline:3px solid var(--marca-oscura);outline-offset:2px}
/* Mi código: un botón grande «Ver mi QR» abre el sticker en su hoja, al tamaño de siempre (340 px de ancho: se escanea
   desde otra pantalla). Compartir y Descargar van arriba, para que el QR quede entero a la vista sin desplazarse. */
.ver-qr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:92px;margin:0 0 12px;padding:14px 16px;border:0;border-radius:20px;
  background:var(--marca);color:var(--sobre-marca);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--rc-sombra,var(--sombra))}
.ver-qr .emoji{width:56px;height:56px}
.ver-qr b{display:block;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
.ver-qr small{display:block;margin-top:2px;font-size:.875rem;font-weight:600}
.ver-qr code{font:800 .875rem ui-monospace,Menlo,monospace;letter-spacing:.08em}
.ver-qr:focus-visible{outline:3px solid var(--marca-oscura);outline-offset:3px}
.hoja-cuerpo .qr-tarjeta{justify-items:center;text-align:center}
.hoja-cuerpo .qr-tarjeta .rejilla.dos{width:100%;grid-template-columns:1fr 1fr;gap:10px}

/* «Cómo funciona»: el clip de la pantalla, dentro de la hoja. */
.tutorial{margin:0 0 14px}
.tutorial .btn{min-height:44px;gap:8px}
.hoja-tutorial video{display:block;justify-self:center;width:auto;height:auto;max-width:100%;max-height:min(60dvh,560px);aspect-ratio:360/780;border-radius:18px;background:var(--papel)}
.hoja-botones.una{grid-template-columns:1fr}
.btn.peligro{background:var(--error);color:var(--sobre-noche)}
.ar-aviso{position:fixed;left:50%;z-index:60;bottom:calc(100px + env(safe-area-inset-bottom));transform:translate(-50%,14px) scale(.98);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:min(92vw,440px);padding:13px 17px;border-radius:18px;background:var(--noche);color:var(--sobre-noche);
  font:600 .95rem/1.35 var(--apps-sans);box-shadow:var(--sombra-alta);transition:opacity .28s var(--curva),transform .38s var(--curva)}
.ar-aviso.on{opacity:1;transform:translate(-50%,0) scale(1)}
.ar-aviso svg{width:20px;height:20px;flex:none;color:var(--marca)}
.ar-aviso.mal{background:var(--error)}
.ar-aviso.mal svg{color:var(--sobre-noche)}
@media (min-width:900px){.ar-aviso{bottom:32px}}
.celebra{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;cursor:pointer;font-family:var(--apps-sans);
  background:color-mix(in srgb,var(--noche) 78%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .26s var(--curva)}
.celebra.sale{opacity:0}
.celebra-caja{display:grid;justify-items:center;gap:6px;max-width:22rem;text-align:center;color:var(--sobre-noche)}
.celebra-marca{width:136px;height:136px;overflow:visible}
.celebra-marca circle,.celebra-marca path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.celebra-aro{stroke:var(--marca);stroke-width:5}
.celebra-onda{stroke:var(--marca);stroke-width:3;opacity:0;transform-origin:60px 60px}
.celebra-palomita{stroke:var(--sobre-noche);stroke-width:7}
.celebra-caja b{margin-top:6px;font-size:1.35rem;font-weight:800}
.celebra-caja strong{font-size:clamp(2.4rem,11vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--champan)}
.celebra-caja span{color:color-mix(in srgb,var(--sobre-noche) 80%,transparent);line-height:1.45}

/* Odómetro sobre papel */
.tarjeta .odo{font-size:clamp(2.4rem,11vw,3.2rem);letter-spacing:-.035em}
.od-cur{font-size:.6em;margin:.1em .05em 0 0;opacity:.85}
.od-cent{font-size:.36em;margin:.14em 0 0 .16em;opacity:.8}

/* Entradas: el motor pinta el estado inicial; sin JS todo se ve igual. */
@media (prefers-reduced-motion:reduce){
  .sonar .ojo::before,.sonar .ojo::after,.ruta>li.ahora::before,.escaner .mira::after,.solapa,.cuenta b.tic{animation:none}
}

/* Sin sesión: sólo la entrada, a pantalla completa (sin cabecera ni barra). */
body.ap.sin-sesion{display:block}
body.ap.sin-sesion .ap-top,body.ap.sin-sesion .ap-nav{display:none}
body.ap.sin-sesion .ap-vista{max-width:none;padding:0}
.anillo>span{position:relative;display:grid;justify-items:center}
.entre{justify-content:space-between;align-items:center;flex-wrap:wrap}
.crece{flex:1;min-width:0}
.crece small{display:block;color:var(--tinta-3)}
/* QR del aliado */
.qr-tarjeta{display:grid;justify-items:center;gap:12px;text-align:center}
.qr-lema{margin:0}
.qrMarea{position:relative;width:min(340px,100%);overflow:hidden;border-radius:18px;background:var(--tarjeta);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tinta) 10%,transparent),0 10px 24px -14px color-mix(in srgb,var(--noche) 45%,transparent)}
.qrMarea:not(.listo){aspect-ratio:2/3}
.qrMarea img{display:block;width:100%;height:auto}
.qrMarea:not(.listo) img{visibility:hidden}
.qrMarea canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.qr-frase{width:100%;text-align:left}
.qr-codigo{margin:0;display:grid;gap:2px}
.qr-codigo small{color:var(--tinta-3)}
.qr-codigo code{font:800 1.3rem ui-monospace,Menlo,monospace;letter-spacing:.14em}
.qr-tarjeta .rejilla{width:100%}
.qr-opcion{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--tinta-2);font-size:.9rem;cursor:pointer}
.qr-opcion input{width:18px;height:18px;accent-color:var(--marca-oscura)}
.foto-previa{display:grid;place-items:center;aspect-ratio:16/9;margin:0 0 12px;overflow:hidden;border-radius:16px;background:var(--papel)}
.foto-previa img{width:100%;height:100%;object-fit:cover}
/* Mi perfil: las fotos y las promociones que ya tiene la ficha. Mosaico de fotos (la primera, grande) y promociones en
   columnas; cada una es un botón que la abre en grande (lightbox.js). */
.galeria-ficha h2{margin-bottom:10px}
.tira{display:grid;gap:8px;margin:0;padding:0;list-style:none;max-width:560px}
.tira.foto{grid-template-columns:1fr 1fr}
.tira.foto li:first-child{grid-column:1/-1}
.tira.promo{grid-template-columns:repeat(3,minmax(0,1fr))}
.tira button{display:block;width:100%;min-height:44px;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--papel);cursor:zoom-in}
.tira.foto button{aspect-ratio:3/2}
.tira.promo button{aspect-ratio:2/3}
.tira img{display:block;width:100%;height:100%;object-fit:cover}
.tira button:focus-visible{outline:3px solid var(--marca-oscura);outline-offset:2px}
.lista>li.fila-dato{display:flex}
/* Filas de dos renglones (Mi código, Canjes): ícono, texto e importe arriba; la etiqueta abajo, sola. */
.lista>li.fila-dato.fila-dos{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic tx im" ". meta meta";
  column-gap:12px;row-gap:4px;align-items:center}
.fila-dos>.emoji{grid-area:ic;width:36px;height:36px;align-self:start}
.fila-dos>.crece{grid-area:tx}
.fila-dos>.fd-imp{grid-area:im;align-self:start;font-variant-numeric:tabular-nums;white-space:nowrap}
.fila-dos>.fd-meta{grid-area:meta;display:flex;min-width:0}
.fila-dos>.fd-meta .chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Huésped */
a.tarjeta.fila{color:var(--tinta);text-decoration:none}
a.tarjeta.fila b{display:block}
a.tarjeta.fila small{display:block;color:var(--tinta-3)}
.ayuda .wa{display:grid;place-items:center;width:44px;height:44px;color:var(--ok)}
.ayuda .wa svg{width:24px;height:24px}
.clima-icono{font-size:4rem;line-height:1}
.pase h2{font-size:clamp(1.25rem,5vw,1.6rem)}
.pase .fila input{min-height:44px;padding:0 10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--sobre-noche) 30%,transparent);background:var(--vidrio-noche);color:var(--sobre-noche);color-scheme:dark}

.fisica code.url{font-size:.82rem;letter-spacing:.02em}
.zarpe .que b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* La vista recibe el foco al cambiar de pantalla (lectores de pantalla); no necesita contorno. */
.ap-vista:focus{outline:none}
.noche:has(.anillo) .rosa{top:auto;bottom:-24px;right:-24px}

/* ══ Estilos por marca (tenants.tema_json.estilo → html[data-estilo], marca-ident.js) ═══════════════════════
   Sin estilo = «noche» (lo de arriba). Los otros dos sólo re-asignan tokens: la estructura y el movimiento son
   los mismos, así que se pueden comparar lado a lado. Todo deriva de --marca/--acento de la marca. */

/* «oro»: carbón y oro viejo. Títulos y cifras grandes con Bodoni Moda (autoalojada), sólo en tamaños de
   pantalla grande: el texto corrido sigue en Figtree, que se lee con sol. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/vendor/bodoni-moda-latin.woff2) format("woff2")}
html[data-estilo="oro"]{--papel:color-mix(in oklab,var(--marca) 7%,var(--fondo));--serif-marca:"Bodoni Moda",Georgia,serif}
html[data-estilo="oro"] :is(.noche h1,.noche h2,.vista-cab h1,.fisica .monto,.celebra-caja strong){font-family:var(--serif-marca);font-weight:700;letter-spacing:-.01em}
html[data-estilo="oro"] .noche .odo,html[data-estilo="oro"] .noche h1.num{font-family:var(--serif-marca);font-weight:600;letter-spacing:0}
html[data-estilo="oro"] .kicker,html[data-estilo="oro"] .vista-cab .kick{letter-spacing:.24em}
html[data-estilo="oro"] .noche{box-shadow:var(--sombra-alta),inset 0 0 0 1px color-mix(in srgb,var(--marca) 35%,transparent)}
html[data-estilo="oro"] .ap-pildora{background:color-mix(in srgb,var(--marca) 16%,var(--tarjeta))}
html[data-estilo="oro"] .tarjeta .btn:not(.claro):not(.marca){background:var(--noche);color:var(--champan)}

/* «carta»: CLARO. Papel hueso, isóbatas en tinta de la marca y el acento (terracota) en las cifras de dinero.
   Se invierten los tokens de la tarjeta noche: fondo claro, texto y líneas oscuros. */
html[data-estilo="carta"]{
  --papel:color-mix(in oklab,var(--acento) 7%,var(--fondo));
  --noche:color-mix(in oklab,var(--acento) 9%,var(--fondo));
  --noche-2:color-mix(in oklab,var(--marca) 12%,var(--fondo));
  --sobre-noche:color-mix(in oklab,var(--marca) 78%,var(--tinta));
  --champan:color-mix(in oklab,var(--acento) 80%,var(--tinta));
  --vidrio-noche:color-mix(in srgb,var(--fondo) 62%,transparent);
  --sombra-alta:0 22px 50px -28px color-mix(in srgb,var(--marca) 45%,transparent),0 1px 2px color-mix(in srgb,var(--tinta) 8%,transparent);
}
html[data-estilo="carta"] .noche{border:1px solid color-mix(in srgb,var(--marca) 18%,transparent)}
html[data-estilo="carta"] .noche::before{background:linear-gradient(100deg,color-mix(in srgb,var(--noche) 75%,transparent),color-mix(in srgb,var(--noche) 5%,transparent) 65%)}
html[data-estilo="carta"] .noche canvas.carta.viva{opacity:.85}
html[data-estilo="carta"] .btn:not(.claro):not(.marca){background:var(--marca);color:var(--sobre-marca)}
html[data-estilo="carta"] .noche .btn{background:var(--marca);color:var(--sobre-marca)}
html[data-estilo="carta"] .ap-pildora{background:color-mix(in srgb,var(--marca) 12%,var(--tarjeta))}
html[data-estilo="carta"] .solapa{background:linear-gradient(180deg,var(--tarjeta) 50%,color-mix(in srgb,var(--marca) 8%,var(--tarjeta)) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--marca) 16%,transparent)}
html[data-estilo="carta"] .fisica{color:var(--sobre-noche);background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--acento) 26%,transparent),transparent 58%),linear-gradient(150deg,var(--tarjeta),var(--noche-2))}
html[data-estilo="carta"] .dia.hoy{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca)}
html[data-estilo="carta"] .filtros button[aria-pressed="true"]{background:var(--marca);color:var(--sobre-marca);border-color:var(--marca)}
html[data-estilo="carta"] .exp{color:var(--fondo)}
html[data-estilo="carta"] .exp::after{background:linear-gradient(to top,color-mix(in srgb,var(--tinta) 82%,transparent),transparent 62%)}
html[data-estilo="carta"] .exp .precio strong{color:var(--fondo)}
/* La cámara siempre sobre oscuro, sea cual sea el estilo. */
html[data-estilo="carta"] .escaner{--noche:var(--tinta);--sobre-noche:var(--fondo)}

/* ── Comanda (restaurante): papel térmico con la cuenta, la cortesía y lo que queda por pagar ── */
.comanda{position:relative;align-self:start;padding:22px 20px 34px;background:var(--tarjeta);color:var(--tinta);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;transform:rotate(-1deg);
  box-shadow:0 18px 40px -22px color-mix(in srgb,var(--tinta) 55%,transparent),0 1px 2px color-mix(in srgb,var(--tinta) 10%,transparent);
  -webkit-mask:linear-gradient(var(--tinta) 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,transparent,var(--tinta) 1deg 89deg,transparent 90deg) bottom/16px 10px repeat-x;
  mask:linear-gradient(var(--tinta) 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,transparent,var(--tinta) 1deg 89deg,transparent 90deg) bottom/16px 10px repeat-x}
.comanda header{display:flex;justify-content:space-between;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:2px dashed color-mix(in srgb,var(--tinta) 25%,transparent);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.comanda .pista{margin:0 0 8px;color:var(--tinta-3);font-size:.82rem}
.comanda dl{margin:0;display:grid;gap:6px}
.comanda dl div{display:flex;justify-content:space-between;gap:12px;font-size:1rem}
.comanda dt::after{content:" ........................................";color:color-mix(in srgb,var(--tinta) 25%,transparent);white-space:nowrap}
.comanda dt{overflow:hidden;white-space:nowrap;flex:1}
.comanda dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.comanda .menos dd{color:var(--ok)}
.comanda .total{margin-top:6px;padding-top:10px;border-top:2px dashed color-mix(in srgb,var(--tinta) 25%,transparent);font-size:1.25rem}
.comanda .disp{margin:12px 0 0;font-size:.82rem;color:var(--tinta-3)}

/* El nombre del rol y su subtítulo se recortan con puntos suspensivos; nunca empujan la pantalla. */
.ap-marca>.ap-rol{min-width:0;flex:1}
.ap-rol small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La rejilla del cuerpo en el teléfono: una columna que nunca crece por su contenido (un texto largo no empuja la pantalla). */
@media (max-width:899px){body.ap{grid-template-columns:minmax(0,1fr)}}
.rejilla>*{min-width:0}
.comanda dt{min-width:0}
.comanda dl div{min-width:0}
/* «Enviar comentarios» (comentarios.js): botón redondo en la cabecera, junto a Salir. */
.ap-coment{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--tinta) 12%,transparent);background:var(--tarjeta);font-size:1.1rem}
/* Zonas seguras de la PWA instalada (muesca, esquinas): la cabecera y la vista las respetan. */
.ap-top{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* Datos para cobrar (aliado-nucleo.js › abrirCobro): lo que ya está se lee, no se edita; el botón resalta si faltan. */
.campo-fijo{display:grid;gap:2px;margin:0 0 14px}
.campo-fijo small{font-size:var(--t-chico);color:var(--tinta-2)}
.campo-fijo b{font-weight:700;overflow-wrap:anywhere}
.abre-hoja.pide{box-shadow:inset 0 0 0 2px var(--marca,#0a1226)}
.abre-hoja.pide .ah-dato{color:var(--marca,#0a1226)}

/* ── La ficha del aliado desde su app (aliado-ficha.js): horario, ubicación, fotos, reseñas y tutorial ── */
.hojas-perfil{margin-bottom:12px}
.hojas-perfil .abre-hoja.pide{grid-column:1/-1;background:color-mix(in srgb,var(--marca) 14%,var(--tarjeta))}
.hojas-fin{margin-top:6px}
.hojas-fin .abre-hoja{grid-column:1/-1;min-height:56px;box-shadow:none;background:transparent}
.abre-hoja .ah-dato .chip{margin-left:6px}

.hor{display:grid;gap:12px}
.hor-atajos{display:flex;flex-wrap:wrap;gap:8px}
.chip-atajo{min-height:44px;padding:0 14px;border:1.5px solid var(--marca-oscura,var(--tinta));border-radius:999px;background:transparent;color:var(--tinta);font:700 .9375rem/1 var(--sans,inherit);cursor:pointer}
.hor-lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hor-dia{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n sw c" "h h h";gap:4px 8px;align-items:center;padding:8px 12px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta)}
.hor-dia.cerrado{opacity:.85}
.hor-nombre{grid-area:n;font-weight:800}
.hor-sw{grid-area:sw;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;cursor:pointer}
.hor-sw input{width:48px;height:28px;appearance:none;border-radius:999px;background:var(--linea);position:relative;cursor:pointer;margin:0;transition:background .2s}
.hor-sw input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.hor-sw input:checked{background:var(--marca-oscura,var(--tinta))}
.hor-sw input:checked::after{transform:translateX(20px)}
.hor-sw input:focus-visible{outline:3px solid color-mix(in srgb,var(--marca) 55%,transparent);outline-offset:2px}
.hor-horas{grid-area:h;display:flex;align-items:center;gap:8px}
.hor-horas input{flex:1 1 0;min-width:0;min-height:48px;padding:8px 10px;border:1px solid var(--linea);border-radius:12px;font:inherit;font-size:1rem;background:var(--tarjeta);color:var(--tinta)}
.vacio-h{color:var(--tinta-3)}
.hor-24{grid-area:h;display:flex;align-items:center;gap:10px;font-weight:700}
.hor-cambiar,.hor-copiar{min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--marca-oscura,var(--tinta));font:700 .9375rem/1 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hor-copiar{grid-area:c;justify-self:end}

.ubi-busca{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.ubi-busca .btn{min-height:48px}
.ubi-res{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ubi-opcion{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--linea);border-radius:12px;background:var(--tarjeta);color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.ubi-mapa{height:min(46dvh,340px);min-height:240px;border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:var(--superficie,#eef0f3);z-index:0}
.ubi-pin{background:none;border:0}
/* Punto de un prospecto en los mapas de campo (mapa-campo.js): color = estado, anillo = promotor asignado. */
.mcPunto{border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.35);box-sizing:border-box}
.mcPunto.elegido{box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.45)}
.ubi-pin span{display:block;width:30px;height:30px;margin:0 2px;border-radius:50% 50% 50% 0;background:var(--marca-oscura,#0a1226);transform:rotate(-45deg);box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.35)}

.fot{display:grid;gap:12px}
.fot-t{margin:6px 0 0;font-size:1rem}
.fot-rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.fot-celda{display:grid;gap:6px;align-content:start;padding:8px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta)}
.fot-celda.vacia{padding:0;border-style:dashed}
.fot-img{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--superficie,#eef0f3)}
.fot-img img{width:100%;height:100%;object-fit:cover}
.fot-portada{position:absolute;left:6px;top:6px;padding:4px 8px;border-radius:999px;background:var(--noche);color:var(--sobre-noche);font-weight:800;font-size:.875rem}
.pu-lista{display:grid;gap:10px}
.pu-fila{display:flex;align-items:center;gap:12px;padding:10px 12px}
.pu-fila.oculta .pu-img img{opacity:.4;filter:grayscale(1)}
.pu-img{flex:none;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--papel)}
.pu-img img{width:100%;height:100%;object-fit:cover}
.pu-fila small{display:block;color:var(--tinta-2)}
.pu-ver{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--marca-oscura)}
.pu-btn{flex:none;min-height:44px}
.fot-portada.fot-oculta{top:auto;bottom:6px;background:var(--error)}
.fot-nombre{font-weight:800;font-size:.9375rem}
.fot-acc{display:flex;flex-wrap:wrap;gap:6px}
.fot-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border:1px solid var(--linea);border-radius:10px;background:transparent;color:var(--tinta);font:700 .875rem/1.1 inherit;text-align:center;cursor:pointer}
.fot-btn.quitar{color:var(--error,#b3261e);border-color:currentColor}
.fot-subir{display:grid;place-items:center;gap:4px;min-height:132px;padding:12px;text-align:center;font-weight:700;cursor:pointer}
.fot-mas{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--marca-oscura,var(--tinta));color:#fff;font-size:1.5rem;line-height:1}

.cal-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cal{display:grid;gap:2px;padding:12px;border-radius:14px;border:1px solid var(--linea);background:var(--tarjeta);text-align:center}
.cal small{font-weight:700;color:var(--tinta-2);font-size:.875rem}
.cal b{font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cal span{font-size:.875rem;color:var(--tinta-2)}
.cal.apagada{background:transparent;border-style:dashed}
.cal.apagada b{color:var(--tinta-3)}
.cal .ej{font-style:normal;font-weight:800;padding:1px 6px;border-radius:6px;background:var(--linea)}
.res{display:grid;gap:12px}
.res-aviso{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--marca) 16%,var(--tarjeta));font-weight:700}
.res-dist{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.res-dist li{display:grid;grid-template-columns:3rem minmax(0,1fr) 2rem;gap:8px;align-items:center;font-size:.9375rem}
.res-barra{display:block;height:10px;border-radius:999px;background:var(--linea);overflow:hidden}
.res-barra i{display:block;height:100%;background:var(--marca-oscura,var(--tinta))}
.res-lista{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.res-item{display:grid;gap:8px;padding:12px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta)}
.res-cab,.res-texto,.res-resp{margin:0}
.res-est{color:#a87000;letter-spacing:.06em}
.res-resp{padding:8px 10px;border-left:3px solid var(--marca-oscura,var(--tinta));background:var(--superficie,#f4f4f4);border-radius:0 10px 10px 0}
.res-resp small{display:block;font-weight:800}
.res-form{display:grid;gap:10px}

.tut-lista{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tut-play{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:64px;padding:8px 12px 8px 8px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta);color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.tut-poster img{display:block;width:45px;height:97px;object-fit:cover;object-position:top;border-radius:8px}
.tut-txt{display:grid;gap:2px}
.tut-txt small{color:var(--tinta-2)}
.tut-video{padding-top:8px}
.tut-video video{display:block;width:min(100%,300px);height:auto;margin-inline:auto;border-radius:18px}

/* El aviso «N sin responder» va sobre el botón de Reseñas, sin comerse su cifra. */
.abre-hoja{position:relative}
.ah-badge{position:absolute;top:-6px;right:-4px;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--error,#b3261e);color:#fff;font:800 .875rem/26px var(--sans,inherit);text-align:center;box-shadow:0 0 0 2px var(--tarjeta)}
/* «¿Dónde lo vas a poner?» (aliado-nucleo.js › abrirFormatos, qr-formatos.js) */
.qf-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qf-op{display:grid;gap:2px;width:100%;min-height:56px;padding:10px 14px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta);color:var(--tinta);font:inherit;text-align:left;cursor:pointer}
.qf-op small{color:var(--tinta-2);font-size:.875rem}
.qf-op[aria-pressed="true"]{border-color:var(--noche);box-shadow:inset 0 0 0 2px var(--noche)}
.qf-previa{display:grid;gap:10px;margin-top:12px}
.qf-previa img{display:block;max-width:100%;max-height:46dvh;margin:0 auto;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.18);background:#fff}
.qf-estilo{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--tinta) 6%,var(--tarjeta));margin-bottom:12px}
.qf-estilo button{min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--tinta);font:700 1rem/1 inherit;cursor:pointer}
.qf-estilo button[aria-pressed="true"]{background:var(--noche);color:var(--sobre-noche)}
details.qf-op{padding:0}
details.qf-op>summary{display:grid;gap:2px;min-height:56px;padding:10px 14px;cursor:pointer;list-style:none}
details.qf-op>summary::-webkit-details-marker{display:none}
details.qf-op[open]{box-shadow:inset 0 0 0 2px var(--noche)}
details.qf-op .qf-mio{justify-self:start;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--noche);color:var(--sobre-noche);font-size:.875rem;font-weight:700}
details.qf-op .qf-previa{padding:0 14px 14px;margin:0}
.qf-logo{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.qf-logo img{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid var(--linea)}
.qf-logo .btn{min-height:44px}

/* ---- App del operador (/proveedor) al nivel del aliado (14-oct-2026) ----------------------------------------------
   Inicio en mosaicos con la acción del día primero y el tablero de zarpes compacto (concepto B del dueño); la cabecera
   de marca la comparte con el aliado (arriba). Aquí, el tablero compacto y el mínimo de lectura de 14 px. */
body[data-login-role="proveedor"] .noche.compacta{margin-bottom:14px}
body[data-login-role="proveedor"] .noche.compacta h2.tablero-dia{font-size:clamp(2rem,8.5vw,3rem)}
body[data-login-role="proveedor"] .noche.compacta .tablero{margin-top:12px}
body[data-login-role="proveedor"] :is(.zarpe .que small,.dia-rep .d small,.dia-rep small,.cifra span,.vidrio span,.noche .kicker,.noche p,.anillo small){font-size:max(.875rem,14px)}
body[data-login-role="proveedor"] .zarpe .estado{font-size:max(.75rem,14px);letter-spacing:.04em}
body[data-login-role="proveedor"] .salida .ref{font-size:max(.78rem,14px)}
body[data-login-role="proveedor"] .hoja .salidas{grid-template-columns:1fr}
body[data-login-role="proveedor"] .ap-rol small,body[data-login-role="proveedor"] .ap-nav a,body[data-login-role="proveedor"] .vista-cab .kick{font-size:.875rem}
body[data-login-role="proveedor"] .vista-cab .kick{letter-spacing:.01em;text-transform:none}
body[data-login-role="proveedor"] .noche .cifra-grande .dinero{display:block;font-size:clamp(1.9rem,8vw,2.6rem);font-weight:800;letter-spacing:-.02em;color:var(--champan)}

/* «¿Tienes lugar?» de El Muelle (muelle-disponibilidad.js) y «Activar avisos» de El Muelle y El Faro (avisos-push.js). */
.pedidos{margin:0 0 14px}
.pedidos-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pedidos-cab h2{margin:0;font-size:1.25rem}
.pedidos-apoyo{margin:4px 0 12px}
.pedido{border:2px solid color-mix(in srgb,var(--aviso) 40%,transparent);display:grid;gap:12px}
.pedido.respondido{border-color:color-mix(in srgb,var(--tinta) 10%,transparent)}
.pedido-cab{display:flex;gap:12px;align-items:center;min-width:0}
.pedido-cab img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}
.pedido-cab span{display:grid;gap:2px;min-width:0}
.pedido-cab b{font-size:1.0625rem;overflow-wrap:anywhere}
.pedido-cab small{color:var(--tinta-2);font-size:.9375rem}
.pedido-resp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.pedido-resp small{color:var(--tinta-2);font-size:.875rem}
.pedido-nota{margin:0;color:var(--tinta-2);font-size:.9375rem;font-style:italic}
.pedido .opcional{font-weight:400;color:var(--tinta-2)}
.pedido-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pedido-btns .btn{padding:0 10px}
.pedido-btns .btn[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--tinta)}
.avisos-push{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.avisos-push[hidden]{display:none}
.avisos-txt{margin:0;color:var(--tinta-2);font-size:.9375rem}
.avisos-btn svg{width:20px;height:20px}

/* «Mi flota»: editor de la ficha en su hoja (app-operador.js › editarFicha) y la lista «Qué te pedimos». */
.ff{display:grid;gap:12px}
.ff .fot-t{margin-top:14px}
.ff textarea{min-height:88px;resize:vertical}
.ff-ops{display:grid;gap:10px}
.ff-op{display:grid;gap:10px;padding:14px}
.ff-op .fot-btn.quitar{justify-self:start}
.requisitos{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;gap:10px}
.requisitos li{counter-increment:r;display:grid;grid-template-columns:36px 1fr;gap:2px 12px;padding:12px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta)}
.requisitos li::before{content:counter(r);grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--noche);color:var(--sobre-noche);font-weight:800}
.requisitos b{font-size:1rem}
.requisitos span{grid-column:2;font-size:.9375rem;color:var(--tinta-2)}

/* «Mi flota» › Cancelación: las tres de la casa o la suya por tramos (app-operador.js › politicaHtml). */
.ff-pols{display:grid;gap:8px}
.ff-pol{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:12px 14px;min-height:44px;cursor:pointer}
.ff-pol input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--noche)}
.ff-pol b{display:block;font-size:1rem}
.ff-pol small{display:block;font-size:.875rem;color:var(--tinta-2);line-height:1.4}
.ff-pol:has(input:checked){border-color:var(--noche);box-shadow:0 0 0 1px var(--noche)}
.ff-tramos{display:grid;gap:10px}
.ff-tramos [data-lista-tramos]{display:grid;gap:8px}
.ff-tramo{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
/* Menú de acciones «⋯» (apps-rol.js › menuAcciones): flotante y anclado a su botón; lo destructivo en rojo, al final. */
.ar-menu-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:transparent;color:inherit;cursor:pointer}
.ar-menu-btn svg{width:22px;height:22px}
.ar-menu-btn[aria-expanded="true"]{background:color-mix(in srgb,currentColor 14%,transparent)}
.ar-menu-btn:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.ar-menu{position:fixed;z-index:70;min-width:220px;max-width:min(320px,calc(100vw - 16px));display:grid;padding:6px;border-radius:16px;background:var(--tarjeta);color:var(--tinta);box-shadow:var(--sombra-alta);border:1px solid var(--linea);font-family:var(--apps-sans)}
.ar-menu button{min-height:44px;padding:10px 14px;border:0;border-radius:10px;background:transparent;color:var(--tinta);font:600 1rem/1.25 var(--apps-sans);text-align:left;cursor:pointer}
.ar-menu button:hover,.ar-menu button:focus-visible{background:var(--superficie);outline:none}
.ar-menu button:focus-visible{box-shadow:inset 0 0 0 2px var(--tinta)}
.ar-menu button.peligro{color:var(--error)}
.ar-menu button.peligro:hover,.ar-menu button.peligro:focus-visible{background:color-mix(in srgb,var(--error) 10%,var(--tarjeta))}
.ar-menu hr{margin:4px 6px;border:0;border-top:1px solid var(--linea)}
@media (prefers-reduced-motion:no-preference){.ar-menu{animation:ar-menu-entra .16s var(--curva)}}
@keyframes ar-menu-entra{from{opacity:0;transform:translateY(-4px) scale(.98)}}

/* ── Instalar sin volver a entrar (pase-pwa.js): pasos, el código del pase y su formulario en la app instalada ── */
.pase-pasos{margin:0;padding-left:1.4em;display:grid;gap:8px;line-height:1.45;font-size:1rem}
.ap-salir.ap-cuenta{width:44px;padding:0;justify-content:center}
.pase-etiqueta{margin:0 0 -4px;color:var(--tinta-2);font-size:.875rem;font-weight:650}
.pase-nota{margin:0;color:var(--tinta-2);font-size:.9375rem;line-height:1.45}
.pase-codigo{margin:2px 0;padding:14px 12px;border-radius:16px;text-align:center;font:800 clamp(1.75rem,8vw,2.25rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  background:color-mix(in srgb,var(--noche) 8%,var(--tarjeta));color:var(--tinta);user-select:all}
.pase-form{display:grid;gap:12px}
.pase-form .campo{display:grid;gap:6px;font-size:.9375rem}
.pase-form input{min-height:50px;padding:0 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--tinta) 22%,transparent);background:var(--tarjeta);color:var(--tinta);
  font:700 1.25rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}
.pase-form .err{margin:0;min-height:1.2em;color:var(--error);font-size:.9375rem}
.pase-form .btn{min-height:50px}
.entrar .pase-abre{display:block;width:100%;min-height:44px;margin:-2px 0 0;padding:0;border:0;background:transparent;color:var(--role,var(--tinta));
  font-family:inherit;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.entrar .pase-abre:focus-visible{outline:3px solid color-mix(in srgb,var(--role,var(--tinta)) 30%,transparent);outline-offset:2px;border-radius:8px}

.tour-fila img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none}
.tour-foto{display:block;width:100%;max-height:200px;object-fit:cover;border-radius:14px;margin-bottom:12px}
#tourRaiz .of-chips{margin-bottom:14px}
#tourRaiz .campo{margin-bottom:12px}
.tour-cot{display:grid;gap:10px;margin:12px 0}
.tour-cot .opcion{display:flex;align-items:center;gap:10px;min-height:44px}
.tour-total{margin:12px 0}

/* ── Agenda por barco (El Muelle: Mi flota › Barcos y Agenda; agenda-barco.js). Sólo tokens. ── */
.ag-frase{margin:0 0 14px}
.ag-barcos{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 14px}
@media (min-width:760px){.ag-barcos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ag-barco{display:grid;gap:10px;margin:0}
.ag-barco.retirado{opacity:.78}
.ag-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
@media (max-width:360px){.ag-cab{flex-direction:column;align-items:flex-start;gap:6px}}
.ag-cab h3{margin:0;font-size:1.2rem;line-height:1.2;letter-spacing:-.015em;overflow-wrap:anywhere}
.ag-barco .meta{margin:0;color:var(--tinta-2);font-size:.94rem}
.ag-fichas{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ag-fichas .chip{max-width:100%;white-space:normal}
.ag-acciones{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.ag-acciones .btn{min-height:48px;padding:0 14px}
.ag-retirados{margin:14px 0 0}
.ag-retirados summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer}
.ag-retirados .ag-barco{margin-top:10px}
.ag-marca{display:flex;align-items:center;gap:12px;min-height:48px;font-weight:700;cursor:pointer}
.ag-marca input{flex:none;width:24px;height:24px;accent-color:var(--marca)}
.ag-fichas-form{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.ag-fichas-form legend{margin:0 0 6px;padding:0;font-weight:800}
.ag-ficha{display:grid;gap:6px;padding:6px 12px 10px;border-radius:16px;background:var(--superficie)}
.ag-ficha-opc{display:grid;gap:10px;padding:0 0 4px 36px}
.ag-ficha-opc[hidden]{display:none}
.ag-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.ag-selector{flex:1 1 220px;margin:0}
.ag-nombre{margin:0}
.ag-mes{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 8px}
.ag-mes h2{margin:0;font-size:1.25rem;text-transform:capitalize}
.ag-nav{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:999px;border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);cursor:pointer}
.ag-calendario{padding:12px}
.ag-semana,.ag-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ag-semana span{padding:4px 0;text-align:center;font-size:var(--t-chico);font-weight:700;color:var(--tinta-2)}
.ag-dia{position:relative;display:grid;place-items:center;align-content:center;gap:2px;min-height:52px;padding:2px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta);color:var(--tinta);font:inherit;cursor:pointer}
.ag-dia b{font-size:1rem}
.ag-dia:active{transform:scale(.96)}
.ag-dia:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
@media (max-width:360px){.ag-calendario{padding:6px}.ag-semana,.ag-rejilla{gap:2px}}
.ag-dia-hoja .segmento button{white-space:nowrap;padding:0 14px}
.ag-volver{display:inline-flex;align-items:center;min-height:44px;margin:0 0 6px;color:inherit;font-weight:700;text-decoration:none;opacity:.85}
.ag-dia:disabled{opacity:.4;cursor:default}
.ag-hoy{border-color:var(--marca);box-shadow:inset 0 0 0 1px var(--marca)}
.ag-reserva{background:var(--marca-suave)}
.ag-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--marca);color:var(--sobre-marca);font-style:normal;font-size:var(--t-chico);font-weight:800;line-height:1}
.ag-mant{background:color-mix(in srgb,var(--aviso) 18%,var(--tarjeta));border-color:var(--aviso)}
.ag-bloq{background:color-mix(in srgb,var(--error) 14%,var(--tarjeta));border-color:var(--error)}
.ag-parcial{background:linear-gradient(135deg,color-mix(in srgb,var(--error) 18%,var(--tarjeta)) 50%,var(--tarjeta) 50%);border-color:var(--error)}
.ag-leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:var(--t-chico);color:var(--tinta-2)}
.ag-leyenda li{display:inline-flex;align-items:center;gap:6px}
.ag-pt{width:12px;height:12px;border-radius:4px}
.ag-pt-reserva{background:var(--marca)}
.ag-pt-bloq{background:var(--error)}
.ag-pt-mant{background:var(--aviso)}
.ag-pie{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ag-pie .btn{min-height:48px;padding:0 14px}
.ag-lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ag-franja{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:var(--superficie)}
.ag-franja>div{display:grid;gap:4px;min-width:0}
.ag-franja .chip{justify-self:start}
.ag-franja .btn{min-height:44px;padding:0 16px}
.ag-franja.bloqueo{box-shadow:inset 4px 0 0 var(--error)}
.ag-franja.mantenimiento{box-shadow:inset 4px 0 0 var(--aviso)}
.ag-franja.reserva{box-shadow:inset 4px 0 0 var(--marca)}
.ag-bloquear{display:grid;gap:12px;min-width:0;margin:0;padding:0;border:0}
.ag-bloquear legend{margin:0 0 8px;padding:0;font-weight:800}
.ag-motivos{display:flex;flex-wrap:wrap;gap:8px}
.ag-motivo{min-height:44px;padding:0 16px;border:1px solid var(--linea);border-radius:999px;background:var(--tarjeta);color:var(--tinta);font:inherit;font-weight:700;cursor:pointer}
.ag-motivo[aria-pressed="true"]{background:var(--marca-suave-2);border-color:var(--marca);color:var(--marca-oscura)}
.ag-enlace{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ag-enlace[hidden],.ag-guardalo[hidden]{display:none}
.ag-enlace input{min-width:0;min-height:48px;padding:0 12px;border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta);color:var(--tinta);font:inherit}
.ag-dia-hoja,.ag-ical{display:grid;gap:12px}