/* Bocas del Toro · Playa MDQ
   Logo sobre blanco: arcos celeste, ámbar y rosa; letras finas en gris. Tipografía geométrica (Poppins).
   La barra es clara con una franja de los tres colores del logo. Los carteles de estado no cambian. */
:root{
  --brand:#109C95; --brand-ink:#FFFFFF; --brand-dark:#0B7F79; --brand-cream:#F3A613;
  --navy:#0B6E69; --teal:#109C95; --sun:#F3A613; --rosa:#DB5A99; --gris-logo:#4F5653; --gris-pill:#7A7F7B;
  --bg:#F3F7F6; --surface:#FFFFFF; --surface-2:#EDF3F2; --ink:#2C3735; --muted:#5C6866; --line:#D5E1DF;
  --accent:#0B7F79; --accent-ink:#FFFFFF; --accent-soft:#DCEFED;
  --shadow:0 1px 2px rgba(20,60,58,.06),0 8px 24px rgba(20,60,58,.08);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D1A19; --surface:#142524; --surface-2:#10201F; --ink:#E7F0EE; --muted:#9BAEAB; --line:#25403D;
    --accent:#3CC2BA; --accent-ink:#05211F; --accent-soft:#163F3B; --gris-logo:#E7F0EE;
  }
}

/* Barra clara con franja de color */
.bar{background:var(--surface);color:var(--ink);box-shadow:none;border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--teal) 0 40%,var(--sun) 40% 70%,var(--rosa) 70% 100%) 1}
.logo-txt{gap:1px}
.wordmark{font:300 27px/1 var(--font-display);color:var(--gris-logo);letter-spacing:.1em;text-shadow:none}
.club{font:400 12px/1 var(--font-display);color:var(--gris-logo);letter-spacing:.16em;text-transform:uppercase}
.seccion{border-left-color:var(--line)}
.seccion b{font:600 17px/1.1 var(--font-display);color:var(--brand-dark)}
.seccion small{color:var(--muted);font-weight:500}
.clock{font:600 22px/1 var(--font-display);color:var(--ink)}
.conn{color:var(--muted)}
.conn i{box-shadow:0 0 0 2px var(--surface)}
.conn.off{color:#FFFFFF}
.btn-bar{border-color:var(--line);background:var(--surface-2);color:var(--ink)}
.btn-bar:hover{background:var(--accent-soft);border-color:var(--accent)}
.user-chip{color:var(--muted)}
.user-chip span{color:var(--ink)}
.bar .link-btn{color:var(--accent)}

/* Pantalla de ingreso: fondo claro, logo completo con la placa "Playa · MDQ" */
.acceso{background:var(--bg)}
.acceso-marca{gap:4px}
.acceso-marca .logo-ico{width:110px;height:110px}
.acceso-marca .wordmark{font-size:54px;font-weight:300;text-shadow:none;letter-spacing:.12em}
.acceso-marca .club{font-size:22px;font-weight:400;letter-spacing:.14em}
.pill-mdq{display:inline-flex;align-items:center;gap:10px;margin-top:8px;background:var(--gris-pill);color:#FFFFFF;border-radius:999px;
  padding:5px 22px;font:500 13px/1 var(--font-display);letter-spacing:.42em;text-transform:uppercase}
.pill-mdq i{width:8px;height:8px;border-radius:50%;background:var(--sun);display:inline-block;margin-right:.3em}
.acceso-card{box-shadow:var(--shadow);border:1px solid var(--line)}
.acceso-card .btn.primary{background:var(--brand-dark);border-color:var(--brand-dark);color:#FFFFFF}

/* Títulos con la tipografía geométrica del logo (más ancha que la de Guillermo: un poco más chica) */
.res-head h2{font-weight:700;letter-spacing:.01em;font-size:clamp(24px,3.4vw,42px)}
.btn-registrar,.btn-salida{font-size:clamp(20px,2.2vw,26px)}
.carpa-big b{font-size:clamp(70px,9.5vw,118px)}
.carpa-big b{font-weight:700}
.panel h2,.panel h3,.acceso-card h1,.modal-card h3{font-weight:600}
.stat b,.idle-stats b,td.num,.cr-num b{font-weight:600}
.btn-registrar{font-weight:700}
.pat-go{font-weight:600;letter-spacing:.06em}
.tabs button[aria-selected="true"]{background:var(--brand-dark)}
#pat:focus{border-color:var(--teal);box-shadow:0 0 0 5px rgba(16,156,149,.2),var(--shadow)}
.cambio-flecha{color:var(--teal)}

@media (max-width:420px){
  .acceso-marca .wordmark{font-size:42px}
}