.ui-widget-content {
	background: #eeeeee;
}

a.ui-commandlink {
	text-decoration:none;	
 	color: #1c94c4;
}

.borderlessgrid.ui-panelgrid>*>tr,
.borderlessgrid.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}

.borderlesspanel.ui-panel {
    border: none;
}

.borderpanel.ui-outputpanel>*>tr,
.borderpanel.ui-outputpanel {
    border: 1px solid #e78f08;
    border-radius: 4px;
    padding: 2px;
}

.transparentBackground tr,
.transparentBackground td { background: transparent !important; }

.whitegrid.ui-panelgrid>*>tr,
.whitegrid.ui-panelgrid .ui-panelgrid-cell {
	background-color: white !important;
	background: white !important;
}

.panelPrincipal {
	width: 100%;
}

.heading {
	font-size: 24px;
	padding: 4px;
	padding-left: 8px;
	padding-right: 8px;
}

.ui-widget .containertitle {
	font-size: 24px;
	display: inline-block;
	margin-top: 10px;
	color: white;
	background-color: #f6a828;
	border-radius: 6px;
	padding: 6px;
	padding-left: 10px;
	padding-right: 10px;
}	

.ui-widget .containersubtitle {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #333333;
	font-weight: bold;
	font-size: 20px;
	display: block;
	padding: 10px;
}	

.ui-widget .containersummary {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #333333;
	font-weight: bold;
	font-size: 16px;
	display: block;
	padding: 4px;
}	

.containersubtitle {
	font-size: 18px;
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}	

/* FORMATO GENERAL */
.centered {
	margin: auto;
}

.centered-block {
	display: block;
	margin: auto;
}

.centered-text {
	display:block;
	text-align: center;
}

.centered-overlaypanel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.right-text {
	display:block;
	text-align: right;
}

.left-text {
	display:block;
	text-align: left;
}

.bold-text {
	font-weight:bold;	
}

.ui-datatable .operaciones {
	width: auto;
	margin: 0;
}

.ui-panelgrid .operaciones {
	width: auto;
	margin: 0;
}

.operaciones .ui-widget-content{
	background-color: transparent !important;
	background: transparent !important;
}

.screencentered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

td.ui-cell-editing {
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

.muestrasTable .ui-datatable-header {
    height: 32px;
}

.botonTexto {
	margin-top: 10px;
	max-width:150px;
}

/* Iconos de edicion */
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil {
	background: none !important;
	color: #1c94c4;
	display: inline-block;
	font: normal normal normal 18px/1 FontAwesome;
	font-size: 18px;
	text-rendering: auto;
	text-indent: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right: 5px;
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil:before {
	content: "\f044";
}

.ui-datatable table tbody tr td .ui-row-editor .ui-icon-check {
	background: none !important;
	display: inline-block;
	font: normal normal normal 18px/1 FontAwesome;
	font-size: 18px;
	text-rendering: auto;
	text-indent: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right: 5px;
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-check:before {
	content: "\f058";
}


.ui-datatable table tbody tr td .ui-row-editor .ui-icon-close {
	background: none !important;
	display: inline-block;
	font: normal normal normal 18px/1 FontAwesome;
	font-size: 18px;
	text-rendering: auto;
	text-indent: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right: 5px;
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-close:before {
	content: "\f057";
}

.label {
	text-align: end;
	display: flex !important;
	flex-wrap: wrap !important;
	align-content: center !important;
	justify-content: flex-end !important;
}

.ui-button-text-icon-left .ui-icon {
	margin-top: -6px !important;
}

.card {
	border-radius: 0.75rem !important;
	padding: 1em 1.5em 1em 1.5em !important;
}

.filtros-aplicados {
	margin: 1rem 0;
}

.filtro-chip {
	display: inline-block;
	background: #eef3f8;
	border: 1px solid #cfd8e3;
	border-radius: 16px;
	padding: 0.45rem 0.8rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.help-panel {
	background: #eef8ff;
	border: 1px solid #69a9d8;
	border-radius: 10px;
	color: #1f4f70;
	margin: 0.75rem 0 1rem 0;
	padding: 1rem 1.25rem;
}

.help-panel .help-title {
	color: #1b5f8f;
	display: block;
	font-size: 1.05rem;
	font-weight: bold;
	margin-bottom: 0.65rem;
}

.help-panel .help-description {
	display: block;
	line-height: 1.45;
	margin-bottom: 0.65rem;
}

.help-panel .help-list {
	margin: 0;
	padding-left: 1.25rem;
}

.help-panel .help-list li {
	line-height: 1.45;
	margin-bottom: 0.35rem;
}

.context-help {
	color: #1c94c4;
	cursor: help;
	margin-left: 0.35rem;
}

/* Bloques de búsqueda y resultados con el mismo fondo y borde redondeado. */
body .filtros-busqueda,
body .panel-resultados,
body .formulario-detalle {
    margin-bottom: 1rem;
    padding: 1.25rem;
    border-radius: .75rem;
    background: #fff;
}

/* Misma densidad que Ductos, independientemente de los ui-widget que envuelven cada pantalla. */
body.main-body .filtros-busqueda {
    font-size: 14px;
    line-height: 1.5;
}

body .filtros-busqueda .formgrid.grid {
    margin-top: 0;
}

body .filtros-busqueda .formgrid.grid > .field {
    min-width: 0;
    margin-bottom: .2rem;
    padding-top: 0;
    padding-bottom: 0;
}

body .filtros-busqueda .field > label,
body .filtros-busqueda .field > .etiqueta-campo {
    display: block;
    margin: 0 0 .5rem;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

body .formulario-detalle .etiqueta-campo {
    display: block;
    margin-bottom: .5rem;
    font-size: calc(1em - 1px);
    font-weight: 600;
}

body .filtros-busqueda .ui-inputnumber,
body .formulario-detalle .ui-inputnumber {
    display: block;
    width: 100%;
}

/* Mayor especificidad que el tema, sin modificar recursos del framework. */
body.main-body .ui-datatable thead th {
    padding: 6px 8px;
}

/* Tarjetas de inicio: 20% más que los 75px del tema. */
body .dashboard .summary {
    height: 90px;
}

body .dashboard .dashboard-chart-title {
    font-size: calc(1.25rem - 1px);
}

body .dashboard .dashboard-chart-legend {
    font-size: calc(1em - 1px);
}

/* Celdas compactas: prevalece sobre el padding del tema de PrimeFaces. */
body.main-body .ui-datatable .ui-datatable-data > tr > td {
    padding: 4px 6px;
}

/* Espacio horizontal para los iconos sin aumentar la altura de las filas. */
body .tabla-compacta .operaciones a.clean-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    height: 1.25rem;
    line-height: 1;
}

body .tabla-compacta .operaciones a.clean-link,
body .tabla-compacta .operaciones a.clean-link:hover,
body .tabla-compacta .operaciones a.clean-link:focus {
    text-decoration: none;
}

body .tabla-compacta .operaciones .fa {
    line-height: 1;
}

body .tabla-compacta .operaciones {
    width: max-content;
    margin: 0;
}

body .tabla-compacta .ui-chkbox {
    transform: scale(.8);
    transform-origin: center;
}

/* Progreso Ajax sin tablas internas ni fondos heredados de ui-widget-content. */
body .ui-dialog.ajax-progress-dialog {
    max-width: calc(100vw - 2rem);
    background: #fff;
}

body .ui-dialog.ajax-progress-dialog .ui-dialog-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
}

body .formulario-detalle .field {
    min-width: 0;
    overflow-wrap: anywhere;
}

body .formulario-detalle .ui-calendar {
    display: block;
    width: 100%;
}

/* Acciones de guardar y navegación de formularios y diálogos. */
body .acciones-formulario,
body .acciones-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
}

body .acciones-formulario > .ui-button,
body .acciones-panel > .ui-button {
    width: auto;
}

/* El botón crece con el texto y pasa completo a otra fila si falta espacio. */
body .acciones-panel .boton-agregar-serie {
    flex-shrink: 0;
    white-space: nowrap;
}

body .acciones-panel .boton-agregar-serie .ui-button-text {
    white-space: nowrap;
}

/* Los valores de los formularios conservan peso normal; solo las etiquetas se destacan. */
body .filtros-busqueda .field,
body .formulario-detalle .field,
body .filtros-busqueda .ui-inputfield,
body .formulario-detalle .ui-inputfield,
body .filtros-busqueda .ui-selectcheckboxmenu-label,
body .formulario-detalle .ui-selectcheckboxmenu-label {
    font-weight: 400;
}

body a.filtro-chip-quitar,
body a.filtro-chip-quitar:hover,
body a.filtro-chip-quitar:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
    color: inherit;
    text-decoration: none;
    vertical-align: middle;
}

body .filtro-chip-quitar .pi {
    font-size: .75rem;
}

/* Barra superior compacta y contenido alineado con su nueva altura. */
body .wrapper .topbar {
    padding: .4em 1em 0em 1.2em;
    height: 50px;
}

body .wrapper .main {
    padding-top: 52px;
}

/* Unifica las esquinas de las tarjetas de la landing, incluidos los paneles PrimeFaces. */
body .dashboard .card,
body .dashboard .ui-panel.panelSecundario,
body .dashboard .highlight-box {
    border-radius: .75rem !important;
}

/* El fondo del contenido no debe tapar las esquinas redondeadas del contenedor. */
body .dashboard .ui-panel.panelSecundario,
body .dashboard .highlight-box {
    overflow: hidden;
}

body .dashboard .highlight-box .initials,
body .dashboard .highlight-box .card {
    border-radius: 0 !important;
}

/* Las filas de indicadores y accesos se adaptan sin mezclar sus tarjetas. */
body .dashboard .dashboard-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
}

body .dashboard .dashboard-card-cell {
    display: flex;
    min-width: 0;
    padding: .5em;
    box-sizing: border-box;
}

body .dashboard .dashboard-card-cell > a {
    display: block;
    width: 100%;
    min-width: 0;
}

/* El número ocupa espacio propio y la descripción queda debajo de toda la cabecera. */
body .dashboard .summary {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 107px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

body .dashboard .summary::after {
    content: none;
}

body .dashboard .summary .title {
    flex: 1 1 0;
    min-width: 0;
}

body .dashboard .summary .count {
    position: static;
    order: 1;
    max-width: 100%;
    box-sizing: border-box;
}

body .dashboard .summary .detail {
    order: 2;
    flex: 0 0 100%;
    margin-top: 0;
}

/* Los accesos también crecen si el título necesita varias líneas. */
body .dashboard .highlight-box {
    display: flex;
    height: 100%;
    min-height: 100px;
}

body .dashboard .highlight-box .initials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 4rem;
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 2.5rem;
}

body .dashboard .highlight-box .card {
    display: flex;
    align-items: center;
    flex: 1;
    float: none;
    width: auto;
    min-width: 0;
    height: auto;
    overflow-wrap: anywhere;
}

/* Los gráficos preceden al estado de carga, que baja completo al reducir el ancho. */
body .dashboard .dashboard-panels-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    min-width: 0;
}

body .dashboard .dashboard-panel-cell {
    min-width: 0;
    padding: .5em;
    box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
    body .dashboard .dashboard-card-grid,
    body .dashboard .dashboard-panels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .dashboard .dashboard-loading-state {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 640px) {
    body .dashboard .dashboard-card-grid,
    body .dashboard .dashboard-panels-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Indicadores de administración: mismo diseño y tipografía, con menos espacio exterior. */
body .tarjeta-indicador-administracion {
    box-sizing: border-box;
    flex: 0 0 10.8rem;
    width: 10.8rem;
    min-height: 8rem;
    padding: .5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* El control mantiene un ancho razonable; el desplegable conserva su ancho natural. */
body .ui-selectonemenu.combo-orden-control {
    width: 100% !important;
    max-width: 32rem;
    min-width: 0 !important;
}
body .ui-selectonemenu.combo-orden-control .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body .ui-selectonemenu-panel.combo-orden-panel {
    max-width: calc(100vw - 2rem);
}

/* Ayudas de toda la aplicación: ancho limitado y texto adaptable, también en pantallas pequeñas. */
body .ui-tooltip {
    max-width: min(400px, calc(100vw - 1rem));
    box-sizing: border-box;
}
body .ui-tooltip .ui-tooltip-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Alto adaptable; el div intermedio de PrimeFaces también debe ocuparlo para que Chart.js lo mida. */
body .grafico-longitud-contenedor {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: clamp(20rem, 40vh, 25rem);
}

body .grafico-longitud-contenedor > .ui-chart {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
}

body .grafico-distribucion-causas {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    box-sizing: border-box;
}

body .grafico-distribucion-causas > canvas {
    max-width: 100%;
    box-sizing: border-box;
}

/* Comparaciones de reportes: mismo color en el chip y su serie del gráfico. */
body .comparacion-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border: 1px solid;
    border-radius: 999px;
    color: #fff;
    margin-right: .5rem;
    margin-bottom: .5rem;
}

body .comparacion-chip-seleccionado {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .18);
}

body .comparacion-chip a,
body .comparacion-chip a:hover,
body .comparacion-chip a:focus {
    color: #fff;
    text-decoration: none;
}

body .comparacion-chip-quitar {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
}