/* ═══════════════════════════════════════════════════════════════════════
   GTV UNIVERSAL HOSPITALITY MANAGER · estilos del menú principal
   WORLD WIDE GLOBAL TELEVISIÓN, SL · EU VAT ES B 81121931
   Autor: Julio César de la Orden Ossel · 2026-07-10 (Europe/Madrid)
   ───────────────────────────────────────────────────────────────────────
   HTML5/CSS nativo. Tema oscuro por defecto (logo BLANCO) y tema claro
   (logo NEGRO). Variables CSS para tematizar todo desde un punto.
   Pensado para paneles táctiles Crestron, iPad de pared, PC y TV.
   ═══════════════════════════════════════════════════════════════════════ */

:root, body[data-theme="dark"]{
  --bg:#0a0e16; --bg2:#0f1722; --fg:#e8eef6; --dim:#8aa0b8;
  --line:#1d2a3a; --accent:#39c8ff; --card:#101a28; --card-hov:#152238;
}
body[data-theme="light"]{
  /* v3.4.12 (encargo JULIO, WCAG): --dim #5b6b7d daba 3,5:1 sobre los fondos
     claros — oscurecido lo justo a #52616f (~6:1, AA) manteniendo el tono */
  --bg:#f4f6f9; --bg2:#ffffff; --fg:#16202c; --dim:#52616f;
  --line:#d8dfe8; --accent:#0077b6; --card:#ffffff; --card-hov:#eef3f9;
}

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100vh; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; }

/* BUGFIX 2026-07-16 (reportado por JULIO): login y menú salían JUNTOS, uno
   debajo del otro. Causa: .menu-wrap{display:flex} pisa el display:none que
   el navegador aplica al atributo hidden (la regla de autor gana a la de
   agente de usuario). Garantía dura: hidden SIEMPRE oculta. */
[hidden]{ display:none !important; }

.menu-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:34px; padding:40px 24px; position:relative; }

/* ── Marca ── */
.brand{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.logo{ height:84px; max-width:min(70vw,520px); object-fit:contain; }
.appname{ margin:0; font-size:clamp(17px,2.4vw,26px); font-weight:300; letter-spacing:.24em; }
.appname span{ font-weight:800; }

/* ── Secciones ──
   Grid FIJO de 2 columnas (2×2 con las 4 secciones actuales). Ampliable el día
   de mañana cambiando SOLO --menu-cols a 3 (2×3) o 4 (2×4): las tarjetas fluyen
   solas por filas. En pantallas estrechas (móvil/panel 5") cae a 1 columna. */
.sections{ --menu-cols:2;
  display:grid; grid-template-columns:repeat(var(--menu-cols),1fr);
  gap:16px; width:min(1080px,94vw); }
@media (max-width:640px){ .sections{ --menu-cols:1; } }
.section{ display:flex; align-items:center; gap:16px; padding:22px 22px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  text-decoration:none; color:var(--fg); transition:transform .12s, background .12s, border-color .12s; }
.section:hover, .section:focus-visible{ background:var(--card-hov); border-color:var(--accent);
  transform:translateY(-2px); outline:none; }
.section:active{ transform:scale(.985); }
.sec-num{ flex:0 0 46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:20px; font-weight:800; color:var(--accent);
  border:1.5px solid var(--accent); }
.sec-body h2{ margin:0 0 4px; font-size:18px; font-weight:700; }
.sec-body p{ margin:0; font-size:12.8px; color:var(--dim); line-height:1.4; }

/* ── Legales ── */
.legal{ text-align:center; color:var(--dim); font-size:12px; line-height:1.7; }
.legal-line strong{ color:var(--fg); font-weight:700; }

/* ── Botón de tema ── */
.themebtn{ position:absolute; top:18px; right:18px; width:42px; height:42px;
  border-radius:12px; border:1px solid var(--line); background:var(--card);
  color:var(--fg); font-size:17px; cursor:pointer; }
.themebtn:hover{ border-color:var(--accent); }

/* ── LOGIN (v0.2, norma JULIO 2026-07-16): mismo lenguaje visual del menú,
   SIEMPRE en oscuro (el <body> se fija a data-theme="dark" desde app.js y no
   hay botón de tema). Tarjeta de acceso con usuario/contraseña, centrada,
   con el logotipo, el nombre y los datos legales/contacto. ── */
.login-card{ width:min(92vw,380px); background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:26px 26px 22px; display:flex; flex-direction:column;
  box-shadow:0 18px 48px rgba(0,0,0,.45); }
.login-title{ margin:0 0 2px; font-size:18px; font-weight:800; }
.login-sub{ margin:0 0 14px; font-size:12.5px; color:var(--dim); }
.login-field{ display:flex; flex-direction:column; gap:5px; margin:0 0 12px; }
.login-field span{ font-size:12px; color:var(--dim); }
.login-field input{ height:44px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg2); color:var(--fg);
  font-size:14px; font-family:inherit; box-sizing:border-box; }
.login-field input:focus{ outline:none; border-color:var(--accent); }
.login-msg{ min-height:16px; font-size:12px; color:#e0777d; margin:0 0 8px; }
.login-btn{ height:46px; border:0; border-radius:10px; background:var(--accent);
  color:var(--accent-fg,#04121c); font-size:15px; font-weight:700; cursor:pointer; }
.login-btn:hover{ filter:brightness(1.06); }
.login-btn:disabled{ opacity:.6; cursor:default; }

/* ── Chip de sesión en el menú (usuario · rol · Salir) ── */
.session-chip{ position:absolute; top:18px; left:18px; display:inline-flex;
  align-items:center; gap:10px; font-size:12px; color:var(--dim);
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:7px 12px; }
.session-out{ border:1px solid var(--line); background:var(--bg2); color:var(--fg);
  border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; }
.session-out:hover{ border-color:var(--accent); }

/* ── Táctil pequeño (paneles 5"/7") ── */
@media (max-height:640px){
  .menu-wrap{ gap:20px; padding:20px 16px; }
  .logo{ height:56px; }
  .section{ padding:14px 16px; }
}