/**
 * ERP PANAMÁ — SISTEMA DE TEMAS v2
 * Mapea TANTO las variables --t- (nuevas) COMO --bg, --s1, etc. (originales)
 * Así funciona en TODOS los módulos sin modificar sus CSS
 *
 * Aplicar via: document.body.setAttribute('data-theme', 'dark')
 * Temas: dark | light | marine | warm | forest | minimal
 */

/* ─────────────────────────────────────────────────────
   TRANSICIÓN SUAVE al cambiar tema
───────────────────────────────────────────────────── */
body {
  transition: background-color .3s ease, color .3s ease;
}

/* ─────────────────────────────────────────────────────
   1. OSCURO (default — igual al diseño original)
───────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Variables nuevas --t- */
  --t-bg:      #0b0e14;
  --t-s1:      #111520;
  --t-s2:      #171c2c;
  --t-s3:      #1d2338;
  --t-border:  #232940;
  --t-border2: #2d3555;
  --t-text:    #e2e8f0;
  --t-text2:   #8892b0;
  --t-text3:   #3d4a6a;
  --t-accent:  #f0c040;
  --t-accent2: #e8a800;
  --t-red:     #f43f5e;
  --t-green:   #22c55e;
  /* Variables originales mapeadas */
  --bg:        #0b0e14;
  --s1:        #111520;
  --s2:        #171c2c;
  --s3:        #1d2338;
  --border:    #232940;
  --border2:   #2d3555;
  --text:      #e2e8f0;
  --text2:     #8892b0;
  --text3:     #3d4a6a;
  --gold:      #f0c040;
  --gold2:     #e8a800;
  --white:     #111520;
  --teal:      #0d9488;
  --teal2:     #0f766e;
  --tl-bg:     rgba(13,148,136,.12);
  --tl-bd:     rgba(13,148,136,.25);
  --navy:      #1a3a8f;
  --navy-bg:   rgba(26,58,143,.12);
  --navy-bd:   rgba(26,58,143,.25);
  --blue:      #60a5fa;
  --bl-bg:     rgba(96,165,250,.12);
  --bl-bd:     rgba(96,165,250,.25);
  --ink:       #e2e8f0;
  --ink2:      #8892b0;
  --ink3:      #3d4a6a;
  --lime:      #c8ff57;
}

/* ─────────────────────────────────────────────────────
   2. CLARO
───────────────────────────────────────────────────── */
[data-theme="light"] {
  --t-bg:      #f0f4f8;
  --t-s1:      #ffffff;
  --t-s2:      #f7f9fc;
  --t-s3:      #eef2f7;
  --t-border:  #dde3ed;
  --t-border2: #c8d2e0;
  --t-text:    #0f172a;
  --t-text2:   #64748b;
  --t-text3:   #94a3b8;
  --t-accent:  #0d9488;
  --t-accent2: #0f766e;
  --t-red:     #dc2626;
  --t-green:   #15803d;
  --bg:        #f0f4f8;
  --s1:        #ffffff;
  --s2:        #f7f9fc;
  --s3:        #eef2f7;
  --border:    #dde3ed;
  --border2:   #c8d2e0;
  --text:      #0f172a;
  --text2:     #64748b;
  --text3:     #94a3b8;
  --gold:      #0d9488;
  --gold2:     #0f766e;
  --white:     #ffffff;
  --teal:      #0d9488;
  --teal2:     #0f766e;
  --tl-bg:     #f0fdfa;
  --tl-bd:     #99f6e4;
  --navy:      #2563eb;
  --navy-bg:   #eff6ff;
  --navy-bd:   #bfdbfe;
  --blue:      #2563eb;
  --bl-bg:     #eff6ff;
  --bl-bd:     #bfdbfe;
  --ink:       #0f172a;
  --ink2:      #64748b;
  --ink3:      #94a3b8;
  --lime:      #0d9488;
}

/* Topbar claro — invertir colores del texto */
[data-theme="light"] .topbar,
[data-theme="light"] header.topbar {
  background: #0d9488 !important;
}

/* Cards y fondos en tema claro */
[data-theme="light"] .kpi-card,
[data-theme="light"] .modulo-card,
[data-theme="light"] .activity-feed,
[data-theme="light"] .alertas-panel,
[data-theme="light"] .sistema-item,
[data-theme="light"] .accion-btn {
  background: #ffffff !important;
  border-color: #dde3ed !important;
}

[data-theme="light"] body {
  background: #f0f4f8 !important;
  color: #0f172a !important;
}

/* ─────────────────────────────────────────────────────
   3. AZUL MARINO
───────────────────────────────────────────────────── */
[data-theme="marine"] {
  --t-bg:      #020b18;
  --t-s1:      #041225;
  --t-s2:      #071830;
  --t-s3:      #0a2040;
  --t-border:  #0f2d55;
  --t-border2: #1a4070;
  --t-text:    #c8d8f0;
  --t-text2:   #6080a8;
  --t-text3:   #2a4060;
  --t-accent:  #40a0ff;
  --t-accent2: #2080e0;
  --t-red:     #ff4d6d;
  --t-green:   #00e5a0;
  --bg:        #020b18;
  --s1:        #041225;
  --s2:        #071830;
  --s3:        #0a2040;
  --border:    #0f2d55;
  --border2:   #1a4070;
  --text:      #c8d8f0;
  --text2:     #6080a8;
  --text3:     #2a4060;
  --gold:      #40a0ff;
  --gold2:     #2080e0;
  --white:     #041225;
  --teal:      #40a0ff;
  --teal2:     #2080e0;
  --tl-bg:     rgba(64,160,255,.1);
  --tl-bd:     rgba(64,160,255,.25);
  --navy:      #40a0ff;
  --navy-bg:   rgba(64,160,255,.1);
  --navy-bd:   rgba(64,160,255,.25);
  --blue:      #40a0ff;
  --bl-bg:     rgba(64,160,255,.1);
  --bl-bd:     rgba(64,160,255,.25);
  --ink:       #c8d8f0;
  --ink2:      #6080a8;
  --ink3:      #2a4060;
  --lime:      #40a0ff;
}

/* ─────────────────────────────────────────────────────
   4. CAFÉ / TIERRA
───────────────────────────────────────────────────── */
[data-theme="warm"] {
  --t-bg:      #110c08;
  --t-s1:      #1c140e;
  --t-s2:      #241a12;
  --t-s3:      #2e2018;
  --t-border:  #3a2a1e;
  --t-border2: #4e3828;
  --t-text:    #f0e0c8;
  --t-text2:   #a08060;
  --t-text3:   #5a4030;
  --t-accent:  #e08040;
  --t-accent2: #c06020;
  --t-red:     #f04040;
  --t-green:   #80c040;
  --bg:        #110c08;
  --s1:        #1c140e;
  --s2:        #241a12;
  --s3:        #2e2018;
  --border:    #3a2a1e;
  --border2:   #4e3828;
  --text:      #f0e0c8;
  --text2:     #a08060;
  --text3:     #5a4030;
  --gold:      #e08040;
  --gold2:     #c06020;
  --white:     #1c140e;
  --teal:      #e08040;
  --teal2:     #c06020;
  --tl-bg:     rgba(224,128,64,.1);
  --tl-bd:     rgba(224,128,64,.25);
  --navy:      #e08040;
  --navy-bg:   rgba(224,128,64,.1);
  --navy-bd:   rgba(224,128,64,.25);
  --blue:      #e08040;
  --bl-bg:     rgba(224,128,64,.1);
  --bl-bd:     rgba(224,128,64,.25);
  --ink:       #f0e0c8;
  --ink2:      #a08060;
  --ink3:      #5a4030;
  --lime:      #e08040;
}

/* ─────────────────────────────────────────────────────
   5. VERDE SELVA
───────────────────────────────────────────────────── */
[data-theme="forest"] {
  --t-bg:      #050f08;
  --t-s1:      #091410;
  --t-s2:      #0e1c16;
  --t-s3:      #14261e;
  --t-border:  #1a3028;
  --t-border2: #244038;
  --t-text:    #c8f0d8;
  --t-text2:   #60a878;
  --t-text3:   #2a5838;
  --t-accent:  #40e080;
  --t-accent2: #20c060;
  --t-red:     #f04060;
  --t-green:   #40e080;
  --bg:        #050f08;
  --s1:        #091410;
  --s2:        #0e1c16;
  --s3:        #14261e;
  --border:    #1a3028;
  --border2:   #244038;
  --text:      #c8f0d8;
  --text2:     #60a878;
  --text3:     #2a5838;
  --gold:      #40e080;
  --gold2:     #20c060;
  --white:     #091410;
  --teal:      #40e080;
  --teal2:     #20c060;
  --tl-bg:     rgba(64,224,128,.1);
  --tl-bd:     rgba(64,224,128,.25);
  --navy:      #40e080;
  --navy-bg:   rgba(64,224,128,.1);
  --navy-bd:   rgba(64,224,128,.25);
  --blue:      #40e080;
  --bl-bg:     rgba(64,224,128,.1);
  --bl-bd:     rgba(64,224,128,.25);
  --ink:       #c8f0d8;
  --ink2:      #60a878;
  --ink3:      #2a5838;
  --lime:      #40e080;
}

/* ─────────────────────────────────────────────────────
   6. MINIMALISTA BLANCO PURO
───────────────────────────────────────────────────── */
[data-theme="minimal"] {
  --t-bg:      #ffffff;
  --t-s1:      #ffffff;
  --t-s2:      #fafafa;
  --t-s3:      #f5f5f5;
  --t-border:  #e8e8e8;
  --t-border2: #d0d0d0;
  --t-text:    #111111;
  --t-text2:   #555555;
  --t-text3:   #999999;
  --t-accent:  #111111;
  --t-accent2: #333333;
  --t-red:     #cc0000;
  --t-green:   #007700;
  --bg:        #ffffff;
  --s1:        #ffffff;
  --s2:        #fafafa;
  --s3:        #f5f5f5;
  --border:    #e8e8e8;
  --border2:   #d0d0d0;
  --text:      #111111;
  --text2:     #555555;
  --text3:     #999999;
  --gold:      #111111;
  --gold2:     #333333;
  --white:     #ffffff;
  --teal:      #111111;
  --teal2:     #333333;
  --tl-bg:     #f5f5f5;
  --tl-bd:     #d0d0d0;
  --navy:      #111111;
  --navy-bg:   #f5f5f5;
  --navy-bd:   #d0d0d0;
  --blue:      #111111;
  --bl-bg:     #f5f5f5;
  --bl-bd:     #d0d0d0;
  --ink:       #111111;
  --ink2:      #555555;
  --ink3:      #999999;
  --lime:      #111111;
}

[data-theme="minimal"] body {
  background: #ffffff !important;
  color: #111111 !important;
}

[data-theme="minimal"] .topbar,
[data-theme="minimal"] header.topbar {
  background: #111111 !important;
}

/* ─────────────────────────────────────────────────────
   APLICAR VARIABLES A body EN TODOS LOS TEMAS
   Esto asegura que background y color cambien siempre
───────────────────────────────────────────────────── */
[data-theme="dark"]    body, [data-theme="dark"]    { background: #0b0e14; color: #e2e8f0; }
[data-theme="light"]   body, [data-theme="light"]   { background: #f0f4f8; color: #0f172a; }
[data-theme="marine"]  body, [data-theme="marine"]  { background: #020b18; color: #c8d8f0; }
[data-theme="warm"]    body, [data-theme="warm"]    { background: #110c08; color: #f0e0c8; }
[data-theme="forest"]  body, [data-theme="forest"]  { background: #050f08; color: #c8f0d8; }
[data-theme="minimal"] body, [data-theme="minimal"] { background: #ffffff; color: #111111; }