/* ============================================================
 * horusSystem — Tema INSTITUCIONAL (claro)
 * Linea Grafica Bicentenario Policia Boliviana (RR.II., ene-2026).
 * Se activa con  <html data-theme="institucional">.  El tema OSCURO
 * (por defecto, :root de limitless-theme.css) queda intacto.
 *
 * Estrategia: NO se reescriben vistas; solo se redefinen las mismas
 * variables del tema oscuro con la paleta olivo/blanco. Montserrat
 * se aplica SOLO en este tema. Contrastes segun tabla WCAG del manual.
 * Cargar DESPUES de limitless-theme.css y theme-refresh.css.
 * ============================================================ */

html[data-theme="institucional"] {

  /* ── Paleta oficial (referencia) ─────────────────────────── */
  --olivo-900:#383d18; --olivo-800:#4a5123; --olivo-700:#5e672c;
  --olivo-600:#6c7533; --olivo-400:#838858; --dorado:#c9a538;
  --patria-rojo:#b31d19; --patria-amarillo:#e4b510; --patria-verde:#144220;

  /* ── Primario / acentos (era ambar -> olivo) ─────────────── */
  --color-primario:        #4a5123;               /* boton primario olivo, texto blanco */
  --color-primario-hover:  #5e672c;
  --color-primario-dark:   #383d18;
  --color-primario-light:  rgba(74,81,35,0.12);
  --color-secundario:      #144220;               /* verde patria (exito) */
  --color-secundario-dark: #0d2d16;
  --color-secundario-light:rgba(20,66,32,0.12);
  --color-peligro:         #b31d19;               /* rojo patria */
  --color-peligro-dark:    #8f1714;
  --color-advertencia:     #e4b510;               /* amarillo patria (badge/fondo) */
  --color-info:            #2b5f9e;               /* azul institucional */
  --color-info-light:      rgba(43,95,158,0.12);
  --color-exito:           #144220;

  /* ── Texto (sobre fondo claro) ───────────────────────────── */
  --color-texto-principal: #4a5123;               /* titulos/acento olivo */
  --color-texto-secundario:#5e672c;
  --color-texto-muted:     #5a5f3f;
  --color-texto-blanco:    #ffffff;               /* se usa sobre olivo/oscuro */
  --color-texto-cuerpo:    #383d18;               /* cuerpo, contraste 11.4 */

  /* ── Fondos ──────────────────────────────────────────────── */
  --fondo-base:            #ffffff;               /* contenido blanco */
  --fondo-card:            #ffffff;
  --fondo-card-alt:        #f4f6ee;               /* tinte olivo muy claro */
  --fondo-sidebar:         #4a5123;               /* sidebar olivo (texto claro) */
  --fondo-header:          #ffffff;               /* navbar blanco, texto olivo */
  --fondo-modal:           #ffffff;
  --fondo-input:           #ffffff;
  --fondo-tabla-header:    #eef0e4;               /* header de tabla, tinte olivo */
  --fondo-tabla-hover:     rgba(74,81,35,0.07);
  --fondo-tabla-stripe:    #f7f8f2;

  /* ── Bordes ──────────────────────────────────────────────── */
  --borde-color:           #d9dcc9;
  --borde-accent:          #c3c8a8;
  --borde-input:           #c3c8a8;

  /* ── Colores de grupo (menu / badges) ────────────────────── */
  --color-grupo-dashboards:#6c7533;
  --color-grupo-usuario:   #144220;
  --color-grupo-admin:     #b31d19;
  --color-grupo-admin-hover:#8f1714;

  /* ── Tipografia: Montserrat SOLO en institucional ────────── */
  --font-family-base: 'Montserrat', 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* ── Sombras (mas suaves para fondo claro) ───────────────── */
  --sombra-sm:      0 1px 3px rgba(56,61,24,0.10);
  --sombra-md:      0 4px 12px rgba(56,61,24,0.12);
  --sombra-lg:      0 8px 24px rgba(56,61,24,0.16);
  --sombra-dorada:  0 0 18px rgba(201,165,56,0.25);

  /* ── theme-refresh (override para claro) ─────────────────── */
  --tr-text:    #383d18;
  --tr-heading: #383d18;
  --tr-line:    #d9dcc9;
  --tr-shadow:       0 1px 2px rgba(56,61,24,.10), 0 6px 20px rgba(56,61,24,.10);
  --tr-shadow-hover: 0 2px 6px rgba(56,61,24,.14), 0 16px 36px rgba(56,61,24,.16);
}

/* ── Aplicar Montserrat al cuerpo bajo institucional ───────── */
html[data-theme="institucional"] body,
html[data-theme="institucional"] .content-wrapper,
html[data-theme="institucional"] .main-header,
html[data-theme="institucional"] .card,
html[data-theme="institucional"] .modal-content {
  font-family: 'Montserrat', 'Source Sans 3', system-ui, sans-serif;
}

/* ── Retoques finos que el manual pide sobre fondo claro ───── */
/* Navbar superior blanco: texto e iconos en olivo, borde inferior sutil. */
html[data-theme="institucional"] .main-header.navbar {
  border-bottom: 1px solid var(--borde-color) !important;
}
html[data-theme="institucional"] .main-header .nav-link,
html[data-theme="institucional"] .main-header .brand-text {
  color: var(--olivo-800) !important;
}
/* Sidebar olivo: encabezados de seccion en dorado (sobre banda oscura, contraste OK). */
html[data-theme="institucional"] .main-sidebar .nav-header {
  color: var(--dorado) !important;
}
/* Texto por defecto de los links del sidebar en claro (sobre olivo). */
html[data-theme="institucional"] .main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: #eef0e4;
}
/* Franja/acento dorado del brand (degradado olivo con borde dorado del manual). */
html[data-theme="institucional"] .brand-link {
  border-bottom: 2px solid var(--dorado) !important;
}

/* ══════════════════════════════════════════════════════════════
 * OVERRIDES sobre la capa de PULIDO (theme-refresh.css hardcodea
 * fondos OSCUROS que los tokens no alcanzan). Aca los volteamos a
 * claro con mayor especificidad (html[data-theme] gana sobre .clase).
 * ══════════════════════════════════════════════════════════════ */

/* Contenido: fondo blanco limpio (sin el ambiente azul del oscuro). */
html[data-theme="institucional"] .content-wrapper {
  background: var(--fondo-base) !important;
}
/* Navbar superior: blanco plano (sin gradiente azul). */
html[data-theme="institucional"] .main-header,
html[data-theme="institucional"] .main-header.navbar {
  background: var(--fondo-header) !important;
}
/* Tarjetas: superficie blanca con sombra suave (sin el gradiente oscuro glass). */
html[data-theme="institucional"] .card,
html[data-theme="institucional"] .lls-card {
  background: var(--fondo-card) !important;
  box-shadow: var(--sombra-md) !important;
}
html[data-theme="institucional"] .card-header,
html[data-theme="institucional"] .lls-card-header {
  background: var(--fondo-card-alt) !important;
  border-bottom: 1px solid var(--borde-color) !important;
}
html[data-theme="institucional"] .card-title { color: var(--olivo-800) !important; }

/* Tablas: rayas y hover en tinte olivo; el hover NO debe dejar texto blanco. */
html[data-theme="institucional"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: var(--fondo-tabla-stripe) !important;
}
html[data-theme="institucional"] .table-hover tbody tr:hover td {
  background: var(--fondo-tabla-hover) !important;
  color: var(--color-texto-cuerpo) !important;
}
html[data-theme="institucional"] .table thead th,
html[data-theme="institucional"] .table th {
  background: var(--fondo-tabla-header) !important;
  color: var(--olivo-800) !important;
}
html[data-theme="institucional"] .table,
html[data-theme="institucional"] .table td { color: var(--color-texto-cuerpo) !important; }

/* Modales blancos. */
html[data-theme="institucional"] .modal-content { background: var(--fondo-card) !important; }

/* Botones secundarios/hover: en claro no deben irse a oscuro. */
html[data-theme="institucional"] .btn-secondary:hover,
html[data-theme="institucional"] .btn-default:hover {
  background: var(--olivo-700) !important; border-color: var(--olivo-700) !important; color: #fff !important;
}

/* Boton primario: olivo solido (el manual pide olivo-800), no el dorado del oscuro. */
html[data-theme="institucional"] .btn-primary {
  background: var(--olivo-800) !important; border-color: var(--olivo-700) !important;
  color: #fff !important; box-shadow: var(--sombra-sm) !important; text-shadow: none !important;
}
html[data-theme="institucional"] .btn-primary:hover {
  background: var(--olivo-700) !important; border-color: var(--olivo-700) !important; color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
 * FIXES de legibilidad (30-sep): elementos que quedaban con texto
 * oscuro sobre fondo oscuro al pasar a institucional.
 * ══════════════════════════════════════════════════════════════ */

/* Marca del sidebar: `.brand-text` usa --color-primario, que en institucional
   es olivo-800 (oscuro) y se PIERDE sobre el sidebar olivo. Va en dorado. */
html[data-theme="institucional"] .brand-text { color: var(--dorado) !important; }

/* Callout de bienvenida (panel principal): forzar superficie clara y texto
   legible (el tema base lo deja oscuro). */
html[data-theme="institucional"] .callout {
  background: var(--fondo-card-alt) !important;
  color: var(--color-texto-cuerpo) !important;
  box-shadow: var(--sombra-sm) !important;
}
html[data-theme="institucional"] .callout h5 { color: var(--olivo-800) !important; }
html[data-theme="institucional"] .callout .text-muted,
html[data-theme="institucional"] .callout p { color: var(--color-texto-muted) !important; }

/* Modal "Creditos del Sistema": el cuerpo es claro en institucional; los nombres
   del equipo son blancos (--color-texto-blanco) y los titulos dorados quedan de
   bajo contraste. El header (azul) NO se toca. */
html[data-theme="institucional"] .lls-modal-policia .lls-nombre-persona { color: var(--olivo-900) !important; }
html[data-theme="institucional"] .lls-modal-policia .lls-policia-titulo,
html[data-theme="institucional"] .lls-modal-policia .lls-policia-equipo-titulo { color: var(--olivo-800) !important; }

/* ══════════════════════════════════════════════════════════════════════
 * REFINAMIENTO DE DISEÑO v2 (30-sep) — institucional mas calido y sereno.
 * Paleta semantica armonizada (petroleo/verde/ocre/ladrillo), profundidad
 * suave, sidebar con degrade + acento dorado, jerarquia tipografica
 * Montserrat (titulos) + Source Sans 3 (cuerpo).
 * ══════════════════════════════════════════════════════════════════════ */
html[data-theme="institucional"] {
  /* Grounds mas calidos (menos glare que el blanco puro) */
  --fondo-app:     #f3f4ec;
  --fondo-base:    #f3f4ec;
  --fondo-card:    #ffffff;
  --fondo-card-alt:#f6f7f0;
  /* Tinta */
  --color-texto-cuerpo: #2d3018;
  --color-texto-muted:  #6b6f56;
  --borde-color:  #e4e7d6;
  --borde-accent: #cdd2b4;
  /* Semantica armonizada (sobria, no los brillantes de AdminLTE) */
  --sem-info:    #2c7da0; --sem-info-2:    #235f7c;
  --sem-exito:   #2f7d4f; --sem-exito-2:   #245f3c;
  --sem-alerta:  #c98a1e; --sem-alerta-2:  #a6711477;
  --sem-peligro: #b3382f; --sem-peligro-2: #8f2b24;
  /* Sombras olivo suaves y en capas */
  --sombra-sm: 0 1px 2px rgba(56,61,24,.06);
  --sombra-md: 0 1px 2px rgba(56,61,24,.06), 0 10px 26px rgba(56,61,24,.08);
  --sombra-lg: 0 2px 6px rgba(56,61,24,.10), 0 20px 44px rgba(56,61,24,.12);
}

/* ── Tipografia: cuerpo humanista + titulos Montserrat (jerarquia) ─────── */
html[data-theme="institucional"] body,
html[data-theme="institucional"] .content-wrapper,
html[data-theme="institucional"] .table,
html[data-theme="institucional"] p,
html[data-theme="institucional"] .form-control {
  font-family: 'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
html[data-theme="institucional"] h1, html[data-theme="institucional"] h2,
html[data-theme="institucional"] h3, html[data-theme="institucional"] h4,
html[data-theme="institucional"] h5, html[data-theme="institucional"] h6,
html[data-theme="institucional"] .card-title,
html[data-theme="institucional"] .brand-text,
html[data-theme="institucional"] .nav-sidebar .nav-link p,
html[data-theme="institucional"] .nav-header,
html[data-theme="institucional"] .btn,
html[data-theme="institucional"] .small-box h3,
html[data-theme="institucional"] .breadcrumb {
  font-family: 'Montserrat','Segoe UI',system-ui,sans-serif;
  letter-spacing:.1px;
}
html[data-theme="institucional"] .content-header h1 { font-weight:800; color:var(--olivo-900); letter-spacing:-.2px; }

/* ── Fondo de contenido calido ─────────────────────────────────────────── */
html[data-theme="institucional"] .content-wrapper { background: var(--fondo-app) !important; }

/* ── Navbar: blanca, sombra suave y filo dorado inferior ───────────────── */
html[data-theme="institucional"] .main-header.navbar {
  background: #ffffff !important;
  border-bottom: 2px solid var(--dorado) !important;
  box-shadow: 0 4px 16px rgba(56,61,24,.06) !important;
}

/* ── Sidebar: degrade olivo + acentos ──────────────────────────────────── */
html[data-theme="institucional"] .main-sidebar {
  background: linear-gradient(180deg,#525a28 0%,#434a20 55%,#383d18 100%) !important;
}
html[data-theme="institucional"] .brand-link {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 -3px 0 var(--dorado);
}
html[data-theme="institucional"] .nav-sidebar > .nav-item > .nav-link { border-radius: 8px; margin: 2px 8px; }
html[data-theme="institucional"] .nav-sidebar > .nav-item > .nav-link:hover { background: rgba(255,255,255,.07); }
html[data-theme="institucional"] .nav-sidebar > .nav-item > .nav-link.active {
  background: #eef0e4 !important; color: var(--olivo-900) !important;
  box-shadow: inset 3px 0 0 var(--dorado);
}
html[data-theme="institucional"] .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--olivo-800) !important; }
html[data-theme="institucional"] .main-sidebar .nav-header {
  color: var(--dorado) !important; font-size:.7rem; letter-spacing:.12em; opacity:.9;
}

/* ── Cards: superficie limpia, radio amable, sombra en capas ───────────── */
html[data-theme="institucional"] .card, html[data-theme="institucional"] .lls-card {
  background: var(--fondo-card) !important;
  border: 1px solid var(--borde-color) !important;
  border-radius: 14px !important;
  box-shadow: var(--sombra-md) !important;
}
html[data-theme="institucional"] .card-header, html[data-theme="institucional"] .lls-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--borde-color) !important;
  border-radius: 14px 14px 0 0 !important;
}
html[data-theme="institucional"] .card-title { color: var(--olivo-800) !important; font-weight:700; }

/* ── KPI small-box: paleta armonizada + degrade + profundidad ──────────── */
html[data-theme="institucional"] .small-box {
  border-radius: 14px; box-shadow: var(--sombra-md); overflow:hidden;
}
html[data-theme="institucional"] .small-box .icon { opacity:.22; }
html[data-theme="institucional"] .small-box h3 { font-weight:800; text-shadow:none; }
html[data-theme="institucional"] .small-box .small-box-footer { background: rgba(0,0,0,.10); }
html[data-theme="institucional"] .small-box.bg-info    { background: linear-gradient(135deg,var(--sem-info),var(--sem-info-2)) !important; color:#fff !important; }
html[data-theme="institucional"] .small-box.bg-success { background: linear-gradient(135deg,var(--sem-exito),var(--sem-exito-2)) !important; color:#fff !important; }
html[data-theme="institucional"] .small-box.bg-warning { background: linear-gradient(135deg,var(--sem-alerta),#a67114) !important; color:#3d2f0a !important; }
html[data-theme="institucional"] .small-box.bg-warning .small-box-footer { color:#3d2f0a; }
html[data-theme="institucional"] .small-box.bg-danger  { background: linear-gradient(135deg,var(--sem-peligro),var(--sem-peligro-2)) !important; color:#fff !important; }

/* ── Badges armonizados ────────────────────────────────────────────────── */
html[data-theme="institucional"] .badge { font-weight:600; letter-spacing:.2px; padding:.4em .65em; border-radius:7px; }
html[data-theme="institucional"] .badge-info    { background: var(--sem-info) !important;    color:#fff !important; }
html[data-theme="institucional"] .badge-success { background: var(--sem-exito) !important;   color:#fff !important; }
html[data-theme="institucional"] .badge-warning { background: var(--sem-alerta) !important;  color:#3d2f0a !important; }
html[data-theme="institucional"] .badge-danger  { background: var(--sem-peligro) !important; color:#fff !important; }

/* ── Botones: primario olivo con degrade + leve elevacion ──────────────── */
html[data-theme="institucional"] .btn { border-radius: 9px; font-weight:600; }
html[data-theme="institucional"] .btn-primary {
  background: linear-gradient(180deg,#5e672c,#4a5123) !important;
  border-color: #454c22 !important; color:#fff !important;
  box-shadow: 0 2px 6px rgba(56,61,24,.18) !important; text-shadow:none !important;
}
html[data-theme="institucional"] .btn-primary:hover { background: linear-gradient(180deg,#6c7533,#54602b) !important; transform: translateY(-1px); }
html[data-theme="institucional"] .btn-success { background: var(--sem-exito) !important; border-color: var(--sem-exito-2) !important; color:#fff !important; }
html[data-theme="institucional"] .btn-danger  { background: var(--sem-peligro) !important; border-color: var(--sem-peligro-2) !important; color:#fff !important; }
html[data-theme="institucional"] .btn-warning { background: var(--sem-alerta) !important; border-color:#a67114 !important; color:#3d2f0a !important; }
html[data-theme="institucional"] .btn-outline-primary { color: var(--olivo-800) !important; border-color: var(--borde-accent) !important; }
html[data-theme="institucional"] .btn-outline-primary:hover { background: var(--olivo-800) !important; color:#fff !important; border-color: var(--olivo-800) !important; }

/* ── Tabla: encabezado sobrio, filas con hover calido ──────────────────── */
html[data-theme="institucional"] .table thead th {
  background: var(--fondo-card-alt) !important; color: var(--olivo-800) !important;
  text-transform: uppercase; font-size:.72rem; letter-spacing:.06em; border-bottom:2px solid var(--borde-color) !important;
}
html[data-theme="institucional"] .table td, html[data-theme="institucional"] .table th { border-color: var(--borde-color) !important; }
html[data-theme="institucional"] .table-hover tbody tr:hover td { background: rgba(74,81,35,.06) !important; }
html[data-theme="institucional"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: #fafbf6 !important; }

/* ── Callout: acento lateral + superficie clara ────────────────────────── */
html[data-theme="institucional"] .callout {
  border-radius: 12px !important; border-left: 5px solid var(--olivo-700) !important;
  background: linear-gradient(180deg,#ffffff,#f6f7f0) !important; box-shadow: var(--sombra-sm) !important;
}
html[data-theme="institucional"] .callout-info { border-left-color: var(--sem-info) !important; }

/* ── Inputs: radio + foco olivo ────────────────────────────────────────── */
html[data-theme="institucional"] .form-control {
  border-radius: 9px; border-color: var(--borde-accent); background:#fff; color: var(--color-texto-cuerpo);
}
html[data-theme="institucional"] .form-control:focus {
  border-color: var(--olivo-700); box-shadow: 0 0 0 .2rem rgba(74,81,35,.15);
}

/* ── Breadcrumb / progress / links ─────────────────────────────────────── */
html[data-theme="institucional"] .breadcrumb { background: transparent; }
html[data-theme="institucional"] .breadcrumb-item.active { color: var(--color-texto-muted); }
html[data-theme="institucional"] a { color: var(--olivo-700); }
html[data-theme="institucional"] a:hover { color: var(--olivo-900); }
html[data-theme="institucional"] .progress { background:#e7e9da; border-radius:99px; height:.85rem; }
html[data-theme="institucional"] .progress-bar.bg-success { background: var(--sem-exito) !important; }
html[data-theme="institucional"] .main-footer { background:#ffffff !important; border-top:1px solid var(--borde-color) !important; color: var(--color-texto-muted) !important; }