/* =============================================================================
 *  TEMA CORPORATIVO — CORPORACIÓN UNIVERSITARIA AUTÓNOMA DEL CAUCA (#78483)
 *  Basado en "Propuesta de interfaces DATASAE360" (Área de Comunicaciones,
 *  septiembre 2026). Colores muestreados del documento:
 *    Azul institucional  #1A407B  navegación activa y UNA acción principal
 *    Azul institucional+ #153563  (derivado, hover / presionado)
 *    Azul interactivo    #198AD4  foco, enlaces, progreso
 *    Azul selección      #EAF4FC  ítem activo del menú, fila seleccionada
 *    Ámbar               #FFC72C  (fondo #FFF8E1, texto #7A5A00) pendiente
 *    Verde               #1B8A5A  (fondo #E4F5EC) al día / completo
 *    Rojo                #C62828  (fondo #FDECEC) error
 *    Texto               #1B2432  principal / #5B6B82 secundario
 *    Superficies         #FFFFFF contenido, #F5F7FA cabeceras, bordes #E1E5EA
 *  Contraste: blanco sobre #1A407B = 10.2:1; #1A407B sobre #EAF4FC = 9.2:1;
 *  #5B6B82 sobre #FFFFFF = 5.4:1 (todos AA).
 *
 *  Principio del documento: el azul sólido deja de aplicarse a cabeceras,
 *  menú, pestañas y botones por igual. Contenido en blanco/gris claro, azul
 *  reservado a la navegación activa y a la acción principal.
 *
 *  Solo override de selectores Triton (ExtJS 7.1). No cambia la fuente:
 *  una regla global de font-family pisa la fuente de iconos 'ExtJS'.
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * PESTAÑAS (barra de módulos y barra de páginas): fondo blanco, activa subrayada
 * -------------------------------------------------------------------------- */
.x-tab-bar-default {
	background-color: #FFFFFF;
	border-color: #E1E5EA;
	border-bottom: 1px solid #E1E5EA;
}

.x-tab-bar-strip-default {
	background-color: transparent;
	border-color: transparent;
}

.x-tab-default,
.x-tab.x-tab-default {
	background-color: transparent;
	border-color: transparent;
	border-radius: 0;
}

.x-tab-inner-default {
	color: #5B6B82;
	font-weight: 600;
}

.x-tab-icon-el-default,
.x-tab-default .x-tab-glyph {
	color: #5B6B82;
}

.x-tab-over.x-tab-default {
	background-color: #F5F7FA;
}

.x-tab-over.x-tab-default .x-tab-inner-default {
	color: #1B2432;
}

.x-tab.x-tab-active.x-tab-default {
	background-color: transparent;
	box-shadow: inset 0 -3px 0 #1A407B;
}

.x-tab.x-tab-active.x-tab-default .x-tab-inner-default,
.x-tab.x-tab-active.x-tab-default .x-tab-icon-el-default {
	color: #1A407B;
}

.x-tab-focus.x-tab-default {
	outline-color: transparent;
}

.x-tab-default .x-tab-close-btn,
.x-tab-default.x-tab-active .x-tab-close-btn {
	color: #5B6B82;
}

.x-tab-default .x-tab-close-btn:hover {
	color: #C62828;
}

/* Flechas de desplazamiento de la barra de módulos */
.x-box-scroller-tab-bar-default,
.x-tab-bar-default-scroller .x-box-scroller-tab-bar-default {
	color: #5B6B82;
	background-color: #FFFFFF;
}


/* -----------------------------------------------------------------------------
 * PANELES: cabecera neutra, título oscuro
 * -------------------------------------------------------------------------- */
.x-panel-default,
.x-panel-default-framed {
	border-color: #E1E5EA;
}

.x-panel-header-default,
.x-panel-header-default-framed,
.x-panel-header-default-framed-top {
	background-color: #F5F7FA !important;
	border-color: #E1E5EA;
}

.x-panel-header-default {
	border-bottom: 1px solid #E1E5EA;
}

.x-panel-header-title-default,
.x-panel-header-title-default-framed {
	color: #1B2432;
	font-weight: 600;
}

.x-panel-header-default .x-tool-tool-el,
.x-panel-header-default .x-tool-img,
.x-panel-header-default-framed .x-tool-tool-el,
.x-panel-header-default-framed .x-tool-img {
	color: #5B6B82;
	background-color: transparent;
}

.x-panel-header-default .x-tool-over .x-tool-tool-el,
.x-panel-header-default-framed .x-tool-over .x-tool-tool-el {
	color: #1A407B;
}

.x-panel-header-default .x-panel-header-glyph,
.x-panel-header-default .x-panel-header-icon {
	color: #1A407B;
}

/* Acordeones */
.x-accordion-hd .x-panel-header-title {
	color: #1B2432;
	font-weight: 600;
}

.x-accordion-hd .x-tool-img,
.x-accordion-hd .x-tool-tool-el {
	color: #5B6B82;
}

.x-accordion-item .x-accordion-hd {
	border-color: #E1E5EA;
}

/* Fieldsets (grupos de campos) */
.x-fieldset-default {
	border-color: #E1E5EA;
	border-radius: 8px;
}

.x-fieldset-header-text-default,
.x-fieldset-header-default > .x-fieldset-header-text {
	color: #1A407B;
	font-weight: 600;
}


/* -----------------------------------------------------------------------------
 * BOTONES
 * default-small      → acción: azul institucional
 * default-toolbar    → acciones de barra: blanco con borde (no compiten)
 * -------------------------------------------------------------------------- */
.x-btn-default-small {
	background-color: #1A407B;
	border-color: #1A407B;
	border-radius: 6px;
}

.x-btn-inner-default-small {
	color: #FFFFFF;
	font-weight: 600;
}

.x-btn-icon-el-default-small {
	color: #FFFFFF;
}

.x-btn-over.x-btn-default-small,
.x-btn-focus.x-btn-default-small {
	background-color: #153563;
	border-color: #153563;
}

.x-btn.x-btn-menu-active.x-btn-default-small,
.x-btn.x-btn-pressed.x-btn-default-small {
	background-color: #153563;
	border-color: #153563;
}

.x-btn-focus.x-btn-default-small {
	box-shadow: 0 0 0 3px rgba(25, 138, 212, 0.30);
}

.x-btn-default-toolbar-small {
	background-color: #FFFFFF;
	border-color: #D0D9E2;
	border-radius: 6px;
}

.x-btn-inner-default-toolbar-small {
	color: #1B2432;
	font-weight: 600;
}

.x-btn-icon-el-default-toolbar-small {
	color: #5B6B82;
}

.x-btn-over.x-btn-default-toolbar-small {
	background-color: #F5F7FA;
	border-color: #B8C4D1;
}

.x-btn.x-btn-pressed.x-btn-default-toolbar-small,
.x-btn.x-btn-menu-active.x-btn-default-toolbar-small {
	background-color: #EAF4FC;
	border-color: #1A407B;
}

/* Barra inferior de formularios y ventanas ("buttons"): un solo botón principal.
 * El último botón (Guardar, Aceptar, Ir al panel…) queda en azul; los demás
 * (Cancelar, Más tarde…) pasan a blanco con borde. */
.x-toolbar-footer .x-btn-default-small {
	background-color: #FFFFFF;
	border-color: #D0D9E2;
}

.x-toolbar-footer .x-btn-default-small .x-btn-inner-default-small {
	color: #1B2432;
}

.x-toolbar-footer .x-btn-default-small .x-btn-icon-el-default-small {
	color: #5B6B82;
}

.x-toolbar-footer .x-btn-over.x-btn-default-small {
	background-color: #F5F7FA;
	border-color: #B8C4D1;
}

.x-toolbar-footer a.x-btn-default-small:last-of-type {
	background-color: #1A407B;
	border-color: #1A407B;
}

.x-toolbar-footer a.x-btn-default-small:last-of-type .x-btn-inner-default-small,
.x-toolbar-footer a.x-btn-default-small:last-of-type .x-btn-icon-el-default-small {
	color: #FFFFFF;
}

.x-toolbar-footer a.x-btn-over.x-btn-default-small:last-of-type {
	background-color: #153563;
	border-color: #153563;
}

/* Ext.Msg (Sí / No / Aceptar / Cancelar): el orden interno es OK, Sí, No,
 * Cancelar, así que la acción principal es el PRIMER botón visible. */
.x-message-box .x-toolbar-footer a.x-btn-default-small,
.x-message-box .x-toolbar-footer a.x-btn-default-small:last-of-type {
	background-color: #1A407B;
	border-color: #1A407B;
}

.x-message-box .x-toolbar-footer a.x-btn-default-small .x-btn-inner-default-small {
	color: #FFFFFF;
}

.x-message-box .x-toolbar-footer a.x-btn-default-small:not([style*="display: none"]) ~ a.x-btn-default-small {
	background-color: #FFFFFF;
	border-color: #D0D9E2;
}

.x-message-box .x-toolbar-footer a.x-btn-default-small:not([style*="display: none"]) ~ a.x-btn-default-small .x-btn-inner-default-small {
	color: #1B2432;
}

.x-btn.x-btn-disabled.x-btn-default-small {
	background-color: #1A407B;
}

/* Botón de usuario (esquina superior derecha) */
.button-menu-home {
	background-color: #FFFFFF !important;
	border-color: #E1E5EA !important;
	border-radius: 8px 8px 0 0;
}

/* Franja "Powered by" bajo el botón de usuario: Default/index.html.twig copia
 * en línea el color de .x-tab-bar-default, que en este tema es blanco y dejaría
 * invisible su texto blanco. */
#datasae-footer {
	background-color: #1A407B !important;
}

.button-menu-home.x-btn-over {
	background-color: #F5F7FA !important;
}

.button-menu-home .x-btn-wrap .x-btn-button .x-btn-inner-default-small {
	color: #1B2432;
}

.button-menu-home .x-btn-wrap-default-small.x-btn-arrow-right:after {
	color: #5B6B82;
}

.button-menu-home .x-btn-wrap .x-btn-button .x-btn-icon-el {
	color: #1A407B;
}


/* -----------------------------------------------------------------------------
 * MENÚ LATERAL (treelist): blanco, ítem activo en azul claro con barra azul
 * -------------------------------------------------------------------------- */
.x-treelist-nav,
.x-treelist-nav .x-treelist-toolstrip,
.treelist-with-nav .x-panel-body {
	background-color: #FFFFFF;
}

.treelist-with-nav .x-panel-body {
	border-right: 1px solid #E1E5EA;
}

.x-treelist-nav .x-treelist-item-text {
	color: #1B2432;
	font-weight: 400;
}

.x-treelist-nav .x-treelist-item-icon,
.x-treelist-nav .x-treelist-item-expander,
.x-treelist-nav .x-treelist-item-tool {
	color: #5B6B82;
}

.x-treelist-nav .x-treelist-row-over {
	background-color: #F5F7FA;
}

.x-treelist-nav .x-treelist-row-over:before,
.x-treelist-nav .x-treelist-item-selected > .x-treelist-row-over:before {
	background-color: #B8C4D1;
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row,
.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool {
	background-color: #EAF4FC;
}

.x-treelist-nav .x-treelist-item-selected > .x-treelist-row:before,
.x-treelist-nav .x-treelist-item-tool-floated:after {
	background-color: #1A407B;
}

.x-treelist-item-selected .x-treelist-row .x-treelist-item-wrap .x-treelist-item-text {
	color: #1A407B;
	font-weight: 600;
}

.x-treelist-item-selected .x-treelist-row .x-treelist-item-wrap .x-treelist-item-icon,
.x-treelist-nav .x-treelist-item-selected.x-treelist-item-tool {
	color: #1A407B;
}

/* Menú flotante en modo compacto */
.x-treelist-nav.x-treelist-floater,
.x-treelist-nav .x-treelist-floater {
	background-color: #FFFFFF;
	box-shadow: 0 8px 24px rgba(27, 36, 50, 0.16);
}

/* Botón para compactar el menú (pie del menú lateral) */
.treelist-with-nav .x-btn-default-small {
	background-color: #FFFFFF;
	border-color: #E1E5EA;
}

.treelist-with-nav .x-btn-default-small .x-btn-icon-el-default-small {
	color: #5B6B82;
}

.treelist-with-nav .x-btn-pressed.x-btn-default-small {
	background-color: #EAF4FC;
	border-color: #1A407B;
}


/* -----------------------------------------------------------------------------
 * VENTANAS EMERGENTES: tarjeta blanca redondeada, título oscuro, pie gris
 * -------------------------------------------------------------------------- */
.x-window-default {
	border-color: #E1E5EA;
	border-radius: 10px;
}

.x-css-shadow {
	border-radius: 10px;
}

.x-window-header-default,
.x-window-header-default-top {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	border-radius: 10px 10px 0 0;
}

.x-window-header-title-default {
	color: #1B2432;
	font-weight: 600;
}

.x-window-header-default .x-tool-img,
.x-window-header-default .x-tool-tool-el {
	background-color: transparent;
	color: #5B6B82;
}

.x-window-header-default .x-tool-over .x-tool-tool-el {
	color: #1B2432;
}

.x-window-header-default .x-window-header-glyph,
.x-window-header-default .x-window-header-icon {
	color: #1A407B;
}

.x-window-body-default {
	border-color: #FFFFFF;
	color: #1B2432;
}

.x-window-default .x-toolbar-footer {
	background-color: #F5F7FA;
	border-top: 1px solid #E1E5EA;
	border-radius: 0 0 10px 10px;
}

/* Avisos breves (Ext.toast): oscuros, no interrumpen */
.x-toast.x-window-default,
.x-toast .x-window-body-default {
	background-color: #1B2432;
	border-color: #1B2432;
	color: #FFFFFF;
}

/* Tooltips */
.x-tip-default {
	background-color: #1B2432;
	border-color: #1B2432;
	border-radius: 6px;
}

.x-tip-body-default {
	color: #FFFFFF;
}


/* -----------------------------------------------------------------------------
 * GRILLAS: encabezado gris claro, filas limpias, selección azul claro
 * -------------------------------------------------------------------------- */
.x-grid-header-ct {
	border-color: #E1E5EA;
}

.x-column-header {
	background-color: #F5F7FA;
	border-color: #E1E5EA;
}

.x-column-header-text-inner,
.x-column-header-inner {
	color: #5B6B82;
	font-weight: 600;
}

.x-column-header-over,
.x-column-header-sort-ASC,
.x-column-header-sort-DESC {
	background-color: #EEF1F5;
}

.x-column-header-trigger {
	background-color: #E1E5EA;
}

.x-grid-cell {
	color: #1B2432;
}

.x-grid-with-row-lines .x-grid-item,
.x-grid-with-row-lines .x-grid-item-alt {
	border-color: #EEF0F4;
}

.x-grid-item-alt {
	background-color: #FFFFFF;
}

.x-grid-row-over .x-grid-cell,
.x-grid-item-over {
	background-color: #F5F9FD;
}

.x-grid-item-selected,
.x-grid-item-selected .x-grid-cell {
	background-color: #EAF4FC !important;
	border-color: #CFE3F5;
	color: #1B2432;
}

.x-grid-group-hd {
	background-color: #F5F7FA;
	border-color: #E1E5EA;
}

.x-grid-group-title {
	color: #1A407B;
	font-weight: 600;
}

/* Barra de paginación y barras de herramientas */
.x-toolbar-default {
	background-color: #FFFFFF;
	border-color: #E1E5EA;
}

.x-toolbar-text-default {
	color: #5B6B82;
}


/* -----------------------------------------------------------------------------
 * CAMPOS DE FORMULARIO: borde suave, foco con halo azul, etiqueta legible
 * -------------------------------------------------------------------------- */
.x-form-item-label-default {
	color: #1B2432;
	font-weight: 600;
}

.x-form-trigger-wrap-default {
	border-color: #D0D9E2;
	border-radius: 6px;
}

.x-form-trigger-wrap-default .x-form-text-default {
	border-radius: 6px;
}

.x-form-trigger-default {
	color: #5B6B82;
}

.x-form-trigger-wrap-focus-default,
.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
	border-color: #198AD4;
	box-shadow: 0 0 0 3px rgba(25, 138, 212, 0.18);
}

.x-form-trigger-wrap-invalid-default,
.x-form-trigger-wrap-default.x-form-trigger-wrap-invalid {
	border-color: #C62828;
}

.x-form-text-default.x-form-empty-field-default,
.x-form-empty-field {
	color: #8A96A8;
}

.x-form-invalid-under-default,
.x-form-error-msg {
	color: #C62828;
}

.x-form-cb-checked .x-form-checkbox-default,
.x-form-cb-checked .x-form-radio-default {
	color: #1A407B;
}

/* Listas desplegables de combos y menús contextuales */
.x-boundlist-item-over {
	background-color: #F5F9FD;
	border-color: #F5F9FD;
}

.x-boundlist-selected {
	background: #EAF4FC;
	border-color: #EAF4FC;
	color: #1A407B;
}

.x-menu-item-focus .x-menu-item-link-default,
.x-menu-item-active .x-menu-item-link-default,
.x-menu-item-focus.x-menu-item-default,
.x-menu-item-active.x-menu-item-default {
	background-color: #EAF4FC;
}

/* -----------------------------------------------------------------------------
 * HOVER CON TEXTO LEGIBLE (ticket #79292)
 * styles.css (menú oscuro original) y Triton ponen en blanco el texto, el ícono y
 * la flecha al pasar el mouse por el menú lateral, los combos y los menús. Con los
 * fondos claros de este tema el texto blanco no se ve.
 * -------------------------------------------------------------------------- */
.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-text,
.x-treelist-nav.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-text,
.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
	color: #1A407B;
}

.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-icon,
.x-treelist-nav .x-treelist-row-over > * > .x-treelist-item-expander,
.x-treelist-nav.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-icon,
.x-treelist-nav.x-treelist-highlight-path .x-treelist-item-over > * > .x-treelist-item-expander {
	color: #1A407B;
}

.x-treelist-nav .x-treelist-item-floated > .x-treelist-row-over {
	background-color: #F5F7FA;
}

.x-boundlist-item-over {
	color: #1B2432;
}

.x-menu-item-focus .x-menu-item-text-default,
.x-menu-item-active .x-menu-item-text-default,
.x-menu-item-focus .x-menu-item-text-default-menubar,
.x-menu-item-active .x-menu-item-text-default-menubar {
	color: #1B2432;
}

.x-menu-item-icon-default,
.x-menu-item-glyph-default {
	color: #5B6B82;
}


/* -----------------------------------------------------------------------------
 * SWEETALERT2: una acción principal azul, secundaria en blanco
 * -------------------------------------------------------------------------- */
.swal2-popup {
	border-radius: 12px;
}

.swal2-title {
	color: #1B2432;
}

.swal2-styled.swal2-confirm {
	background-color: #1A407B;
	border-radius: 6px;
}

.swal2-styled.swal2-cancel {
	background-color: #FFFFFF;
	border: 1px solid #D0D9E2;
	border-radius: 6px;
	color: #1B2432;
}

.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus {
	box-shadow: 0 0 0 3px rgba(25, 138, 212, 0.30);
}


/* -----------------------------------------------------------------------------
 * GUÍA DE PRIMER USO (intro.js): tarjeta limpia, "Siguiente" en azul,
 * "Omitir" como enlace, progreso visible, halo azul en el campo guiado
 * -------------------------------------------------------------------------- */
.introjs-tooltip {
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(27, 36, 50, 0.18);
	color: #1B2432;
	padding: 16px 18px;
}

.introjs-helperLayer {
	border-radius: 8px;
	outline: 3px solid rgba(25, 138, 212, 0.55);
	outline-offset: 2px;
}

.introjs-helperNumberLayer {
	background: #1A407B;
	border: 2px solid #FFFFFF;
	box-shadow: none;
	color: #FFFFFF;
	text-shadow: none;
}

.introjs-tooltipbuttons {
	border-top: 0;
}

.introjs-button {
	background: #FFFFFF;
	background-image: none;
	border: 1px solid #D0D9E2;
	border-radius: 6px;
	box-shadow: none;
	color: #1B2432;
	font-weight: 600;
	text-shadow: none;
}

.introjs-button:hover,
.introjs-button:focus {
	background: #F5F7FA;
	border-color: #B8C4D1;
	box-shadow: none;
	color: #1B2432;
}

.introjs-nextbutton,
.introjs-donebutton {
	background: #1A407B;
	border-color: #1A407B;
	color: #FFFFFF;
}

.introjs-nextbutton:hover,
.introjs-nextbutton:focus,
.introjs-donebutton:hover,
.introjs-donebutton:focus {
	background: #153563;
	border-color: #153563;
	color: #FFFFFF;
}

.introjs-skipbutton {
	background: transparent;
	border-color: transparent;
	color: #198AD4;
}

.introjs-skipbutton:hover,
.introjs-skipbutton:focus {
	background: transparent;
	border-color: transparent;
	color: #1A407B;
}

.introjs-disabled,
.introjs-disabled:hover,
.introjs-disabled:focus {
	background: #FFFFFF;
	border-color: #E1E5EA;
	color: #B8C4D1;
}

.introjs-bullets ul li a {
	background: #D0D9E2;
}

.introjs-bullets ul li a.active {
	background: #198AD4;
	width: 16px;
}

.introjs-progressbar {
	background-color: #198AD4;
}


/* -----------------------------------------------------------------------------
 * CLASES SEMÁNTICAS DE ESTADO (opt-in para renderers de grilla)
 * Uso: '<span class="uac-estado uac-estado-ok">Activa</span>'
 * El color siempre va acompañado de texto.
 * -------------------------------------------------------------------------- */
.uac-estado {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	padding: 0 10px;
}

.uac-estado:before {
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: 6px;
	margin-right: 6px;
	vertical-align: middle;
	width: 6px;
	background-color: currentColor;
}

.uac-estado-ok        { background-color: #E4F5EC; color: #1B8A5A; }
.uac-estado-pendiente { background-color: #FFF3C4; color: #7A5A00; }
.uac-estado-error     { background-color: #FDECEC; color: #C62828; }
.uac-estado-info      { background-color: #EAF4FC; color: #1A407B; }
.uac-estado-inactivo  { background-color: #EEF0F4; color: #5B6B82; }