/* ============================================
   PALETA OFICIAL MIGO — REFERENCIA
   ============================================
   IMPORTANTE: Solo usar los hex listados aquí. No inventar
   colores fuera de esta paleta. Si hace falta un matiz que
   no está, usar la variante más cercana.

   No se usa CSS var() porque el navegador de desarrollo
   (Firefox 24) no soporta Custom Properties. Para cambiar
   un color en todo el archivo, hacer Find/Replace global del hex.

   ============================================
   COLORES PRINCIPALES MIGO (branding)
   ============================================

   --- AZUL PRIMARIO (primary) ---
   Primary blue:    #098DF3   (9,141,243)   ← acciones principales, links

   --- AZUL SECUNDARIO (secondary) ---
   Blue:            #2C50A5   (44,80,165)

   --- AZUL OSCURO (dark / tertiary) ---
   Dark blue:       #122A5B   (18,42,91)    ← títulos oscuros

   --- AMARILLO / ACCENT ---
   Yellow:          #F2B900   (242,185,0)   ← accent, highlights

   --- GRISES NEUTROS ---
   Grey base:       #BDBDBB   (189,189,188)
   Dark black:      #333333   (51,51,51)    ← texto principal

   ============================================
   VARIANTES (tonalidades del mismo color)
   ============================================

   --- DARK BLUE (más oscuros que primary) ---
   Dark-blue-1:     #18346E
   Dark-blue-2:     #1F3D80
   Dark-blue-3:     #264793

   --- BLUE (medios) ---
   Blue-1:          #235FB9
   Blue-2:          #1A6FCC
   Blue-3:          #127EE0

   --- LIGHT BLUE (más claros que primary) ---
   Light-blue-1:    #45A8F3   ← azul claro saturado
   Light-blue-2:    #82C3F3   ← azul claro medio
   Light-blue-3:    #BEDEF3   ← azul muy claro, ideal para fondos sutiles

   --- YELLOW ---
   Yellow-1:        #F5CA40
   Yellow-2:        #F8DC80
   Yellow-3:        #FBEDBE   ← amarillo muy claro, fondos sutiles

   --- GREY (claros) ---
   Grey-1:          #DDDCDC   ← bordes sutiles
   Grey-2:          #EDEDED
   Grey-3:          #F7F7F7   ← fondos muy claros

   --- DARK GREY ---
   Dark-grey-1:     #565655   ← texto secundario
   Dark-grey-2:     #787878
   Dark-grey-3:     #9B9B9A

   ============================================
   COLORES FUNCIONALES (NO-MIGO, utilitarios)
   ============================================
   Estos colores NO son de la marca Migo, pero se mantienen
   por convención universal de UI (success/danger). Solo usar
   para feedback funcional, NUNCA para elementos de branding.

   Success (verde):   #22C55E   Success light: #DCFCE7
   Danger (rojo):     #EF4444   Danger light:  #FEE2E2

   Blanco puro:       #FFFFFF   ← fondos de tarjetas, textos inversos
   ============================================ */

/* ============================================
   HEADER TOOLBAR (barra superior)
   ============================================
   Color del header desactivado para el PR inicial.
   El gradiente y colores por defecto de GXT se mantienen.
   Para activar la paleta Migo, descomentar el bloque y ajustar.
   ============================================ */

/* ============================================
   BOTONES MODERNOS (UcToolBarWin: Guardar / Cancelar)
   ============================================ */

/* Quitar sprite/gradient de GXT para poder pintar plano */
.btn-primary-migo table,
.btn-primary-migo .x-btn-tl,
.btn-primary-migo .x-btn-tr,
.btn-primary-migo .x-btn-tc,
.btn-primary-migo .x-btn-ml,
.btn-primary-migo .x-btn-mr,
.btn-primary-migo .x-btn-mc,
.btn-primary-migo .x-btn-bl,
.btn-primary-migo .x-btn-br,
.btn-primary-migo .x-btn-bc,
.btn-secondary-migo table,
.btn-secondary-migo .x-btn-tl,
.btn-secondary-migo .x-btn-tr,
.btn-secondary-migo .x-btn-tc,
.btn-secondary-migo .x-btn-ml,
.btn-secondary-migo .x-btn-mr,
.btn-secondary-migo .x-btn-mc,
.btn-secondary-migo .x-btn-bl,
.btn-secondary-migo .x-btn-br,
.btn-secondary-migo .x-btn-bc {
	background: none !important;
	background-image: none !important;
	border: none !important;
}

/* Botón primario: Guardar — borde azul */
.btn-primary-migo .x-btn-mc {
	background-color: transparent !important;
	border: 1.5px solid #098DF3 !important; /* primary */
	border-radius: 6px !important;
	padding: 2px 12px !important;
	transition: background-color 0.15s ease !important;
}

.btn-primary-migo button {
	color: #098DF3 !important; /* primary */
	font-weight: 500 !important;
}

.btn-primary-migo.x-btn-over .x-btn-mc {
	background-color: #BEDEF3 !important; /* light-blue-3 Migo */
}

/* Botón secundario: Cancelar — borde rojo */
.btn-secondary-migo .x-btn-mc {
	background-color: transparent !important;
	border: 1.5px solid #EF4444 !important; /* danger */
	border-radius: 6px !important;
	padding: 2px 12px !important;
	transition: background-color 0.15s ease !important;
}

.btn-secondary-migo button {
	color: #EF4444 !important; /* danger */
	font-weight: 500 !important;
}

.btn-secondary-migo.x-btn-over .x-btn-mc {
	background-color: #FEE2E2 !important; /* danger-light */
}

/* Botón neutro: transparente + borde gris, sin tocar paddings */
.btn-neutral-migo .x-btn-tl,
.btn-neutral-migo .x-btn-tr,
.btn-neutral-migo .x-btn-tc,
.btn-neutral-migo .x-btn-ml,
.btn-neutral-migo .x-btn-mr,
.btn-neutral-migo .x-btn-mc,
.btn-neutral-migo .x-btn-bl,
.btn-neutral-migo .x-btn-br,
.btn-neutral-migo .x-btn-bc {
	background-image: none !important;
	background-color: transparent !important;
}

.btn-neutral-migo .x-btn-mc {
	border: 1px solid #787878 !important; /* dark-grey-2 Migo */
	border-radius: 3px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.btn-neutral-migo.x-btn-over .x-btn-mc {
	background-color: #F7F7F7 !important; /* grey-3 Migo */
}

/* ============================================
   ICONOS DE MENSAJES (MessageBox)
   ============================================ */

.x-window-dlg .ext-mb-error {
	background-image: url(iconos/svg/msg-error.svg) !important;
	background-size: 32px 32px !important;
}

.x-window-dlg .ext-mb-info {
	background-image: url(iconos/svg/msg-info.svg) !important;
	background-size: 32px 32px !important;
}

.x-window-dlg .ext-mb-warning {
	background-image: url(iconos/svg/msg-warning.svg) !important;
	background-size: 32px 32px !important;
}

.x-window-dlg .ext-mb-question {
	background-image: url(iconos/svg/msg-question.svg) !important;
	background-size: 32px 32px !important;
}

.x-window-dlg .ext-mb-ok {
	background-image: url(iconos/svg/info-ok.svg) !important;
	background-size: 32px 32px !important;
	width: 32px !important;
	height: 32px !important;
}

/* ============================================
   ESTILO DIALOGOS / MESSAGE BOX
   ============================================ */

.x-window-dlg .x-msg-box-msg {
	text-align: center !important;
}

.x-window-dlg .x-window-header-text {
	color: #333333 !important; /* dark-black Migo */
	font-weight: 600 !important;
}

/* Fondo azul claro y esquinas redondeadas */
.x-window-dlg {
	border-radius: 10px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid #45A8F3 !important; /* light-blue-1 Migo */
}

/* Ocultar la sombra nativa de GXT (se reemplaza por box-shadow CSS) */
.x-window-dlg ~ .x-shadow,
.x-shadow {
	display: none !important;
}

.x-window-dlg .x-window-tl,
.x-window-dlg .x-window-tr,
.x-window-dlg .x-window-tc,
.x-window-dlg .x-window-ml,
.x-window-dlg .x-window-mr,
.x-window-dlg .x-window-mc,
.x-window-dlg .x-window-bl,
.x-window-dlg .x-window-br,
.x-window-dlg .x-window-bc {
	background-image: none !important;
	background-color: #FFFFFF !important; /* white */
	border: none !important;
}

/* Border-radius en las esquinas específicas de la tabla interna */
.x-window-dlg .x-window-tl { border-top-left-radius: 10px !important; }
.x-window-dlg .x-window-tr { border-top-right-radius: 10px !important; }
.x-window-dlg .x-window-bl { border-bottom-left-radius: 10px !important; }
.x-window-dlg .x-window-br { border-bottom-right-radius: 10px !important; }

.x-window-dlg .x-window-body {
	background-color: #FFFFFF !important; /* white */
	background-image: none !important;
	border: none !important;
}

.x-window-dlg .x-window-header {
	background-color: #FFFFFF !important; /* white */
	background-image: none !important;
	border-bottom: none !important;
}

/* ============================================
   VENTANAS (Window) — todas las que extienden de Window
   ============================================
   Se excluye .x-window-dlg (MessageBox) que tiene su propio estilo arriba.
   ============================================ */

.x-window:not(.x-window-dlg) {
	background-color: #BEDEF3 !important; /* light-blue-3 Migo (frame color) */
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
	border: 1px solid #45A8F3 !important; /* light-blue-1 Migo */
}

/* Celdas marco (header + laterales + fondo) en azul primary */
.x-window:not(.x-window-dlg) .x-window-tl,
.x-window:not(.x-window-dlg) .x-window-tr,
.x-window:not(.x-window-dlg) .x-window-tc,
.x-window:not(.x-window-dlg) .x-window-ml,
.x-window:not(.x-window-dlg) .x-window-mr,
.x-window:not(.x-window-dlg) .x-window-bl,
.x-window:not(.x-window-dlg) .x-window-br,
.x-window:not(.x-window-dlg) .x-window-bc {
	background-image: none !important;
	background-color: #BEDEF3 !important; /* light-blue-3 Migo (frame) */
	border: none !important;
}

/* Celda central contiene el body */
.x-window:not(.x-window-dlg) .x-window-mc {
	background-image: none !important;
	background-color: #EDEDED !important; /* grey-2 Migo (body) */
	border: none !important;
}

/* Header azul claro, sin tocar tamaños/paddings ni tipografía del default GXT */
.x-window:not(.x-window-dlg) .x-window-header {
	background-color: #BEDEF3 !important; /* light-blue-3 Migo */
	background-image: none !important;
	border-bottom: none !important;
}

/* Body con gris y borde light-blue para destacar la zona del formulario */
.x-window:not(.x-window-dlg) .x-window-body {
	background-color: #EDEDED !important; /* grey-2 Migo */
	background-image: none !important;
	border: 1px solid #45A8F3 !important; /* light-blue-1 Migo */
	border-radius: 4px !important;
}

/* Sub-paneles internos transparentes para dejar ver el gris del body.
   Se excluyen grids y explícitamente blancos para no romper tablas. */
.x-window:not(.x-window-dlg) .x-window-body .x-panel,
.x-window:not(.x-window-dlg) .x-window-body .x-panel-body,
.x-window:not(.x-window-dlg) .x-window-body .x-panel-mc,
.x-window:not(.x-window-dlg) .x-window-body .x-panel-bwrap,
.x-window:not(.x-window-dlg) .x-window-body .x-panel-body-noheader,
.x-window:not(.x-window-dlg) .x-window-body .x-form,
.x-window:not(.x-window-dlg) .x-window-body .x-container,
.x-window:not(.x-window-dlg) .x-window-body .x-box-inner,
.x-window:not(.x-window-dlg) .x-window-body .x-border-layout-ct,
.x-window:not(.x-window-dlg) .x-window-body .x-layer,
.x-window:not(.x-window-dlg) .x-window-body .x-border-panel {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Proteger grids: contenedor blanco, pero NO las filas (se respetan estilos dinámicos) */
.x-window:not(.x-window-dlg) .x-window-body .x-grid-panel,
.x-window:not(.x-window-dlg) .x-window-body .x-grid3,
.x-window:not(.x-window-dlg) .x-window-body .x-grid3-scroller,
.x-window:not(.x-window-dlg) .x-window-body .x-grid3-body,
.x-window:not(.x-window-dlg) .x-window-body .x-grid3-viewport {
	background-color: #FFFFFF !important; /* white */
}

/* Headers de sub-paneles (ej: Información Adicional) en azul claro */
.x-window:not(.x-window-dlg) .x-window-body .x-panel-header {
	background: #BEDEF3 !important; /* light-blue-3 Migo */
	background-image: none !important;
	border: none !important;
	color: #333333 !important; /* dark-black Migo */
}

.x-window:not(.x-window-dlg) .x-window-body .x-panel-header .x-panel-header-text {
	color: #333333 !important; /* dark-black Migo */
}

/* ============================================
   INPUTS (TextField, TextArea, ComboBox, DateField, NumberField)
   Borde sutil gris + focus azul primary
   ============================================ */

.x-form-text,
textarea.x-form-field,
.x-form-field {
	border: 1px solid #DDDCDC !important; /* grey-1 Migo */
	border-radius: 4px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Focus: borde azul primary + glow sutil */
.x-form-focus,
textarea.x-form-focus,
.x-form-text:focus,
textarea.x-form-field:focus {
	border: 1px solid #098DF3 !important; /* primary Migo */
	box-shadow: 0 0 0 2px rgba(9, 141, 243, 0.15) !important; /* primary glow */
	outline: none !important;
}

/* ============================================
   MENÚS
   ============================================ */

/* Items de menú informativos: quitar opacidad del disabled */
.menu-item-info.x-item-disabled {
	opacity: 1 !important;
	filter: none !important;
}

.menu-item-info.x-item-disabled a.x-menu-item {
	color: #565655 !important; /* dark-grey-1 Migo */
}

/* ICONOS MODERNOS (SVG override para header)
   Overrides desactivados mientras el header usa el color GXT por defecto.
   Cuando se active la paleta Migo, descomentar y usar versiones blancas. */

/* Iconos del menú dropdown (color primary) */
.x-menu .icono-security {
	background-image: url(iconos/svg/rol-dark.svg) !important;
	background-size: 16px 16px !important;
}


.x-menu .icono-administration {
	background-image: url(iconos/svg/plan-dark.svg) !important;
	background-size: 16px 16px !important;
}

.x-menu .icono-cambioclave {
	background-image: url(iconos/svg/password-dark.svg) !important;
	background-size: 16px 16px !important;
}

/* Ocultar flecha nativa del dropdown (ya incluida en el texto del botón) */
.x-border-panel .x-panel-bbar .x-toolbar em.x-btn-arrow {
	background-image: none !important;
}

/* Menú dropdown del usuario */
.x-menu {
	background-color: #FFFFFF !important; /* bg-card */
	border: 1px solid #DDDCDC !important; /* grey-1 Migo */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.x-menu-item-active {
	background-color: #BEDEF3 !important; /* light-blue-3 Migo */
	background-image: none !important;
	border-color: #82C3F3 !important; /* light-blue-2 Migo */
}

.x-menu-item-active a.x-menu-item {
	color: #098DF3 !important; /* primary */
}

.x-menu-list-item a.x-menu-item {
	color: #333333 !important; /* dark-black Migo */
}

.x-menu-sep {
	border-color: #DDDCDC !important; /* grey-1 Migo */
}

/* Botón "Menú" y mini-toggle: colores desactivados para PR inicial.
   Descomentar cuando se active la paleta Migo en el header. */