:root {
  /* Paleta neutra y profesional */
  --color-primary: #2a3b4d;
  --color-secondary: #7b8a99;
  --color-accent: #5b7fa3;
  --color-background: #f5f6fa;
  --color-surface: #ffffff;
  --color-border: #e0e3e8;
  --color-text: #22292f;
  --color-text-light: #6c757d;
  --color-success: #4caf50;
  --color-warning: #ffc107;
  --color-danger: #e57373;
  --color-info: #1976d2;
  --color-neutral: #bfc7ce;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #b0b6bb;
  --color-gray-dark: #4a4a4a;
  --color-blue: #5b7fa3;
  --color-blue-light: #e3eaf2;
  --color-blue-dark: #2a3b4d;
}

/* Variables antiguas mapeadas a las nuevas para compatibilidad */
:root {
  --av-color-primary: var(--color-primary);
  --av-color-secondary: var(--color-secondary);
  --av-color-success: var(--color-success);
  --av-color-warning: var(--color-warning);
  --av-color-danger: var(--color-danger);
  --av-color-info: var(--color-info);
  --av-color-light: var(--color-background);
  --av-color-dark: var(--color-blue-dark);
  --av-color-white: var(--color-white);
  --av-color-gray: var(--color-gray);
  --av-color-gray-dark: var(--color-gray-dark);
  --av-color-black: var(--color-black);
  --av-color-blue: var(--color-blue);
  --av-color-skyblue: var(--color-blue-light);
  --av-color-appCore: var(--color-primary);
  --av-color-appRelationChild: var(--color-neutral);
}


/* Colores de Avantico*/
.av-color-black {color: var(--av-color-black);}
.av-color-white {color: var(--av-color-white);}
.av-color-red {color: var(--av-color-red);}
.av-color-green {color: var(--av-color-green);}
.av-color-greenyellow {color: var(--av-color-greenyellow);}
.av-color-blue {color: var(--av-color-blue);}
.av-color-skyblue {color: var(--av-color-skyblue);}
.av-color-yellow {color: var(--av-color-yellow);}
.av-color-orange {color: var(--av-color-orange);}
.av-color-orangered {color: var(--av-color-orangered);}
.av-color-lightblue {color: var(--av-color-lightblue);}
.av-color-pink {color: var(--av-color-pink);}
.av-color-pinkred {color: var(--av-color-pinkred);}
.av-color-purple {color: var(--av-color-purple);}

/* componentes */
.av-color-appCore {color: var(--av-color-appCore);}
.av-color-appRelationChild{color: var(--av-color-appRelationChild);}
.av-color-bg-app {background-color: var(--av-color-appCore);}

.av-info {
  margin-left: 0.25rem;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-primary);
}
.av-info:hover {
	font-weight: 400;
}
.av-info:active {
	font-weight: 600;
}

@import "jquery.datepick.css";

@font-face {
  font-family: "Source Sans Pro";
  src: url('font/SourceSansPro/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: "Source Sans Pro SemiBold";
  src: url('font/SourceSansPro/SourceSansPro-SemiBold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: "Source Sans Pro Bold";
  src: url('font/SourceSansPro/SourceSansPro-Bold.ttf');
  font-weight: bold;
}

/* --- Media Queries para responsividad --- */
@media (max-width: 900px) {
  .av-info {
    font-size: 1rem;
  }
  .av-color-bg-app {
    padding: 1rem;
  }
}
@media (max-width: 600px) {
  .av-info {
    font-size: 0.95rem;
    margin-left: 0.15rem;
  }
  .av-color-bg-app {
    padding: 0.5rem;
  }
}

*, ::after, ::before {
	box-sizing:content-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
}

#page-wrap {
  position: relative;
  margin: 0 auto;
  top: 0px;
  border-top: none;
  background-color: white;
  min-width: 100vw;
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

#printheader {display: none; } /* Makes the print header not visible */

h1,h2,h3,h4,h5,h6{
	padding:0;
	margin:0;
}

#cont_botones{
	position:relative;
	margin-top:5px;
	padding:5px;
	background-image: linear-gradient(top, rgb(230,230,230), rgb(200,200,200));
	background-image: -moz-linear-gradient(top, rgb(230,230,230), rgb(200,200,200));
	background-image: -webkit-linear-gradient(top, rgb(230,230,230), rgb(200,200,200));
	background-image: -o-linear-gradient(top, rgb(230,230,230), rgb(200,200,200));
	background-image: -ms-linear-gradient(top, rgb(230,230,230), rgb(200,200,200));
}

/* Para Borrar Luego */
#cont_botones > button {padding:3px 10px;}
#BTN_OK{ width:80px;	height:25px}

*.transparente, *.transparente:disabled,
*.transparente.boton.combobox,
*.transparente.boton.combobox:active,
*.transparente.boton.combobox:hover{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background:transparent;
	border-color:transparent;

	box-shadow: 0 0;
	cursor:auto;
}
textarea.transparente{
	background:white;
}

/*
*[requerido] {
	background-color: lightyellow;
}
*/

.required-icon {
	display: none;
	font-size: 0.6em;
	color: var(--av-color-red);
}


input[type='checkbox'].transparente{
	/*background:#BABABA;*/
	cursor:auto;
}
input[type='checkbox'].transparente:checked::before{ 
	color: gray;
	/*content: url(img/checkmark.png);*/
	font-size: 16px;
	height: 16px;
	width: 16px;
	position: absolute;
	top: 1px;
	left: 2px;
}


.link:hover{text-decoration:underline}

*.transparente:hover{box-shadow: 0 0}
*.transparente::before,
*.transparente::after{content:'';background:none}

.float_der{float:right;}
.float_izq{float:left;}
.nuevo_grupo{margin-left:5px;}
.boton.agrupado{margin:0px;/*margin-right:-1px;*/}
.boton.agrupado:last-child{margin-right:0px;}
.boton.ajustado{padding:0.25rem 0.12rem}
.boton.registro{padding:0.06rem 0.25rem}
.boton.block{display:block}
.boton.b16{
  padding:0.06rem 0.3rem;
  width:1rem;
  height:1.125rem;
  display:inline-block;
  margin-left:0.25rem;
}
.boton.pre{
  font-family:"Arial Narrow";
  font-size:1rem;
  padding-top:0;
}

.nuevo_grupo{margin-left:0.25rem;}
.boton.agrupado{margin:0;}
.boton.agrupado:last-child{margin-right:0;}

.ml-006rem{margin-left:0.06rem}
.ml-012rem{margin-left:0.12rem}
.ml-08rem{margin-left:0.8rem}
.ml-1rem{margin-left:1rem}
.ml-1-2rem{margin-left:1.2rem}
.mt-006rem{margin-top:0.06rem}
.mt-012rem{margin-top:0.12rem}
.mb-006rem{margin-bottom:0.06rem}
.mb-012rem{margin-bottom:0.12rem}
.mr-025rem{margin-right:0.25rem}
.mr-05rem{margin-right:0.5rem}
.mr-08rem{margin-right:0.8rem}
.mr-1rem{margin-right:1rem}
.mr-1-2rem{margin-right:1.2rem}

.pt-006rem{padding-top:0.06rem}
.pt-012rem{padding-top:0.12rem}
.pb-006rem{padding-bottom:0.06rem}
.pb-012rem{padding-bottom:0.12rem}

.w-1rem{width:1rem}
.w-1-3rem{width:1.3rem}
.w-16px{width:1rem}
.w-18px{width:1.125rem}
.w-20px{width:1.25rem}
.w-32px{width:2rem}
.w-36px{width:2.25rem}

.h-1rem{height:1rem}
.h-1-125rem{height:1.125rem}
.h-1-3rem{height:1.3rem}
.h-16px{height:1rem}
.h-18px{height:1.125rem}
.h-20px{height:1.25rem}
.h-22px{height:1.375rem}
.h-32px{height:2rem}
.h-36px{height:2.25rem}

option.relacionado{
	color:#C63;
	background:#F8F8F8;
}
option.relacionado::after{
	content: url('img/check_green_16.png');
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
	position: absolute;	
}

span.select16,
a.select16{
	position:relative;
	padding-right:16px;
}
span.ocupado32{
	position:relative;
	padding-right:36px;
}

a.select16::before,
span.select16::before{
	position: absolute;
	content: ' ';
	background: url(img/select.png) no-repeat center center;
	height: 16px;
	width: 16px;
	right: 2px;
	top: 0px;
}
span.ocupado32::before{
	position: absolute;
	content: ' ';
	background: url(../img/Ani/Load05_32.gif) no-repeat center center;
	height: 32px;
	width: 32px;
	right: 2px;
	top: 0px;
}

select,
input[type='text'],
input[type='password'],
input[type='date']{
	height:calc(1.75rem + 2px);
	width: 100%;
	border: none;
}

input[type='checkbox']{
	-webkit-margin-start: 0;	
	display: inline-block;
	padding:0;
	margin-bottom: 0;
	margin-top: 0;
	position: relative;
	width: 1.3em;
    height: 1.3em;
	border: none;
}

input[type='radio'] {
	transition: border 500ms;
	background: inherit;
}

/* Estilos para div[name="contFiltro"] en la gama de los azules */
div[name="contFiltro"],
div[name="contCampo"],
div[name="contFecha"],
div[name="contInfoForma"],
div[name="contTareas"],
div[name="contbtnForma"],
div[name="contForma"],
div[name="contEncabezados"],
div[name="contContenido"] {
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: inherit;
    transition: border-color 0.2s, border-width 0.2s, box-shadow 0.2s;
}

div[name="contFiltro"]:hover,
div[name="contCampo"]:hover,
div[name="contFecha"]:hover,
div[name="contInfoForma"]:hover,
div[name="contTareas"]:hover,
div[name="contbtnForma"]:hover,
div[name="contForma"]:hover,
div[name="contEncabezados"]:hover,
div[name="contContenido"]:hover {
    border-color: #90caf9; /* azul claro */
    border-width: 2px;
}

div[name="contFiltro"]:focus-within,
div[name="contCampo"]:focus-within,
div[name="contFecha"]:focus-within,
div[name="contInfoForma"]:focus-within,
div[name="contTareas"]:focus-within,
div[name="contbtnForma"]:focus-within,
div[name="contForma"]:focus-within,
div[name="contEncabezados"]:focus-within,
div[name="contContenido"]:focus-within {
    border-color: #1565c0; /* azul oscuro */
    border-width: 3px;
    box-shadow: 0 0 0 2px #1565c033;
}

div[name="contFiltro"]:not(:focus-within):not(:hover),
div[name="contCampo"]:not(:focus-within):not(:hover),
div[name="contFecha"]:not(:focus-within):not(:hover),
div[name="contInfoForma"]:not(:focus-within):not(:hover),
div[name="contTareas"]:not(:focus-within):not(:hover),
div[name="contbtnForma"]:not(:focus-within):not(:hover),
div[name="contForma"]:not(:focus-within):not(:hover),
div[name="contEncabezados"]:not(:focus-within):not(:hover),
div[name="contContenido"]:not(:focus-within):not(:hover) {
    border-color: transparent;
    border-width: 2px;
    box-shadow: none;
}

	background-image: linear-gradient(#FAFAFA, gainsboro);
	background-image: -webkit-linear-gradient(#FAFAFA, gainsboro);
	background-image: -moz-linear-gradient(#FAFAFA, gainsboro);
	background-image: -o-linear-gradient(#FAFAFA, gainsboro);
	background-image: -ms-linear-gradient(#FAFAFA, gainsboro);
	border-radius: 100%;
	border: none;
	-webkit-border-start: none;
	-webkit-border-end: none;
	-webkit-border-before: none;
	-webkit-border-after: none;
	/*display: inline-block;*/
	margin-bottom: 0;
	position: relative;
	/*vertical-align: baseline;*/
	width: 16px;
	height: 16px;
	cursor:pointer;
}

textarea{
	font-family: "Source Sans Pro";
	font-size: 1em;
	resize: vertical;
	padding: 4px 8px;
	border-radius: 4px;
	box-sizing: border-box;
	border: none;
	width: 100%;
}

fieldset {
	border: none;
}

form {
	border: none;
}

.boton.izq {border-top-left-radius:4px;border-bottom-left-radius:4px;}
.boton.der {border-top-right-radius:4px;border-bottom-right-radius:4px;}

.boton,
input[type='button'], 
input[type='submit'] {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	border: none;
	margin-bottom: 0;
	padding: 2px 6px;
	cursor:pointer;
	text-align:center;
	font-family: "Source Sans Pro";
	font-weight: 100;
}

.boton:focus,
input[type='button']:focus, 
input[type='submit']:focus {
	border-color: var(--qa-color-field-hover);
    box-shadow: inset 0 0 0 2px var(--qa-color-field-hover);
}

.boton:hover,
input[type='button']:hover,
input[type='submit']:hover {
	background-color: rgba(0,0,0,0.1);
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    /*color: white;*/
}


input[type='button'].cuidado, 
.boton.cuidado{
	/*background-image: linear-gradient(top, #FFF,#C00);
	background-image: -webkit-linear-gradient(top, #FFF,#C00);	
	background-image: -moz-linear-gradient(top, #FFF,#C00);
	background-image: -o-linear-gradient(top, #FFF,#C00);
	background-image: -ms-linear-gradient(top, #FFF,#C00);*/
	box-shadow: 0px 0px 0px 1px red;
	color:white;
	/*text-shadow: 0 1px 0 #505050;
	border:1px rgba(255,0,0,0.5) solid;*/
}

.boton.combobox,
.boton.combobox:hover{
	margin-left: 1px;
	/*border: 1px solid white;*/
	/*background-color: rgba(255, 255, 255, 0.9);*/
	/*color: #333;*/
	padding: 3px 20px 3px 4px;
}

input[type='button']:active, 
input[type='checkbox']:active, 
.boton.active{
	background:rgba(255, 255, 255, 0.3);
	box-shadow: 0px 0px 1px 1x rgba(0,0,0,0.3);
	/*border:1px #333 solid;*/
}

input[type='button']:active, 
.boton:active{
	background-color: cornflowerblue;
}

input[type='button']:hover.cuidado, 
.boton:hover.cuidado{
	box-shadow: 2px 2px 4px 0px white inset;
	border:1px rgba(255,0,0,0.5) solid;
}
input[type='button']:active.cuidado, 
.boton:active.cuidado{
	background-image: linear-gradient(top, #FFF,#C00);
	background-image: -webkit-linear-gradient(top, #FFF,#C00);	
	background-image: -moz-linear-gradient(top, #FFF,#C00);
	background-image: -o-linear-gradient(top, #FFF,#C00);
	background-image: -ms-linear-gradient(top, #FFF,#C00);
	box-shadow: 2px 2px 4px 0px white inset,
				0px 0px 3px 0px #C00;
	color:white;
	text-shadow: 0 1px 0 black;
	border:1px rgba(255,0,0,0.5) solid;
}

/* css que deve ir despues de las definiciones anteriores*/
*.eliminar{
	color: rgba(255, 255, 255, 0.9);
	font-family: "Source Sans Pro SemiBold";
	background-color: rgba(200,30,30,1);
}
*.eliminar:hover{
	background-color: rgba(240,30,30,1);
}

input:focus, select:focus, textarea:focus, .boton.combobox:focus,
input:hover, select:hover, textarea:hover, .boton.combobox:hover {
	/*outline-color: transparent;
	outline-offset: -1px;
	outline-style: solid;
	outline-width: 2px;	
	box-shadow: inset 0 0 0 transparent;*/
}

input:focus, select:focus, textarea:focus, .boton.combobox:focus {
	/*border-color: #80bdff;
	background-color: lightgoldenrodyellow;*/
}

input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus), .boton.combobox:hover:not(:focus){
	/*border-color: #80bdff;
	background-color: rgb(235, 245, 255);*/
}

/*
input:focus, textarea:focus, select:focus, .boton.combobox:focus,
input:hover, textarea:hover, select:hover, .boton.combobox:hover {
    background-color: #fff;
    border-color: #80bdff;
    border-top-color: rgb(128, 189, 255);
    border-right-color: rgb(128, 189, 255);
    border-bottom-color: rgb(128, 189, 255);
    border-left-color: rgb(128, 189, 255);
    outline: 0;
    box-shadow: inset 0 0 0 transparent;
	background-color: lightgoldenrodyellow;
}
*/

tr[name='radio'] {
    display: flex;
    padding: 4px;
    border: 1px solid transparent;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}

option{
	position:relative;
	display:block;
	height:20px;
}

.av-cat-filter-date [name="contFechaHora"]{
	display: flex;
}

.ui-datepicker-trigger {
    min-width: 24px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 2px 4px;
    font-size: 1.5em;
    position: relative;
	color: var(--av-color-appCore);
}

.ui-datepicker-trigger:hover,
.ui-datepicker-trigger:focus{
	font-weight:400;
}
.ui-datepicker-trigger:active{
	font-weight:900;
}

.ui-datepicker-calendar .ui-datepicker{
	font-size:18px;
}
.ui-datepicker-calendar .ui-datepicker-week-end > a{
	background-color: rgb(200, 0, 0);
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(0, 0, 0, 0);
}
.ui-datepicker-week-end.ui-datepicker-other-month,
.ui-datepicker-week-end.ui-datepicker-unselectable,
.ui-datepicker-week-end.ui-state-disabled{
	background-color:transparent;
}