/* TRAE:START theme-light-variables-only */
html.light,
:root[data-theme="light"],
:root[data-theme="clear"] {
  /* Paleta base (variables-only) */
  --bg: #ffffff;
  --surface: #f8f9fa;
  --border: #dee2e6;
  --text: #212529;
  --text-inverse: #ffffff;
  --muted: #6c757d;
  /* Acento original (azul) en claro */
  --primary: #0d6efd;
  --primary-hover: #0b5ed7;
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --shadow: rgba(0,0,0,0.1);
  --accent: #0d6efd;
  --line: #dee2e6;
  
  /* Tokens de formularios (variables) */
  --fd-bg: #ffffff;
  --fd-bg-focus: #f8f9fa;
  --fd-surface: var(--surface);
  --fd-border: #ced4da;
  --fd-text: #212529;
  --fd-muted: #6c757d;
  --fd-focus: #0d6efd;
  /* Iluminación en modo claro: eliminar azul y usar negro sutil */
  --fd-focus-border: #212529;
  --fd-focus-shadow: rgba(0, 0, 0, 0.18);

  /* Login tokens (variables-only, invariantes en ambos temas) */
  --login-bg: #2d2d2d;
  --login-text: #ffffff;
  --login-border: #404040;
  --login-shadow: 0 8px 22px rgba(0,0,0,0.35);
  --login-accent: #3b82f6;
  
  /* Tokens de formularios del login (invariantes) */
  --login-fd-bg: #1a1c1e;
  --login-fd-bg-focus: #202225;
  --login-fd-surface: #2d2d2d;
  --login-fd-border: #2f3336;
  --login-fd-text: #ffffff;
  --login-fd-muted: #b0b6bd;
  --login-fd-focus: #3b82f6;
  --login-fd-focus-border: #ffffff;
  --login-fd-focus-shadow: rgba(255,255,255,0.18);

  /* Navbar/Menu overlays */
  --overlay-hover: rgba(0,0,0,0.06);
}
/* TRAE:END theme-light-variables-only */

/* Tema Claro - Variables CSS */
html[data-theme="light"] {
  /* Colores de fondo */
  --bg-color: #f7f8fa;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-navbar: #ffffff;
  
  /* Colores de texto */
  --text-color: #1a1a1a;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #868e96;
  --text-light: #adb5bd;
  
  /* Colores de acento y enlaces */
  --accent-color: #1d72b8;
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --primary-light: #6ea8fe;
  
  /* Colores de estado */
  --success: #198754;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #0dcaf0;
  
  /* Bordes y separadores */
  --border-color: #e0e0e0;
  --border-light: #f1f3f4;
  --border-dark: #dee2e6;
  
  /* Sombras */
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-sm: rgba(0, 0, 0, 0.05);
  --shadow-lg: rgba(0, 0, 0, 0.15);
  
  /* Otros */
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
  
  /* Formularios */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  /* Inputs foco (modo claro): sin azul, halo negro sutil */
  --input-focus-border: #212529;
  --input-focus-shadow: rgba(0, 0, 0, 0.18);
  
  /* Botones */
  --btn-bg: #ffffff;
  --btn-border: #ced4da;
  --btn-hover-bg: #f8f9fa;
  
  /* Tablas */
  --table-bg: #ffffff;
  --table-stripe-bg: #f8f9fa;
  --table-hover-bg: #f5f5f5;
  --table-border: #dee2e6;

  /* Aliases para unificar nombres de variables usados por el proyecto */
  --bg: var(--bg-color);
  --panel: var(--bg-primary);
  --card: var(--bg-card);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --primary-hover: var(--primary-dark);
}