/* Playa 24 – Punta Mogotes
   Azul mar profundo (fondo del logo), amarillo sol y arena.
   Los carteles de estado (verde, rojo, amarillo, azul de egreso) no cambian: tienen que leerse al sol. */
:root{
  --brand:#17405E; --brand-ink:#FFFFFF; --brand-dark:#0E2C42; --brand-cream:#F3E6CF;
  --navy:#0E2C42; --teal:#2C8DB3; --sun:#F2B33D;
  --bg:#F7F3EC; --surface:#FFFFFF; --surface-2:#F1EBE0; --ink:#132F45; --muted:#5B6873; --line:#E2D9CA;
  --accent:#17405E; --accent-ink:#FFFFFF; --accent-soft:#E3ECF2;
  --shadow:0 1px 2px rgba(19,47,69,.06),0 8px 24px rgba(19,47,69,.08);
  --font-display:"Outfit",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1B27; --surface:#12283A; --surface-2:#0E2232; --ink:#EAF1F6; --muted:#9DB0BE; --line:#22394C;
    --accent:#6FB6DC; --accent-ink:#06202F; --accent-soft:#163650;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
  }
}

/* Logo horizontal (blanco) en la barra y en la pantalla de ingreso */
.logo-ancho{display:block;flex:none;height:54px;width:auto;margin-block:-4px}
.acceso-marca .logo-ancho{height:auto;width:min(420px,82vw);margin-bottom:4px}
.acceso-marca .club{font-size:17px;font-weight:600;letter-spacing:.22em;color:var(--brand-cream)}
@media (max-width:600px){ .bar .logo-ancho{height:42px} }

/* Línea de sol bajo la barra */
.bar{box-shadow:inset 0 -4px 0 var(--sun)}
.seccion{border-left-color:rgba(243,230,207,.35)}

/* Pantalla de ingreso */
.acceso{background:radial-gradient(120% 80% at 50% 0%,#1E5276 0%,var(--brand) 55%,#0E2C42 100%)}
.acceso-card{box-shadow:0 18px 50px rgba(5,20,32,.45)}

#pat:focus{border-color:var(--brand);box-shadow:0 0 0 5px rgba(23,64,94,.2),var(--shadow)}
@media (prefers-color-scheme: dark){ #pat:focus{border-color:var(--accent);box-shadow:0 0 0 5px rgba(111,182,220,.25),var(--shadow)} }
.pat-go{background:var(--brand)}
.conn.sync i{background:var(--sun)}