/* NaviPort RD — themes.css
   Variables de visualización adaptable (densidad, fuente, ancho, tema)
   Cargado en base.html DESPUÉS de base.css para aplicar globalmente.
*/

/* ============================================================
   VARIABLES POR DEFECTO: claro · cómodo · 14px · completo
   ============================================================ */
:root {
  --font-size-base:     14px;
  --content-padding-v:  30px;
  --content-padding-h:  40px;
  --card-padding:       25px;
  --content-max-width:  none;

  /* Paleta modo claro */
  --bg-body:            #f5f6fa;
  --bg-card:            #ffffff;
  --bg-card-secondary:  #f8f9fa;
  --text-primary:       #2c3e50;
  --text-secondary:     #6c757d;
  --border-color:       #e9ecef;
  --table-stripe-odd:   #f9f9f9;
  --table-stripe-even:  #ffffff;
  --input-bg:           #ffffff;
  --input-color:        #2c3e50;
}

/* ============================================================
   FUENTE
   ============================================================ */
html[data-font-size="sm"] { --font-size-base: 12px; }
html[data-font-size="md"] { --font-size-base: 14px; }
html[data-font-size="lg"] { --font-size-base: 16px; }

/* ============================================================
   DENSIDAD
   ============================================================ */
html[data-density="compacto"] {
  --content-padding-v: 16px;
  --content-padding-h: 20px;
  --card-padding:      14px;
}

/* ============================================================
   ANCHO
   ============================================================ */
html[data-content-width="centered"] {
  --content-max-width: 1400px;
}

/* ============================================================
   TEMA OSCURO — variables
   ============================================================ */
html[data-theme="dark"] {
  --bg-body:           #0f172a;
  --bg-card:           #1e293b;
  --bg-card-secondary: #243047;
  --text-primary:      #e2e8f0;
  --text-secondary:    #94a3b8;
  --border-color:      #334155;
  --table-stripe-odd:  #1a2940;
  --table-stripe-even: #1e293b;
  --input-bg:          #243047;
  --input-color:       #e2e8f0;
}

/* ============================================================
   FONT SIZE GLOBAL
   ============================================================ */
body {
  font-size: var(--font-size-base);
}

/* ============================================================
   FONDO GENERAL (con sidebar)
   base.css define background: rgba(255,255,255,0.95) en .content-area
   — lo sobreescribimos para modo oscuro y usamos el fondo del body.
   ============================================================ */
.content-with-sidebar {
  background: var(--bg-body) !important;
}

html[data-theme="dark"] .content-area {
  background: var(--bg-body) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Textos de títulos con color inline oscuro que quedarían invisibles en dark */
html[data-theme="dark"] .content-area h1[style*="color"],
html[data-theme="dark"] .content-area h2[style*="color"],
html[data-theme="dark"] .content-area h3[style*="color"],
html[data-theme="dark"] .content-area h4[style*="color"],
html[data-theme="dark"] .content-area p[style*="color: #7f8c8d"],
html[data-theme="dark"] .content-area p[style*="color: #6c757d"],
html[data-theme="dark"] .content-area p[style*="color: #2c3e50"],
html[data-theme="dark"] .content-area p[style*="color: #333"],
html[data-theme="dark"] .content-area span[style*="color: #2c3e50"],
html[data-theme="dark"] .content-area span[style*="color: #333"] {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .content-area p[style*="color: #7f8c8d"],
html[data-theme="dark"] .content-area p[style*="color: #6c757d"],
html[data-theme="dark"] .content-area small[style*="color: #"] {
  color: var(--text-secondary) !important;
}

/* ============================================================
   CARDS Y CONTENEDORES GENERALES
   ============================================================ */
.dashboard-card,
.form-container,
.data-table,
/* solicitudes */
.solicitud-form,
.form-section,
.tabla-gestion,
.tabla-header,
.modal-content,
.modal-header,
.modal-footer,
.modal-body,
.busqueda-personal,
.resultados-busqueda,
.service-checkbox,
/* empresas */
.tabla-empresas,
.stat-card,
.licencia-card,
.servicio-card,
.servicios-grid,
.filtros-empresa,
.acciones-rapidas,
.resumen-empresa,
/* timeline */
.timeline-container,
.timeline-content,
.timeline-item .timeline-content,
.timeline-time,
/* styles.css */
.search-filters,
.wizard-form-section,
.wizard-form-header,
/* dropdowns */
.user-dropdown,
.dropdown-menu {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   FONDOS SECUNDARIOS (gris claro → gris oscuro)
   ============================================================ */
.tabla-header,
.modal-header,
.modal-footer,
.table-header,
.tabla-empresas th,
.timeline-date-header,
.timeline-date-label,
.search-filters,
.service-checkbox:hover,
.resultado-item:hover {
  background: var(--bg-card-secondary) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   TEXTOS
   ============================================================ */
.dashboard-card .card-title,
.form-container h2,
.form-container h3,
.form-container h4,
.form-section h3,
.form-section h4,
.table-title,
.wizard-form-title,
.wizard-section-title,
.stat-number,
.stat-label,
.licencia-numero,
.servicio-nombre,
.modal-title,
.timeline-title,
.timeline-user,
.metadata-label {
  color: var(--text-primary) !important;
}

.card-subtitle,
.form-text,
.servicio-descripcion,
.timeline-meta,
.timeline-description,
.metadata-value {
  color: var(--text-secondary) !important;
}

/* ============================================================
   TABLAS GENÉRICAS (.table)
   ============================================================ */
.table {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.table th,
.table td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.table thead th {
  background: var(--bg-card-secondary) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-color) !important;
}

.table tbody tr:nth-of-type(odd) td  { background: var(--table-stripe-odd)  !important; }
.table tbody tr:nth-of-type(even) td { background: var(--table-stripe-even) !important; }

.table-hover tbody tr:hover td {
  background: rgba(52, 152, 219, 0.08) !important;
}

.table-header {
  background: var(--bg-card-secondary) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   TABLAS ESPECÍFICAS (tabla-gestion, tabla-empresas)
   ============================================================ */
.tabla-gestion th,
.tabla-content th,
.tabla-empresas th {
  background: var(--bg-card-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.tabla-gestion td,
.tabla-content td,
.tabla-empresas td {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.tabla-content tr:hover,
.tabla-gestion tr:hover,
.tabla-empresas tr:hover {
  background: rgba(52, 152, 219, 0.08) !important;
}

/* ============================================================
   INPUTS Y FORMULARIOS
   ============================================================ */
.form-control,
.wizard-input,
.form-group input,
.form-group select,
.form-group textarea,
.search-filters input,
.search-filters select,
.filtros-empresa input,
.filtros-empresa select {
  background: var(--input-bg) !important;
  color: var(--input-color) !important;
  border-color: var(--border-color) !important;
}

.form-group label,
.wizard-label,
.form-section label {
  color: var(--text-primary) !important;
}

/* ============================================================
   TIMELINE
   ============================================================ */
html[data-theme="dark"] .timeline-item.interno .timeline-content {
  background: #1a2535 !important;
}

html[data-theme="dark"] .timeline-item.publico .timeline-content {
  background: #1e293b !important;
}

html[data-theme="dark"] .timeline-item.staff .timeline-content {
  background: #1e2d3b !important;
}

html[data-theme="dark"] .timeline-date-header {
  background: var(--bg-card-secondary) !important;
}

html[data-theme="dark"] .timeline-date-count {
  background: #334155 !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .timeline-marker {
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .timeline-line {
  background: var(--border-color) !important;
}

/* ============================================================
   DROPDOWNS Y MENÚS
   ============================================================ */
html[data-theme="dark"] .user-dropdown a,
html[data-theme="dark"] .dropdown-menu a,
html[data-theme="dark"] .logout-link {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .user-dropdown a:hover,
html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .logout-link:hover {
  background: var(--bg-card-secondary) !important;
}

/* ============================================================
   PAGINACIÓN
   ============================================================ */
html[data-theme="dark"] .pagination a {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .pagination .current {
  background: #3498db !important;
  color: white !important;
}

/* ============================================================
   RESULTADO DE BÚSQUEDA DE PERSONAL
   ============================================================ */
html[data-theme="dark"] .resultado-item {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .resultado-item:hover {
  background: var(--bg-card-secondary) !important;
}

/* ============================================================
   SERVICIOS (checkboxes de selección)
   ============================================================ */
html[data-theme="dark"] .service-checkbox label {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .servicio-card.inactivo {
  background: #1a2535 !important;
  opacity: 0.7;
}

/* ============================================================
   STAT CARDS (empresas y styles.css)
   ============================================================ */
html[data-theme="dark"] .stat-card {
  border-color: var(--border-color) !important;
}

/* ============================================================
   ALERTAS (mantener colores semánticos, ajustar opacidad)
   ============================================================ */
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alerta-por-vencer {
  background: rgba(243, 156, 18, 0.15) !important;
  border-color: rgba(243, 156, 18, 0.4) !important;
  color: #f6c05e !important;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alerta-vencida {
  background: rgba(231, 76, 60, 0.15) !important;
  border-color: rgba(231, 76, 60, 0.4) !important;
  color: #f1998e !important;
}

html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alerta-vigente {
  background: rgba(39, 174, 96, 0.15) !important;
  border-color: rgba(39, 174, 96, 0.4) !important;
  color: #68d391 !important;
}

html[data-theme="dark"] .alert-info {
  background: rgba(52, 152, 219, 0.15) !important;
  border-color: rgba(52, 152, 219, 0.4) !important;
  color: #76c3f5 !important;
}

/* ============================================================
   BORDES GENERALES
   ============================================================ */
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .licencia-card,
html[data-theme="dark"] .modal-content {
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================================
   OVERRIDE DE ESTILOS INLINE COMUNES (background: white)
   Cubre divs estructurales con fondos inline dentro del área de contenido
   sin tocar botones, badges ni iconos de color.
   ============================================================ */
html[data-theme="dark"] .content-area div[style*="background: white"],
html[data-theme="dark"] .content-area div[style*="background:#fff"],
html[data-theme="dark"] .content-area div[style*="background: #fff"],
html[data-theme="dark"] .content-area div[style*="background: #ffffff"],
html[data-theme="dark"] .content-area section[style*="background: white"],
html[data-theme="dark"] .content-area section[style*="background: #fff"] {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .content-area div[style*="background: #f8f9fa"],
html[data-theme="dark"] .content-area div[style*="background: #f5f6fa"],
html[data-theme="dark"] .content-area div[style*="background: #fafafa"],
html[data-theme="dark"] .content-area div[style*="background: #f9f9f9"] {
  background: var(--bg-card-secondary) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   ANCHO MÁXIMO DEL CONTENIDO
   Se aplica via sidebar_base_styles.html usando var()
   ============================================================ */