/**
 * theme.css — Sistema de tema claro/oscuro global · Corpoprom
 * Incluir en todos los módulos después del CSS de Bootstrap.
 * El toggle se inyecta automáticamente por theme-init.js.
 */

/* ══════════════════════════════════════════════════════
   VARIABLES GLOBALES — MODO CLARO (default)
══════════════════════════════════════════════════════ */
:root {
  --sys-bg:            #f0f2f5;
  --sys-bg-card:       #ffffff;
  --sys-bg-hover:      #f8f9fa;
  --sys-text:          #212529;
  --sys-text-muted:    #6c757d;
  --sys-border:        #dee2e6;
  --sys-input-bg:      #ffffff;
  --sys-input-text:    #212529;
  --sys-input-border:  #ced4da;
  --sys-badge-light-bg:   #f8f9fa;
  --sys-badge-light-text: #212529;
  --sys-table-stripe:  #f9f9f9;
  --sys-shadow:        rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════
   VARIABLES GLOBALES — MODO OSCURO
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --sys-bg:            #0f172a;
  --sys-bg-card:       #1e293b;
  --sys-bg-hover:      #334155;
  --sys-text:          #e2e8f0;
  --sys-text-muted:    #94a3b8;
  --sys-border:        #334155;
  --sys-input-bg:      #1e293b;
  --sys-input-text:    #e2e8f0;
  --sys-input-border:  #475569;
  --sys-badge-light-bg:   #334155;
  --sys-badge-light-text: #e2e8f0;
  --sys-table-stripe:  #263548;
  --sys-shadow:        rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════ */
body {
  background: var(--sys-bg) !important;
  color: var(--sys-text) !important;
  transition: background .25s, color .25s;
}

/* ══════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-kpi {
  background-color: var(--sys-bg-card) !important;
  border-color: var(--sys-border) !important;
  color: var(--sys-text);
}

/* ══════════════════════════════════════════════════════
   MODALES
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--sys-bg-card);
  border-color: var(--sys-border);
  color: var(--sys-text);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--sys-border);
}
[data-bs-theme="dark"] .modal-body {
  background-color: var(--sys-bg-card);
  color: var(--sys-text);
}

/* ══════════════════════════════════════════════════════
   TABLAS
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .table {
  --bs-table-bg:         var(--sys-bg-card);
  --bs-table-striped-bg: var(--sys-table-stripe);
  --bs-table-hover-bg:   var(--sys-bg-hover);
  color: var(--sys-text);
  border-color: var(--sys-border);
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead.table-light,
[data-bs-theme="dark"] .table > thead {
  --bs-table-bg: #263548 !important;
  background-color: #263548 !important;
  color: var(--sys-text) !important;
}
[data-bs-theme="dark"] .table th,
[data-bs-theme="dark"] .table td {
  border-color: var(--sys-border);
  color: var(--sys-text);
}

/* ══════════════════════════════════════════════════════
   FORMULARIOS — inputs, selects, textareas
══════════════════════════════════════════════════════ */
/* No forzar mayúsculas en ningún campo de texto */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
.form-control {
  text-transform: none;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea {
  background-color: var(--sys-input-bg) !important;
  color: var(--sys-input-text) !important;
  border-color: var(--sys-input-border) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--sys-input-bg) !important;
  color: var(--sys-input-text) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 .25rem rgba(96,165,250,.25) !important;
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
  color: #64748b;
}
[data-bs-theme="dark"] .form-control-color {
  background-color: var(--sys-input-bg) !important;
}
/* Opciones de <select> nativo */
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] select optgroup {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .input-group-text {
  background-color: #263548 !important;
  border-color: var(--sys-input-border) !important;
  color: var(--sys-text-muted) !important;
}

/* ══════════════════════════════════════════════════════
   TOM SELECT — dark mode
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .ts-wrapper .ts-control {
  background-color: var(--sys-input-bg) !important;
  color: var(--sys-input-text) !important;
  border-color: var(--sys-input-border) !important;
}
[data-bs-theme="dark"] .ts-wrapper.focus .ts-control {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 .25rem rgba(96,165,250,.25) !important;
}
[data-bs-theme="dark"] .ts-wrapper .ts-control input {
  color: var(--sys-input-text) !important;
  caret-color: var(--sys-input-text) !important;
}
[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
  color: #64748b !important;
}
[data-bs-theme="dark"] .ts-wrapper .ts-control .item {
  background: #334155 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
[data-bs-theme="dark"] .ts-dropdown {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}
[data-bs-theme="dark"] .ts-dropdown .option {
  color: #e2e8f0 !important;
  background: transparent !important;
}
[data-bs-theme="dark"] .ts-dropdown .option.active,
[data-bs-theme="dark"] .ts-dropdown .option:hover {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .ts-dropdown .option.selected {
  background-color: #1e3a5f !important;
  color: #bfdbfe !important;
}
[data-bs-theme="dark"] .ts-dropdown .optgroup-header {
  color: #94a3b8 !important;
  background: #263548 !important;
}
[data-bs-theme="dark"] .ts-dropdown .no-results {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #94a3b8;
  border-color: #475569;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #334155;
  color: #e2e8f0;
  border-color: #64748b;
}
[data-bs-theme="dark"] .btn-light {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .btn-close {
  filter: invert(1);
}

/* ══════════════════════════════════════════════════════
   NAV PILLS
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .nav-pills .nav-link {
  color: #94a3b8;
}
[data-bs-theme="dark"] .nav-pills .nav-link:hover {
  color: #e2e8f0;
  background-color: #1e293b;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--sys-badge-light-bg) !important;
  color: var(--sys-badge-light-text) !important;
}
[data-bs-theme="dark"] .bg-white {
  background-color: var(--sys-bg-card) !important;
}
[data-bs-theme="dark"] .text-dark {
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════
   DROPDOWNS
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--sys-bg-card);
  border-color: var(--sys-border);
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--sys-text);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--sys-bg-hover);
  color: var(--sys-text);
}

/* ══════════════════════════════════════════════════════
   TEXTO Y BORDES
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .text-muted {
  color: var(--sys-text-muted) !important;
}
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: var(--sys-border) !important;
}
[data-bs-theme="dark"] hr {
  border-color: var(--sys-border);
}

/* ══════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .alert-success {
  background-color: #14532d22;
  border-color: #166534;
  color: #86efac;
}
[data-bs-theme="dark"] .alert-warning {
  background-color: #78350f22;
  border-color: #92400e;
  color: #fcd34d;
}
[data-bs-theme="dark"] .alert-danger {
  background-color: #7f1d1d22;
  border-color: #991b1b;
  color: #fca5a5;
}
[data-bs-theme="dark"] .alert-info {
  background-color: #0c4a6e22;
  border-color: #0369a1;
  color: #7dd3fc;
}

/* ══════════════════════════════════════════════════════
   PAGINACIÓN
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .page-link {
  background-color: var(--sys-bg-card);
  border-color: var(--sys-border);
  color: var(--sys-text);
}
[data-bs-theme="dark"] .page-link:hover {
  background-color: var(--sys-bg-hover);
}

/* ══════════════════════════════════════════════════════
   BOTÓN TOGGLE TEMA (inyectado por theme-init.js)
══════════════════════════════════════════════════════ */
#btnTema {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.15rem;
  padding: 4px 8px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s, transform .3s;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
#btnTema:hover {
  opacity: 1;
  transform: rotate(15deg);
}

/* ══════════════════════════════════════════════════════
   NAVBAR PRINCIPAL — fondo siempre negro (branding)
   Aplica en modo claro Y oscuro sin excepción.
══════════════════════════════════════════════════════ */
header.navbar,
header.navbar.bg-black {
  background-color: #000 !important;
  background: #000 !important;
}
/* Colores de texto siempre blancos dentro del header */
header.navbar .navbar-brand,
header.navbar .navbar-brand:hover,
header.navbar .navbar-brand:focus,
header.navbar .sistema-titulo,
header.navbar .text-white,
header.navbar #navGreeting,
header.navbar #userGreeting {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   BREADCRUMB nav.bc — fondo siempre rojo corporativo
══════════════════════════════════════════════════════ */
nav.bc {
  background-color: #800000 !important;
  color: #fff !important;
}
nav.bc a,
nav.bc span,
nav.bc strong {
  color: #fff !important;
  text-decoration: none;
}
nav.bc a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════
   SECTION-CARD — fondo oscuro en dark mode
══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .section-card {
  background-color: var(--sys-bg-card) !important;
  border-color: var(--sys-border) !important;
  color: var(--sys-text);
}
[data-bs-theme="dark"] .section-card h5,
[data-bs-theme="dark"] .section-card h6 {
  color: #e2e8f0 !important;
  border-bottom-color: var(--sys-border) !important;
}