/* ── BioClimas Light Theme ─────────────────────────────────── */

[data-theme="light"] {
  /* Inter / Space Grotesk pages */
  --bg:             #edf4fb;
  --bg-panel:       #e2ecf5;
  --bg-card:        #ffffff;
  --bg-card2:       #f3f8ff;
  --bg-input:       rgba(14,165,233,0.04);
  --bg-input-focus: rgba(14,165,233,0.08);
  --border:         rgba(14,165,233,0.13);
  --border-h:       rgba(14,165,233,0.38);
  --border-hover:   rgba(14,165,233,0.28);
  --border-focus:   rgba(14,165,233,0.6);
  --accent:         #0284c7;
  --accent-light:   #0ea5e9;
  --accent-dim:     #0369a1;
  --accent-glow:    rgba(2,132,199,0.13);
  --accent-glow2:   rgba(2,132,199,0.07);
  --text:           #0d2137;
  --text-sec:       #2d618a;
  --text-muted:     #7599b4;
  --ok:             #059669;
  --ok-bg:          rgba(5,150,105,0.08);
  --ok-border:      rgba(5,150,105,0.2);
  --warn:           #d97706;
  --warn-bg:        rgba(217,119,6,0.08);
  --warn-border:    rgba(217,119,6,0.2);
  --danger:         #e11d48;
  --danger-bg:      rgba(225,29,72,0.07);
  --danger-border:  rgba(225,29,72,0.2);
  --purple:         #7c3aed;
  --purple-dim:     rgba(124,58,237,0.08);
  --purple-border:  rgba(124,58,237,0.2);
  --success:        #059669;
  --success-dim:    rgba(5,150,105,0.08);
  --warning:        #d97706;
  --warning-dim:    rgba(217,119,6,0.08);
  /* formulario_diagnostico vars */
  --surface:        #ffffff;
  --surface2:       #edf4fb;
  --border-active:  #0284c7;
}

/* ── Header hardcoded backgrounds ── */
[data-theme="light"] header {
  background: rgba(237,244,251,0.92) !important;
  border-bottom-color: rgba(14,165,233,0.14) !important;
}
[data-theme="light"] .sidebar {
  background: rgba(226,236,245,0.8) !important;
  border-right-color: rgba(14,165,233,0.13) !important;
}

/* ── Noise overlay ── */
[data-theme="light"] body::before { opacity: 0 !important; }

/* ── Background decorations ── */
[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(14,165,233,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.06) 1px, transparent 1px) !important;
}
[data-theme="light"] .bg-gradient-tl {
  background: radial-gradient(ellipse 70% 60% at 15% 20%, rgba(14,165,233,0.1) 0%, transparent 70%) !important;
}
[data-theme="light"] .bg-gradient-br {
  background: radial-gradient(ellipse 60% 55% at 85% 85%, rgba(124,58,237,0.07) 0%, transparent 70%) !important;
}
[data-theme="light"] .bg-gradient-left {
  background: radial-gradient(ellipse 80% 70% at 20% 40%, rgba(14,165,233,0.1) 0%, transparent 70%) !important;
}
[data-theme="light"] .bg-gradient-right {
  background: radial-gradient(ellipse 60% 60% at 80% 80%, rgba(3,105,161,0.08) 0%, transparent 70%) !important;
}
[data-theme="light"] .bg-particle { opacity: 0.025 !important; }
[data-theme="light"] .bg-glow {
  background: radial-gradient(ellipse, rgba(124,58,237,0.07) 0%, transparent 70%) !important;
}
[data-theme="light"] .bg-line-h {
  background: linear-gradient(90deg, transparent 0%, rgba(14,165,233,0.1) 30%, rgba(14,165,233,0.1) 70%, transparent 100%) !important;
}

/* ── Logo text ── */
[data-theme="light"] .logo-name { color: #0d2137 !important; }

/* ── Formulario: inputs ── */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--surface2) !important;
  border-color: rgba(14,165,233,0.22) !important;
  color: var(--text) !important;
}
[data-theme="light"] select option {
  background: #ffffff;
  color: #0d2137;
}

/* ── Formulario: toggles ── */
[data-theme="light"] .toggle-track { background: rgba(14,165,233,0.2) !important; }
[data-theme="light"] .toggle-track.on { background: var(--accent) !important; }

/* ── Formulario: radio opts & toggle rows ── */
[data-theme="light"] .radio-opt,
[data-theme="light"] .toggle-row {
  background: var(--surface2) !important;
  border-color: rgba(14,165,233,0.18) !important;
}
[data-theme="light"] .radio-opt.selected {
  background: var(--accent-glow2) !important;
  border-color: var(--accent) !important;
}

/* ── Login panel ── */
[data-theme="light"] .auth-side {
  background: rgba(237,244,251,0.7) !important;
  border-left-color: rgba(14,165,233,0.12) !important;
}

/* ── Acentos estáticos no cubiertos arriba (Fase 2) ── */
[data-theme="light"] {
  --amber:        #b45309;
  --amber-dim:    rgba(180,83,9,0.10);
  --amber-border: rgba(180,83,9,0.25);
  --amber-glow:   rgba(180,83,9,0.18);
  --ok-dim:       rgba(5,150,105,0.10);
  --ok-glow:      rgba(5,150,105,0.18);
  --danger-dim:   rgba(225,29,72,0.10);
  --purple-glow:  rgba(124,58,237,0.18);
}

/* ── Acentos de rol por clase CSS en modo claro (Fase 3) ──────────────────
   Las páginas multi-rol (reportes, calificaciones, navegacion) definen el
   acento con body.role-* { --rc/--pc }. En claro esos tonos quedan lavados
   sobre blanco; aquí los oscurecemos con mayor especificidad (gana a body.role-*).
   Cubrimos ambas familias (--rc y --pc) por rol. */
[data-theme="light"] body.role-tecnico {
  --rc:#047857; --rc-dim:rgba(4,120,87,0.10); --rc-border:rgba(4,120,87,0.28); --rc-glow:rgba(4,120,87,0.18);
  --pc:#047857; --pc-dim:rgba(4,120,87,0.10); --pc-border:rgba(4,120,87,0.28); --pc-grad-to:#065f46;
}
[data-theme="light"] body.role-analista {
  --rc:#0369a1; --rc-dim:rgba(3,105,161,0.10); --rc-border:rgba(3,105,161,0.28); --rc-glow:rgba(3,105,161,0.18);
  --pc:#0369a1; --pc-dim:rgba(3,105,161,0.10); --pc-border:rgba(3,105,161,0.28); --pc-grad-to:#075985;
}
[data-theme="light"] body.role-supervisor {
  --rc:#6d28d9; --rc-dim:rgba(109,40,217,0.10); --rc-border:rgba(109,40,217,0.28); --rc-glow:rgba(109,40,217,0.18);
  --pc:#6d28d9; --pc-dim:rgba(109,40,217,0.10); --pc-border:rgba(109,40,217,0.28); --pc-grad-to:#5b21b6;
}
[data-theme="light"] body.role-admin {
  --rc:#b45309; --rc-dim:rgba(180,83,9,0.10); --rc-border:rgba(180,83,9,0.28); --rc-glow:rgba(180,83,9,0.18);
  --pc:#b45309; --pc-dim:rgba(180,83,9,0.10); --pc-border:rgba(180,83,9,0.28); --pc-grad-to:#92400e;
}
[data-theme="light"] body.role-lider_cuadrilla {
  --rc:#0f766e; --rc-dim:rgba(15,118,110,0.10); --rc-border:rgba(15,118,110,0.28); --rc-glow:rgba(15,118,110,0.18);
  --pc:#0f766e; --pc-dim:rgba(15,118,110,0.10); --pc-border:rgba(15,118,110,0.28); --pc-grad-to:#115e59;
}

/* ── Spots con hex claro usado como texto, ilegibles en blanco (Fase 5) ── */
/* reportes: título con gradiente claro → color sólido legible del acento */
[data-theme="light"] .page-title em {
  background: none !important;
  -webkit-text-fill-color: var(--rc, var(--accent)) !important;
  color: var(--rc, var(--accent)) !important;
}
/* calificaciones: iluminación en amber */
[data-theme="light"] .cat-icon.ilu,
[data-theme="light"] .score-badge.ilu { color: #b45309 !important; }
/* control-refrigerantes: badges de tipo cian/azul */
[data-theme="light"] .tipo-r134a { color: #0e7490 !important; }
[data-theme="light"] .tipo-rxp40 { color: #1d4ed8 !important; }

/* ── Theme toggle button (all pages) ── */
.btn-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-sec);
  cursor: pointer; font-size: 16px; transition: all 0.2s;
  flex-shrink: 0; padding: 0;
}
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }