/* ==========================================================================
   Hoja de Estilos Globales para la Aplicación 
   Versión: 1.2.4 (Se reorganizaron las clases y se comentaron para mejor visualizacion)
   Ruta:   public/assets/estilos.css
   ========================================================================== */

/* --- Importación de Fuentes --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   Variables CSS Globales y Paleta de Colores Personalizada (Bootstrap Theme)
   ========================================================================== */ 
:root,
[data-bs-theme=light] {
   /* ... (TODA TU PALETA DE COLORES Y VARIABLES PERMANECE IGUAL) ... */
   --bs-blue: #007bff; 
   --bs-indigo: #6610f2;
   --bs-purple: #6f42c1;
   --bs-pink: #e83e8c;
   --bs-red: #dc3545;
   --bs-orange: #fd7e14;
   --bs-yellow: #ffc107;
   --bs-green: #28a745;
   --bs-teal: #20c997;
   --bs-cyan: #17a2b8;
   --bs-black: #000;
   --bs-white: #fff;
   --bs-gray: #6c757d;
   --bs-gray-dark: #343a40;
   --bs-primary: #517410;
   --bs-secondary: #869286;
   --bs-success: #259c2b;
   --bs-info: #87e9b3;
   --bs-warning: #FFCC80;
   --bs-naranjita: #ee8f13;
   --bs-danger: #ca1818;
   --bs-light: #dfe9e1;
   --bs-dark: #1e470f;
   --bs-primary-rgb: 81, 116, 16;
   --bs-secondary-rgb: 134, 146, 134;
   --bs-success-rgb: 37, 156, 43;
   --bs-info-rgb: 135, 233, 179;
   --bs-warning-rgb: 255, 204, 128;
   --bs-danger-rgb: 202, 24, 24;
   --bs-light-rgb: 223, 233, 225;
   --bs-dark-rgb: 30, 71, 15;
   --bs-primary-text-emphasis: #2A3C0A;
   --bs-secondary-text-emphasis: #3A413A;
   --bs-success-text-emphasis: #0F3D11;
   --bs-info-text-emphasis: #2E7551;
   --bs-warning-text-emphasis: #66512C;
   --bs-danger-text-emphasis: #6A0808;
   --bs-light-text-emphasis: #495057;
   --bs-dark-text-emphasis: #C5E3BA;
   --bs-primary-bg-subtle: #E0EBD8;
   --bs-secondary-bg-subtle: #E6E9E6;
   --bs-success-bg-subtle: #D4F0D5;
   --bs-info-bg-subtle: #DDF8E9;
   --bs-warning-bg-subtle: #FFF3E0;
   --bs-danger-bg-subtle: #F5D0D0;
   --bs-light-bg-subtle: #f7f9f7;
   --bs-dark-bg-subtle: #D1DCD0;
   --bs-primary-border-subtle: #C1D6AE;
   --bs-secondary-border-subtle: #CED4CE;
   --bs-success-border-subtle: #B2E0B4;
   --bs-info-border-subtle: #BBEFD7;
   --bs-warning-border-subtle: #FFE0B2;
   --bs-danger-border-subtle: #EDB8B8;
   --bs-light-border-subtle: #d8e0d9;
   --bs-dark-border-subtle: #A8B7A5;
   --bs-btn-hover-border-color: transparent;


   /* -----------------------------------------------------------
      PALETA DE COLOR SECCION HERO Y PORQUE NOSOTROS
   -------------------------------------------------------------- */
   --sep-primary-green: #285943;
   /* Verde bosque oscuro */
   --sep-primary-green-rgb: 40, 89, 67;
   --sep-secondary-green: #A5C8A1;
   /* Verde salvia claro */
   --sep-accent-gold: #D4AF37;
   /* Dorado suave para CTAs */
   --sep-accent-gold-rgb: 212, 175, 55;
   --sep-text-dark: #343a40;
   /* Gris oscuro para texto (Bootstrap dark) */
   --sep-text-light: #f8f9fa;
   /* Blanco hueso para texto sobre fondos oscuros (Bootstrap light) */
   --sep-white: #FFFFFF;
   --sep-light-subtle: #f4f8f3;
   /* Un verde muy muy claro o grisáceo para fondos de sección */
   --sep-hero-overlay: rgba(var(--sep-primary-green-rgb), 0.75);
   /* Overlay para el hero */

   --sep-verde-pastel: rgba(240, 255, 240, 0.75);
      /* Un verde muy claro, casi blanco */
   --sep-verde-pastel-solido: #f0fff0;
      /* El mismo pero sin transparencia */
   --sep-verde-pastel-intenso: #e6ffe6;
      /* Un poco más visible */

   /* --- NUEVA PALETA DE VERDES SEPI (Ejemplos) --- */
      --sep-verde-muy-claro: #e6f5e6;
      /* Verde muy pálido, casi grisáceo */
      --sep-verde-claro-menta: #cce8cc;
      /* Verde menta suave */
      --sep-verde-medio-claro: #a5d6a7;
      /* Verde medio claro, fresco */
      --sep-verde-oliva-claro: #bacc81;
      /* Verde oliva claro, más terroso */
      --sep-verde-principal: var(--bs-primary);
      /* #517410 - Tu verde primario actual */
      --sep-verde-medio-oscuro: #38520c;
      /* Un tono más oscuro que el primario */
      --sep-verde-bosque: var(--sep-primary-green);
      /* #285943 - Tu verde bosque oscuro actual */
      --sep-verde-muy-oscuro: var(--bs-dark);
      /* #1e470f - Tu verde más oscuro actual */

      --sep-verde-overlay: rgba(246, 255, 242, 0.65);


}

/* ==========================================================================
   Estilos Base del Body y HTML
   ========================================================================== */
*{
   font-family: "Roboto Condensed", "Verdana", sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


html {
   scroll-behavior: smooth;
}

body{
   font-family: "Roboto Condensed", "Verdana", sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /*background-color: #ececec;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
   min-height: 100vh;
   position: relative;*/
}

/*body::before {
   content: "";
   background-color: rgba(255, 255, 255, 0.1);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   pointer-events: none;
}*/

.background-wrapper-fixed {
   /* Un nuevo div que envuelva todo tu contenido dentro del body */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

nav.navbar {
   background-color: var(--bs-dark) !important;
}

.nav-link {
   text-decoration: none !important;
}

.dropdown-item {
   text-decoration: none !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
   background-color: var(--bs-primary-bg-subtle);
   color: var(--bs-primary-text-emphasis);
}

.loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.85);
   z-index: 1056;
   display: flex;
   justify-content: center;
   align-items: center;
}

.loading-box {
   background-color: var(--bs-white);
   padding: 30px 40px;
   border-radius: 8px;
   box-shadow: 0 5px 15px rgba(var(--bs-black-rgb), 0.2);
   text-align: center;
   max-width: 380px;
   border: 1px solid var(--bs-light-border-subtle);
   color: var(--bs-primary);
}

.loading-box p {
   margin-bottom: 0.5rem;
   line-height: 1.4;
}

.loading-box p.text-muted {
   color: var(--bs-secondary-text-emphasis) !important;
}

.loading-box p.text-primary {
   color: var(--bs-primary) !important;
}

.spinner {
   border: 6px solid var(--bs-light-bg-subtle);
   border-top: 6px solid var(--bs-primary);
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
   margin: 0 auto 1rem;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

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

/* ==========================================================================
   Sobrescritura de Estilos de Botones Bootstrap (Usando Paleta )
   ========================================================================== */
/* ... (SIN CAMBIOS EN ESTA SECCIÓN, DESDE .btn-primary HASTA .btn-dark) ... */
.btn-primary {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-primary);
   --bs-btn-border-color: var(--bs-primary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #3E580C;
   --bs-btn-hover-border-color: #32470A;
   --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #32470A;
   --bs-btn-active-border-color: #263507;
}

.btn-secondary {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-secondary);
   --bs-btn-border-color: var(--bs-secondary);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #707A70;
   --bs-btn-hover-border-color: #656F65;
   --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #656F65;
   --bs-btn-active-border-color: #5A635A;
}

.btn-success {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-success);
   --bs-btn-border-color: var(--bs-success);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #1A741E;
   --bs-btn-hover-border-color: #135816;
   --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #135816;
   --bs-btn-active-border-color: #0B3C0D;
}

.btn-info {
   --bs-btn-color: var(--bs-text-dark);
   --bs-btn-bg: var(--bs-info);
   --bs-btn-border-color: var(--bs-info);
   --bs-btn-hover-color: var(--bs-text-dark);
   --bs-btn-hover-bg: #6FDDB0;
   --bs-btn-hover-border-color: #5BCFA0;
   --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
   --bs-btn-active-color: var(--bs-text-dark);
   --bs-btn-active-bg: #5BCFA0;
   --bs-btn-active-border-color: #4ABF90;
}

.btn-warning {
   --bs-btn-color: #000;
   --bs-btn-bg: var(--bs-warning);
   --bs-btn-border-color: var(--bs-warning);
   --bs-btn-hover-color: #000;
   --bs-btn-hover-bg: #FFB74D;
   --bs-btn-hover-border-color: #FFA726;
   --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
   --bs-btn-active-color: #000;
   --bs-btn-active-bg: #FFA726;
   --bs-btn-active-border-color: #FB8C00;
}

.btn-danger {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-danger);
   --bs-btn-border-color: var(--bs-danger);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #AE1414;
   --bs-btn-hover-border-color: #9E1212;
   --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #9E1212;
   --bs-btn-active-border-color: #881010;
}

.btn-light {
   --bs-btn-color: #000;
   --bs-btn-bg: var(--bs-light);
   --bs-btn-border-color: var(--bs-light);
   --bs-btn-hover-color: #000;
   --bs-btn-hover-bg: #cdd8ce;
   --bs-btn-hover-border-color: #becebd;
   --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
   --bs-btn-active-color: #000;
   --bs-btn-active-bg: #becebd;
   --bs-btn-active-border-color: #afc0b2;
}

.btn-dark {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-dark);
   --bs-btn-border-color: var(--bs-dark);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #133A0A;
   --bs-btn-hover-border-color: #0A2705;
   --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #0A2705;
   --bs-btn-active-border-color: #051A02;
}

/* ==========================================================================
   Estilos Específicos de Componentes y Secciones
   ========================================================================== */
/* ... (SIN CAMBIOS EN ESTA SECCIÓN, DESDE .link-condiciones HASTA a:hover) ... */ 
.link-condiciones {
   color: var(--bs-secondary-text-emphasis);
   font-size: 0.65rem !important;
   text-decoration: none !important;
   font-weight: bold;
}

.link-condiciones:hover {
   color: var(--bs-primary-text-emphasis) !important;
}

.text-naranja-1 {
   color: var(--bs-naranjita);
}

.titulocabecera {
   margin-top: 4rem;
   margin-bottom: 2rem;
   padding: 1rem 1.5rem;
   background-image: linear-gradient(to right, rgba(var(--bs-light-rgb), 0.1), rgba(var(--bs-light-rgb), 0.9), rgba(var(--bs-light-rgb), 0.1));
   box-shadow: 0 2px 8px rgba(var(--bs-black-rgb), 0.05);
   text-align: center;
   color: var(--bs-primary-text-emphasis);
   border-radius: var(--bs-border-radius);
}

.bg-titular-sec{
   padding: 1rem 1.5rem;
   background-image: linear-gradient(to right, rgba(var(--bs-light-rgb), 0.1), rgba(var(--bs-light-rgb), 0.9), rgba(var(--bs-light-rgb), 0.1));
}

.contenedor-main {
   margin: 2rem auto;
   padding: 25px;
   background-color: rgba(var(--bs-white-rgb), 0.98);
   min-height: 400px;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(var(--bs-black-rgb), 0.1);
   overflow-wrap: break-word;
   border: 1px solid var(--bs-border-color-translucent);
}

.separador-60px {
   padding-top: 60px !important;
}

.separador-160px {
   padding-top: 160px !important;
}

.separador-200px {
   padding-top: 200px !important;
}

.separador-250px {
   padding-top: 250px !important;
}

a {
   text-decoration: none !important;
   color: var(--bs-primary);
}

a:hover {
   color: var(--bs-primary-text-emphasis);
}

/* ==========================================================================
   Estilos Específicos del Login
   ========================================================================== */
.txt-tp-rol {
   color: var(--bs-naranjita);
}

.login-container {
   width: 100%;
   max-width: 500px;
   margin: 5% auto;
}

.forgot-password {
   color: var(--bs-danger);
}

.forgot-password:hover {
   color: var(--bs-danger-text-emphasis);
}

/* --- Estilos para Input Groups (Iconos y Campos) --- */
.input-group-text {
   background-color: #EAF4EB;
   border: 1px solid var(--bs-light-border-subtle);
   color: var(--bs-secondary-text-emphasis);
}

.input-group>.input-group-text:first-child {
   border-right: none;
}

.input-group>.form-control:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left: none;
}

.input-group>.form-control:not(:last-child) {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
}

.input-group>.input-group-text:last-child,
.input-group>button.password-toggle {
   /* Apunta a <button> con clase password-toggle */
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
}

/* --- Iconos de Ojo para Contraseña (Estilo Consistente y Foco Ajustado) --- */
.input-group>button.password-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--bs-border-color);
   /* Borde estándar de input-group */
   border-left: none;
   /* Para unirse al input */
   padding: 0.375rem 0.75rem;
   /* Padding estándar de Bootstrap */
   height: calc(1.5em + 0.75rem + 2px);
   /* Altura estándar de input Bootstrap md */
   line-height: 1.5;
   color: white !important;
   /* Icono siempre blanco */
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   /* Redondez derecha del grupo */
   border-top-right-radius: var(--bs-border-radius);
   border-bottom-right-radius: var(--bs-border-radius);
   cursor: pointer;
   outline: 0;
   /* Quitar outline por defecto del botón */
}

.input-group>button.password-toggle:focus {
   z-index: 5;
   /* Para que el shadow del foco se vea bien sobre el input */
   /* El box-shadow se define por estado (eye-hidden/eye-visible) y validación */
}

/* Estado: Contraseña OCULTA (botón "mostrar", verde oscuro) */
.input-group>button.password-toggle.eye-hidden {
   background-color: rgb(19, 54, 2);
   /* Tu verde oscuro original */
}

.input-group>button.password-toggle.eye-hidden:hover {
   background-color: rgb(32, 87, 5);
   /* Tu verde oscuro hover original */
}

.input-group>button.password-toggle.eye-hidden:focus {
   border-color: rgb(32, 87, 5);
   /* Borde para el foco */
   /* ** AJUSTE: box-shadow más sutil y coordinado ** */
   box-shadow: 0 0 0 0.2rem rgba(32, 87, 5, 0.35);
   /* Foco verde más sutil */
}

/* Estado: Contraseña VISIBLE (botón "ocultar", rojo) */
.input-group>button.password-toggle.eye-visible {
   background-color: rgb(194, 23, 23);
   /* Tu rojo original */
}

.input-group>button.password-toggle.eye-visible:hover {
   background-color: rgb(214, 7, 7);
   /* Tu rojo hover original */
}

.input-group>button.password-toggle.eye-visible:focus {
   border-color: rgb(214, 7, 7);
   /* Borde para el foco */
   /* ** AJUSTE: box-shadow más sutil y coordinado ** */
   box-shadow: 0 0 0 0.2rem rgba(214, 7, 7, 0.35);
   /* Foco rojo más sutil */
}

.input-group>button.password-toggle i { 
   color: white;
   /* Asegurar que el icono FontAwesome sea blanco */
   font-size: 0.9em;
   /* Ajustar tamaño del icono si es necesario */
}

/* --- Input Groups con Validación y Botón Ojo --- */
/* Cuando el input es inválido y tiene un botón ojo al lado */
.input-group:has(.form-control.is-invalid)>.input-group-text:first-child,
.input-group:has(.form-control.is-invalid)>button.password-toggle {
   border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
}

.input-group:has(.form-control.is-invalid)>.input-group-text:first-child {
   color: var(--bs-form-invalid-color, var(--bs-danger));
}

.input-group:has(.form-control.is-invalid)>button.password-toggle:focus {
   /* ** AJUSTE: Heredar box-shadow de validación del input ** */
   box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-danger-rgb), 0.25);
}

/* Cuando el input es válido y tiene un botón ojo al lado */
.input-group:has(.form-control.is-valid)>.input-group-text:first-child,
.input-group:has(.form-control.is-valid)>button.password-toggle {
   border-color: var(--bs-form-valid-border-color, var(--bs-success));
}

.input-group:has(.form-control.is-valid)>.input-group-text:first-child {
   color: var(--bs-form-valid-color, var(--bs-success));
}

.input-group:has(.form-control.is-valid)>button.password-toggle:focus {
   /* ** AJUSTE: Heredar box-shadow de validación del input ** */
   box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-success-rgb), 0.25);
}

/* --- Otros Estilos de Login --- */
.card-header-custom {
   background-color: var(--bs-primary);
   color: var(--bs-white);
}

/* ==========================================================================
   Estilos Específicos del Footer Público
   ========================================================================== */
/* ... (SIN CAMBIOS EN ESTA SECCIÓN, DESDE .pie-pagina HASTA .social-button-group :only-child) ... */
.pie-pagina {
   background-color: var(--bs-dark);
   color: var(--bs-light);
}

.pie-pagina .titulo-seccion {
   color: var(--bs-dark-text-emphasis);
   font-weight: 600;
   margin-bottom: 1rem;
   font-size: 1.1rem;
}

.pie-pagina .descripcion-empresa {
   color: #f0f0f0;
   font-size: 0.9rem;
   line-height: 1.6;
   text-align: justify;
}

.pie-pagina .lista-enlaces li {
   margin-bottom: 0.5rem;
   text-align: start;
}

.pie-pagina .enlace-pie {
   color: var(--bs-dark-text-emphasis);
   text-decoration: none;
   transition: color 0.3s ease, padding-left 0.3s ease;
}

.pie-pagina .enlace-pie:hover,
.pie-pagina .enlace-pie:focus {
   color: #A8D08D;
   text-decoration: none;
   padding-left: 5px;
}

.pie-pagina .info-contacto {
   color: var(--bs-light-bg-subtle);
   font-size: 0.9rem;
}

.pie-pagina .info-contacto li {
   display: flex;
   align-items: flex-start;
   margin-bottom: 0.7rem;
   color: var(--bs-light);
}

.pie-pagina .info-contacto li i {
   width: 20px;
   margin-top: 0.1em;
   flex-shrink: 0;
   color: var(--bs-primary);
}

.pie-pagina .linea-separadora {
   border-color: rgba(var(--bs-light-rgb), 0.15);
}

.pie-pagina .pie-final p {
   color: var(--bs-dark-text-emphasis);
   font-size: 0.85rem;
   margin-bottom: 0.5rem;
}

.social-button-group.btn-group {
   display: inline-flex;
}

.social-button-group .btn {
   color: white !important;
   border: none;
   padding-left: 0.8rem;
   padding-right: 0.8rem;
   padding-top: 0.3rem;
   padding-bottom: 0.3rem;
   margin: 0;
   border-radius: 50px;
   height: 32px;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: background-color 0.2s ease, transform 0.1s ease;
   font-size: 0.9rem;
   background-color: var(--social-color, var(--bs-secondary));
}

.social-button-group .btn:hover {
   color: white !important;
   background-color: var(--social-hover, var(--bs-gray));
   transform: scale(1.05);
}

.social-button-group.btn-group>.btn {
   position: relative;
}

.social-button-group.btn-group>.btn:not(:first-child) {
   margin-left: -1px;
}

.social-button-group.btn-group>.btn:not(:first-child):not(:last-child) {
   border-radius: 0;
}

.social-button-group.btn-group>.btn:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.social-button-group.btn-group>.btn:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

.social-button-group.btn-group>.btn:only-child {
   border-radius: 50px !important;
}

/* ==========================================================================
   Estilos Específicos del Footer del Dashboard y Scroll Top
   ========================================================================== */
/* ... (SIN CAMBIOS EN ESTA SECCIÓN) ... */
.footer-dashboard {
   background-color: var(--bs-dark) !important;
   color: var(--bs-light) !important;
   font-size: 0.8rem;
   z-index: 1040;
}

.footer-dashboard #status-indicador i {
   font-size: 1.1em;
}

.footer-dashboard .text-error-fdash {
   color: #ff8383;
}

#btn-scroll-top {
   position: fixed;
   bottom: 70px;
   right: 20px;
   z-index: 1045;
   background-color: var(--bs-dark);
   color: var(--bs-light);
   border: none;
   width: 45px;
   height: 45px;
   padding: 0;
   font-size: 1.2rem;
   box-shadow: 0 2px 5px rgba(var(--bs-black-rgb), 0.2);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#btn-scroll-top:hover {
   background-color: var(--bs-primary);
   color: var(--bs-light);
}

#btn-scroll-top.visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* ==========================================================================
   Estilos para Switches de Bootstrap (Verde/Activo, Rojo/Inactivo) - Global
   ========================================================================== */
/* ... (SIN CAMBIOS EN ESTA SECCIÓN) ... */
.form-switch .form-check-input {
   background-color: rgba(var(--bs-danger-rgb), 0.35);
   border-color: rgba(var(--bs-danger-rgb), 0.5);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(var(--bs-danger-rgb),1)'/%3e%3c/svg%3e");
   background-position: left center;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-position .15s ease-in-out;
}

.form-switch .form-check-input:checked {
   background-color: var(--bs-success);
   border-color: var(--bs-success);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
   background-position: right center;
}

.form-switch .form-check-input:focus {
   border-color: rgba(var(--bs-danger-rgb), 0.7);
   box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-danger-rgb), 0.25);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(var(--bs-danger-rgb),1)'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked:focus {
   border-color: var(--bs-success);
   box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-success-rgb), 0.25);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch.form-switch-md .form-check-label {
   padding-left: 0.5em;
}

.form-switch.form-switch-md .form-check-input {
   height: 1.25em;
   width: calc(1.25em + 0.75rem);
   margin-top: 0.125em;
}

/* ==========================================================================
   Estilos Específicos para DataTables
   ========================================================================== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
   padding: 0.25rem 0.5rem !important;
   font-size: 0.875rem !important;
   line-height: 1.5 !important;
   border-radius: 0.2rem !important;
   border: 1px solid var(--bs-primary) !important;
   color: var(--bs-primary) !important;
   background-color: transparent !important;
   margin-left: 2px !important;
   margin-right: 2px !important;
   text-decoration: none !important;
   cursor: pointer !important;
   transition: all 0.15s ease-in-out !important;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
   min-width: calc(1.5em + 1rem);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
   color: var(--bs-white) !important;
   background-color: var(--bs-primary) !important;
   border-color: var(--bs-primary) !important;
   z-index: 2;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
   color: var(--bs-white) !important;
   background-color: var(--bs-primary) !important;
   border-color: var(--bs-primary) !important;
   z-index: 3;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
   color: var(--bs-gray) !important;
   pointer-events: none !important;
   background-color: transparent !important;
   border-color: var(--bs-border-color) !important;
   opacity: 0.65 !important;
}

.table-responsive {
   overflow: visible !important;
}

.dt-button-collection {
   z-index: 1000;
}

/* ==========================================================================
   Estilos Específicos para Choices.js
   ========================================================================== */
.choices__list--dropdown.is-active {
   z-index: 2000;
}







/* ==========================================================================
    SECCION HERO Y PORQUE NOSOTROS  CON EFECTOS
   ========================================================================== */
.section-title {
   font-family: "Roboto Condensed", "Roboto", "Verdana", sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: var(--sep-primary-green);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--sep-accent-gold);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Hero Section */
.hero-section {
    min-height: 90vh;
    position: relative; /* Para el overlay y el fondo parallax */
    overflow: hidden; /* Para contener el fondo parallax */
    color: var(--sep-white);
}

.parallax-bg { /* Elemento para el efecto parallax */

   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: -1;
    /* Si se usa Rellax.js, estos estilos de background-attachment:fixed no son necesarios */
}

.hero-content {
    position: relative; /* Para estar sobre el parallax-bg */
    z-index: 1;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.hero-section h1 {
    color: var(--sep-white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-section .lead {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    font-weight: 400;
}

.btn-accent {
    background-color: var(--sep-accent-gold);
    border-color: var(--sep-accent-gold);
    color: var(--sep-primary-green); /* Texto oscuro para contraste con dorado */
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
}

.btn-accent:hover {
    background-color: #c5a02f; /* Dorado más oscuro */
    border-color: #c5a02f;
    color: var(--sep-primary-green);
}

.construction-notice {
    color: #c5a02f;
    font-size: 2rem;
    font-weight: bold;
}

/* Sección "¿Por qué Nosotros?" */
#porque-nosotros .feature-box {
   font-family: "Roboto Condensed", "Verdana", sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: var(--sep-white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
}

#porque-nosotros .feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 1.5rem rgba(0,0,0,.1)!important;
}

#porque-nosotros .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sep-primary-green) !important;
}

.bg-primary-soft {
    background-color: rgba(var(--sep-primary-green-rgb), 0.1);
}

#porque-nosotros .text-primary {
    color: var(--sep-primary-green) !important;
}




/* ==========================================================================
   Sección "Dirigido A" con Fondo de Imagen y Overlay Claro
   ========================================================================== */

#dirigido-a {
   position: relative;
   /* Necesario para el posicionamiento absoluto del pseudo-elemento ::before */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   /* background-attachment: fixed; */
   /* Comentado para evitar problemas con sticky-top si esta sección es muy larga */
   padding-top: 5rem;
   padding-bottom: 5rem;
   /* El color de texto por defecto para esta sección será oscuro, ya que el overlay es claro */
   color: var(--sep-text-dark);
   /* Texto oscuro principal */
}

/* Overlay claro para la sección "Dirigido A" usando un pseudo-elemento */
#dirigido-a::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--sep-verde-overlay);
   /* TU VARIABLE: Verde pastel muy claro con opacidad */
   z-index: 0;
   /* Detrás del contenido de la sección pero encima del fondo de imagen de la sección */
}

/* Asegurar que el contenido de la sección esté por encima del overlay */
#dirigido-a .container {
   /* O cualquier contenedor directo del contenido */
   position: relative;
   z-index: 1;
}

/* Ajustar color de los títulos y texto dentro de #dirigido-a para que sean legibles sobre el overlay claro */
#dirigido-a .section-title {
   color: var(--sep-primary-green);
   /* Título de sección en verde bosque oscuro */
}

#dirigido-a h5 {
   color: var(--sep-text-dark);
   /* Títulos H5 en gris oscuro */
}

#dirigido-a p {
   /* Párrafos de descripción */
   color: var(--bs-gray-700, #495057);
   /* Un gris un poco más claro que el --sep-text-dark */
}

#dirigido-a p.text-muted {
   /* Si usas text-muted, asegúrate que contraste */
   color: var(--bs-gray-600, #6c757d) !important;
}

/* Iconos dentro de #dirigido-a (los fa-3x) */
#dirigido-a .fas.fa-3x,
#dirigido-a .bi.fa-3x {
   /* Si usas Bootstrap Icons con fa-3x */
   color: var(--sep-primary-green) !important;
   /* Iconos principales en verde bosque oscuro */
}


/* ==========================================================================
     FIN  DE Sección "Dirigido A" con Fondo de Imagen y Overlay Claro
   ========================================================================== */





/* Formulario de Pre-Registro */
#pre-registro {
    background-color: var(--sep-light-subtle);
}

#pre-registro .form-control-lg,
#pre-registro .form-select-lg {
    font-size: 1rem;
}



/* Responsive media queries */
@media (max-width: 768px) {
    .hero-section {
        min-height: 80vh;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .hero-section .lead {
        font-size: 1.1rem;
    }
    
    .btn-accent {
        padding: 0.6rem 1.5rem;
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}
/* ==========================================================================
   FIN DE SECCION HERO Y PORQUE NOSOTROS CON EFECTOS
   ========================================================================== */





















/* ==========================================================================
   Utilidades y Clases Misceláneas
   ========================================================================== */

.pie-zindex {
   z-index: 3500;
}

.swal2-title {
   font-size: 1.5em !important;
}

.swal2-html-container {
   text-align: left !important;
}

.swal2-html-container b {
   color: var(--bs-danger);
}

.swal2-html-container b.text-success {
   color: var(--bs-success);
}

.swal2-html-container b.text-warning {
   color: var(--bs-warning);
}

.swal2-html-container .texto-justificar {
   text-align: justify !important;
}

.swal2-icon.swal2-error {
   border-color: var(--bs-danger) !important;
   color: var(--bs-danger) !important;
}

.swal2-icon.swal2-success {
   border-color: var(--bs-success) !important;
   color: var(--bs-success) !important;
}

.swal2-icon.swal2-warning {
   border-color: var(--bs-warning) !important;
   color: var(--bs-warning) !important;
}

.error-details {
   background-color: var(--bs-danger-bg-subtle);
   padding: 15px;
   border-radius: 4px;
   text-align: left;
   white-space: pre-wrap;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   max-height: 300px;
   overflow-y: auto;
   border: 1px solid var(--bs-danger-border-subtle);
   color: var(--bs-danger-text-emphasis);
}

.titu-errors {
   color: var(--bs-danger);
   text-align: center;
}






/* ==========================================================================
   Estilos Específicos para la Página de Contacto
   Ruta: public/assets/estilos.css (o un nuevo archivo css/contacto.css)
   ========================================================================== */

/* Fondo general para el cuerpo (si lo estableciste en el controlador) */
/* body {
    background-image: url('ruta/a/tu/imagen/bg-verde-009.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
} */

/* Sección Parallax (si la usas en la vista de contacto) */
.hero-section.rellax {
   /* Ajusta si usas otra clase para el parallax de contacto */
   background-attachment: scroll !important;
   /* Rellax necesita esto */
}

/* Título de Sección Global (ya debería estar en estilos.css) */
/* .section-title {
    color: var(--sep-primary-green); 
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
    display: inline-block;
}
.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--sep-accent-gold);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
} */

/* Estilos para la sección de WhatsApp */
#contacto-whatsapp {
   border: 1px solid var(--bs-border-color-translucent);
   background-color: var(--sep-light-subtle, #f8f9fa);
   /* Usar variable si existe, sino un gris claro */
}

#contacto-whatsapp .btn-success {
   font-weight: bold;
}

#contacto-whatsapp p {
   font-size: 0.95rem;
   color: var(--bs-gray-700);
}

#contacto-whatsapp .h5 {
   font-weight: 500;
}


/* Estilos para Canales de Atención */
#canales-atencion .card {
   border: none;
   /* Quitar borde por defecto si se usa shadow */
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#canales-atencion .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 .5rem 1rem rgba(var(--bs-black-rgb), .15) !important;
}

#canales-atencion .card-header {
   border-bottom: 2px solid rgba(var(--bs-white-rgb), 0.3);
}

#canales-atencion .card-text.h5 {
   font-weight: 600;
}

#canales-atencion .text-muted.small {
   font-size: 0.85rem;
}

/* Estilos para Información Adicional */
#info-adicional {
   border-top: 1px solid var(--bs-border-color-translucent);
   border-bottom: 1px solid var(--bs-border-color-translucent);
}

#info-adicional h5 i {
   font-size: 0.9em;
   position: relative;
   top: -1px;
}

/* Formulario de Contacto */
#formulario-contacto .card {
   border: 1px solid var(--bs-border-color-translucent);
}

#formulario-contacto .card-header h3 {
   font-weight: 500;
}

#formulario-contacto .form-control-lg,
#formulario-contacto .form-select-lg {
   font-size: 1rem;
   /* Ajustar si se ve muy grande con los input-group-text */
   padding-top: 0.6rem;
   padding-bottom: 0.6rem;
}

#formulario-contacto .input-group-text {
   background-color: var(--sep-verde-muy-claro, #e6f5e6);
   /* Un verde muy pálido */
   border-color: var(--bs-border-color);
   color: var(--bs-primary);
}

#formulario-contacto #btnEnviarConsulta:hover {
   background-color: #c5a02f !important;
   /* Dorado más oscuro al pasar el mouse */
   border-color: #c5a02f !important;
} 

/* Sección Redes Sociales */
#redes-sociales {
   border: 1px solid var(--bs-border-color-translucent);
   background-color: var(--sep-light-subtle, #f8f9fa);
}

.social-icon-contacto i {
   transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.social-icon-contacto:hover i.fa-facebook-f {
   transform: scale(1.2);
   color: #1877F2 !important;
}

.social-icon-contacto:hover i.fa-instagram {
   transform: scale(1.2);
   color: #E4405F !important;
}

.social-icon-contacto:hover i.fa-x-twitter {
   transform: scale(1.2);
   color: #00ACEE !important;
}

/* Ajustes generales para animaciones AOS */
[data-aos] {
   opacity: 0;
   /* Inicialmente oculto para que AOS lo revele */
}



/* ==========================================================================
   Estilos Específicos para las Páginas Legales
   Ruta: public/assets/estilos.css
   ========================================================================== */

/* Contenedor principal del contenido legal */
.legal-content-page h4 {
   /* Estilo para los títulos H4 dentro de las secciones legales */
   font-weight: 600;
   margin-top: 1.8rem;
   /* Más espacio antes de cada sección principal */
   color: var(--sep-primary-green);
   /* Color específico para los h4 en páginas legales */
}

.legal-content-page p,
.legal-content-page li {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--bs-gray-700, #495057);
   text-align: justify;
}

.legal-content-page ul {
   padding-left: 25px;
   /* Indentación para las listas */
   margin-bottom: 1.2rem;
}

.legal-content-page ul li {
   margin-bottom: 0.5rem;
}

.legal-content-page hr {
   border-top: 1px solid var(--bs-border-color-translucent);
}

.legal-content-page a.link-success {
   /* Para enlaces internos dentro del texto legal */
   color: var(--bs-success) !important;
   /* O var(--sep-accent-gold) si prefieres dorado */
   text-decoration: underline !important;
   font-weight: 500;
}

.legal-content-page a.link-success:hover {
   color: var(--bs-success-text-emphasis) !important;
   /* O un dorado más oscuro */
}


/* FIN DE ESTILOS CSS */