/* Temas de color de TODA la app. Se elige en el menú "Tema" de panel.php y miembro.php y se guarda
   en el navegador (assets/js/tema.js), así que se aplica en todas las páginas que cargan este archivo.
   "actual" = el diseño original y es el DEFAULT: no tiene reglas aquí, así que sin data-tema
   todo se ve exactamente igual que antes. Los demás solo sobreescriben variables/colores.
   Las páginas usan nombres distintos de variables (--bg-card/--text-muted en la mayoría,
   --card/--muted en miembro), por eso se definen ambos. */

/* ---------- Menú del selector ---------- */
.tema-wrap { position: relative; }
.tema-wrap ~ .logout-btn { margin-left: 0; } /* en miembro.php el margen automático lo lleva el menú de tema */
.tema-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 500; min-width: 210px;
  background: var(--bg-card, var(--card)); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.tema-menu.open { display: block; }
.tema-op {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; border-radius: 9px;
  background: transparent; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.tema-op:hover { background: rgba(255,255,255,.06); }
.tema-muestra { display: flex; gap: 3px; flex-shrink: 0; }
.tema-muestra i { width: 11px; height: 11px; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,.15); }
.tema-op .check { margin-left: auto; font-size: 17px; color: var(--accent); visibility: hidden; }
.tema-op.activo .check { visibility: visible; }

/* ---------- Clásico: grises neutros, sin colores ---------- */
html[data-tema="clasico"] {
  --bg: #1b1c1e; --bg-card: #26282b; --card: #26282b; --border: #3a3d42;
  --text: #e8e8e8; --text-muted: #9ea1a6; --muted: #9ea1a6; --text-dim: #6f7378;
  --accent: #b8bcc2; --accent-rgb: 184,188,194; --accent-glow: rgba(184,188,194,.25); --bg-input: #202124;
}
html[data-tema="clasico"] .btn-primary { color: #1b1c1e; }
/* Todo lo que usa --c/--cr (tarjetas, secciones, íconos) pasa a gris. !important para ganarle al style="" en línea. */
html[data-tema="clasico"] .card,
html[data-tema="clasico"] .kpi,
html[data-tema="clasico"] [style*="--c:"] { --c: #c4c7cc !important; --cr: 196,199,204 !important; --k: #c4c7cc; --kr: 196,199,204; }
html[data-tema="clasico"] .header-icon { background: #4a4d52; }
html[data-tema="clasico"] .header-info h1 span { color: #d0d3d8 !important; }
html[data-tema="clasico"] .progreso { background: #26282b; }
html[data-tema="clasico"] .lider-section { background: #232528 !important; border-color: #3a3d42 !important; box-shadow: none; }
html[data-tema="clasico"] .lider-ic { background: rgba(196,199,204,.14) !important; }
html[data-tema="clasico"] .lider-ic .material-icons-round,
html[data-tema="clasico"] .serv-date { color: #d0d3d8 !important; }
html[data-tema="clasico"] .lider-pill { background: #6b6f75 !important; color: #fff !important; }
html[data-tema="clasico"] .serv-date { background: rgba(196,199,204,.12); }
html[data-tema="clasico"] .modal-btn { color: #1b1c1e; }

/* ---------- Colores vivos: fondo profundo y acentos saturados ---------- */
html[data-tema="vivo"] {
  --bg: #0d0724; --bg-card: #1b1042; --card: #1b1042; --border: #3b2a80;
  --text: #ffffff; --text-muted: #c3bcef; --muted: #c3bcef; --text-dim: #8f86c9;
  --accent: #ff2d95; --accent-rgb: 255,45,149; --accent-glow: rgba(255,45,149,.35); --bg-input: #140a33;
}
html[data-tema="vivo"] .header h1, html[data-tema="vivo"] .header h1 span { color: #fff; }
html[data-tema="vivo"] .header h1 span { color: #ffe14d; }
html[data-tema="vivo"] .panel { box-shadow: 0 0 0 1px rgba(255,45,149,.12), 0 10px 30px rgba(91,18,184,.25); }
html[data-tema="vivo"] .btn-primary { color: #fff; }
html[data-tema="vivo"] .back-btn { background: rgba(255,255,255,.15); color: #fff; }
html[data-tema="vivo"] body { background: radial-gradient(circle at 15% 0%, #2a0f5c 0%, #0d0724 55%) fixed; }
html[data-tema="vivo"] .header { background: linear-gradient(90deg, #5b12b8, #1d4ed8 55%, #0891b2); border-bottom-color: transparent; }
html[data-tema="vivo"] .header-icon { background: #ff2d95; box-shadow: 0 0 18px rgba(255,45,149,.6); }
html[data-tema="vivo"] .header-info h1 span { color: #ffe14d !important; }
html[data-tema="vivo"] .header-info p { color: #e0dcff; }
html[data-tema="vivo"] .logout-btn { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
html[data-tema="vivo"] .kpi { background: rgba(13,7,36,.55); border-color: rgba(255,255,255,.25); }
html[data-tema="vivo"] .kpi-num { color: #fff; }
html[data-tema="vivo"] .kpi-label { color: #e0dcff; }
html[data-tema="vivo"] .card,
html[data-tema="vivo"] .app-card { border-color: rgba(var(--cr), .55); box-shadow: 0 0 0 1px rgba(var(--cr), .15), 0 8px 24px rgba(var(--cr), .18); }
html[data-tema="vivo"] .card-icon,
html[data-tema="vivo"] .app-icon,
html[data-tema="vivo"] .team-dot { background: rgba(var(--cr), .3); }
html[data-tema="vivo"] .card-btn { background: rgb(var(--cr)); color: #fff; }
html[data-tema="vivo"] .section-title { color: #ffe14d; }
html[data-tema="vivo"] .progreso { background: linear-gradient(135deg, rgba(255,45,149,.35), rgba(29,78,216,.35)); border-color: rgba(255,45,149,.5); }
html[data-tema="vivo"] .saludo span { color: #ffe14d; }
html[data-tema="vivo"] .serv-date { color: #ff2d95; background: rgba(255,45,149,.15); }

/* ---------- Windows clásico: escritorio verde azulado, ventanas grises con relieve, barra azul marino ---------- */
/* --bg lo usan las páginas para cajas internas y campos: gris claro. El escritorio verde azulado va en body. */
html[data-tema="windows"] {
  --bg: #e4e4e4; --bg-card: #c0c0c0; --card: #c0c0c0; --border: #808080;
  --text: #000000; --text-muted: #2b2b2b; --muted: #2b2b2b; --text-dim: #505050;
  --accent: #000080; --accent-rgb: 0,0,128; --accent-glow: rgba(0,0,128,.2); --bg-input: #ffffff;
}
html[data-tema="windows"] body { font-family: Tahoma, 'MS Sans Serif', Geneva, sans-serif; background: #008080 !important; }
/* Ventanas: paneles y tarjetas de todas las páginas */
html[data-tema="windows"] .panel {
  background: #c0c0c0 !important; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff !important;
  border-radius: 0 !important; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf !important;
}
/* Campos de texto hundidos y blancos */
html[data-tema="windows"] .form-control, html[data-tema="windows"] input[type="text"], html[data-tema="windows"] input[type="email"],
html[data-tema="windows"] input[type="password"], html[data-tema="windows"] input[type="date"], html[data-tema="windows"] input[type="number"],
html[data-tema="windows"] input[type="url"], html[data-tema="windows"] select, html[data-tema="windows"] textarea {
  background: #fff !important; color: #000 !important; border-radius: 0 !important;
  border: 2px solid !important; border-color: #404040 #ffffff #ffffff #404040 !important;
}
/* Botones grises con relieve */
html[data-tema="windows"] .btn-primary, html[data-tema="windows"] .btn-secondary, html[data-tema="windows"] .back-btn,
html[data-tema="windows"] .badge, html[data-tema="windows"] .btn-mini, html[data-tema="windows"] .tab {
  background: #c0c0c0 !important; color: #000 !important; border-radius: 0 !important;
  border: 2px solid !important; border-color: #ffffff #404040 #404040 #ffffff !important;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}
html[data-tema="windows"] .btn-primary .material-icons-round, html[data-tema="windows"] .badge .material-icons-round { color: #000080 !important; }
html[data-tema="windows"] .btn-primary:active, html[data-tema="windows"] .btn-secondary:active { border-color: #404040 #ffffff #ffffff #404040 !important; }
/* Tablas: fondo blanco como una lista de Windows */
html[data-tema="windows"] .data-table { background: #fff; }
html[data-tema="windows"] .data-table th { background: #c0c0c0; color: #000; }
/* Títulos de página en la barra azul */
html[data-tema="windows"] .header h1, html[data-tema="windows"] .header h1 span { color: #fff !important; }
/* Relieve 3D típico de Windows 95/98 */
html[data-tema="windows"] .card,
html[data-tema="windows"] .app-card,
html[data-tema="windows"] .kpi,
html[data-tema="windows"] .modal-card,
html[data-tema="windows"] .serv-item,
html[data-tema="windows"] .versiculo-card,
html[data-tema="windows"] .progreso,
html[data-tema="windows"] .empty,
html[data-tema="windows"] .lider-section,
html[data-tema="windows"] .tema-menu {
  background: #c0c0c0 !important; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff !important;
  border-radius: 0 !important; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf !important;
}
html[data-tema="windows"] .card:hover, html[data-tema="windows"] .app-card:hover { transform: none; }
html[data-tema="windows"] .logout-btn,
html[data-tema="windows"] .card-btn,
html[data-tema="windows"] .modal-btn,
html[data-tema="windows"] .modal-x {
  background: #c0c0c0 !important; color: #000 !important; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff !important;
  border-radius: 0 !important; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}
html[data-tema="windows"] .logout-btn:active, html[data-tema="windows"] .card-btn:active { border-color: #404040 #ffffff #ffffff #404040 !important; }
/* Barra de título */
html[data-tema="windows"] .header { background: linear-gradient(90deg, #000080, #1084d0); border-bottom: 2px solid #404040; }
html[data-tema="windows"] .header-icon { background: #c0c0c0; border-radius: 0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
html[data-tema="windows"] .header-icon .material-icons-round { color: #000080 !important; }
html[data-tema="windows"] .header-info h1, html[data-tema="windows"] .header-info h1 span { color: #fff !important; }
html[data-tema="windows"] .header-info p { color: #dfe7ff; }
/* Textos sobre el "escritorio" verde azulado: blancos, como las etiquetas de los íconos */
html[data-tema="windows"] .section-title, html[data-tema="windows"] .saludo, html[data-tema="windows"] .saludo span,
html[data-tema="windows"] .sub, html[data-tema="windows"] .team-name { color: #fff !important; }
html[data-tema="windows"] .team-name small { color: #e6f2f2 !important; }
/* Calendario (dashboard.php): mes, días de la semana, leyenda y título de anuncios van sobre el escritorio */
html[data-tema="windows"] .month-label, html[data-tema="windows"] .cal-header-cell,
html[data-tema="windows"] .legend-item, html[data-tema="windows"] .anuncios-head h2 { color: #fff !important; }
html[data-tema="windows"] .anuncios-head .material-icons-round { color: #fff; }
html[data-tema="windows"] .card-subtitle { color: #000080; }
html[data-tema="windows"] .card-icon, html[data-tema="windows"] .app-icon, html[data-tema="windows"] .team-dot,
html[data-tema="windows"] .kpi-icon, html[data-tema="windows"] .lider-ic { border-radius: 0 !important; }
html[data-tema="windows"] .progreso .pbar { background: #fff; border-radius: 0; border: 1px solid #808080; }
html[data-tema="windows"] .progreso .pbar > div { background: #000080 !important; border-radius: 0; }
html[data-tema="windows"] .fld input, html[data-tema="windows"] .fld textarea { background: #fff; color: #000; border-radius: 0; border: 2px solid; border-color: #404040 #fff #fff #404040; }
html[data-tema="windows"] .tema-op:hover { background: #000080; color: #fff; }
html[data-tema="windows"] .tema-op.activo .check { color: #000; }
/* Bloques con colores oscuros escritos en línea (resúmenes de finanzas/inventario en miembro.php) */
html[data-tema="windows"] [style*="background:#151821"] { background: #fff !important; border-color: #808080 !important; border-radius: 0 !important; }
html[data-tema="windows"] [style*="color:#8b8fa3"], html[data-tema="windows"] [style*="color:#c9cdd8"] { color: #2b2b2b !important; }
html[data-tema="windows"] [style*="border-top:1px solid #2e3244"] { border-top-color: #808080 !important; }
/* ...pero los rótulos de finanzas que van directo sobre el escritorio (nombre del equipo, línea del tesorero) en blanco */
html[data-tema="windows"] #finBody > div > [style*="margin:10px 0 6px"],
html[data-tema="windows"] #finBody [style*="margin-top:6px"] { color: #fff !important; }
html[data-tema="windows"] .material-label, html[data-tema="windows"] .menu-titulo,
html[data-tema="windows"] .vista-titulo { color: #fff; }
html[data-tema="windows"] a[href="companeros.php"] {
  background: #c0c0c0 !important; border: 2px solid !important; border-color: #fff #404040 #404040 #fff !important;
  border-radius: 0 !important; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}

/* ---------- Claro: fondo gris muy claro, tarjetas blancas, texto oscuro y acento índigo ---------- */
html[data-tema="claro"] {
  --bg: #f3f4f7; --bg-card: #ffffff; --card: #ffffff; --border: #dde0e6;
  --text: #1f2328; --text-muted: #5b6270; --muted: #5b6270; --text-dim: #8a909c;
  --accent: #4f46e5; --accent-rgb: 79,70,229; --accent-glow: rgba(79,70,229,.2); --bg-input: #eef0f4;
  color-scheme: light;
}
html[data-tema="claro"] .header { box-shadow: 0 1px 3px rgba(16,24,40,.06); }
html[data-tema="claro"] .panel, html[data-tema="claro"] .card, html[data-tema="claro"] .app-card,
html[data-tema="claro"] .kpi, html[data-tema="claro"] .modal-card { box-shadow: 0 1px 3px rgba(16,24,40,.06); }
html[data-tema="claro"] .btn-primary { color: #fff; }
html[data-tema="claro"] .back-btn { background: #eceef2; color: #1f2328; }
html[data-tema="claro"] .header-info h1 span[style*="color:#fff"] { color: #1f2328 !important; }
html[data-tema="claro"] .tema-op:hover { background: #eef0f4; }
html[data-tema="claro"] .tema-muestra i { border-color: rgba(0,0,0,.15); }
html[data-tema="claro"] .tema-menu { box-shadow: 0 12px 32px rgba(16,24,40,.18); }
html[data-tema="claro"] .modal-overlay { background: rgba(16,24,40,.45); }
html[data-tema="claro"] .progreso .pbar { background: #e3e6ec; }
html[data-tema="claro"] .lider-pill { color: #fff !important; }
/* Bloques con colores oscuros escritos en línea (resúmenes de finanzas/inventario en miembro.php) */
html[data-tema="claro"] [style*="background:#151821"] { background: #f7f8fa !important; border-color: #dde0e6 !important; }
html[data-tema="claro"] [style*="color:#8b8fa3"] { color: #5b6270 !important; }
html[data-tema="claro"] [style*="color:#c9cdd8"] { color: #3a3f47 !important; }
html[data-tema="claro"] [style*="border-top:1px solid #2e3244"] { border-top-color: #dde0e6 !important; }
html[data-tema="claro"] [style*="color:#e4e4e7"], html[data-tema="claro"] [style*="color:var(--text,#e4e4e7)"] { color: #1f2328 !important; }