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

body[data-login-role]{--role:#1f2937;--role-hi:#111827;--role-soft:#eef1f4;
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
body[data-login-role="admin"]{--role:#047857;--role-hi:#065f46;--role-soft:#e7f4ef}
body[data-login-role="promotor"]{--role:#246a4b;--role-hi:#174b35;--role-soft:#e8f2ed}
body[data-login-role="huesped"]{--role:#255ec7;--role-hi:#17428f;--role-soft:#eaf0fc}
body[data-login-role="aliado"]{--role:#7a3340;--role-hi:#5b2530;--role-soft:#f7ecee}
body[data-login-role="proveedor"]{--role:#173f5f;--role-hi:#102e46;--role-soft:#e9f0f5}
body[data-login-role="desarrollador"]{--role:#6b4a2f;--role-hi:#4f3622;--role-soft:#f5eee6}

/* 14 px como todo texto de las apps (antes .76rem, 12 px), lo mismo que ya usaban restaurante, hotel y condominio. */
[data-login-shell] .roleKicker{margin:0 0 .45rem;color:var(--role);font-size:.875rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase}
[data-login-shell] label:not(.campo){display:block;text-align:left;font-size:.86rem;font-weight:700;
  letter-spacing:0;margin-bottom:.38rem}
[data-login-shell] input{min-height:48px;font-size:1rem;border-color:#b8c0c7}
[data-login-shell] label:not(.campo)+input{margin-bottom:.8rem}
[data-login-shell] input:focus{outline:3px solid color-mix(in srgb,var(--role) 22%,transparent);
  outline-offset:1px;border-color:var(--role)}
[data-login-shell] :is(button[type="submit"],.rolePrimary){min-height:48px;background:var(--role);
  color:var(--sobre-role,#fff);font-weight:750;border-radius:12px;box-shadow:none}
[data-login-shell] :is(button[type="submit"],.rolePrimary):hover{background:var(--role-hi)}
[data-login-shell] :is(.err,#loginErr,#pwErr){min-height:1.35rem}

/* ── Pantalla de entrada común ────────────────────────────────────────────
   Tarjeta blanca centrada: emblema del rol, etiqueta del rol, título, lema,
   filete, campos con su etiqueta arriba, botón en el color del rol y pie.
   Las apps de campo (muelle, aliados) la usaron primero; promotores, huésped y
   administración la comparten desde aquí para no mantener cinco versiones.
   Los var(--x, respaldo) permiten usarla con o sin app-campo.css. */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:2rem var(--gutter,clamp(18px,4.8vw,36px))}
.entrar .caja{width:100%;max-width:430px;display:grid;gap:1.05rem;margin:0;text-align:left;
  padding:clamp(1.25rem,5vw,2rem);border:1px solid var(--line,#e2e5e9);border-radius:18px;
  background:var(--s1,#fff);box-shadow:none}
/* Lienzo: foto del rol + formulario en una sola pieza, a sangre en todos los tamaños (como en escritorio): sin marco,
   sin radios ni fondo alrededor, de borde a borde y del alto de la pantalla. En celular la foto es la cabecera y
   llega hasta arriba (bajo la barra del sistema, sin tapar el texto); desde 860px van lado a lado. --login-top
   descuenta una barra fija encima (huésped). */
.entrar:has(>.lienzo){padding:0;place-items:stretch}
.entrar .lienzo{width:100%;max-width:none;min-height:calc(100dvh - var(--login-top,0px));display:grid;
  grid-template-columns:1fr;grid-template-rows:auto 1fr;background:var(--s1,#fff)}
.entrar .lienzo .caja{max-width:430px;justify-self:center;align-content:start;border:0;border-radius:0;box-shadow:none;
  padding:clamp(1.25rem,5vw,2rem) max(var(--gutter,clamp(18px,4.8vw,36px)),env(safe-area-inset-right))
    calc(clamp(1.25rem,5vw,2rem) + env(safe-area-inset-bottom)) max(var(--gutter,clamp(18px,4.8vw,36px)),env(safe-area-inset-left))}
.entrar .arte{position:relative;min-height:calc(clamp(200px,56vw,300px) + env(safe-area-inset-top));background:var(--role)}
.entrar .arte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entrar .arte .cap{position:absolute;inset:0;padding:calc(clamp(1.1rem,4vw,2.5rem) + env(safe-area-inset-top)) clamp(1.1rem,4vw,2.5rem) clamp(1.1rem,4vw,2.5rem);
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(to bottom,rgba(4,7,15,.08),rgba(4,7,15,.58))}
.entrar .arte h2{margin:0;font-size:clamp(1.4rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.4)}
.entrar .arte p{margin:.45rem 0 0;font-size:1rem;line-height:1.5;max-width:22rem;text-shadow:0 1px 8px rgba(0,0,0,.4)}
/* Celular y tableta: también de borde a borde, como en escritorio (pedido del dueño, 14-oct-2026). La foto arriba a todo
   lo ancho y la tarjeta ocupa el resto del alto; el contenido conserva su ancho de lectura, centrado. */
@media (max-width:859.98px){
  .entrar{padding:0;place-items:stretch}
  .entrar .lienzo{max-width:none;min-height:calc(100dvh - var(--login-top,0px));grid-template-rows:auto 1fr;
    border:0;border-radius:0;box-shadow:none}
  .entrar .lienzo .caja{max-width:30rem;width:100%;justify-self:center;align-content:start;
    padding:clamp(1.25rem,5vw,2rem) var(--gutter,clamp(18px,4.8vw,36px)) calc(1.5rem + env(safe-area-inset-bottom))}
}
@media (min-width:860px){
  /* Escritorio: la foto ocupa su mitad de borde a borde y el formulario se centra en la otra. */
  .entrar .lienzo{grid-template-columns:1.15fr 1fr;grid-template-rows:1fr}
  .entrar .arte{min-height:0}
  .entrar .arte .cap{justify-content:flex-start;background:linear-gradient(to bottom,rgba(4,7,15,.5),rgba(4,7,15,.06) 45%,rgba(4,7,15,.35))}
  .entrar .lienzo .caja{width:100%;padding:2.5rem 2.25rem;align-content:center}
}
.entrar .emblema{width:92px;height:92px;margin:0 auto .5rem;border-radius:22px;display:block}
/* Celular: «Entrar» y la demo a la vista sin desplazar (también a 390×664 y 320×640): arte más bajo, emblema de 64 px
   y sin el lema (repite el titular). */
@media (max-width:859px){
  .entrar .arte{min-height:calc(clamp(120px,32vw,180px) + env(safe-area-inset-top))}
  .entrar .err:empty{display:none}
  .entrar .arte p{display:none}
  .entrar .lienzo .caja{gap:.8rem;padding-top:1rem}
  .entrar .emblema{width:64px;height:64px;border-radius:16px;margin:0 auto .1rem}
  .entrar p.lema{display:none}
  .entrar h1{font-size:1.875rem}
  .entrar .campo input{min-height:48px}
  .entrar .filete{display:none}
}
@media (max-width:859px) and (max-height:700px){
  .entrar .arte{min-height:calc(104px + env(safe-area-inset-top))}
  .entrar .lienzo .caja{gap:.7rem}
}
/* Celular en horizontal: foto y formulario lado a lado, el formulario con su propio desplazamiento. */
@media (min-width:700px) and (max-height:500px){
  .entrar .lienzo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr;height:100dvh;min-height:0}
  .entrar .arte{min-height:0}
  .entrar .arte .cap{padding-left:max(clamp(1.1rem,4vw,2.5rem),env(safe-area-inset-left))}
  .entrar .lienzo .caja{max-width:none;width:100%;overflow-y:auto;align-content:start;padding-top:1rem}
  .entrar .emblema,.entrar .roleKicker{display:none}
  .entrar .lienzo .caja{gap:.55rem}
  .entrar h1{font-size:1.625rem}
  .entrar .campo input{min-height:44px}
}
.entrar .emblema.sello{display:grid;place-items:center;background:var(--role)}
.entrar .emblema.sello img{width:72%;height:72%;object-fit:contain}
.entrar .roleKicker{margin:0}
.entrar h1{font-family:inherit;font-size:2.15rem;font-weight:800;line-height:1.1;letter-spacing:-.022em;
  text-align:center;margin:0;text-wrap:balance;color:var(--tx,#1a2230)}
.entrar p.oficio{text-align:center;margin:-.35rem 0 0;color:var(--tx2,#4f5866);font-size:1rem;font-weight:600}
.entrar p.lema{text-align:center;color:var(--tx2,#4f5866);margin:0 0 .8rem;text-wrap:pretty;line-height:1.55}
.entrar .filete{height:1px;background:linear-gradient(90deg,transparent,var(--cobre-luz,#dba37a),transparent);margin:.2rem 0}
.entrar .campo{display:grid;gap:.45rem}
.entrar .campo>span{font-size:.94rem;letter-spacing:.01em;color:var(--tx2,#4f5866);font-weight:700}
.entrar .campo input{width:100%;min-height:54px;border-radius:10px;border:1px solid var(--line-2,#b8c0c7);
  padding:0 1rem;font:inherit;font-size:1rem;color:var(--tx,#1a2230);background:var(--s1,#fff);
  text-align:left;letter-spacing:normal;margin:0;box-sizing:border-box}
.entrar .campo input:focus{outline:3px solid color-mix(in srgb,var(--role) 22%,transparent);outline-offset:1px;
  border-color:var(--role)}
.entrar .rolePrimary{width:100%;min-height:52px;border:0;border-radius:12px;font:inherit;font-size:1rem;
  font-weight:750;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--role);color:var(--sobre-role,#fff);margin:0}
.entrar .rolePrimary:hover{background:var(--role-hi)}
.entrar .rolePrimary:disabled{opacity:.6;cursor:progress}
.entrar :is(.err,#loginErr,#pwErr){margin:0;text-align:center;font-size:.9rem;color:#b42318}
.entrar .pie{text-align:center;color:var(--tx3,#5d6573);font-size:.875rem;margin:.8rem 0 0;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){[data-login-shell]{animation:none!important}}
.entrar .caja[hidden]{display:none}

body[data-login-role="huesped"]{--login-top:66px}

/* ── Demostración ───────────────────────────────────────────────────────────
   «Entrar a la demo» (sólo en la entrada de un host demo-*, ?entrada=1): con el borde del color del rol.
   La píldora «Demo» sólo existe en los hosts demo-* (la pone demo-sesion.js). */
.entrar .verDemo,[data-login-shell] .verDemo{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;border:1.5px solid var(--role);border-radius:12px;color:var(--role);background:transparent;
  font-weight:700;font-size:1rem;text-decoration:none;box-sizing:border-box}
.entrar .verDemo:hover,[data-login-shell] .verDemo:hover{background:var(--role-soft)}
.entrar .verDemo:focus-visible{outline:3px solid color-mix(in srgb,var(--role) 30%,transparent);outline-offset:2px}
/* Entrada de la demo (?entrada=1, sesion-rol.js): el formulario se ve pero «Entrar a la demo» es lo principal, y bajo el
   formulario una línea con la dirección de la cuenta real. */
.entrar .caja.enDemo .rolePrimary{background:transparent;color:var(--role);box-shadow:inset 0 0 0 1.5px var(--role)}
.entrar .caja.enDemo .rolePrimary:hover{background:var(--role-soft)}
.entrar .caja.enDemo .verDemo{min-height:52px;border:0;background:var(--role);color:var(--sobre-role,#fff);font-weight:750}
.entrar .caja.enDemo .verDemo:hover{background:var(--role-hi)}
.entrar .demoReal{margin:0;text-align:center;font-size:.875rem;line-height:1.45;color:var(--tx2,#4f5866)}
.entrar .demoReal b{display:inline-block;color:var(--tx,#1a2230);font-weight:700;white-space:nowrap}
/* Píldora «Demo» (demo-sesion.js, sólo en hosts demo-*): discreta, en una esquina y fuera del flujo. En las apps por
   rol, colgada del borde de la cabecera a la derecha; en la entrada, arriba a la derecha sobre la foto; en el panel
   de administración, abajo a la izquierda.
   Se ve de 28px pero se toca en 44px. Al tocarla abre el aviso con «Salir de la demo». */
.demoPildora{position:fixed;z-index:26;left:max(12px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));
  font:700 .875rem/1 "Figtree",system-ui,sans-serif}
.demoPildora>button{position:relative;display:inline-flex;align-items:center;height:28px;padding:0 12px;margin:0;border-radius:999px;
  border:1px solid rgba(255,255,255,.42);background:#1f1b2e;color:#fff;font:inherit;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.demoPildora>button::before{content:"";position:absolute;inset:-9px}  /* 26 px de caja de relleno + 18 = 44 px de toque */
.demoPildora>button:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #1f1b2e}
.demoPildoraHoja{position:absolute;left:0;bottom:calc(100% + 10px);width:max-content;max-width:min(270px,calc(100vw - 24px));
  padding:12px 14px 4px;border-radius:14px;background:#1f1b2e;color:#fff;font-weight:500;line-height:1.4;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.demoPildoraHoja[hidden]{display:none}
.demoPildoraHoja p{margin:0}
.demoPildoraHoja a{display:flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* En las apps por rol cuelga del borde de la cabecera, a la derecha: abajo tapaba el botón principal de la pantalla. */
/* Bajo la cabecera, sin encimarse: su zona de toque (9 px alrededor) empieza 1 px debajo del borde, así «Salir» conserva
   sus 44 px. */
body.ap:not(.sin-sesion) .demoPildora{bottom:auto;left:auto;top:calc(var(--ap-top-h,60px) + 10px);right:max(12px,env(safe-area-inset-right))}
body.ap:not(.sin-sesion) .demoPildoraHoja{bottom:auto;left:auto;right:0;top:calc(100% + 10px)}
body.sin-sesion .demoPildora,body:has(#loginView:not(.hide)) .demoPildora{position:absolute;bottom:auto;left:auto;
  top:calc(12px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
body.sin-sesion .demoPildoraHoja,body:has(#loginView:not(.hide)) .demoPildoraHoja{bottom:auto;left:auto;right:0;top:calc(100% + 10px)}
html.demoEntrando .entrar{visibility:hidden}
/* PWA instalada: la cáscara de las apps por rol no rebota ni enseña el fondo, sin retraso de
   doble toque ni destello gris al tocar (el foco visible lo pone cada control). */
html:has(body[data-login-role]),body[data-login-role]{overscroll-behavior:none}
/* Siempre en claro (decisión del dueño, 10-oct-2026): ni la entrada ni las apps por rol siguen el modo oscuro del
   teléfono; los controles nativos tampoco. La meta color-scheme de cada página lo dice antes de cargar esta hoja. */
html:has(body[data-login-role]){color-scheme:light}
body[data-login-role]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── Segunda puerta bajo el botón principal, con el borde del color del rol: «Entrar con passkey» (passkey-rol.js) y
   «Entrar con código» / «Entrar con mi correo» (sesion-rol.js). El aviso suave (.pkAviso) es también «Te enviamos un enlace». ── */
.entrar .pkEntrar{display:flex;flex-direction:column;gap:.6rem;align-items:stretch}
.entrar .pkO{display:flex;align-items:center;gap:.75rem;color:var(--tx3,#5d6573);font-size:.875rem}
.entrar .pkO::before,.entrar .pkO::after{content:"";flex:1;height:1px;background:var(--line-2,#b8c0c7)}
.entrar .pkBoton{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:52px;
  border:1.5px solid var(--role);border-radius:12px;background:transparent;color:var(--role);font:inherit;
  font-size:1rem;font-weight:750;cursor:pointer}
.entrar .pkBoton svg{width:22px;height:22px;flex:none}
.entrar .pkBoton:hover{background:var(--role-soft)}
.entrar .pkBoton:focus-visible{outline:3px solid color-mix(in srgb,var(--role) 30%,transparent);outline-offset:2px}
.entrar .pkBoton:disabled{opacity:.6;cursor:progress}
/* Con el enlace del dueño la passkey va primero y la contraseña queda como alternativa (botón con borde). */
.entrar .pkAlta{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.4rem}
.entrar .pkPrincipal{display:flex;align-items:center;justify-content:center;gap:.55rem}
.entrar .pkPrincipal svg{width:22px;height:22px;flex:none}
.entrar .pkAviso{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.4rem}
.entrar .pkAviso p{margin:0;padding:.85rem 1rem;border-radius:12px;background:var(--role-soft);color:var(--tx,#1d2330);font-size:.9375rem;line-height:1.45;text-align:left}
.entrar .rolePrimary.pkSecundario{background:transparent;color:var(--role);box-shadow:inset 0 0 0 1.5px var(--role)}
/* «Entrar con mi correo» (sesion-rol.js): las puertas se esconden con [hidden] aunque su clase traiga display; el
   correo escrito, largo y sin espacios, parte la línea en lugar de desbordar la tarjeta. */
.entrar .caja [hidden]{display:none!important}
.entrar .pkAviso .correoDato{overflow-wrap:anywhere}