/* ================================================================================================= */
/* ================================================================================================= */
/*                              ��������� IMPORTANTE !!!!!!!!!                                       */
/* REGLAS PARA EL ESTILO DEL DATA TABLE PRINCIPAL                                                    */
/*                                                                                                   */
/* SE DECLARAN EN ESTE ARCHIVO APARTE PARA QUE A FUTURO SE PUEDA MODIFICAR IMPORTANDO OTRO ARCHIVO   */
/* EN LA PANTALLA ESPEC�FICA DONDE SE NECESITE                                                       */
/* SERIA CREAR OTRO ARCHIVO SIMILAR A ESTE Y ASI CAMBIAR LOS ESTILOS DE PRIMEFACES SEGUN SE NECESITE */
/* ================================================================================================= */
/* ================================================================================================= */

/**************/
/* DATA TABLE */

.tbl-basic{
	-moz-box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 16px rgba(51, 51, 51, 0.08);
    -webkit-box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 16px rgba(51, 51, 51, 0.08);
	box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 16px rgba(51, 51, 51, 0.08);
}
.tbl-basic tr {
	border-width: 0px !important;
}
.tbl-basic th {
    background: none repeat scroll 0% 0% var(--blue-conavi) !important;
    text-align: left !important;
    color: white !important;
    font-size: 1rem;
    font-weight: normal !important;
    border: 0px 1px 0px 1px solid white;
}
.tbl-basic thead th{
	border-left-width: 1px !important;
	border-right-width: 1px !important;
	border-top: none !important;
	border-bottom: none !important;
	border-style: solid;
	border-color: var(--gris-bordes);
	/*width: 100px;*/
}
.tbl-basic thead th:first-of-type{
	border-top-left-radius: 5px !important;
}
.tbl-basic thead th:last-of-type{
	border-top-right-radius: 5px !important;
}

/* Esto se hace as� para que no se pierda el paginador */
.tbl-basic tbody{
	border-color: transparent;
}

.tbl-basic tbody .ui-state-hover{
	-moz-box-shadow: 0 0 3px var(--gris-texto-base), inset 0 1px 0 #fff;
    -webkit-box-shadow: 0 0 3px var(--gris-texto-base), inset 0 1px 0 #fff;
    box-shadow: 0 0 3px var(--gris-texto-base), inset 0 1px 0 #fff;
}

.tbl-basic tr.ui-datatable-even{
	background-color: white;
}
.tbl-basic tr.ui-datatable-odd{
	background-color: var(--fondo-claro) !important;
}
.tbl-basic tr.ui-state-highlight{
	background: var(--blue-conavi-lighter-1) !important;	
}
.tbl-basic tr td{
	/* mismos que texto-base */
	font-size: 1rem;
	line-height: 1.1rem;
	color: var(--gris-texto-base);
}


/* paginador */
.tbl-basic .ui-paginator{
	background: white;
    border: none;
    text-align: right;
    overflow: hidden;
    padding: 0.6em !important;
    color: var(--gris-tbl-header-text);
    font-size: 0.95em;
    font-weight: normal;
}
.tbl-basic .ui-paginator a.ui-paginator-page.ui-state-active{
	background: var(--blue-conavi) !important;
    color: white !important;
}
.tbl-basic .ui-paginator a{
	background: none !important;
	border: none important;
}
.tbl-basic .ui-paginator .ui-icon {
	text-indent: 9999px;
}
.tbl-basic .ui-paginator select{
    background-color: white;
    font-size: 0.95em;
    font-weight: normal;
    padding: 3px 2px;
    margin-left: 10px;
}



/* PARA CUANDO LA TABLA ES MUY GRANDE Y OCUPA SCROLL */
.tbl-scrollable tr{
	font-size: 0.8em;
}
.tbl-scrollable th{
	width: 100px;
}
.tbl-scrollable.tbl-expand-first th:first-of-type{
	width: 120px;
}
/*.tbl-scrollable .ui-sortable-column{
	width: calc(100px  + 22px) !important;
}*/
.tbl-scrollable td{
	width: 100px;
}

.tbl-scrollable.tbl-th-w-80px th,
.tbl-scrollable.tbl-th-w-80px td {
	width: 80px;
}



/* Regla para los filtros de encabezado 
.input-header-filter{
	-moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: normal !important;
	border: none !important;
    background: transparent !important;
    color: var(--gris-tbl-header-text);
    padding: 0 !important;
}*/


@media (max-width: 640px) {
	.reflow-w-100 .ui-column-title {
		width: 100% !important;
	}
}