/* Variables base para Tema Claro (predeterminado) */
:root {
  --bg-main: #f3f3f4;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --text-color: #676a6c;
  --text-heading: #2f4050;
  --border-color: #e7eaec;
  --sidebar-bg: #2f4050;
  --sidebar-text: #a7b1c2;
}

/* Redefinición de Variables para Modo Oscuro */
body.dark-skin {
  --bg-main: #1e1e2d;
  --bg-card: #2b2b40;
  --bg-header: #1e1e2d;
  --text-color: #a2a3b7;
  --text-heading: #ffffff;
  --border-color: #323248;
  --sidebar-bg: #151521;
  --sidebar-text: #92929f;
}

/* Aplica las variables a las estructuras de Inspinia */
body.dark-skin {
  background-color: var(--bg-main) !important;
  color: var(--text-color) !important;
}

/* Fondo de la app y contenedores principales */

body.dark-skin #page-wrapper {
 background-color: var(--bg-main) !important;
}

/* Tarjetas (ibox / boxes del dashboard) */
body.dark-skin .ibox-content,
body.dark-skin .ibox-title,
body.dark-skin .white-bg {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Encabezados y títulos */
body.dark-skin h1, 
body.dark-skin h2, 
body.dark-skin h3, 
body.dark-skin h4, 
body.dark-skin h5, 
body.dark-skin h6,
body.dark-skin .font-bold {
  color: var(--text-heading) !important;
}

/* Sidebar / Menú Lateral */
body.dark-skin .navbar-default,
body.dark-skin .metismenu {
  background-color: var(--sidebar-bg) !important;
}

body.dark-skin .nav > li > a {
  color: var(--sidebar-text) !important;
}

/* Navbar Superior */
body.dark-skin .border-bottom,
body.dark-skin .navbar-static-top {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Filtro opcional para adaptar el mapa de Leaflet en modo oscuro */
body.dark-skin .leaflet-tile-pane {
  filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3);
}

/* --- Corrección precisa para el Breadcrumb y Cabecera --- */

/* 1. Eliminar la caja blanca del breadcrumb */
body.dark-skin .breadcrumb,
body.dark-skin ol.breadcrumb {
  background-color: transparent !important;
}

/* 2. Cambiar el fondo del contenedor principal del título (quitar el white-bg) */
body.dark-skin .white-bg,
body.dark-skin .page-heading {
  background-color: #2b2b40 !important; /* Mismo color de tus tarjetas (o #1e1e2d si prefieres más oscuro) */
  border-bottom-color: #323248 !important;
}

/* 3. Color del texto y links del breadcrumb */
body.dark-skin .breadcrumb > li,
body.dark-skin .breadcrumb > li a {
  color: #a2a3b7 !important;
}

body.dark-skin .breadcrumb > li.active,
body.dark-skin .breadcrumb > li.active strong {
  color: #ffffff !important;
}

/* 4. Color de la barra diagonal ( / ) */
body.dark-skin .breadcrumb > li + li:before {
  color: #6c7293 !important;
}


/* --- Adaptación de Tablas a Modo Oscuro --- */

/* Fondo general de la tabla, bordes y celdas */
body.dark-skin .table,
body.dark-skin .table-bordered,
body.dark-skin .table-striped {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Celdas de encabezado (th) y cuerpo (td) */
body.dark-skin .table > thead > tr > th,
body.dark-skin .table > tbody > tr > th,
body.dark-skin .table > tfoot > tr > th,
body.dark-skin .table > thead > tr > td,
body.dark-skin .table > tbody > tr > td,
body.dark-skin .table > tfoot > tr > td,
body.dark-skin .table-bordered > thead > tr > th,
body.dark-skin .table-bordered > tbody > tr > th,
body.dark-skin .table-bordered > tfoot > tr > th,
body.dark-skin .table-bordered > thead > tr > td,
body.dark-skin .table-bordered > tbody > tr > td,
body.dark-skin .table-bordered > tfoot > tr > td {
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
  background-color: transparent !important;
}

/* Filas alternadas (table-striped) */
body.dark-skin .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02) !important; /* Un tono ligeramente más claro para alternar filas */
}

/* Efecto Hover al pasar el mouse por las filas */
body.dark-skin .table-hover > tbody > tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Textos dentro de las celdas (como nombres de clientes o datos) */
body.dark-skin .table td a,
body.dark-skin .table td.text-bold {
  color: #d1d5db !important;
}

/* --- Controles de DataTables (Filtro, Paginación y Buscador) --- */
body.dark-skin .dataTables_wrapper,
body.dark-skin .dataTables_length,
body.dark-skin .dataTables_filter,
body.dark-skin .dataTables_info,
body.dark-skin .dataTables_paginate {
  color: var(--text-color) !important;
}

/* Inputs de búsqueda y selects de DataTables */
body.dark-skin .dataTables_filter input,
body.dark-skin .dataTables_length select {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-heading) !important;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Paginación de DataTables */
body.dark-skin .dataTables_paginate .paginate_button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

body.dark-skin .dataTables_paginate .paginate_button.current,
body.dark-skin .dataTables_paginate .paginate_button:hover {
  background: #3b82f6 !important; /* Azul moderno para el botón activo/hover */
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}

/* --- Adaptación de Modales (Ventanas Emergentes) a Modo Oscuro --- */

/* Contenedor principal del modal */
body.dark-skin .modal-content {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

/* Cabecera del modal */
body.dark-skin .modal-header {
  background-color: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Título dentro del modal */
body.dark-skin .modal-title {
  color: var(--text-heading) !important;
}

/* Botón de cerrar (la "X" de la esquina) */
body.dark-skin .modal-header .close {
  color: #ffffff !important;
  text-shadow: none;
  opacity: 0.8;
}

body.dark-skin .modal-header .close:hover {
  opacity: 1;
}

/* Cuerpo del modal */
body.dark-skin .modal-body {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
}

/* Pie de página del modal (botones de acción) */
body.dark-skin .modal-footer {
  background-color: var(--bg-card) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Inputs, selects y textareas dentro de los modales */
body.dark-skin .modal-content input[type="text"],
body.dark-skin .modal-content input[type="password"],
body.dark-skin .modal-content input[type="email"],
body.dark-skin .modal-content input[type="number"],
body.dark-skin .modal-content select,
body.dark-skin .modal-content textarea {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-heading) !important;
}

/* Placeholder de los inputs en modales */
body.dark-skin .modal-content input::placeholder,
body.dark-skin .modal-content textarea::placeholder {
  color: var(--text-color) !important;
  opacity: 0.6;
}

/* --- Adaptación de Perfil de Cliente y Pestañas (Tabs) a Modo Oscuro --- */

/* 1. Tarjetas o contenedores con estilos inline o clases de perfil (.ibox-content y similares) */
body.dark-skin .ibox-content,
body.dark-skin div[style*="background-color: #f9f9f9"],
body.dark-skin div[style*="background-color:rgb(249, 249, 249)"] {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* 2. Líneas divisorias internas en los paneles de perfil */
body.dark-skin .ibox-content h3,
body.dark-skin div[style*="border-bottom"] {
  border-color: var(--border-color) !important;
  color: var(--text-heading) !important;
}

/* 3. Textos muted (atenuados) o etiquetas dentro del perfil */
body.dark-skin .text-muted {
  color: var(--text-color) !important;
  opacity: 0.8;
}

/* 4. Pestañas de navegación (Tabs: Pagos, Notas, Sitios) */
body.dark-skin .nav-tabs {
  border-bottom: 1px solid var(--border-color) !important;
}

body.dark-skin .nav-tabs > li > a {
  color: var(--text-color) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body.dark-skin .nav-tabs > li > a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body.dark-skin .nav-tabs > li.active > a,
body.dark-skin .nav-tabs > li.active > a:focus,
body.dark-skin .nav-tabs > li.active > a:hover {
  background-color: var(--bg-card) !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-color) !important;
  border-bottom-color: transparent !important;
}

/* 5. Contenedor de contenido de las pestañas (Tab content) */
body.dark-skin .tab-content {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

/* --- Adaptación de Panels y Contenedores de Pestañas a Modo Oscuro --- */

/* Contenedor general del panel (.panel) */
body.dark-skin .panel {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
  box-shadow: none !important;
}

/* Cabecera del panel (.panel-heading) donde están las pestañas */
body.dark-skin .panel-heading {
  background-color: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-heading) !important;
}

/* Cuerpo del panel (.panel-body) */
body.dark-skin .panel-body {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
}

/* Ajuste para cualquier caja o fondo blanco residual en esta vista */
body.dark-skin .panel-default {
  border-color: var(--border-color) !important;
}

body.dark-skin .panel-default > .panel-heading {
  background-color: var(--bg-card) !important;
  color: var(--text-heading) !important;
  border-color: var(--border-color) !important;
}

/* --- Adaptación de Notas de Seguimiento (Vertical Timeline) a Modo Oscuro --- */

/* 1. Fondo y bordes de las cajas de notas */
body.dark-skin .vertical-timeline-content {
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

/* 2. Títulos dentro de las notas (ej. "asdsad") */
body.dark-skin .vertical-timeline-content h2,
body.dark-skin .vertical-timeline-content h3 {
  color: var(--text-heading) !important;
  border-bottom-color: var(--border-color) !important;
}

/* 3. Textos secundarios o fechas (small text-muted) */
body.dark-skin .vertical-timeline-content .text-muted {
  color: var(--text-color) !important;
  opacity: 0.8;
}

/* 4. Línea vertical del timeline (si la plantilla usa una línea divisoria) */
body.dark-skin .vertical-container::before {
  background-color: var(--border-color) !important;
}

/* 5. Círculos o iconos del timeline (si mantienen fondo claro) */
body.dark-skin .vertical-timeline-icon {
  border-color: var(--border-color) !important;
}


/* --- Corrección definitiva para el Footer --- */
body.dark-skin .footer {
  background: var(--bg-card) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-color) !important;
  border-top: 1px solid var(--border-color) !important;
}

body.dark-skin .footer div,
body.dark-skin .footer span,
body.dark-skin .footer p {
  color: var(--text-color) !important;
  background: transparent !important;
}

/* --- Adaptación Completa de la Paginación a Modo Oscuro --- */

/* Contenedor general de la paginación */
body.dark-skin .dataTables_paginate,
body.dark-skin .pagination {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

/* Botones normales de la paginación */
body.dark-skin .pagination > li > a,
body.dark-skin .pagination > li > span,
body.dark-skin .dataTables_paginate .paginate_button {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Efecto Hover al pasar el mouse por los botones */
body.dark-skin .pagination > li > a:hover,
body.dark-skin .pagination > li > span:hover,
body.dark-skin .pagination > li > a:focus,
body.dark-skin .pagination > li > span:focus,
body.dark-skin .dataTables_paginate .paginate_button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: var(--border-color) !important;
}

/* Botón activo (la página actual, ej. el número 1) */
body.dark-skin .pagination > li.active > a,
body.dark-skin .pagination > li.active > span,
body.dark-skin .pagination > li.active > a:hover,
body.dark-skin .pagination > li.active > span:hover,
body.dark-skin .dataTables_paginate .paginate_button.current {
  background-color: #3b82f6 !important; /* Azul moderno para indicar la página activa */
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Botones deshabilitados (ej. Primero / Anterior cuando estás en la pág. 1) */
body.dark-skin .pagination > li.disabled > a,
body.dark-skin .pagination > li.disabled > span,
body.dark-skin .pagination > li.disabled > a:hover,
body.dark-skin .pagination > li.disabled > span:hover,
body.dark-skin .dataTables_paginate .paginate_button.disabled {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: var(--border-color) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed !important;
}

/* --- Forzar expansión del 100% en todas las DataTables --- */
body.dark-skin .dataTables_wrapper,
body.dark-skin .dataTables_wrapper .row {
  width: 100% !important;
  margin: 0 !important;
}

body.dark-skin table.dataTable,
body.dark-skin .table-responsive table.dataTable {
  width: 100% !important;
  max-width: 100% !important;
}

/* Evitar que las celdas colapsen en pantallas pequeñas */
body.dark-skin table.dataTable td,
body.dark-skin table.dataTable th {
  white-space: normal !important;
}

.table-responsive {
    width: 100% !important;
}


/* 1. Estilo para el campo select principal */
body.dark-skin select.form-control,
body.dark-skin select {
  background-color: var(--bg-card) !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-color) !important;
}


body.dark-skin select option {
  background-color: var(--bg-card) !important;
  color: var(--text-heading) !important;
  padding: 8px;
}

body.dark-skin select option:checked,
body.dark-skin select option:hover {
  background-color: #3b82f6 !important; /* Azul moderno de selección */
  color: #ffffff !important;
}


/* --- Adaptación perfecta de la Pantalla de Login para Dark Mode --- */

/* 1. Cambiar la imagen de fondo o oscurecerla cuando esté activo el modo oscuro */
body.dark-skin {
  background-image: linear-gradient(rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.85)), url('{{ url.getBaseUri() }}img/fondos/{{numAleatorio}}.jpeg') !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* 2. Sobrescribir el estilo en línea o clase .gray-bg del cuadro de login en modo oscuro */
body.dark-skin .middle-box .gray-bg,
body.dark-skin .loginscreen .gray-bg {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Textos y títulos dentro del login */
body.dark-skin .middle-box h1,
body.dark-skin .middle-box h3,
body.dark-skin .middle-box p,
body.dark-skin .middle-box small {
  color: var(--text-color) !important;
}

body.dark-skin .middle-box h1.logo-name {
  color: var(--text-heading) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 4. Campos de texto (Usuario y Contraseña) */
body.dark-skin .middle-box input.form-control {
  background-color: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-heading) !important;
}

body.dark-skin .middle-box input.form-control::placeholder {
  color: var(--text-color) !important;
  opacity: 0.5;
}

/* 5. Enlaces (¿Olvidaste la contraseña?) */
body.dark-skin .middle-box a {
  color: #60a5fa !important;
}

/* --- Corrección para Fieldset y Legend en Modo Oscuro --- */

body.dark-skin fieldset {
  border: 1px solid var(--border-color) !important;
  padding: 10px 15px !important;
  border-radius: 4px;
}

body.dark-skin legend {
  color: var(--text-heading) !important;
  border-bottom: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  width: auto !important;
  padding: 0 10px !important;
}

/* --- Adaptación de Switchery (Interruptores) a Modo Oscuro --- */

/* 1. Fondo de la pista (track) cuando está desactivado */
body.dark-skin span.switchery {
  background-color: var(--bg-main) !important;
  border-color: var(--border-color) !important;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2) !important;
}

/* 2. El botón deslizante (la perilla blanca) */
body.dark-skin span.switchery > small {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Asegurar que los textos junto a los switches sean legibles */
body.dark-skin .form-group span, 
body.dark-skin .form-group label {
  color: var(--text-color) !important;
}