@charset "utf-8";
/* CSS Document */

/*
==================================================
MENSAJES
==================================================
*/
.ui-messages-error-icon, .ui-messages-info-icon,
.ui-message-error-icon, .ui-message-info-icon {
    display: none !important;
}

.ui-messages-error, .ui-messages-info, 
.ui-message-error, .ui-message-info {
    border-radius: 14px !important;    /* Redondeado elegante, no se deforma en multilínea */
    border-width: 1px !important;
    border-style: solid !important;
    white-space: normal !important;    /* Permite saltos de línea si el texto es largo */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
}

.ui-messages-error {
    background-color: #fff0f0 !important;
    border: 1px solid #ffcaca !important;
    color: #b02a37 !important;
}

/*
==================================================
DIALOG NUEVO
==================================================
*/

.custom-dialog .ui-dialog-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

.custom-dialog .ui-dialog-title {
    font-size: 18pt;
    font-weight: normal;
}

.custom-dialog .ui-dialog-titlebar {
    position: relative;
    border-bottom: 1px solid #ccc; 
    padding-bottom: 10px;
    color: #ffffff;
    background-color: #6d9ac9;
}

.custom-dialog .ui-dialog-titlebar-close span {
    display: none;
}

.custom-dialog .ui-dialog-titlebar-icon.ui-dialog-titlebar-close {
    background-color: #c0392b;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}

.custom-dialog .ui-dialog-titlebar-close::before {
    content: "\e90b";
    font-family: 'PrimeIcons';
    font-size: 14px;
    font-weight: normal !important;
    color: white;
}

.custom-dialog .ui-dialog-titlebar-icon.ui-dialog-titlebar-close:hover {
    background-color: #e74c3c;
    color: white;
}

.ui-resizable-handle {
    display: block !important;
    z-index: 90;
}

.ui-dialog.ui-widget-content {
    resize: both !important;
}



/*
==================================================
STEPS
==================================================
*/

.step-cuadrado {
	height: 66px !important;
}

.step-cuadrado .ui-steps-number {
	border-radius: 10% !important;
	background-color: rgb(84, 110, 122) !important;
	color: rgb(255, 255, 255) !important;
}

.ui-steps .ui-steps-item .ui-menuitem-link {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}



/*
==================================================
TABLA - TOOLTIPS
==================================================
*/
.ui-tooltip .ui-tooltip-text {
	padding: 10px;
	border-radius: 5px;
}

.tabla-tooltip {
	background-color: white;
	color: #FFFFFF !important;
}

.tabla-tooltip > thead > tr > th {
	font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
	background-color: #4f5d69 !important;
	font-size: 11pt !important;
	padding: 6px 14px;
}

.tabla-tooltip > tbody > tr > td {
	background-color: #2d353c !important;
	padding: 6px 14px;
}



/*
==================================================
TINYMCE
==================================================
*/

.tabla-tinymce {
    border: 2px solid #808080;
    border-collapse: collapse;
}

.tabla-tinymce td, .tabla-tinymce th {
    padding: 2px;
    border: 1px solid #808080;
}

.tox .tox-editor-container {
	resize: both !important;
	overflow: auto !important;
}

.tox.tox-tinymce {
	resize: both !important;
	overflow: auto !important;
}



/*
==================================================
TABLAS
==================================================
*/

.card {
	background: #FFFFFF !important;
}
.card-w-title h1:first-child {
    margin: 0px !important;
}
.card-top {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.no-border-grid td, 
.no-border-grid th {
    border: none !important;
    padding: 0px; /* Opcional: Reduce el espacio interno */
}

.noHeader>.ui-datatable table thead tr {
    display: none;
}
.tabla-titulo-exportar-excel {
	border: 0px !important;
	background: #85929E !important;
	border-color: #85929E !important;
}
.tabla-titulo-exportar-excel td {
	width: 33%;
	padding: 0px !important;
}
.tabla-titulo-exportar-excel td:nth-child(3) {
	text-align: right;
}

/* ----- */

.tabla-con-componentes td {
	height: 34px;
}
.tabla-padding-0 {
	vertical-align: middle !important;
	border-spacing: 0px !important;
	border-collapse: collapse !important;
	padding: 0px !important;
}

.tabla-padding-0 > td {
	padding: 0px !important;
}

.tabla-compacta-header th {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.tabla-compacta td {
	padding: 4px 4px !important;
}

.tabla-nolayout table {
	table-layout: inherit !important;
}
.tabla-fixed table {
	table-layout: fixed !important;
}
.tabla-componentes {
	vertical-align: middle !important;
	border-spacing: 0px !important;
	border-collapse: collapse !important;
	padding: 0px !important;
}
.tabla-responsiva .ui-datatable-data td[role="gridcell"] .ui-column-title {
    display: none;
}

@media ( max-width : 640px) {
	.tabla-responsiva thead th, .tabla-responsiva tfoot td {
	    display: none;
	}
	.tabla-responsiva .ui-datatable-data td[role="gridcell"] .ui-column-title {
	    padding: .4em;
	    min-width: 30%;
	    display: inline-block;
	    margin: -.4em 1em -.4em -.4em;
	}	
	.tabla-responsiva .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
	    text-align: left !important;
	    display: block;
	    border: 0 none;
	    width: 100%;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    float: left;
	    clear: left;
	}
	
	.tabla-responsiva-normal tbody tr td {
	    text-align: left !important;
	    display: block;
	    border: 0 none;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	}
}

.tabla-kv {
	border-spacing: 0;
	border-collapse: collapse;
}

.tabla-kv>tbody>tr>td {
	height: 26px !important;
	padding: 4px 10px;
}

.tabla-kv > tbody > tr > td:nth-child(1) {
	background-color: #f4f4f4;
	color: #333333;
	width: 160px;
	font-weight: bold;
}

.tabla-kv > tbody > tr > td:nth-child(2) {
	background-color: white;
}

/* DATA-TABLE SIMPLE */
.datatable-simple {
    border-spacing: 1px;
    background-color: #DCE2E7;
}
.datatable-simple > tbody > tr {
	background-color: #FFFFFF;
}

/* DATA-TABLE */
.datatable {
    border-spacing: 1px;
    background-color: #DCE2E7;
    border: 1px solid black;
}

.datatable-width-auto>div>table {
    width: auto !important;
}
	
/* CABECERA */
.datatable-sticky > thead {
	position: sticky;
	top: 0;
	background: #eee;
}

.datatable > thead > tr > th {
    /* background-color: #607D8B !important; */
    background-color: #85929E !important;
    color: #FFFFFF !important;
    font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
    font-size: 11pt !important;
    padding: 6px;
    font-weight: bold;
}

.datatable > thead > tr > th.titulo-colspan {
	background-color: #2874A6 !important;
    color: #FFFFFF !important;
    font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
    font-size: 13pt !important;
}

/* FOOTER */
.datatable > tfoot > tr > td.footer-total {
	background-color: rgb(54, 146, 207) !important;
    color: #FFFFFF !important;
    font-family: "Open Sans", "Helvetica Neue", sans-serif !important;
    font-size: 13pt !important;
}

/* BODY */
.datatable > tbody > tr:nth-child(even) {
	background-color: #FFFFFF;
}
.datatable > tbody > tr:nth-child(odd) {
	background-color: #F5F8F9;
}
.datatable > tbody > tr:hover {
	background-color: #DCE2E7;
}
.datatable > tbody > tr > td {
	padding: 4px;
}

.datatable-lr-8px > tbody > tr > td {
	padding-left: 8px;
	padding-right: 8px;
}
.datatable-padding-8px > tbody > tr > td {
	padding: 8px;
}

.datatable-row-select {
	background-color: #AED6F1 !important;
    color: #34495E !important;
    font-weight: bold !important;
}
.even {
	background-color: #FFFFFF !important;
}
.odd {
	background-color: #F5F8F9 !important;
}


/*
==================================================
COMPONENTES
==================================================
*/

.loading {
	z-index: 999999;
}

@media ( max-width : 640px) {

	.seccion-busqueda-celular {
		border: 1px solid #dde3e6 !important;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
	}

}

input, textarea {
	box-sizing: border-box;
}

.inactivo, .inactivo a {
	color: #B90000 !important;
	font-style: italic;
}

.msg-compacto .ui-messages-error {
	margin-bottom: 0px;
	margin-top: 0px;
	padding: 5px;
	color: #B90000 !important;
}

.msg-compacto .ui-messages-error-icon {
	margin-top: 0px !important;
	font-size: 18px !important;
}

.borde {
	border: 1px solid #dde3e6 !important;
}

.borde-azul {
	border: 1px solid blue !important;
}

.borde-azul-oscuro {
	border: 1px solid #00008B !important;
}

.borde-rojo {
	border: 1px solid red !important;
}

.borde-negro {
    border: 1px solid black !important;
}

.borde-rojo-input input {
	border: 1px solid red !important;
}

.borde-0 {
	border: 0px !important;
}

.borde-l {
	border-left: 2px solid #00008B !important;
}

.borde-r {
	border-right: 2px solid #00008B !important;
}

.solo-dlink-borde {
	border: 2px solid #006699;
}
.solo-dlink {
	display: inline-block;
	border: 2px solid #006699;
	padding: 4px !important;
}
@media ( max-width : 640px) {
	.solo-dlink {
	display: block !important;
	}
}

::placeholder { 
  color: #6495ED;
}




/*
==================================================
INPUT
==================================================
*/

.input-centro > input {
	text-align: center !important;
}

.input-100, .input100, .input100px {
	width: 100% !important;
}
.input-100 > input {
	width: 100% !important;
}

.input-100pp {
	width: 100% !important;
}
.input-100pp > input {
	width: 100% !important;
}

.input-100px {
	width: 100px !important;
	min-width: 100px !important;
}
.input-100px > input {
	width: 100px !important;
	min-width: 100px !important;
}

.input80px > input {
	width: 80px !important;
}

.input70px > input {
	width: 70px !important;
}

.input60px > input {
	width: 60px !important;
}

.input50px > input {
	width: 50px !important;
}

.input40px > input {
	width: 40px !important;
}

.input30px > input {
	width: 30px !important;
}

.input-50px input {
	width: 50px !important; 
}

.input-50pp > input {
	width: 50% !important; 
}

.input-50pp {
	width: 50% !important; 
}

.input-80px input {
	width: 80px !important; 
}

.select-font12 .ui-selectonemenu-label {
    font-size: 12pt !important;
}

.select-font12 .ui-selectonemenu-item {
    font-size: 12pt !important;
}



/*
==================================================
DIALOG VIEJO
==================================================
*/
.dialog-noheader .ui-dialog-content {
	padding: 10px !important;
}

.dialog-noheader .card {
	padding: 10px !important;
}

.dialog-noheader .card h1 {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

.dialog-titulo {
    font-size: 20px;
    font-weight: 400;
}

.dialog-noheader .ui-dialog-titlebar {
	display: none !important;
}
.dialog-auto-width {
    width: auto !important;
}


/*
==================================================
TEXTO
==================================================
*/

.nowrap {
	white-space: nowrap;
}
.nowrap .ui-button-text.ui-c {
	white-space: nowrap;
}
.block {
	display: block;
}
.inline {
	display: inline-block;
}
.izquierda {
	text-align: left !important;
}

.derecha {
	text-align: right !important;
}

.centro {
	text-align: center !important;
}

.arriba {
	vertical-align: top !important;
}

.medio {
	vertical-align: middle !important;
	align-items: center !important; 
}

.abajo {
	vertical-align: bottom !important;
}

.font18 {
	font-size: 18pt !important;
}

.font16 {
	font-size: 16pt !important;
}

.font14 {
	font-size: 14pt !important;
}

.font12 {
	font-size: 12pt !important;
}

.font11 {
	font-size: 11pt !important;
}

.font10 {
	font-size: 10pt !important;
}

.font9 {
	font-size: 9pt !important;
}

.font8 {
	font-size: 8pt !important;
}

.bold {
	font-weight: bold;
}

.capitalizar {
	text-transform: capitalize;
}

.uppercase {
	text-transform: uppercase;
}

.italic {
	font-style: italic;
}

.tachado {
    text-decoration:line-through;
}

.subrayado {
    text-decoration:underline;
}

@media ( max-width : 640px) {
	.izquierda-celular {
		text-align: left !important;
	}
}

/*
==================================================
ANCHOS
==================================================
*/
.width-auto {
	width: auto !important;
}

.width-100 {
	width: 100%;
}

.width-100px {
	width: 100px !important;
}

.width-90pp {
	width: 90% !important;
}

.width-50 {
	width: 50%;
}

.height-100 {
	height: 100%;
}

.cell-20px {
	width: 20px !important;
}

.cell-20pc {
	width: 20% !important;
}

.cell-30px {
	width: 30px !important;
}

.cell-33pc {
	width: 33.3% !important;
}

.cell-50px {
	width: 50px !important;
}

.cell-50pc {
	width: 50% !important;
}

.cell-60px {
	width: 60px !important;
}

.cell-70px {
	width: 70px !important;
}

.cell-80px {
	width: 80px !important;
}

.cell-100px {
	width: 100px !important;
}

.cell-120px {
	width: 120px !important;
}

.cell-150px {
	width: 150px !important;
}



/*
==================================================
COLOR
==================================================
*/

.fondo-naranjo {
	background-color: #FFA500 !important;
}

.fondo-violeta {
	background-color: #9400D3 !important;
}

.fondo-blanco {
	background-color: white !important;
}

.fondo-gris {
	background-color: #f5f8f9 !important;
}

.verde {
	color: #9ACD32 !important;
}

.verde-oscuro {
	color: #457C00 !important;
}

.violeta {
	color: #8A2BE2 !important;
}

.violeta-oscuro {
	color: #9400D3 !important;
}

.naranjo {
	color: #FFA500 !important;
}

.naranjo-oscuro {
	color: #b87700 !important;
}

.gris {
	color: #C0C0C0 !important;
}

.azul {
	color: #00F !important;
}

.azul-oscuro {
	color: #00008B !important;
}

.rojo {
	color: #FF0000 !important;
}

.rojo-oscuro {
	color: #B90000 !important;
}

.blanco {
	color: white !important;
}

.boton-rojo {
	font-size: 11pt;
	background-color: #c11940 !important;
}

.boton-rojo:hover {
	background-color: #E32652 !important;
}

.boton-celeste {
	font-size: 11pt;
	background-color: #297cbd !important;
}

.boton-celeste:hover {
	background-color: #368FD3 !important;
}

.boton-amarillo {
	font-size: 11pt;
	background-color: #d48324 !important;
}

.boton-amarillo:hover {
	background-color: #DE943F !important;
}

.boton-naranjo {
	font-size: 11pt;
	background-color: #d48324 !important;
}

.boton-naranjo:hover {
	background-color: #DE943F !important;
}

.boton-verde {
	font-size: 11pt;
	background-color: #3a9d76 !important;
}

.boton-verde:hover {
	background-color: #4CBD90 !important;
}

.boton-violeta {
	font-size: 11pt;
	background-color: #8A2BE2 !important;
}

.boton-violeta-oscuro {
	background-color: #9400D3 !important;
}



/*
==================================================
MARGENES
==================================================
*/
.padding-0 {
	padding: 0px !important;
}

.padding-4px {
	padding: 4px !important;
}

.margin-0-auto {
	margin: 0px auto;
}

.margin-0 {
	margin: 0px !important;
}

.margin-auto {
	margin: auto !important;
}

.mr-0 {
	margin-right: 0px !important;
}

.mr-5 {
	margin-right: 5px !important;
}

.mr-10 {
	margin-right: 10px !important;
}

.mr-20 {
	margin-right: 20px !important;
}

.mr-30 {
	margin-right: 30px !important;
}

.mr-40 {
	margin-right: 40px !important;
}

.mr-50 {
	margin-right: 50px !important;
}

.ml-0 {
	margin-left: 0px !important;
}

.ml-5 {
	margin-left: 5px !important;
}

.ml-10 {
	margin-left: 10px !important;
}

.ml-20 {
	margin-left: 20px !important;
}

.ml-30 {
	margin-left: 30px !important;
}

.ml-40 {
	margin-left: 40px !important;
}

.ml-50 {
	margin-left: 50px !important;
}

.mb-0 {
	margin-bottom: 0px !important;
}

.mb-5 {
	margin-bottom: 5px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-50 {
	margin-bottom: 50px !important;
}

.mb-100 {
	margin-bottom: 100px !important;
}

.mt-0 {
	margin-top: 0px !important;
}

.mt-5 {
	margin-top: 5px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-100 {
	margin-top: 100px !important;
}

.pr-0 {
	padding-right: 0px !important;
}

.pr-4 {
	padding-right: 4px !important;
}

.pr-5 {
	padding-right: 5px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.pr-20 {
	padding-right: 20px !important;
}

.pr-50 {
	padding-right: 50px !important;
}

.pr-100 {
	padding-right: 100px !important; 
}

.pl-0 {
	padding-left: 0px !important;
}

.pl-5 {
	padding-left: 5px !important;
}

.pl-10 {
	padding-left: 10px !important;
}

.pl-20 {
	padding-left: 20px !important;
}

.pl-50 {
	padding-left: 50px !important;
}

.pl-100 {
	padding-left: 100px !important;
}

.pb-5 {
	padding-bottom: 5px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pt-5 {
	padding-top: 5px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-20 {
	padding-top: 20px !important;
}
@media ( max-width : 640px) {
	.mt-10-celular {
		margin-top: 10px !important;
	}
}


/*
==================================================
POSICION
==================================================
*/
.float-l {
	float: left;
}

.float-r {
	float: right;
}

.clearfix {
	overflow: auto;
}

/*
==================================================
BOOTSTRAP
==================================================
*/

.alert {
    display: flex;
	padding: 10px;
    /*margin-bottom: 20px;*/
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
}
.alert > div {
    display: flex;
    align-items: center;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-secondary {
    color: #464a4e;
    background-color: #e7e8ea;
    border-color: #dddfe2;
}
.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}
.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}


/*
==================================================
GRAFICOS
==================================================
*/

#canvas-holder {
  width: 100%;
  margin-top: 50px;
  text-align: center;
}

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
}


