/*
 * Temas por usuario (atributo data-theme en <html>), basados en los colores del logo:
 * azul #3B72B9 / #1E4E8C · verde #2BA14B / #1F6F38 · lima #B4CB3A · gris #2D2D2D.
 * El tema "original" no tiene bloque: usa el diseño base y el color principal de la institución.
 * Los colores de estado (vencido, enviado, por vencer) se mantienen en todos los temas.
 */

/* 1 · Institucional */
html[data-theme="institucional"] {
  --primary: #2BA14B; --primary-dark: #1F7A3A; --bg: #F3F6FA;
  --sidebar: #1E4E8C; --sidebar-text: #d6e3f5; --sidebar-section: #9db8de;
  --sidebar-hover: rgba(255, 255, 255, .08); --sidebar-active-bg: #2BA14B; --sidebar-active-text: #ffffff; --sidebar-active-bar: #2BA14B;
  --topbar-text: #1E4E8C;
}

/* 2 · Clínica clara */
html[data-theme="clinica"] {
  --primary: #3B72B9; --primary-dark: #1E4E8C; --bg: #FAFCF7; --border: #e3ebe2;
  --sidebar: #ffffff; --sidebar-text: #3a4256; --sidebar-heading: #1F7A3A; --sidebar-section: #8a93a6;
  --sidebar-hover: #f2f7f3; --sidebar-hover-text: #1F7A3A; --sidebar-active-bg: #E8F5EC; --sidebar-active-text: #1F7A3A;
  --sidebar-active-bar: #2BA14B; --sidebar-border: #e3ebe2; --topbar-text: #2D2D2D;
}

/* 3 · Franja del logo */
html[data-theme="franja"] {
  --primary: #2BA14B; --primary-dark: #1F7A3A; --bg: #F4F6F9;
  --sidebar: #2D2D2D; --sidebar-text: #cfd2d8; --sidebar-section: #8e939c;
  --sidebar-active-bg: #3a3a3a; --sidebar-active-text: #ffffff; --sidebar-active-bar: #B4CB3A;
  --topbar-bg: #3B72B9; --topbar-text: #ffffff; --topbar-muted: #dbe6f5; --topbar-border: rgba(255, 255, 255, .35);
  --stripe-display: block;
}

/* 4 · Verde salud */
html[data-theme="verde"] {
  --primary: #3B72B9; --primary-dark: #1E4E8C; --bg: #F4F8F5; --border: #dbe9df;
  --sidebar: #1F6F38; --sidebar-text: #d3eedb; --sidebar-section: #9fd2ae;
  --sidebar-hover: rgba(255, 255, 255, .08); --sidebar-active-bg: #B4CB3A; --sidebar-active-text: #24300a; --sidebar-active-bar: #B4CB3A;
  --topbar-text: #1F6F38;
}

/* 5 · Lima fresca */
html[data-theme="lima"] {
  --primary: #2BA14B; --primary-dark: #1F7A3A; --bg: #FBFCF5; --border: #e6ebd2;
  --sidebar: #ffffff; --sidebar-text: #3a4256; --sidebar-heading: #2D2D2D; --sidebar-section: #8a93a6;
  --sidebar-hover: #f7fae6; --sidebar-hover-text: #4E5C08; --sidebar-active-bg: #EEF4C9; --sidebar-active-text: #4E5C08;
  --sidebar-active-bar: #B4CB3A; --sidebar-border: #e6ebd2; --topbar-text: #2D2D2D;
}

/* 6 · Azul noche */
html[data-theme="noche"] {
  --primary: #3B72B9; --primary-dark: #1E4E8C; --bg: #F2F4F8;
  --sidebar: #14284A; --sidebar-text: #b9c7de; --sidebar-section: #7f93b5;
  --sidebar-active-bg: #B4CB3A; --sidebar-active-text: #24300a; --sidebar-active-bar: #B4CB3A;
  --topbar-text: #14284A;
}

/* 7 · Encabezado verde */
html[data-theme="encabezado-verde"] {
  --primary: #3B72B9; --primary-dark: #1E4E8C; --bg: #F6F8FA;
  --sidebar: #ffffff; --sidebar-text: #3a4256; --sidebar-heading: #1E4E8C; --sidebar-section: #8a93a6;
  --sidebar-hover: #f2f6fb; --sidebar-hover-text: #1E4E8C; --sidebar-active-bg: #EEF4FB; --sidebar-active-text: #1E4E8C;
  --sidebar-active-bar: #3B72B9; --sidebar-border: #e3e7ee;
  --topbar-bg: #2BA14B; --topbar-text: #ffffff; --topbar-muted: #dff3e5; --topbar-border: rgba(255, 255, 255, .4);
}

/* 8 · Minimal gris */
html[data-theme="minimal"] {
  --primary: #1E4E8C; --primary-dark: #14365f; --bg: #FFFFFF; --shadow: none;
  --sidebar: #F1F3F5; --sidebar-text: #4a5160; --sidebar-heading: #2D2D2D; --sidebar-section: #8a93a6;
  --sidebar-hover: #e7eaee; --sidebar-hover-text: #2D2D2D; --sidebar-active-bg: #ffffff; --sidebar-active-text: #1E4E8C;
  --sidebar-active-bar: #3B72B9; --sidebar-border: #e3e7ee; --topbar-text: #2D2D2D;
}
html[data-theme="minimal"] .btn-primary { background: #2D2D2D; }
html[data-theme="minimal"] .btn-primary:hover { background: #111111; }

/* 9 · Alto contraste */
html[data-theme="contraste"] {
  --primary: #1E4E8C; --primary-dark: #143a6a; --bg: #FFFFFF; --text: #111111; --muted: #3f3f3f;
  --border: #8a8a8a; --input-border: #4a4a4a; --row-border: #c7c7c7; --faint: #6b6b6b;
  --sidebar: #151515; --sidebar-text: #f0f0f0; --sidebar-section: #c9c9c9;
  --sidebar-hover: #2b2b2b; --sidebar-active-bg: #3B72B9; --sidebar-active-text: #ffffff; --sidebar-active-bar: #B4CB3A;
  --topbar-text: #111111;
}
html[data-theme="contraste"] a { text-decoration: underline; }
html[data-theme="contraste"] .sidebar nav a, html[data-theme="contraste"] .btn, html[data-theme="contraste"] .tab { text-decoration: none; }
html[data-theme="contraste"] :focus-visible { outline: 3px solid #B4CB3A !important; outline-offset: 2px; }

/* 10 · Modo oscuro */
html[data-theme="oscuro"] {
  color-scheme: dark;
  --primary: #4FBF6E; --primary-dark: #3a9a55; --bg: #161E2E; --surface: #1E2738; --border: #2f3a50;
  --text: #E6EAF2; --muted: #9aa6bc; --shadow: none;
  --sidebar: #0F1522; --sidebar-text: #9aa6bc; --sidebar-heading: #E6EAF2; --sidebar-section: #6c7a93;
  --sidebar-hover: #1a2334; --sidebar-hover-text: #E6EAF2; --sidebar-active-bg: #1F3A2A; --sidebar-active-text: #7FD49A;
  --sidebar-active-bar: #2BA14B; --sidebar-border: #1a2232;
  --btn-bg: #2a3448; --hover-bg: #2a3448; --tab-bg: #232d40; --row-hover: #232d40; --row-border: #2a3448; --track: #2a3448;
  --input-bg: #161E2E; --input-border: #3a4660; --surface-alt: #1a2232; --faint: #56627a;
  --ok: #6fd391; --ok-bg: #163323; --late: #e8b45a; --late-bg: #3a2e14; --overdue: #f08a84; --overdue-bg: #3d1b1b;
  --warn: #f0a35c; --warn-bg: #3a2a14; --pending: #b4bfd3; --pending-bg: #29344a;
}
html[data-theme="oscuro"] .alert-success { background: #163323; border-color: #2b5a3d; color: #b8ecc9; }
html[data-theme="oscuro"] .alert-error { background: #3d1b1b; border-color: #6e2e2b; color: #f6c3bf; }
html[data-theme="oscuro"] .alert-warning { background: #3a2a14; border-color: #6b4c22; color: #f5d3a6; }
html[data-theme="oscuro"] .alert-info { background: #1c2b45; border-color: #2f4a77; color: #c3d6f7; }
html[data-theme="oscuro"] .notif { background: #2a2416; }
html[data-theme="oscuro"] .notif-overdue, html[data-theme="oscuro"] .notif-today { background: #2e1c1c; }
html[data-theme="oscuro"] .notif-ok { background: #17291f; }
html[data-theme="oscuro"] .notif.read { background: #1a2232; }
html[data-theme="oscuro"] .btn-primary, html[data-theme="oscuro"] .cal-cell.today .cal-day { color: #0f1a12; }
html[data-theme="oscuro"] .logo-preview img, html[data-theme="oscuro"] .brand-logo { background: #ffffff; }