:root{
	--color-iconos-menu: #00c9c9;

    --color-azul-oscuro: #00bfbf;
 	--color-azul-claro:  #00c9c9;

    --color-boton-oscuro: #00bfbf;
 	--color-boton-claro:  #00c9c9;

	--solido-100: #374151;
	--solido-500: #374151;
	--solido-900: #374151;

	--gris-100: #F9FAFB;
	--gris-200: #F3F4F6;
	--gris-300: #E5E7EB;
	--gris-400: #D1D5DB;
	--gris-500: #9CA3AF;
	--gris-600: #374151;
    
	--color-beige:       #F1ECD8;
    
	--color-blanco:      #FFF;
    
	--color-verde:       #008040;
    
	--color-rojo:        #F00;
    
	--color-amarillo:    #FF0;
    
	--color-negro:       #000;
    
	--tamano-fuente:     11px;
	
	--xtipo-fuente:       Verdana,Arial,Helvetica,sanserif;
	--tipo-fuente: 		'Inter', system-ui, Segoe UI, Arial, Helvetica, sans-serif;

	--color-fuente-blanco: #FFF;
	--color-fuente-negro: #000;
	--border-radius-input : 6px;
	
}

[data-theme="sistemas24"] {

  color-scheme: light;

  /* PRIMARY (rojo corporativo Sistemas24) */
  --p: 0.42 0.19 25;
  --pf: 0.36 0.19 25;
  --pc: 1 0 0;

  /* SECONDARY (rojo claro) */
  --s: 0.55 0.14 25;
  --sf: 0.50 0.14 25;
  --sc: 1 0 0;

  /* ACCENT (naranja corporativo) */
  --a: 0.78 0.17 70;
  --af: 0.70 0.17 70;
  --ac: 1 0 0;

  /* NEUTRAL (gris oscuro UI) */
  --n: 0.30 0.02 260;
  --nf: 0.26 0.02 260;
  --nc: 1 0 0;

  /* BASE (fondos sistema) */
  --b1: 1 0 0;        /* bg-base-100 */
  --b2: 0.96 0 0;     /* bg-base-200 */
  --b3: 0.92 0 0;     /* bg-base-300 */
  --bc: 0.28 0.02 260; /* text-base-content */

  /* INFO */
  --in: 0.72 0.15 220;
  --inc: 0.20 0.05 220;

  /* SUCCESS */
  --su: 0.72 0.17 150;
  --suc: 0.25 0.05 150;

  /* WARNING */
  --wa: 0.84 0.17 85;
  --wac: 0.30 0.05 85;

  /* ERROR */
  --er: 0.65 0.22 25;
  --erc: 1 0 0;

  /* UI COMPONENTES */

  --rounded-box: 0.75rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;

  --animation-btn: 0.25s;
  --animation-input: 0.2s;

  --btn-focus-scale: 0.97;

  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;

}




@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/**********************************
/          AUTOSUGGEST            /
**********************************/

div.suggestions
{ /* tamaño del borde cuando se despliega */
    border: 1px solid var(--color-negro);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
}

div.suggestions div
{ /* color del fondo cuando se despliega*/
    background: var(--color-blanco);
    cursor: default;
    padding: 0px 3px;
}

div.suggestions div.current
{ /* color de fondo cuando se despliega y es seleccionado*/
    background-color: var(--color-azul-oscuro);
    color: white;
}


/**********************************
/          CONTENIDO              /
**********************************/
.radio
{
    cursor: pointer;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    font-weight: bold;
    text-align: center;
}



/**********************************
/          EXPLORADOR             /
**********************************/

#explorador .directorio
{
    background-image: url(img/explorador/dir.gif);
    cursor: pointer;
    height: 20px;
    width: 20px;
}

/**********************************
/          FORMULARIO             /
**********************************/

.boton_maestro_abrir{
	width  : 25px;
	height : 25px;
	margin-left : 2px;
	border-radius : 5px;
	border: solid 1px var( --gris-500 );	
	color : var( --gris-600 );	
	
}

.boton_maestro_limpiar{
	width  : 25px;
	height : 25px;
	margin-left : 2px;
	border-radius : 5px;
	border: solid 1px var( --gris-500 );	
	color : var( --gris-600 );	
	
}



legend{
	font-family: var(--tipo-fuente);	
	font-weight: bold;
	color: var(--color-azul-oscuro);
    font-size: var(--tamano-fuente);

}


input[type=text].campo_inactivo  {
    border: solid 1px var(--gris-500);
	background: var(--color-blanco);
    text-transform: uppercase;
    border-radius: var(--border-radius-input);
    padding: 3px 3px;
    height: 25px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

input[type=text].campo_inactivo:focus  {
	outline: solid 1px var(--color-azul-claro);
}

input[type=text].campo_inactivo_minusculas  {
    border: solid 1px var(--gris-500);
    background: var(--color-blanco);
    border-radius: var(--border-radius-input);
    padding: 3px 3px;
    height: 25px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

input[type=text].campo_inactivo_minusculas:focus  {
	outline: solid 1px var(--color-azul-claro);
}

input[type=date].campo_fecha_inactivo , input[type=date].campo_fecha_activo  {
    border: solid 1px var(--gris-500);
    border-radius: var(--border-radius-input);
    padding: 3px 3px;
    height: 25px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	width: 100px;	
}


input[type=time].campo_inactivo , input[type=time].campo_activo  {
    border: solid 1px var(--gris-500);
    border-radius: var(--border-radius-input);
    padding: 3px 3px;
    height: 25px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	width: 100px;	
}

input[type=time].campo_inactivo:focus  {
	outline: solid 1px var(--color-azul-claro);
}


input[type=date].campo_fecha_inactivo:focus , input[type=date].campo_fecha_activo:focus  {
	outline: solid 1px var(--color-azul-claro);
}

input[type=password].campo_inactivo {
    border: solid 1px var(--gris-500);
    border-radius: var(--border-radius-input);
    padding: 3px 3px;
    height: 25px;
	font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);

}

input[type=password].campo_inactivo:focus  {
	outline: solid 1px var(--color-azul-claro);
}


textarea.campo_inactivo{
    border: solid 1px var(--gris-500);
    background: var(--color-blanco);
    text-transform: uppercase;
    border-radius: var(--border-radius-input);
    padding: 3px 3px;
    height: 25px;
	font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

textarea.campo_inactivo:focus  {
	outline: solid 1px var(--color-azul-claro);
}

textarea.campo_inactivo_minusculas{
    border: solid 1px var(--gris-500);
    background: var(--color-blanco);
    border-radius: var(--border-radius-input);
    padding: 4px;
    height: 25px;
	font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

textarea.campo_inactivo_minusculas:focus  {
	outline: solid 1px var(--color-azul-claro);
}

select.campo_inactivo {
    border: solid 1px var(--gris-500);
    height: 25px;
    border-radius: var(--border-radius-input);
	padding: 0px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	line-height: 30px;
}

select.campo_inactivo:focus  {
	outline: solid 1px var(--color-azul-claro);
}

/* Marco Agosto 2008 */

.fondo_formulario{ /*color de fondo de los modulos*/
    background-color: var(--color-blanco); /*fondo*/
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	padding-top : 5px;
	padding-left : 5px;
	padding-right : 5px;
	
}	

.rotulo_formulario
{ /*color de fondo de los modulos*/
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente) !important;
	vertical-align: middle !important;
	font-weight : bold;
	xborder : solid 1px var(--color-azul-claro) !important;
	padding: 2px 4px;
	border-radius: 6px;
	height :25px;
	text-align: right;
	xborder-bottom : solid 1px var(--color-azul-claro) !important;
	border : solid 1px var(--gris-300) !important;
	
}


.botones-maestro button{
	border-radius : 4px 4px 4px 4px;
	margin-left: 3px;
	font-size: calc ( var( --tamano-fuente ) + 3px );
	width: 28px;
	height: 21px;
    background: var(--color-azul-oscuro);
	
	cursor: pointer;
    color: var(--color-blanco);/* color de las letras*/
	border-bottom: 1px solid var(--color-azul-oscuro);
    border-left: 1px solid var(--color-azul-oscuro);
    border-right: 1px solid var(--color-azul-oscuro);
    border-top: 1px solid var(--color-azul-oscuro);
	padding: 3px;
	text-align: center;
}
 

/**********************************
/           GENERAL               /
**********************************/
TD{ /* tipo y tamaño de letra */
    font-family: var(--tipo-fuente); /* fuente */
    font-size: 12px;
    padding: 0px;
    margin: 0px;		
}

A{ /* tipo y tamaño de letra */
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

hr
{ /* color */
    color: var(--color-negro);
}

.etiqueta
{ /*borde de los titulos de un modulo*/
        /*border: solid 1px var(--color-negro); */
}


.etiqueta .rotulo_encabezado
{  /* color,tamaño y tipo de letra de los titulos del modulo*/
    background-color: var(--gris-400);
    border-bottom: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px;
    min-height: 22px;
    font-weight:bold;	
	border-radius: 6px 0 0 6px;
	text-align: right;
	align-self: center;
}

.etiqueta .rotulo_encabezado_over
{  /* color,tamaño y tipo de letra de los titulos del modulo*/
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 4px;
    min-height: 20px;
    font-weight:bold;	
	text-align: left;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}


.etiqueta .rotulo_pie_over{
    color: var(--color-negro);
    font-family: var(--tipo-fuente);
    font-size: var(--tamano-fuente);
    padding: 4px;
    min-height: 20px;
    display: flex;
    align-items: flex-end;
	font-weight: bold;
}


.etiqueta .rotulo_pie{
    background-color: var(--gris-400);
    border-bottom: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente);
    font-size: var(--tamano-fuente);
    padding: 7px;
    min-height: 28px;
	border-radius : 6px 0 0 6px;
	text-align: right;	
}

.etiqueta .rotulo_resumen { 
    background-color: var(--gris-500);
    border-bottom: 1px solid var(--color-beige);
    border-top: 1px solid var(--color-beige);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    padding: 7px;
    min-height: 27px;
	font-weight:bold;
}

.etiqueta .valor
{ /* color de la letra y color de fondo donde del valor los titulos del modulo*/
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--gris-400);
    border-left: 1px solid var(--gris-400);
    border-right: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px;
	min-height: 28px;
	border-radius : 0 6px 6px 0;
}

.etiqueta .valor_encabezado
{ /* color de la letra y color de fondo donde del valor los titulos del modulo*/
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--gris-400);
    border-left: 1px solid var(--gris-400);
    border-right: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px;
	min-height: 28px;
	border-radius : 0 6px 6px 0;
}

.etiqueta .valor_encabezado_over
{ /* color de la letra y color de fondo donde del valor los titulos del modulo*/
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--gris-400);
    border-left: 1px solid var(--gris-400);
    border-right: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px;
	min-height: 28px;
	border-radius : 6px;

}

.etiqueta .valor_pie
{ /* color de la letra y color de fondo donde del valor los titulos del modulo*/
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--gris-400);
    border-left: 1px solid var(--gris-400);
    border-right: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px;
	min-height: 28px;
	border-radius : 0 6px 6px 0;
}


.etiqueta .valor_pie_over
{ /* color de la letra y color de fondo donde del valor los titulos del modulo*/
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--gris-400);
    border-left: 1px solid var(--gris-400);
    border-right: 1px solid var(--gris-400);
    border-top: 1px solid var(--gris-400);
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px;
	min-height: 28px;
	border-radius : 6px;
}


.cerrar
{ /*imagen de cerrar del modulo*/
    background-image: url(img/submodal/close.gif);
    height: 15px;
    width: 15px;
}

.ayuda
{ /*logo de la ayuda*/
    background-image: url(img/submodal/ayuda.gif);
    cursor: help;
    height: 15px;
    width: 15px;
}


/**********************************
/        HTML_GRID                /
**********************************/

.grid_cuadro_activo table tr.grid_fila td {
	border-bottom: 1px solid var(--gris-200);
}

.grid_cuadro_inactivo table tr.grid_fila td {
  border-bottom: 1px solid var(--gris-200);
}

.grid_mensaje
{  /* color  del mensaje en la barra de resultado*/
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    font-weight: bold;
}

.grid_cuadro{ 
    background-color: var(--color-azul-oscuro); 
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    padding: 0px;
	
}


.grid_cuadro_activo{ 
    background-color: var(--color-blanco);
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    padding: 0px;
}

.grid_cuadro_inactivo{ 
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    padding: 0px;
}

.grid_inactivo {
	filter: opacity(70%);
	border-radius: 8px;
}

.grid_activo {
	filter: none;
	outline: 2px solid var( --color-azul-oscuro );
	outline-offset: -2px;
}

.grid_extra{
    background-color: var(--color-blanco);
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
}

.grid_extra:not(:empty) {
    padding: 4px;
    border: solid 1px var(--gris-400);
}


.grid_extra input[type=radio] {
	margin-left: 10px;
	margin-right: 3px;
	vertical-align: middle !important;
}


.grid_encab{  
    background-color: var(--gris-500);
    color: var(--color-blanco);
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    font-weight: bold;
    padding: 7px 7px 7px 7px !important;
	xborder-radius: 3px;
	vertical-align: middle;
	
}

.grid_form table .grid_encab:first-child {
  border-top-left-radius: 8px;
}


.grid_form table .grid_encab:last-child {
  border-top-right-radius: 8px;

}

.grid_celda{ 
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    padding: 7px 7px 7px 7px !important;
    color: var(--color-negro);
	background-color: var(--color-blanco);;
	vertical-align: middle;
}

.grid_celda_resaltada { 
    background-color: var(--gris-500);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    padding: 7px 7px 7px 7px !important;
	color: var(--color-blanco) !important;
}

.grid_celda_resaltada:has(.template) { 
    background-color: var(--gris-300);
    font-family: var(--tipo-fuente); 
    font-size: var(--tamano-fuente);
    padding: 7px 7px 7px 7px !important;
	color: var(--color-negro) !important;
}



.grid_row_inactivo{ 
    background-color: var(--color-blanco);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	padding: 7px 7px 7px 7px !important;
}

.grid_row_activo{ 
    background-color: var(--gris-200);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	padding: 7px 7px 7px 7px !important;
}

.grid_row_activo:has(.template) { 
    background-color: var(--gris-300);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	padding: 7px 7px 7px 7px !important;
	cursor: pointer;
}


.grid_buscador{ 		/*color y forma del borde de la busqueda en el grid*/
	background-color: var(--color-blanco);
	padding: 2px;
	border-radius: 4px;
}

.grid_buscador .buscador_select{
    border: solid 1px var(--gris-500);
	background: var(--color-blanco);
    text-transform: uppercase;
    border-radius: var(--border-radius-input);
    padding: 2px;
	height: 26px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	margin-right: 5px;
}

.grid_buscador .buscador_select:focus  {
	outline: solid 1px var(--color-azul-claro);
}


.grid_buscador .buscador_input{
    border: solid 1px var(--gris-500);
	background: var(--color-blanco);
    text-transform: uppercase;
    border-radius: var(--border-radius-input);
    padding: 2px;
	height: 26px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);	
}


.grid_buscador .buscador_input:focus  {
	outline: solid 1px var(--color-azul-claro);
}

.grid_buscador button{
    width: 110px;
    background: var(--color-azul-oscuro);
	border-radius : 8px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    height: 27px;
	cursor: pointer;
    color: var(--color-fuente-blanco);/* color de las letras*/
	border-bottom: 1px solid var(--color-azul-oscuro);
    border-left: 1px solid var(--color-azul-oscuro);
    border-right: 1px solid var(--color-azul-oscuro);
    border-top: 1px solid var(--color-azul-oscuro);
	padding: 3px;
	text-align: center;
	margin-left: 5px;
}

.boton_activo {
  display: flex;
  align-items: center;
  padding: 0;
  height: 30px;          
  cursor: pointer;
}


/* icono izquierda */
.boton_activo .boton-icono {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #bdbdbd; /* raya vertical */
  height: 100%;
  pointer-events: none;
}

/* texto centrado real */
.boton_activo .boton-texto {
  flex: 1;
  text-align: center;
  line-height: 34px;      /* mismo alto que el botón */
  white-space: nowrap;
  pointer-events: none;
}


.grid_title{
	border-radius : 8px 8px 0px 0px;
    background-color: var(--color-azul-oscuro);
    border: 1px solid var(--color-azul-oscuro);
	
}
.grid_barra_titulo
{   /* Estilo para el titulo de la ventana*/
    /*background-image: url(img/auto_tabla/titulo.gif);*/
    height: 25px;
    float: left;
	margin-bottom: 3px;
    flex:1;
}

.grid_barra_titulo .grid_controles{
    display: flex;
}

.grid_titulo
{ /* color y tipo de letra del titulo del grid( maestros)*/
    color: var(--color-fuente-blanco);
    float: left;
    font-family: var(--tipo-fuente); /* fuente */
    font-weight: bold;
    font-size: 12;
    font-weight: bold;
    padding-left: 6px;
    padding-top: 6px;
}

.grid_controles
{ /* alineacion de las imagenes de cerrar y ayuda en el grid (maestro)*/
    cursor: pointer;
    float: right;
}

.grid_controls_left
{ /* imagen del fondo del titulo*/
    /* background-image: url(img/auto_tabla/control_left.gif); */
    height: 28px;
    float: right;
    width: 52px;
}

.grid_controls_right
{
    float: right;
}


.grid_cerrar {
	height: 28px;
	width: 25px;
	margin: auto;
	padding-left: 8px;
	text-align : center;
	display: inline-block;
}

.grid_cerrar:before {
	font-family: "Font Awesome 6 Free";
	content: "\f057";
	font-size : 19px;
	font-weight: 900;
	color: var(--color-fuente-blanco);
}

.grid_minimizar {
	height: 28px;
	width: 23px;
	margin: auto;
	padding-left: 8px;
	text-align : center;
	display: inline-block;
}

.grid_minimizar:before {
	font-family: "Font Awesome 6 Free";
	content: "\f358";
	font-size : 19px;
	font-weight: 900;
	color: var(--color-blanco);
}


.grid_ayuda {
	height: 28px;
	width: 23px;
	margin: auto;
	text-align : center;
	display: inline-block;
}

.grid_ayuda:before {
	font-family: "Font Awesome 6 Free";
	content: "\f059";
	font-size : 19px;
	font-weight: 900;
	color: var(--color-fuente-blanco);
}


.grid_reload {
	height: 28px;
	width: 23px;
	margin: auto;
	text-align : center;
	padding: 2px;
	display: inline-block;
}

.grid_reload:before {
	font-family: "Font Awesome 6 Free";
	content: "\f2f9";
	font-size : 17px;
	font-weight: 900;
	color: var(--color-fuente-blanco);
}



.grid_esquina {
	height: 28px;
	width: 23px;
	margin: auto;
	text-align : center;
	padding: 2px;
	display: inline-block;
	float:left;
}

.grid_esquina:before {
	font-family: "Font Awesome 6 Free";
	content: "\f49e";
	font-size : 17px;
	font-weight: 900;
	color: var(--color-fuente-blanco);
}

.grid_esquina1
{ /* otra imagen de la esquina izquierda del grid (maestro)*/
    float: left;
    /* background-image: url(img/auto_tabla/esquina1.gif); */
    width: 10px;
    height: 28px;
}

.grid_esquina2
{ /* imagen de la esquina derecha del grid (maestro)*/
    float: right;
    /* background-image: url(img/auto_tabla/esquina2.gif); */
    width: 10px;
    height: 28px;
}

.grid_flotante .contenedor_status{
	border-left : solid 2px var( --color-azul-oscuro );
	border-right : solid 2px var( --color-azul-oscuro );
	
}

.grid_status{ /* forma y color de la barra de estatu; donde aparece el resultado de la busqueda*/
    background-color: var(--gris-400);
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
	padding-bottom: 2px;
	position: relative;	
}

.grid_pie{ 
	/* forma y color de los pies del grid (maestros)*/
    background-color: var(--color-blanco);
    /*border-left: 3px solid var(--color-azul-oscuro);
    border-right: 3px solid var(--color-azul-oscuro);*/
}

.grid_contenedor{
	border-radius:	8px;
	
}

.grid_contenedor .grid_cuadro{
    border-left: 1px solid var(--color-azul-oscuro);
    border-right: 1px solid var(--color-azul-oscuro);
}

.ascendente
{ /* imagen del grid para ordenar escendente*/
    background-image: url(img/auto_tabla/arriba.gif);
    float: right;
    height: 5px;
    width: 9px;
}

.descendente
{ /* imagen del grid para ordenar descendente*/
    background-image: url(img/auto_tabla/abajo.gif);
    float: right;
    height: 5px;
    width: 9px;
}

.first
{ /* imagen para buscar el ultimo registro en el grid*/
    background-image: url(img/auto_tabla/first.gif);
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.last
{ /* imagen para buscar el primer registro en el grid*/
    background-image: url(img/auto_tabla/last.gif);
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.back
{ /* imagen para ir al primer registro de los que se estan mostrando en el grid*/
    background-image: url(img/auto_tabla/back.gif);
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.forward
{ /* imagen para ir al ultimo registro de los que se estan mostrando en el grid*/
    background-image: url(img/auto_tabla/forward.gif);
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.prev
{ /*imagen para regresar al registro anterior en el grid*/
    background-image: url(img/auto_tabla/prev.gif);
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.next
{ /*imagen para ir al registro siguiente en el grid*/
    background-image: url(img/auto_tabla/next.gif);
    cursor: pointer;
    height: 14px;
    width: 14px;
}

.grid_mascara
{ /* mascara que se coloca entre dos ventanas abiertas para bloquear la ventana de atras*/
    background-color: var(--color-negro);
    background-image: url("img/auto_tabla/vidrio.png");
    background-image: none;
    background-repeat: repeat;
    left: 0px;
    height: 100%;
    opacity: .6;
    position: absolute;
    top: 0px;
    width: 100%;
}

.grid_leyenda{
	/* Estilo para la leyenda delos modulos y los Grid*/
    background-color: var(--gris-200);
	/*
	border-top:    solid 1px var(--color-azul-oscuro);
	*/
	border-left:   solid 1px var(--color-azul-oscuro);
	border-bottom: solid 2px var(--color-azul-oscuro);
	border-right:  solid 1px var(--color-azul-oscuro);
	
	color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    font-weight: bold;
    display:flex;
	justify-content: center;
	height: 63px;
	
	border-radius : 0px 0px 8px 8px;
}

.grid_rotulo_pie
{ /* color y forma del rotulo del grid*/
    xbackground-color: var(--gris-500);
    color: var(--gris-500);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	min-width: 80px;
    font-weight: bold;
    xborder: 1px solid var(--gris-500);
	padding: 4px;
	text-align: right;
}

.grid_rotulo_pie_num
{ /* color y forma del rotulo del grid*/
    xbackground-color: var(--gris-500);
    color: var(--gris-500);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	min-width: 80px;
    font-weight: bold;
    xborder: 1px solid var(--gris-500);
	padding: 4px;
	text-align: right;
}

.grid_rotulo_pie_date
{ /* color y forma del rotulo del grid*/
    xbackground-color: var(--gris-500);
    color: var(--gris-500);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	min-width: 80px;
    font-weight: bold;
    xborder: 1px solid var(--gris-500);
	padding: 4px;	
	text-align: right;
}


td.grid_contenido_pie 
{ /* estilo del valor de los pie */
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    border: 1px solid var(--gris-500);
	padding:4px;
	min-height: 18px;
	border-radius : 8px;
}

div.grid_contenido_pie 
{ /* estilo del valor de los pie */
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    border: 1px solid var(--gris-500);
	padding:4px;
	min-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius : 6px;
}

.grid_contenido_pie_num
{ /* estilo del valor de los pie tipo numericos */
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    border: 1px solid var(--gris-500);
	text-align: right !important;
	padding:4px;
	min-height: 18px;
	border-radius : 6px;
}

.grid_contenido_pie_date
{ /* estilo del valor de los pie tipo numericos */
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    border: 1px solid var(--gris-500);
    text-align: center !important;
	padding:4px;
	min-height: 18px;
	border-radius : 6px;
}

.izquierda{
	text-align: left !important;	
}

.grid_tabla_pie{
	width: 100%;
	border-collapse: collapse !important;

}

.celda_pie{
	padding: 1px;
	margin-left: 1px;
	margin-right: 1px;
}

.grid_tabla_pie tr{
	display: flex;
}

.loader-grid-container{
	overflow: hidden;
	background-color: var(--color-azul-claro);
}

.loader-grid-stop{
	display: block;
	padding: 2px;
	background-color: var(--gris-400);
}

.loader-grid-start{
	display: block;
	padding: 2px;
	animation: loaderg 1s linear infinite;
	background-color: var(--gris-500);
	animation: animation-loader-grid 1s infinite linear;
	transform-origin: 0% 60%;
}

@keyframes animation-loader-grid {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.2);
  }
  100% {
    transform:  translateX(100%) scaleX(0.4);
  }
}

.grid_contenedor_editable{
 	position: absolute;
	inset: 0;
	display: flex;
}

.grid_contenedor_input{
	width: 100%;
}

.grid_input_editable{
	width: 100%;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	color: var(--color-negro);
	padding-left: 10px;
	
}


/*Menu contextual ACCIONES del grid*/
.context-menu {
	position: fixed;
	z-index: 10000;
	min-width: 100;
	max-width: 200px;
	background: var(--color-blanco);
	border-radius: 5px;
	border: solid 1px var(--gris-400);
	padding: 4px;              
	display: flex;
	flex-direction: column;
	gap: 4px;                     
	transform: scale(0);
	transform-origin: top right;
}

.context-menu.visible {
	transform: scale(1);
	transition: transform 200ms ease-in-out;
}

.context-menu-item {
	cursor: pointer;
	background-color: var(--color-blanco);
	font-family: var(--tipo-fuente);
	font-size: var(--tamano-fuente);
	padding: 7px;
	border-radius: 4px;           /* mejora el look */
	border: 1px solid var(--gris-400);  /* opcional */
	gap: 6px;          /* separación icono-texto */

}

.context-menu-item:hover {
	background-color: var(--gris-400);
}

.context-menu-item i {
    width: 20px;       /* para que todos los íconos ocupen lo mismo */
    text-align: left;
}

/**********************************
/          LEYENDA                /
**********************************/

.tabla_leyenda
{  /* no se donde se utiliza*/
    color: var(--gris-500);
    padding: 2px;
    text-align: center;
	display: flex;
	box-sizing: inherit;
	margin: 2px 0px 2px 0px;
	
}

.tabla_leyenda .td_leyenda_inactiva, .tabla_leyenda .td_leyenda_activa{ 
	cursor: pointer;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
	color: var(--gris-500);
	
	display: inline-flex;
	border-radius: 10px;

	border: 1px var(--gris-500) solid;
	background: var(--color-blanco);

	margin: 2px 6px;
	min-height: 50px;
	min-width : 90px;
	font-weight: normal;

}

.tabla_leyenda .td_leyenda_inactiva:hover {
	background: var(--gris-200);
	color: var(--color-blanco);
}

.tabla_leyenda .icono_leyenda {
	padding: 16px 12px 12px 12px;
	border-right: 1px solid var( --gris-200);
	background-color: var( --gris-400 );
	color: var( --gris-600 );
	border-radius: 10px 0 0 10px;
	min-width: 50px;
	width: 50px;
	font-size: 8px;
}

.tabla_leyenda .tecla_leyenda {
	font-weight : bold;
	color : var( --color-negro );
	text-align: left;
}

.tabla_leyenda .rotulo_leyenda {
	padding-left : 2px;
	padding-right : 2px;
	margin-top : 3px;	
	color : var( --color-negro );
}


/**********************************
/         LOGIN                   /
**********************************/

.login
{ /* color y forma del login*/
    background-color: var(--color-blanco); /*fondo*/
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);

}

.login_mask{ /* mascara que se coloca entre dos ventanas abiertas para bloquear la ventana de atras*/
    background-color: var(--color-negro);
    background-image: url("img/auto_tabla/vidrio.png");
    background-image: none;
    background-repeat: repeat;
    left: 0px;
    height: 100%;
    opacity: .6;
    position: absolute;
    top: 0px;
    width: 100%;
}



.login_title
{ /* color y forma del titulo */
    background: var(--color-azul-oscuro);
    border-bottom: 2px solid var(--color-azul-oscuro);
    border-left: 2px solid var(--color-azul-oscuro);
    border-right: 2px solid var(--color-azul-oscuro);
    border-top: 2px solid var(--color-azul-oscuro);
    color: var(--color-blanco);
    float: left;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: 14px;
	margin-bottom: 8px;
}

.boton_login{
    width: 90px;
    background: var(--color-azul-oscuro);
	border-radius : 4px 4px 4px 4px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    height: 25px;
	cursor: pointer;
    color: var(--color-fuente-blanco);/* color de las letras*/
	border-bottom: 1px solid var(--color-azul-oscuro);
    border-left: 1px solid var(--color-azul-oscuro);
    border-right: 1px solid var(--color-azul-oscuro);
    border-top: 1px solid var(--color-azul-oscuro);
	padding: 3px;
	text-align: center;
	margin-left: 5px;

}



/**********************************
/            MAESTRO2             /
**********************************/

.maestro2
{ /* color de fondo de la ventana del maestro 2*/
   background: var(--color-beige);
}


/**********************************
/              MAIL               /
**********************************/

#correo .mensaje_activo
{
    background: var(--color-azul-claro);
    border: var(--color-azul-claro) 1px solid;
    cursor: default;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

#correo .mensaje_inactivo
{
    background: var(--color-blanco);
    border: var(--color-azul-claro) 1px solid;
    cursor: default;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
}

#correo .rotulo1
{
   background-color: var(--gris-200);
   width: 250px;
}

#correo .rotulo2
{
    background-color: var(--gris-200);
    padding: 3px;
    width: 80px;
}

#correo .rotulo3
{
    background-color: var(--gris-200);
    width: 60px;
}

#correo .columna1
{
    width: 250px;
}

#correo .columna2
{
    width: 80px;
}

#correo .columna3
{
    width: 60px;
}


/**********************************
/            MAIN                 /
**********************************/

body
{ /* color de fondo del sistema*/
    background-color: var(--color-blanco);
    margin: 0px;
	xletter-spacing: 0.25px;
}


/*********************************
/             MENU               /
*********************************/

.menu_fondo
{ /* color de los bordes del menu*/
    background-color: var(--color-azul-oscuro);
    padding: 1px 2px 1px 2px;
    -webkit-box-shadow: 6px 6px 10px -4px rgb(0 0 0 / 75%);
    -moz-box-shadow: 6px 6px 10px -4px rgba(0,0,0,0.75);
    box-shadow: 6px 6px 10px -4px rgb(0 0 0 / 75%);
	width: 100%;
	opacity: 0.9;
	
}

.menu_fondo {
    border-width: 1px;
    position:absolute;
    width:100%;
    padding:8px;
	border: solid 1px var(--color-azul-oscuro);
}

.menu_superior
{ /*color de los separadores del menu*/
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
    padding: 1px 2px 1px 2px;
}

.menu_inactivo
{ /*color de fondo del menu cuando esta inactivo*/
    background-color: var(--color-azul-oscuro);
    xborder-right: 1px solid var(--color-blanco);
    color: var(--color-fuente-blanco);
    padding: 2px 10px 2px 5px;
	xmargin-right: 40px;
	vertical-align : middle !important;
}

.menu_activo
{ /*color de fondo del menu cuando esta activo*/
    background-color: var(--color-azul-claro);
    xborder-right: 1px solid var(--color-blanco);
    color: var(--color-fuente-blanco);
    padding: 2px 10px 2px 5px;
}

div.arrow{
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #FFF;
}

.submenu_fondo {
	position: relative;
	padding: 3px;
	border-radius: 8px;
	border: 1px solid #FFFFFF;
	overflow: hidden;
	backdrop-filter: blur(3px);
}

.submenu_fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-azul-oscuro);
	opacity: 0.7;
	z-index: 0;
}

.submenu_fondo > * {
	position: relative;
	z-index: 1;
}

.submenu_fondo>table>tbody>tr>td:first-child{
    width:18px;
}


.submenu_fondo>table>tbody>tr>td:{
    width:12px;
}

.submenu_fondo td:not(:empty) {
    padding-top: 2px;
    padding-bottom: 2px;
}

.submenu_activo div.arrow{
    border-left: 5px solid #fff;
}

.menu-shadow{
    background-color: rgba(0, 0, 0, 0.3)!important;
}

.submenu_activo
{ /*color de fondo del submenu cuando esta activo*/
	background-color: var(--color-azul-claro);
	color: var(--color-fuente-blanco);
	font-weight: normal;
}

.submenu_inactivo
{ /*color de fondo del submenu cuando esta inactivo*/
    xbackground-color: var(--color-blanco);
    color: var(--color-fuente-blanco);
	font-weight: normal;
	
}

.submenu_activo td {
	padding: 10px 7px 20px 7px;
	color: var(--color-fuente-blanco);
}

.submenu_inactivo td {
	padding: 10px 7px 20px 7px;
}

.submenu_separador
{ /*color del separador del submenu*/
    background-color: var(--gris-200);
    /*border-bottom: 1px solid var(--color-blanco);*/
    border-collapse: collapse;
    height: 1px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}

/**********************************
/          TABPANEL               /
**********************************/
.dynamic-tab-pane-control.tab-pane
{/*Fondo del Panel de las Pestañas*/
    background: var(--color-blanco);
    position: relative;
    width: 100%;
}

.dynamic-tab-pane-control .tab-row .tab
{/*TODAS LAS PESTAÑAS DE LOS PANELES*/
    background: var(--color-blanco);
    /*border-style: solid;
    border-width: 2px;*/
    color: var(--gris-500);
    cursor: Default;
    display: inline;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    float: left;
    margin: 1px -1px 1px 2px;
    padding: 2px 5px 3px 5px;
    position: relative;
    text-decoration: none;
    top: 0;
    white-space: nowrap;
    z-index: 1;
}

.dynamic-tab-pane-control .tab-row .tab.selected
{/* PESTAÑA SELECCIONADA */
    background: var(--color-blanco);
    border-left: solid 1px var(--color-negro);
    border-top: solid 1px var(--color-negro);
    border-right: solid 1px var(--color-negro);	
    margin: 1px -3px -3px 0px;
    padding: 2px 6px 4px 6px;
    top: 0px;
    z-index: 2;
    /*border-bottom: 0;*/	
}

.dynamic-tab-pane-control .tab-row .tab a
{
    color: var(--color-negro);
    cursor: pointer;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    text-decoration: none;
}

.dynamic-tab-pane-control .tab-row .tab.hover
{/*PESTAÑA DONDE PASA EL MOUSE*/
    cursor: pointer;
    background: var(--color-azul-claro);

}

.dynamic-tab-pane-control .tab-page
{/*PANEL SELECCIONADO*/
    background: var(--color-blanco);
    clear: both;
    color: var(--color-negro);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    height: 200px;
    padding: 10px;
    position: relative;
    top: -2px;
    z-index: 2;
}

.dynamic-tab-pane-control .tab-row
{
        white-space: nowrap;
        z-index: 1;

}


/**********************************
/        VISOR DE IMAGENES        /
**********************************/

.IMGACTIVA
{/*color del borde del submenu*/
    border: 4px solid ;
    border-color: var(--color-negro);
}

.IMGINACTIVA
{/*color del borde del submenu*/
    border: 4px solid ;
    border-color: var(--color-blanco);
}

/********************************
/      GREYBOX                  /
********************************/
/* GREY BOX Last-Modified: 28/06/06 00:08:22 */
#GB_overlay {
    background-color: var(--color-negro);
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 100;
}

#GB_window {
    left: 0;
    top: 0;
    font-size: 1px;
    position: absolute;
    overflow: visible;
    z-index: 150;
}

#GB_window .content {
    width: auto;
    margin: 0;
    padding: 0;
}

#GB_frame {
    border: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    white-space: nowrap;
}


.GB_Gallery {
    margin: 0 22px 0 22px;
}

.GB_Gallery .content {
    background-color: var(--color-blanco);
    border: 3px solid var(--gris-200);
}

.GB_header {
    top: 10px;
    left: 0;
    margin: 0;
    z-index: 500;
    position: absolute;
    border-bottom: 2px solid var(--color-azul-oscuro);
    border-top: 2px solid var(--color-azul-oscuro);
}

.GB_header .inner {
    background-color: var(--gris-500);
    font-family: Arial, Verdana, sans-serif;
    padding: 2px 20px 2px 20px;
}

.GB_header table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

.GB_header .caption {
    text-align: left;
    color: var(--gris-200);
    white-space: nowrap;
    font-size: 20px;
}

.GB_header .close {
    text-align: right;
}

.GB_header .close img {
    z-index: 500;
    cursor: pointer;
}

.GB_header .middle {
    white-space: nowrap;
    text-align: center;
}


#GB_middle {
    color: var(--gris-200);
}

#GB_middle img {
    cursor: pointer;
    vertical-align: middle;
}

#GB_middle .disabled {
    cursor: default;
}

#GB_middle .left {
    padding-right: 10px;
}

#GB_middle .right {
    padding-left: 10px;
}


.GB_Window .content {
    background-color: var(--color-blanco);
    border: 3px solid var(--gris-400);
    border-top: none;
}

.GB_Window .header {
    border-bottom: 1px solid var(--gris-200);
    border-top: 1px solid var(--gris-500);
    border-left: 3px solid  var(--gris-400);
    border-right: 3px solid  var(--gris-400);
    margin: 0;

    height: 22px;
    font-size: 12px;
    padding: 3px 0;
    color: var(--gris-500);
}

.GB_Window .caption {
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 20px;
}

.GB_Window .close { text-align: right; }
.GB_Window .close span {
    font-size: 12px;
    cursor: pointer;
}
.GB_Window .close img {
    cursor: pointer;
    padding: 0 3px 0 0;
}

.GB_Window .on { border-bottom: 1px solid var(--gris-500); }
.GB_Window .click { border-bottom: 1px solid var(--color-rojo); }

/* Marco Abril 2008 */

.tablaCalendario {
    border-width: 0;
    border-spacing: initial;
    border-style: solid;
    border-color: var(--color-negro);
    border-collapse: separate;
    background-color: var(--color-blanco);
}

.tablaCalendarioInactivo {
    border-width: 0;
    border-spacing: initial;
    border-style: solid;
    border-color: var(--color-azul-claro);
    border-collapse: separate;
    background-color: var(--color-blanco);
}

.rotuloDias {
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
}

.diasInactivos {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--gris-200);
    background-color: var(--gris-400);
    -moz-border-radius: 0;
}

.domingos {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--gris-200);
    background-color: var(--color-azul-claro);
    -moz-border-radius: 0;
}
.sabados {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--gris-200);
    background-color: var(--color-azul-claro);
    -moz-border-radius: 0;
}

.celdaCalendario {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--gris-200);
    background-color: var(--color-beige);
    -moz-border-radius: 0;
}

.celdaCalendarioResaltada {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--color-negro);
    color: var(--color-rojo);
    -moz-border-radius: 0;
}

.celdaCalendarioResaltadaSab {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--color-negro);
    color: var(--color-rojo);
    background-color: var(--color-azul-claro);
    -moz-border-radius: 0;
}
.celdaCalendarioResaltadaDom {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--color-negro);
    color: var(--color-rojo);
    background-color: var(--color-azul-claro);
    -moz-border-radius: 0;
}

.diaMarcado {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--gris-200);
    background-color: var(--color-verde);
    color: var(--color-amarillo);
    -moz-border-radius: 0;
}

.diaMarcadoResaltado {
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    border-color: var(--color-negro);
    background-color: var(--color-verde);
    color: var(--color-amarillo);
    -moz-border-radius: 0;
}

html,body{
    height:100%;
	overflow: hidden !important;
	background-color : transparent !important;
}

*{
    box-sizing: border-box;
}

body{
    background-color: transparent;
}

body#main{
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#PROGRAMA{
    width:100%; 
}

#PROGRAMA>tbody>tr>td{
    display:flex;
    flex-direction: column;
}

#PROGRAMA>tbody>tr>td>iframe{
    flex:1;
    width: unset!important;
}

img#xfondo{
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

.m-titulo{
    display: flex;
    flex-direction: row;
}


.m-cuadro{
    position: relative;
}
.m-loader{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.m-submodal{
    flex-direction: column;
    width:auto!important;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
    height:auto!important;
}

.dynamic-tab-pane-control.tab-pane{
    height: inherit!important;
    width: 100%!important;
}

.dynamic-tab-pane-control.tab-pane .tab-page{
    height: auto!important;
}

#modulo{
    position: absolute;
    width:100% !important;
    height:100% !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 3px;
}

#info_modulo{
	visibility: hidden;
	opacity: 0;
	width: 100%;
	transition: opacity 0.35s ease, margin-top 0.35s ease;
	margin-top: 10px;
}
#contenido_modulo{
    /*
	height:auto !important;
	*/
	flex: 1;
	display: flex;
	padding: 0px; 
	flex-direction: column;
}

#contenido_modulo>*{
	flex: 1;
	height: 100%;
}

#contenido_modulo>*>table:not(.encabezado_modulo){
	width: 100%;
	height: 100%;
	
}

#contenido_modulo .grid_contenedor > form{
	height: 100%;
	display: flex;
	flex-direction: column;
}


#contenido_modulo .grid_contenedor > .grid_form > #grid_tabla{
	flex: 1;
	width: auto !important;
	display: flex;
	flex-direction : column;
}

#contenido_modulo .grid_contenedor > .grid_form > #grid_tabla>.top_cuadro{
	flex: 1;
	position: relative;
}

.grid_panel{
	flex:1;
	position: relative;
}


#contenido_modulo .grid_contenedor > .grid_form > #grid_tabla>.top_cuadro>div{
	top: 0 !important; 
	position: absolute;
	height: 100% !important;
	width: 100%;
	
}

.boton_leyenda .texto_leyenda {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centra verticalmente el bloque */
  text-align: left;         /* texto a la izquierda */
  line-height: 120%;
  padding-left : 8px;
  
}

.td_leyenda_inactiva .texto_leyenda{
	
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centra verticalmente el bloque */
  text-align: left;         /* texto a la izquierda */
  line-height: 120%;
  padding-left : 8px;
	
}

.grid_contenedor > .grid_form > #grid_tabla>.top_cuadro>div>table{
	width: 100%;
}


.grid_contenedor > .grid_form > #grid_tabla>table{
	width: 100%;
	padding-top: 1px;
}


#contenido_modulo .grid_contenedor > .grid_form > #grid_tabla>tbody>tr{
	display: flex;
}
	

#contenido_modulo>.etiqueta{
	flex: none !important;
	height:auto !important;
	padding: 2px;
	border-radius: 8px;
	border: solid 1px var( --gris-500 );
	margin: 1px 3px 1px 3px;
	background-color : var( --color-blanco );
}

#contenido_modulo>.etiqueta>table{
	width: 100%;
	height: auto;
}

#contenido_modulo>.etiqueta>table>tbody>tr{
	display: flex;
	
}

#contenido_modulo>.etiqueta>table>tbody>tr>td{
	display: flex;
}

#contenido_modulo .grid_contenedor{
	height: 100% !important;
	min-height: unset !important;
	border: solid 1px var(--gris-500) !important;
	background-color : var(--color-blanco) !important;
	padding: 1px;
	border-radius: 8px;
}

.grid_celda{
	overflow: hidden;
	text-overflow: ellipsis;
	/*
	// Addition lines for 2 line or multiline ellipsis
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	*/
	white-space: normal;

}

.descendente{
    height:12px;
}
.ascendente{
    height:12px;
}

.grid_cuadro fieldset {
    border: 1px solid var(--gris-400);
    border-radius: 8px;
	margin-bottom: 6px;
}

.grid_cuadro_result{
	white-space: nowrap; 
	overflow: hidden; 
	xtext-overflow: ellipsis;
	font-size: var(--tamano-fuente);
	font-weight : bold;
	font-style: italic;
	color: var(--color-fuente-negro);

}

.grid_buscador > table td {
	vertical-align: middle;
}

.grid_buscador .selector {
	display: flex;
	xpadding : 4px;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 5px;
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);

}

.grid_buscador .selector >div {
	display: flex;
	padding-left: 10px;
}

.grid_buscador .selector >div > div {
	display: flex;
	padding-left: 5px;
}

.grid_cuadro legend {
    margin: 2px 15px;
    padding: 0px 2px;
}

body>.grid_contenedor{
    xborder-radius: 4px;
    xbox-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
}

/* ===== VENTANA INFO (MODAL) ===== */
.grid_info {
    position: absolute;
    background-color: #ffffff;
    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    box-sizing: border-box;

    padding: 35px 15px 15px 15px;

    border: solid 2px var(--color-azul-oscuro);
    border-radius: 8px;

    box-shadow: 0 14px 35px rgba(0,0,0,0.25);
    z-index: 10;
}

/* ===== ESTADO ACTIVO ===== */
.grid_info.activo {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ===== OVERLAY MODAL ===== */
.grid_info_modal {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9;
}

.grid_info_modal.activo {
    opacity: 1;
    pointer-events: auto;
}

/* ===== BOTÓN CERRAR ===== */
.grid_info_close {
    position: absolute;
    top: 8px;
    right: 10px;

    width: 26px;
    height: 26px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    color: #555;

    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.grid_info_close:hover {
    background: #ff5f57;
    color: #ffffff;
}


.grid_cuadro{
    background-color: var( --color-blanco );
    display: flex;
    flex-direction: column;
}

.grid_cuadro> #contenido{
    flex: 1;
	xpadding: 2px;
}



td.span {
    display: inline-flex;
}

#wlpaper{
    /* background-image: url("../imagenes/fondo.jpg"); */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

#superior{ /*Eliminar el background en superior.php*/
    background:none!important;
}

#superior .encab{
    width:100%;
}

#inferior{ /*Eliminar el background en superior.php*/
    background-image:none!important;
    background-color: transparent!important;
}

#proceso{
    background-image:none!important;
    flex: 1;
	margin: 0px;
}

.PROGRAMA{
    width:100%;
    height:100%;
    display:flex;
    flex-direction: column;
}

.PROGRAMA .proc{
    flex:1;
    display:flex;
}

.PROGRAMA .proc{
    flex:1;
    display:flex;
}

.PROGRAMA .proc iframe{
    flex:1;
}

.PROGRAMA iframe{
    width:100%;
}



body>div.grid_contenedor{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.grid_contenedor>form>div.grid_title{
    display:flex;
}

.grid_contenedor>div.grid_title{
    display:flex;
}


.rec-filtro{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--tipo-fuente);
    font-size: var(--tamano-fuente);	
	xfont-weight: bold;
	color: var(--color-negro);
}

.rec-filtro input[type=radio] {
 
	margin-left: 10px;
    margin-right: 3px;
    vertical-align: middle !important;
	accent-color: var( --color-blanco );
}

.rec-filtro input[type="radio"]:checked{
    
	margin-left: 10px;
    margin-right: 3px;
    vertical-align: middle !important;
	
	accent-color: var( --color-azul-claro );
}

.rec-filtro input[type="radio"]:not(:checked){
    margin-left: 10px;
    margin-right: 3px;
    vertical-align: middle !important;
	accent-color: var( --color-blanco );
}

.rec-posic{
    display: flex;
    justify-content: flex-end;
}

.grid_pie td.lat{
    display:inline-flex;
}

.grid_contenedor.submodal{
    display: flex;
    flex-direction: column;
}

#loading.carga_tabla1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


.grid_cuadro .fondo_formulario{
    overflow:auto;
	
}

/*------------------------------------------------------*/
.wait{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 200px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
    background: #eeeeee;
    border-bottom: 4px solid #eeeeee;
    border-left: 4px solid #eeeeee;
    border-right: 4px solid #eeeeee;
    border-top: 4px solid #eeeeee;
    max-width: 400px;
}
.wait *{
    font-size:12px;
}
.wait>.wait-titulo{
    padding: 4px;
    float: initial;
    height: auto;
    color: #fff;
    background-color: var(--color-azul-oscuro);
    font-weight: bold;
}
.wait>.wait-cuadro{
    padding: 8px;
    min-height: 2rem;
}
.wait-glass{
    background-color: var(--color-negro);
    background-image: url("img/auto_tabla/vidrio.png");
    background-image: none;
    background-repeat: repeat;
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
	
}

.barra-porcentaje{
    height: 16px;
    display: flex;
    background-color: rgb(255, 255, 255);
    border-style: solid;
    border-width: 1px;
    border-color: #747474;
    position: relative;
    text-align: center;
}
.barra-porcentaje>.bp-valor{
    background-color: #c0d9fe;
}
.barra-porcentaje>.bp-texto{
    position: absolute;
    width: 100%;
    font-size: 11px;
}

/**************** NUEVO DESDE ACA PARA BULMAN ****************/

#pwd_container{
    /*
	left: 50%!important;
    top: 50%!important;
    transform: translate(-50%,-50%)!important;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
	*/
}

#pwd_container td, #pwd_container th{
	vertical-align : inherit;
}

div.menu_fondo {
	vertical-align : inherit;
}

.submenu_fondo td{
	vertical-align : inherit;
}

.grid_contenedor table {
	border-collapse : inherit;
	border-spacing : 3px 1px;
	
}

#MODULO_RESUMEN {
	width: 100%;
	padding: 2px 2px 2px 2px !important;
	vertical-align: top !important;
	height: unset !important;
}

#MODULO_RESUMEN .celda_pie{
	padding: 1px;
}

#MODULO_RESUMEN .celda_pie:hover{
    xbackground-color: rgba(0,0,0,0.04);
    box-shadow: 0 1px 4px var( --gris-400) ;
    xtransform: translateY(-1px);
	border-radius: 6px;
}


#MODULO_RESUMEN > * > table {
	width: 100%;
	
}

#MODULO_RESUMEN > table {
	width: 100%;
	
}

#MODULO_RESUMEN .grid_encab {
	flex: 1 !important;
	padding: 1px;
	width: 100% !important;
	margin-bottom: 3px !important;
	height : 29px !important;
	border-radius: 6px 6px 0 0;
}

#MODULO_RESUMEN > div:not( .grid_encab ){
	width: 100% !important;
	height: 100% !important;
	overflow-y: auto !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.3) transparent;
	
}

#MODULO_RESUMEN *> hr {
	margin : 1px;
}

#MODULO_RESUMEN .grupo_encab {
	flex: 1 !important;
	margin-top: 5px !important;
	height : 22px !important;
	background-color: var(--gris-400);
    font-family: var(--tipo-fuente); /* fuente */
    font-size: var(--tamano-fuente);
    text-align: left;
	padding-left: 20px;
	color: var(--color-negro);
	vertical-align : middle;
	border-radius : 6px;
	padding-left: 10px;
}

.resumen_acciones{
    display:flex;
    justify-content:flex-end;
    gap:3px;
    margin-bottom:1px;
}

.resumen_acciones button{
    font-size:9px;
    padding:2px 8px;
    border:1px solid var( --gris-400 );
    background: var( --color-blanco );
    color:var( --color-negro );
    border-radius:4px;
    cursor:pointer;
}

.resumen_acciones button:hover{
    background: var( --gris-300 );
}

.resumen_fila .rotulo_pie{
	border: none;
	font-weight: bold;
	background-color: var(--color-blanco );
}

.resumen_fila .rotulo_pie:hover{
	background-color: var( --gris-100 );
}

.resumen_fila .valor_pie{
	border: none;
	background-color: var( --color-blanco );
	border: solid 1px var( --gris-300 );
	border-radius: 8px;
}

.resumen_fila .valor_pie:hover{
	background-color: var(--gris-100 );
}

fieldset.resumen_fila {
	min-height:30px;
}

fieldset.resumen_fila > legend.collapse_titulo{
	cursor: pointer;
	position: relative;
	padding-left: 18px;
}

fieldset.resumen_fila > legend.collapse_titulo::before{
	content: "-";
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;
	font-size: 16px;
	line-height: 1;

}

fieldset.resumen_fila[data-collapse="close"] > legend.collapse_titulo::before{
	content: "+";
}

fieldset.resumen_fila[data-collapse="close"] > .collapse_contenido{
	display: none;
}


.loading,
.loading:after{
	border-radius:50%;

}

.loading{
	font-size:10px;
	border-top:1.1em solid rgba(0,0,0,.2);
	border-right:1.1em solid rgba(0,0,0,.2);
	border-bottom:1.1em solid rgba(0,0,0,.2);
	border-left:1.1em solid #000;
	-webkit-transform:translateZ(0);
	-ms-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-animation:spin 1.1s infinite linear;
	animation:spin 1.1s infinite linear;
    display: block;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
	position: absolute;
	z-index : 100000;
}
	
@-webkit-keyframes 
spin{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg)
	}
	100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg)
	}
}

@keyframes 
spin{
	0%{
		-webkit-transform:rotate(0deg);transform:rotate(0deg)
	}
	100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg)}
}


#DEBUG{
	padding: 0px 10px 10px 5px;
 
	
}


#sub_container_s24Onlyofficecontenedor{
	width  : 100%  !important;
	height : 100%  !important;
	padding: 2px;
}

#s24Onlyofficecontenedor_cuadro{
	flex:1;
	background-color: #d6d6d6;
	display: flex;
}

#sub_container_s24OReportcontenedor{
	width  : 100%  !important;
	height : 100%  !important;
	padding: 2px;
}

#s24OReportcontenedor_cuadro{
	flex:1;
	background-color: #d6d6d6;
	display: flex;
}

/* auto_tabla arrastrar registro para organizar*/
.draggable {
	cursor: move;
	user-select: none;
}
.placeholder {
	background-color: #edf2f7;
	border: 2px dashed #cbd5e0;
}
.clone-list {
	border-top: 1px solid #ccc;
}
.clone-table {
	border-collapse: collapse;
	border: none;
}
.clone-table th,
.clone-table td {
	border: 1px solid #ccc;
	border-top: none;
	padding: 0.5rem;
}
.dragging {
    background-color: #eee;
    /*-webkit-box-shadow: 11px 5px 12px 2px #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    -webkit-box-shadow: 6px 3px 5px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
    /*-moz-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
    /*-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
}

/* filepond uploader24 */
.filepond--credits{
	display: none;		
}

.filepond--item {
   width: calc(50% - 0.5em);
   height: 60px !important;
}

#FilePond24{
	margin-bottom : 0px;
}

.filepond--panel {
	background-color : var(--gris-300) !important;
	border: solid 1px var(--gris-400) !important;
}

.filepond--info{
	height: 23px; 
	xpadding-top: 3px !important; 
	border-radius: 8px; 
	solid: 1px var(--color-azul-oscuro);
	border: solid 1px var(--gris-400 ) !important;
}


.gallery{
    width: 100%;
    height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    border-radius: 4px;
    padding: 3px;

}

.gallery_container{
	inset: 0;
	position: absolute;
    display: flex;
    flex-direction: column;	
    padding: 3px;
}

.docs-pictures {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-pictures > li {
  border: 1px solid transparent;
  float: left;
  xheight: calc(100% / 3);
  margin: 0 -1px -1px 0;
  overflow: hidden;

}

.docs-pictures > li > img {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  width: 100%;
}


.docs-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display : flex;
  flex-direction: column;
}


.docs-files > li {
  float: left;
  overflow: hidden;
}

.docs-files > li:hover {
  background-color : var(--gris-400);

}


.docs-title{
	padding: 8px;
}

.docs-icon{
  width: 50px;
  height: 50px; 
  
}

.excel-icon {
  background-image: url( /herramientas/gallery/icons/word.svg), none;
  stroke: transparent;
  stroke-width: 0px;
}


.docs-files > li > div {
  cursor: -webkit-zoom-in;
  xcursor: zoom-in;
  border-radius : 8px;
  padding : 3px;
  xcolor: white;
  font-size : 10px;
  display: flex;
  margin-bottom: 4px;
  border: solid 1px var(--gris-400);
  
}


.galeria24-image{
	cursor: pointer;	
	
}


.galeria24-list {
	box-sizing: content-box;
	margin: 0;
	overflow: hidden;
	padding: 2px;
	white-space:nowrap;
	
	overflow-x: scroll;
    overflow-y: hidden; 
    display: -webkit-inline-box;
	
}


/* width */
.galeria24-list::-webkit-scrollbar {
	  height: 6px;
	  border-radius: 4px;
}
	
/* Track */
.galeria24-list::-webkit-scrollbar-track {
  background: var(--gris-200); 
}
 
/* Handle */
.galeria24-list::-webkit-scrollbar-thumb {
  background: var(--gris-500);
}

/* Handle on hover */
.galeria24-list::-webkit-scrollbar-thumb:hover {
  background: var(--gris-500); 
}
	
.galeria24-list > li {
    color: transparent;
    cursor: pointer;
    float: left;
    font-size: 0;
    line-height: 0;
    display:inline;
    overflow: hidden;
    transition: opacity 0.15s;
    border: solid 1px var(--gris-200);
    transition: transform .2s; /* Animation */
    border-radius: 4px;

    
}

.galeria24-list > li:focus,
.galeria24-list > li:hover {
      border: solid 1px var(--gris-500);
      transform: scale3d(1.03, 1.03, 1);
      xopacity: 0.75;
}

.galeria24-list > li:focus {
      outline: 0;
}

.galeria24-list > li + li {
      margin-left: 2px;
}

.galeria24-list > .viewer-loading {
    position: relative;
}

#sub_container_galeria_contenedor{
	width:90%!important;
	height:90%!important;
	position:absolute;
	border:none;
	padding: 2px;
	z-index: 0;
}

#galeria_contenedor_cuadro{
	flex:1;
	display:flex;
	background-color:#fff!important;
}


.winbox {
    background: var(--color-azul-oscuro);
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    
}

.winbox.min {
    border-radius: 0;
}

.wb-body {
    /* set the width of window border via margin: */
    xmargin: 4px;
    background: #fff;
}

.wb-title {
    font-family: var(--tipo-fuente);
    font-size: var(--tamano-fuente);
}


/* TABS24 */
.tabs-24,
.panel-24 {
  width: 100%;
  height: 100%;
}

.tabs-header {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px 4px 0px 3px;
  border-bottom: 1px solid var(--gris-400);
  white-space: nowrap;
  
}

.tab-btn {
  padding: 4px 12px;
  cursor: pointer;
  xbackground: var(--gris-200);
  border: 1px solid var(--gris-500);
  border-radius: 6px 6px 0 0;
  font-size: var(--tamano-fuente);
  font-family: var(--tipo-fuente);
  user-select: none;
  height: 26px;
  vertical-align: middle !important;
  text-align: center;
  min-width: 90px;

}

.tab-btn.is-active {
	background: var(--gris-500);
	border-bottom: none;
	color: var( --color-blanco );
}

.tabs-body {
  overflow: hidden;
}

.panel_tab {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.3) transparent;
  
}

.panel_tab #MODULO_RESUMEN > div{
    height: auto !important;
    overflow: hidden !important;
}


/* WebKit */
.panel_tab::-webkit-scrollbar { width: 6px; }
.panel_tab::-webkit-scrollbar-track { background: transparent; }
.panel_tab::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.3);
  border-radius: 10px;
}
.panel_tab::-webkit-scrollbar-thumb:hover {
	background: rgba(0,0,0,.5);
}


.popup_fondo{
	background-color: var( --color-blanco );
	border-radius: 8px;
	width: 100%;
	padding: 10px;
}

.popup_activo{
	height: 30px;
	background-color: var( --gris-400 );
	display: flex;
	align-items: center;      
	justify-content: center;  
}

.popup_inactivo{
	height: 30px;
	background-color: var( --color-blanco );
	display: flex;
	align-items: center;      
	justify-content: center;  	
}

.popup_fondo tr:first-child td:first-child {
	border-top-left-radius: 8px;
}

/* Esquina superior derecha */
.popup_fondo tr:first-child td:last-child {
	border-top-right-radius: 8px;
}

/* Esquina inferior izquierda */
.popup_fondo tr:last-child td:first-child {
	border-bottom-left-radius: 8px;
}

/* Esquina inferior derecha */
.popup_fondo tr:last-child td:last-child {
	border-bottom-right-radius: 8px;
}