/* 1. La fuente pesada para SEGGES (Peso 900) */
@font-face {
    font-family: 'Barlow Condensed';
    /* Cambia la extensión a .ttf si decides no convertirlas */
    src: url('../fonts/BarlowCondensed-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* 2. La fuente media para la bajada (Peso 600) */
@font-face {
    font-family: 'Barlow Condensed';
    /* Cambia la extensión a .ttf si decides no convertirlas */
    src: url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html {
  width: 100%;
  height: 100%;
  /* Esto asegura que el espacio del scroll siempre exista visualmente,
     evitando el salto cuando el modal bloquea el scroll. */
  scrollbar-gutter: stable;
}

/* ==========================================================================
   MODO OSCURO: LOADER DE SALIDA / INGRESO (Alta transparencia)
   ========================================================================== */
body.dark-mode .loader-container {
  /* Bajamos la fuerza del negro al 20% para que las ondas y el fondo dominen */
  background-color: rgba(18, 18, 18, 0.2) !important;
}

/* =========================================
   2. BODY: NEUTRALIZAR BOOTSTRAP
   ========================================= */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
  background-color: #f4f6f9;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ESTILO BÁSICO MODO OSCURO */
body.dark-mode {
  /* Aseguramos que el fondo base de la página también sea oscuro */
  background-color: #121212 !important;
}


/* ==========================================================
   SISTEMA MAESTRO DE LOADERS (GLOBAL Y LOCAL)
   ========================================================== */

/* 1. ANIMACIONES COMPARTIDAS (El motor gráfico) */
@keyframes spin-master {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-text {
  0% {
    opacity: 0.5;
    transform: scale(0.99);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.5;
    transform: scale(0.99);
  }
}

/* ==========================================================
   1. CONTENEDOR DEL LOADER GLOBAL (Glassmorphism Elegante)
   ========================================================== */
.loader-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;

  /* MAGIA 1: Bajamos el blanco a solo un 30% de fuerza. 
       Esto permite que los colores de las ondas brillen a través de la capa. */
  background-color: rgba(255, 255, 255, 0.3) !important;

  /* MAGIA 2: Aumentamos el desenfoque a 10px. 
       Así la tarjeta de login y las ondas se ven borrosas y no compiten con el texto "INGRESANDO" */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  z-index: 99999 !important;
}

.loader-hidden {
  display: none !important;
}


/* ==========================================================================
   MAGIA TELETRANSPORTACIÓN (Botón Atrás en Navbar)
   ========================================================================== */
.btn-teleport {
    width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primario);
    background: transparent;
}

/* Esta es la clase que JavaScript encenderá */
.btn-teleport.visible {
    width: 40px;
    opacity: 1;
    margin-right: 0.5rem !important; /* Espacio para separar del siguiente botón */
}

/* ==========================================================
   SPINNER Y TEXTO (Estilo Premium / Executive)
   ========================================================== */

/* Spinner Moderno y Estilizado */
.loader-container .loader-spinner {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--color-primario) 15%, transparent) !important;
  border-top: 4px solid var(--color-primario) !important;
  animation: spin-master 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Texto Tipografía Ejecutiva */
.loader-container .loader-text {
  margin-top: 25px;
  margin-bottom: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 6px !important;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to right, color-mix(in srgb, var(--color-primario) 85%, black), var(--color-primario)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: pulse-text 2s ease-in-out infinite;
}

/* ==========================================================
   3. LOADER LOCAL (Cambio de Pestañas en la Plataforma)
   ========================================================== */
.loader-overlay {
  position: absolute;
  top: 70px;
  bottom: 60px;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* Spinner Pequeño y Rápido */
.loader-overlay .loader-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #f1f3f5;
  border-top-color: var(--primary, #009da5);
  animation: spin-master 0.8s linear infinite;
}

/* =======================================================
   ESTILOS PREMIUM PARA LISTAS (CHARLAS Y PORTAFOLIO)
   Arquitectura Unificada (Diseño, Hover Sedoso y Cascada)
   ======================================================= */

/* 1. TÍTULO PRINCIPAL DE LA TARJETA */

.titulo-lista-portafolio {
    flex-grow: 1;
    padding: 0;
    font-weight: 500;
    color: var(--texto-principal);
    min-width: 0; /*    EL SECRETO: Permite que el text-truncate enccoja el contenedor */
}

/* 2. ESTRUCTURA BASE Y TRANSICIÓN DE REGRESO SEDOSO */
.list-item-moderno {
    background-color: var(--borde-suave); 
    color: var(--texto-principal);       
    border: 1px solid var(--borde-suave); 
    min-height: 50px;
    padding: 12px 16px; /*    Mejoramos el padding para celular */
    gap: 12px;          /*    Mantiene a raya los botones */
    margin-top: 8px;
    border-radius: var(--r-sm);          
    cursor: pointer;
    display: flex;
    /* align-items y justify-content los controlaremos desde el HTML para que sea responsivo */
    
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                var(--transicion-tema);
}

/* 3. FÍSICA DE HOVER SEDOSO (Alta Costura) */
.list-item-moderno:hover {
    background-color: var(--bg-input);   /*    Contraste muy sutil al pasar el cursor (sirve para ambos temas) */
    border-color: var(--borde-fuerte);   /*    Refuerza ligeramente el borde */
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);        /*    Sombra semántica de tu sistema */
}

/*    CONTROL DE TEXTO MULTILÍNEA PARA STEPPERS */
.contenedor-stepper-seguro .step-item {
    flex: 1; /* Distribuye el espacio en partes iguales */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenedor-stepper-seguro .step-title {
    white-space: normal !important; /* Anula el nowrap nativo */
    text-align: center;
    line-height: 1.2;
    font-size: 0.85rem;
    max-width: 120px; /* Obliga al salto de línea parejo en móviles */
    margin-top: 8px;
    color: var(--texto-principal);
}

/* Ajuste fino para pantallas muy pequeñas (teléfonos verticales) */
@media (max-width: 576px) {
    .contenedor-stepper-seguro .step-title {
        font-size: 0.85rem;
        max-width: 100px; 
    }
}
/* =======================================================
   MOTOR DE ANIMACIÓN DE CASCADA PREMIUM
   ======================================================= */

/* 4. Física del movimiento */
@keyframes aparecerCascadaPremium {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 5. Gatillo de la animación */
.item-cascada-moderno {
    /* EL SECRETO: 'backwards' en lugar de 'forwards'. 
       Mantiene la opacidad en 0 durante el delay, hace la entrada y luego
       devuelve el control total a la clase .list-item-moderno para que el hover funcione.
    */
    animation: aparecerCascadaPremium 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    will-change: transform, opacity;
}


/* =======================================================
   SWEETALERT2 - DISEÑO EJECUTIVO / PREMIUM
   ======================================================= */

/* 1. El Contenedor (La ventana principal) */
.swal-moderno.swal2-popup {
  border-radius: 24px !important;
  /* Curva ejecutiva, no burbuja */
  overflow: hidden !important;
  /* MAGIA: Corta cualquier elemento que sobresalga de las curvas */
  padding: 0rem 2rem 2rem 2rem !important;
  width: 95% !important;
  max-width: 420px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
  /* Sombra profunda premium */
  font-family: inherit !important;
}

/* 2. Títulos y Textos */
.swal-moderno .swal2-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #4c4e56 !important;
  /* Gris oscuro fuerte */
  margin-bottom: 0.5rem !important;
}

.swal-moderno .swal2-html-container {
  color: #8898aa !important;
  /* Gris texto sutil */
  font-size: 0.95rem !important;
  padding: 0.5rem 0 1.5rem 0 !important;
}

/* 3. El Contenedor de Botones (Fila forzada) */
.swal-moderno .swal2-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

/* Obliga a los botones de la alerta a tener exactamente el mismo ancho */
.swal-moderno .swal2-actions button {
  min-width: 130px !important;
  /* Ajusta este valor según te guste */
  flex: 1 !important;
  /* Se reparten el espacio 50/50 */
}

/* 4. Botón Confirmar (Gradiente Premium Turquesa) */
.swal-moderno .swal-btn-confirmar,
.swal-moderno .swal2-confirm {
  background: linear-gradient(to right, color-mix(in srgb, var(--color-primario) 85%, black), var(--color-primario)) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--color-primario) 25%, transparent) !important;
  transition: all 0.2s ease !important;
}

.swal-moderno .swal-btn-confirmar:hover,
.swal-moderno .swal2-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 157, 165, 0.4) !important;
}

.swal-moderno .swal-btn-confirmar:active,
.swal-moderno .swal2-confirm:active {
  transform: translateY(1px) scale(0.98);
}

/* 5. Botón Cancelar (Gris Suave Moderno) */
.swal-moderno .swal-btn-cancelar,
.swal-moderno .swal2-cancel {
  background-color: #c8cbcf !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.swal-moderno .swal-btn-cancelar:hover,
.swal-moderno .swal2-cancel:hover {
  background-color: #ced4da !important;
}

/* Foco de accesibilidad */
.swal-moderno .swal2-confirm:focus,
.swal-moderno .swal2-cancel:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(0, 157, 165, 0.2) !important;
}

/* ==========================================================================
   BOTÓN "REEMPLAZAR TODO" (Deny Button)
   ========================================================================== */
.swal-moderno .swal-btn-denegar,
.swal-moderno .swal2-deny {
  /* Usa variable secundaria o cae por defecto al violeta premium que definimos */
  background: linear-gradient(to right, color-mix(in srgb, var(--color-secundario, #6f42c1) 85%, black), var(--color-secundario, #6f42c1)) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--color-secundario, #6f42c1) 25%, transparent) !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  /* Para que flexbox maneje el espacio (gap) */
}

.swal-moderno .swal-btn-denegar:hover,
.swal-moderno .swal2-deny:hover {
  transform: translateY(-2px);
  /* Sombra más pronunciada al hacer hover */
  box-shadow: 0 6px 15px color-mix(in srgb, var(--color-secundario, #6f42c1) 40%, transparent) !important;
}

.swal-moderno .swal-btn-denegar:active,
.swal-moderno .swal2-deny:active {
  transform: translateY(1px) scale(0.98);
}

/* ==========================================================================
   ANTI-PARPADEO (FOUC) PARA LA LÍNEA DE TIEMPO
   ========================================================================== */
.contenedor-stepper-seguro {
    opacity: 0;
    visibility: hidden;
    /* Una transición muy suave de 0.3 segundos */
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}

/* Esta clase la inyectaremos con JS cuando todo esté renderizado */
.contenedor-stepper-seguro.renderizado-listo {
    opacity: 1;
    visibility: visible;
}

/* =======================================================
   6. RESPONSIVE MÓVIL (Mantiene botones en fila)
   ======================================================= */
@media (max-width: 380px) {
  .swal-moderno.swal2-popup {
    padding: 1.5rem 1rem !important;
  }

  .swal-moderno .swal2-actions {
    gap: 8px !important;
  }

  .swal-moderno .swal2-actions button {
    flex: 1 !important;
    /* Crecen parejo */
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 4px !important;
    font-size: 0.85rem !important;
  }
}

/* =======================================================
   7. BARRA DE PROGRESO INFERIOR (Timer)
   ======================================================= */
.swal-moderno .swal2-timer-progress-bar {
  background-color: var(--primary, #009da5) !important;
  /* Color corporativo turquesa */
  height: 4px !important;
  /* Más fina para verse más ejecutiva */
  opacity: 0.8 !important;
}

/* =======================================================
   BOTÓN PELIGRO / DESTRUCTIVO (Para SweetAlert)
   ======================================================= */
.swal-moderno .swal-btn-peligro,
.swal-moderno .swal2-confirm.swal-btn-peligro {
  background: linear-gradient(to right, #b91d2b, #dc3545) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.25) !important;
  transition: all 0.2s ease !important;
}

.swal-moderno .swal-btn-peligro:hover,
.swal-moderno .swal2-confirm.swal-btn-peligro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4) !important;
}

/* =======================================================
   MODO OSCURO: BADGES DE TABLAS (Firmado / Pendiente)
   ======================================================= */
/* Cuando el modo oscuro está activo, volvemos los fondos semi-transparentes */
body.dark-mode .badge-activo {
  background-color: color-mix(in srgb, var(--color-primario) 15%, transparent) !important;
  color: var(--color-primario) !important;
}

body.dark-mode .badge-warning {
  background-color: rgba(241, 196, 15, 0.15) !important;
  color: #f1c40f !important;
}

/* =========================================================
   TARJETAS DE PAPELERA - EFECTO ALTA COSTURA
   ========================================================= */
.card-papelera-hover {
    transition: all 0.3s ease;
    border: 1px solid #f1f3f5;
    border-left: 4px solid #adb5bd; /* Borde gris inactivo */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.card-papelera-hover:hover {
    transform: translateY(-2px);
    border-left-color: var(--color-primario); /* Se enciende con tu color corporativo */
    box-shadow: 0 6px 15px rgba(0, 157, 165, 0.12) !important; /* Resplandor suave turquesa */
}


/* =======================================================
   TOAST MODERNO (Alta Costura - Versión Blindada)
   ======================================================= */
/* =========================================================
   ESTILOS GLOBALES PARA TOAST (PÍLDORA FLOTANTE)
   ========================================================= */
.toast-moderno.swal2-popup {
  z-index: 10000 !important; /* Crucial: Salta sobre cualquier modal */
  border-radius: 50px !important;
  background: var(--bg-card, #ffffff) !important; /* Preparado para modo oscuro si lo tienes */
  padding: 0.6rem 1.2rem !important; 
  
  /* ALTA COSTURA: Sombras y bordes transparentes usando tu color primario dinámico */
  box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--color-primario) 20%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-primario) 15%, transparent) !important;
  
  display: flex !important;
  align-items: center !important;
  max-width: 350px !important;
  width: auto !important;
}

/* El Título del Toast */
.toast-moderno .swal2-title {
  color: var(--color-texto, #34495e) !important; /* Variable de texto general */
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding-left: 10px !important;
  display: flex !important;
  align-items: center !important;
}

/* Ajuste de iconos (Success, Info, etc.) para que queden alineados */
.toast-moderno .swal2-icon {
  margin: 0 !important;
  zoom: 0.5 !important; /* Reducimos el icono para que quepa en la píldora */
}

/* Colores Dinámicos para el ícono de Éxito (Success) */
.toast-moderno .swal2-icon.swal2-success {
  border-color: var(--color-primario) !important;
}
.toast-moderno .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--color-primario) !important;
}
.toast-moderno .swal2-icon.swal2-success .swal2-success-ring {
  /* Anillo exterior con 20% de opacidad basado en el primario */
  border: .2em solid color-mix(in srgb, var(--color-primario) 20%, transparent) !important;
}

/* Barra de progreso en la base */
.toast-moderno .swal2-timer-progress-bar {
  background: var(--color-primario) !important;
  height: 3px !important;
  border-radius: 0 0 50px 50px !important;
}


.firma-status-texto {
  color: #8B0000;
  /* DarkRed (Burdeo oscuro) */
  font-weight: bold;
  font-size: 0.7em;
  /* Un poco más pequeño */
  transition: color 0.3s ease;
  /* Transición suave si cambias el color */
}


/* =============================================
   ESTILOS PARA UTILIDADES
   ============================================= */
.separador-seccion {
  padding: 8px;
  border-radius: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 0.9em;
  color: #ffffff;
}


/* =============================================
   ESTRUCTURA PRINCIPAL (LOGIN/RECUPERAR)
   ============================================= */

.todoelalto {
  /* ANTES TENÍAS: min-height: 100dvh; */

  /* SOLUCIÓN "ANTI-SALTO" DE TECLADO:
       Usamos la función max(). Le dice al navegador:
       "Usa el 100% de la altura dinámica (100dvh), PERO si esa altura
       baja de 650px (porque salió el teclado), quédate en 650px fijo." */
  min-height: max(100dvh, 650px);

  /* Configuración Flexbox (Mantenemos esto igual) */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  overflow-x: hidden;
  /* Evita scroll lateral */

  /* IMPORTANTE: Agregamos un pequeño padding vertical de seguridad
       por si la pantalla es muy pequeña en horizontal (apaisado) */
  padding-top: 5px;
  padding-bottom: 30px;

  background: transparent;
}


/* =============================================
   PARCHES GLOBALES (DARK MODE Y SCROLL)
   ============================================= */

/* Fondo oscuro para las tarjetas base */
body.dark-mode .card {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}


/* AQUÍ ESTÁ LA CORRECCIÓN CLAVE 
   Bootstrap intenta agregar padding-right inline. 
   Como ya tenemos scrollbar-gutter, forzamos a 0 ese padding.
*/
body.modal-open,
body.swal2-shown {
  padding-right: 0 !important;
  overflow: hidden !important;
}

body.swal2-shown {
  height: 100% !important;
}

/* IGUAL PARA LA BARRA FIJA
   Si Bootstrap le agrega padding a tu navbar, también lo quitamos 
   porque el 'gutter' del HTML ya maneja el espacio visual.
*/
.navbar.fixed-top,
.header-fijo {
  padding-right: 0 !important;
  width: 100%;
}

/* =============================================
   3. UTILIDADES EXTRAS (Tablas e Inputs)
   ============================================= */
.lineas td {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}

.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* ==========================================================================
   BARRA SUPERIOR (NAVBAR) - COMPATIBILIDAD DARK MODE Y COLORES DINÁMICOS
   ========================================================================== */
.navbar-moderna {
  /* LA MAGIA: Forzamos el blanco en modo claro para ganarle a la plantilla */
  background-color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  min-height: 65px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 1. EL LOGO PERFECTO (Solución al corte) */
.logo-avatar-nav {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-primario) 20%, transparent);
  background-color: #fff;
}

/* 2. BOTONES DEL NAVBAR (Hamburguesa y Admin) */
.btn-menu-nav,
.btn-admin-nav {
  background-color: color-mix(in srgb, var(--color-primario) 10%, transparent) !important;
  color: var(--color-primario) !important;
  transition: all 0.2s ease;
}

.btn-menu-nav:hover,
.btn-admin-nav:hover {
  background-color: var(--color-primario) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.icono-dropdown-nav {
  color: #adb5bd;
}

/* 3. MENÚ DESPLEGABLE (Dropdown Blindado) */
.dropdown-menu-moderno {
  background-color: #ffffff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  /* Limpiamos para que el header toque los bordes */
  overflow: hidden !important;
  z-index: 1060 !important;
}

.dropdown-menu-moderno .dropdown-header {
  background-color: #f8f9fa !important;
  padding: 12px 20px !important;
  color: #4c4e56 !important;
  letter-spacing: 0.5px;
}

.dropdown-menu-moderno .dropdown-item {
  padding: 10px 15px !important;
  color: #4c4e56 !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-menu-moderno .dropdown-item svg {
  color: #8898aa !important;
  transition: color 0.2s ease;
}

/* Hover del menú desplegable: Hereda color corporativo */
.dropdown-menu-moderno .dropdown-item:hover {
  background-color: color-mix(in srgb, var(--color-primario) 8%, transparent) !important;
}

/* El texto cambia a corporativo (Excepto el de cerrar sesión que sigue rojo) */
.dropdown-menu-moderno .dropdown-item:hover:not(.text-danger) {
  color: var(--color-primario) !important;
}

.dropdown-menu-moderno .dropdown-item:hover svg:not(.text-danger) {
  color: var(--color-primario) !important;
}

/* =========================================
   MODO OSCURO: NAVBAR Y DROPDOWN
   ========================================= */
body.dark-mode .navbar-moderna {
  background-color: #1e1e1e !important;
  border-bottom-color: #333333 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .logo-avatar-nav {
  border-color: var(--color-primario) !important;
  background-color: #2a2a2a !important;
}

body.dark-mode .dropdown-menu-moderno {
  background-color: #2a2a2a !important;
  border-color: #333333 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .dropdown-menu-moderno .dropdown-header {
  background-color: #1e1e1e !important;
  /* Cabecera oscura */
  color: #8898aa !important;
}

body.dark-mode .dropdown-menu-moderno .dropdown-item {
  color: #e0e0e0 !important;
  background-color: transparent !important;
}

body.dark-mode .dropdown-menu-moderno .dropdown-item:hover {
  background-color: color-mix(in srgb, var(--color-primario) 15%, transparent) !important;
}

body.dark-mode .dropdown-menu-moderno .dropdown-item:hover:not(.text-danger) {
  color: var(--color-primario) !important;
}

body.dark-mode .dropdown-divider {
  border-top-color: #444444 !important;
}

/* ==========================================================
   SISTEMA DE MODALES (DISEÑO EJECUTIVO / PREMIUM)
   ========================================================== */

/* 1. Contenedor Principal (La Tarjeta) */
.modal-moderno .modal-content {
  border-radius: 20px !important;
  /* Bordes generosos */
  border: none !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  /* Corta el header y footer a la curva */
}

/* 2. Cabecera (Header) Limpia y Minimalista */
.modal-moderno .modal-header {
  background: transparent !important;
  /* Eliminamos el gradiente sólido */
  border-bottom: none !important;
  padding: 35px 30px 10px 30px !important;
  /* Mucho aire arriba para respirar */
  align-items: center !important;
  justify-content: center !important;
  /* Centramos elementos automáticamente */
  position: relative;
}

.modal-moderno .modal-title {
  color: #2c3e50 !important;
  /* Texto oscuro y elegante para fondo blanco */
  font-weight: 800 !important;
  /* Más peso para dar jerarquía */
  font-size: 1.2rem !important;
  letter-spacing: -0.5px !important;
  /* Letras un poco más juntas (estilo Apple) */
  text-align: center !important;
}

/* El botón de cerrar (X) adaptado al fondo claro */
.modal-moderno .close {
  color: #8898aa !important;
  /* Gris suave */
  text-shadow: none !important;
  opacity: 0.6 !important;
  transition: all 0.2s ease;
  outline: none !important;
  position: absolute !important;
  /* Lo sacamos del flujo para que no descentre el título */
  top: 20px !important;
  right: 25px !important;
  font-size: 1.5rem !important;
}

.modal-moderno .close:hover {
  color: var(--color-peligro);
  /* Se pinta de rojo sutil al pasar el mouse para advertir cierre */
  opacity: 1 !important;
  transform: scale(1.1);
}

/* 3. El Cuerpo y los Formularios */
.modal-moderno .modal-body {
  padding: 30px !important;
}

.modal-moderno .form-group label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  /* Menos peso visual */
  color: #6c757d !important;
  /* Gris amigable */
  text-transform: none !important;
  /* Quitamos las mayúsculas */
  letter-spacing: normal !important;
  margin-bottom: 6px !important;
}

.custom-select-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 30px !important;
  /* Deja espacio para la flecha nativa */
}

/* Inputs y Selects */
.modal-moderno .form-control {
  border-radius: 12px !important;
  background-color: #f8f9fa !important;
  /* Gris súper sutil */
  border: 1px solid #e3e7ee !important;
  padding: 12px 18px !important;
  font-size: 0.95rem !important;
  color: #4c4e56 !important;
  height: auto !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

/* Efecto Focus Turquesa */
.modal-moderno .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--color-primario) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 15%, transparent) !important;
}

/* Diseño especial para el combo del RUT */
.rut-container {
  display: flex;
  gap: 10px;
}

.rut-container #txtRut {
  flex: 1;
  /* Toma todo el espacio disponible */
}

.rut-container #txtDv {
  width: 60px !important;
  /* Ancho fijo para el DV */
  text-align: center !important;
  background-color: #e9ecef !important;
  font-weight: 700 !important;
  color: #4c4e56 !important;
}

/* 4. Pie de página (Footer) y Botones */
.modal-footer-moderno {
  border-top: 1px solid #f1f3f5 !important;
  padding: 20px 30px !important;
  background-color: #fbfcfd !important;
}

.btn-base {
  padding: 10px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none !important;
}

.btn-cancelar-moderno {
  background-color: #e3e7ee !important;
  color: #4c4e56 !important;
}

.btn-cancelar-moderno:hover {
  background-color: #ced4da !important;
}



/* ==========================================================================
   INPUT DE ARCHIVO MODERNO (Light & Dark Mode)
   ========================================================================== */
.contenedor-archivo-moderno {
    position: relative;
    width: 100%;
}

.input-archivo-oculto {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.label-archivo-moderno {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 12px;
    padding: 6px 6px 6px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.label-archivo-moderno:hover {
    border-color: var(--color-primario);
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.icono-archivo {
    color: #6c757d;
    margin-right: 12px;
    display: flex;
    align-items: center;
}

.texto-archivo {
    flex-grow: 1;
    color: #495057;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 12px;
}

.boton-explorar {
    background-color: color-mix(in srgb, var(--color-primario) 15%, transparent);
    color: var(--color-primario);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.label-archivo-moderno:hover .boton-explorar {
    background-color: var(--color-primario);
    color: #ffffff;
}

/* --- MODO OSCURO SELECTOR DE ARCHIVOS EN SIN REPORTE --- */
body.dark-mode .label-archivo-moderno {
    background-color: color-mix(in srgb, #ffffff 5%, transparent);
    border-color: color-mix(in srgb, #ffffff 15%, transparent);
}

body.dark-mode .label-archivo-moderno:hover {
    border-color: var(--color-primario);
    background-color: color-mix(in srgb, #ffffff 10%, transparent);
}

body.dark-mode .texto-archivo {
    color: #e2e6ea;
}

body.dark-mode .icono-archivo {
    color: #adb5bd;
}

body.dark-mode .boton-explorar {
    background-color: color-mix(in srgb, var(--color-primario) 25%, transparent);
    color: #ffffff; /* Texto blanco en el botón para mejor contraste oscuro */
}

body.dark-mode .label-archivo-moderno:hover .boton-explorar {
    background-color: var(--color-primario);
}







/* =============================================
   ESTILOS PARA BADGES EN PESTAÑAS
   ============================================= */
.badge-moderno {
  margin-left: 8px;
  font-weight: 600;
  padding: .35em .6em;
  border-radius: 10rem;
  /* Forma de píldora */
  font-size: 85%;
}

.badge-digital {
  background-color: #e0f2fe;
  /* Azul claro */
  color: #0ea5e9;
}

.badge-papel {
  background-color: #fef9c3;
  /* Amarillo claro */
  color: #ca8a04;
}

/* ==========================================================================
   REGLA FINAL Y DEFINITIVA PARA LA ANIMACIÓN (USANDO MÁXIMA PRIORIDAD)
   ========================================================================== */

/*
 * Usamos selectores de ID (#) para garantizar que estas reglas tengan la máxima
 * prioridad y anulen cualquier otra regla conflictiva de las librerías.
 * Agrupamos los IDs de los contenedores de todas tus tablas.
*/
/*
  Esta regla se aplicará a CUALQUIER elemento que tenga la clase 'contenido-oculto',
  sin importar qué ID tenga.
*/
.contenido-oculto {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out !important;
}

/*
  Y esta regla se aplicará a CUALQUIER elemento que tenga la clase 'contenido-visible'.
*/
.contenido-visible {
  opacity: 1;
  visibility: visible;
}


/* =============================================
   REGISTRAR ACTIVIDAD
   ============================================= */

.form-container-sheet {
  background-color: #ffffff;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-top: 2rem;
}

/* --- Estilos para el Flujo 2.0 de Registrar Actividad (Versión Corregida) --- */

/* 1. Fondo del "Escritorio" aplicado DIRECTAMENTE a tu contenedor principal. */
/* Esto convierte el área de contenido principal en el fondo gris. */


/* 2. Efecto "Hoja Digital" para el formulario. */
/* Esta clase se aplica al div que envuelve tu formulario. */
/* El nuevo contenedor del resumen */
.resumen-sheet-moderno {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.resumen-sheet-moderno h3 {
  font-weight: 600;
  color: #333;
}

/* Estilo de los meta-datos (Relator, Lugar, Fecha) */
.meta-datos-resumen {
  display: flex;
  flex-wrap: wrap;
  /* Para móviles */
  gap: 1rem;
  /* Espacio entre items */
  font-size: 0.9rem;
  color: #555;
}

.meta-datos-resumen span {
  display: inline-flex;
  align-items: center;
}

.opacity-50 {
  opacity: 0.5;
}

/* Estilo de los Stats (Asistentes, Duración) */
.stats-resumen {
  display: flex;
  gap: 2rem;
}

.stats-resumen>div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stats-resumen label {
  margin-bottom: 0;
  font-size: 0.85rem;
  color: #6c757d;
  /* text-muted */
}

.stats-resumen strong {
  font-size: 1.1rem;
  color: var(--color-exito);
  /* Tu color verde de éxito */
}


/* Un simple flex para agrupar las filas */
/* ==========================================================
   METADATOS RESUMEN (FLUIDO Y RESPONSIVO)
   ========================================================== */
.meta-datos-resumen {
  gap: 1rem 1rem;
  /* 1.2rem de separación vertical (móvil), 2rem horizontal (escritorio) */
  padding: 15px 20px;
  background-color: #f8f9fa;
  /* Un fondo gris hiper sutil para agruparlos visualmente */
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.meta-item {
  font-size: 0.8rem;
  white-space: nowrap;
  /* Evita que el ícono y su texto se separen en dos líneas */
}

/* En móviles muy pequeños, reducimos un poco el texto y el gap */
@media (max-width: 576px) {
  .meta-datos-resumen {
    gap: 1rem;
    justify-content: flex-start !important;
    /* En móvil se lee mejor alineado a la izquierda */
    padding: 15px;
  }

  .meta-item {
    font-size: 0.7rem;
  }
}

/* La misma caja que usamos para la firma, pero reutilizada */
.info-box-moderna {
  background-color: #F8F9FA;
  /* Gris muy suave */
  border: 1px solid #E9ECEF;
  border-radius: 6px;
  padding: 1rem 0.5rem;
  color: #333;
  line-height: 1.6;
  font-size: small;
}


/* Título estandarizado para todas las secciones del paso 2 */
.form-section-heading {
  font-size: 0.85rem;
  /* Ligeramente más grande para compensar la falta de mayúsculas */
  font-weight: 700;
  color: #6c757d;
  /* Gris corporativo, mantiene el peso sin ser negro puro */
  margin-bottom: 1rem;
  padding-top: 1rem;
  /* Reducido de 1.5rem para optimizar el espacio vertical en móviles */
}

#tabla-asistentes-final thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  font-weight: 600;
  border-bottom-width: 1px !important;
}

/* Que el primer título no tenga borde superior */
.resumen-sheet-moderno .form-section-heading:first-of-type {
  padding-top: 0;
}

.form-sheet {
  background-color: #ffffff;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: none;
}

.form-sheet ul li {
  word-break: break-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* =============================================
   ESTILOS PARA FORMULARIO "HOJA" (HOJA 1)
   ============================================= */

/* * Añade borde redondeado a todos los inputs y selects
 * dentro del formulario de la hoja 1.
*/
.form-sheet .form-control {
  border-radius: 16px;
  /* <-- ¡Aquí está el borde! (Puedes usar 8px o 16px) */
  padding: 0px 15px;
  /* Asegura un padding consistente */
}

/* * Estilos especiales para el input de "Adjuntar Procedimiento"
*/
.form-sheet .custom-file {
  border-radius: 16px;
  /* 1. Redondeamos el contenedor padre */
  overflow: hidden;
  /* 2. ¡LA CLAVE! Recortamos el contenido */
}

.form-sheet .custom-file-label {
  padding: 10px 15px;
  height: auto;
  border-radius: 0;
  /* 3. Quitamos el radius del hijo */
}

.form-sheet .custom-file-label::after {
  padding: 10px 15px;
  height: 100%;
  border-radius: 0;
  /* 4. Quitamos el radius del botón "Browse" */
}

/* 3. Estilo para el Indicador de Progreso (sin cambios, sigue siendo correcto). */
.progress-indicator {
  text-align: center;
  color: #6c757d;
  /* Color de texto sutil */
  font-weight: 500;
}


/* Aplica el fondo oscuro al contenedor principal (#content)
  SOLO si el <body> tiene nuestra clase 'fondo-pagina-registro'
*/
body.fondo-pagina-registro #content {
  background-color: #E9ECEF;
}

.segmented-control {
  display: flex;
  border: 1px solid #ced4da;
  border-radius: 36px;
  overflow: hidden;
  /* Para que los bordes redondeados afecten a los hijos */
}

/* Ocultamos el radio button real */
.segmented-control input[type="radio"] {
  display: none;
}

.segmented-control label {
  flex: 1;
  /* Cada opción toma 50% del espacio */
  text-align: center;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0;
  /* Anula el margin-bottom de label de Bootstrap */
  cursor: pointer;
  background-color: #FFF;
  color: #495057;
  transition: all 0.2s ease-in-out;
  /* Separador (excepto el primero) */
  border-left: 1px solid #ced4da;
}

.segmented-control label:first-of-type {
  border-left: none;
  /* Sin borde izquierdo para el primer elemento */
}

/* Estilo para el botón SELECCIONADO */
.segmented-control input[type="radio"]:checked+label {
  background-color: var(--color-primario);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==========================================================
   CAJA DE TEMAS EXPUESTOS (EXPANDIBLE) HOJA 2
   ========================================================== */


.texto-colapsable {
  max-height: 110px;
  /* Aprox 5 líneas de texto */
  overflow: hidden;
  /* Animación fluida de altura */
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  color: #4c4e56;
  font-size: 0.95rem;
}

/* Al agregar esta clase, la caja crece */
.texto-colapsable.expandido {
  max-height: 3000px;
  /* Un número lo suficientemente grande para cualquier texto */
}

/* El efecto de humo blanco sobre el texto cortado */
.degradado-inferior {
  position: absolute;
  bottom: 45px;
  /* Se eleva un poco para ubicarse sobre el nuevo botón centrado */
  left: 0;
  right: 0;
  height: 60px;
  /* Se cambió el color de gris (248,249,250) a blanco puro (255,255,255) */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* Para poder seleccionar el texto debajo */
}

/* ========================================================================= */
/* 🎚️ 1. SWITCH MAESTRO GENERAL (LOGIN, FORMULARIOS, AJUSTES)
/* ========================================================================= */
.switch-moderno {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    vertical-align: middle;
    flex-shrink: 0;
}


/* El carril base (Gris en claro, Fondo Input en oscuro) */
.switch-moderno .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    /* Gris neutro suave modo claro */
    transition: 0.4s ease;
    border-radius: 34px;
}

/* El botón (Bolita blanca) */
.switch-moderno .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ESTADO ACTIVO: Encendido con tu color corporativo */
.switch-moderno input:checked+.slider {
    background-color: var(--color-primario) !important;
}

.switch-moderno input:checked+.slider:before {
    transform: translateX(20px);
}

/* VARIANTE: TAMAÑO PEQUEÑO (Login) */
.switch-moderno.switch-sm {
    width: 38px;
    height: 22px;
}

.switch-moderno.switch-sm .slider:before {
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
}

.switch-moderno.switch-sm input:checked+.slider:before {
    transform: translateX(16px);
}

/*    ADAPTACIÓN A MODO OSCURO (General) */
body.dark-mode .switch-moderno .slider {
    background-color: var(--bg-input);
    /* Se camufla con los inputs oscuros */
    border: 1px solid var(--borde-fuerte);
}

body.dark-mode .switch-moderno input:checked+.slider {
    border-color: var(--color-primario);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primario) 40%, transparent) !important;
}


/* ========================================================================= */
/* 🎛️ 2. SWITCH SEMÁNTICO DEL WIZARD (MEMORIA ÁMBAR VS AUTO PRIMARIO)
/* ========================================================================= */
.switch-moderno-dark {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}


.switch-moderno input,
.switch-moderno-dark input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: none !important;
}

/* Fondo del carril del switch (Atado a las variables del sistema) */
.slider-dark {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-input);
    border: 1px solid var(--borde-fuerte);
    transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
}

/* Bolita Ámbar (Memoria) */
.slider-dark:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 2px;
    background-color: #ffc107;
    transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.4);
}

/* Switch Activo Automático (Pinta la bolita y el fondo del color de la marca) */
.switch-moderno-dark input:checked+.slider-dark {
    background-color: color-mix(in srgb, var(--color-primario) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-primario) 30%, transparent);
}

.switch-moderno-dark input:checked+.slider-dark:before {
    transform: translateX(18px);
    background-color: var(--color-primario);
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-primario) 50%, transparent);
}

/* Textos complementarios del Wizard */
.switch-label-pilar {
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.switch-label-pilar.inactive {
    color: var(--texto-mutado) !important;
    opacity: 0.6;
}

.switch-label-pilar.active-memoria {
    color: #ffc107 !important;
    opacity: 1;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.15);
}

.switch-label-pilar.active-auto {
    color: var(--color-primario) !important;
    opacity: 1;
    text-shadow: 0 0 8px color-mix(in srgb, var(--color-primario) 20%, transparent);
}

/* ==========================================================================
   MODO OSCURO: FUNDIDO DE TEXTO COLAPSABLE (Temas Expuestos)
   ========================================================================== */
body.dark-mode .degradado-inferior {
  /* Usamos rgb(68, 68, 68) que equivale a tu fondo #444 de las form-sheet en modo oscuro. 
       Va de 0 (transparente) a 1 (sólido) hacia abajo */
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0), rgba(30, 30, 30, 1));
}

/* ==========================================================================
   ETIQUETAS DE OPCIONES Y SWITCHES
   ========================================================================== */
.label-opcion-moderna {
  cursor: pointer;
  color: #4c4e56;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  transition: color 0.3s ease;
}

/* --- ADAPTACIÓN MODO OSCURO --- */
body.dark-mode .label-opcion-moderna {
  color: #e0e0e0 !important;
  /* Gris claro para lectura perfecta sin encandilar */
}

/* ==========================================================================
   ESTADO DE FIRMAS (Visualización dinámica)
   ========================================================================== */
.texto-estado-firmado {
  color: var(--color-primario) !important;
  font-weight: 700;
}

/* Botón Circular Minimalista */
.btn-ver-mas-temas {
  background: #ffffff;
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 6px color-mix(in srgb, var(--color-primario) 15%, transparent);
  transition: all 0.3s ease;
  cursor: pointer;
  outline: none;
}

.btn-ver-mas-temas:hover {
  background: var(--color-primario);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px color-mix(in srgb, var(--color-primario) 25%, transparent);
}

/* --- LA MAGIA DE LA ANIMACIÓN --- */
.btn-ver-mas-temas svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Transición suave */
}

/* Cuando JS le agrega esta clase, el ícono gira mirando hacia arriba */
.btn-ver-mas-temas.rotado svg {
  transform: rotate(180deg);
}

/* --- 4. CONTENEDOR DE FIRMA (.firma-container-moderno) --- */
.firma-container-moderno {
  background-color: #F8F9FA;
  /* Fondo Claro */
  border: 1px solid #E9ECEF;
  /* Borde Claro */
  border-radius: 12px;
  padding: 1rem;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.firma-container-moderno .firma-texto {
  flex-grow: 1;
  padding-right: 0rem;
}

/* --- 5. MODO OSCURO PARA CONTENEDOR DE FIRMA --- */
body.dark-mode .firma-container-moderno {
  background-color: #2a2a2a !important;
  /* Fondo Gris Noche */
  border-color: #333333 !important;
  /* Borde Oscuro */
}

/* =============================================
   ESTILOS PARA INPUT DE ARCHIVO PERSONALIZADO
   ============================================= */

/* Estilo para el "botón" (label) de carga */
.btn-file-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px dashed #ced4da;
  /* Borde punteado */
  color: #6c757d;
  background-color: #f8f9fa;
  border-radius: 16px;
  /* Borde redondeado */
  padding: 10px 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-file-upload:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #343a40;
}

/* Estilo para la caja que muestra el nombre del archivo */
.file-display-box {
  background-color: #e9f5ff;
  /* Fondo azul claro */
  color: #0056b3;
  border: 1px solid #b6d4fe;
  border-radius: 12px;
  padding: 10px 15px;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: fadeIn 0.3s ease;
  /* Animación de entrada */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-display-box #file-name-text {
  /* Trunca el nombre si es muy largo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

/* Estilo para el botón 'x' de quitar */
.btn-remove-file {
  background: none;
  border: none;
  color: #0056b3;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.btn-remove-file:hover {
  opacity: 1;
}

/* ====================================================== */
/* ESTILOS PARA LOS DESTELLOS MÁGICOS DE "MAJO"           */
/* ====================================================== */

/* 1. El contenedor (el "cielo" de los destellos) */
.sparkle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Detrás del spinner y el texto */
}

/* 1. La estrella (ahora redonda y brillante) */
.sparkle {
  position: absolute;
  width: 2px;
  height: 2px;

  /* Núcleo blanco-caliente */
  background-color: #fff;

  border-radius: 50%;
  /* Esto hace el núcleo redondo */

  /* Animación */
  animation-name: sparkle-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  opacity: 0;

  /* El brillo (sin cambios) */
  box-shadow: 0 0 5px 1px #fff,
    0 0 8px 3px #00eaff,
    0 0 12px 5px #009da5;
}

/* 4. Posicionamiento y retrasos de cada destello
      Esto es clave para que no parpadeen todos a la vez */
.sparkle:nth-child(1) {
  top: 20%;
  left: 15%;
  animation-delay: 0.5s;
}

.sparkle:nth-child(2) {
  top: 40%;
  left: 80%;
  animation-delay: 0s;
}

.sparkle:nth-child(3) {
  top: 70%;
  left: 30%;
  animation-delay: 1.2s;
}

.sparkle:nth-child(4) {
  top: 80%;
  left: 90%;
  animation-delay: 1.8s;
}

.sparkle:nth-child(5) {
  top: 10%;
  left: 60%;
  animation-delay: 0.3s;
}

.sparkle:nth-child(6) {
  top: 50%;
  left: 5%;
  animation-delay: 0.9s;
}

#modalIA .modal-header {
  border-bottom: none;
}

/* Elimina la línea de arriba de los botones */
#modalIA .modal-footer {
  border-top: none;
}

/* ==========================================================================
   CENTRADOR ABSOLUTO PARA BOTÓN MAJO IA (Encabezado)
   ========================================================================== */

#btnMajoNavbar {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    translate: -50% -50% !important;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444444 !important; /* Gris oscuro elegante para modo claro */
    transition: all 0.3s ease;
}

#btnMajoNavbar:hover {
    color: var(--color-primario) !important; /* Se pinta con tu color corporativo al pasar el mouse */
    background-color: rgba(0, 0, 0, 0.05) !important; /* Sombreado gris muy sutil */
}

#btnMajoNavbar:hover svg {
    /* Quitamos el transform manual y llamamos al keyframe 'tada' de Animate.css */
    animation: tada 1s ease-in-out; 
    filter: drop-shadow(0px 0px 5px color-mix(in srgb, var(--color-primario) 40%, transparent));
}

/* ========================================================
   BOTÓN MAJO NAVBAR (MODO OSCURO ACTIVO)
   ======================================================== */
body.dark-mode #btnMajoNavbar {
    color: #ffffff !important; /* Vuelve al blanco absoluto */
}

body.dark-mode #btnMajoNavbar:hover {
    color: #ffffff !important; 
    background-color: rgba(255, 255, 255, 0.15) !important; /* Fondo blanco semitransparente premium */
}

body.dark-mode #btnMajoNavbar:hover svg {
    /* Hereda automáticamente la animación 'tada' de arriba, solo cambiamos la luz de la sombra */
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.5));
}

/* 2. La animación de "parpadeo" (Twinkle) */
@keyframes sparkle-animation {
  0% {
    opacity: 0;
    transform: scale(0.3);
    /* Empieza pequeña */
  }

  30% {
    opacity: 1;
    /* Aparece rápido */
    transform: scale(1.2);
    /* "Explota" un poco */
  }

  70% {
    opacity: 1;
    /* Se mantiene visible */
    transform: scale(1);
    /* Vuelve a su tamaño normal */
  }

  100% {
    opacity: 0;
    transform: scale(0.3);
    /* Se desvanece y encoge */
  }
}

/* ====================================================== */
/* ESTILOS PARA TODOS LOS BOTONES CKEDITOR (Anulación)    */
/* ====================================================== */

/* 1. Prepara TODOS los botones para una transición suave */

/* 2. Aplica TUS estilos usando los selectores que encontraste */
/* Esto afectará a TODOS los botones de la barra */
a.cke_button_off:hover,
a.cke_button_off:focus,
a.cke_button_off:active {



  /* Tu borde redondeado */
  border-radius: 20% !important;

  /* Tu zoom */
  transform: scale(1) !important;

  /* Forzamos que no tenga borde de píxeles */
  border: none !important;
}

/* 3. Mantenemos el efecto para el botón "presionado" */
a.cke_button_on {
  border-radius: 20% !important;
  transform: scale(1) !important;
  border: none !important;
}

/* Suaviza las esquinas de CKEditor */
.cke {
  border-radius: 16px !important;
  /* Ajusta el valor '8px' a tu gusto */
  overflow: hidden !important;
  /* Importante para que el contenido interior no se salga */
}

/* Opcional: Redondear también las esquinas inferiores (barra de estado) */
.cke_bottom {
  border-radius: 0 0 16px 16px !important;
  /* Solo redondea las esquinas inferiores */
}

/* A. Permitir escribir y seleccionar en formularios (CRÍTICO) */
input,
textarea,
[contenteditable="true"] {
  /* Para CKEditor u otros editores */
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  /* Permite menú Copiar/Pegar */
  cursor: text;
}

/* B. Permitir selección donde Majo IA lo necesite (Tablas, Artículos) */
/* Agrega la clase "texto-seleccionable" a tus <div> o <table> donde quieras usar la IA */
.texto-seleccionable,
.texto-seleccionable * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* ==========================================================================
   RECORDATORIO INLINE PARA CKEDITOR (Corrección de Posición)
   ========================================================================== */
.aviso-inline-editor {
    position: absolute;
    /* Lo movemos a la parte inferior derecha para que no choque con la barra de herramientas ni se corte */
    bottom: 20px; 
    right: 20px;
    background-color: var(--color-primario);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 10000; /* Z-index altísimo para asegurar que flote sobre todo */
    pointer-events: none; 
}

body.dark-mode .aviso-inline-editor {
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
/* ====================================================== */
/* ESTILOS PARA RESPUESTA DE "MAJO" (MEJOR ESPACIADO)   */
/* ====================================================== */

/* 1. Contenedor general de la respuesta */
#ia-resultado-texto {
  line-height: 1.6;
  /* Mejora la legibilidad */
  color: #333;
  /* Un color de texto más suave que el negro puro */
}

/* 2. Estilos para el MODO GENERADOR (Intro, Desarrollo, etc.) */

/* Títulos como "INTRODUCCIÓN" */
#ia-resultado-texto strong {
  display: block;
  /* Hace que "INTRODUCCIÓN" tenga su propia línea */
  font-size: 1.1em;
  font-weight: 600;
  color: #000;
  margin-top: 15px;
  /* Espacio ANTES del título */
  margin-bottom: 5px;
  /* Espacio DESPUÉS del título */
}

/* Primer título (INTRODUCCIÓN) no necesita espacio arriba */
#ia-resultado-texto strong:first-child {
  margin-top: 0;
}

/* Listas de viñetas */
#ia-resultado-texto ul {
  margin-top: 0;
  margin-bottom: 15px;
  padding-left: 25px;
  /* Sangría */
}

#ia-resultado-texto li {
  text-align: justify;
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 0.9em;
  /* <-- AÑADIR ESTA LÍNEA */
}

/* 3. Estilos para el MODO EDITORA (Nota de Majo) */

/* Contenedor especial de la nota legal */
.nota-majo {
  background-color: #f8f9fa;
  /* Un fondo sutil */
  border-left: 4px solid #009da5;
  /* Un borde distintivo */
  padding: 15px;
  border-radius: 4px;
}

/* Títulos DENTRO de la nota de Majo (deben ser INLINE) */
.nota-majo strong {
  display: inline;
  /* Anula la regla general de "display: block" */
  font-size: 1em;
  /* Tamaño normal */
  color: #000;
  margin: 0;
  /* Sin márgenes extra */
}


/* --- Estilos para Botones de Sugerencia con Gradiente --- */

.ia-sugerencia-wrapper {
  margin: 5px 8px;
  /* <-- CAMBIADO (para espacio horizontal) */
  padding: 2.5px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

  flex-shrink: 0;
  /* <-- AÑADIDO (¡Muy importante!) */
}

/* Los 3 gradientes diferentes */
.ia-sugerencia-wrapper.grad-1 {
  /* Teal a Morado (como tu imagen) */
  background: linear-gradient(135deg, #009DA5, #6f42c1);
}

.ia-sugerencia-wrapper.grad-2 {
  /* Morado a Teal (como tu imagen) */
  background: linear-gradient(135deg, #6f42c1, #009DA5);
}

.ia-sugerencia-wrapper.grad-3 {
  /* Puedes definir un tercer gradiente, ej: Teal a Azul */
  background: linear-gradient(135deg, #009DA5, #007bff);
}

/* --- MODIFICA ESTA REGLA --- */
.ia-sugerencia-wrapper .ia-sugerencia {
  background-color: #ffffff;
  color: #333;
  border: none;
  border-radius: 9px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 0.9em;
  display: inline-block;

  width: auto;
  /* <-- CAMBIADO (El cambio más importante) */
}

/* Efecto Hover */
.ia-sugerencia-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- AÑADE ESTE BLOQUE CSS NUEVO --- */

.ia-sugerencias-slider {
  width: 100%;
  overflow-x: auto;
  /* La clave para el slide */
  overflow-y: hidden;
  padding-bottom: 10px;
  /* Espacio para el scrollbar sutil */
}

.ia-sugerencias-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

/* --- Oculta el scrollbar pero mantiene el slide --- */
.ia-sugerencias-slider {
  /* ... (tus otras reglas como overflow-x, etc.) ... */

  /* Para Firefox */
  scrollbar-width: none;

  /* Para Chrome, Safari y Edge */
}


/* ==========================================================================
   MODAL MAJO IA: ESTILOS EXCLUSIVOS DE BOTONES (Aislados)
   ========================================================================== */

/* Modo Claro */
.btn-secundario-majo {
  background-color: #f1f3f5;
  color: #495057;
  border: 1px solid #ced4da;
  transition: all 0.3s ease;
}

.btn-secundario-majo:hover {
  background-color: #e2e6ea;
  color: #212529;
  transform: translateY(-1px);
}

/* Modo Oscuro */
body.dark-mode .btn-secundario-majo {
  background-color: color-mix(in srgb, #ffffff 10%, transparent);
  color: #ffffff;
  border: 1px solid color-mix(in srgb, #ffffff 20%, transparent);
  backdrop-filter: blur(4px);
}

body.dark-mode .btn-secundario-majo:hover {
  background-color: color-mix(in srgb, #ffffff 20%, transparent);
  border-color: #ffffff;
}

/* ==========================================================================
   MODAL MAJO IA: BOTONES Y ALINEACIÓN (Sin conflictos con Bootstrap)
   ========================================================================== */

/* Propiedades de estructura y alineación compartidas */
.btn-accion-majo,
.btn-secundario-majo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Separación entre el ícono y el texto */
}

/* --- ESTILOS VISUALES: BOTONES PRINCIPALES (Generar / Insertar) --- */
.btn-accion-majo {
  background: linear-gradient(135deg, #6f42c1 0%, #009DA5 100%) !important;
  border: none !important;
  color: #ffffff !important;
  transition: all 0.3s ease;
  /* Sombra basada en el violeta de Majo IA */
  box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4) !important;
}

.btn-accion-majo:hover {
  /* Tonos ligeramente más brillantes al pasar el mouse */
  background: linear-gradient(135deg, #7b4ad5 0%, #00b3bc 100%) !important;
  /* La sombra cambia al turquesa para un efecto más dinámico */
  box-shadow: 0 6px 20px rgba(0, 157, 165, 0.6) !important;
  transform: translateY(-2px);
}

.btn-accion-majo:disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  /* El mouse atraviesa el botón como si no existiera */
  filter: grayscale(40%);
  /* Lo apagamos visualmente */
}

/* ==========================================================================
   MODAL MAJO IA: RESULTADOS Y ANIMACIONES
   ========================================================================== */

/* 1. CAJA DE RESULTADOS (Adiós al rojo #890404) */
body.dark-mode #ia-resultado,
body.dark-mode #modalIA .bg-light {
  background-color: #1a1a1a !important;
  /* Asfalto profundo */
  border: 1px solid color-mix(in srgb, #6f42c1 30%, transparent) !important;
  /* Borde violeta sutil */
  color: #e0e0e0 !important;
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
}

/* 2. ANIMACIÓN: VARITA MÁGICA PENSANDO */
@keyframes giroMagico {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  /* Crece sutilmente */
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.icono-pensando {
  animation: giroMagico 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  /* Le damos un color brillante mientras piensa */
  color: #009DA5 !important;
}

/* --- 3. BOTÓN CANCELAR (Modo Sigilo) --- */
/* Modo Claro */
.btn-cancelar-majo {
  background: transparent;
  color: #6c757d;
  border: 1px solid #ced4da;
  transition: all 0.3s ease;
}

.btn-cancelar-majo:hover {
  background-color: #f8f9fa;
  color: #343a40;
}

/* Modo Oscuro */
body.dark-mode .btn-cancelar-majo {
  background: transparent !important;
  color: #a0aec0 !important;
  border: 1px solid #4a5568 !important;
}

body.dark-mode .btn-cancelar-majo:hover {
  background: color-mix(in srgb, #ffffff 5%, transparent) !important;
  color: #ffffff !important;
  border-color: #718096 !important;
}

.slider-wrapper-relativo {
  position: relative;
  /* Clave para el overlay */
}

/* 2. El "falso fundido" (usando un pseudo-elemento ::after) */
.slider-wrapper-relativo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  /* Ancho del fundido, ajústalo a tu gusto */

  /* * Crea un gradiente que va de "blanco" (el color de tu modal) 
   * a "blanco transparente".
   */
  background: linear-gradient(to left, #FFFFFF 50%, rgba(255, 255, 255, 0));

  /* Evita que el fundido bloquee el clic en los botones */
  pointer-events: none;
}

body.dark-mode .slider-wrapper-relativo::after {
  /* Cambiamos el blanco por el gris asfalto de tu fondo oscuro (#1a1a1a) */
  background: linear-gradient(to left, #1e1e1e 50%, rgba(26, 26, 26, 0));
}

/* --- REEMPLAZA TUS ESTILOS ANTERIORES DEL HEADER POR ESTOS --- */

/* 1. El contenedor (solo para alinear) */
.majo-title-gradient-group {
  display: flex;
  align-items: center;
}




/* 2. El texto "Asistente Majo IA" (con gradiente y estilos) */
.majo-title-gradient-group span {
  /* Aplicamos el gradiente SOLO al texto */
  background-image: linear-gradient(135deg, #6f42c1, #009DA5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Tus estilos de negrita y tamaño */
  font-weight: 700;
  font-size: 1rem;
  margin-left: 10px;
}

/* 3. La varita (con un color sólido del gradiente) */
.majo-title-gradient-group svg {
  /* <-- ¡EL CAMBIO CLAVE: de 'i' a 'svg'! */
  font-size: 1.3rem;

  /* ¡LA MAGIA ESTÁ AQUÍ! Le damos el color morado del inicio */
  color: #6f42c1 !important;
  /* Mantenemos el !important por si acaso */

  /* Opcional: si prefieres el otro color, usa este: */
  /* color: #009DA5 !important; */
}

/* 4. El badge de BETA (se mantiene igual) */
.modal-header .badge {
  font-size: 0.5em;
  padding: 4px 6px;
  font-weight: 600;
}

/* --- Pulido para textos de ayuda del Modal --- */

/* Esto apunta a los <small> que están dentro de 
  los contenedores de "Contexto" y "Estilo"
*/
#ia-contexto-global .form-group small,
#ia-estilo-global .form-group small {
  display: block;
  /* Asegura que ocupe todo el ancho */
  text-align: right;
  /* ¡La magia! */
  margin-top: 4px;
  /* Un poco de aire */
}

/* --- Estilos para la Validación Normativa de Majo --- */

.ia-validacion-contenedor {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 1. El bloque del texto original (gris suave) */
.ia-texto-original {
  background-color: #f8f9fa;
  border-left: 4px solid #ccc;
  padding: 10px 15px;
  border-radius: 4px;
  color: #6c757d;
  font-size: 0.95em;
}

/* 2. El bloque del dictamen (Estilo "Legal") */
.ia-dictamen-legal {
  background-color: #f0fdf4;
  /* Un verde/azul muy suave */
  border: 1px solid #d1e7dd;
  border-radius: 8px;
  overflow: hidden;
  /* Para que el header no se salga */
}

/* Encabezado del dictamen (Gradiente Majo) */
.ia-dictamen-header {
  background-image: linear-gradient(135deg, #6f42c1, #009DA5);
  color: white;
  padding: 8px 15px;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

/* Cuerpo del dictamen */
.ia-dictamen-body {
  padding: 15px;
  color: #212529;
  line-height: 1.6;
  text-align: justify;
  font-size: 0.95em;
}

/* --- Estilos para la Propuesta de Redacción (Corregir) --- */

.ia-propuesta-contenedor {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Un borde izquierdo elegante */
  border-left: 5px solid #009DA5;
}

.ia-propuesta-header {
  background-color: #f8f9fa;
  color: #009DA5;
  /* Color corporativo (Teal) */
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.ia-propuesta-body {
  padding: 20px;
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  background-color: #fff;
}

/* Ajuste para que se vea bien dentro del modal */
.ia-propuesta-body p:last-child {
  margin-bottom: 0;
}

/* EN TU ARCHIVO DE ESTILOS GLOBAL */

/* 1. El Wrapper posiciona todo el sistema */
.majo-wrapper {
  position: fixed;
  bottom: 350px;
  /* Tu posición actual */
  right: 100px;
  z-index: 1050;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. Ajuste al Botón Principal para que encaje */
#btnFlotanteMajoIA {
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 20;
}

/* 3. Estilo de los Satélites */
.btn-satelite {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  color: white;
  background-image: linear-gradient(135deg, #6f42c1, #009DA5);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  /* Invisibles por defecto */
  transform: scale(0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
}

/* --- POSICIONES DE LOS 4 SATÉLITES (Arco de 90 grados) --- */

/* =========================================
   ANIMACIÓN ESCALONADA (DOMINÓ) + POSICIONES
   ========================================= */

/* 1. Validar (Sale primero - 0s retraso) */
.majo-wrapper.menu-abierto #btnSatValidar {
  transform: translate(0px, -100px) scale(1);
  opacity: 1;
  transition-delay: 0s;
  /* <--- LA MAGIA DE LA ANIMACIÓN */
}

/* 2. Expandir (Sale segundo - 0.05s retraso) */
.majo-wrapper.menu-abierto #btnSatExpandir {
  transform: translate(-45px, -85px) scale(1);
  opacity: 1;
  transition-delay: 0.05s;
  /* <--- LA MAGIA DE LA ANIMACIÓN */
}

/* 3. Resumir (Sale tercero - 0.1s retraso) */
.majo-wrapper.menu-abierto #btnSatResumir {
  transform: translate(-85px, -45px) scale(1);
  opacity: 1;
  transition-delay: 0.1s;
  /* <--- LA MAGIA DE LA ANIMACIÓN */
}

/* 4. Ortografía (Sale último - 0.15s retraso) */
.majo-wrapper.menu-abierto #btnSatOrtografia {
  transform: translate(-100px, 0px) scale(1);
  opacity: 1;
  transition-delay: 0.15s;
  /* <--- LA MAGIA DE LA ANIMACIÓN */
}

/* =========================================
   EFECTO DE "PRESIÓN" (LATIDO) EN EL BOTÓN CENTRAL
   ========================================= */
@keyframes majo-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  /* Se encoge un poco */
  100% {
    transform: scale(1);
  }

  /* Vuelve a la normalidad */
}

.majo-wrapper.menu-abierto #btnFlotanteMajoIA {
  animation: majo-pop 0.3s ease-out;
}

/* =============================================
   BOTÓN FLOTANTE PARA MAJO IA
   ============================================= */


.btn-flotante-ia {
  position: fixed;
  /* <-- LA CLAVE: Fijo a la pantalla */
  bottom: 350px;
  /* <-- 50px desde el borde inferior de la PANTALLA */
  right: 100px;
  /* <-- 50px desde el borde derecho de la PANTALLA */
  z-index: 1050;

  width: 60px;
  height: 60px;
  border-radius: 50%;

  background-image: linear-gradient(135deg, #6f42c1, #009DA5);
  color: #ffffff;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;

  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
  opacity: 0;
  transform: scale(0.8);
}

/* --- Estilo de Gradiente para el Botón "Generar Texto" --- */

#btnGenerarTextoIA {
  /* 1. El gradiente solicitado (Morado -> Teal) */
  background-image: linear-gradient(135deg, #009DA5, #6f42c1);

  /* 2. Aseguramos que el color de fondo sólido desaparezca */
  background-color: transparent;

  /* 3. Quitamos cualquier borde */
  border: none;

  /* 4. Mantenemos el color del texto (icono) en blanco */
  color: #ffffff;

  /* 5. Añadimos una transición suave para el hover */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 6. Efecto Hover (para que "levite" como los otros botones) */
#btnGenerarTextoIA:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 7. Estilo cuando está deshabilitado */
#btnGenerarTextoIA:disabled {
  /* Cuando esté deshabilitado, volvemos a un gris */
  background-image: none;
  background-color: #e9ecef;
  border-color: #ced4da;
  opacity: 0.65;
}

.btn-flotante-ia:hover {
  transform: scale(1.1);
  /* Efecto de zoom al pasar el mouse */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Clase para mostrar el botón con animación */
.btn-flotante-ia.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- EFECTO HUNDIDO (PRESS) AL PASAR EL MOUSE --- */

.btn-satelite:hover {
  /* 1. Mantenemos el color de texto blanco */
  color: white;

  /* 2. EL TRUCO DEL HUNDIDO */
  /* Primero, quitamos la sombra externa que lo hacía "flotar" */
  box-shadow: none;

  /* Luego, agregamos una sombra INTERNA fuerte en la parte superior */
  /* Esto crea la ilusión de profundidad hacia adentro */
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);

  /* 3. Oscurecemos levemente el gradiente para simular sombra */
  filter: brightness(0.9);

  /* Traemos al frente */
  z-index: 50;
}

/* 4. Animación del Icono */
/* Hacemos que el icono se encoja un poco, reforzando que se "aleja" al hundirse */
.btn-satelite:hover i {
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

/* Animación de brillo (opcional, pero elegante) */
.brillo-ia {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 157, 165, 0.7);
  /* Color turquesa con transparencia */
  animation: pulso-brillante 2s infinite ease-out;
  pointer-events: none;
  /* Para que no interfiera con el clic */
}

#modalIA .modal-body {
  padding: 1.5rem;
  /* <-- Tu ajuste (Bootstrap usa 1rem) */
}

@keyframes pulso-brillante {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 157, 165, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 15px rgba(0, 157, 165, 0);
    /* El brillo se expande y desaparece */
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 157, 165, 0);
  }
}


/* --- Animación de Resplandor "Mágico" --- */

@keyframes breathingGlow {
  0% {
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 18px rgba(0, 123, 255, 0.6);
  }

  100% {
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
  }
}

/* La clase que activará la animación */
.modal-content.pensando-glow {
  animation: breathingGlow 2.5s infinite ease-in-out;
  border-color: rgba(0, 123, 255, 0.6) !important;
  /* Forza un borde azul */
}


/* ==============================================
   ESTILOS DE ACCESIBILIDAD
   ============================================== */

/* --- TAMAÑO DE TEXTO --- */
/* * Estas clases se aplican al div #cuerpo-charla.
 * Ajusta los valores de font-size a tu gusto.
*/
#cuerpo-charla.text-size-small {
  font-size: 14px;
  /* 0.875rem */
}

/* Este sería el tamaño por defecto (puedes dejarlo vacío si 16px es tu base) */
#cuerpo-charla.text-size-medium {
  font-size: 16px;
  /* 1rem */
}

#cuerpo-charla.text-size-large {
  font-size: 19px;
  /* 1.1875rem */
}

/* --- MODO OSCURO --- */


/* Estilos base cuando el modo oscuro está activo */
body.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

/* El 'form-sheet' (el contenedor blanco principal) */
body.dark-mode .form-sheet {
  background-color: #444;
  border: 1px solid #444;
  color: #e0e0e0;
}

/* Títulos y etiquetas */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode label,
body.dark-mode .form-section-heading {
  color: #ffffff;
}

/* Textos silenciados */
body.dark-mode .text-muted {
  color: #999 !important;
}

/* Inputs de formulario */
body.dark-mode .form-control {
  background-color: #3a3a3a;
  color: #ffffff;
  border-color: #555;
}

body.dark-mode .form-control:focus {
  background-color: #444;
  color: #ffffff;
  border-color: #009da5;
  /* Tu color de acento */
  box-shadow: none;
}

body.dark-mode .form-control::placeholder {
  color: #888;
}

/* Botones de radio del segmented-control */
body.dark-mode .segmented-control label {
  background-color: #fff;
  color: #444;
}

body.dark-mode .segmented-control input:checked+label {
  background-color: #009da5;
  /* Tu color de acento */
  color: #ffffff;
}

/* Switch de modo oscuro */
body.dark-mode .switch-button-label {
  background-color: #555;
}

/* Y asegúrate de que el título sí sea blanco (aunque ya debería) */
body.dark-mode .page-title {
  color: #343a40;
}


/* ==============================================
   ARREGLO DE TEXTO DE SWEETALERT EN MODO OSCURO
   ============================================== */

/* Forzamos que el texto del SweetAlert (que tiene fondo blanco)
  sea oscuro, incluso cuando el resto del body está en modo oscuro.
*/
body.dark-mode .swal2-html-container,
body.dark-mode .swal2-content {
  color: #545454 !important;
  /* Un gris oscuro legible */
}

/* Y hacemos lo mismo para el título, por si acaso */
body.dark-mode .swal2-title {
  color: #333 !important;
  /* Un negro/gris oscuro */
}

#btnReenviarMasivo {
  border-radius: 16px !important;
  /* ¡Usa !important si es necesario para sobrescribir */
}


#modalDetalleFirmas .table th,
#modalDetalleFirmas .table td {
  text-align: center;
  vertical-align: middle;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#modalDetalleFirmas .table tbody td:last-child {
  white-space: nowrap;
}

/* --- Estilos para la respuesta de Majo --- */

/* Esto SOLO aplica a los H4 DENTRO de #ia-resultado-texto */
#ia-resultado-texto h4 {
  margin-top: 20px;
  /* Espacio ANTES de un título */
  margin-bottom: 8px;
  /* Espacio pegado DESPUÉS de un título */
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.3;
}

/* Esto SOLO aplica a los PÁRRAFOS DENTRO de #ia-resultado-texto */
#ia-resultado-texto p {
  margin-top: 0;
  /* SIN espacio arriba del párrafo */
  margin-bottom: 12px;
  /* Espacio normal entre párrafos */
  line-height: 1.5;
  text-align: justify;
  font-size: 0.9em;
}

/* El primer párrafo justo después de un título no tendrá espacio arriba */
#ia-resultado-texto h4+p {
  margin-top: 0;
}

/* Esto SOLO aplica a las LISTAS DENTRO de #ia-resultado-texto */
#ia-resultado-texto ul {
  margin-top: 5px;
  /* Pega la lista al párrafo anterior */
  margin-bottom: 12px;
  line-height: 1.5;
  padding-left: 30px;
  /* Ajusta la sangría de las viñetas */
}



/* CORRECCIÓN: Usamos el ID para tener mayor especificidad y ganar al color cyan */
#tablaTrabajadores thead.thead-rojo-suave th {
  background-color: #f8d7da !important;
  /* Rojo muy suave */
  color: #721c24 !important;
  /* Rojo oscuro para el texto */
  border-color: #f5c6cb !important;
  /* Borde */
}
/* =========================================================================
   COMPONENTE GENERAL: INTERFAZ DE TARJETAS (ACCESOS E INFO)
   ========================================================================= */

/* 🔵 1. BASE GLOBAL / MOBILE FIRST (Actúa por defecto en celulares) */
.dashboard-icons-grid > div .card-moderna__icono svg {
    width: 45px;
    height: 45px;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}


/* 💻 2. VISTA ESCRITORIO (Monitores y Laptops a partir de 768px) */
@media (min-width: 768px) {
    
    /* === 2.1 ÍCONOS PRINCIPALES DE LAS TARJETAS === */
    .dashboard-icons-grid > div .card-moderna__icono {
        width: 70px;
        height: 70px;
        margin: 0 !important; /* Separación horizontal del texto */
        background: color-mix(in srgb, var(--color-primario) 5%, transparent);
        border-radius: 16px;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0;
    }

    .dashboard-icons-grid > div .card-moderna__icono svg {
        width: 52px;
        height: 52px;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    .dashboard-icons-grid > div .card-moderna__icono img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        display: block;
        border-radius: 12px;
    }

    /* === 2.2 ÍCONOS DE INFORMACIÓN Y BURBUJAS (TOOLTIPS) === */
    .card-moderna__info-icon {
        position: relative; 
        display: inline-flex; 
        align-items: center;
        justify-content: center;
        color: var(--texto-mutado, #94a3b8);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .card-moderna__info-icon:hover {
        transform: scale(1.1);
        color: var(--color-primario, #00e5ff);
    }

    /* Excepción obligatoria para el ID de Desvinculados */
    #infoIconoDesvinculados.card-moderna__info-icon {
        position: relative;
        bottom: auto;
        right: auto;
        display: inline-block;
        margin-left: 10px;
        color: var(--color-peligro); 
    }
    
    #infoIconoDesvinculados.card-moderna__info-icon:hover {
        color: #a71d2a;
    }

    /* Cuerpo de la nota flotante asistente */
    .card-moderna__info-icon::after {
        content: attr(data-descripcion);
        position: absolute;
        bottom: 135%;
        left: 50%;
        transform: translateX(-50%) scale(0.85);
        background-color: #1e293b;
        color: #f8fafc;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        line-height: 1.4;
        width: 220px;
        text-align: center;
        white-space: normal;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        border: 1px solid #334155;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Flecha decorativa del tooltip */
    .card-moderna__info-icon::before {
        content: '';
        position: absolute;
        bottom: 115%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #1e293b transparent transparent transparent;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease;
    }

    /* Despliegue elástico del tooltip al pasar el cursor */
    .card-moderna__info-icon:hover::after,
    .card-moderna__info-icon:hover::before {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}


/* 📱 3. VISTA MÓVIL (Restricciones para pantallas menores a 768px) */
@media (max-width: 767.98px) {
    
    /* Desaparición absoluta de notas de texto en entornos táctiles */
    .card-moderna__info-icon,
    #infoIconoDesvinculados.card-moderna__info-icon {
        display: none !important;
    }

    /* Estructura del contenedor del ícono en teléfonos */
    .dashboard-icons-grid > div .card-moderna__icono {
        width: 55px;
        height: 55px;
        margin: 0 auto 12px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: color-mix(in srgb, var(--color-primario) 8%, transparent);
        border-radius: 14px;
        flex-shrink: 0;
    }
}

.card-kpi {
  border: none;
  border-radius: 0.75rem;
  transition: transform 0.2s ease-in-out;
  background: #fff;
}

.card-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.text-gray-300 {
  color: #dddfeb !important;
}

.text-gray-800 {
  color: #5a5c69 !important;
  font-size: 1.5rem;
}

.text-xs {
  font-size: .8rem;
}

/* Buscador Expansible DataTables */
.dataTables_filter input {
  width: 140px !important;
  /* Tamaño inicial compacto */
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
}

.dataTables_filter input:focus {
  width: 240px !important;
  /* Tamaño expandido */
  border-color: var(--primary, #009da5) !important;
  box-shadow: 0 0 0 3px rgba(0, 157, 165, 0.15) !important;
}


/* =============================================
   DISEÑO RESPONSIVO (ESTRUCTURA AGRUPADA)

  max-width: 380px

  (min-width: 992px) (para el sidebar)

  (max-width: 768px) (para los botones del form)

  (min-width: 768px) (para el padding del form, tabs, datatables...)

 (min-width: 1200px) (para el container de la row)

   ============================================= */


/* ==============================================
    AJUSTES MÓVILES PARA MAJO (Max-width 768px)
   ============================================== */
@media (max-width: 768px) {

  .majo-wrapper {
    bottom: 30px !important;

    /* CAMBIO: De right a left */
    left: 20px !important;
    right: auto !important;

    /* Dimensiones fijas para evitar el óvalo */
    width: 50px !important;
    height: 50px !important;

    /* Asegura que no haya márgenes extraños */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Aseguramos que el botón hijo llene el wrapper perfectamente */
  .btn-flotante-ia {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    padding: 0 !important;
    /* Clave para quitar el óvalo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. Ajustar tamaño de satélites */
  .btn-satelite {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  /* 3. RECALCULAR ÓRBITAS (Hacia la DERECHA ahora) */

  /* Satélite Validar (Arriba - 12 en punto) */
  .majo-wrapper.menu-abierto #btnSatValidar {
    transform: translate(0px, -80px) scale(1);
  }

  /* Satélite Expandir (Diagonal Arriba-Derecha) */
  /* Antes era -40px (izquierda), ahora es 40px (derecha) */
  .majo-wrapper.menu-abierto #btnSatExpandir {
    transform: translate(40px, -70px) scale(1);
  }

  /* Satélite Resumir (Diagonal Derecha-Arriba) */
  /* Antes era -70px (izquierda), ahora es 70px (derecha) */
  .majo-wrapper.menu-abierto #btnSatResumir {
    transform: translate(70px, -40px) scale(1);
  }

  /* Satélite Ortografía (Derecha - 3 en punto) */
  /* Antes era -80px (izquierda), ahora es 80px (derecha) */
  .majo-wrapper.menu-abierto #btnSatOrtografia {
    transform: translate(80px, 0px) scale(1);
  }

  /* Arreglo para botones de formulario */
  .form-sheet .d-flex.justify-content-between {

    gap: 0px;
  }

  .form-sheet .d-flex.justify-content-between .btn {
    width: 100%;
  }


  .dataTables_filter {
    text-align: right !important;
    /* O center, según prefieras en móvil */
    width: 100% !important;
  }



  .page-title {
    margin-left: 10px !important;
    font-size: 1.1rem !important;
  }

  .container {
    /* Bajamos de 15px (original) a 10px */
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  

}

  .page-title {
    font-size: 1.3rem;
    /* Un tamaño de fuente prominente pero no excesivo */
    color: #343a40;
    /* El color de texto principal oscuro */
    margin-bottom: 0px;
    /* Espacio entre el título y las tarjetas de abajo */
    padding-top: 5px;
    /* Un poco de espacio vertical */
    margin-left: 100px;
    margin-bottom: 0;
  }


/* 4. ESCRITORIO EXTRA GRANDE (min-width: 1200px) */
@media (min-width: 1200px) {

  /* Contenedor/Constrainer para filas centradas */
  .row.d-flex.justify-content-center {
    max-width: 1100px;
    margin: 0 auto;
  }
}

@media (max-width: 991px) {
    header.header .navbar {
        background: rgba(255, 255, 255, 0.0) !important;
        border-bottom: none !important;
        box-shadow: none !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        padding: 10px 20px !important;
    }
}


/* =============================================
   ESTRUCTURA DE CAPAS (Z-INDEX MASTER) - ACTUALIZADO
   ============================================= */

/* Navbar (Referencia): Bootstrap lo tiene en 1030 */

/* Nivel 1: Sidebar y Header */
/* SUBIMOS de 900 a 1035 para ganararle al Navbar (1030) */
#sidebar,
header.header {
  z-index: 1035 !important;
}

/* Nivel 2: Oscurecimiento de pantalla (Backdrop) */
/* Se mantiene en 1040, así que el sidebar queda DEBAJO de la oscuridad modal */
.modal-backdrop {
  z-index: 1040 !important;
}

/* Nivel 3: Ventanas Modales */
.modal {
  z-index: 1050 !important;
}

/* Nivel 4: Alertas del Sistema */
.swal2-container {
  z-index: 1060 !important;
}

/* ========================================================
   BLINDAJE DE MODAL SOBRE MODAL (BOOTSTRAP)
   ======================================================== */
/* Si se abre un segundo modal, su fondo oscuro tendrá mayor prioridad */
.modal-backdrop:nth-of-type(2) {
    z-index: 1055 !important;
}

/* =========================================
   ELEMENTOS INTERNOS (Badges y Botones)
   ========================================= */

/* ==========================================================================
   BOTÓN AGREGAR ASISTENTE (AVATAR ADD)
   ========================================================================== */
.btn-avatar-add {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #ffffff;
  /* Color dinámico protegido contra el inherit */
  color: var(--color-primario) !important;
  /* Borde dinámico usando color-mix */
  border: 1px solid color-mix(in srgb, var(--color-primario) 30%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.btn-avatar-add:hover {
  background-color: var(--color-primario);
  color: #ffffff !important;
  transform: scale(1.1);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--color-primario) 30%, transparent);
}

/* --- ADAPTACIÓN MODO OSCURO --- */
body.dark-mode .btn-avatar-add {
  /* Fondo oscuro teñido sutilmente con el color corporativo */
  background-color: color-mix(in srgb, var(--color-primario) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primario) 25%, transparent);
  color: var(--color-primario) !important;
}

body.dark-mode .btn-avatar-add:hover {
  background-color: var(--color-primario);
  color: #ffffff !important;
}

/* Estado Click */
.btn-avatar-add:active {
  transform: scale(0.95);
}


/* Variación: SUBIR/CARGAR (Verde) */
.btn-accion.subir {
  background-color: #d1e7dd;
  /* Verde muy suave */
  color: #198754;
  /* Verde Bootstrap */
}

.btn-accion.subir:hover {
  background-color: #198754;
  color: #ffffff;
}

/* Alias para botón PDF (mismo estilo que eliminar/rojo) */
.btn-accion.pdf {
  background-color: #e0f7fa;
  /* Turquesa muy suave */
  color: #d32f2f;
  /* Turquesa oscuro */
  border: 1px solid transparent;
}

.btn-accion.pdf:hover {
  background-color: #0097a7;
  color: #ffffff;
}

/* Ajuste para el botón principal */
.btn-seg-turquesa {
  background-color: #00838a;
  color: white;
  border: none;
}

.btn-seg-turquesa:hover {
  background-color: #006d73;
  color: white;
}


/* Estilo del botón */
.nav-link-moderno {
  border-radius: 50px !important;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s ease;
  padding: 10px 20px;

  /* IMPORTANTE: Evita que el texto del botón se parta en dos líneas */
  white-space: nowrap;
  text-transform: none !important;
}

/* ... (El resto de estilos hover y active se mantienen igual) ... */
.nav-link-moderno:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.03);
  color: #495057;
}

.nav-link-moderno.active {
  background-color: #ffffff !important;
  color: #212529 !important;
  font-weight: 700 !important;
  transform: scale(1.02);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Agregué sombra suave */
}

/* BOTÓN COMPARTIR (Azul) */
.btn-accion.compartir {
  background-color: #e3f2fd;
  /* Azul muy pálido */
  color: #2f71bd;
  /* Azul intenso */
  border: 1px solid transparent;
}

.btn-accion.compartir:hover {
  background-color: #1565c0b1;
  color: #ffffff;
}


/* --- ESTILO PAGINACIÓN SEGGES (MÓVIL Y PC) --- */


.no-transition,
.no-transition * {
  transition: none !important;
  animation: none !important;
}

/* =========================================
   CORRECCIÓN FINAL MÓVIL (Alineación Horizontal)
   ========================================= */


/* ==================================================
   ESTILO BOTÓN REDONDO (UNIVERSAL)
   ================================================== */
/* Aplicamos estilos base directamente a la clase, sin depender del padre */
.btn-redondo {
  /* 1. TAMAÑO FIJO E IMPORTANTE (Para vencer reglas de width: 100%) */
  width: 34px !important;
  height: 34px !important;
  /* Un poquito más alto para que sea cuadrado perfecto */
  max-width: 34px !important;

  /* 2. EVITAR ESTIRAMIENTO FLEX (Crucial para la Hoja 2) */
  flex: 0 0 auto !important;

  /* 3. CENTRADO DEL ICONO */
  display: inline-flex !important;
  /* inline-flex permite que conviva con textos */
  align-items: center;
  justify-content: center;

  /* 4. ESTÉTICA */
  border-radius: 16px !important;
  /* O 50% si lo quieres totalmente circular */
  padding: 0 !important;
  /* Quitamos padding interno */
  margin-left: 10px;
  /* Un pequeño aire a la izquierda por defecto */
  margin-bottom: 5px;
}

/* AJUSTE PARA CUANDO ESTÁN EN GRUPO (HOJA 1) */
/* En la hoja 1 están pegaditos, así que reducimos el margen */
.btn-group-sm>.btn-redondo {
  margin-left: 2px;
  margin-right: 2px;
  height: 34px !important;
  /* Mantenemos la altura original compacta para la barra de herramientas */
}

.border {
  border: none !important;
}

/* Corrección para centrado perfecto en Modal Header */
@media (min-width: 576px) {

  /* Solo aplica en pantallas que no sean celulares pequeños */
  .modal-header {
    position: relative;
    /* Necesario para que el hijo absoluto se guíe por esto */
  }

  .controles-absolutos {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Esto calcula el centro exacto matemático */
  }
}


/* =======================================================
   1. CONTENEDORES PRINCIPALES (Login y Recuperar)
   ======================================================= */

#cuadro_login,
#cuadro_recuperar {
  position: relative;
  z-index: 5;

  /* --- ESTÉTICA: Diseño Limpio y Corporativo (SaaS) --- */
  background: #ffffff;
  border-radius: 16px;
  /* Curvas modernas pero profesionales */
  /* Sombra difusa para levantar la tarjeta del fondo */
  box-shadow: 0 15px 35px rgba(0, 60, 70, 0.15);
  border: none;
  /* Sin bordes, solo sombra */

  /* Espaciado interno para dar aire */
  padding-top: 1.5rem !important;

  /* --- ANIMACIÓN: Estado INICIAL (Invisible) --- */
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Estado VISIBLE (Activado por JS) */
#cuadro_login.visible,
#cuadro_recuperar.visible {
  opacity: 1;
  transform: scale(1);
}

/* Contenedor interno del login (flotando sobre ondas) */
#contenedor_login {
  position: relative;
  z-index: 10;
}

/* =======================================================
   2. ELEMENTOS VISUALES (Logo y Títulos)
   ======================================================= */

#logo-login {
  margin-top: -25px;
  margin-bottom: 5px;
  position: relative;
  z-index: 10;
  /* Eliminamos padding extra si existía */
  padding-bottom: 0 !important;
}

.login-title {
  font-weight: 600;
  color: #4C4E56;
  /* Gris corporativo oscuro */
  text-align: center;
  margin-top: 10px;
  margin-bottom: 1.2rem;
  font-size: 1.2rem;
}

/* Enlaces (Olvidaste contraseña / Volver) */
.login-link {
  display: block;
  text-align: center;
  margin-top: 1.0rem;
  background: none;
  border: none;
  color: #00838a;
  /* Color corporativo */
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s;
}

.login-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* =======================================================
   3. FORMULARIOS E INPUTS
   ======================================================= */

/* Estilo Base de Inputs */
.form-control {
  background-color: #f8f9fa;
  /* Gris muy sutil de fondo */
  border: 1px solid #ced4da;
  height: 40px;
  min-width: 50px;
  /* Inputs más altos para mejor tacto */
  border-radius: 20px;
  /* Redondeo estándar */
  padding: 5px 15px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

/* Estado Focus (Al escribir) */
.form-control:focus {
  background-color: #fff;
  border-color: #009da5;
  /* Turquesa corporativo */
  box-shadow: 0 0 0 3px rgba(0, 157, 165, 0.15);
  /* Anillo de brillo */
  outline: none;
}

/* --- Variación: Inputs con Íconos (Estilo Píldora) --- */
.input-con-icono {
  position: relative;
}

.input-con-icono .icono-input {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  /* Gris suave */
  pointer-events: none;
  z-index: 2;
}

/* Sobrescribimos el input cuando está dentro de un contenedor con ícono */
#cuadro_login .input-con-icono .form-control {
  border-radius: 50px;
  /* Píldora completa */
  padding-left: 45px;
  /* Espacio para el ícono */
}

/* Helpers de espacio */
.form-group-compacto {
  margin-bottom: 1.0rem !important;
}


/* =======================================================
   5. BOTÓN PWA (Instalar App)
   ======================================================= */

#btnInstalar {
  background: transparent;
  border: none;
  color: #6c757d;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 8px 15px;
  margin-top: 15px;

  /* Centrado y visibilidad */
  display: none;
  /* Oculto por defecto */
  margin-left: auto;
  margin-right: auto;
  width: auto;

  cursor: pointer;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.3s ease;
}

#btnInstalar:hover {
  color: #00838a;
  background-color: rgba(0, 131, 138, 0.05);
  border-radius: 20px;
  opacity: 1;
  transform: translateY(-1px);
}

#btnInstalar i {
  margin-right: 6px;
  color: #00838a;
}

/* Ajuste móvil para botón PWA */
@media (max-width: 380px) {
  #btnInstalar {
    font-size: 0.8rem;
    padding: 8px 15px;
  }
}

/* =======================================================
   6. MENSAJES DE ERROR Y ANIMACIONES
   ======================================================= */

/* Espacio reservado para texto de ayuda debajo de inputs */
#cuadro_login .form-text {
  display: block;
  min-height: 15px;
  padding-left: 15px;
  /* Alineado con el padding del input */
  font-size: 0.75rem;
  color: var(--color-peligro);
  margin-top: 4px;
}

/* Contenedor de error general */
.login-error-container {
  min-height: 22px;
  text-align: center;
  color: var(--color-peligro);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-bottom: 10px;
}

/* Animación de Vibración (Shake) para el INPUT */
.input-error-shake {
  animation: softShake 0.7s ease-in-out;
  border-color: #dc3545 !important;
  /* Tiñe el borde de rojo */
}

/* Keyframes para el INPUT (Solo movimiento horizontal) */
@keyframes softShake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  75% {
    transform: translateX(6px);
  }
}

/* ---------------------------------------------------------
   ANIMACIÓN ESPECIAL PARA EL ICONO (Para que no se caiga)
   --------------------------------------------------------- */

/* Keyframes para el ICONO (Horizontal + Mantiene centrado vertical) */
@keyframes iconSoftShake {

  0%,
  100% {
    transform: translate(0, -50%);
  }

  25% {
    transform: translate(-6px, -50%);
  }

  75% {
    transform: translate(6px, -50%);
  }
}

/* Regla Mágica: Si el input tiembla, el icono también (usando la animación especial) */
.input-con-icono:has(.input-error-shake) .icono-input {
  animation: iconSoftShake 0.7s ease-in-out;
  color: var(--color-peligro);
  /* Rojo de error */
  transform-origin: center;
}

@media (max-width: 767px) {

  .todoelalto {
    /* 1. LA CLAVE: Dejamos de centrar verticalmente.
           Ahora alineamos todo al "Techo" (inicio). */
    align-items: flex-start !important;

    /* 2. EL ANCLAJE: Empujamos el contenido hacia abajo una distancia fija.
           120px suele ser el punto visual perfecto. 
           Como es fijo, el teclado NO afecta esta medida. */
    padding-top: 70px !important;

    /* Aseguramos que el fondo cubra todo aunque haya scroll */
    height: auto !important;
    min-height: 100vh !important;
  }

  /* 3. LIMPIEZA: Quitamos el truco del margen negativo anterior
       porque ya no lo necesitamos (ahora usamos padding arriba). */
  #cuadro_login,
  #cuadro_recuperar {
    margin-top: 0 !important;
  }
}

/* =======================================================
   BOTÓN LOGIN (FUSIÓN: ESTRUCTURA FULL + ESTILO GRADIENTE)
   ======================================================= */

.btn-login-moderno {
  /* 1. ESTRUCTURA (Obligatorio para el Login) */
  width: 100% !important;
  display: block !important;
  text-align: center !important;

  /* 2. ESTILO VISUAL (El diseño vibrante que me pasaste) */
  /* Gradiente Turquesa Oscuro -> Brillante -> Oscuro */
  background-image: linear-gradient(to right, #006b72 0%, #009da5 51%, #006b72 100%) !important;
  background-size: 200% auto !important;
  /* Clave para la animación */

  color: #ffffff !important;
  border: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  border-radius: 32px !important;

  /* Ajuste de Padding: Usamos 12px arriba/abajo para que el botón tenga buena altura */
  padding: 12px 0 !important;

  /* 3. SOMBRA CON GLOW */
  box-shadow: 0 4px 15px rgba(0, 157, 165, 0.35) !important;
  transition: all 0.4s ease !important;
}

/* --- ESTADO HOVER (ANIMACIÓN) --- */
.btn-login-moderno:hover:not(:disabled) {
  /* Mueve el gradiente hacia la derecha */
  background-position: right center !important;

  /* Efecto de elevación */
  transform: translateY(-2px) !important;

  /* Intensifica el brillo */
  box-shadow: 0 8px 20px rgba(0, 157, 165, 0.6) !important;

  color: #ffffff !important;
}

/* --- ESTADO DESHABILITADO --- */
.btn-login-moderno:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  /* Quitamos efectos al estar deshabilitado */
  transform: none !important;
  box-shadow: none !important;
}

/* =======================================================
   ESTILO DIGITO VERIFICADOR (Fusión Estilo + Forma)
   ======================================================= */

.form-group input[type="text"]+input[type="text"] {

  /* 1. ESTRUCTURA */
  width: 35px !important;
  border-radius: 20px !important;
  text-align: center !important;
  margin-left: 10px !important;
  padding: 0 !important;

  /* 2. ESTILOS VISUALES */
  /* Cambié el fondo a #e9ecef (gris standard de 'readonly') para que se note bloqueado */
  background-color: #e9ecef !important;
  color: #495057 !important;
  text-transform: uppercase;
  border: 1px solid #ced4da;

  /* 3. ALINEACIÓN */
  display: inline-block !important;
  vertical-align: middle !important;

  /* 4. BLOQUEO TOTAL (NUEVO)  */
  pointer-events: none !important;
  /* Evita clics y escritura con el mouse */
  user-select: none !important;
  /* Evita que seleccionen el texto */
  outline: none !important;
  /* Quita bordes de selección */
}

/* NOTA: Como ahora está bloqueado, el estilo :focus ya no es necesario para este input,
   pero no estorba si lo dejas para otros inputs del sistema. */

/* =======================================================
   AJUSTE PARA PWA SIN BORDES (Window Controls Overlay)
   ======================================================= */

/* 1. Definimos el área segura para el título (dejando espacio a los botones de Windows) */
@media (display-mode: window-control-overlay) {

  /* Esto hace que tu barra superior (si tienes una) deje espacio a la derecha
       para que no choque con los botones de cerrar/minimizar */
  .tu-barra-superior-o-header {
    padding-right: env(titlebar-area-x, 100px) !important;
    /* Opcional: Agregar un área arrastrable para mover la ventana */
    app-region: drag;
    -webkit-app-region: drag;
  }

  /* Aseguramos que los botones dentro del header sigan siendo clicables 
       (porque la propiedad 'drag' a veces bloquea los clics) */
  .tu-barra-superior-o-header button,
  .tu-barra-superior-o-header a,
  .tu-barra-superior-o-header input {
    app-region: no-drag;
    -webkit-app-region: no-drag;
  }
}

/* ==========================================================
   ANIMACIÓN DE PULSO PARA EL STEPPER ACTIVO
   ========================================================== */

/* Definimos el efecto de "latido" usando el color turquesa */
@keyframes latidoStepper {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 157, 165, 0.5);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(0, 157, 165, 0);
    /* Se expande y se desvanece */
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 157, 165, 0);
  }
}

/* Ajustes de Limpieza y UX */
.config-section-box {
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.02);
  /* Fondo sutil en modo claro */
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
}

.item-config-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eef2f5;
}

.config-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

/* Selector de Color Premium */
.color-picker-wrapper {
  width: 50px;
  height: 45px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #eef2f5;
}

.color-picker-wrapper input[type="color"] {
  border: none;
  width: 150%;
  height: 150%;
  cursor: pointer;
  transform: translate(-20%, -20%);
}

.btn-preview-modern {
  background-color: var(--color-primario);
  color: white;
  border-radius: 10px;
  height: 45px;
  padding: 0 20px;
  font-weight: 600;
  transition: all 0.2s;
}

/* ========================================================= */
/* MODO OSCURO: CORRECCIÓN UX                                */
/* ========================================================= */
body.dark-mode .config-section-box {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .item-config-control {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .item-config-control:has(input:checked) {
  background-color: color-mix(in srgb, var(--color-primario) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primario) 20%, transparent);
}

body.dark-mode .color-picker-wrapper {
  border-color: #444;
}

/* Bloqueo visual del selector de color */
#contenedorColorPersonalizado {
  transition: all 0.3s ease;
}

.selector-color-deshabilitado {
  opacity: 0.4;
  pointer-events: none;
  /* Bloquea clics en el input y el botón */
  filter: grayscale(80%);
  /* Lo vuelve grisáceo para enfatizar que está bloqueado */
}

body.bloquear-scroll {
  overflow: hidden !important;
}

/* ==========================================================================
   VISTA PREVIA Y SWEETALERT 2 - SCROLLBAR NATIVO DINÁMICO
   ========================================================================== */

/* 1. Comportamiento del contenedor de texto (Aplica a ambos modos) */
.swal-moderno .swal2-html-container,
#contenidoVistaPrevia {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Evita scrolls horizontales accidentales */
  max-height: 60vh !important;
  padding-right: 5px;
}

/* 2. Color Scheme - MODO CLARO (Por Defecto) */
/* Fuerza la barra nativa clara en las alertas y en tu modal */
.swal-moderno,
#modalVistaPrevia {
  color-scheme: light;
}

/* 3. Color Scheme - MODO OSCURO (Dinámico) */
/* Solo cuando el body tiene .dark-mode, la barra pasa a ser oscura */
body.dark-mode .swal-moderno,
body.dark-mode #modalVistaPrevia {
  color-scheme: dark;
}

/* Animación para la alerta motivacional del Relator */
@keyframes latidoRelator {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primario) 40%, transparent); }
    70% { box-shadow: 0 0 0 15px color-mix(in srgb, var(--color-primario) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primario) 0%, transparent); }
}

.circulo-latido-relator {
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    background: color-mix(in srgb, var(--color-primario) 10%, transparent); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    animation: latidoRelator 2s infinite;
}

/* Efecto Premium de Retroiluminación para el Editor */
@keyframes destelloExito {
    0% { box-shadow: 0 0 0 0 transparent; border-color: #ced4da; }
    20% { box-shadow: 0 0 15px 2px var(--color-primario); border-color: var(--color-primario); }
    100% { box-shadow: 0 0 0 0 transparent; border-color: #ced4da; }
}

.animacion-editor-actualizado {
    animation: destelloExito 1.5s ease-out !important;
    border-radius: 4px; /* Para que el brillo siga la forma del editor */
}

/* =========================================
   MÓDULO PERSONALIZADO: CALENDARIO PREVIEW
   ========================================= */

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
}

.cal-header {
    font-size: 0.7rem;
    font-weight: bold;
    color: #6c757d;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 5px;
}

.cal-dia {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 6px 2px;
    font-size: 0.8rem;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.2s;
}

.cal-dia.inactivo {
    background: transparent;
    color: #adb5bd;
    border-color: transparent;
}

.cal-dia.hoy {
    border-color: color-mix(in srgb, var(--color-primario) 50%, transparent);
    background-color: color-mix(in srgb, var(--color-primario) 5%, transparent);
    font-weight: bold;
}

.cal-dia.plazo {
    border: 2px solid var(--color-peligro);
    background-color: #fffafb;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.1);
}

.cal-tarea-badge {
    background-color: var(--color-primario);
    color: white;
    border-radius: 12px;
    font-size: 0.65rem;
    padding: 2px 6px;
    margin-top: 4px;
    display: inline-block;
    width: 85%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-tarea-critica {
    background-color: var(--color-peligro);
}

/* =========================================
   DARK MODE - CALENDARIO PREVIEW
   ========================================= */

.dark-mode .cal-header {
    color: #adb5bd;
    border-bottom: 1px solid #495057;
}

.dark-mode .cal-dia {
    background: #212529;
    border: 1px solid #343a40;
    color: #f8f9fa;
}

.dark-mode .cal-dia.inactivo {
    background: transparent;
    color: #495057;
    border-color: transparent;
}

.dark-mode .cal-dia.hoy {
    border-color: color-mix(in srgb, var(--color-primario) 80%, transparent);
    background-color: color-mix(in srgb, var(--color-primario) 15%, transparent);
    color: #ffffff;
}

/* =================================================================
   LEYENDA "HOY" (Sincronizado con el Calendario)
   ================================================================= */
.leyenda-hoy-svg {
    stroke: color-mix(in srgb, var(--color-primario) 50%, transparent);
    fill: color-mix(in srgb, var(--color-primario) 5%, transparent);
}

body.dark-mode .leyenda-hoy-svg {
    stroke: color-mix(in srgb, var(--color-primario) 80%, transparent);
    fill: color-mix(in srgb, var(--color-primario) 15%, transparent);
}

.dark-mode .cal-dia.plazo {
    border: 2px solid #e74c3c;
    background-color: rgba(231, 76, 60, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode #bloqueVistaPreviaCalendario .card {
    background-color: #1e1e1e !important;
}

.dark-mode #bloqueVistaPreviaCalendario .text-dark {
    color: #f8f9fa !important;
}

.dark-mode #bloqueVistaPreviaCalendario .text-muted {
    color: #adb5bd !important;
}