@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}

[data-login-shell] .roleKicker{margin:0 0 .45rem;color:var(--role);font-size:.76rem;
  font-weight:800;letter-spacing:.09em;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 + tarjeta en una sola pieza. En celular la foto es la cabecera; desde
   860px van lado a lado (como estaba el acceso de huéspedes, que fue el modelo). */
.entrar .lienzo{width:100%;max-width:64rem;display:grid;grid-template-columns:1fr;border-radius:22px;
  overflow:hidden;background:var(--s1,#fff);border:1px solid var(--line,#e2e5e9);
  box-shadow:0 18px 60px rgba(10,12,18,.14)}
.entrar .lienzo .caja{max-width:none;border:0;border-radius:0;box-shadow:none}
.entrar .arte{position:relative;min-height:clamp(180px,44vw,270px);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: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)}
@media (min-width:860px){
  /* Escritorio: pantalla completa, sin marco. La foto ocupa su mitad de borde a borde y la
     tarjeta se centra en la otra; --login-top descuenta una barra fija encima (huésped). */
  .entrar{padding:0;place-items:stretch}
  .entrar .lienzo{max-width:none;min-height:calc(100dvh - var(--login-top,0px));grid-template-columns:1.15fr 1fr;
    border:0;border-radius:0;box-shadow:none}
  .entrar .lienzo .caja{max-width:430px;width:100%;justify-self:center}
  .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{padding:2.5rem 2.25rem;align-content:center}
}
.entrar .emblema{width:92px;height:92px;margin:0 auto .5rem;border-radius:22px;display:block}
.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.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 ───────────────────────────────────────────────────────────
   «Ver demo»: secundario, con el borde del color del rol para no competir con Entrar.
   La franja 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}
.demoFranja{position:relative;z-index:70;display:flex;gap:.9rem;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:calc(.45rem + env(safe-area-inset-top)) 1rem .45rem;background:#1f1b2e;color:#fff;
  font-size:.875rem;line-height:1.3;text-align:center}
.demoFranja a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  min-height:32px;display:inline-flex;align-items:center}
html.demoEntrando .entrar{visibility:hidden}
/* Elección de perfil de «Ver demo» (aliado: restaurante/hotel/condominio; operador: yates/tours). */
[data-login-shell] .demoPerfiles{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:-.3rem}
[data-login-shell] .demoPerfiles a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;
  border:1px solid var(--role);color:var(--role);font-weight:700;font-size:.95rem;text-decoration:none;background:var(--s1,#fff)}
[data-login-shell] .demoPerfiles a:hover,[data-login-shell] .demoPerfiles a:focus-visible{background:var(--role-soft)}