/* --- DEFINICIÓN DE VARIABLES GLOBALES --- */
:root {
  /* 1. El color de fondo menu*/
  --bg-gris-principal: #365695;

  /* 2. El primer tono de (claro) usado en iconos de menú y bordes */
  --naranja-claro: #F1F1F1;

  /* 3. El segundo tono de más oscuro usado en iconos de botones.
     Lo definimos en formato RGB separado por comas para poder usarlo
     dentro de funciones rgba() con distintas opacidades.*/
    
  --naranja-oscuro-rgb:  169,	187,	225;
  --naranja-oscuro: #365695;
  --color-texto-seleccion: #000000;

}
/* --- FIN VARIABLES --- */


/* Ajuste de altura de línea para TextAreas */
.x-form-text-default.x-form-textarea {
    line-height: 18px;
    min-height: 50px;
}

/* --- ESTILOS DEL MENÚ (UniTreeMenu) --- */

.x-treelist-nav {
    /* APLICANDO VARIABLE GRIS */
    background-color: var(--bg-gris-principal) !important;
}

.x-treelist-nav .x-treelist-item-text {
    color: #FFFFFF !important; /* Texto Blanco */
}

.x-treelist-nav .x-treelist-item-icon {
    /* APLICANDO VARIABLE NARANJA CLARO */
    color: var(--naranja-claro) !important;
}

/* Estado Seleccionado */
.x-treelist-nav .x-treelist-item-selected {
    /* APLICANDO VARIABLE GRIS */
    background-color: var(--bg-gris-principal) !important;
    color: #FFFFFF !important;
}

/* Herramienta del ítem (si aplica) */
.x-treelist-nav .x-treelist-item-tool {
    /* APLICANDO VARIABLES */
    background-color: var(--bg-gris-principal) !important;
    color: var(--naranja-claro) !important;
}

/* Expander/Floater */
.x-treelist-nav.x-treelist-floater {
    width: 300px !important;
    /* APLICANDO VARIABLE GRIS */
    background-color: var(--bg-gris-principal) !important;
}

/* --- EFECTO HOVER (Pasar el mouse) --- */
/* Usamos la variable RGB del naranja oscuro e insertamos la opacidad deseada (0.2) */
.x-treelist-nav .x-treelist-item-over > .x-treelist-row {
    background-color: rgba(var(--naranja-oscuro-rgb), 0.2) !important;
}

/* --- EFECTO SELECCIONADO (Item activo) --- */
/* Usamos la misma variable RGB pero con opacidad 0.3 */
.x-treelist-nav .x-treelist-item-selected > .x-treelist-row {
    background-color: rgba(var(--naranja-oscuro-rgb), 0.3) !important;
}

/* Asegurar que el texto se mantenga blanco en la selección */
.x-treelist-nav .x-treelist-item-selected .x-treelist-item-text {
    color: #FFFFFF !important;
}
/* --- FIN ESTILOS MENÚ --- */


/* Botón Aceptar */
.btn-aceptar, .btn-aceptar * {
    /* APLICANDO VARIABLE GRIS */
    background-color: var(--bg-gris-principal) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 10px;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Pestañas (Tabs) */
.x-tab.x-tab-default:not(.x-tab-active),
.x-tab.x-tab-default:not(.x-tab-active) .x-tab-inner,
.x-tab.x-tab-default:not(.x-tab-active) a {
    background-color: #d0d0d0 !important;
    color: #000000 !important;
    border-radius: 8px 8px 0 0 !important;
}

/* --- ESTILOS DE EDICIÓN (Inputs / Edits) --- */

.selected-control {
    outline: 2px solid red !important;
}

.myEdit {
    text-transform: uppercase;
}

.x-menu-item-text {
    font-size: 10pt !important;
    text-align: center !important;
    padding: 6px !important;
}

/* Input normal (sin foco) */
.x-form-trigger-wrap-default input {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

/* Contenedor del Input (sin foco) */
.x-form-trigger-wrap-default {
    _padding: 0;
    border-radius: 8px !important;
    background-color: #EEE !important;
    border: 1px solid #777 !important;
    background-image: none !important;
    _box-shadow: 0 10px 10px -5px #777;
}

/* UniMemo */
textarea {
    border-radius: 8px !important;
    background-color: #EEE !important;
}

/* --- ESTADO DE FOCO (Cuando escribes) --- */

/* Fondo "Naranja casi gris" suave para resaltar letras negras */
textarea:focus {
    background-color: rgba(var(--naranja-oscuro-rgb), 0.2) !important; /* Tono cálido grisáceo */
    /* APLICANDO VARIABLE NARANJA CLARO PARA BORDE */
    border-color: var(--naranja-oscuro) !important;
}

.x-form-trigger-wrap-focus,
.x-form-trigger-wrap-default:focus {
    /* APLICANDO VARIABLE NARANJA CLARO PARA BORDE */
    border: 1px solid var(--naranja-oscuro) !important;
    background-color: rgba(var(--naranja-oscuro-rgb), 0.2) !important; /* Tono cálido grisáceo */
}

/* Triggers (iconos dentro del edit) */
.x-form-trigger,
.x-form-trigger-default {
    border-radius: 8px;
    background-color: transparent !important;
}

.x-form-trigger::before,
.x-form-trigger-default::before {
    position: relative;
    top: 1px;
    color: #333;
}

/* --- 1. ESTRUCTURA (Alineación Vertical Perfecta) --- */
.x-grid-cell {
    height: 1px; 
    vertical-align: middle !important;
}

.x-grid-cell-inner {
    height: 100% !important;
    min-height: 100%;
    display: flex;
    align-items: center; 
    box-sizing: border-box;
}

/* --- 2. COLORES: FILA SELECCIONADA (Fondo 70% + Texto Variable) --- */
.x-grid-item-selected {
    /* Fondo Naranja al 70% */
    background-color: rgba(var(--naranja-oscuro-rgb), 0.7) !important;
    /* Color de texto controlado por variable */
    color: var(--color-texto-seleccion) !important;
}

/* --- 3. COLORES: CELDA CON FOCO (Fondo 90% + Texto Variable) --- */
/* Agrupamos todos los casos posibles para asegurar que se pinte */
.x-grid-item-focused .x-grid-cell-inner,
.x-grid-cell-focused .x-grid-cell-inner, 
.x-grid-item-focused .x-grid-cell,
.x-grid-item-focused .x-grid-td {
    /* Fondo Naranja al 90% (Más fuerte para destacar donde estás) */
    background-color: rgba(var(--naranja-oscuro-rgb), 0.9) !important;
    background-image: none !important;
    
    /* Color de texto controlado por variable */
    color: var(--color-texto-seleccion) !important;
}

/* --- 4. CORRECCIÓN DE ALINEACIÓN HORIZONTAL (Para números y fechas) --- */
/* Detecta si la columna original tenía alineación derecha (numeros) */
.x-grid-cell-inner[style*="text-align: right"],
.x-grid-cell-inner[style*="text-align:right"] {
    justify-content: flex-end !important;
    padding-right: 8px !important; /* Un poco de aire a la derecha */
}

/* Detecta alineación centrada */
.x-grid-cell-inner[style*="text-align: center"],
.x-grid-cell-inner[style*="text-align:center"] {
    justify-content: center !important;
}

/* Detecta alineación izquierda (texto normal) */
.x-grid-cell-inner[style*="text-align: left"],
.x-grid-cell-inner[style*="text-align:left"] {
    justify-content: flex-start !important;
}

.x-btn-icon-el {
    /* Este usaba el naranja oscuro sólido (#D9521C).
       Podemos usar la variable RGB dentro de rgb() para que sea sólido */
    color: var(--naranja-oscuro) !important;
}

/* Otros botones */
.boton-verde,
.boton-verde * {
    background-color: #4CAF50;
    color: #FFFF00 !important;
    border-radius: 8px;
    border: none;
}

.campo-verde input {
    background-color: #eaffea !important;
    border-color: #4CAF50 !important;
}

.swal2-icon {
    display: none !important;
}