.unigui-edit-redondeado .x-form-text-wrap {
  border: none !important;
}

.unigui-edit-redondeado input {
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  background-color: white !important;
}

.unigui-label-estilo {
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
}


.unigui-button .x-btn,
.unigui-button .x-btn-default-small,
.unigui-button .x-btn-wrap,
.unigui-button .x-btn-button,
.unigui-button .x-btn-inner {
  background-image: none !important;
  background-color: #2c5167 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
}

.unigui-button .x-btn-inner {
  color: white !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: normal !important;
  padding: 0 !important;
}

/* Hover / Focus */
.unigui-button .x-btn-default-small .x-btn-focus,
.unigui-button .x-btn-over,
.unigui-button .x-btn-default-small-over {
  background-color: #2c5167 !important; /* un azul más oscuro para hover */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/*grillas*/
/* --- VISTA COMPACTA --- */
.grid-vista-compacta .x-column-header-inner {
  background-color: #3b6882 !important;
  color: #ffffff !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  line-height: 1.2 !important;
}

.grid-vista-compacta .x-grid-cell-inner {
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px !important;
  color: #2e2e2e !important;
  padding: 4px 8px !important;
  line-height: 1.3 !important;
  background-color: #f9f9f9 !important;
}

/* LG: corrige corte de texto en headers de UniGUI */
/* Encabezados: vista compacta */
.grid-vista-compacta .x-column-header-inner {
  background-color: #3b6882 !important;
  color: #ffffff !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 12px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  line-height: normal !important; /* evita cortar descendentes */
  height: auto !important;
  overflow: visible !important; /* deja ver partes bajas de letras */
}

/* Texto interno del header */
.grid-vista-compacta .x-column-header-text {
  line-height: normal !important;
  overflow: visible !important;
  display: inline-block !important;
  padding-bottom: 1px !important; /* leve margen para compensar recorte */
  vertical-align: middle !important;
}

/* Celdas normales: vista compacta */
.grid-vista-compacta .x-grid-cell-inner {
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px !important;
  color: #2e2e2e !important;
  padding: 4px 8px !important;
  line-height: 1.3 !important;
  background-color: #f9f9f9 !important;
}

/* (opcional) asegura altura mínima del header */
.grid-vista-compacta .x-column-header {
  min-height: 26px !important;
}



.unigui-campo-requerido {
  border: 3px solid #3b6882 !important;
  border-radius: 8px !important;
}

/* Label de campo requerido */
.unigui-label-requerido {
  color: #2c5167 !important;
}

/* Animación de pulso sobre la línea inferior del input requerido */
@keyframes req-pulse {
  0%   { border-bottom-color: #e9ecef; }
  50%  { border-bottom-color: #3b6882; }
  100% { border-bottom-color: #e9ecef; }
}

.unigui-input-requerido .x-form-field,
.unigui-input-requerido .x-form-text {
  border-bottom: 2px solid #3b6882 !important;
  animation: req-pulse 2s ease-in-out infinite !important;
}




/* LG: ESTILOS PARA INPUTS DEL NUEVO FORMULARIO */

/* Elimina bordes de los wrappers de uniGUI/ExtJS */
.x-form-text,
.x-form-field,
.x-form-text-default,
.x-form-item-input-row,
.x-form-trigger-wrap {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Aplica la línea inferior minimalista */
/* Inputs editables */
.x-form-field,
.x-form-text {
    border-bottom: 2px solid #e9ecef !important; /* línea de color */
    padding: 0.35rem 0 !important;               /* un poco más alto */
    font-size: 0.9rem !important;
    background: transparent !important;
    color: #212529 !important;   
}

/* Hover en inputs editables */
.x-form-field:hover {
    border-bottom: 2px solid #3b6882 !important; /* azul más fuerte */
}

/* Foco (cuando escribo) */
.x-form-field:focus,
.x-form-focus .x-form-field {
    border-bottom: 3px solid #3b6882 !important; /* más grueso al foco */
    outline: none !important;
    background: transparent !important;
    color: #000 !important;
    font-weight: 500 !important; /* texto un poco más fuerte */
}

/* Readonly */
.x-form-readonly .x-form-field {
    border-bottom: 1px solid #bbb !important;
    background: transparent !important;
    color: #666 !important;
    cursor: default !important;
}

/* Disabled */
.x-item-disabled .x-form-field {
    border-bottom: 1px solid #ccc !important;
    background: #f5f5f5 !important;
    color: #999 !important;
    cursor: not-allowed !important;
}



/* LG: contenedor principal del checkbox */
/* --- TRANSFORMACION A SWITCH  --- */

/* 1. Contenedor principal del checkbox */
.x-form-cb-wrap-inner {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 45px;
    min-height: 24px;
}

/* 2. Ocultamos el input nativo pero mantenemos su área de click */
.x-form-cb-input {
    opacity: 0 !important;
    position: absolute;
    width: 40px !important;
    height: 20px !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
    margin: 0 !important;
}

/* 3. Dibujamos el "Carril" o Fondo del Switch */
.x-form-checkbox {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 20px !important;
    background-color: #ccc !important;
    border-radius: 20px !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
    display: block !important;
}

/* 4. Dibujamos la "Bolita" (El tirador) - BLINDADO CONTRA TILDES */
.x-form-checkbox::after {
    content: "" !important;
    background-image: none !important; /* ELIMINA LA IMAGEN DEL TILDE */
    display: block !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 14px !important;
    height: 14px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: left 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    
    /* Matamos cualquier fuente de iconos */
    font-family: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important; /* Manda cualquier texto al infinito */
}

/* 5. ESTADO ACTIVADO (Checked) */
.x-form-cb-checked .x-form-checkbox {
    background-color: #3b6882 !important;
    background-image: none !important; /* Refuerzo para el carril */
}

.x-form-cb-checked .x-form-checkbox::after {
    left: 23px !important;
    content: "" !important;
    background-image: none !important; /* ELIMINA EL TILDE AL ESTAR ACTIVO */
}

/* 5b. LIMPIEZA EXTRA: Algunos temas de uniGUI usan ::before para el check */
.x-form-checkbox::before {
    content: none !important;
    display: none !important;
}

/* 6. MODO OSCURO - Switch */
body.dark .x-form-checkbox {
    background-color: #454545 !important;
    border: 1px solid #666666 !important;
}

body.dark .x-form-cb-checked .x-form-checkbox {
    background-color: #3b6882 !important;
    border-color: #4da3d4 !important;
}

body.dark .x-form-checkbox::after,
body.dark .x-form-cb-checked .x-form-checkbox::after {
    content: "" !important;
    font-family: none !important;
    font-size: 0 !important;
    color: transparent !important;
    background-color: white !important; /* La bolita sigue siendo blanca */
}

/* 7. Hover y disabled (opcional, mejora UX) */
.x-form-checkbox:hover {
    cursor: pointer;
}

body.dark .x-form-checkbox:hover {
    background-color: #555555 !important;
    border-color: #3b6882 !important;
}

.x-item-disabled .x-form-checkbox {
    opacity: 0.6;
    cursor: not-allowed;
}





/* Barra de tabs */
.x-tab-bar-default{
  background: #f7f8fa; 
  border:0; 
  padding:4px 6px;
}
.x-tab-bar-strip-default{ display:none; }  /* saca la línea bajo las tabs */

/* Compactar altura total de las tabs */
.x-tab-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

  min-height: 30px !important;  /* antes suele ser 32px */
  line-height: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* FORZAR GRIS en TIPOGRAFIA tabs inactivas */
.x-tab-bar-default .x-tab:not(.x-tab-active) .x-tab-inner-default,
.x-tab-bar-default .x-tab:not(.x-tab-active):hover .x-tab-inner-default,
.x-tab-bar-default .x-tab:not(.x-tab-active).x-tab-over .x-tab-inner-default {
  color: #acacac !important;
  text-shadow: none !important;
}

/* HOVER: Cambiar a NEGRO al pasar el mouse */
.x-tab-bar-default .x-tab:not(.x-tab-active):hover .x-tab-inner-default {
  color: #000000 !important; /* NEGRO en hover */
}

/* Tabs base inactivas*/
.x-tab-bar-default .x-tab{
  margin-right:6px;
  border:0; 
  border-radius:10px 10px 0 0;
  background: #e5e5e5; /*fondo tabs inactivas*/
  color:#ffffff !important;
}
.x-tab .x-tab-inner-default{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: normal !important; /* evita que suba el texto */

  font-weight:600; 
  color:#ffffff; 
  padding:2px 8px;  /* compáctalas 6px 14px*/
}


/* Hover / inactiva */
.x-tab-over:not(.x-tab-active){ 
  filter:brightness(1.03); 
  color: #000000; /* al pasar el mouse → negro */
}

/* Activa con subrayado de acento */
.x-tab-active{
 background: #0a364d !important; /* COLOR SOLICITADO */
 box-shadow: 0 -3px 0 #BA0FA3 inset,
              0 4px 6px rgba(0, 0, 0, 0.1),
              0 0 0 2px #ffffff, /* Sombra blanca en el contorno */
              0 0 0 4px rgba(255, 255, 255, 0.3); /* Sombra exterior más suave */
  position: relative;
  z-index: 1; /* Asegura que la sombra se vea por encima */
}

.x-tab-active .x-tab-inner-default{ 
  color:#1f2937; 
}

/* Ícono de cerrar (si Closable=True en TUniTabSheet) */
.x-tab .x-tab-close-btn{ 
  opacity:.6; 
  margin-left:6px; 
}
.x-tab .x-tab-close-btn:hover{ 
  opacity:1;
}

/* Quita bordes “windows” del contenido */
.x-tabpanel-default, .x-tabpanel-default .x-panel-body-default{ 
  border:0;
}


 .x-tab.x-tab-active.x-tab-default {
    
    /* linea de color sobre el tab pestaña activa  */
    box-shadow: inset 0 -3px 0 0 #e5e5e5 !important; 

    border: 1px solid #3b6882 !important;
    
}


/* ===================================================== */
/* ===================== MODO OSCURO =================== */
/* ===================================================== */

body.dark {

  /* Variables internas dark */
  --black-primary-color:#252525;
  --black-secondary-color:#333333;
  --black-tertiary-color:#454545;

  --dark-bg-buscador-fondoinputs: #1e1e1e; /**/
}

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

body.dark .unigui-edit-redondeado input {
  background-color: var(--black-primary-color) !important;
  color: #ffffff !important;
}

/* ================= BOTONES ================= */

body.dark .unigui-button .x-btn,
body.dark .unigui-button .x-btn-default-small,
body.dark .unigui-button .x-btn-wrap,
body.dark .unigui-button .x-btn-button,
body.dark .unigui-button .x-btn-inner {
  background-color: var(--black-primary-color) !important;
}

body.dark .unigui-button .x-btn-default-small .x-btn-focus,
body.dark .unigui-button .x-btn-over,
body.dark .unigui-button .x-btn-default-small-over {
  background-color: var(--black-secondary-color) !important;
}

/* ================= GRID VISTA COMPACTA ================= */

body.dark .grid-vista-compacta .x-column-header-inner {
  background-color: var(--black-primary-color) !important;
  border: 1px solid var(--black-secondary-color) !important;
  color: #ffffff !important;
}

body.dark .grid-vista-compacta .x-grid-cell-inner {
  background-color: var(--black-secondary-color) !important;
  color: #ffffff !important;
}



/* ================= GRID - SUAVIZAR LINEAS DARK ================= */

/* Líneas horizontales entre registros */
body.dark .x-grid-cell {
  border-bottom: 1px solid var(--black-secondary-color) !important;
}

/* Líneas verticales entre columnas */
body.dark .x-grid-cell {
  border-right: 1px solid var(--black-tertiary-color) !important;
}

/* Quitar bordes blancos heredados */
body.dark .x-grid-with-row-lines .x-grid-item {
  border-color: var(--black-tertiary-color) !important;
}

/* Header también más suave */
body.dark .x-column-header {
  border-right: 1px solid var(--black-secondary-color)  !important;
}


/* ================= GRID - ROW SELECCIONADO DARK ================= */

/* Fila seleccionada */

/* 1. sacar bordes laterales de la fila contenedora */
body.dark .x-grid-item-selected,
body.dark .x-grid-row-selected {
    border-left: none !important;
    border-right: none !important;
    border-top: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
}

/* 2. sacar líneas divisorias verticales entre celdas */
body.dark .x-grid-item-selected .x-grid-cell,
body.dark .x-grid-row-selected .x-grid-cell {
    border-right: none !important; /* Elimina la línea vertical derecha */
    border-left: none !important;  /* Elimina la línea vertical izquierda */
    border-top: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    background-color: #333333 !important; /* Fondo sutil para la fila */
}

/* 3. Aseguramos que no haya bordes en los pseudo-elementos de ExtJS */
body.dark .x-grid-item-selected .x-grid-cell::before,
body.dark .x-grid-item-selected .x-grid-cell::after {
    display: none !important;
}


/* ================= QUITAR INTERLINEADO BLANCO GRID DARK ================= */

body.dark .x-grid-item-alt {
  background-color: var(--black-secondary-color) !important;
}

body.dark .x-grid-item {
  background-color: var(--black-secondary-color) !important;
}







/* ===================================================== */
/* == ENCABEZADO DE GRILLA (MODAL) - MODO OSCURO ======= */
/* ===================================================== */

/* Contenedor principal del encabezado */
body.dark .x-grid-header-ct {
    background-color: var(--dark-header) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

/* Contenedor de los títulos de columna */
body.dark .x-column-header {
    background-color: var(--dark-header) !important;
    border-right: 1px solid var(--dark-border) !important;
    border-bottom: 1px solid var(--dark-border) !important;
}

/* Texto de los títulos */
body.dark .x-column-header-text-inner {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Fondo de la parte interna del header (donde están los filtros) */
body.dark .x-column-header-inner {
    background-color: var(--dark-header) !important;
}

/* Estilo para los Inputs de filtrado dentro del header */
body.dark .x-column-header .x-form-text {
    background-color: #2a2a2a !important; /* Un gris intermedio para los inputs */
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 4px !important;
}

/* Botón de borrado (eraser / Clear Filters) que aparece en el primer header */
body.dark .x-column-header .x-btn-default-small {
    background-color: #333333 !important;
    border-color: var(--dark-border) !important;
}

body.dark .x-column-header .x-btn-default-small:hover {
    background-color: #444444 !important;
}

/* Icono de la goma de borrar (fa-eraser) */
body.dark .x-btn-icon-el.fa-eraser {
    color: #ffffff !important; /* Un rojo suave para que resalte el botón de limpiar */
}

/* Trigger (flechita de menú) de las columnas al pasar el mouse */
body.dark .x-column-header-trigger {
    background-color: var(--dark-header-hover) !important;
    border-left: 1px solid var(--dark-border) !important;
}





















/* ================= CAMPO REQUERIDO ================= */

body.dark .unigui-campo-requerido {
  border: 3px solid #3b6882 !important;
}

body.dark .unigui-label-requerido {
  color: #3b6882 !important;
}

@keyframes req-pulse-dark {
  0%   { border-bottom-color: #444; }
  50%  { border-bottom-color: #3b6882; }
  100% { border-bottom-color: #444; }
}

body.dark .unigui-input-requerido .x-form-field,
body.dark .unigui-input-requerido .x-form-text {
  border-bottom: 2px solid #3b6882 !important;
  animation: req-pulse-dark 2s ease-in-out infinite !important;
}

/* ================= INPUTS FORMULARIO ================= */

body.dark .x-form-text,
body.dark .x-form-field,
body.dark .x-form-text-default,
body.dark .x-form-item-input-row,
body.dark .x-form-trigger-wrap {
  background: var(--dark-bg-buscador-fondoinputs)  !important; /*si se pone transpartent, se rompe el buscador de la grilla*/
  color: #ffffff !important;
} 


body.dark .x-form-field {
  border-bottom: 2px solid #454545 !important; /* mismo que --black-tertiary-color */
}

body.dark .x-form-field:hover {
  border-bottom: 2px solid #3b6882 !important; /* azul suave del proyecto */
}

body.dark .x-form-field:focus,
body.dark .x-form-focus .x-form-field {
  border-bottom: 3px solid #3b6882 !important; /* azul principal del proyecto */
  background: var(--black-primary-color) !important;
  color: #ffffff !important;
}

body.dark .x-form-readonly .x-form-field {
  border-bottom: 1px solid #333333 !important; /* --black-secondary-color, muy sutil */
  color: var(--dark-text-muted) !important;
}


/* ================= CHECKBOX ================= */

body.dark .x-form-checkbox {
  background-color: var(--black-primary-color) !important;
  border: 1px solid var(--black-secondary-color) !important;
}

body.dark .x-form-checkbox.x-form-cb-checked::after {
  /* color: #ffffff !important; */
  content: "" !important; /* Esto asegura que en modo oscuro tampoco salga */
  text-shadow: none !important;
}

/* ================= TABS ================= */

body.dark .x-tab-bar-default{
  background: var(--black-primary-color) !important;
}

body.dark .x-tab-bar-default .x-tab:not(.x-tab-active) .x-tab-inner-default,
body.dark .x-tab-bar-default .x-tab:not(.x-tab-active):hover .x-tab-inner-default,
body.dark .x-tab-bar-default .x-tab:not(.x-tab-active).x-tab-over .x-tab-inner-default {
  color: #ffffff !important;
}

body.dark .x-tab-bar-default .x-tab{
  background: var(--black-tertiary-color) !important;
}

body.dark .x-tab-inner-default{
  color:#ffffff !important;
}







/* ================= TABS MODO OSCURO (REFORZADO) ================= */

/* 1. Usamos una cadena de clases más larga para ganar especificidad */
body.dark .x-tab-bar .x-tab.x-tab-active.x-tab-default {
    background-color: var(--black-primary-color) !important; 
    background-image: none !important; /* Quita el degradado de ExtJS */
    
    /* linea de color sobre el tab pestaña activa  */ 
    box-shadow: inset 0 -3px 0 0 var(--black-tertiary-color) !important; 
    
    /* Quitamos cualquier borde blanco que herede */
    border: 1px solid var(--black-tertiary-color) !important;
}

/* 2. Reforzamos el texto de la pestaña activa */
body.dark .x-tab.x-tab-active.x-tab-default .x-tab-inner-default { 
    color: #ffffff !important; 
    font-weight: bold !important;
    text-shadow: none !important; /* saca sombras de texto del framework */
}

/* 3. Reforzamos las pestañas INACTIVAS para que no se vean blancas */
body.dark .x-tab-bar .x-tab.x-tab-default:not(.x-tab-active) {
    background-color: var(--black-tertiary-color) !important;
    background-image: none !important;
    border: 1px solid var(--black-primary-color) !important;
}

body.dark .x-tab-bar .x-tab.x-tab-default:not(.x-tab-active) .x-tab-inner-default {
    color: #aaaaaa !important;
}





/* MODO OSCURO  */
/* LG: correcion al menu desplegable de las columnas de la grilla - correccion al ver y a gregar relacion activa*/


/* Contenedor principal del menu desplegable */
body.dark .x-menu {
    background-color: #252525 !important; 
    border: 1px solid #454545 !important; 
}

/* Texto de los items del menú */
body.dark .x-menu-item-text {
    color: #ffffff !important;
    font-family: "Open Sans", sans-serif !important;
}

/* Fondo del item cuando pasas el mouse (Hover) */
body.dark .x-menu-item-active {
    background-color: #454545 !important;
    border-radius: 0 !important;
}

/* Iconos (como el check de visibilidad de columnas) */
body.dark .x-menu-item-icon-default {
    color: #ffffff !important;
}

/* Separadores entre secciones del menú */
body.dark .x-menu-separator {
    border-top: 1px solid #454545 !important;
    background-color: transparent !important;
}

/* Flechas de los sub-menús (las convertimos de negro a blanco) */
body.dark .x-menu-item-arrow {
    filter: brightness(0) invert(1) !important;
}

/* Ajuste para los inputs de búsqueda/filtros dentro del menú */
body.dark .x-menu .x-form-text {
    background-color: #1e1e1e !important; 
    color: #ffffff !important;
    border: 1px solid #454545 !important;
}



/* MODO OSCURO  */
/* LG: correccion al los campos bool checkbox */


/* 1. Aclaramos la cajita base */
body.dark .x-form-checkbox {
    background-color: #454545 !important; 
    border: 1px solid #666666 !important;  
}

/* 2. Resaltado al pasar el mouse (Hover) */
body.dark .x-form-checkbox:hover {
    background-color: #555555 !important;
    border-color: #3b6882 !important; 
}

/* 3. Cuando está MARCADO (Checked) */
body.dark .x-form-checkbox.x-form-cb-checked {
    background-color: #3b6882 !important; /* Azul para que se note el estado activo */
    border-color: #4da3d4 !important;
}

/* 4. El tilde (✓) más brillante */
body.dark .x-form-checkbox.x-form-cb-checked::after {
    /*color: #ffffff !important; */
    /*text-shadow: 0 0 2px rgba(0,0,0,0.5);*//* Sombra para que el blanco resalte */
    /*font-weight: bold !important; */

    content: "" !important; /* Esto quita la palomita */
}

/* 5. Si el checkbox está deshabilitado */
body.dark .x-form-checkbox.x-item-disabled {
    background-color: #333333 !important;
    opacity: 0.6;
    cursor: not-allowed;
}



/* LG: correccion para DESPLEGABLES DE FORMULARIO (PICKERS)*/

/* Contenedor flotante de la lista (Combo / Lookup) */
body.dark .x-boundlist {
    background-color: var(--black-primary-color) !important;
    /*border: 1px solid var(--black-tertiary-color) !important;*/
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Items de la lista */
body.dark .x-boundlist-item {
    color: #ffffff !important;
    background-color: transparent !important;
    /* padding: 8px 12px !important;*/
    /* border-bottom: 1px solid rgba(255,255,255,0.05) !important; */
    font-family: "Open Sans", sans-serif !important;
}

/* Item resaltado (Hover o Navegación por teclado) */
body.dark .x-boundlist-item-over {
    background-color: var(--black-tertiary-color) !important;
    color: #ffffff !important;
}

/* Item Seleccionado */
body.dark .x-boundlist-selected {
    background-color: #3b6882 !important; 
    color: #ffffff !important;
}

/* Ajuste para el scrollbar en el desplegable (opcional para estética) */
body.dark .x-boundlist .x-scroller {
    background-color: var(--black-primary-color) !important;
}

/* Texto de "Cargando..." o "No hay resultados" */
body.dark .x-boundlist-list-ct {
    background-color: var(--black-primary-color) !important;
    color: #aaaaaa !important;
}





/* LG: correccion campos fecha DATE PICKER - MODO OSCURO  */

/* Contenedor principal sin bordes internos de cuadrícula */
body.dark .x-datepicker {
    background-color: var(--black-primary-color) !important;
    border: 1px solid var(--black-tertiary-color) !important;
}

/* Quitamos los bordes de las celdas para que no parezca una cuadrícula */
body.dark .x-datepicker-date {
    border: none !important; 
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Encabezado limpio */
body.dark .x-datepicker-header {
    background-color: var(--black-secondary-color) !important;
}

body.dark .x-datepicker-column-header {
    background-color: var(--black-primary-color) !important;
    color: #aaaaaa !important;
    border-bottom: 1px solid var(--black-tertiary-color) !important;
    border-right: none !important; /* Sacamos el borde lateral del header */
}

/* Día seleccionado */
body.dark .x-datepicker-selected .x-datepicker-date {
    background-color: #3b6882 !important; 
    color: #ffffff !important; 
    border-radius: 4px !important; 
}

/* DÍA DE HOY: Fondo azul y texto blanco para que se note */
body.dark .x-datepicker-today .x-datepicker-date {
    background-color: #3b6882 !important; 
    color: #ffffff !important; 
    border: 1px solid #4da3d4 !important;
    font-weight: bold !important;
}

/* Días de otros meses más apagados */
body.dark .x-datepicker-prevday .x-datepicker-date,
body.dark .x-datepicker-nextday .x-datepicker-date {
    color: #555555 !important;
}

/* Hover sin bordes, solo cambio de fondo */
body.dark .x-datepicker-date:hover {
    background-color: var(--black-tertiary-color) !important;
    border-radius: 4px !important;
}

/* Footer limpio */
body.dark .x-datepicker-footer {
    background-color: var(--black-secondary-color) !important;
    border-top: 1px solid var(--black-tertiary-color) !important;
}

/* LG: correccion calendario modo claro  */

/* 1. MODO CLARO (Por defecto) */
.x-datepicker-header {
    background-color: #3b6882 !important; 
}

.x-datepicker-header .x-btn-inner, 
.x-datepicker-header .x-btn-icon-el {
    color: #ffffff !important; 
}

.x-datepicker-month .x-btn, 
.x-datepicker-month .x-btn-wrap {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 2. MODO OSCURO (Sobreescritura) */
body.dark .x-datepicker-header {
    background-color: var(--black-secondary-color) !important; 
}

body.dark .x-datepicker-header .x-btn-inner, 
body.dark .x-datepicker-header .x-btn-icon-el {
    color: #ffffff !important;
}

body.dark .x-datepicker-month .x-btn, 
body.dark .x-datepicker-month .x-btn-wrap {
    background-color: var(--black-tertiary-color) !important; 
    border: none !important;
}





/* ===================================================== */
/* == BARRA DE PAGINACIÓN - MODO OSCURO ================ */

/* Contenedor principal de la paginación */
body.dark .x-autocontainer-innerCt > div[style*="background-color: #f8f8f8"] {
    background-color: var(--black-secondary-color) !important;
    border-top: 1px solid var(--black-tertiary-color) !important;
}

/* Botones de paginación (Primera, Anterior, Siguiente, Última) */
body.dark .x-autocontainer-innerCt button[id^="btn"] {
    background-color: var(--black-tertiary-color) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}

/* Efecto Hover en botones activos */
body.dark .x-autocontainer-innerCt button[id^="btn"]:not([disabled]):hover {
    background-color: #3b6882 !important;
    cursor: pointer;
}

/* Estado Deshabilitado (cuando no hay más páginas) */
body.dark .x-autocontainer-innerCt button[id^="btn"][disabled] {
    background-color: #2a2a2a !important;
    color: #666666 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Texto de información (Página X de Y) */
body.dark .x-autocontainer-innerCt span[id^="pageInfo"] {
    color: #bbbbbb !important;
    font-family: "Open Sans", sans-serif !important; 
}





/* --- VENTANA MODAL DE SUGERENCIAS MODO OSCURO  --- */

/* 1. Fondo de la tarjeta blanca (contact-card) */
body.dark .contenedor-sugerencias .contact-card {
    background-color: #2c2c2c !important; /* Gris oscuro de fondo */
    color: #e0e0e0 !important; /* Texto base claro */
    border-color: #444444 !important; /* Borde sutil */
}

/* 2. Título principal y texto introductorio */
body.dark .contenedor-sugerencias .form-title {
    color: #ffffff !important; /* Blanco puro para el título */
}

body.dark .contenedor-sugerencias .form-intro {
    color: #b0b0b0 !important; /* Gris claro para la intro */
}

body.dark .contenedor-sugerencias .form-intro strong {
    color: #ffffff !important; /* Blanco para las negritas */
}

/* 3. Etiquetas de campo (Labels) */
body.dark .contenedor-sugerencias .form-label {
    color: #e0e0e0 !important; /* Texto de etiqueta claro */
}

/* 4. Inputs de texto y Textarea */
body.dark .contenedor-sugerencias .form-control {
    background-color: #3d3d3d !important; /* Fondo de input oscuro */
    color: #ffffff !important; /* Texto de input blanco */
    border-color: #555555 !important; /* Borde oscuro */
}

/* 5. Contadores de caracteres */
body.dark .contenedor-sugerencias .char-counter {
    color: #aaaaaa !important; /* Gris medio para el contador */
}

/* 6. CORRECCIÓN DE PLACEHOLDERS (Textos de ejemplo) */
/* Es vital ajustar esto para que se lean los ejemplos */
body.dark .contenedor-sugerencias .form-control::placeholder {
    color: #aaaaaa !important; /* Gris medio, legible pero no brillante */
    opacity: 1 !important; /* Asegurar opacidad en algunos navegadores */
}

/* Soporte para placeholders en navegadores antiguos si es necesario */
body.dark .contenedor-sugerencias .form-control:-ms-input-placeholder { color: #aaaaaa !important; }
body.dark .contenedor-sugerencias .form-control::-ms-input-placeholder { color: #aaaaaa !important; }


/* Forzar visibilidad del placeholder en modo claro */
.contenedor-sugerencias .form-control::placeholder {
    color: #888888 !important; /* Un gris medio que sea legible */
    opacity: 1 !important;      /* Evita que uniGUI/ExtJS le baje la opacidad */
}

/* Soporte para navegadores específicos */
.contenedor-sugerencias .form-control::-webkit-input-placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

.contenedor-sugerencias .form-control::-moz-placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}

.contenedor-sugerencias .form-control:-ms-input-placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}


/* Forzar que en modo oscuro el botón no brille ni cambie al pasar el mouse */
body.dark .contenedor-sugerencias .btn-custom:hover,
body.dark .contenedor-sugerencias .btn-custom:focus,
body.dark .contenedor-sugerencias .btn-custom:active {
    background-color: var(--primary) !important; /* Mantendrá el #5ba3cc */
    filter: none !important;
    box-shadow: none !important;
}


/* Efecto de foco (brillo azul) para inputs en modo oscuro */
body.dark .contenedor-sugerencias .form-control:focus {
    border-color: #5ba3cc !important; /* Usamos el azul vibrante del modo oscuro */
    outline: none !important;
    /* Creamos el resplandor azul sutil alrededor del input */
    box-shadow: 0 0 0 3px rgba(91, 163, 204, 0.25) !important;
}

/* Opcional: Si querés que el borde sea un poco más claro al pasar el mouse 
   sin llegar a hacer click (hover) */
body.dark .contenedor-sugerencias .form-control:hover {
    border-color: #7ab8db !important;
}





/* ---LG: CORRECCIÓN PARA CHECKBOX DENTRO DE GRILLAS, corrige los colores --- */

/* 1. El contenedor del checkbox en la grilla */
.x-grid-cell-inner span[style*="border:1px solid currentColor"] {
    background-color: #ccc !important; /* Color inactivo */
    border: none !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    transition: background-color 0.2s ease !important;
}

/* 2. El tilde (✓) interno */
.x-grid-cell-inner span[style*="border:1px solid currentColor"] span {
    display: none !important; /* Escondemos el tilde verde original */
}

/* 3. Cuando el valor es TRUE (Simulamos el check con un pseudo-elemento) */
/* uniGUI suele cambiar el color del tilde o el fondo cuando está activo */
.x-grid-cell-inner span[style*="border:1px solid currentColor"]:has(span:not(:empty)) {
    background-color: #3b6882 !important; /* Tu azul primary */
}

/* 4. Dibujamos nuestro propio tilde blanco minimalista */
.x-grid-cell-inner span[style*="border:1px solid currentColor"]:has(span:not(:empty))::after {
    content: "✓" !important;
    color: white !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* --- MODO OSCURO PARA GRILLAS --- */
body.dark .x-grid-cell-inner span[style*="border:1px solid currentColor"] {
    background-color: #454545 !important; /* Tu gris oscuro */
}

body.dark .x-grid-cell-inner span[style*="border:1px solid currentColor"]:has(span:not(:empty)) {
    background-color: #3b6882 !important;
}