/* ============================================================= */
/* 1. FUENTES E IMPORTACIONES                                    */
/* ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Nunito:wght@400;600;700&display=swap');

@font-face {
  src: url(opensans-bold.ttf);
  font-family: 'opensans';
}

/*LG: esta propiedad es para los estilos del buscador del menu*/
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ============================================================= */
/* 2. VARIABLES (MODO CLARO Y OSCURO)                            */
/* ============================================================= */
:root {
  /* Colores Modo Claro */
  --primary-blue: #3b6882;
  --light-bg-main: #6d9ab7;
  --light-text: #444444;
  --light-sidebar-bg: #ffffff;

  /* Colores Modo Oscuro */
  --black-primary-color: #252525;   /* Fondo principal */
  --black-secondary-color: #333333; /* Barras, Sidebar */
  --black-tertiary-color: #454545;  /* Hovers, Bordes */
  --dark-text: #ffffff;
  --dark-text-muted: #bbbbbb;
}

/* ============================================================= */
/* 3. ESTILOS BASE (MODO CLARO POR DEFECTO)                      */
/* ============================================================= */

body {
  font-family: "Open Sans", sans-serif;
  background: var(--light-bg-main);
  color: var(--light-text);
  scroll-behavior: smooth;
}

/* --- Header --- */
.header {
  height: 60px;
  background-color: var(--primary-blue);
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.5s;
}

.header .toggle-sidebar-btn, 
.header .nav-icon, 
.header .nav-profile {
  color: #ffffff;
}

/* --- Sidebar --- */
.sidebar {
  background-color: var(--primary-blue);
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
}

.sidebar-nav .nav-link {
  color: #012970;
  background: #f6f9ff;
}

.sidebar-nav .nav-link.collapsed {
  color: #ffffff;
  background: var(--primary-blue);
}

/* --- Buscador --- */
/* ============================= */
/*        BUSCADOR WRAPPER       */
/* ============================= */

#buscador-wrapper {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;

  --angle: 0deg;

  background:
    linear-gradient(var(--primary-blue), var(--primary-blue)) padding-box,
    conic-gradient(
      from var(--angle),
      #2c4c5e,
      #4fa3d1,
      #2c4c5e
    ) border-box;

  border: 2px solid transparent;

  animation: rotateBorder 4s linear infinite;
}



/* --- boton de sugerencias --- */
/* ============================= */
/*        SUGERENCIAS WRAPPER       */
/* ============================= */
.btn-sugerencias-wrapper {
  border-radius: 8px;
  padding: 2px;

  --angle: 0deg;

  background:
    linear-gradient(var(--primary-blue), var(--primary-blue)) padding-box,
    conic-gradient(
      from var(--angle),
      #2c4c5e,
      #4fa3d1,
      #2c4c5e
    ) border-box;

  border: 2px solid transparent;

  animation: rotateBorder 4s linear infinite;
}

body.dark .btn-sugerencias-wrapper {
  background:
    linear-gradient(var(--black-primary-color), var(--black-primary-color)) padding-box,
    conic-gradient(
      from var(--angle),
      #2c4c5e,
      #4fa3d1,
      #2c4c5e
    ) border-box;

  border: 2px solid transparent;
}

.btn-sugerencias {
  background-color: transparent;
  border: none;
  color: #ffffff;
  font-weight: 600;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
}

.btn-sugerencias:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Hover suave */
/*.btn-sugerencias:hover {
  background-color: rgba(255, 255, 255, 0.1);
} */




/* Animación */
@keyframes rotateBorder {
  to {
    --angle: 360deg;
  }
}




/* ============================= */
/*           INPUT               */
/* ============================= */

#buscador-wrapper #buscador,
#buscador-wrapper #buscador:focus,
#buscador-wrapper #buscador:hover,
#buscador-wrapper #buscador:active {
  background-color: var(--primary-blue) !important;
  color: white !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ============================= */
/*   Neutraliza estados ExtJS    */
/* ============================= */

#buscador-wrapper .x-form-focus,
#buscador-wrapper .x-form-dirty,
#buscador-wrapper .x-form-trigger-wrap-focus {
  box-shadow: none !important;
  border-color: transparent !important;
  background-image: none !important;
}


/*#buscador-wrapper #buscador {
  background-color: var(--primary-blue);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
} */

/* --- Botones --- */
.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: white;
}

/* ============================================================= */
/* 4. MODO OSCURO (REGLAS ACTIVADAS CON .dark)                   */
/* ============================================================= */

/* Fondo General */
body.dark {
  background-color: var(--black-primary-color) !important;
  color: var(--dark-text) !important;
}

body.dark #main {
  background-color: var(--black-primary-color) !important;
}

/* Header Oscuro */
body.dark .header {
  background-color: var(--black-primary-color) !important;
  border-bottom: 1px solid var(--black-tertiary-color);
}

/* Sidebar Oscuro */
body.dark .sidebar {
  background-color: var(--black-primary-color) !important;
  border-right: 1px solid var(--black-tertiary-color);
  scrollbar-color: var(--black-tertiary-color) transparent; /*es la barra del menu lateral, poner blanco*/
}

body.dark .sidebar-nav .nav-link {
  background-color: var(--black-secondary-color) !important;
  color: var(--dark-text) !important;
}

body.dark .sidebar-nav .nav-link.collapsed {
  background-color: var(--black-primary-color) !important;
  color: var(--dark-text-muted) !important;
}

body.dark .sidebar-nav .nav-link:hover {
  background-color: var(--black-tertiary-color) !important;
  color: #ffffff !important;
}

/* Buscador Oscuro */
/* ============================================================= */
/* BUSCADOR OSCURO CON BORDE ANIMADO                             */
/* ============================================================= */

body.dark #buscador-wrapper {
  --bg-color: var(--black-primary-color);
  --angle: 0deg;
  
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 8px;
  position: relative;
  
  /* Borde animado */
  border: 2px solid transparent !important;
  background-image: 
    linear-gradient(var(--bg-color), var(--bg-color)), 
    conic-gradient(from var(--angle), #2c4c5e, #4fa3d1, #2c4c5e) !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;

  animation: rotateBorder 3s linear infinite;
}

/* ELIMINAR EL RECUADRO INTERNO */
body.dark #buscador-wrapper #buscador {
  background-color: transparent !important;
  /* Forzamos que el input no tenga borde ni sombra */
  border: none !important; 
  outline: none !important;
  box-shadow: none !important;
  color: white !important;
}

/* Neutralizar estados de foco de UniGUI que reaplican bordes */
body.dark #buscador-wrapper .x-form-focus,
body.dark #buscador-wrapper .x-form-trigger-wrap-focus {
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Neutralizamos cualquier borde inferior extra que pusimos antes */
/*body.dark #buscador-wrapper {
  border-bottom: none !important;
}*/


/* body.dark #buscador-wrapper {
  background-color: var(--black-primary-color) !important;
  
  border-bottom: 1px solid var(--black-primary-color)  !important; 
} */

/*
body.dark #buscador-wrapper #buscador {
  background-color: var(--black-primary-color) !important;
  border-color: var(--black-tertiary-color) !important;
  color: white !important;
} */

/* Dropdown Menus Oscuros */
body.dark .dropdown-menu {
  background-color: var(--black-secondary-color) !important;
  border: 1px solid var(--black-tertiary-color) !important;
}

body.dark .dropdown-item {
  color: var(--dark-text) !important;
}

body.dark .dropdown-item:hover {
  background-color: var(--black-tertiary-color) !important;
  color: #ffffff !important;
}

/* Botones en Modo Oscuro (Mejorado con grisado) */
body.dark .btn-secondary, 
body.dark .navbar-toggler {
  background-color: var(--black-primary-color) !important;
  border-color: var(--black-primary-color) !important;
  color: #ffffff !important;
}

body.dark .btn-secondary:hover {
  background-color: var(--black-tertiary-color) !important;
  border-color: #555555 !important;
}

/* Tablas / Grillas (Clases uniGUI/ExtJS) */
body.dark .x-grid-cell-inner {
  background-color: var(--black-primary-color) !important;
  color: var(--dark-text-muted) !important;
  border-bottom: 1px solid var(--black-tertiary-color) !important;
}

body.dark .x-column-header-inner {
  background-color: var(--black-secondary-color) !important;
  color: #ffffff !important;
}

/* Barra de Herramientas Dinámica */
body.dark .detbar-dynamic {
  background-color: var(--black-primary-color) !important;
}


body.dark .custom-navbar {
  background-color: var(--black-primary-color) !important;
  color: #ffffff;
}


/*LG: color de los scrollbar del formulario*/
body.dark .x-scroller {
    scrollbar-color: var(--black-tertiary-color) var(--black-primary-color);
    
}


/*buscador simple (boton)*/
body.dark .speed-btn-ss {
  color: #ffffff !important;
  background-color: var(--black-primary-color) !important;
  border-radius: 0px !important;
  /*margin-left: 10px !important; */
  /*border: 2px solid #3b6882 !important*/
}



/*LG: color splitter divisor del formulario*/
body.dark .x-splitter-horizontal {
    background-color: var(--black-tertiary-color);
}


/*LG: color de los iconos de los desplegables*/
body.dark .dropdown-item i {
  color: #ffffff;
}

body.dark .dropdown-item {
  color: #ffffff;
  /* Cambia el color del texto  */
}



/* Opcion activa (seleccionada) */
body.dark .vista-opcion.active {
  background-color: #ffffff !important; /* azul activo */
  color: var(--black-tertiary-color) !important;
  font-weight: 600;
}

/* icono dentro de la opcion activa */
body.dark .vista-opcion.active i {
  color: var(--black-tertiary-color) !important;
}


/*era un espacion azul en el buscador de la grilla*/
body.dark .searchGrid2 {
    background-color: var(--black-primary-color) !important; 
}

/*es un boton en la barra de los detalles (agregar, borrar, eliminar..)*/
body.dark .detbar-dynamic .btn-group_oculto {
   background-color: var(--black-primary-color) !important;
   display: none;
}

/*texto dentro del desplegable de usuario*/
body.dark .header-nav .profile .dropdown-header h6 {  
  color: #ffffff;
}

body.dark .dropdown-menu-arrow::before {    
    background: var(--black-secondary-color);
    border-top: 1px solid var(--black-secondary-color);
}








/* ===================================================== */
/* ============ ADV FILTERS - BUSCADOR - MODO OSCURO ============== */
/* ===================================================== */

body.dark .AdvFilters {
    color: #ffffff;
}

/* Card y Contenedor Principal */
body.dark .AdvFilters .card {
    background-color: var(--black-primary-color) !important;
    border: 3px solid var(--black-tertiary-color) !important; /* borde de toda la ventana */
}

/* Inputs y Selects */
body.dark .AdvFilters .form-control,
body.dark .AdvFilters .form-select {
    color: #ffffff !important;
    background-color: transparent !important;
}

body.dark .AdvFilters .form-control {
    border-bottom: 2px solid #ffffff !important; /* Línea blanca en lugar de azul */
}

/* Placeholder */
body.dark .AdvFilters .form-control::placeholder {
    color: #aaaaaa !important;
    opacity: 0.6;
}

/* Select (Flecha en modo oscuro para que sea visible) */
body.dark .AdvFilters .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Foco en inputs */
body.dark .AdvFilters .form-control:focus {
    border-bottom: 3px solid #ffffff !important;
    outline: none;
    box-shadow: none;
}

/* Botón Primario (Azul -> Gris muy oscuro/Negro para modo Dark) */
body.dark .AdvFilters .btn-primary {
    background-color: var(--black-secondary-color) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

body.dark .AdvFilters .btn-primary:hover {
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

/* Botón Outline Azul (Transformado a Outline Blanco) */
body.dark .AdvFilters .btn-outline-azul {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.dark .AdvFilters .btn-outline-azul:hover {
    background-color: #ffffff !important;
    color: var(--black-primary-color) !important;
}

/* Ajustes de Date Input */
body.dark #filterForm input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Hace que el icono del calendario sea blanco */
}

/* Estilo para los Labels */
body.dark .AdvFilters .form-label {
    color: #dddddd !important;
}

/* Scrollbars para el cuerpo del panel en modo oscuro */
body.dark .AdvFilters .cuerpo-panel::-webkit-scrollbar {
    width: 8px;
}

body.dark .AdvFilters .cuerpo-panel::-webkit-scrollbar-track {
    background: var(--black-primary-color);
}

body.dark .AdvFilters .cuerpo-panel::-webkit-scrollbar-thumb {
    background: var(--black-tertiary-color);
    border-radius: 4px;
}


/* ================= CORRECCIÓN DESPLEGABLES (SELECT) MODO OSCURO ================= */

/* 1. Forzar el fondo del select y de las opciones internas */
body.dark .AdvFilters .form-select,
body.dark .AdvFilters .form-select option {
    background-color: var(--black-primary-color) !important;
    color: #ffffff !important;
}

/* 2. Eliminar cualquier rastro de fondo blanco al hacer foco */
body.dark .AdvFilters .form-select:focus {
    background-color: var(--black-primary-color) !important;
    border-color: #666666 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 3. Estilo para el estado deshabilitado (opcional) */
body.dark .AdvFilters .form-select:disabled {
    background-color: var(--black-primary-color) !important;
    color: #777777 !important;
    opacity: 0.8;
}

/* 4. IMPORTANTE: Algunos navegadores necesitan este selector para los items de la lista */
body.dark select.form-select option {
    background: #333333; /* Un gris oscuro sólido */
    color: white;
}











/* ================= CORRECCIÓN SIDEBAR HOVER (MODO CLARO) ================= */

/* Items principales del menú */
.sidebar-nav .nav-link:hover {
  color: var(--primary-blue)  !important;    /* Cambia el texto al azul oscuro del sidebar */
  background: #ffffff !important; /* FONCO BLANCO SOLICITADO */
}

/* Iconos de los items principales al hacer hover */
.sidebar-nav .nav-link:hover i {
  color: var(--primary-blue) !important;    /* El icono también cambia a azul para ser visible sobre blanco */
}

/* Hover SOLO en items que expanden (no hojas) */
.sidebar-nav .nav-content a[data-bs-toggle="collapse"]:hover {
  background-color: #ffffff !important;
  color: var(--primary-blue) !important;
  border-radius: 4px;
  padding-left: 10px !important;
  transition: all 0.3s ease;
}

/* Iconos */
.sidebar-nav .nav-content a[data-bs-toggle="collapse"]:hover i {
  color: var(--primary-blue) !important;
}


/* Iconos o puntos de los submenús al hacer hover */
.sidebar-nav .nav-content a:hover i {
  color: var(--primary-blue) !important;
}





/* ================== CORRECCIÓN SIDEBAR DARK ================== */

/* Nivel intermedio (General / Definiciones) */
body.dark .sidebar-nav .nav-content a {
  background-color: var(--black-secondary-color) !important;
  color: var(--dark-text) !important;
}

/* Hojas (leaf nodes) */
body.dark .sidebar-nav .nav-content a:not([data-bs-toggle="collapse"]) {
  background-color: var(--black-secondary-color) !important;
  color: var(--dark-text) !important;
}


/* Forzar texto blanco cuando el item está expandido (modo dark) */
body.dark .nav-link[aria-expanded="true"] span {
  color: #ffffff !important;
}

/* Expandido */
body.dark .sidebar-nav .nav-link[aria-expanded="true"] i {
  color: #ffffff !important;
}

/* Hover */
body.dark .sidebar-nav .nav-link:hover i {
  color: #ffffff !important;
}


/* ================= FIX HOVER SUBCARPETA EN DARK ================= */

/* Hover sobre items que expanden (subcarpetas) */
body.dark .sidebar-nav .nav-content a[data-bs-toggle="collapse"]:hover {
  background-color: #ffffff !important;
  color: #252525 !important; /* negro oscuro */
}

/* Icono en ese hover */
body.dark .sidebar-nav .nav-content a[data-bs-toggle="collapse"]:hover i,
body.dark .sidebar-nav .nav-content a[data-bs-toggle="collapse"]:hover span {
  color: #252525 !important;
}



/* ================= FIX ICONOS AZULES HEREDADOS ================= */
body.dark .sidebar-nav .nav-link:hover i {
  color: #ffffff !important;
}