/* ============================================================
   WESTON — MODO CLARO (solo formularios)
   Se activa con html[data-theme="light"] y solo se enlaza en
   las páginas del módulo (menú, solicitar, login, validar).
   El portal (index.html) no lo enlaza y sigue siempre oscuro.
   Claro es el predeterminado; el toggle (sol/luna) y la
   persistencia los maneja js/form-theme.js (compartido).
   ============================================================ */

/* Botón sol/luna del header (visible en ambos temas) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(26, 157, 211, .07);
  color: var(--cyan-light);
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(46, 196, 245, .3);
}

/* ------------------------------------------------------------
   Variables claras: --white pasa a ser el color de frente
   (oscuro) y --text/--muted se ajustan para fondo blanco.
   Todo componente que use variables se adapta solo.
   ------------------------------------------------------------ */
html[data-theme="light"] {
  --bg:            #E9EFF5;
  --bg-2:          #F5F8FB;
  --panel:         #FFFFFF;
  --panel-soft:    rgba(255, 255, 255, .92);

  --cyan:          #0284C7;
  --cyan-light:    #0369A1;

  --white:         #0F172A;
  --text:          #334155;
  --muted:         #64748B;

  --glass:         rgba(15, 23, 42, .03);
  --glass-border:  rgba(2, 132, 199, .28);
  --hairline:      rgba(15, 23, 42, .13);
}

html[data-theme="light"] body {
  background:
    radial-gradient(1100px 620px at 18% -10%, rgba(2, 132, 199, .10), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(2, 132, 199, .07), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}

html[data-theme="light"] header {
  background: rgba(255, 255, 255, .92);
}

html[data-theme="light"] footer {
  background: rgba(255, 255, 255, .94);
}

html[data-theme="light"] #particles-canvas { opacity: .3; }
html[data-theme="light"] .scan-line { opacity: .5; }

/* Tarjeta y secciones */
html[data-theme="light"] .form-card {
  background: #FFFFFF;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .12);
}

html[data-theme="light"] .form-section {
  background: rgba(2, 132, 199, .04);
}

html[data-theme="light"] .type-card {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

html[data-theme="light"] .type-card:hover {
  background: rgba(2, 132, 199, .06);
}

html[data-theme="light"] .type-card:has(input:checked) {
  background: rgba(2, 132, 199, .09);
  box-shadow: 0 0 0 1px var(--cyan), 0 4px 14px rgba(2, 132, 199, .18);
}

/* Campos */
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
  background: #F8FAFC;
}

html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder {
  color: #94A3B8;
}

/* Botones */
html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #0284C7, #0EA5E9);
  border-color: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(2, 132, 199, .28);
}

html[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 24px rgba(2, 132, 199, .4);
}

html[data-theme="light"] .btn-ghost {
  background: #FFFFFF;
}

/* Insignias del header */
html[data-theme="light"] .dept-badge,
html[data-theme="light"] header .footer-block {
  background: rgba(2, 132, 199, .07);
}

html[data-theme="light"] .theme-toggle {
  background: rgba(2, 132, 199, .08);
}

/* Feedback */
html[data-theme="light"] .form-feedback.is-error { color: #DC2626; }
html[data-theme="light"] .form-feedback.is-ok { color: #059669; }
html[data-theme="light"] .field label span.req { color: #DC2626; }

/* ------------------------------------------------------------
   Menú principal (permisos-traslados.html)
   ------------------------------------------------------------ */
html[data-theme="light"] .menu-card {
  background: #FFFFFF;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .12);
}

html[data-theme="light"] .menu-option {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

html[data-theme="light"] .menu-option:hover {
  background: rgba(2, 132, 199, .06);
}

/* ------------------------------------------------------------
   Login (login.html)
   ------------------------------------------------------------ */
html[data-theme="light"] .login-card {
  background: #FFFFFF;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .12);
}

html[data-theme="light"] .login-field input {
  background: #F8FAFC;
}

html[data-theme="light"] .login-field input::placeholder {
  color: #94A3B8;
}

html[data-theme="light"] .login-btn {
  background: linear-gradient(135deg, #0284C7, #0EA5E9);
  border-color: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(2, 132, 199, .28);
}

html[data-theme="light"] .login-feedback.is-error { color: #DC2626; }
html[data-theme="light"] .login-feedback.is-ok { color: #059669; }

/* ------------------------------------------------------------
   Panel de validación (validar-permisos.html)
   ------------------------------------------------------------ */
html[data-theme="light"] .validate-card {
  background: #FFFFFF;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .12);
}

html[data-theme="light"] .validate-toolbar input {
  background: #F8FAFC;
}

html[data-theme="light"] .validate-toolbar input::placeholder {
  color: #94A3B8;
}

html[data-theme="light"] .table-wrap {
  background: #FFFFFF;
}

html[data-theme="light"] table.validate-table thead th {
  background: rgba(2, 132, 199, .08);
}

html[data-theme="light"] .validate-table tbody tr:hover {
  background: rgba(2, 132, 199, .05);
}

html[data-theme="light"] .badge-traslado {
  border-color: rgba(124, 58, 237, .45);
  background: rgba(124, 58, 237, .1);
  color: #7C3AED;
}

html[data-theme="light"] .btn-salida {
  border-color: rgba(5, 150, 105, .55);
  color: #059669;
}

html[data-theme="light"] .btn-ingreso {
  background: linear-gradient(135deg, #0284C7, #0EA5E9);
  border-color: #0284C7;
  color: #FFFFFF;
}

html[data-theme="light"] .btn-logout {
  background: #FFFFFF;
}

html[data-theme="light"] .validate-notice {
  border-color: rgba(180, 83, 9, .4);
  background: rgba(245, 158, 11, .1);
  color: #B45309;
}