/* ------------------------------------------------------------------ */
/*                            CONFIGURACION BASE                      */
/* ------------------------------------------------------------------ */

/* Variables */
:root {
  /* Color Palette */
  --color-berkeley-blue: #003366;
  --color-black: black;
  --color-black-2: #01060d;
  --color-blue: blue;
  /* Cadette palette https://coolors.co/8d9a9e-1d1d4b */
  --color-cadet-blue: #1d1d4b;
  --color-cadet-gray: #8d9a9e;
  /* Light Gray palette https://coolors.co/f8f8f8-f1f1f1-dfdfdf-c2c7c7-979797 */
  /* Dark Gray palette https://coolors.co/dfdfdf-c2c7c7-979797-808080-444444 */
  --color-gray-1: #f8f8f8;
  --color-gray-2: #f1f1f1;
  --color-gray-3: #dfdfdf;
  --color-gray-4: #c2c7c7;
  --color-gray-5: #979797;
  --color-gray-6: #808080;
  --color-gray-7: #444444;
  --color-penn-blue: #040438;
  --color-red: red;
  /* Light True blue palette https://coolors.co/6e8ab8-627da9-516f9f-41597f-394e6f */
  /* Dark True blue palette https://coolors.co/627da9-516f9f-41597f-394e6f-334563 */
  --color-true-blue-light-1: #d8dee9;
  --color-true-blue-light-2: #6e8ab8;
  /* #668bc7;*/
  --color-true-blue-light-3: #627da9;
  --color-true-blue: #516f9f;
  --color-true-blue-dark: #41597f;
  --color-true-blue-dark-2: #394e6f;
  --color-white: white;

  /* Font families */
  --font-family-main: Verdana, Geneva, Tahoma, sans-serif;

  /* Font sizes */
  --font-size-base: 11px;
  --font-size-lg: 13px;

  /* Font colors */
  --font-color-alert: var(--color-red);
  --font-color-base: var(--color-black);
  --font-color-emphasis: var(--color-berkeley-blue);
  --font-color-muted: var(--color-gray-6);

  /* Backgrounds */
  --bg-color-base: var(--color-white);

  /* Component colors */
  --comp-color-bg-primary: var(--color-true-blue);
  --comp-color-bg-primary-hover: var(--color-true-blue-light-2);
  --comp-color-bg-primary-light: var(--color-true-blue-light-2);
  --comp-color-bg-primary-subtle-light: var(--color-true-blue-light-3);
  --comp-color-bg-primary-outline: var(--color-white);
  --comp-color-bg-secondary: var(--color-gray-2);
  --comp-color-bg-secondary-hover: var(--color-gray-3);
  --comp-color-bg-secondary-light: var(--color-gray-1);
  --comp-color-bg-emphasis: var(--color-true-blue-dark);
  --comp-color-bg-emphasis-hover: var(--color-true-blue-dark-2);
  --comp-color-bg-emphasis-darker: var(--color-true-blue-dark-2);
  --comp-color-bg-dialog: var(--color-gray-3);

  --comp-color-font-primary: var(--color-white);
  --comp-color-font-primary-outline: var(--font-color-base);
  --comp-color-font-primary-muted: var(--color-gray-4);
  --comp-color-font-secondary: var(--color-black);
  --comp-color-font-emphasis: var(--color-berkeley-blue);

  /* Div colors */
  --comp-color-bg-div-nav: var(--color-true-blue-dark);
  --comp-color-bg-div-heading: var(--color-true-blue-dark-2);
  --comp-color-bg-div-list: var(--color-gray-1);
  --comp-color-font-div-heading: var(--color-white);
  --comp-color-font-div-list: var(--color-berkeley-blue);

  /* Borders */
  --comp-border-primary: 1px solid var(--color-black);
  --comp-border-primary-light: 2px solid var(--color-true-blue-light-2);
  --comp-border-secondary: 1px solid var(--color-gray-5);

  --comp-border-dialog: 1px solid var(--color-black);
  --comp-border-input: 1px solid var(--color-gray-5);
  --comp-border-input-disabled: 1px solid var(--color-gray-4);
  --comp-border-input-focus: 1px solid var(--color-gray-7);
  --comp-border-button-focus: 1px solid var(--color-black);

  --comp-border-radius-button-base: 2px;

  /* Component sizes */
  --comp-size-row-default: 15px;

  /* Gaps and margins between elements */
  --comp-size-separation-sm: 3px;
  --comp-size-separation-base: 5px;
  --comp-size-separation-lg: 10px;
  --comp-size-separation-xl: 20px;

  --comp-size-button-padding-sm: 1px 2px;
  --comp-size-button-padding-base: 4px 6px;

  --comp-size-container-padding-sm: 3px 4px;
  --comp-size-container-padding-base: 5px 10px;

  --comp-size-table-padding-sm: 2px;
  --comp-size-table-padding-base: 4px;
  --comp-size-table-padding-large: 8px;

  /* Overlays colors */
  --overlay-color-primary: rgba(0, 0, 0, 0.1);

  /* Z-index levels */
  --z-tab-row: 1;
  --z-tab-page: 2;
  --z-tab-row-selected: 3;
  --z-sidebar: 10;
  --z-1: 50;
  --z-1: 50;
  --z-2: 100;
  --z-context-menu: 900;
  --z-mensaje-carga: 1000;

  /* Scrollbar */
  --scrollbar-track-color: var(--color-gray-1);
  --scrollbar-thumb-color: var(--color-gray-4);
  --scrollbar-thumb-hover-color: var(--color-cadet-gray);
  --scrollbar-arrow-color: var(--color-white);
}

/* ----------------------- Cuerpo ----------------------- */
html {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--bg-color-base);
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  line-height: normal;
  overflow: auto;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 0;

  /* Scrollbar Customization (For Internet Explorer & Edge) */
  scrollbar-face-color: var(--scrollbar-thumb-color);
  scrollbar-highlight-color: var(--scrollbar-thumb-color);
  scrollbar-shadow-color: var(--scrollbar-thumb-color);
  scrollbar-3dlight-color: var(--scrollbar-thumb-color);
  scrollbar-arrow-color: var(--scrollbar-arrow-color);
  scrollbar-track-color: var(--scrollbar-track-color);
  scrollbar-darkshadow-color: var(--scrollbar-thumb-color);
}

/* ----------------------- Scrollbar ----------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* ----------------------- Table ----------------------- */

table,
.grid {
  color: var(--font-color-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
}

/* ----------------------- Button ----------------------- */

/* Estilos del botón por defecto
 * Se recomienda sobreescribirlos en toda clase botón para evitar acoplamiento
 * También se recomienda la sobreescritura conceptual. Por ejemplo, los botones del #pie.
 *
 * El botón por defecto se emplea en casos en que semánticamente se requiere un botón 
 * pero este no debe mostrar más estilos que un cambio en el hover. 
 * 
 * Estos habitualmente son botones de imágenes
 * o el botón para añadir una fila nueva en algunas tablas, que muestra solo un signo +
 */

button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  margin: 0;
}

button:hover,
button:active,
button:focus,
button:focus-visible {
  opacity: 80%;
}

button:focus,
button:focus-visible {
  outline: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 50%;
}

/* ----------------------- Input -----------------------*/
input[type="color"],
input[type="date"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input:not([type]),
select {
  border: var(--comp-border-input);
  box-sizing: border-box;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
}

input[type="date"]:disabled,
input[type="email"]:disabled,
input[type="month"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled,
input[type="time"]:disabled,
input[type="url"]:disabled,
input[type="week"]:disabled,
input:not([type]):disabled,
select:disabled,
textarea:disabled {
  color: var(--color-gray-5);
  background-color: var(--color-gray-1);
  border: var(--comp-border-input-disabled);
}

input:focus:not(:focus-visible) {
  outline: none;
}

input:focus {
  border: var(--comp-border-input-focus);
  outline: none;
}

input[type="checkbox"] {
  height: 12px;
  margin: 0;
}

input[type="radio"] {
  height: 12px;
  margin: 0;
}

/* ----------------------- Select ----------------------- */
select:focus {
  border: var(--comp-border-input-focus);
  outline: none;
}

select[multiple],
select[size],
select option:only-child {
  height: auto;
}

/* ----------------------- Text Area ----------------------- */
textarea,
.textarea {
  border: var(--comp-border-input);
  box-sizing: border-box;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  overflow: auto;
  padding: 5px;
}

textarea:focus {
  border: var(--comp-border-input-focus);
}

textarea:focus-visible {
  border: var(--comp-border-input-focus);
  outline: none;
  box-shadow: none;
  /* Some browsers use this for focus indication */
}

.textarea-lg {
  min-height: 75px;
}

/* ----------------------- Form ----------------------- */
form {
  margin: 0;
  padding: 0;
}

/* ----------------------- Dialog ----------------------- */
dialog {
  border: var(--comp-border-dialog);
  background-color: var(--comp-color-bg-dialog);
  cursor: pointer;
}

/* ----------------------- Anchor ----------------------- */
a,
.datosLink,
a:visited {
  text-decoration: underline;
  cursor: pointer;
  color: var(--font-color-emphasis);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
}

a:hover {
  color: var(--comp-color-bg-primary);
}

/* ------------------- Horizontal Rule ------------------- */

hr {
  height: 1px;
  background-color: var(--comp-color-bg-primary-light);
  margin: 7px 0 7px 0;
}

/* ----------------------- Iframe ----------------------- */

iframe {
  border: 0;
}

/* ----------------------- Image ------------------------ */

img {
  /* Prevent image dragging in Safari and older Chrome */
  -webkit-user-drag: none;
  /* Prevent image/text selection in Firefox */
  -moz-user-select: none;
  /* Prevent image/text selection in Safari and Chrome */
  -webkit-user-select: none;
  /* Prevent image/text selection in Internet Explorer 10/11, old Edge */
  -ms-user-select: none;
  /* Prevent image/text selection in modern browsers like Chrome, Edge (Chromium), Firefox, Safari */
  user-select: none;
}

/* ----------------------- Paragraph ----------------------- */

p {
  margin: var(--comp-size-separation-base) auto;
}

/* ----------------------- BOOTSTRAP ----------------------- */
.row {
  margin: 0px 0px !important;
  padding: 0 !important;
}

.col-sm-6,
.col-sm-3 {
  text-align: center !important;
  margin: 0px 0px !important;
  padding: 0px !important;
}

/* ------------------------------------------------------------------ */
/*                      CONTENEDORES GENERALES                        */
/*                                                                    */
/*       Contenedores genéricos para casos de aplicación varios       */
/* ------------------------------------------------------------------ */

/** 
 *  Estilos para contenedor genérico. 
 *  Añade un padding y habilita el scrolling.
 */
.contenedor {
  box-sizing: border-box;
  padding: var(--comp-size-separation-lg);
  width: 100%;
}

/* Cabecera azul de algunas secciones.
 * 
 * Tratar de no usar.
 * Se usa en formulario de nueva actualización y de detalle de producto
*/
.tabla-tr-top,
tr.trabla-tr-top > td {
  color: white;
  background-color: var(--comp-color-bg-emphasis);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base) !important;
  text-align: center;
}

div.tabla-tr-top {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/*                             SECCIONES                              */
/*                                                                    */
/*                 Ventanas emergentes y otras vistas                 */
/*             que utilizan un encabezado y un pie azules             */
/*                                                                    */
/*   Cómo usar:                                                       */
/*      <body>                                                        */
/*        <header id="cabecera"></header>                             */
/*        <main id="cuerpo"></main>                                   */
/*        <footer id="pie"></footer>                                  */
/*      </body>                                                       */
/*                                                                    */
/* ------------------------------------------------------------------ */

/** 
 *  ----------------------- CABECERA ------------------------
 *
 *  Encabezado azul donde se suele colocar el nombre del modal.
 *  Usado en casi todos los modales
 */
/* Preferir #cabecera */
#cabecera,
.tituloBG {
  align-items: center;
  background-color: var(--comp-color-bg-primary);
  box-sizing: border-box;
  color: var(--comp-color-font-primary);
  display: flex !important;
  flex-direction: column;
  font-family: var(--font-family-main);
  font-weight: 600;
  font-size: var(--font-size-lg);
  justify-content: center;
  margin: 0 0 var(--comp-size-separation-sm) !important;
  min-height: 40px;
  padding: var(--comp-size-container-padding-base);
  position: static !important;
  text-align: center;
  width: 100% !important;
}

/* Para transición de versiones */
:is(#cabecera, .tituloBG) br {
  display: none;
}

/** 
 *  ----------------------- CUERPO ------------------------
 *
 *  Estilos para contenedor principal de modales. 
 *  Añade espacio entre el body y el contenido y habilita el scrolleo.
 */
#cuerpo {
  box-sizing: border-box;
  height: auto !important;
  overflow: auto;
  padding: var(--comp-size-separation-lg);
  position: static !important;
  width: 100% !important;
}

/**  
 *  ----------------------- PIE ------------------------
 *
 *   Pie de ventana emergente general
 */
#pie {
  align-items: center;
  background-color: var(--comp-color-bg-primary);
  box-sizing: border-box;
  color: var(--comp-color-font-primary);
  display: flex !important;
  gap: var(--comp-size-separation-base);
  justify-content: end;
  margin-top: var(--comp-size-separation-sm);
  min-height: 10px;
  overflow: hidden !important;
  padding: 2px 6px;
  position: static;
  width: 100% !important;
}

#pie img,
#pie input[type="image"],
#pie table td img,
#pie table td input[type="image"] {
  margin: 0;
  max-height: 16px;
  width: 16px;
  filter: opacity(70%);
}

#pie img:hover,
#pie input[type="image"]:hover,
#pie table td img:hover,
#pie table td input[type="image"]:hover,
#pie img:focus,
#pie input[type="image"]:focus,
#pie table td img:focus,
#pie table td input[type="image"]:focus {
  filter: opacity(100%);
  outline: none;
}

/* --------------------- CONFIGURACION DE LAYOUT ---------------------
 *
 * Configuracion de posicionamiento de elementos según las distintas estructuras de las ventanas.
 */

/* Si body tiene #cuerpo, utiliza display flex para alinear los elementos verticalmente */
body:has(#cuerpo) {
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Si un cuerpo contiene un form y este #cuerpo, form ocupa todo el espacio disponible de la ventana */
body > form:has(> #cuerpo) {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  overflow: auto;
}

/* #Cuerpo crece hasta ocupar todo el espacio disponible */
body:has(> #cuerpo) > #cuerpo,
body > form:has(> #cuerpo) > #cuerpo {
  flex: 1 !important;
}

/* Se ocultan los br que son hijos directos de #cuerpo. Esto se usa para que el espaciado entre elementos en #cuerpo se configure exclusivamente desde el CSS de #cuerpo */
body:has(#cuerpo) > br {
  display: none;
}

/* Esto evita que cuando el cuerpo ocupe toda la ventana, parte quede tapada por el #pie.
   Como #cuerpo crece hasta ocupar todo el espacio disponible, #pie siempre queda en el extremo inferior
*/
body:has(#cuerpo) > #pie,
body:has(#cuerpo) > form > #pie {
  position: static !important;
}

/* Asegurar que el pie se ubique en la parte inferior de la ventana cuando no hay un 
 * #cuerpo o el #pie está dentro del #cuerpo. Se recomienda evitar estos casos. 
 */
body:not(:has(#cuerpo)) #pie,
#cuerpo #pie {
  bottom: 0 !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
}

#cuerpo:has(#pie) {
  padding-bottom: 20px !important;
}

/* ------------------------------------------------------------------ */
/*                          MODAL GENÉRICO                            */
/*                                                                    */
/*           Opción como alternativa a ventanageneral.asp             */
/*                para ventanas emergentes muy pequeñas               */
/*                                                                    */
/*  Cómo usar:                                                        */
/*    <div class="modalGenerico-overlay">                             */
/*       <div class="modalGenerico">                                  */
/*          <div class="encabezadoModal">                             */
/*             Nombre del modal                                       */
/*             <button onclick="accion();" class="icono">x</button>   */
/*          </div>                                                    */
/*          <div class="contenidoModal">                              */
/*             Contenido                                              */
/*          </div>                                                    */
/*          <button onclick="accion()">Aceptar</button>               */
/*       </div>                                                       */
/*    </div>                                                          */
/* ------------------------------------------------------------------ */

/*
  Añade un fondo negro transparente sobre toda la ventana y
  coloca en el centro de la pantalla todo lo que se anide en este div

  Se añadió esta clase para eliminar los estilos embebidos en las páginas utilizados para centrar los modales.
  Reemplaza capaBloqueo.
*/
.modalGenerico-overlay {
  align-items: center;
  background-color: var(--overlay-color-primary);
  box-sizing: border-box;
  display: flex;
  filter: alpha(opacity=60);
  height: 100%;
  justify-content: center;
  left: 0;
  padding: 10%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

/* Guarda el contenido del modal */
.modalGenerico {
  background-color: var(--comp-color-bg-primary-outline);
  border: var(--comp-border-primary);
  color: var(--comp-color-font-primary-outline);
  display: flex;
  flex-direction: column;
  /* recommended for vertical layout */
  font-family: var(--font-family-main);
  /* max-height: 90vh; */
  pointer-events: auto;
  position: relative;
  z-index: 100;
}

/* Encabezado celeste */
/* Parte de los estilos se definen en cabecera */
/* Preferir encabezadoModal */
.modalGenerico :is(.encabezadoModal, .cabecera) {
  background-color: var(--comp-color-bg-primary);
  box-sizing: border-box;
  color: var(--comp-color-font-primary);
  display: flex;
  flex-direction: row;
  font-family: var(--font-family-main);
  font-weight: 600;
  font-size: var(--font-size-lg);
  justify-content: space-between;
  margin-bottom: var(--comp-size-separation-sm);
  min-height: 28px;
  padding: 8px 2px 5px 10px;
  text-align: left;
}

.modalGenerico :is(.encabezadoModal, .cabecera) img {
  height: 100%;
}

.modalGenerico .contenidoModal {
  flex: 1;
  overflow: auto;
  padding: var(--comp-size-separation-base);
  width: 100%;
}

.modalGenerico .pieGeneral {
  align-items: center;
  background-color: var(--comp-color-bg-primary);
  /* bottom: 0; */
  box-sizing: border-box;
  color: var(--comp-color-font-primary);
  display: flex;
  gap: var(--comp-size-separation-base);
  justify-content: end;
  padding: var(--comp-size-container-padding-sm);
  /* position: absolute; */
  width: 100%;
}

/* NO USAR
 * Botón en la esquina inferior izquierda habitualmente usado para cerrar el modal
 * Preferir:
  <div class="pieGeneral">
    <button type="submit" title="<%=Traductor("Aceptar")%>" onclick="aceptar();">
      <img src="../images/aceptar.gif" aria-label="<%=Traductor("Aceptar")%>"/>
    </button>
  </div>
*/
.modalGenerico .aceptarModal {
  background-color: var(--comp-color-bg-primary);
  border: none;
  color: var(--comp-color-font-primary);
  cursor: pointer;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: bold;
  margin: 5px;
  padding: var(--comp-size-button-padding-base);
  right: 5px;
  text-align: center;
  text-transform: capitalize;
  /* width: 30%; */
}

/* Clases de compatibilidad */
.modalGenerico:not(:has(.pieGeneral)) .aceptarModal {
  position: absolute;
  bottom: 3px;
}

/* Añade espacio para el botón de aceptar cuando este tiene posición absoluta */
.modalGenerico:not(:has(.pieGeneral)):has(.aceptarModal) {
  padding-bottom: 40px;
}

.modalGenerico .aceptarModal:hover {
  background-color: var(--comp-color-bg-primary-hover);
}

/**
 *  Buscador estandarizado para modales genéricos. 
 *  Usado en muy pocas ocaciones y en general dentro de modalGenerico
 *
 *  Cómo usar:
 *      <div class="buscadorModal">
 *          <input type="text" id="buscadorModal" value="Ingrese algo..."> 
 *          <select id="almacenModal" type="select-one" onchange="llenarTabla();"> ... </select> [Opcional]
 *      </div> 
*/
.buscadorModal {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--comp-size-separation-base);
  max-width: 100%;
  max-height: 100%;
  padding: 0 var(--comp-size-container-padding-base);
  margin: var(--comp-size-separation-lg) 0px;
}

.contenidoModal .buscadorModal {
  padding: 0;
}

/**
 *  Imput de búsqueda
 *  Crece hasta ocupar todo el espacio disponible
 */
.buscadorModal input:first-of-type {
  flex: 1;
}

/* CHEQUEAR */
/* .tablaModal {
  box-sizing: border-box;
  height: 76%;
  padding: 5px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  margin: 0;
  width: 100%;
}
.tablaModal table {
  max-width: 100%;
  max-height: 100%;
  position: relative;
}
.tablaModal table tr td {
  padding: 1px 5px;
} */

/* CHEQUEAR */
/* ESPECIALES */
/* #trilay-panel-de-control iframe {
  height: 80vh !important;
}

#icBuscar {
  width: 16px !important;
} */

/* ------------------------------------------------------------------ */
/*                             MENSAJE DE CARGA                       */
/* ------------------------------------------------------------------ */

/**
 *  Mensaje de carga genérico que ocupa toda la ventana.
 *  Utilizar la clase mensajeCarga preferentemente.
 *  
 *  Cómo usar:
 *        <div class="mensajeCarga">
 *          <img src="../images/spin.gif?v=<%=EVITA_CACHE%>" aria-label='<%= Traductor("Cargando") %>'/>
 *          <%=Traductor("Cargando Datos...")%>
 *        </div>
 */
.mensajeCarga,
/* Preferir .mensajeCarga */
#mensajeCarga {
  align-items: center;
  background-color: var(--bg-color-base);
  box-sizing: border-box;
  color: var(--font-color-emphasis);
  display: flex;
  filter: alpha(opacity=96);
  flex-direction: column;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-main);
  gap: var(--comp-size-separation-base);
  height: 100%;
  justify-content: center;
  overflow: auto;
  padding: var(--comp-size-container-padding-base);
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#mensajeCarga img,
.mensajeCarga img {
  margin-bottom: 15px;
  min-width: 51px;
  width: 2%;
}

/* Como algunos mensajes de carga tienen un br entre elementos, 
 * se oculta para unificar estilos
 */
#mensajeCarga br,
.mensajeCarga br,
#divEspere br,
.espere br {
  display: none;
}

#mensajeCargaDiv {
  background-color: white;
  filter: alpha(opacity=96);
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  height: 100%;
  overflow: auto;
  padding-top: 25px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: var(--z-2);
}

/** 
 *  Modal de espere pequeño
 */
#divEspere,
/* Preferir .espere */
.espere,
.mensajeCarga-sm {
  align-items: center;
  background-color: var(--bg-color-base);
  border: 1px outset;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  color: var(--font-color-emphasis);
  display: flex;
  filter: alpha(opacity=96);
  flex-direction: column;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-main);
  height: 130px;
  gap: var(--comp-size-separation-lg);
  justify-content: center;
  left: 35%;
  overflow: auto;
  padding: var(--comp-size-container-padding-base);
  position: absolute;
  text-align: center;
  top: 30%;
  width: 200px;
  z-index: var(--z-mensaje-carga);
}

/**
 *  mensajeCargaDiv
 * 
 *  Vista de carga que se muestra cuando se expande un div.
 *  aunque en algunos lugares se usa equívocamente
 */
#mensajeCargaDiv img {
  width: 2%;
  margin-bottom: 10px;
}

#mensajeCargaDiv font {
  font-size: var(--font-size-lg);
  color: var(--font-color-emphasis);
}

/* ------------------------------------------------------------------ */
/*                            VENTANA GENERAL                         */
/*   Utilizado por ventanageneral.asp y showModalDialog3 de w11.js    */
/* ------------------------------------------------------------------ */

/* Contiene toda la ventana */
.ventana-general {
  background-color: var(--comp-color-bg-dialog);
  border: var(--comp-border-dialog);
  overflow: hidden;
  padding: 0;
}

/* Encabezado que aparece en la parte superior y contien el botón para mover la ventana y el para cerrarla */
.ventana-general-encabezado {
  display: flex;
  height: 11px;
}

.ventana-general-encabezado button,
.ventana-general-encabezado button:hover,
.ventana-general-encabezado button:focus,
.ventana-general-encabezado button:active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Botón para mover la ventana */
.ventana-general-encabezado .boton-mover {
  flex: 1;
  height: 100%;
}

/* Botón para cerrar la ventana */
.ventana-general-encabezado .boton-cerrar {
  align-items: center;
  display: inline-flex;
  height: 13px;
  /* o lo que necesites */
  justify-content: center;
  margin: 0;
  padding: 0 0 1px 1px;
  width: 13px;
}

.ventana-general-encabezado .boton-cerrar img,
.ventana-general-encabezado .boton-cerrar svg {
  display: block;
  height: 100%;
  object-fit: contain;
  /* o 'cover' si querés que recorte */
  width: 100%;
}

/* Primer iframe: ventanageneral.asp */
.ventana-general-content-wrapper {
  border: 0;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 11px);
  padding: 0 11px 11px 11px;
}

/* Segundo iframe: pantalla a mostrar */
.ventana-general-content {
  height: 100%;
  overflow: auto;
  width: 100%;
}

/* ------------------------------------------------------------------ */
/*                              PESTAÑAS                              */
/* ------------------------------------------------------------------ */

/* CHEQUEAR */
.trilay-contenedor-pestanias {
  max-width: var(--contentWidth);
  height: 23px !important;
  margin: 0 0 5px 0;
  display: none;
}

.trilay-pestania {
  width: 12%;
  height: 20px;
  background-color: #516f9f;
  padding: 1px 0 0 0;
  float: left;
  margin-right: 5px;
  position: relative;
  color: white;
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
}

.trilay-pestania .trilay-pestania-nombre {
  padding: 0 54px 0 5px;
}

.trilay-pestania:hover {
  cursor: pointer;
  background-color: #668bc7;
}

.trilay-contenedor-pestanias .trilay-pestania-cerrar {
  position: absolute;
  left: 90%;
  margin: 0;
  font-size: 12px;
  z-index: 0;
}

/* ------------------------------------------------------------------ */
/*                               LOGIN                                */
/* ------------------------------------------------------------------ */

/**
 * Imagen o video que se muestran en el fondo
 */
.login-back {
  width: 850px;
  height: 280px;
  margin-top: 8%;
  margin-left: 20%;
  text-align: center;
  z-index: 10;
  overflow: hidden;
  position: absolute;
  -webkit-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.login-back video,
.login-back img {
  display: block;
}

/**
 * Caja que contiene el formulario de login
 */
.login-front {
  background-color: var(--bg-color-base);
  box-sizing: border-box;
  height: 350px;
  margin-top: 5.5%;
  margin-left: 25%;
  overflow: hidden;
  padding: 20px 50px;
  position: relative;
  text-align: center;
  width: 350px;
  z-index: 10;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 0;
  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);
}

.login-front img {
  width: 70%;
  margin-top: 20px;
  margin-bottom: 30px;
}

.login-front button,
.login-front input,
.login-front select {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-family: var(--font-family-main);
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 1px solid var(--color-gray-5);
}

.login-front input,
.login-front select {
  margin-bottom: 15px;
  color: var(--color-gray-5);
}

.login-front input:focus,
.login-front select:focus {
  box-shadow: 0 0 3px var(--color-penn-blue);
  border: 1px solid var(--color-penn-blue);
}

.login-front button {
  border: 0px;
  background-color: var(--color-penn-blue);
  color: white;
}

.login-front button:hover {
  cursor: pointer;
  background-color: var(--color-cadet-blue);
}

/** Mensaje: ¿Olvidaste tu contraseña? */
.login-front .login-recuperacion {
  font-size: 12px;
  font-family: var(--font-family-main);
  color: var(--color-gray-5);
  margin: 8px 0px;
}

.login-front .login-recuperacion:hover {
  cursor: pointer;
  color: var(--font-color-muted);
}

.login-front hr {
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-5);
  border: 0;
}

.login-front .login-recaptcha {
  padding: 10px 20px;
  font-size: 10px;
  font-family: var(--font-family-main);
  color: var(--font-color-muted);
  margin: 5px 0px;
  text-decoration: none;
  text-align: center;
}

.login-front .login-recaptcha a {
  font-size: 10px;
  font-family: var(--font-family-main);
  color: var(--color-gray-5);
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.login-front .login-recaptcha a:hover {
  cursor: pointer;
  color: var(--font-color-muted);
}

/* ------------------------------------------------------------------ */
/*                                 DIVS                               */
/* ------------------------------------------------------------------ */

/**
 *  Listado de divs. Aplica sobre <ul> 
 *
 *  Caso ejemplo:
 *        <ul class="trilay-div-lista">
 *            <li class="div">
 *                <div class="div-nombre">
 *                    <img src="arrow-down-W.png" />
 *                    Ventas
 *                </div>
 *                <div class="div-novedad">
 *                    <img src="novedad-off.png" />
 *                </div>
 *            </li>
 *            <li class="div-iframe">
 *                <iframe></iframe>
 *            </li>
 *        </ul>
 */

.trilay-div-lista {
  background-color: var(--bg-color-base);
  list-style: none;
  margin: 0;
  padding: 0;
  /*overflow: auto; */
  width: 100% !important;
  height: 100% !important;
}

/* Aplica a botones de divs y a los iframes que se despliegan de ellos */
.trilay-div-lista li {
  width: 100%;
  margin-bottom: 1px;
}

/* -------------------------- BOTONES DIVS ---------------------------- */
.trilay-div-lista .div {
  align-items: center;
  background-color: var(--comp-color-bg-primary);
  cursor: pointer;
  display: flex;
  gap: 6px;
  height: 25px;
  padding-left: 10px;
  align-items: center;
}

.trilay-div-lista .div:hover {
  background-color: var(--comp-color-bg-primary-hover);
}

/* Nombre del div */
.trilay-div-lista li .div-nombre {
  align-items: center;
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
  color: white;
  display: flex;
  flex: 1;
  gap: 4px;
  height: 100%;
  /* width: 96%; */
  /* float: left; */
}

/* Botón para desplegar o comprimir */
.trilay-div-lista li .div-nombre img {
  margin-top: 0px;
  width: 11px;
}

/* Botón novedad */
.trilay-div-lista li .div-novedad {
  width: 2%;
  height: 100%;
  /* float: left; */
}

.trilay-div-lista li .div-novedad img {
  margin-left: 8px;
  margin-top: 8px;
  overflow: hidden;
  width: 11px;
}

/* -------------------------- DETALLE DIVS ---------------------------- */
.trilay-div-lista .div-iframe {
  height: 300px;
  margin-bottom: 1px;
  position: relative;
  width: 100%;
}

.trilay-div-lista .div-iframe .expandir-div {
  color: var(--color-white);
  filter: alpha(opacity=60);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  margin-top: 7px;
  margin-left: 7px;
  position: absolute;
}

.trilay-div-lista .div-iframe .expandir-div:hover {
  cursor: pointer;
  filter: alpha(opacity=100);
}

.trilay-div-lista .div-iframe iframe {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  border-top: none;
}

/* Disposición interna de los divs */
body:has(.trilay-div-nav) {
  display: flex;
  flex-direction: column;
}

.iframeTrilay {
  flex: 1;
}

/* Div Navbar */
.trilay-div-nav {
  background-color: var(--comp-color-bg-div-nav);
  color: var(--font-color-base) !important;
  height: 20px;
  margin: 0;
  width: 100%;
}

.trilay-div-nav input,
.trilay-div-nav select {
  background-color: var(--bg-color-base) !important;
  color: var(--font-color-base) !important;
  border: none;
  font-size: 11px;
  height: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.trilay-div-nav input[type="checkbox"] {
  background-color: transparent !important;
}

.trilay-div-nav .icono {
  filter: opacity(50%);
}

.trilay-div-nav .icono:hover {
  filter: opacity(100%);
}

/* Tabla listado */
.trilay-div-tabla {
  color: var(--font-color-base);
  background-color: var(--bg-color-base);
  padding: 1px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 5px;
  overflow: auto;
}

.trilay-div-tabla thead {
  background-color: var(--comp-color-bg-div-heading);
  height: 20px;
  width: 100%;
}

/* Estilo específico para .trilay-div-tabla thead cuando hay font[size="2"] */
/* font[size="2"] .trilay-div-tabla thead {
  font-size: var(--font-size-base) !important;
} */

.trilay-div-tabla thead tr td,
.trilay-div-tabla thead tr th {
  color: var(--comp-color-font-div-heading);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: normal;
  text-align: center;
}

.trilay-div-tabla tbody tr td {
  color: var(--comp-color-font-div-list);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: 2px 9px 2px 2px;
  background-color: var(--comp-color-bg-div-list);
  height: 22px;
}

/* .filapar {
  font-size: var(--font-size-base);
  color: #003366;
  font-family: var(--font-family-main);
  background-color: #e0edf4;
} */

/* .trilay-div-tabla thead tr td {
  padding-left: 3px;
} */

.trilay-div-tabla tbody tr td img {
  cursor: pointer;
}

/* Pie totales */
.trilay-div-tabla-pie,
.trilay-div-tabla:has(tfoot) {
  margin-bottom: 5px;
}

.trilay-div-tabla-pie tr td,
.trilay-div-tabla tfoot {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  color: var(--comp-color-font-div-list);
  background-color: var(--bg-color-base);
}

/* Botón del listado que se coloca al lado del nombre de la columna y que permite ordenar según esta */
.sort-arrow {
  width: 8px !important;
  height: 8px !important;
}

/* ------------------------------------------------------------------ */
/*                            ESCRITORIO                              */
/* ------------------------------------------------------------------ */

.escritorio {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  gap: 0;
  margin: 0;
}

/** Barra de navegación */
.trilay-nav {
  background-color: var(--bg-color-base);
  display: flex;
  gap: 30px;
  padding: 10px 0;
  width: 100%;
}

.trilay-nav a {
  border: none;
  text-decoration: none;
}

/** Trilay logo */
.trilay-nav a img {
  border: 0;
  cursor: pointer;
  padding: 3px 0 0 10px;
  width: 120px;
}

/** Listado de botones del navbar */
.trilay-nav ul {
  list-style-type: none;
  margin: 0;
  flex: 1;
  display: flex;
  margin-top: 5px;
  padding: 0 4px 0 0;
  text-align: left;
}

.trilay-nav li,
.cerrar-sesion {
  color: var(--color-penn-blue);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-family-main);
  font-size: 12px;
  margin: 0 10px 0 0;
  padding: 0 5px;
  text-align: center;
}

.trilay-nav li:hover {
  color: var(--color-true-blue);
}

/** Opciones desplegadas de botones del navbar */
.trilay-nav ul li ul {
  background: var(--color-white);
  box-shadow: 13px 13px 5px -8px rgba(0, 0, 0, 0.19);
  display: none;
  margin: 0;
  padding: 10px 0px;
  position: absolute;
  top: 35px;
  width: 120px;
  z-index: var(--z-2);
  -webkit-box-shadow: 13px 13px 5px -8px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 13px 13px 5px -8px rgba(0, 0, 0, 0.19);
}

.trilay-nav ul li ul li {
  color: var(--color-penn-blue);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: 5px 0 5px 6px;
  text-align: left;
  width: 100%;
}

.trilay-nav ul li:hover > ul {
  display: block;
}

/* Botón para seleccionar la jerarquía */
.trilay-jerarquia {
  border: var(--comp-border-primary);
  color: var(--color-penn-blue);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: 0;
  width: 160px;
}

/* Banner */
.trilay-banner {
  display: block;
  height: 60px;
  overflow: hidden;
  width: 100%;
}

.trilay-banner img {
  height: 100%;
  width: 100%;
}

/* Agrupa el contenedor de divs y el contenedor de opciones */
.trilay-contenedor-wrapper {
  display: flex;
  flex: 1;
  gap: 4px;
  padding: 4px;
  overflow: auto;
}

/* Contenedor de divs */
.trilay-contenedor {
  flex: 1;
  overflow: auto;
}

.trilay-sub-contenedor iframe {
  height: 100%;
  width: 100%;
}

/* Contenedor de opciones */
.trilay-opciones {
  display: flex;
  width: 3.7%;
  height: 100%;
  background-color: var(--color-black-2);
  cursor: default;
  padding: 1px;
}

.trilay-opciones .trilay-opciones-abrir {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 100%;
}

.trilay-opciones .trilay-opciones-abrir img {
  width: 12px;
}

.trilay-opciones .trilay-opciones-abrir:hover {
  background-color: var(--color-true-blue-light-2);
  cursor: pointer;
}

.trilay-opciones .trilay-opciones-iconos {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 8px;
  padding: 8px;
  width: 78%;
}

.trilay-opciones .trilay-opciones-iconos span {
  color: white;
  width: 30px;
  height: 30px;
}

.trilay-opciones .trilay-opciones-iconos span:hover {
  color: var(--color-true-blue-light-2);
  cursor: pointer;
}

.trilay-opciones .trilay-opciones-iconos span[class^="icon-"]:before,
.trilay-opciones .trilay-opciones-iconos span[class*=" icon-"]:before {
  scale: 1.5;
}

.trilay-opciones .trilay-opciones-iconos .activo {
  color: var(--color-true-blue-light-2);
}

.trilay-opciones .trilay-opciones-iconos .icono-inferior {
  margin-top: auto;
}

/* CHEQUEAR */
/* .trilay-buscador {
  position: absolute;
  width: 100%;
  height: 30px;
  z-index: 2;
  top: 12.3%;
}

.trilay-buscador input {
  background-image: url(recursos/icono-buscar1.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  position: relative;
  width: 17%;
  height: 20px;
  left: 80%;
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
  padding: 12px 10px 5px 30px;
  border: none;
} */
/* ------------------------------------------------------------------ */
/*                               SIDEBAR                              */
/*                                                                    */
/*                  Utilizado en vistas de administración             */
/* ------------------------------------------------------------------ */

.admin-sidebar {
  background-color: var(--comp-color-bg-primary-outline);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--comp-size-separation-lg);
  margin: 0 35px;
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  z-index: var(--z-sidebar);
}

.admin-sidebar div {
  width: 100%;
}

/* Seccion común NO USADO */

/* .admin-sidebar-seccion {
  background-color: var(--color-gray-2);
  color: var(--font-color-emphasis);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: var(--comp-size-table-padding-sm);
  width: 100%;
} */

/* Sección con énfasis. Fondo azul. Usada en Business Intelligence, BSC. */

.admin-sidebar-seccion-emphasis {
  background-color: var(--comp-color-bg-primary);
  color: var(--comp-color-font-primary);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: var(--comp-size-table-padding-sm);
  width: 100%;
}

.admin-sidebar-seccion-emphasis input,
.admin-sidebar-seccion-emphasis select {
  background-color: var(--color-gray-2);
  color: var(--font-color-emphasis);
  width: 100%;
}

.admin-sidebar-seccion-emphasis select option {
  background-color: var(--color-gray-2);
  color: var(--font-color-emphasis);
}

.admin-sidebar-seccion-emphasis select option:disabled,
.admin-sidebar-seccion-emphasis select:disabled option {
  color: var(--font-color-muted);
}

/* ------------------------------------------------------------------ */
/*                             COMPROBANTES                           */
/* ------------------------------------------------------------------ */

/** Pie de comprobantes
 * 
 *  Parte inferior de modal de comprobantes de compra o venta. 
 *  Incluye un <textarea> con observaciones que crece hasta ocupar todo el ancho y alto 
 *  disponibles del pie, y a su lado una tabla de totales identificada por #itemspie
 *
 *  Cómo usar:
 *        - aplicar 'comprobante-pie' en el <div> de la sección
 *        - crear a la izquierda un <textarea>
 *        - crear al lado un <div id="itemsPie"> y dentro incluir la tabla de totales
 */

.comprobante-pie {
  display: flex;
  justify-content: space-between;
  gap: var(--comp-size-separation-lg);
  margin: var(--comp-size-separation-base) 0;
}

.comprobante-pie textarea,
/* Preferir textarea */
.comprobante-pie .comprobante-pie-box {
  border: var(--comp-border-primary);
  color: var(--comp-color-font-primary-outline);
  flex: 1;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: var(--comp-size-separation-base);
}

.comprobante-pie textarea {
  height: auto;
  min-height: 50px;
  resize: none;
}

/** ItemsPie
  * 
  * Tabla de totales que se muestra en el detalle de los comprobantes.
  */
#itemsPie,
.itemsPie {
  background-color: var(--comp-color-bg-primary-outline);
  border: var(--comp-border-primary);
  box-sizing: border-box;
  color: var(--comp-color-font-primary-outline);
  font-family: var(--font-family-main);
  width: 25.8%;
}

#itemsPie table,
.itemsPie table {
  border-collapse: collapse;
  box-sizing: border-box;
  font-size: var(--font-size-base);
  width: 100%;
}

#itemsPie td,
.itemsPie td,
#itemsPie th,
.itemsPie th {
  font-size: var(--font-size-base);
  padding: var(--comp-size-table-padding-sm);
  white-space: nowrap;
  text-align:right;
}

#itemsPie input,
.itemsPie input,
#itemsPie select,
.itemsPie select {
  box-sizing: border-box;
  font-size: var(--font-size-base);
  white-space: nowrap;
}

#itemsPie table tr .ivaIncluido,
.itemsPie table tr .ivaIncluido {
  background-color: #f0f0f0 !important;
}

#itemsPie input,
.itemsPie input {
  border: none;
  width: 100%;
  cursor: default;
  text-align: right;
  /* height: 15px !important; */
}

#itemsPie table .tablaGenerica-total-1 td,
.itemsPie table .tablaGenerica-total-1 td {
  background-color: var(--comp-color-bg-primary);
  color: var(--comp-color-font-primary);
  font-weight: bold;
}

/** Botones-letras
  * 
  * Usado para crear una tabla que muestra todas las letras del abecedario 
  * para seleccionarlas.
  *
  * Clase creada por Mica porque las letras suelen usar estilos embebidos
  * en el mismo código en style="". Es responsive y muestra hasta 14 letras por columna.
  * 
  * Ejemplo de uso
  *    <div class="botones-letras-contenedor">
  *      <button class="boton-letra">A</button>
  *      <button class="boton-letra">B</button>
  *      <button class="boton-letra">C</button>
  *      <button class="boton-buscar-todos">
  *        <img src="../../../images/buscar.gif" class="icono icono-small">
  *      </button>
  *    </div>
  */

/* Preferir .botones-letras-contenedor */
.botones-letras-contenedor {
  display: grid;
  grid-template-columns: repeat(14, minmax(auto, 1fr));
  gap: 0;
}

.botones-letras-contenedor,
table.seleccionarLetra {
  border-collapse: collapse;
  width: 100%;
}

.boton-letra,
.seleccionarLetra td.cabecera {
  background-color: var(--comp-color-bg-primary);
  border: 1px solid var(--comp-color-bg-primary-hover);
  min-width: 20px;
  padding: var(--comp-size-separation-sm);
  text-align: center;
}

.boton-letra,
.seleccionarLetra td.cabecera,
.seleccionarLetra td.cabecera a {
  color: var(--comp-color-font-primary);
  text-decoration: none;
}

.boton-letra:hover,
.seleccionarLetra td.cabecera:hover {
  background-color: var(--comp-color-bg-primary-hover);
}

/** Estilos de compatibilidad */
.cabecera a,
.cabecera a.link1 {
  color: var(--comp-color-font-primary);
}

.boton-buscar-todos {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/*                              DATE PICKER                           */
/* ------------------------------------------------------------------ */

/* .ui-datepicker {
  height: 185px;
  padding: 0.2em 0.2em 0;
  width: 160px;
  font-size: var(--font-size-base);
} */

/* .green-fee-calendario {
  width: 38% !important;
  float: left;
} */

/* .green-fee-dia {
  width: 62% !important;
  padding: 0 8px;
  overflow: hidden;
  position: absolute;
} */

/* ------------------------------------------------------------------ */
/*                                BOTONES                             */
/* ------------------------------------------------------------------ */

/* Por motivos de compatibilidad se asegura que los estilos solo apliquen
 a elementos que no sean imagenes ni inputs de tipo imagen*/

/* Preferir boton-1 */
:is(.boton1, .boton-1, .boton-2, .boton-3):not(img):not(input[type="image"]) {
  all: unset;
  background-color: var(--comp-color-bg-primary);
  border: 1px solid var(--comp-color-bg-primary);
  box-sizing: border-box;
  color: var(--comp-color-font-primary);
  cursor: pointer;
  display: inline-block;
  font-size: var(--font-size-base);
  margin: 0;
  padding: var(--comp-size-separation-base);
}

:is(.boton1, .boton-1, .boton-2, .boton-3):hover:not(img):not(
    input[type="image"]
  ),
:is(.boton1, .boton-1, .boton-2, .boton-3):focus:not(img):not(
    input[type="image"]
  ),
:is(.boton1, .boton-1, .boton-2, .boton-3):focus-visible:not(img):not(
    input[type="image"]
  ) {
  border: 1px solid var(--comp-color-bg-primary-hover);
  background-color: var(--comp-color-bg-primary-hover);
}

/* Botón de estilo similar al por defecto de HTML */
.boton-gris {
  background-color: var(--comp-color-bg-secondary);
  border: var(--comp-border-secondary);
  border-radius: var(--comp-border-radius-button-base);
  font-size: var(--font-size-base);
  padding: var(--comp-size-button-padding-sm);
}

.boton-gris:hover,
.boton-gris:focus,
.boton-gris:focus-visible {
  background-color: var(--comp-color-bg-secondary-hover);
  outline: none;
}

/* .boton-2 {
  padding: 2px 35px;
  cursor: pointer;
  background-color: #516f9f;
  border: 0;
  color: white;
  font-size: 14px;
}

.boton-3 {
  padding: 2px 0px;
  text-align: center;
  cursor: pointer;
  background-color: #516f9f;
  border: 0;
  color: white;
  font-size: var(--font-size-lg);
} */

/* ------------------------------------------------------------------ */
/*                            LISTAS SORTEABLES                       */
/* ------------------------------------------------------------------ */

.lista-sorteable {
  background-color: var(--bg-color-base);
  border: 1px solid black;
  margin: 5px 10px;
  float: left;
  overflow: scroll;
  overflow-x: hidden;
}

.lista-sorteable ul {
  padding: 5px;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.lista-sorteable ul li {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  text-align: left;
  color: var(--font-color-base);
  list-style: none;
  padding: 2px;
}

/* ------------------------------------------------------------------ */
/*                          BARRA DE PROGRESO                         */
/* ------------------------------------------------------------------ */

.barra-progeso {
  width: 100%;
  border: 1px solid grey;
  height: 30px;
  overflow: hidden;
  text-align: left;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
}

.barra-progeso div {
  text-align: center;
  background-color: #516f9f;
  width: 0%;
  height: 30px !important;
  margin: 0 !important;
  padding: 6px 0 0 0 !important;
  color: white;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
}

/* ------------------------------------------------------------------ */
/*                                TABLAS                              */
/* ------------------------------------------------------------------ */

/**
 * ESTILOS UNIFICADOS PARA TABLAS DE TRILAY AZULES
 * ===============================================
 *
 * Los siguientes estilos se crearon para unificar muchas clases existentes en estéticas
 * similares para tablas azul y blancas. Actualmente, todas estas clases generan tablas
 * que se ven prácticamente iguales con unas pequeñas diferencias.
 *
 * CLASES PRINCIPALES
 * ------------------
 * Se distinguen dos tipos de tablas. Las clases que se mencionan por cada tipo, aplican 
 * exactamente los mismos estilos.
 *
 * 1. .tablaGenerica, .tabledetalle1, .tabladetalle1
 *    → Usadas en tablas cuya primera fila es el encabezado.
 *    → Usadas en tablas read-only y en algunos formularios puntuales como la factura de venta.
 *
 * 2. .form-trilay, .tabla, .tablainterna
 *    → Tablas de formularios donde la primera columna contiene los títulos (celda azul).
 *    → Usadas en formularios como creación de clientes/proveedores, búsqueda avanzada, reportes, etc.
 *
 * REGLAS GENERALES
 * ----------------
 * - Ambos tipos de tablas son estéticamente iguales, excepto porque (1) utiliza inputs sin bordes, y 
 *   (2) con bordes.
 * - Muchas de las clases buscan que los estilos no se apliquen a las tablas anidadas porque esto 
 *   produce efectos indeseados.
 * - Se incluye la clase .grid utilizada para crear tablas responsive mediante .grid.
 *
 * USO RECOMENDADO
 * ---------------
 * - Preferir tablaGenerica para tablas read-only o de encabezado en la primera fila y .tabla
 *   para tablas de formularios cuya primer columna contiene los datos y para vistas administrativas.
 * - Preferir <thead> y <th> para encabezados. Como alternativa, usar clases como `.encabezado` a nivel
 *   de fila o de columna.
 * - Procurar evitar la anidación de tablas.
 *
 */

/* Ajustes generales de table */
/* Preferir tablaGenerica */
.tablaGenerica,
.tabledetalle1,
.tabladetalle1,
.form-trilay,
.tabla,
.tablainterna {
  background-color: var(--comp-color-bg-primary-outline);
  border: var(--comp-border-primary);
  border-collapse: collapse;
  color: var(--comp-color-font-primary-outline);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  width: 100%;
  
}
td .datoNumero{
  display: inline-block;
  width: 100%;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}


/* Ajustes generales para celdas*/
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(th, td) {
  border: var(--comp-border-primary);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: var(--comp-size-table-padding-base);
}

/* Encabezados de tabla */
/* preferir thead y th */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(thead > tr, tbody > tr, tr):not(:has(.columnaprincipal))
  :is(
    thead,
    th,
    td.columna,
    td.columna1,
    td.columna4,
    td.columna5,
    .encabezado td,
    td.encabezado,
    .encabezado,
    .filadetalle1,
    .Columna1 td,
    .form-fila .form-nombre,
    .grid > div.columna1,
    tr.filadetalle1 > td
  ) {
  background-color: var(--comp-color-bg-primary);
  color: var(--comp-color-font-primary);
  font-size: var(--font-size-base);
  /* font-weight: bold; */
  font-weight: normal !important;
  text-align: center;
}

/* Ajuste para inputs dentro de td */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(td, .grid > div)
  :is(
    input[type="date"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input:not([type]),
    select,
    textarea,
    input[type="text"]:read-only,
  ) {
  box-sizing: border-box;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  width: 100%;
  
}


/* Ajuste para inputs dentro de td */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(td, .grid > div)
  :is(
    input[type="date"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input:not([type]),
    
    textarea,
    input[type="text"]:read-only,
  ) {
  box-sizing: border-box;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  width: 100%;
  height: 20px;
}






/* Estas clases usan inputs sin bordes */
:is(.tablaGenerica, .tabledetalle1, .tabladetalle1)
  :is(td, .grid > div)
  :is(
    input[type="date"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input:not([type]),
    select,
    textarea
  ) {
  border: 0;
  outline: none;
  padding-block: 2px;
  padding-inline: 3px;
}

/* Elimina padding por defecto para celdas con inputs bordeados */
:is(.form-trilay, .tabla, .tablainterna)
  :is(td, .grid > div):has(
    :is(
        input[type="date"],
        input[type="email"],
        input[type="month"],
        input[type="number"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="text"],
        input[type="time"],
        input[type="url"],
        input[type="week"],
        input:not([type]),
        select,
        textarea
      )
  ) {
  padding: 1.5px;
}

/* Inputs en encabezados de tabla */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(
    thead,
    th,
    td.columna,
    td.columna1,
    td.columna4,
    td.columna5,
    .encabezado td,
    td.encabezado,
    .encabezado,
    .filadetalle1,
    .Columna1 td,
    .form-fila .form-nombre,
    .grid > div.columna1
  )
  input {
  background-color: var(--comp-color-bg-primary);
  color: var(--comp-color-font-primary);
}

/* Ajustes especificos para select */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  select:disabled::-ms-expand {
  /* Remove arrow button */
  display: none;
}

/* Ajustes especificos para textarea */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(td, .grid > div)
  textarea {
  height: 17px;
  overflow: hidden;
}

/* Tablas anidadas */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  td,
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  td.datos {
  background-color: var(--comp-color-bg-primary-outline);
  color: var(--comp-color-font-primary-outline);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: normal;
  word-wrap: break-word;
}

:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  table
  td {
  border: none;
}

/* Esta clase evita que los estilos de los inputs en los encabezados afecte en tablas anidadas */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(td, td.datos)
  input {
  background-color: var(--comp-color-bg-primary-outline);
  color: var(--comp-color-font-primary-outline);
}

/* Esta clase genera filas y celdas de fondo más oscuro que .encabezado.
 * Se utiliza para distinguir distintas secciones de una misma tabla.
 */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(
    .titulo-tabla,
    .titulo-tabla th,
    .titulo-tabla td,
    td.titulo-tabla,
    th.titulo-tabla,
    .tabla-tr-top,
    .tabla-tr-top th,
    .tabla-tr-top td,
    td.tabla-tr-top,
    th.tabla-tr-top,
    .columnaprincipal,
    .columnaprincipal th,
    .columnaprincipal td,
    td.columnaprincipal,
    th.columnaprincipal
  ) {
  background-color: var(--comp-color-bg-emphasis-darker);
  color: var(--comp-color-font-primary);
  /* font-weight: bold; */
  text-align: center;
}

/* Pie de tabla (totales) */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  tfoot
  :is(td, th) {
  background-color: var(--comp-color-bg-primary-outline) !important;
  text-align: right !important;
}

/* Celda con énfasis en pie de tabla */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  tfoot
  th {
  color: var(--comp-color-font-primary-outline) !important;
  font-weight: bold;
}

/* Pies de tablas que se mantienen por compatibilidad. Tratar de no usar. */
:is(.tablaGenerica-total-2, .tabledetalle1-total-2) :is(th, td) {
  background-color: var(--comp-color-bg-primary);
  color: var(--comp-color-font-primary);
  font-weight: bold;
}

/* Fila destacada. (Tratar de no usar) */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  .filaDestacada {
  background-color: var(--color-gray-4);
}

/* Text muted: crea un texto gris claro */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  )
  :is(
    thead,
    th,
    td.columna,
    td.columna1,
    td.columna4,
    td.columna5,
    .encabezado td,
    td.encabezado,
    .encabezado,
    .filadetalle1,
    .Columna1 td,
    .form-fila .form-nombre,
    .grid > div.columna1
  )
  .text-muted {
  color: var(--comp-color-font-primary-muted);
}


/* Ajustes para tablas creadas con div flex */
.form-trilay .form-fila {
  border: var(--comp-border-primary);
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Creación de tablas responsive con .grid */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  ).grid
  > div {
  border: 0.5px solid var(--color-black);
  padding: 1px;
}

/* Gap por defecto de grid */
:is(
    .tablaGenerica,
    .tabledetalle1,
    .tabladetalle1,
    .form-trilay,
    .tabla,
    .tablainterna
  ).grid {
  gap: 0;
}

/* Título azul oscuro. Tratar de no usarlo. */
.columnaprincipal {
  font-size: var(--font-size-base);
  width: 100%;
  color: var(--comp-color-font-primary);
  font-family: var(--font-family-main);
  background-color: var(--comp-color-bg-emphasis-darker);
  text-align: center;
}

/* CHEQUEAR */
/* .tablaGenerica .filaDesplegable,
.tabledetalle1 .filaDesplegable {
  background-color: red;
} */

/* .tablaGenerica .filaCeleste {
  background-color: #e8f2f7;
}

.tablaGenerica .filaDesplegable td {
  padding: var(--comp-size-table-padding-base);
}

.tablaGenerica .filaDesplegable span {
  margin-right: 3px;
}

.tablaGenerica .filaDesplegable span input {
  width: 18px;
  height: 15px;
}

.tablaGenerica .filaDesplegable span img {
  width: 8px;
  cursor: pointer;
} */

/* CHEQUEAR */
/* .tablaGenerica-pie-fijo {
  width: 99.5%;
  height: 100%;
  overflow: auto;
  float: left;
  border: 1px solid black;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: var(--comp-size-container-padding-sm);
  resize: none;
} */

/**
 * TABLA GRIS
 * ==========
 * 
 *  Utilizada habitualmente en las tablas asociadas a secciones colapsables.
 *  Su encabezado es gris claro y sus filas son blancas. 
 *
 *  Cómo usar:
 *        - aplicar 'tablaGris' en <table>
 *        - aplicar 'encabezado' en <thead> o en los <tr> o <th> del encabezado
 */
.tablaGris {
  background-color: var(--comp-color-bg-primary-outline);
  border-collapse: collapse;
  color: var(--comp-color-font-primary-outline);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  width: 99.5%;
}

.tablaGris td,
.tablaGris th {
  border: var(--comp-border-primary);
  padding: var(--comp-size-table-padding-base);
}

.tablaGris textarea,
.tablaGris input,
.tablaGris select,
.tablaGris textarea:disabled,
.tablaGris input:disabled,
.tablaGris select:disabled {
  border: 0;
  height: var(--comp-size-row-default);
  margin: 0;
  padding: 0;
  width: 100%;
}

.tablaGris .encabezado,
.tablaGris thead,
.tablaGris th,
.tablaGris .encabezado td,
.tablaGris .eliminable,
.tablaGris .encabezado input,
.tablaGris .encabezado td input,
.tablaGris .encabezado select {
  background-color: var(--comp-color-bg-secondary);
  color: var(--comp-color-font-secondary);
  font-weight: bold;
  text-align: center;
}

.tablaGris .encabezado,
.tablaGris thead,
.tablaGris th {
  text-align: center;
}

.tablaGris tfoot th,
.tablaGris tfoot td {
  color: var(--comp-color-font-primary-outline) !important;
  background-color: var(--comp-color-bg-primary-outline) !important;
}

.tablaGris tfoot th {
  font-weight: bold;
  text-align: right !important;
}

/* Tabla Invisible
 *
 * Utilizada para detalles y formularios de creación y modificación de comprobantes
 * y todas aquellas tablas que no presentan bordes.
 */
table.tablaInvisible {
  border-collapse: separate;
  border-spacing: 5px;
  table-layout: auto;
  width: 100%;
  margin: 5px 0;
}

table.tablaInvisible th {
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
  font-weight: bold;
  text-align: start;
  text-wrap: nowrap;
  white-space: nowrap;
  width: 1px;
}

table.tablaInvisible td,
.tablaInvisible th {
  box-sizing: border-box;
  padding: 0 var(--comp-size-table-padding-base);
  word-wrap: break-word;
}

table.tablaInvisible td textarea,
table.tablaInvisible td input[type="date"],
table.tablaInvisible td input[type="email"],
table.tablaInvisible td input[type="month"],
table.tablaInvisible td input[type="number"],
table.tablaInvisible td input[type="password"],
table.tablaInvisible td input[type="search"],
table.tablaInvisible td input[type="tel"],
table.tablaInvisible td input[type="text"],
table.tablaInvisible td input[type="time"],
table.tablaInvisible td input[type="url"],
table.tablaInvisible td input[type="week"],
table.tablaInvisible td input:not([type]),
table.tablaInvisible td select {
  box-sizing: border-box;
  width: 100%;
}

/* Celda transparente */
td.td-invisible {
  border: 0;
  background-color: transparent;
  color: var(--font-color-base);
}

/** 
 *  admin-sidebar-tabla-colapsable
 * 
 *  Utilizada para las tablas ubicadas en la barra lateral de las vistas
 *  de administración (RRHH, Operaciones, Business Intelligence
 *
 *  Cómo usar:
 *        - aplicar 'admin-sidebar-tabla-colapsable' en <table>
 *        - aplicar 'cabecera-tabla' en el <tr> que encabece la tabla
 *        - aplicar 'cabecera-subseccion' en los <tr> que encabecen subsecciones
 *        - aplicar 'clickable' en los <td> de texto que redirijan a otras vistas
 */

.admin-sidebar-tabla-colapsable {
  background-color: var(--color-gray-2);
  border: 0;
  border-collapse: separate;
  box-sizing: border-box;
  color: var(--comp-color-font-primary-outline);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  width: 100%;
}

.admin-sidebar-tabla-colapsable td,
.admin-sidebar-tabla-colapsable th {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  text-align: left;
}

.admin-sidebar-tabla-colapsable tr.cabecera-tabla th,
.admin-sidebar-tabla-colapsable tr.cabecera-tabla td,
.admin-sidebar-tabla-colapsable tr.cabecera-subseccion th,
.admin-sidebar-tabla-colapsable tr.cabecera-subseccion td,
tr.columnagen td,
td.columnagen,
tr.fondoPais td,
td.fondoPais {
  color: var(--comp-color-font-primary);
  font-weight: bold;
  padding: var(--comp-size-table-padding-sm);
  text-align: left;
}

.admin-sidebar-tabla-colapsable tr > th:first-child,
.admin-sidebar-tabla-colapsable tr > td:first-child {
  padding-left: var(--comp-size-table-padding-large);
}

.admin-sidebar-tabla-colapsable tr.cabecera-tabla th,
/* Preferir .admin-sidebar-tabla-colapsable tr.cabecera th */
.admin-sidebar-tabla-colapsable tr.cabecera-tabla td,
.admin-sidebar-tabla-colapsable tr.columnagen th,
.admin-sidebar-tabla-colapsable tr.columnagen td,
tr.columnagen td,
td.columnagen {
  background-color: var(--comp-color-bg-primary);
}

.admin-sidebar-tabla-colapsable tr.cabecera-subseccion th,
/* Preferir .admin-sidebar-tabla-colapsable tr.cabecera-subseccion */
.admin-sidebar-tabla-colapsable th.cabecera-subseccion,
.admin-sidebar-tabla-colapsable tr.cabecera-subseccion td,
.admin-sidebar-tabla-colapsable td.cabecera-subseccion,
tr.fondoPais td,
td.fondoPais {
  background-color: var(--comp-color-bg-primary-subtle-light);
}

.admin-sidebar-tabla-colapsable td,
/* Preferir admin-sidebar-tabla-colapsable td */
.letrasi {
  color: var(--font-color-emphasis);
}

.admin-sidebar-tabla-colapsable td.clickable:hover {
  background-color: var(--color-gray-4);
  cursor: pointer;
}

.admin-sidebar-tabla-colapsable .clickable img {
  margin: 0;
}

.admin-sidebar-tabla-colapsable th:has(> img:only-child),
.admin-sidebar-tabla-colapsable td:has(> img:only-child) {
  text-align: center;
}

/* ------------------------------------------------------------------ */
/*                              DESPLEGABLES                          */
/* ------------------------------------------------------------------ */

/** 
  Clickable

  Marca el último elemento seleccionado
*/
.clickable {
  cursor: pointer;
}

.clickable span {
  color: var(--font-size-base);
  font-weight: bold;
  font-size: 11px;
}

.clickable img {
  width: 8px;
  margin-left: 5px;
}

.clickable input {
  font-weight: bold;
}

/**
 * Clickable bloque
 *
 * Botón que permite mostrar y ocultar secciones.
 * Caso de ejemplo: factura de venta
 */
.clickable-bloque {
  align-items: center;
  background-color: var(--comp-color-bg-primary);
  border: var(--comp-border-primary);
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: flex;
  gap: var(--comp-size-separation-lg);
  font-family: var(--font-family-main);
  font-weight: bold;
  font-size: var(--font-size-base);
  height: 24px;
  margin: 5px 0;
  padding: var(--comp-size-button-padding-sm);
  padding-left: var(--comp-size-separation-lg);
  width: 100%;
}

.clickable-bloque:hover {
  background-color: var(--comp-color-bg-primary-hover);
}

/* Botón arrow */
.clickable-bloque img:first-of-type {
  cursor: pointer;
  height: 9px;
  width: 9px;
}

/**
 * Menú contextual
 *
 * Pequeña ventana de opciones que se muestra en las pantallas de configuración del sistema
 * al hacer click derecho sobre alguna jerarquía
 */
.context-menu {
  background: var(--bg-color-base);
  border: 1px solid var(--color-gray-3);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index: var(--z-context-menu);
}

.context-menu.open {
  border: thin solid var(--color-true-blue-dark);
  /* border: thin solid rgb(0, 102, 153); */
  color: var(--font-color-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  opacity: 1;
  transition: none;
  visibility: visible;
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-menu ul li {
  background-color: var(--color-true-blue-light-3);
  color: white;
  display: block;
  margin: 0;
  padding: 0;
}

.context-menu .context-menu-item {
  color: white;
  padding: 0.1em 1em;
}

.context-menu .context-menu-item:hover {
  background-color: var(--color-true-blue-dark-2);
  /* background-color: #2c4d83; */
  cursor: pointer;
}

/* Punto decorativo al inicio de cada ítem (si se usa esta clase) */
.context-menu-items li::before {
  content: "\2022";
  margin-right: 5px;
}

/* .menu-contextual {
  display: none;
  position: absolute;
  background-color: var(--bg-color-base);
  padding: 0px;
  border: 1px solid #dbdbdb;
}

.menu-contextual .menu-op {
  cursor: pointer;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  text-align: left;
  color: var(--font-color-base);
  padding: 5px 25px 5px 10px;
}

.menu-contextual .menu-op:hover {
  background-color: #668bc7;
}


/* ------------------------------------------------------------------ */
/*                        TEXTO AUTOCOMPLETABLE                       */
/* ------------------------------------------------------------------ */
.ui-autocomplete-loading {
  background: white url("images/CargandoV004.gif") center center no-repeat;
}

.ui-autocomplete {
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 150px;
  font-size: 11px !important;
}

/* ------------------------------------------------------------------ */
/*                             TAB PANES                              */
/*                                                                    */
/*             Ventanas de muchos iframes intercambiables.            */
/*                     Ej. admin cuentas email                        */
/* ------------------------------------------------------------------ */

.tab-pane {
  box-sizing: border-box;
  height: 100%;
  position: relative;
  width: 100%;
}

.dynamic-tab-pane-control .tab-row .tab {
  /* display: inline-block; */
  float: left;
  position: relative;
  top: 0;

  padding: 2px 5px 3px 5px;

  margin: 1px -2px 1px 2px;

  font-weight: normal;
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);

  background-color: var(--comp-color-bg-primary);

  border-top: 1px solid var(--color-gray-2);
  border-left: 1px solid var(--color-gray-2);
  border-right: 1px solid var(--color-gray-7);
  border-bottom: none;

  cursor: pointer;
  z-index: var(--z-tab-row);
}

.dynamic-tab-pane-control .tab-row .selected {
  padding-right: 6px;
  padding-left: 7px;
  z-index: var(--z-tab-row-selected);
  padding-bottom: 5px;
  margin: 1px -3px -2px 0px;
  padding-top: 2px;
  border-bottom: 0px;
  top: -2px;
}

.dynamic-tab-pane-control .tab-row .tab A {
  font-weight: normal;
  font-size: var(--font-size-lg);
  cursor: pointer;
  color: white;
  font-family: var(--font-family-main);
  font-weight: bold;
  text-decoration: none;
}

.dynamic-tab-pane-control .tab-row .hover A {
  color: white;
}

.dynamic-tab-pane-control .tab-page {
  clear: both;
  border: 1px solid var(--color-gray-7);
  /* fallback for all sides */
  border-top-color: var(--color-gray-2);
  border-left-color: var(--color-gray-2);
  box-sizing: border-box;
  padding: 5px;
  font-weight: normal;
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  background: var(--comp-color-bg-primary);
  position: relative;
  top: -2px;
  height: calc(100% - 22px);
  z-index: var(--z-tab-page);
}

.dynamic-tab-pane-control .tab-row {
  z-index: var(--z-tab-row);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*                           PANEL COLAPSABLE                         */
/*                                                                    */
/*      Sobreescribe los estilos originales de Adobe SpricyPanel      */
/* ------------------------------------------------------------------ */

/* Selector for the main CollapsiblePanel container.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
  margin: 0px;
  padding: 0px;
  border-left: solid 1px var(--color-gray-4);
  border-right: solid 1px var(--color-gray-5);
  border-top: solid 1px var(--color-gray-4);
  border-bottom: solid 1px var(--color-gray-4);
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
  background-color: var(--comp-color-bg-emphasis);
  cursor: pointer;
  margin: 0px;
  padding: 2px;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
}

.CollapsiblePanelTab,
.CollapsiblePanelTab font {
  color: var(--comp-color-font-primary);
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: bold;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
  margin: 0px;
  padding: 0px;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This makes the text within the anchor tag look like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
  color: var(--font-color-base);
  text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
  background-color: var(--comp-color-bg-emphasis);
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,
.CollapsiblePanelOpen .CollapsiblePanelTabHover {
  background-color: var(--comp-color-bg-emphasis-hover);
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
  background-color: var(--comp-color-bg-emphasis);
}

/* ------------------------------------------------------------------ */
/*                           INTERCAMBIABLE                           */
/*                                                                    */
/*    Tabla que permite intercambiar los elementos de dos conjuntos.  */
/* ------------------------------------------------------------------ */

/* -------------------------- Versión nueva (Mica) ------------------------- */

.intercambiable {
  width: 100%;
}
.intercambiable-header {
  background-color: var(--comp-color-bg-emphasis-darker);
  color: var(--comp-color-font-primary);
  font-family: var(--font-family-main);
  font-weight: bold;
  font-size: var(--font-size-base);
  padding: var(--comp-size-table-padding-sm);
  width: 100%;
  text-align: center;
}

.intercambiable-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--comp-size-separation-base);
}

.intercambiable-content-side-wrapper {
  flex: 1;
}

.intercambiable-content-side-wrapper-header {
  padding: 10px 2px 5px 2px;
  color: var(--comp-color-font-emphasis);
  font-size: var(--font-size-lg);
  font-weight: bold;
  text-align: center;
  font-family: var(--font-family-main);
}

.intercambiable-content-side-wrapper-content {
  width: 100%;
  font-size: var(--font-size-base);
  color: var(--comp-color-font-emphasis);
  font-family: var(--font-family-main);
  background-color: var(--color-true-blue-light-1);
  text-align: center;
}

.intercambiable-buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--comp-size-separation-base);
  justify-content: center;
  align-items: center;
}

/* ------------------------- Versión antigua ------------------------ */

.lista1 {
  width: 100%;
  font-size: var(--font-size-base);
  color: var(--comp-color-font-emphasis);
  font-family: var(--font-family-main);
  background-color: var(--color-true-blue-light-1);
}

/* ------------------------------------------------------------------ */
/*                              ALINEACIONES                          */
/*                                                                    */
/*                Para entender mejor la nomenclatura véase           */
/*                   https://tailwindcss.com/docs/flex                */
/* ------------------------------------------------------------------ */

/** ==== TEXT ALIGNMENTS ==== */
.text-center,
.a-center {
  text-align: center !important;
}

.text-left,
.a-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

/* Table texts alignments */
.align-text-top,
.align-text-top th,
.align-text-top td {
  /* Align contained text to the top of the y axis */
  vertical-align: text-top !important;
}

/**
 *  Flex content alignment
 *  
 *  Uso: aplicar flex y/o flex-col y luego alguno de estos estilos para configurar
 *  la forma en que los elementos se alinean.
 *
 *  Justify: alinean respecto al eje horizontal. Si se utiliza flex, este es el eje X.
 *           Si se utiliza flex-col, este es el eje y.
 *           Véase https://tailwindcss.com/docs/justify-content
 *  Items: alinean respecto al eje secundario. Véase https://tailwindcss.com/docs/align-items
 *
 *  Ejemplo: class="flex justify-end items-center".
 */

/* ==== FLEXBOX CLASSES ==== */

/** Alinear elementos horizontalmente */
.flex {
  display: flex;
  width: 100%;
  gap: var(--comp-size-separation-base);
}

/** Alinear elementos verticalmente */
.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--comp-size-separation-base);
}

/* Justify Content */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* Align Items */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* Flex Grow/Shrink */
.flex-1 {
  flex: 1 1 0%;
}

/* Grow to fill the available space */
.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

/* ==== GRID CLASSES ==== */

/* Display */
.grid {
  display: grid;
  width: 100%;
  gap: var(--comp-size-separation-base);
}

.inline-grid {
  display: inline-grid;
}

/* Grid Columns */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Grid Rows */
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

/* Grid Column Span */
.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.col-span-10 {
  grid-column: span 10 / span 10;
}

.col-span-11 {
  grid-column: span 11 / span 11;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.col-span-full {
  grid-column: 1 / -1;
}

/* ==== GAPS ====  */
.gap-sm {
  gap: var(--comp-size-separation-sm);
}

.gap-base {
  gap: var(--comp-size-separation-base);
}

.gap-lg {
  gap: var(--comp-size-separation-lg);
}

.gap-xl {
  gap: var(--comp-size-separation-xl);
}

/* Margins */
.my-sm {
  margin: var(--comp-size-separation-sm) auto;
}

.my-base {
  margin: var(--comp-size-separation-base) auto;
}

.my-lg {
  margin: var(--comp-size-separation-lg) auto;
}

.my-xl {
  margin: var(--comp-size-separation-xl) auto;
}

.ml-xl {
  margin-left: var(--comp-size-separation-xl) !important;
}

/* Padding */
.py-sm {
  padding: var(--comp-size-separation-sm) auto;
}

.py-base {
  padding: var(--comp-size-separation-base) auto;
}

.py-lg {
  padding: var(--comp-size-separation-lg) auto;
}

.py-xl {
  padding: var(--comp-size-separation-xl) auto;
}

.px-xl {
  padding-left: var(--comp-size-separation-xl) !important;
  padding-right: var(--comp-size-separation-xl) !important;
}

/* ------------------------------------------------------------------ */
/*                                ICONOS                              */
/* ------------------------------------------------------------------ */

/* Clase principal a aplicar a botones de imágenes */
.icono,
/* Preferir .icono */
img.boton1,
input[type="image"].boton1 {
  cursor: pointer;
  /* display: block; */
  margin: 0 4px 0 4px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: opacity(70%);
  max-width: 20px;
  max-height: 20px;
  width: auto;
  height: auto;
}

.icono:hover,
img.boton1:hover,
input[type="image"].boton1:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: opacity(100%);
}

/* Tamaños */
/*
 * La mayoría de los íconos se escriben como
 *  <img src="" class="icono small" />
 */
.icono-small,
/* Preferir .icono .icono-small */
.small,
img.boton1 {
  max-width: 16px;
  max-height: 16px;
}

/* ------------------------------------------------------------------ */
/*                                TEXTOS                              */
/* ------------------------------------------------------------------ */

/** 
 *   Tipo de texto negro oscuro usado comúnmente en los formularios de creación (ej. comprobante)
 *   En los textos de énfasis que están fuera de tablas
 */
.titulo1,
/* Preferir titulo1 */
.f_titulo {
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
  font-weight: bold;
}

/** Texto rojo */
.text-alert {
  color: var(--font-color-alert);
}

.text-emphasis {
  background-color: var(--comp-color-bg-primary-light);
  box-sizing: border-box;
  color: var(--comp-color-font-primary-outline);
  display: block;
  padding: 0.1rem;
  width: 100%;
}

.text-emphasis-sutil {
  color: var(--font-color-emphasis);
}

.text-muted {
  color: var(--font-color-muted);
}

/* .datosfondogris {
  color: var(--color-berkeley-blue);
  background-color: var(--color-gray-3);
}
.gris2 {
  color: var(--font-color-base);
  background-color: var(--color-gray-3);
} */

/* ------------------------------------------------------------------ */
/*                            TIPOS DE DATOS                          */
/*                                                                    */
/* Define la apariencia de los textos según si son numéricos,         */
/* fechas, etc.                                                       */
/* ------------------------------------------------------------------ */
.flotante,
.entero {
  text-align: right!important;
}

.fecha {
  cursor: pointer;
  text-align: center;
}

.hora {
  text-align: center;
}

input.fecha {
  min-width: 5rem;
}

/* Inputs de archivos
  
  Ejemplo de uso:
  <div class="input-file-group">
    <input type="file" id="archivo" name="archivo" accept=".csv" onchange="ChangeText(this, 'filename');"/>
    <input id="filename" class="file-name" type="text" />
    <button id="txt" type = "button" class="boton-gris" onclick ="javascript:document.getElementById('archivo').click();">Examinar...</button>
  </div>
  <script>
    function ChangeText(oFileInput, sTargetID) {
        document.getElementById(sTargetID).value = oFileInput.value;
    }
  </script>
*/
.input-file-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.input-file-group input[type="file"] {
  display: none;
}

.input-file-group .file-name {
  background-color: var(--color-true-blue-dark);
  color: white;
  flex: 1;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: bold;
}
.input-file-group .file-name::placeholder {
  color: var(--color-gray-3);
}

/* ------------------------------------------------------------------ */

/* .input-file {
  background-color: var(--color-true-blue-dark);
  border: 1px solid var(--color-true-blue);
  color: white;
  cursor: pointer;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: bold;
  width: 100%;
} 
.totalesFila {
  font-size: var(--font-size-base);
  text-align: right;
  width: 100%;
}

.iframeTrilay {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 89%;
  cursor: default;
  overflow: hidden !important;
}

.link-trilay {
  cursor: pointer;
  text-decoration: underline;
}
*/

/*
/* ------------------------------------------------------------------ */
/*                            REVISAR                                 */
/* ------------------------------------------------------------------ */
/*   

.resaltado {
  background-color: #f1f1f6;
}

.espacioVacio-2 {
  width: 100%;
  height: 40px;
}

.espacioVacio-3 {
  width: 100%;
  height: 20px;
}

.espacioVacio-4 {
  width: 100%;
  height: 10px;
}

.espacioVacio-5 {
  width: 100%;
  height: 5px;
}

.limpiaDatos {
  margin: 0 2px;
  z-index: 10;
  font-size: var(--font-size-base);
  cursor: pointer;
  float: left;
}
 */
/* ------------------------------------------------------------------ */
/*                            TABLERO DE CONTROL                      */
/* ------------------------------------------------------------------ */
.ventana-tablero {
  width: 100%;
  height: 99%;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
}

.ventana-encabezado {
  width: 100%;
  height: 25px;
  background-color: #516f9f;
  padding: 6px 0 0 6px;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-main);
  color: white;
  -webkit-box-shadow: 0px 0px 14px 1px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 0px 14px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 14px 1px rgba(0, 0, 0, 0.12);
}

.ventana-encabezado span {
  margin-left: 10px;
}

.ventana-encabezado .ventana-salir {
  float: right;
  cursor: pointer;
  margin-right: 25px;
  font-weight: bold;
}

.contenedor-tablero {
  width: 98%;
  height: 88vh;
  margin-top: 5px;
  margin-left: 1%;
  margin-top: 1%;
  margin-bottom: 0px;
  margin-right: 0px;
  position: relative;
}

/* FILTROS */
.filtro-horizontal {
  width: 100%;
  text-align: center;
}

.filtro-horizontal ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.filtro-horizontal li .filtro-checkbox {
  margin: 0;
  padding: 0;
  width: 13px !important;
}

.filtro-horizontal .filtro-check {
  width: 13px !important;
}

.filtro-horizontal li {
  display: inline;
  margin-right: 8px;
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  text-align: center;
}

/* VENTANA MODAL */
.trilay-ventana-bloqueo {
  width: 100%;
  height: 100%;
  background-color: var(--font-color-base);
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  filter: alpha(opacity=60);
}

.trilay-ventana {
  background-color: var(--bg-color-base);
  z-index: 100;
  position: absolute;
  display: none;
  top: 10px;
}

.trilay-ventana iframe {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

.trilay-ventana div {
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  font-weight: bold;
  padding: 8px 0px 5px 10px;
  max-width: 100%;
  background-color: #516f9f;
  color: white;
  text-align: left;
}

.trilay-ventana div span {
  position: absolute;
  right: 0;
  cursor: pointer;
}

.trilay-ventana div .ic-cierre {
  margin-right: 10px;
}

.trilay-ventana div .ic-url {
  margin-right: 24px;
  font-size: var(--font-size-base);
  color: #94d0cc;
}

/* /* .trilay-ventana-contenedor {
  width: 100%;
  height: 94%;
  overflow: auto;
  padding: 10px 10px 0 10px;
} */

/* ------------------------------------------------------------------ */
/*                                  OTROS                             */
/*                                                                    */
/*                   Estilos para casos muy puntuales                 */
/* ------------------------------------------------------------------ */

/** Combo múltiple
 *
 *  Utilizado en los campos que permiten seleccionar un conjunto de jerarquías. Véase cuentas de gestión
 */
/*No usar*/
.combo-multiple {
  display: none;
  position: absolute;
  z-index: 100;
  background-color: var(--bg-color-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  color: var(--font-color-base);
  width: 100px;
  height: 150px;
  text-align: left !important;
  border: 1px inset black;
}

.combo-multiple div {
  width: 98%;
  cursor: pointer;
  padding: 2px;
}

.combo-multiple .cm-checkbox {
  width: 10px;
}

.cm-seleccionado {
  background-color: #e4e3e3 !important;
}
/*
.dhtmlx-message-ordenamiento {
  background-color: #01060d !important;
  color: #ccff00 !important;
}

.mas-acciones {
  width: 350px;
  height: 250px;
  padding: 5px 2px 8px 8px;
  border: 1px #334563 solid;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white !important;
  z-index: 100;
}

.mas-acciones .m-a-fila {
  width: 100%;
}

.mas-acciones .m-a-fila div {
  overflow: hidden !important;
  float: left;
  text-align: left;
  font-family: var(--font-family-main);
  font-size: 11px !important;
  margin-bottom: 5px !important;
}

.mas-acciones .m-a-fila span {
  cursor: pointer;
  color: #334563;
}

.buscador {
  background-color: var(--bg-color-base);
  width: 100%;
  height: 15px;
  text-align: right;
  font-family: var(--font-family-main);
  font-size: 11px !important;
  padding: 5px;
}

.buscador span {
  margin-left: 6px;
}

.buscador span img {
  width: 12px;
  cursor: pointer;
}*/

/*  PANELES  */
/*.trilay-panel {
  height: 22px;
  width: 100%;
  margin-bottom: 2px;
}

.trilay-panel-nombre {
  height: 100%;
  background-color: #516f9f;
  padding: 2px 5px;
  margin: 0px 2px 0px 0px;
  color: white;
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
  cursor: pointer;
  float: left;
}

.trilay-panel-contenedor {
  background-color: var(--bg-color-base);
  width: 100%;
  height: 90%;
  overflow: auto;
  border: 3px solid #516f9f;
  display: none;
} */

/*  MENSAJE  */
/* #contenedorAdjuntos {
  margin: 5px 0px;
} */

/* BARRA DE PROGRESO */

/* .selccionarLetra {
  background-color: #516f9f !important;
}

.letraArbol {
  font-size: 11px !important;
}

.letraPais {
  font-size: var(--font-size-base);
} */

/* .fondoPais {
  background-color: #627da9 !important;
  font-size: var(--font-size-base);
  font-weight: bold;
} */

/* .columnagen {
  font-weight: bold;
  font-size: var(--font-size-base);
  color: white;
  font-family: var(--font-family-main);
  background-color: #516f9f;
  text-align: left;
} */

/* .letrasi {
  font-size: 11px !important;
  color: #003366;
  font-family: Verdana;
} */

/* .columna4 {
  font-size: var(--font-size-base);
  color: white;
  font-family: var(--font-family-main);
  background-color: #516f9f;
  text-align: right;
} */

/* .letra {
  font-size: var(--font-size-base);
  font-family: Verdana;
} */

/* .link1:link {
  color: #ffffff;
  text-decoration: none;
} */

/* NO USAR */
/* .datosin {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
  font-family: var(--font-family-main);
} */

/* NO USAR */
/* .tabla-tr-top {
  color: white;
  background-color: #394e6f;
  border-collapse: separate !important;
  padding: 3px;
  font-size: 11px !important;
} */
/* 
center {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
} */

/* A:link {
  color: #006699;
}
A:visited {
  color: #006699;
}
A:hover {
  font-family: Verdana, Algerian;
  text-decoration: none;
} */

/* NO USAR */
/* .filadetalle11 {
  font-weight: bold;
  font-size: var(--font-size-base);
  color: #ffffff;
  font-family: var(--font-family-main);
  background-color: #516f9f;
} */

/* NO USAR */
/* .datosTexto {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  background-color: white;
} */
/* 
.filapar {
  font-size: var(--font-size-base);
  color: #003366;
  font-family: var(--font-family-main);
  background-color: #e0edf4;
}

.filaimpar {
  font-size: var(--font-size-base);
  color: #003366;
  font-family: var(--font-family-main);
  background-color: #ffffff;
}

.filaimparar {
  font-size: var(--font-size-base);
  font-family: var(--font-family-main);
  background-color: #fafafd;
} */

/* .f_titulo {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
  font-family: Verdana;
} */
/* .gris1 {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  background-color: #e9e9e9;
} */

/* .gris2 {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  background-color: #cdcdcd;
} */
/* 
.datosgrilla {
  font-size: var(--font-size-base);
  color: #003366;
  font-family: verdana;
}

.datosgrillapadre {
  font-weight: bold;
  font-size: var(--font-size-base);
  color: #003366;
  font-family: verdana;
}

.no-overflow {
  overflow: hidden !important;
}

.bg-white {
  background-color: white !important;
} */

/* NO USAR */
/* .datosin:focus {
  outline: none;
} */

/* ----------------------------------------- */
/*               B O R R A R                 */
/* ----------------------------------------- */
/* 
.datoTexto {
  font-family: var(--font-family-main);
  font-size: 11px !important;
}

.small {
  width: 16px !important;
}
.iconoEnfocado {
  filter: opacity(100%);
  opacity: 1;
  cursor: pointer;
}
.filaEnfocada {
  background-color: #dddddd !important;
}

.text1 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  text-align: right;
  color: var(--font-color-base);
}
.text2 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  text-align: left;
  color: var(--font-color-base);
}
.text3 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  text-align: center;
  color: var(--font-color-base);
}
.text4 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  color: var(--font-color-base);
}
.text4 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  color: var(--font-color-base);
}
.titulo2 {
  color: white;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: bold;
}

.titulo3 { */
/* REPLACE WITH TITULO1 */
/* color: var(--font-color-base);
  font-family: var(--font-family-main);
  font-size: var(--font-size-lg);
  font-weight: bold;
}

.datoNumero {
  font-family: var(--font-family-main);
  font-size: 11px !important;
  float: right;
}

.dividirColumnas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

#chkborrar {
  height: 14px;
}

#opcion {
  height: 14px;
}

.filaDetalle {
  display: inline-flex;
  width: 100%;
  margin: 2px 0;
}
.a-center {
  text-align: center !important;
}

.classTextarea2 {
  width: 98.9% !important;
  height: 120px !important;
  overflow: auto;
  float: left;
  border: 1px solid black;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  padding: 5px;
  resize: none;
} */
/* .tablaGenerica .encabezado .nuevaFila {
  cursor: pointer;
  font-weight: bold;
  color: white;
}
.tablaGenerica .encabezado .eliminable {
  cursor: pointer;
  height: 100%;
  padding-top: 2px;
  width: 100%;
} */

/* .encabezadoExtra {
  background-color: var(--comp-color-bg-secondary);
  border: var(--comp-border-primary);
  border-bottom: 0;
  height: 25px;
  margin-bottom: 0px !important;
}
.encabezadoExtra .titulo1 {
  font-size: var(--font-size-base);
}
.auxiliarTabla {
  text-align: center;
  background-color: #ededed;
}

.separacion0 {
  margin: 0 !important;
  padding: 0 !important;
}
.separacion1 {
  margin: 3px 0;
}
.separacion2 {
  margin: 3px 0 0 0 0;
}
.espacioVacio {
  width: 100%;
  height: 80px;
}
.modalGenerico .encabezadoModal span {
  position: absolute;
  right: 0;
  padding: 0px 5px;
  cursor: pointer;
}

.modalGenerico .filaDiv {
  margin-top: 7px;
  padding: 0px 5px !important;
}

 */

/* No usar */
/* .capaBloqueo {
  width: 100%;
  height: 100%;
  background-color: rgb(110, 95, 95, 0.85);
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  filter: alpha(opacity=60);
} */

/* .tablaGenerica-total-2 {
  position: absolute;
  background-color: #516f9f;
  color: white;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  font-weight: bold;
  padding: 3px 0;
  margin: 0;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
}
.tablaGenerica-total-2 span {
  text-align: right;
  margin-right: 1px;
} */

/* No usar */
/* .filaDiv {
  margin: 5px 0;
} */

/* No usar */
/* .filaDiv2 { */
/*margin:5px 0;*/
/* display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding-top: 6px;
} */
/* 
.trilay-div-paginas {
  width: 100% !important;
  position: absolute;
  text-align: right;
}

.trilay-div-paginas span {
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  color: var(--font-color-base);
}

.trilay-div-paginas span input {
  text-align: center;
  width: 22px;
}

.trilay-div-paginas span img {
  width: 11px;
  margin-left: 5px;
  margin-right: 5px;
}

.trilay-div-paginas #paginaAnteriorAzul,
.trilay-div-paginas #paginaSiguienteAzul {
  display: none;
  cursor: pointer;
}

.trilay-div-paginas #paginaAnteriorGris,
.trilay-div-paginas #paginaSiguienteGris {
  cursor: not-allowed;
}

.trilay-div-nav-check {
  background-color: red !important;
}

#trilay-listado {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto !important;
} */

/* .tituloBG {
  color: white;
  font-family: var(--font-family-main);
  width: 100%;
  height: 40px;
  padding-top: 12px;
  background-color: #516f9f;
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: bold;
} */
/* .tituloBG-2 {
  font-family: var(--font-family-main);
  width: 100%;
  height: 25px;
  padding-top: 4px;
  background-color: #668bc7;
  text-align: center;
  font-size: var(--font-size-base);
  color: white;
}

.tituloBG-3 {
  font-family: var(--font-family-main);
  width: 100%;
  height: 25px;
  padding-top: 4px;
  background-color: #668bc7;
  text-align: center;
  font-size: var(--font-size-base);
  color: white;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.seleccionarLetra {
  background-color: #516f9f !important;
} */

/* No usar */
/* .filadetalle1 {
  font-weight: bold;
  font-size: var(--font-size-base);
  color: #ffffff;
  font-family: var(--font-family-main);
  background-color: #516f9f;
  padding: 4px;
} */

/* No usar */
/* .filadetalle1 {
  font-weight: bold;
  font-size: var(--font-size-base);
  color: #ffffff;
  font-family: var(--font-family-main);
  background-color: #516f9f;
} */

/* No usar */
/* .columna {
  font-size: var(--font-size-base);
  color: white;
  font-family: var(--font-family-main);
  background-color: #516f9f;
  text-align: center;
} */

/* No usar */
/* .cabecera {
  font-size: var(--font-size-base);
  width: 642px;
  color: #003366; */
/*border: solid; */
/* font-family: var(--font-family-main);
} */

/* No usar */
/* .directorio {
  border: 1px solid black;
  font-size: var(--font-size-base);
  width: 100%;
  background-color: #516f9f;
} */

/* No usar */
/* .titulo {
  font-weight: bolder;
  font-size: var(--font-size-base);
  color: ivory;
  font-family: Verdana;
} */

/* No usar */
/* .tabla {
  font-size: var(--font-size-base);
  padding-top: 2px;
  font-family: var(--font-family-main);
  background-color: #668bc7;
  border-collapse: separate !important;
} */

/* No usar */
/* .datos {
  font-size: 11px !important;
  color: var(--font-color-base);
  font-family: var(--font-family-main);
  background-color: white !important;
} */

/* No usar */
/* .body6 {
  border-right: blue;
  border-top: blue;
  font-size: var(--font-size-base);
  border-left: blue;
  color: #003366;
  border-bottom: blue;
  font-family: var(--font-family-main);
  background-color: white;
} */

/* No usar */
/* .Columna1 {
  font-size: var(--font-size-base);
  color: white;
  font-family: var(--font-family-main);
  background-color: #516f9f;
  text-align: left;
} */

/* No usar */
/* .tabladetalle {
  border-right: #006699 1px solid;
  padding-right: 0px;
  border-top: #006699 1px solid;
  padding-left: 0px;
  font-size: var(--font-size-base);
  padding-bottom: 0px;
  border-left: #006699 1px solid;
  color: #003366;
  padding-top: 0px;
  border-bottom: #006699 1px solid; 
  border-collapse: separate !important;
  font-family: var(--font-family-main);
  background-color: white;
} */

/* Tabla div */
/* .tablaDiv {
  font-size: var(--font-size-base);
  width: 100%;
  font-family: var(--font-family-main);
  border-collapse: collapse;
  border: 1px SOLID WHITE;
  background-color: white;
  overflow: hidden;
} */

/* .tablaDiv td {
  border: 1px SOLID WHITE;
  padding: var(--comp-size-table-padding-base);
}

.tablaDiv .encabezado {
  text-align: center;
  font-size: var(--font-size-base);
  color: white;
  background-color: #516f9f;
  padding: 0;
  margin: 0;
}
 */
.admin-sidebar-tabla-colapsable td li{
  list-style-position: inside !important;
  margin: 0 !important;
  padding: 0 !important;
  display: list-item;
}


#numTotalGeneral {
    display: inline-block;
    text-align: right;
    min-width: 100%;
}
/* Subtotal (fila previa al TOTAL) */
#itemsPie td > .datoTexto {
    display: block;
    text-align: right;
}