/* =====================
   General Styles
====================== */

.bg-white {
  background-color: #ffffff !important; /* Fondo blanco en modo claro */
}

/* Fondo para el modo oscuro */
.dark-mode .bg-white {
  background-color: #283443 !important; /* Fondo gris en modo oscuro */
}

/* Fondo y texto en el cuerpo */
body.dark-mode {
  background-color: #283443;
  color: #ffffff;
}

.dark-mode .info-box .info-box-content p {
  color: #fff !important; /* Texto blanco en el modo oscuro */
}

.dark-mode .info-box .info-box-title {
  color: #fff !important; /* Títulos en blanco */
}

.dark-mode .info-box .info-box-subtitle {
  color: #fff !important; /* Subtítulos en blanco */
}

/* Transiciones para el modo oscuro */
body, .navbar, .footer, .btn {
  transition: background-color 0.3s, color 0.3s, border 0.3s;
}
/* =====================
   TEXTO DE DRAWPER
====================== */
/* Estilo para el fondo oscuro en el acordeón solo en modo oscuro */
.dark-mode .accordion-group .card-body {
  background-color: #333 !important; /* Fondo oscuro en el modo oscuro */
  color: #fff; /* Asegura que el texto sea blanco en modo oscuro */
}

/* Estilo para el fondo del acordeón en el modo claro (sin cambios) */
.accordion-group .card-body {
  background-color: #fff; /* Fondo blanco en el modo claro */
  color: #000; /* Texto negro en el modo claro */
}

/* =====================
   Header and Navigation
====================== */

/* Fondo oscuro en la barra de navegación */
.dark-mode .navbar {
  background-color: #22222242;
}

/* Estilo de los enlaces en la barra de navegación */
.dark-mode .navbar a,
.dark-mode .navbar .navbar-brand {
  color: #fff;
}

.dark-mode .navbar a:hover {
  color: #ff0000;
}

/* =====================
   MENU OPCIONES
====================== */


/* Estilo para los enlaces en la barra de navegación */
.dark-mode .navbar a {
  color: #ffffff !important; /* Texto blanco en los enlaces */
}

/* Estilo para los enlaces al pasar el ratón */
.dark-mode .navbar a:hover {
  color: #ff5722 !important; /* Resalta los enlaces con un color naranja brillante al pasar el ratón */
}

/* Estilo para los elementos del menú desplegable en modo oscuro */
.dark-mode .navbar .dropdown-menu {
  background-color: #333333 !important; /* Fondo oscuro para los menús desplegables */
  color: #fff !important; /* Texto blanco en los menús desplegables */
}

.dark-mode .navbar .dropdown-menu a {
  color: #fff !important; /* Texto blanco en los enlaces del menú desplegable */
}

.dark-mode .navbar .dropdown-menu a:hover {
  color: #ff5722 !important; /* Enlaces resaltados con un color brillante al pasar el ratón */
}

/* Estilo para los íconos de las flechas en el menú desplegable */
.dark-mode .navbar .dropdown-toggle i {
  color: #fff !important; /* Asegura que las flechas sean blancas en el modo oscuro */
}

/* Estilo para el fondo de los submenús en modo oscuro */
.dark-mode .navbar .dropdown-menu .active {
  background-color: #e53935 !important; /* Fondo rojo para el submenú activo */
  color: #fff !important; /* Texto blanco para el submenú activo */
}

/* =====================
   Footer Styles
====================== */

/* Estilo para el pie de página (footer) en modo oscuro */
.dark-mode footer {
  background-color: #222 !important; /* Fondo oscuro para el pie de página */
  color: #e0e0e0 !important; /* Color de texto claro */
}

/* Cambia el color de los enlaces sociales */
.dark-mode .footer .footer-social a {
  color: #940000 !important; /* Iconos de redes sociales en blanco */
}

.dark-mode .footer .footer-social a:hover {
  color: #b91f1f !important; /* Color de los iconos al pasar el ratón */
}

/* Cambia el color del texto en el pie de página */
.dark-mode .footer .footer-logo,
.dark-mode .footer .footer-about p {
  color: #fff !important; /* Texto blanco */
}

/* Estilo para las cajas de información en el pie de página */
.dark-mode .footer-widget .info-box-content p {
  color: #e0e0e0 !important; /* Asegura que el texto sea visible */
}

/* Estilo para los botones en el pie de página */
.dark-mode .footer-widget .btn {
  background-color: #e53935 !important; /* Fondo de botones rojo oscuro */
  color: #fff !important; /* Texto blanco */
}

.dark-mode .footer-widget .btn:hover {
  background-color: #d32f2f !important; /* Fondo más claro cuando se pasa el ratón */
}

/* =====================
   Sidebar Styles
====================== */

/* Fondo oscuro en la barra lateral */
.dark-mode .sidebar {
  background-color: #000000;
  color: #da0808;
}

/* Títulos de los widgets en la barra lateral */
.dark-mode .sidebar .widget-title {
  color: #da0303;
}

/* =====================
   Buttons and Links
====================== */

/* Estilo de los botones en modo oscuro */
.dark-mode .btn {
  background-color: #e53935 !important; /* Fondo de botones rojo oscuro */
  color: #fff !important; /* Texto blanco en los botones */
  border: none !important; /* Elimina cualquier borde */
}

.dark-mode .btn:hover {
  background-color: #d32f2f !important; /* Fondo más claro para el hover */
}

/* Estilo para los enlaces en modo oscuro */
.dark-mode a {
  color: #ffffff !important; /* Enlaces en color gris claro */
}

.dark-mode a:hover {
  color: #000000 !important; /* Resalta los enlaces con un color naranja brillante */
}

/* =====================
   Carousel and Media
====================== */

/* Asegura que las imágenes del carrusel sean transparentes en modo oscuro */
.dark-mode .carousel-item img,
.dark-mode .swiper-slide img {
  filter: grayscale(0%) !important; /* Elimina cualquier filtro de escala de grises */
  background-color: transparent !important; /* Fondo transparente */
  box-shadow: none !important; /* Elimina cualquier sombra no deseada */
  border: none !important; /* Elimina los bordes */
}

/* Asegura que el contenedor del carrusel no tenga fondo blanco en modo oscuro */
.dark-mode .swiper-container,
.dark-mode .carousel {
  background-color: transparent !important;
}

/* Añadir transición suave a las imágenes en modo oscuro */
.dark-mode .carousel-item img,
.dark-mode .swiper-slide img {
  transition: background-color 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* Fondo negro transparente en imágenes */
.dark-mode .carousel-item img,
.dark-mode .swiper-slide img {
  background: rgba(0, 0, 0, 0) !important;
}

/* =====================
   Forms and Inputs
====================== */

/* Estilo para los formularios en modo oscuro */
.dark-mode .form-control {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

/* =====================
   Clients carousel white-filter
   - En modo oscuro, los logos del carrusel se muestran en blanco
   - Al pasar el mouse por un logo específico, vuelve a su color original
====================== */
/* Estado base: logos en blanco (invertidos) */
.dark-mode .carousel-wrapper .carousel-logo {
  /* Convertir a blanco sin saturación y con buen contraste */
  filter: brightness(0) invert(1) saturate(0) contrast(100%) !important;
  /* Habilitar hover en modo oscuro (en style.css está desactivado) */
  pointer-events: auto;
  /* Transición sutil solo del filtro para no afectar rendimiento */
  transition: filter 0.2s ease;
}

/* Hover: devolver el color original únicamente del logo apuntado */
.dark-mode .carousel-wrapper .carousel-logo:hover {
  filter: none !important;
}

/* Asegurar que la regla de hover del style.css (grayscale) no se imponga */
.dark-mode .carousel-wrapper .swiper-slide .carousel-logo:hover {
  filter: none !important;
}
.dark-mode .form-control:focus {
  background-color: #444;
  border-color: #ff9800;
}

/* =====================
   Text and Typography
====================== */

/* Estilo para los encabezados en modo oscuro */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: #fff;
}

/* Estilo para el título de las entradas */
.dark-mode .entry-title {
  color: #fff;
}

/* Estilo para las metainformaciones de la entrada */
.dark-mode .post-meta {
  color: #9a9a9a;
}

/* =========================================
   BOTÓN DE CAMBIO DE TEMA (ANIMACIÓN MEJORADA)
========================================== */

.theme-toggle {
  position: fixed;
  top: 22px; /* O ajusta según necesites */
  right: 20px; /* O ajusta según necesites */
  z-index: 9999;
}

.theme-toggle-checkbox {
  display: none; /* Oculta el checkbox real */
}

.theme-toggle-label {
  display: block; /* Cambiado a block para contener la manija absoluta */
  width: 60px;
  height: 30px;
  background-color: #444; /* Color base ligeramente más claro */
  border-radius: 50px;
  cursor: pointer;
  position: relative; /* Necesario para la manija absoluta */
  transition: background-color 0.4s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Modo claro: Color de fondo y resplandor */
body:not(.dark-mode) .theme-toggle-label {
  background-color: #1f7fdd; /* Azul claro para el día */
  box-shadow: 0 0 8px 2px rgba(10, 84, 102, 0.911); /* Resplandor amarillo */
}
/* Modo oscuro: Color de fondo */
body.dark-mode .theme-toggle-label {
   background-color: #3a3d4f; /* Azul oscuro para la noche */
   box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2); /* Resplandor blanco sutil */
}


.theme-toggle-handle {
  position: absolute;
  top: 2px;  /* Espacio desde arriba */
  left: 2px; /* Espacio inicial desde la izquierda */
  width: 26px; /* Ancho de la manija (altura - 2*top) */
  height: 26px;/* Alto de la manija (altura - 2*top) */
  background-color: #f0f0f0; /* Color de la manija */
  border-radius: 50%; /* Hace la manija circular */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición suave con rebote */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Asegura que los iconos no se salgan */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Estilo base de los iconos dentro de la manija */
.theme-toggle-icon {
  font-size: 16px; /* Tamaño ajustado */
  position: absolute; /* Para superponerlos */
  transition: opacity 0.3s ease, transform 0.4s ease; /* Transición suave */
}

/* Icono Sol (Modo Claro - inicial) */
.theme-toggle-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #bdb005; /* Color dorado */
}

/* Icono Luna (Modo Oscuro - inicial) */
.theme-toggle-dark {
  opacity: 0;
  transform: rotate(90deg) scale(0.8); /* Rotado y escalado inicialmente */
  color: #fffbfb; /* Color blanco/gris claro */
}


/* --- ESTADOS CUANDO EL CHECKBOX ESTÁ ACTIVADO (Modo Oscuro) --- */

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-handle {
  /* Mueve la manija a la derecha: ancho_label - ancho_manija - espacio_izquierdo */
  transform: translateX(calc(60px - 26px - 4px)); 
  background-color: #555; /* Manija más oscura en modo noche */
}

/* Oculta y rota el sol */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-light {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

/* Muestra y rota la luna */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}


/* =====================
   Comments Section
====================== */

/* Estilo para el área de comentarios */
.dark-mode .comments-area {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.dark-mode .comment-meta {
  color: #9a9a9a;
}

/* =====================
   Top Bar
====================== */
/* Estilo para el top bar en modo claro */
.top-bar {
  padding: 8px 0;
  background: #ebebeb; /* Fondo claro */
  position: relative;
}

/* Estilo para el top bar en modo oscuro */
.dark-mode .top-bar {
  background: #333 !important; /* Fondo oscuro en modo oscuro */
  color: #fff !important; /* Texto blanco en modo oscuro */
}


/* Mapa (Flourish) - Forzar texto descriptivo blanco en modo oscuro */
.dark-mode #mining-map .text-muted {
  color: #fff !important;
}

/* =====================
   Servicios
====================== */
/* Estilo para la sección de Servicios recientes en modo oscuro */
.dark-mode #project-area {
  background-color: #222 !important; /* Fondo oscuro para la sección de Servicios */
  color: #fff !important; /* Texto blanco para los Servicios */
}

/* Estilo para las tarjetas de Servicios */
.dark-mode .project-img-container {
  background-color: #333 !important; /* Fondo oscuro para las tarjetas de Servicios */
  color: #fff !important; /* Texto blanco dentro de las tarjetas */
}

/* Estilo para los títulos de Servicios */
.dark-mode .project-item-title a {
  color: #fff !important; /* Títulos en blanco en el modo oscuro */
}

/* Estilo para las categorías de Servicios */
.dark-mode .project-cat {
  color: #bbb !important; /* Texto gris claro para la categoría */
}

/* Estilo para los botones de los Servicios */
.dark-mode .general-btn .btn {
  background-color: #e53935 !important; /* Fondo de botones en rojo oscuro */
  color: #fff !important; /* Texto blanco en los botones */
  border: none !important;
}

.dark-mode .general-btn .btn:hover {
  background-color: #d32f2f !important; /* Fondo más claro cuando se pasa el ratón */
}

/* Estilo para los filtros de Servicios */
.dark-mode .shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco en el filtro activo */
}

/* Estilo para los filtros de Servicios cuando no están activos */
.dark-mode .shuffle-btn-group label {
  color: #fff !important; /* Texto blanco para los filtros */
  background-color: #444 !important; /* Fondo oscuro para los filtros */
}


/* Estilo para los filtros de Servicios en modo oscuro */
.dark-mode .shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco en el filtro activo */
  border-color: #e53935 !important; /* Borde rojo para el filtro activo */
}

/* Estilo para los filtros cuando no están activos */
.dark-mode .shuffle-btn-group label {
  color: #fff !important; /* Texto blanco para los filtros */
  background-color: #444 !important; /* Fondo oscuro para los filtros */
  border: 1px solid #555 !important; /* Borde gris oscuro */
}

/* Estilo para los filtros cuando están seleccionados */
.shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco */
  border-color: #e53935 !important; /* Borde rojo para el filtro activo */
}

/* Estilo para las etiquetas de los filtros */
.shuffle-btn-group label {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.shuffle-btn-group label:hover {
  background-color: #d32f2f !important; /* Cambio de color al pasar el ratón */
}

/* =====================
   SISTEMA INTEGRADO DE GESTIÓN - MODO OSCURO
====================== */

/* Header SIG en modo oscuro */
.dark-mode .sig-header {
    background: linear-gradient(135deg, #690505 0%, #0a2142 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Contenedores en modo oscuro */
.dark-mode .sig-breadcrumb,
.dark-mode .sig-search-container,
.dark-mode .sig-navigation-panel,
.dark-mode .sig-content-panel,
.dark-mode .sig-info {
    background: #2d2d2d;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Elementos de navegación en modo oscuro */
.dark-mode .sig-nav-item {
    color: #000000;
    border-bottom-color: #404040;
}

.dark-mode .sig-nav-item:hover {
    background: #363636;
    color: #fff;
}

.dark-mode .sig-nav-item.active {
    background: #0d2142;
    color: #fff;
}

/* Items y carpetas en modo oscuro */
.dark-mode .sig-folder-item,
.dark-mode .sig-file-item,
.dark-mode .sig-grid-item {
    background: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

.dark-mode .sig-folder-item:hover,
.dark-mode .sig-file-item:hover,
.dark-mode .sig-grid-item:hover {
    background: #363636;
    border-color: #0d2142;
}

/* Encabezados y títulos en modo oscuro */
.dark-mode .sig-content-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .sig-content-title {
    color: #fff;
}

/* Botones en modo oscuro */
.dark-mode .sig-view-btn {
    background: #404040;
    color: #e0e0e0;
}

.dark-mode .sig-view-btn.active {
    background: #0d2142;
    color: #fff;
}

/* Campos de búsqueda en modo oscuro */
.dark-mode .sig-search-box input {
    background: #363636;
    border-color: #404040;
    color: #fff;
}

.dark-mode .sig-search-box input::placeholder {
    color: #808080;
}

/* Estadísticas en modo oscuro */
.dark-mode .sig-stat-item {
    background: #363636;
}

.dark-mode .sig-stat-number {
    color: #ffffff;
}

.dark-mode .sig-stat-label {
    color: #e0e0e0;
}

/* Nombres de items en modo oscuro */
.dark-mode .sig-item-name {
    color: #000000;
    font-weight: 500;
    word-break: break-word;
}
.dark-mode .sig-info h3 {
    color: #ffffff;
}
.dark-mode .sig-breadcrumb-item {
    color: #e0e0e0;
}

/* =====================
   Noticias - Modo Oscuro
====================== */

/* Estilo para las tarjetas de noticias */
.dark-mode .news-grid .post {
    background: #2d2d2d;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Estilo para el contenido de las noticias */
.dark-mode .news-grid .post-body {
    background: #2d2d2d;
    color: #fff;
}

/* Estilo para los títulos de las noticias */
.dark-mode .news-grid .entry-title a {
    color: #fff !important;
}

.dark-mode .news-grid .entry-title a:hover {
    color: #ff5722 !important;
}

/* Estilo para la meta información */
.dark-mode .news-grid .post-meta {
    color: #bbb;
}

.dark-mode .news-grid .post-meta span {
    color: #bbb;
}

.dark-mode .news-grid .post-meta i {
    color: #ff5722;
}

/* Estilo para el texto del contenido */
.dark-mode .news-grid .short-text {
    color: #e0e0e0;
}

/* Estilo para el footer de la noticia */
.dark-mode .news-grid .post-footer {
    border-top-color: #404040;
    background: #333;
}

/* Estilo para los botones en las noticias */
.dark-mode .news-grid .btn-primary {
    background-color: #b91f1f !important;
    color: #fff !important;
    border: none;
}

.dark-mode .news-grid .btn-primary:hover {
    background-color: #d32f2f !important;
    box-shadow: 0 0 10px rgba(255,87,34,0.3);
}

/* Estilo para los videos en las noticias */
.dark-mode .news-grid .post-video {
    background: #333;
}

.dark-mode .news-grid .post-video .embed-responsive {
    border: 1px solid #404040;
}

/* Efecto hover para las tarjetas */
.dark-mode .news-grid .post:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Estilo para las imágenes */
.dark-mode .news-grid .post-media img {
    filter: brightness(0.9);
}

/* Animaciones suaves */
.dark-mode .news-grid .post {
    transition: all 0.3s ease;
}


/* Título de la sección mapa en modo oscuro */
.dark-mode #mining-map .column-title,
.dark-mode #mining-map h3,
.dark-mode #mining-map h4,
.dark-mode #mining-map p,
.dark-mode #mining-map li,
.dark-mode #mining-map span {
  color: #fff !important;
}

/* Si Flourish inyecta etiquetas dentro del contenedor, intentar que hereden color */
.dark-mode #mining-map .flourish-embed,
.dark-mode #mining-map .flourish-embed * {
  color: #fff !important;
}


/* SIG - Dark mode fixes and coverage */
.dark-mode .sig-breadcrumb {
  border: 1px solid #404040;
}
.dark-mode .sig-breadcrumb-separator {
  color: #888;
}
.dark-mode .sig-nav-header {
  background: #5a0e0e;
  color: #ffffff;
}
.dark-mode .sig-search-box button {
  background: #0d2142;
  color: #ffffff;
  border: 1px solid #203a67;
}
.dark-mode .sig-search-box button:hover {
  background: #113683;
}
.dark-mode .sig-action-btn {
  background: #0d2142;
  color: #ffffff;
}
.dark-mode .sig-action-btn:hover {
  background: #14305c;
}
.dark-mode .sig-action-btn.download {
  background: #1e7e34;
}
.dark-mode .sig-action-btn.download:hover {
  background: #28a745;
}
.dark-mode .sig-item-details {
  color: #b3b3b3;
}
.dark-mode .sig-grid-name {
  color: #ffffff;
}
.dark-mode .sig-empty-state {
  color: #bbbbbb;
}
.dark-mode .sig-empty-state i {
  color: #777777;
}
.dark-mode .sig-empty-state h3 {
  color: #ffffff;
}
.dark-mode .sig-content-area {
  color: #e0e0e0;
}
.dark-mode .sig-nav-tree {
  background: #2d2d2d;
}

/* =====================
   Mission and Vision Text
====================== */

/* Texto de misión y visión en modo oscuro */
.dark-mode .simple-mission-vision-text {
  color: #ffffff !important;
}

/* Títulos de misión y visión en modo oscuro */
.dark-mode .simple-mission-vision-title {
  color: #ffffff !important;
}

/* Botón de administración en modo oscuro */
.dark-mode .sig-admin-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .sig-admin-btn:hover {
  background: #f0f0f0 !important;
  border-color: #f0f0f0 !important;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.4) !important;
  color: #000000 !important;
}


/* =====================
   Reclutamiento - Perfiles (Modo Oscuro)
====================== */
.dark-mode #recruit-profiles .card {
  background: #2d2d2d !important;
  color: #ffffff !important;
  border: 1px solid #404040 !important;
}
.dark-mode #recruit-profiles .card h4 {
  color: #ffffff !important;
}
.dark-mode #recruit-profiles .card ul li {
  color: #dddddd !important;
}
.dark-mode #recruit-profiles .card .mb-3 i {
  color: #e53935 !important;
}
.dark-mode #recruit-profiles .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.dark-mode .form-control:focus {
  background-color: #444;
  border-color: #ff9800;
}

/* =====================
   Text and Typography
====================== */

/* Estilo para los encabezados en modo oscuro */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: #fff;
}

/* Estilo para el título de las entradas */
.dark-mode .entry-title {
  color: #fff;
}

/* Estilo para las metainformaciones de la entrada */
.dark-mode .post-meta {
  color: #9a9a9a;
}

/* =========================================
   BOTÓN DE CAMBIO DE TEMA (ANIMACIÓN MEJORADA)
========================================== */

.theme-toggle {
  position: fixed;
  top: 22px; /* O ajusta según necesites */
  right: 20px; /* O ajusta según necesites */
  z-index: 9999;
}

.theme-toggle-checkbox {
  display: none; /* Oculta el checkbox real */
}

.theme-toggle-label {
  display: block; /* Cambiado a block para contener la manija absoluta */
  width: 60px;
  height: 30px;
  background-color: #444; /* Color base ligeramente más claro */
  border-radius: 50px;
  cursor: pointer;
  position: relative; /* Necesario para la manija absoluta */
  transition: background-color 0.4s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Modo claro: Color de fondo y resplandor */
body:not(.dark-mode) .theme-toggle-label {
  background-color: #1f7fdd; /* Azul claro para el día */
  box-shadow: 0 0 8px 2px rgba(10, 84, 102, 0.911); /* Resplandor amarillo */
}
/* Modo oscuro: Color de fondo */
body.dark-mode .theme-toggle-label {
   background-color: #3a3d4f; /* Azul oscuro para la noche */
   box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2); /* Resplandor blanco sutil */
}


.theme-toggle-handle {
  position: absolute;
  top: 2px;  /* Espacio desde arriba */
  left: 2px; /* Espacio inicial desde la izquierda */
  width: 26px; /* Ancho de la manija (altura - 2*top) */
  height: 26px;/* Alto de la manija (altura - 2*top) */
  background-color: #f0f0f0; /* Color de la manija */
  border-radius: 50%; /* Hace la manija circular */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición suave con rebote */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Asegura que los iconos no se salgan */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Estilo base de los iconos dentro de la manija */
.theme-toggle-icon {
  font-size: 16px; /* Tamaño ajustado */
  position: absolute; /* Para superponerlos */
  transition: opacity 0.3s ease, transform 0.4s ease; /* Transición suave */
}

/* Icono Sol (Modo Claro - inicial) */
.theme-toggle-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #bdb005; /* Color dorado */
}

/* Icono Luna (Modo Oscuro - inicial) */
.theme-toggle-dark {
  opacity: 0;
  transform: rotate(90deg) scale(0.8); /* Rotado y escalado inicialmente */
  color: #fffbfb; /* Color blanco/gris claro */
}


/* --- ESTADOS CUANDO EL CHECKBOX ESTÁ ACTIVADO (Modo Oscuro) --- */

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-handle {
  /* Mueve la manija a la derecha: ancho_label - ancho_manija - espacio_izquierdo */
  transform: translateX(calc(60px - 26px - 4px)); 
  background-color: #555; /* Manija más oscura en modo noche */
}

/* Oculta y rota el sol */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-light {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

/* Muestra y rota la luna */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}


/* =====================
   Comments Section
====================== */

/* Estilo para el área de comentarios */
.dark-mode .comments-area {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.dark-mode .comment-meta {
  color: #9a9a9a;
}

/* =====================
   Top Bar
====================== */
/* Estilo para el top bar en modo claro */
.top-bar {
  padding: 8px 0;
  background: #ebebeb; /* Fondo claro */
  position: relative;
}

/* Estilo para el top bar en modo oscuro */
.dark-mode .top-bar {
  background: #333 !important; /* Fondo oscuro en modo oscuro */
  color: #fff !important; /* Texto blanco en modo oscuro */
}


/* Mapa (Flourish) - Forzar texto descriptivo blanco en modo oscuro */
.dark-mode #mining-map .text-muted {
  color: #fff !important;
}

/* =====================
   Servicios
====================== */
/* Estilo para la sección de Servicios recientes en modo oscuro */
.dark-mode #project-area {
  background-color: #222 !important; /* Fondo oscuro para la sección de Servicios */
  color: #fff !important; /* Texto blanco para los Servicios */
}

/* Estilo para las tarjetas de Servicios */
.dark-mode .project-img-container {
  background-color: #333 !important; /* Fondo oscuro para las tarjetas de Servicios */
  color: #fff !important; /* Texto blanco dentro de las tarjetas */
}

/* Estilo para los títulos de Servicios */
.dark-mode .project-item-title a {
  color: #fff !important; /* Títulos en blanco en el modo oscuro */
}

/* Estilo para las categorías de Servicios */
.dark-mode .project-cat {
  color: #bbb !important; /* Texto gris claro para la categoría */
}

/* Estilo para los botones de los Servicios */
.dark-mode .general-btn .btn {
  background-color: #e53935 !important; /* Fondo de botones en rojo oscuro */
  color: #fff !important; /* Texto blanco en los botones */
  border: none !important;
}

.dark-mode .general-btn .btn:hover {
  background-color: #d32f2f !important; /* Fondo más claro cuando se pasa el ratón */
}

/* Estilo para los filtros de Servicios */
.dark-mode .shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco en el filtro activo */
}

/* Estilo para los filtros de Servicios cuando no están activos */
.dark-mode .shuffle-btn-group label {
  color: #fff !important; /* Texto blanco para los filtros */
  background-color: #444 !important; /* Fondo oscuro para los filtros */
}


/* Estilo para los filtros de Servicios en modo oscuro */
.dark-mode .shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco en el filtro activo */
  border-color: #e53935 !important; /* Borde rojo para el filtro activo */
}

/* Estilo para los filtros cuando no están activos */
.dark-mode .shuffle-btn-group label {
  color: #fff !important; /* Texto blanco para los filtros */
  background-color: #444 !important; /* Fondo oscuro para los filtros */
  border: 1px solid #555 !important; /* Borde gris oscuro */
}

/* Estilo para los filtros cuando están seleccionados */
.shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco */
  border-color: #e53935 !important; /* Borde rojo para el filtro activo */
}

/* Estilo para las etiquetas de los filtros */
.shuffle-btn-group label {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.shuffle-btn-group label:hover {
  background-color: #d32f2f !important; /* Cambio de color al pasar el ratón */
}

/* =====================
   SISTEMA INTEGRADO DE GESTIÓN - MODO OSCURO
====================== */

/* Header SIG en modo oscuro */
.dark-mode .sig-header {
    background: linear-gradient(135deg, #690505 0%, #0a2142 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Contenedores en modo oscuro */
.dark-mode .sig-breadcrumb,
.dark-mode .sig-search-container,
.dark-mode .sig-navigation-panel,
.dark-mode .sig-content-panel,
.dark-mode .sig-info {
    background: #2d2d2d;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Elementos de navegación en modo oscuro */
.dark-mode .sig-nav-item {
    color: #000000;
    border-bottom-color: #404040;
}

.dark-mode .sig-nav-item:hover {
    background: #363636;
    color: #fff;
}

.dark-mode .sig-nav-item.active {
    background: #0d2142;
    color: #fff;
}

/* Items y carpetas en modo oscuro */
.dark-mode .sig-folder-item,
.dark-mode .sig-file-item,
.dark-mode .sig-grid-item {
    background: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

.dark-mode .sig-folder-item:hover,
.dark-mode .sig-file-item:hover,
.dark-mode .sig-grid-item:hover {
    background: #363636;
    border-color: #0d2142;
}

/* Encabezados y títulos en modo oscuro */
.dark-mode .sig-content-header {
    background: #363636;
    border-bottom-color: #404040;
}

.dark-mode .sig-content-title {
    color: #fff;
}

/* Botones en modo oscuro */
.dark-mode .sig-view-btn {
    background: #404040;
    color: #e0e0e0;
}

.dark-mode .sig-view-btn.active {
    background: #0d2142;
    color: #fff;
}

/* Campos de búsqueda en modo oscuro */
.dark-mode .sig-search-box input {
    background: #363636;
    border-color: #404040;
    color: #fff;
}

.dark-mode .sig-search-box input::placeholder {
    color: #808080;
}

/* Estadísticas en modo oscuro */
.dark-mode .sig-stat-item {
    background: #363636;
}

.dark-mode .sig-stat-number {
    color: #ffffff;
}

.dark-mode .sig-stat-label {
    color: #e0e0e0;
}

/* Nombres de items en modo oscuro */
.dark-mode .sig-item-name {
    color: #000000;
    font-weight: 500;
    word-break: break-word;
}
.dark-mode .sig-info h3 {
    color: #ffffff;
}
.dark-mode .sig-breadcrumb-item {
    color: #e0e0e0;
}

/* =====================
   Noticias - Modo Oscuro
====================== */

/* Estilo para las tarjetas de noticias */
.dark-mode .news-grid .post {
    background: #2d2d2d;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Estilo para el contenido de las noticias */
.dark-mode .news-grid .post-body {
    background: #2d2d2d;
    color: #fff;
}

/* Estilo para los títulos de las noticias */
.dark-mode .news-grid .entry-title a {
    color: #fff !important;
}

.dark-mode .news-grid .entry-title a:hover {
    color: #ff5722 !important;
}

/* Estilo para la meta información */
.dark-mode .news-grid .post-meta {
    color: #bbb;
}

.dark-mode .news-grid .post-meta span {
    color: #bbb;
}

.dark-mode .news-grid .post-meta i {
    color: #ff5722;
}

/* Estilo para el texto del contenido */
.dark-mode .news-grid .short-text {
    color: #e0e0e0;
}

/* Estilo para el footer de la noticia */
.dark-mode .news-grid .post-footer {
    border-top-color: #404040;
    background: #333;
}

/* Estilo para los botones en las noticias */
.dark-mode .news-grid .btn-primary {
    background-color: #b91f1f !important;
    color: #fff !important;
    border: none;
}

.dark-mode .news-grid .btn-primary:hover {
    background-color: #d32f2f !important;
    box-shadow: 0 0 10px rgba(255,87,34,0.3);
}

/* Estilo para los videos en las noticias */
.dark-mode .news-grid .post-video {
    background: #333;
}

.dark-mode .news-grid .post-video .embed-responsive {
    border: 1px solid #404040;
}

/* Efecto hover para las tarjetas */
.dark-mode .news-grid .post:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Estilo para las imágenes */
.dark-mode .news-grid .post-media img {
    filter: brightness(0.9);
}

/* Animaciones suaves */
.dark-mode .news-grid .post {
    transition: all 0.3s ease;
}


/* Título de la sección mapa en modo oscuro */
.dark-mode #mining-map .column-title,
.dark-mode #mining-map h3,
.dark-mode #mining-map h4,
.dark-mode #mining-map p,
.dark-mode #mining-map li,
.dark-mode #mining-map span {
  color: #fff !important;
}

/* Si Flourish inyecta etiquetas dentro del contenedor, intentar que hereden color */
.dark-mode #mining-map .flourish-embed,
.dark-mode #mining-map .flourish-embed * {
  color: #fff !important;
}


/* SIG - Dark mode fixes and coverage */
.dark-mode .sig-breadcrumb {
  border: 1px solid #404040;
}
.dark-mode .sig-breadcrumb-separator {
  color: #888;
}
.dark-mode .sig-nav-header {
  background: #5a0e0e;
  color: #ffffff;
}
.dark-mode .sig-search-box button {
  background: #0d2142;
  color: #ffffff;
  border: 1px solid #203a67;
}
.dark-mode .sig-search-box button:hover {
  background: #113683;
}
.dark-mode .sig-action-btn {
  background: #0d2142;
  color: #ffffff;
}
.dark-mode .sig-action-btn:hover {
  background: #14305c;
}
.dark-mode .sig-action-btn.download {
  background: #1e7e34;
}
.dark-mode .sig-action-btn.download:hover {
  background: #28a745;
}
.dark-mode .sig-item-details {
  color: #b3b3b3;
}
.dark-mode .sig-grid-name {
  color: #ffffff;
}
.dark-mode .sig-empty-state {
  color: #bbbbbb;
}
.dark-mode .sig-empty-state i {
  color: #777777;
}
.dark-mode .sig-empty-state h3 {
  color: #ffffff;
}
.dark-mode .sig-content-area {
  color: #e0e0e0;
}
.dark-mode .sig-nav-tree {
  background: #2d2d2d;
}

/* =====================
   Mission and Vision Text
====================== */

/* Texto de misión y visión en modo oscuro */
.dark-mode .simple-mission-vision-text {
  color: #ffffff !important;
}

/* Títulos de misión y visión en modo oscuro */
.dark-mode .simple-mission-vision-title {
  color: #ffffff !important;
}

/* Botón de administración en modo oscuro */
.dark-mode .sig-admin-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .sig-admin-btn:hover {
  background: #f0f0f0 !important;
  border-color: #f0f0f0 !important;
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.4) !important;
  color: #000000 !important;
}


/* =====================
   Reclutamiento - cajas de descripción y WhatsApp (Modo Oscuro) */
.dark-mode .recruit-box,
.dark-mode .recruit-whatsapp,
.dark-mode .recruit-section {
  background: rgba(45,45,45,0.75) !important; /* opacidad en oscuro */
  border-color: #555 !important;
  color: #fff !important;
}
.dark-mode .recruit-box h3,
.dark-mode .recruit-whatsapp h5,
.dark-mode .recruit-section h3,
.dark-mode .recruit-section h5,
.dark-mode #recruit-profiles h4 { color: #fff !important; }
.dark-mode .recruit-box p,
.dark-mode .recruit-box li,
.dark-mode .recruit-section p,
.dark-mode .recruit-section li,
.dark-mode .recruit-whatsapp a { color: #fff !important; }
.dark-mode .recruit-whatsapp .btn,
.dark-mode .recruit-section .btn-primary {
  background: #b91f1f !important;
  border: 1px solid #ff6a6a22 !important;
  color: #fff !important;
}
.dark-mode .recruit-whatsapp .btn:hover,
.dark-mode .recruit-section .btn-primary:hover { background: #111 !important; }

/* Asegurar visibilidad de iconos en cards */
.dark-mode #recruit-profiles i,
.dark-mode .recruit-whatsapp i,
.dark-mode .recruit-section i { color: #ffffff !important; }

/* Iconos de verificación en la sección de reclutamiento */
.dark-mode .recruit-section .fa-check-circle { color: #4caf50 !important; }

/* Card base con opacidad y borde en oscuro */
.dark-mode #recruit-profiles .card {
  background: rgba(45,45,45,0.75) !important; /* opacidad */
  border: 1px solid #555 !important;
}
.dark-mode #recruit-profiles .card h4 {
  color: #ffffff !important;
}
.dark-mode #recruit-profiles .card ul li {
  color: #dddddd !important;
}
.dark-mode #recruit-profiles .card .mb-3 i {
  color: #e53935 !important;
}
.dark-mode #recruit-profiles .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.dark-mode .form-control:focus {
  background-color: #444;
  border-color: #ff9800;
}

/* Ajustes adicionales de reclutamiento (Modo Oscuro) */
.dark-mode .recruit-whatsapp .fa-whatsapp { color: #25D366 !important; }
.dark-mode #recruit-profiles .card p,
.dark-mode #recruit-profiles .card .text-muted { color: #e6e6e6 !important; }
.dark-mode #recruit-profiles .card a { color: #ffd180 !important; }

/* =====================
   Text and Typography
====================== */

/* Estilo para los encabezados en modo oscuro */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: #fff;
}

/* Estilo para el título de las entradas */
.dark-mode .entry-title {
  color: #fff;
}

/* Estilo para las metainformaciones de la entrada */
.dark-mode .post-meta {
  color: #9a9a9a;
}

/* =========================================
   BOTÓN DE CAMBIO DE TEMA (ANIMACIÓN MEJORADA)
========================================== */

.theme-toggle {
  position: fixed;
  top: 22px; /* O ajusta según necesites */
  right: 20px; /* O ajusta según necesites */
  z-index: 9999;
}

.theme-toggle-checkbox {
  display: none; /* Oculta el checkbox real */
}

.theme-toggle-label {
  display: block; /* Cambiado a block para contener la manija absoluta */
  width: 60px;
  height: 30px;
  background-color: #444; /* Color base ligeramente más claro */
  border-radius: 50px;
  cursor: pointer;
  position: relative; /* Necesario para la manija absoluta */
  transition: background-color 0.4s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

/* Modo claro: Color de fondo y resplandor */
body:not(.dark-mode) .theme-toggle-label {
  background-color: #1f7fdd; /* Azul claro para el día */
  box-shadow: 0 0 8px 2px rgba(10, 84, 102, 0.911); /* Resplandor amarillo */
}
/* Modo oscuro: Color de fondo */
body.dark-mode .theme-toggle-label {
   background-color: #3a3d4f; /* Azul oscuro para la noche */
   box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2); /* Resplandor blanco sutil */
}


.theme-toggle-handle {
  position: absolute;
  top: 2px;  /* Espacio desde arriba */
  left: 2px; /* Espacio inicial desde la izquierda */
  width: 26px; /* Ancho de la manija (altura - 2*top) */
  height: 26px;/* Alto de la manija (altura - 2*top) */
  background-color: #f0f0f0; /* Color de la manija */
  border-radius: 50%; /* Hace la manija circular */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Transición suave con rebote */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Asegura que los iconos no se salgan */
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Estilo base de los iconos dentro de la manija */
.theme-toggle-icon {
  font-size: 16px; /* Tamaño ajustado */
  position: absolute; /* Para superponerlos */
  transition: opacity 0.3s ease, transform 0.4s ease; /* Transición suave */
}

/* Icono Sol (Modo Claro - inicial) */
.theme-toggle-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #bdb005; /* Color dorado */
}

/* Icono Luna (Modo Oscuro - inicial) */
.theme-toggle-dark {
  opacity: 0;
  transform: rotate(90deg) scale(0.8); /* Rotado y escalado inicialmente */
  color: #fffbfb; /* Color blanco/gris claro */
}


/* --- ESTADOS CUANDO EL CHECKBOX ESTÁ ACTIVADO (Modo Oscuro) --- */

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-handle {
  /* Mueve la manija a la derecha: ancho_label - ancho_manija - espacio_izquierdo */
  transform: translateX(calc(60px - 26px - 4px)); 
  background-color: #555; /* Manija más oscura en modo noche */
}

/* Oculta y rota el sol */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-light {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

/* Muestra y rota la luna */
.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-dark {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}


/* =====================
   Comments Section
====================== */

/* Estilo para el área de comentarios */
.dark-mode .comments-area {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.dark-mode .comment-meta {
  color: #9a9a9a;
}

/* =====================
   Top Bar
====================== */
/* Estilo para el top bar en modo claro */
.top-bar {
  padding: 8px 0;
  background: #ebebeb; /* Fondo claro */
  position: relative;
}

/* Estilo para el top bar en modo oscuro */
.dark-mode .top-bar {
  background: #1d232b !important; /* Fondo oscuro en modo oscuro */
  color: #fff !important; /* Texto blanco en modo oscuro */
}


/* Mapa (Flourish) - Forzar texto descriptivo blanco en modo oscuro */
.dark-mode #mining-map .text-muted {
  color: #fff !important;
}

/* =====================
   Servicios
====================== */
/* Estilo para la sección de Servicios recientes en modo oscuro */
.dark-mode #project-area {
  background-color: #222 !important; /* Fondo oscuro para la sección de Servicios */
  color: #fff !important; /* Texto blanco para los Servicios */
}

/* Estilo para las tarjetas de Servicios */
.dark-mode .project-img-container {
  background-color: #333 !important; /* Fondo oscuro para las tarjetas de Servicios */
  color: #fff !important; /* Texto blanco dentro de las tarjetas */
}

/* Estilo para los títulos de Servicios */
.dark-mode .project-item-title a {
  color: #fff !important; /* Títulos en blanco en el modo oscuro */
}

/* Estilo para las categorías de Servicios */
.dark-mode .project-cat {
  color: #bbb !important; /* Texto gris claro para la categoría */
}

/* Estilo para los botones de los Servicios */
.dark-mode .general-btn .btn {
  background-color: #e53935 !important; /* Fondo de botones en rojo oscuro */
  color: #fff !important; /* Texto blanco en los botones */
  border: none !important;
}

.dark-mode .general-btn .btn:hover {
  background-color: #d32f2f !important; /* Fondo más claro cuando se pasa el ratón */
}

/* Estilo para los filtros de Servicios */
.dark-mode .shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco en el filtro activo */
}

/* Estilo para los filtros de Servicios cuando no están activos */
.dark-mode .shuffle-btn-group label {
  color: #fff !important; /* Texto blanco para los filtros */
  background-color: #444 !important; /* Fondo oscuro para los filtros */
}


/* Estilo para los filtros de Servicios en modo oscuro */
.dark-mode .shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco en el filtro activo */
  border-color: #e53935 !important; /* Borde rojo para el filtro activo */
}

/* Estilo para los filtros cuando no están activos */
.dark-mode .shuffle-btn-group label {
  color: #fff !important; /* Texto blanco para los filtros */
  background-color: #444 !important; /* Fondo oscuro para los filtros */
  border: 1px solid #555 !important; /* Borde gris oscuro */
}

/* Estilo para los filtros cuando están seleccionados */
.shuffle-btn-group input[type="radio"]:checked + label {
  background-color: #e53935 !important; /* Fondo rojo para el filtro activo */
  color: #fff !important; /* Texto blanco */
  border-color: #e53935 !important; /* Borde rojo para el filtro activo */
}

/* Estilo para las etiquetas de los filtros */
.shuffle-btn-group label {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.shuffle-btn-group label:hover {
  background-color: #d32f2f !important; /* Cambio de color al pasar el ratón */
}

/* =====================
   SISTEMA INTEGRADO DE GESTIÓN - MODO OSCURO
====================== */

/* Header SIG en modo oscuro */
.dark-mode .sig-header {
    background: linear-gradient(135deg, #690505 0%, #0a2142 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Contenedores en modo oscuro */
.dark-mode .sig-breadcrumb,
.dark-mode .sig-search-container,
.dark-mode .sig-navigation-panel,
.dark-mode .sig-content-panel,
.dark-mode .sig-info {
    background: #2d2d2d;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Elementos de navegación en modo oscuro */
.dark-mode .sig-nav-item {
    color: #000000;
    border-bottom-color: #404040;
}

.dark-mode .sig-nav-item:hover {
    background: #363636;
    color: #fff;
}

.dark-mode .sig-nav-item.active {
    background: #0d2142;
    color: #fff;
}

/* Items