:root {
    /* Variables de Color */
    --color-principal: #337ab7; /* Azul PrimeFaces - puedes cambiarlo */
    --color-secundario: #6c757d;
    --color-fondo: #f4f4f9;
    --color-texto: #333;
    --color-activo: #0056b3;
    --color-borde: #ccc;
    --color-head-tabla: #DFEEEE;
    /* Variables de Sombra */
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*font-size: x-small;*/
    font-size: 10px;
    /*color:black;*/
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
    font-size: 10px;
}

body .ui-button{
    border: none;  /* Elimina el borde */
}
body .ui-button.ui-button-text-icon-left{
    padding: .1rem .1rem .1rem .1rem;
    color:gray;
    background: white;
}
body .ui-button.ui-button-secondary.ui-state-hover,
body .ui-button.ui-button-secondary:not(:disabled):hover,
body .ui-splitbutton.ui-button-ui-button-secondary.ui-state-hover,
body .ui-splitbutton.ui-button-ui-button-secondary:not(:disabled):hover,
body .ui-menubutton.ui-button-secondary.ui-button-ui-state-hover,
body .ui-menubutton.ui-button-secondary.ui-button-ui-state-hover {
    background: white;
    border-color: var(--color-principal);
    ;
    color:gray;
}

/*body .ui-button.ui-button-text-icon-left .ui-button-icon-left {
  color: gray;
}*/

body .ui-panel .ui-panel-content {
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    padding: 1rem !important;
}
body .ui-button.ui-button-success, body .ui-splitbutton.ui-button-success>.ui-button, body .ui-menubutton.ui-button-success>.ui-button {
    background: #449d44;
    color: #fff;
    border: 1px solid #398439;
}

body .ui-button.ui-button-danger, body .ui-splitbutton.ui-button-danger>.ui-button, body .ui-menubutton.ui-button-danger>.ui-button {
    background: #d32f2f;
    color: #fff;
    border: 1px solid #d32f2f;
}

body .ui-button.ui-button-success.ui-state-hover, body .ui-splitbutton.ui-button-
success>.ui-button.ui-state-hover, body .ui-
menubutton.ui-button-success>.ui-button.ui-state-
hover {

    background: #449d44;
    color: #fff;
    border: 1px solid #398439;
}


body .ui-button.ui-button-warning, body .ui-splitbutton.ui-button-warning>.ui-button, body .ui-menubutton.ui-button-warning>.ui-button {
    background: #ec971f;
    color: #fff;
    border: 1px solid #fbc02d;
}
body .ui-datatable thead th.ui-state-default {
    background: var(--color-head-tabla);
    color: #495057 !important;
    border: 1px solid #e9ecef !important;
    border-width: 0 0 1px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    padding: 1px 1px !important;
}


body .ui-datatable .ui-datatable-header {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-width: 1px 0 1px 0;
    color: #495057;
    font-weight: 600;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    display: flex;               /* Flexbox */
    justify-content: flex-end;   /* Mueve el contenido a la derecha */
    align-items: center;         /* Centrado vertical */
    padding: 6px 10px;           /* Un poco de aire */
}

body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {
    border: 0 none;
    padding: 0;
    margin-left: .5rem;
    width: 2rem;
    height: 2rem;
    background: transparent;
    color: #6c757d;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    border-radius: 50%;
    border: 0 none;
    text-align: center;
    line-height: 2rem;
    padding: 0;
    background: white;
    color: gray;
}




.ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer {
    text-align: center;
    /* padding: 4px 10px; */
}

.contenedor {
    width: 45%;
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    margin: 0 auto;
    height: 100%;
    max-height: 100%;
}

/*
    ======================================================
    ENCABEZADO (HEADER)
    ======================================================
*/
.encabezado {
    text-align: center;
    width: 100%;
}

.encabezado img {
    max-width: 100%;
    height: auto;
}
.pi-cog:before {
    content: "\e94a";
    /* background: black; */
    color: gray;
}

/*
    ======================================================
    BARRA DE NAVEGACIÓN (COMBO BOX SIMULADO)
    ======================================================
*/
.barra-navegacion {
    background-color: white;
    color: black;
    border-radius: 8px;
    box-shadow: var(--sombra-suave);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    font-size: small;
}

.barra-navegacion ul {
    list-style: none;
    display: flex; /* Mantiene la barra horizontal por defecto */
    justify-content: space-around;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    font-size: small;
}

.barra-navegacion li {
    flex-grow: 1; /* Permite que los ítems se expandan para ocupar el espacio */
    text-align: center;
}
/*
    ======================================================
    Estilos para la barra de navegación y el menú
    ======================================================
*/

/* Hace la fuente del botón de navegación más pequeña */
.barra-navegacion .ui-button {
    font-size: 10px;
}

/* Hace la fuente de los elementos del menú (etiquetas, ítems y submenús) más pequeña */
.ui-tieredmenu {
    font-size: 10px; /* Afecta a todo el menú desplegable */
}

/* Ajusta los ítems del menú si fuera necesario */
.ui-tieredmenu .ui-menuitem-link {
    font-size: 10px !important;
}

.ui-tieredmenu.menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
    padding: .1rem .5rem !important;
    width: auto !important;
    border: 0 none !important;
    float: none !important;
    border-radius: 0 !important;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s !important;
}
.boton {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.boton:hover {
    background-color: var(--color-activo);
}

.boton-activo {
    background-color: var(--color-activo);
}

/* Oculta el elemento 'Agenda' */
.barra-navegacion li:nth-child(6) { /* El 6to <li> es 'Agenda' */
    display: none;
}

/*
    ======================================================
    MEDIA QUERY PARA COMBO BOX (PANTALLAS PEQUEÑAS)
    ======================================================
*/
@media (max-width: 768px) {
    /* Transforma la barra de navegación en un "desplegable" vertical */
    .barra-navegacion ul {
        flex-direction: column; /* Cambia a apilamiento vertical */
        border: 1px solid var(--color-borde);
        border-radius: 8px;
        overflow: hidden;
    }

    .barra-navegacion li {
        width: 100%; /* Ocupa todo el ancho */
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* Separador */
    }

    /* Oculta la lista completa por defecto para simular el menú cerrado */
    .barra-navegacion ul {
        display: none;
    }

    /* Opcional: Mostrar solo el botón activo o un 'hamburguesa' para abrir.
       Dado que solo tienes el HTML/CSS, es más fácil mostrarla siempre apilada
       o requerir JavaScript/JSF para el menú tipo 'hamburguesa' real.
       Para este CSS estándar, la dejaremos apilada para simular el despliegue al entrar a la página.
    */
    .barra-navegacion ul {
        display: flex; /* Mantenemos la visualización vertical para la simulación */
    }

    /* Puedes agregar una clase para simular el 'header' del combobox si usaras JS */
    /* .barra-navegacion-header { ... } */
}


/*
    ======================================================
    ESTILOS DE BOTONES Y PRIME DIVERSOS
    ======================================================
*/
.btn-agregar {
    margin-bottom: 20px;
}

.ui-button {
    /* Estilo base para todos los botones de PrimeFaces si necesitas ajustes */
    font-weight: bold !important;
}

/*
    ======================================================
    ESTILOS DE LA TABLA (p:dataTable)
    ======================================================
*/C

/*
    ======================================================
    ESTILOS DEL DIÁLOGO (p:dialog)
    ======================================================
*/
.ui-dialog {
    border-radius: 10px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.ui-dialog-titlebar {
    background-color:white !important;
    color: black !important;
    padding: 15px;
    font-size: 1.4rem;
    border-bottom: 1px solid #ddd !important;
}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    margin: 0;
    float: none;
    font-size: 16px;
}
.ui-dialog-content {
    padding: 10px !important;
    border-bottom: 1px solid #ddd !important;
}
.ui-dialog-footer {
    border-top: 0 none;
    background: #fff;
    color: #495057;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem !important;
    margin: 0;
    text-align: right;
}

/* Estilos de inputs y labels dentro del diálogo */
.ui-outputlabel {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-texto);
}

.ui-inputtext {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.ui-inputtext:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Ajuste específico para el diálogo para evitar scroll innecesario */
.no-scroll-dialog .ui-dialog-content {
    overflow: hidden !important;
}

.botones{
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}
.tamano-botoes{
    width:25px;
    height:25px;
    border-radius:6px;
    padding:0;
}

body .ui-panel .ui-panel-titlebar {
    border: 1px solid #dee2e6;
    background: var(--color-head-tabla);
    color: #495057;
    padding: 1rem;
    font-weight: 700;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.ui-column-filter {
    display: none !important;
}

.horario {
    display: flex;
    align-items: center; /* Esto alinea verticalmente los elementos */
    gap: 5px; /* Esto añade un pequeño espacio entre los elementos */
}

.ui-selectonemenu label.ui-selectonemenu-label {
    cursor: pointer;
    width: auto;
}

.botonEstandar{
    width:25px;
    height:25px;
    border-radius:6px;
    padding:0;
    color: white;
}


.portal-footer {
    padding: 15px 0;
    color: #999;
    text-align: center;
    /* background-color: #f9f9f9; */
    /*border-top: 1px solid #e5e5e5;*/
}
.botonera-ponentes {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-fondo);
    margin-bottom: 20px;
    padding: 5px 0;
}


/* Contenedor general del diálogo */
.success-dialog {
    width: 400px !important;
    font-family: Arial, sans-serif;
    border-radius: 6px;
    overflow: hidden;
}

/* Header con ícono ✔ */
.success-dialog-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    color: #3c763d;
    font-weight: bold;
    font-size: 16px;
}

.success-icon {
    color: #5cb85c;
    font-size: 20px;
    margin-right: 8px;
}

.success-title {
    font-size: 16px;
}

/* Body opcional */
.success-dialog-body {
    padding: 20px 16px;
}

/* Footer con botón */
.success-dialog-footer {
    padding: 12px 16px;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

.success-btn {
    padding: 6px 16px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

.success-dialog .ui-dialog-titlebar {
    background-color: #4CAF50;
    color: white;
    position: relative;
    padding-left: 45px;
}

.success-dialog .ui-dialog-titlebar:before {
    content: "\2713"; /* Símbolo de palomita ✓ */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    background-color: #4CAF50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    text-align: center;
}

.error-dialog .ui-dialog-titlebar {
    background-color: #f5f5f5;
    color: #333;
    border-bottom: 2px solid #f44336;
    position: relative;
    padding-left: 50px;
}

.error-dialog .ui-dialog-titlebar:before {
    content: "\2715"; /* Símbolo de palomita ✓ */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: bold;
    width: 17px;
    height: 17px;
    background-color: #d32f2f;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    text-align: center;
}

.error-dialog-body {
    padding: 10px;
    text-align: center;
}

.error-dialog-footer {
    padding: 10px 20px;
    text-align: right;
    border-top: 1px solid #ddd;
}

body .ui-dialog .ui-dialog-titlebar {
    background: #fff;
    color: #495057;
    font-weight: 700;
    border-bottom: 0 none;
    padding-left: 45px;
    /* padding: 1.5rem; */
}

body .ui-button.ui-button-icon-only .ui-button-text {
    padding: .0rem !important;
}
.ui-button-icon-only .ui-button-text {
     padding: .0em !important; 
    text-indent: -9999999px;
}