/**
 * Define las variables globales de estilo, utilizadas en la definicion de theme.css
 * generada por el proyecto primefaces-sepsa.
 */
:root {
    --color_header: #fefefe;
    --color_branding: #079ede;
    --color_branding_light: #17b5f8;
    --color_branding_dark: #0686bd;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    line-height: 1.0 !important;
}

/**
 * Permite que los textos en tablas salgan con saldo de línea
 */
body .ui-datatable .ui-datatable-data > tr > td {
    white-space: normal;
}

/**
 * Permite que los textos en botones no superen el ancho asociado a su contenedor.
 */
span.ui-button-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/**
 * Elimina los bordes redondeados por defecto que se aplican a los componentes
 * de tipo p:breadcrumbs.
 */
.ui-breadcrumb {
    box-sizing: border-box !important;
    height: 40px !important;
    border: none !important;
    border-radius: 0px !important;
    border-bottom: 1px solid #c8c8c8 !important;
}

/**
 * Estilo para barra de navegacion.
 */
.pv-navbar {
    box-sizing: border-box !important;
    width: 100vw;
    height: 64px;
    border: none;
    border-bottom: 1px solid var(--color_branding, #fab400);
    background: var(--color_header, #fab400);
}

.pv-navbar-remainder {
    box-sizing: border-box;
    width: 100vw;
    height: calc(100vh - 64px);
}

.pv-navbar ul {
    height: 100%;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pv-navbar li {
    font-size: 1rem;
    line-height: 40px;
    text-align: center;
    height: 40px;
    margin-left: 1.5rem;
}

#sidebar_toggler {
    font-size: 1.8rem;             /* hace el ícono más grande */
    mix-blend-mode: difference;    /* asegura contraste automático */
    color: white;                  /* color base para mix-blend-mode */
    cursor: pointer;
    transition: transform 0.2s ease, color 0.3s ease;
}

#sidebar_toggler:hover {
    transform: scale(1.15);
    color: #f5f5f5;
}
/**
 * Estilo para barra lateral de menu.
 */
.pv-sidebar {
    box-sizing: border-box;
    width: 250px;
    height: 100%;
    overflow-y: auto;
    display: inline-block;
    float: left;
    border-right: 1px solid #c8c8c8;
}

.pv-sidebar-remainder {
    box-sizing: border-box;
    width: calc(100vw - 250px);
    height: 100%;
    overflow-y: auto;
    background: whitesmoke;
}

.pv-container {
    display: block !important;
    margin: 1rem !important;
    padding: 2rem !important;
    background: #fff !important;
    border: 1px solid #c8c8c8 !important;
}

.pv-container-area {
    min-height: calc(100vh - 64px - 54px - 1rem);
}

.pv-container-margins {
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 1rem;
}

/**
 * Estilos para input groups. Los estilos de primefaces no se ajustan al layout de
 * vista, por lo cual se crearon estilos especificos para el layout buscado principalmente
 * para el formulario de campos de filtros.
 * Fuente: https://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/
 */
.pv-filter-group {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.pv-filter-modifiers {
    width: 30%;
}

.pv-filter-modifiers select {
    width: 100%;
    line-height: 1.5rem !important;
    outline: 0 none;
    border: 1px solid #999;
    border-radius: 4px;
    border-right: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0px;
    padding-top: calc(0.429rem - 1px);
    padding-bottom: calc(0.429rem - 1px);
}

.pv-filter-input {
    width: 70%;
}

.pv-filter-input .ui-inputfield,
.pv-filter-input .ui-selectonemenu {
    width: 100% !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

/**
 * Estilo para eliminar los estilos por defecto para elementos de lista (ol/ul).
 */
.pv-list-unstyled {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/**
 * Estilo para limitar el ancho de texto y utilizar '...' para indicar que el
 * texto ocupa un ancho superior al disponible.
 */
.pv-text-truncated {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pv-text-right {
    text-align: right;
}

.pv-text-left {
    text-align: left;
}

.pv-text-center {
    text-align: center;
}

.pv-text-justify {
    text-align: justify;
}

/**
 * Estilo que elimina los bordes por defecto para elementos 'table' que utilicen
 * esta clase.
 */
.pv-table-borderless thead td,
.pv-table-borderless tbody td,
.pv-table-borderless th td,
.pv-table-borderless tr td {
    border: none !important;
}

/**
 * Estilos para cuadros de indicadores.
 */
.info-box {
    display: block;
    width: 100%;
    min-height: 150px;
    border-radius: 3px;
    border: 1px solid #c3c3c3;
}

.info-box-icon {
    display: block;
    float: left;
    width: 90px;
    text-align: center;
    margin-top: 10px;
}

.info-box-icon img {
    width: 48px;
}

.info-box-content {
    padding: 10px;
    margin-left: 90px;
}


.ui-growl {
    /* Posicionamiento para centrar horizontalmente */
    left: 50%;
    margin-left: -150px; /* La mitad del ancho del componente */

    /* Posicionamiento para centrar verticalmente (opcional) */
    /* top: 50%;
       margin-top: -100px; */
}

.ui-growl-message {
    /* Ancho fijo para el componente */
    width: 300px;
    text-align: center;
}

.pi-lg {
    font-size: 1.5em;
}
.pi-xl {
    font-size: 2em;
}

/* Cambiar color de fondo del panel */
.ui-panel {
    background-color: #f5f5f5 !important;   /* color de fondo */
    border: 1px solid #ccc !important;      /* opcional: borde */
}

/* Cambiar color de la barra de título */
.ui-panel .ui-panel-titlebar {
    background-color: #004080 !important;   /* azul oscuro */
    color: #ffffff !important;              /* texto blanco */
    font-weight: bold;
}

/* Cambiar color del contenido */
.ui-panel .ui-panel-content {
    background-color: #fafafa !important;
}

/* === Alinea botones solo en la columna "Opciones" === */
.ui-datatable td:last-child > div > table {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* Aplica flex solo si la tabla interna contiene botones */
.ui-datatable td:last-child > div > table button {
    flex-shrink: 0 !important;
}

/* Evita que los botones se corten por overflow */
.ui-datatable td:last-child {
    overflow: visible !important;
    white-space: nowrap !important;
}

/* Los <tr> internos dejan de comportarse como filas visibles */
.ui-datatable td:last-child > div > table > tbody > tr {
    display: contents !important;
}

/* Limpieza visual */
.ui-datatable td:last-child > div > table > tbody > tr > td {
    border: none !important;
    padding: 0 !important;
}

/* Espaciado uniforme entre botones */
.ui-datatable td:last-child button.ui-button {
    margin: 0 0.25rem !important;
}

/* Ajusta altura mínima por si se recorta verticalmente */
.ui-datatable td:last-child button.ui-button {
    min-height: 2rem !important;
}

/* === Cabeceras uniformes para todos los diálogos PrimeFaces === */
.ui-dialog .ui-dialog-titlebar {
    background-color: var(--color_branding_dark) !important;
    color: #fff !important;          /* texto blanco */
    font-weight: 500;
    text-align: center;
    border: none !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0.7rem 1rem !important;
}

/* Opcional: sombreado suave en el borde inferior */
.ui-dialog .ui-dialog-titlebar {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* === Cuerpo del diálogo === */
.ui-dialog .ui-dialog-content {
    background-color: #fff !important;
}

/* === Footer coherente (botones) === */
.ui-dialog .ui-dialog-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
}

/* == Clases para el login === */
/* Centrado vertical y horizontal del login */
.pv-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ocupa toda la altura de la ventana */
}

/* Color de cabecera del panel igual al botón */
.pv-login-panel .ui-panel-titlebar {
    background-color: var(--color_branding) !important;
    color: #fff !important;
    font-weight: bold;
}

/* Botón "Ingresar" con color branding */
.pv-login-wrapper .btn.btn-primary {
    background-color: var(--color_branding) !important;
    border-color: var(--color_branding) !important;
    color: #fff !important;
}

/* === Reducir espacio a la derecha del texto en items del MenuButton === */
.ui-menubutton .ui-menu {
    min-width: auto !important;
    width: auto !important;
}

.ui-menubutton .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    padding-right: 1rem !important; /* Reduce el padding derecho */
    white-space: nowrap !important; /* Evita que el texto se divida */
}

.ui-menubutton .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text {
    margin-right: 0 !important; /* Elimina margen derecho del texto */
    padding-right: 0 !important; /* Elimina padding derecho del texto */
}