/* ============================= */
/* FUENTES */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* ============================= */
/* VARIABLES */
/* ============================= */

:root {
  --primary-blue: #3b6882;

  /* DARK MODE */
  --dark-bg-main: #121212;
  --dark-bg-panel: #1e1e1e;
  --dark-bg-cell: #1a1a1a;
  --dark-bg-hover: #2c2c2c;
  --dark-header: #252525;
  --dark-header-hover: #333333;
  --dark-border: #2a2a2a;
  --dark-text: #e0e0e0;
}

/* ============================= */
/* BASE GENERAL (MODO CLARO) */
/* ============================= */

.x-body,
.x-component,
.x-panel-body-default,
.x-column-header,
.x-menu-body-default,
.x-column-header-text-inner,
.x-grid-cell-inner,
.x-form-text,
.x-tab-inner,
.x-btn-inner {
  font-family: 'Open Sans', sans-serif !important;
  /*font-weight: 400; */
}

/* ===== BODY ===== */

.x-body {
  color: black;
}

.x-panel-body-default {
  background: #f7f8fa;
}

/* ===== GRID HEADER ===== */

.x-column-header-inner {
  background-color: var(--primary-blue) !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

.x-column-header.x-column-header-over {
  background-color: var(--primary-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 3px !important;
}

/* ===== GRID CELLS ===== */

.x-grid-cell-inner {
  font-size: 14px !important;
  color: #2e2e2e !important;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
  background-color: #f9f9f9 !important;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease;
}

/* ===== GRID TRIGGER ===== */

.x-column-header-over .x-column-header-trigger,
.x-column-header-open .x-column-header-trigger {
  background-color: var(--primary-blue) !important;
}

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

.x-btn-inner {
  color: #ffffff !important;
}

.x-btn-default-small {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

.x-btn-default-small:hover,
.x-btn-default-small:x-btn-over,
.x-btn-default-small:x-btn-pressed {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

/* ===== WINDOW HEADER ===== */

.x-window-header-default-top {
  background-color: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
}

/* ===================================================== */
/* ==================  DARK MODE  ====================== */
/* ===================================================== */

body.dark .x-body {
  background-color: var(--dark-bg-main) !important;
  color: var(--dark-text) !important;
}

body.dark .x-panel-body-default {
  background-color: var(--dark-bg-panel) !important;
  color: var(--dark-text) !important;
}


/* GRID HEADER */

body.dark .x-column-header-inner {
  background-color: var(--dark-header) !important;
  color: #ffffff !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

body.dark .x-column-header.x-column-header-over {
  background-color: var(--dark-header-hover) !important;
}

/* GRID CELLS */

body.dark .x-grid-cell-inner {
  background-color: var(--dark-bg-cell) !important;
  color: #cccccc !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

body.dark .x-grid-item-over .x-grid-cell-inner {
  background-color: var(--dark-bg-hover) !important;
  color: #ffffff !important;
}

/* MENUS */

body.dark .x-menu-body-default {
  background-color: var(--dark-header) !important;
  color: #ffffff !important;
}

/* WINDOW HEADER */

body.dark .x-window-header-default-top {
  background-color: var(--dark-header) !important;
  border-color: var(--dark-header) !important;
}

/* BOTONES */

body.dark .x-btn-default-small {
  background-color: var(--dark-header) !important;
  border-color: var(--dark-header) !important;
}



/* LG: correcion a los espacios vacios del contenedor principal del View */
body.dark .x-grid-view {
    background-color: var(--black-primary-color) !important;     
    color: #ffffff !important;
}



/* ===================================================== */
/* =========== TOOLBAR RICH EDIT (DARK) - ============= */


/* LG: es el fondo del componente memo, iframe */
/* body.dark .x-html-editor-container {
    background-color: var(--black-secondary-color) !important;
} */

body.dark iframe.x-htmleditor-iframe {    
    filter: invert(1) hue-rotate(180deg); /* invierte colores */
} 


/* 1. Fondo oscuro para todos los contenedores de la barra */
body.dark .x-toolbar-default,
body.dark .x-box-menu-body-horizontal,
body.dark .x-toolbar-default .x-box-inner {
    background-color: #222 !important;
    background-image: none !important;
    border-color: var(--black-tertiary-color) !important;
}

/* 2. Invertimos SOLO los iconos, flechas y separadores (NO los contenedores) */
body.dark .x-toolbar-default .x-btn-icon-el,
body.dark .x-toolbar-default .x-btn-arrow-right::after,
body.dark .x-toolbar-default .x-toolbar-separator {
    filter: brightness(0) invert(1) !important;
}

/* 3. Estilo para los botones (transparentes por defecto) */
body.dark .x-toolbar-default .x-btn-plain-toolbar-small {
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

/* 4. Efecto cuando el botón está presionado o activo */
body.dark .x-toolbar-default .x-btn-pressed,
body.dark .x-toolbar-default .x-btn-over {
    background-color: #444 !important;
    filter: none !important; /* Aseguramos que no herede filtros raros */
}

/* 5. Texto de etiquetas o botones si tuvieran */
body.dark .x-toolbar-default .x-toolbar-text,
body.dark .x-toolbar-default .x-btn-inner {
    color: #ffffff !important;
}

/* 6. Fix para el borde que a veces queda en la parte inferior */
body.dark .x-toolbar-default {
    border-bottom: 1px solid var(--black-tertiary-color) !important;
}





/* ===== LG: fix para que no cambie a modo oscuro el panel de procesos usados ===== */

body.dark .no-dark-panel .x-panel-body,
body.dark .no-dark-panel .x-panel-body-default,
body.dark .no-dark-panel .x-panel-white {
    background-color: white !important;
    background: white !important;
    color: inherit !important;
}