@charset "UTF-8";
*{font-family: 'Montserrat', sans-serif !important;}

.custom-menuitem {
    height: 35px;
    width: 20px !important; /* Ajusta el tamaño según sea necesario */
    background: url('/resources/img/ayuda.png') no-repeat center center;
    background-size: contain;
}
.custom-menuitem:hover{
    height: 35px;
    width: 25px !important; /* Ajusta el tamaño según sea necesario */
    background: url('/resources/img/ayuda.png') no-repeat center center;
    background-size: contain;
}
.contenidoIMG{
    background-image: url('/resources/img/Imagenes/banner.jpg') !important;
    background-size: contain !important;
    justify-content: center;
}
.modalHuella{
    background-image: url('/resources/img/huella.png') !important;
    background-size: cover !important;
}
#dtDocumentos.ui-datatable-tbody {
    height: 500px; 
    overflow-y: auto;  
}
#frmDocumentos:dtDocumentos_data{
    height: 500px;
}
#dtDocumentos_data{
    height: 500px;
}

@media screen and (max-width: 700px) {
    #ButtonOpcUsr, #lblLogueadoNombre, #lblLogueado{
        display: none !important;
    }
}

@media screen and (max-width: 700px) {
    #ButtonOpcUsr, #lblLogueadoNombre, #lblLogueado{
        display: none !important;
    }

}
@media  (min-width: 641px)  and (max-width: 1228px){
    .caja-tramites, .titulo-caja-tramites{
        font-size: 1rem !important;
    }
    .opnCardOtros{
        height: auto !important;
    }

}
@media (max-width: 767px) {
    #pnlContenidoIzquiero{
        width: 100% !important;
        text-align: center !important;
        border-radius: 15px;
    }
    .boton-crear-cuenta-v2{
        margin-left: 0px;
    }

    .Terminos{
        margin-left: 30px !important;
        margin-top: -45px !important;
    }
    #pnlLogin{
        width: 100% !important;
        margin-top: 20px !important;
    }
}
.ui-sidebar-left{
    left: unset;
    top: 0;
    right: 0 !important;
    width: 20em;
    height: 100%;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}
.Terminos{
    margin-left: 20px !important;
    margin-top: -40px !important;
}

@media screen and (min-width: 1199px) and (max-width: 1368px) {
    .ui-boton-siguiente {
        height: auto !important;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1117px) {
    .ui-boton-siguiente {
        height: auto !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    /* Estilos CSS para dispositivos con un ancho mínimo de 1024px y un ancho máximo de 1199px (pantallas medianas) */

    .ui-boton-siguiente{
        width: 145% !important;
    }
}

@media screen and (min-width: 1030px) {
    .contenido-general{
        margin: 4% auto 11% !important;
    }
    .recuperar-contraseña{
        margin: 6% auto !important;
    }
}

@media screen and (max-width: 1024px) {
    .contenido-general{
        margin: 4% auto 18% !important;
    }
    .recuperar-contraseña{
        margin: 6% auto !important;
    }
}

@media screen and (max-width: 786px) {
    .modal-responsivo {
        width: 85% !important;
    }
    .contenido-general{
        margin: 5% auto 20% !important;
    }
}
@media screen and (max-width: 720px) {
    .ui-modal{
        width: auto !important;
        padding: 0 !important;
        left: 0 !important;
    }
}
@media screen and (max-width: 500px) {

    .boton-login {
        font-size: 10px !important;
        width: 60% !important;
    }

    .ui-accordion .ui-accordion-header {
        font-size: 18px !important;
        padding: 20px 18px 20px 20px !important;
    }
    .titulo-pf{
        font-size: 20px !important;
    }
    .pf-adicionales{
        font-size: 18px !important;
    }
}

@media (max-width: 1024px){
    /* El "modo tarjetas" del reflow de PrimeFaces (ocultar encabezados, apilar cada
       celda a 100% de ancho) viene incluido en components.css del jar de PrimeFaces,
       fijo en max-width:640px -- eso no se puede tocar porque es un archivo de un
       dependencia externa (primefaces-8.0.jar), no del proyecto. Entre 641px y 1024px
       (tablets, laptops chicas) las columnas de ancho fijo no alcanzan a acomodar el
       contenido y el texto queda partido en varias líneas por celda, encabezados
       cortados letra por letra, etc. -- confirmado en vivo a 768px, en más de una
       pantalla del proyecto (no es exclusivo de una tabla). Estas reglas repiten aquí
       lo mínimo indispensable del "modo tarjetas" de PrimeFaces (activar
       display:block/float:left en las celdas, ocultar thead/tfoot) para que ese modo,
       que ya funciona bien en móvil, arranque antes y cubra también ese rango. */
    .ui-datatable-reflow thead th,
    .ui-datatable-reflow tfoot td {
        display: none;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        text-align: left;
        display: block;
        border: 0 none;
        width: 100%;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
    .ui-datatable-reflow .ui-datatable-data.ui-widget-content {
        border: 0 none;
    }
    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-left: 0 none;
        border-right: 0 none;
    }
    .ui-datatable-reflow tr.ui-datatable-empty-message > td {
        display: block;
        border: 0 none;
    }
    /* .ui-datatable table trae table-layout:fixed (para el redondeado de esquinas),
       y eso le gana al display:block del reflow -- el navegador sigue repartiendo el
       ancho entre las columnas originales (cada celda queda a ~1/6 del ancho real) en
       vez de apilarlas a 100%. Confirmado en vivo: forzar table-layout:auto aquí es lo
       único que corrige el ancho; el display:block por sí solo no alcanza. */
    .ui-datatable-reflow table {
        table-layout: auto !important;
    }
    /* Cualquier p:column con un style="width:NNNpx" (ej. para dejarle espacio a varios
       botones de acción en escritorio) es un estilo en línea -- le gana al width:100%
       del reflow porque ese no trae !important. Sin este !important, la celda se queda
       fija en su ancho de escritorio y su contenido se sale de la pantalla en móvil,
       sin poder hacer scroll para alcanzarlo. Afecta a cualquier tabla con reflow, no
       solo a la de estatus de trámites. */
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] {
        width: 100% !important;
    }
    /* Si esa celda envuelve sus botones en un div flex (patrón usado para la columna
       "Acciones" en varias tablas), que se acomoden en más de una línea en vez de
       desbordarse sin forma de llegar a los que quedan fuera de la pantalla. */
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] > div {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        padding: .4em;
        min-width: 30%;
        display: inline-block;
        margin: -.4em .5em -.4em -.4em;
        color: #009288 !important;
        font-weight: bold
    }
    /* margin/padding además del borde -- el borde solo (pegado al texto) es fácil de
       perder de vista; el espacio en blanco hace la separación entre registros obvia
       incluso si el borde de 1px no se nota. */
    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-bottom: 2px solid #a8a8a8 !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }
    /* Columna del toggler de línea de tiempo (ver EstatusSistemas.xhtml): su headerText
       va vacío a propósito, pero la regla de arriba sigue reservando un 30% de ancho para
       ese título vacío, empujando el ícono hacia la derecha en vez de dejarlo pegado al
       borde izquierdo de la fila. Sin título que mostrar, ocultarlo por completo. */
    .ui-datatable-reflow .ui-datatable-data td.columna-toggler-tramite .ui-column-title {
        display: none;
    }
    .ui-datatable-reflow .ui-datatable-data td.columna-toggler-tramite {
        text-align: left !important;
    }

    /* El paginador de PrimeFaces no envuelve sus partes en pantallas angostas -- el
       reporte "X a Y de Z" y los números de página se aprietan/desbordan junto a los
       íconos de primera/anterior/siguiente/última página, y en la práctica solo se
       alcanzan a ver los íconos, pareciendo que "se perdió" el paginado. */
    .ui-paginator {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }
    .ui-paginator .ui-paginator-current {
        order: -1;
        width: 100%;
        text-align: center;
        margin: 0 0 8px 0 !important;
    }
}

/* Iconos del editor de fila (lápiz/check/cancelar) de p:rowEditor en tablas con
   p:cellEditor. Se agrandan con transform en vez de width/background-size para
   no desalinear el sprite base de PrimeFaces (mismo motivo que el icono de
   búsqueda de los selects). Selector acotado a .ui-row-editor para no afectar
   ningún otro .ui-icon del proyecto. */
.ui-row-editor .ui-icon {
    transform: scale(1.35);
}
.ui-row-editor a {
    margin: 0 3px;
}

@media screen and (max-width: 40em){
    .ui-fileupload-buttonbar .ui-button {
        padding: .1em .1em .1em .1em;
    }
    .ui-fileupload-buttonbar .ui-button .ui-button-text {
        display: flex;
        padding: .3em 1em .3em 2.1em;
    }
}

@media screen and (max-width: 30em){
    .ui-modal-cotejar{
        width: 290px !important;
        padding: 0 5px !important;
    }
    .ui-dialog .ui-dialog-content {
        padding: 0!important;
        width: 100% !important;
        height: 90% !important;
    }
    .ui-dialog-content-items{
        padding: 0 6px !important;
        height: 99% !important;
    }
    .ui-dialog-content-items-ine{
        padding: 0 6px !important;
        height: 99% !important;
    }
    .ui-captcha{
        padding-left: 0 !important;
    }
}
.ui-panelgrid .ui-grid-responsive .ui-grid-row {
    border-top: none;
}
/*
* A continuación, se sobrescriben algunos estilos de Primefaces
*/

/* Estilo para los renglones y columnas del p:panelGrid */
.ui-grid-row .ui-grid-col-4 {
    padding: 0.5em 0;
}

.ui-widget .ui-widget{
    /*font-size: 10px;*/
}

/* Estilo para que los p:outputlabel aparezcan en negritas, por default no son negritas */
.ui-outputlabel {
    font-weight:bold;
    font-family: 'Montserrat', sans-serif !important;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
}
.ui-outputlabel2 {
    font-weight:normal;
    font-size: 22px;
}
/* Estilo sobresscrito para que el área de mensajes no aparezca con margen, por default trae margen de 10px */
.ui-messages-info, .ui-messages-warn, .ui-messages-error, .ui-messages-fatal {
    margin: 0px 0;
}	

.ui-fluid .ui-inputtext , .ui-fluid .ui-password{
    border-radius: 6px;
    border: solid 1px #898d8d;
}

.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfiel{
    box-shadow: none;
    color: #898d8d;
    border: 1px solid #a8a8a8 !important;
}

/* Estilo sobreescrito para que el fondo de legend del componente p:fieldset sea transparente, por default es de color gris*/
.ui-fieldset .ui-fieldset-legend {
    background-color: transparent;
    border-color:  transparent;
    padding: 1;
}

/*Estilo sobreescrito para el relleno de las columnas, por default tienen el valor de 4px 10px*/
.ui-panelgrid .ui-panelgrid-cell{
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 5px;
}

/* Estilo sobrescrito para la posición de los botones de primefaces, por defatult viene como absolute, lo cual provoca que se encime
 a otro componente si este otro componente en el html no se mueve por ejemplo al realizar un scroll. Por ejemplo el header del aplicativo 
*/

#divLogin{
    margin: 20px auto !important;
    align-items: center;
    border-radius: 15px !important;
    box-shadow: 0 0 5px 1px grey !important;
    text-align: center;

}

.titulo-cdmx{
    color: #7f213c;
    font-size: 16px;
    text-align: center;
}

.link-restablecer-pwd{
    color: #6a1c32 !important;
    font-size: 14px !important;
    text-decoration: underline !important;
    font-weight: bold !important;
}

.link-sin-cuenta{
    color: #5d5d5d !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.boton-login {
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff !important;
    background-color: #6a1c32 !important;
}

.lbl-titulo{
    font-size: 22px !important;
    padding-left: 10px !important;
    font-weight: bold;
    line-height: 1.45;
    color: #6a1c32;
}

.titulos-normales{
    font-size: 22px !important;
    font-weight: bold;
    line-height: 1.45;
    color: #6a1c32;
}

.etiqueta{
    font-size: 12px !important;
    line-height: 1.33 !important;
    letter-spacing: 0.2px !important;
}

.boton-guardar{
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: normal;
    text-align: center;
    padding-bottom: 5px;
    color: #ffffff !important;
    background-color: #6a1c32 !important; 
    border-radius: 2px !important;
}

.boton-regresar{
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: normal;
    text-align: center;
    padding-bottom: 5px;
    color: #ffffff !important;
    background-color: #888c8c  !important;
    border-radius: 2px !important;
}

.boton {
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff !important;
    background-color: #7D1341 !important;
    border-radius: 10px !important;
}
.boton-b {
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff !important;
    background-color: #6a1c32 !important;
    border: none !important;
    border-radius: 2px !important;
}
.ui-button{
    border-radius: 6px;
    width: 210px;
    border: none !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
    text-shadow: none;
}

.ui-button .ui-button-text{
    line-height: 1.5 ;
    text-align: center;
}

.ui-state-default {
    box-shadow: none;
}

.ui-button-text-only .ui-button-text{
    padding: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
    border: 1px solid #a8a8a8;
    background: none;
}

.ui-paginator .ui-paginator-pages .ui-state-active {
    background-color: #BC955C;
    color: #fff;
}

.ui-paginator .ui-paginator-pages .ui-state-hover {
    background-color: #6A1C32;
    color: #fff;
}

.ui-paginator.ui-paginator-bottom {
    background-color: #ffffff !important;
    border: none !important;
}

.ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-last, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev{
    opacity: 1 !important;
    border: none !important;
}

.ui-paginator .ui-state-hover {
    background-color: #6A1C32;
}

.ui-paginator .ui-state-hover .ui-icon {
    background-color: #FFF;
}

.ui-icon-seek-first{
    /*    background-image: url(/resources/img/primer2.svg) !important;
        background-position: 0;
        background-size: 15px;*/
    background-color: #8B1232;
    -webkit-mask: url("/resources/img/primer2.svg") no-repeat center;
    -webkit-mask-size: 8px;
    mask: url("/resources/img/primer2.svg") no-repeat center;
    mask-size: 16px;
    background-image: none !important;
}
.ui-icon-seek-prev {
    /*    background-image: url(/resources/img/last2.svg) !important;
        background-position: 0;
        background-size: 8px;*/
    background-color: #8B1232;
    -webkit-mask: url("/resources/img/last2.svg") no-repeat center;
    -webkit-mask-size: 8px;
    mask: url("/resources/img/last2.svg") no-repeat center;
    mask-size: 10px;
    background-image: none !important;
}

.ui-icon-seek-next {
    /*    background-image: url(/resources/img/next2.svg) !important;
        background-position: 0;
        background-size: 8px;*/
    background-color: #8B1232;
    -webkit-mask: url("/resources/img/next2.svg") no-repeat center;
    -webkit-mask-size: 8px;
    mask: url("/resources/img/next2.svg") no-repeat center;
    mask-size: 10px;
    background-image: none !important;
}

.ui-icon-seek-end {
    /*    background-image: url(/resources/img/ultimo2.svg) !important;
        background-position: 0;
        background-size: 15px;*/
    background-color: #8B1232;
    -webkit-mask: url("/resources/img/ultimo2.svg") no-repeat center;
    -webkit-mask-size: 8px;
    mask: url("/resources/img/ultimo2.svg") no-repeat center;
    mask-size: 16px;
    background-image: none !important;
}

.ui-tabs .ui-tabs-nav .ui-tabs-header {
    border-start-end-radius: 15px;
    border-start-start-radius: 15px;
}

.ui-tabs .ui-tabs-nav .ui-tabs-selected {
    background-color: #BC955C;
}

.ui-tabs .ui-tabs-nav .ui-tabs-selected a {
    font-weight: 500;
    color: #fff;
}

.ui-tabs .ui-tabs-nav .ui-state-hover {
    background-color: #6A1C32;
}

.ui-tabs .ui-tabs-nav .ui-state-hover a {
    color: #fff;
}

.header-columna{
    color: #6d1337bf !important;
    font-weight: 300 !important;
    padding: 1% !important;
}
table {
    display: table;
    border-spacing: 0;
    border-collapse: separate !important;
    border-bottom-color: grey !important;
    border-radius: 10px;
    align-content: center;
}

.ui-tabla{
    align-content: center;
    align-items: center;
    text-align: center;
    border: none !important;
    width: 100%;
    margin: 0 auto;
}

/* 1. Cambio global para permitir redondeado en todas las tablas */
.ui-datatable table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* 2. Redondear esquinas izquierdas del primer TH de cualquier tabla */
.ui-datatable thead th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

/* 3. Redondear esquinas derechas del último TH de cualquier tabla */
.ui-datatable thead th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* 4. Estilo de limpieza para el encabezado global */
.ui-datatable thead th {
    border: none !important;
    background-color: #6D13371F !important; /* Mismo fondo guinda tenue de tu configuración */
    padding: 10px !important;
}
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th{
    border-style: none !important;
}

.ui-modal{
    border-radius: 20px !important;
    background: #ffffff !important;
    text-decoration: none;
}

.ui-widget-content{
    border: none !important;
}
.ui-widget-header{
    background: none !important;
    border: none;
}

.ui-icon-closethick {
    background-repeat: no-repeat;
    width: 24px ;
    height: 25px ;
    background-position: 0 !important;
}
.ui-dialog .ui-dialog-titlebar {
    padding: 1px !important;
}
.ui-dialog .ui-dialog-content {
    padding: 0!important;
}

.ui-panelgrid .ui-panelgrid-cell .regla {
    padding-top: 0 !important;
}

.textos{
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.43 !important;
    text-align: center !important;
    color: #5d5d5d !important;
    padding-left: 10px !important;
}

.textos-indicacion-mediano{
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.43 !important;
    text-align: center !important;
    color: #5d5d5d !important;
}

.textos-indicacion{
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.43 !important;
    text-align: center !important;
    color: #5d5d5d !important;
}

.texto-salida{
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.43 !important;
    text-align: center !important;
    color: #5d5d5d !important;
}

.ui-icon-plusthick {
    width: 20px !important;
    height: 16px !important;
    background-position: 0 !important;
    background-image: url(/resources/img/group-7.png) !important;
}

.boton-descargar {
    height: 45px !important;
    width: 220px !important;
    padding: 7px;
    border-radius: 5px;
    color: white !important;
    background-color: #6a1c32 !important;
    font-size: 15px !important;
    background-image: url(/resources/img/adjunto.svg) !important;   
    background-size: 27px 30px !important;
    background-repeat: no-repeat !important;   
    background-position-x: 10px !important;
    background-position-y: 6px !important;
}

.fileupload-buttonbar-ine{
    color: white !important;
    background-image: none !important;
    border: 0 !important;
    padding: 1px 0 !important;
    border: 0 !important; 
    display: block; 
    width: 100% !important;
    height: 100% !important;
}

.ui-button-text-icon-left .ui-button-text {
    padding: 0 .4em .0 2.1em !important;
    text-align: right;
    font-weight: normal !important;
}

.bandera-si-no{
    position: relative !important;
    top: 3px !important;
    right: 175px !important;
}

.agregar{
    position: relative !important;
    top: 5px !important;
}

.verificado{
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: .5 !important;
    text-align: center !important;
    color: #6a1c32 !important;
}

.noVerificado{
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1.43 !important;
    text-align: center !important;
    color: #e02020 !important;
}

.bandera-verificado{
    background-image: url("/resources/img/bien.png") !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background-origin: content-box !important;
}

.bandera-sin-fondo{
    background: none;
}

.bandera-noVerificado{
    background-image: url("/resources/img/mal.png") !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background-origin: content-box !important;
}

.buscar-usuario-txt{
    background-image: url("/resources/img/buscar.png") !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background-origin: content-box !important;
}

.contenido-general{
    padding: 1% 2%; 
    margin: 4% auto 13%;
}

.contenido-general-usuarios{
    padding: 1% 2%; 
    margin: 0 auto;
}

.contenido-general-perfil{
    padding: 1% 2%;
}

.texto-modal-verificado{
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: 1.43 !important;
    text-align: center !important;
    color: #5d5d5d !important;
}

.stilo-fila{
    color: #5d5d5d;
}

.ui-outputlabel.ui-state-error {
    border: 0 none;
}
.ui-outputlabel.ui-state-error{
    border: none !important;
    background: none !important;
    color: #cd0a0a !important;
}
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error{
    background: #fef1ec url(/javax.faces.resource/images/ui-bg_inset-soft_95_fef1ec_1x100.png.xhtml?ln=primefaces-aristo) 50% bottom repeat-x;
    background: #fef1ec linear-gradient(top,rgba(255,255,255,0.8),rgba(255,255,255,0));
    background: #fef1ec -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(255,255,255,0)));
    background: #fef1ec -moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(255,255,255,0));
    background: none !important;
    border-color: #cd0a0a;
}
.ui-fluid .ui-selectonemenu {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 6px;
}

.ui-fluid .ui-selectonemenu .ui-selectonemenu-trigger {
    width: 32px;
    padding: 0 6px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: none !important;
    background: #FFF;
}

.ui-fluid .ui-selectonemenu .ui-selectonemenu-trigger{
    border-radius: 10px !important;
}

/* =========================================================
   PRIMEFACES SELECTONEMENU - BASE
   ========================================================= */

/* Contenedor principal */
.ui-selectonemenu{
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #d5d9dd;
    background: #f5f5f5;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
}

/* Estado focus (cuando abres o enfocas) */
.ui-selectonemenu.ui-state-focus,
.ui-selectonemenu.ui-state-hover{
    border-color: #b8bfc7;
    box-shadow: none;
}

/* Label (texto seleccionado) */
.ui-selectonemenu .ui-selectonemenu-label{
    display: block;
    width: 100%;
    padding: 10px 44px 10px 12px;  /* deja espacio al trigger */
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box;

    /* Ellipsis (valor seleccionado) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 15px;
    font-weight: 600;
    color: #495057;
    line-height: 1.2;
}

/* Trigger (flecha) */
.ui-selectonemenu .ui-selectonemenu-trigger{
    width: 40px;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ícono del trigger */
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Disabled */
.ui-selectonemenu.ui-state-disabled{
    opacity: .65;
    cursor: not-allowed;
}

/* =========================================================
   PANEL (DROPDOWN)
   ========================================================= */

/* Panel general */
.ui-selectonemenu-panel{
    border-radius: 10px;
    border: 1px solid #d5d9dd;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    box-sizing: border-box;
    padding: 8px;
    /* Sin esto, en móvil el panel (calculado por JS a partir del trigger)
       puede quedar más ancho que el viewport y salirse por ambos lados. */
    max-width: calc(100vw - 20px) !important;
}

/* IMPORTANTE: evita el “panel gigante” cuando está en modal */
.ui-dialog .ui-selectonemenu-panel{
    max-width: calc(100% - 24px) !important;
}

/* Wrapper scroll */
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper{
    overflow: auto;
    max-height: 220px;             /* ajusta si quieres */
    border-radius: 8px;
}

/* Filtro */
.ui-selectonemenu-panel .ui-selectonemenu-filter-container{
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 8px 0;
    display: block;
    position: relative;
}

.ui-selectonemenu-panel .ui-selectonemenu-filter{
    width: 100%;
    box-sizing: border-box;
    border-radius: 30px;
    border: 1px solid #d5d9dd;
    padding: 10px 40px 10px 16px; /* espacio para icono search */
    outline: none;
    font-size: 14px;
    transition: border-color .15s ease;
}

.ui-selectonemenu-panel .ui-selectonemenu-filter:focus{
    border-color: #b8bfc7;
    box-shadow: none;
}

/* Icono búsqueda -- selector igual de específico que
   .ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon
   (la regla base de PrimeFaces que fijaba top/right en píxeles), para que
   esta gane sin afectar ningún otro .ui-icon-search fuera del filtro.
   Se reemplaza el sprite PNG base por el SVG de lupa propio (no escala
   bien un sprite agrandándolo), en gris neutro en vez de su vino default. */
.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon-search{
    position: absolute !important;
    top: 45% !important;
    right: 14px !important;
    left: auto !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("/resources/img/icons/icon_Lupa.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    transform: translateY(-50%);
    opacity: .6;
    filter: grayscale(1);
}

/* Lista */
.ui-selectonemenu-panel ul.ui-selectonemenu-items{
    width: 100% !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Item base */
.ui-selectonemenu-panel li.ui-selectonemenu-item{
    display: block;                /* clave para ellipsis */
    width: 100%;
    box-sizing: border-box;

    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 8px;
    cursor: pointer;

    font-size: 14px;
    color: #3d444a;

    /* Ellipsis en opciones */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 24px;           /* evita que se coma el scroll */
}

/* Hover */
.ui-selectonemenu-panel li.ui-selectonemenu-item:hover{
    background: rgba(0,0,0,.05);
}

/* Seleccionado (highlight) */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    text-shadow: none;
}

.ui-selectonemenu-panel li.ui-state-highlight{
    background: rgba(128, 0, 64, .15); /* ajusta a tu color institucional */
    color: #2a2f33;
}

/* =========================================================
   SCROLLBAR (opcional, solo webkit)
   ========================================================= */
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper::-webkit-scrollbar{
    width: 10px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: rgba(0,0,0,.25);
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper::-webkit-scrollbar-track{
    background: rgba(0,0,0,.05);
}

/*sobreescrito el estilo del inputmask */
.ui-fluid .ui-inputmask {
    width: 100%;
    border-radius: 6px !important;
}

/*estilo paro campos de tablas*/
.campo-tablas{
    font-family:'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    white-space: pre-wrap !important;
    font-weight: normal !important;
    font-stretch: normal !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    color: #000 !important;
}
.iu-state-focus{
    box-shadow: 0 0 8px #b17a45db !important;
}
.recuperar-contraseña{
    margin: 4% auto;
    align-items: center;
    text-align: center;
}

.lbl-registro-concluido{
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.43 !important;
    letter-spacing: 0.5px !important; 
    color: #000 !important;
}

/* Estilo sobresscrito para que el p:menubar no aparezca con espacio de relleno, por default trae .3m
   También se sobrescribe el tamaño de la letra ya que por default trae 1m
*/
.ui-menu {
    width: 14.5em;
    padding: 0;
    font-size: 12px;
}

/*Stilo que sobreescribe el menu-item */
.ui-menu.ui-menu-dynamic {
    position: absolute;
    display: none;
    z-index: 100000;
    background: none;
    box-shadow: none !important;
    border: none !important;
}

.ui-menu .ui-menu-list .ui-menuitem {
    border: none;
    background: none !important;
    border-radius: 10px;
    height: 35px;
    background-color: #ffffff !important;
}

.ui-menu .ui-menuitem-text {
    font-size: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.ui-menu.ui-shadow{
    border-radius: 20px !important;
}

.ui-menubutton .ui-button {
    margin: 0;
    border: none !important;
    width: 40px !important;
}

/* ================================
   ACCOUNT MENU (overlay popup)
   ================================ */

.account-menu-button{
    background: #ffffff42;
    border-radius: 50px;
    margin-left: 5px;
    transition: background .15s ease;
}
.account-menu-button:hover,
.account-menu-button:focus-visible{
    background: #ffffff73 !important;
}

.account-menu.ui-menu.ui-menu-dynamic{
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    border-radius: 14px !important;
    padding: 10px !important;
    min-width: 230px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18) !important;
    box-sizing: border-box;
}

/* Reset UL */
.account-menu .ui-menu-list{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Cada item: renglón de ancho completo, no una "pastilla" centrada.
   ".ui-menu .ui-menu-list .ui-menuitem" (regla genérica de este mismo
   archivo) le pone "height: 35px" fijo a TODO item de menú, pensado para
   una sola línea de texto: con textos largos que se van a 2 líneas
   ("Asignar Vistas a Usuarios"), la segunda línea se salía de esa caja
   fija y quedaba fuera del highlight. Por eso aquí se fuerza altura
   automática con un mínimo, en vez de una altura fija. */
.account-menu .ui-menuitem{
    height: auto !important;
    min-height: 35px;
    margin: 4px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
.account-menu .ui-menuitem:first-child{
    margin-top: 0 !important;
}
.account-menu .ui-menuitem:last-child{
    margin-bottom: 0 !important;
}

/* Área clickeable completa */
.account-menu .ui-menuitem-link{
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    min-height: 35px;
    box-sizing: border-box;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background .12s ease;
    line-height: 1.3;
}

/* Texto: a la izquierda, no heredar el text-align:center de la página */
.account-menu .ui-menuitem-text{
    font-size: 14px !important;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif !important;
    color: #2f3337 !important;
    text-align: left !important;
    width: 100%;
}

/* Hover / activo / foco por teclado: highlight sólido de ancho completo */
.account-menu .ui-menuitem-link:hover,
.account-menu .ui-menuitem-link:focus-visible,
.account-menu .ui-menuitem.ui-state-hover > .ui-menuitem-link,
.account-menu .ui-menuitem.ui-state-active > .ui-menuitem-link{
    background: #6a1c32 !important;
}
.account-menu .ui-menuitem-link:hover .ui-menuitem-text,
.account-menu .ui-menuitem-link:focus-visible .ui-menuitem-text,
.account-menu .ui-menuitem.ui-state-hover > .ui-menuitem-link .ui-menuitem-text,
.account-menu .ui-menuitem.ui-state-active > .ui-menuitem-link .ui-menuitem-text{
    color: #fff !important;
}

/* Separador entre grupos: aire arriba/abajo para que se note como
   división, no como una línea pegada entre dos items, y un tono más
   suave (acorde a la paleta de tarjetas de la app) en vez del gris
   genérico #DDDDDD que trae por default. */
.account-menu .ui-separetor-menu{
    margin: 6px 10px !important;
    border-bottom: 1px solid #f0e6e8 !important;
}

/* "Cerrar sesión" es una acción distinta (salir), no una opción de
   configuración más: se distingue con el mismo rojo que ya usa el resto
   de la app para acciones de peligro/salida (.boton-actividad-peligro). */
.account-menu .menu-item-peligro .ui-menuitem-text{
    color: #c52222 !important;
}
.account-menu .menu-item-peligro.ui-state-active > .ui-menuitem-link,
.account-menu .menu-item-peligro > .ui-menuitem-link:hover,
.account-menu .menu-item-peligro > .ui-menuitem-link:focus-visible{
    background: #c52222 !important;
}
.account-menu .menu-item-peligro > .ui-menuitem-link:hover .ui-menuitem-text,
.account-menu .menu-item-peligro > .ui-menuitem-link:focus-visible .ui-menuitem-text{
    color: #fff !important;
}

/* Opcional: efecto suave al abrir */
.account-menu{
    animation: fadeMenu .12s ease-out;
}

@keyframes fadeMenu{
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ui-state-hover{
    border: solid .5px;
    background: rgb(255,255,255,0) ;
    box-shadow: none !important;
}

.ui-widget :active{
    outline:none !important
}

.ui-state-focus{
    border: none !important;
    box-shadow: none !important;
}

:focus {
    /*outline: -webkit-focus-ring-color auto 0 !important;*/
}

.ui-icon-triangle-1-s {
    background-position: -64px 0px;
}

.ui-icono-salir{
    left: 115px;
    background-position-x: -95px;
    background-position-y: -368px;
}

.etiqueta-logueo{
    width: 81px;
    height: 20px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.54;
    letter-spacing: normal;
    text-align: right;
    color: #6a1c32;

}
.etiqueta-logueo2{
    font-size: 16px !important;
    color: #6a1c32 !important;
    font-weight: bold;
}

.icono-login {
    position: relative !important;
    top: 5px !important;
    left: -5px;
}

.ui-datatable .ui-datatable-data tr.ui-state-hover{
    background: rgb( 177, 129, 71, 0.1) !important;
}

.ui-datatable tr.ui-state-highlight {
    text-shadow: none;
    width: 95% !important;
    box-shadow: 1px 5px 10px #a8a8a8 !important;
}
.fa {
    left: 130px;
    font-family: 'Montserrat', sans-serif !important;
}

.ui-datatable-tablewrapper {
    padding-bottom: 0.3em !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}
.ui-fluid .ui-fileupload .ui-button {
    width: 100% !important;
}

.ui-dialog-content-items{
    padding: 0 50px;
}

.ui-dialog-content-items-ine{
    padding: 0 10px;
}

.ui-logueo-componentes{
    margin: 0 0 !important;
    display: inline-block !important;
    width: 100% !important;
}

.ui-captcha{
    padding-left: 0.5em;
}

.requerido{
    color: #e02020 !important;
}

/*Calendar*/
.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
    background-color: #ffffff !important;
    border: 1px solid #0f4c42 !important;
}

.ui-fluid .ui-calendar input{
    border-radius: 6px;
}
.ui-corner-left{
    border-radius: 6px !important;
}
.padding-more{
    padding-left: 10px !important;
}

.ui-growl-item-container {
    background: #d9edf7;
    color: #3a87ad ;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: .95 !important;
}

.ui-growl .ui-growl-item-container.ui-growl-error{
    background-color: #f8b7bd;
    border: 0 none;
    color: #212121;
}

.ui-growl .ui-growl-item-container.ui-growl-warn{
    color: #c09853;
    background-color: #fcf8e3;
}

.ui-growl-icon-close {
    cursor: pointer;
    width: 21px!important;
    height: 16px !important;
    background-position: -93px -129px !important;
    background-repeat: no-repeat !important;
}

.ui-datatable .ui-sortable-column-icon {
    background-color: #fff;
    border-radius: 15px;
    width: 17px;
}

.ui-icon-triangle-1-n {
    background-position: 1px -1px !important;
}

.ui-panel-sin-pading .ui-panelgrid-cell { 
    padding: 5px 0 !important;
}

.ui-panel-no-pading .ui-panelgrid-cell { 
    padding: 0 !important;
}

.ui-accordion .ui-accordion-header {
    padding: 20px 18px 20px 30px;
    border: none !important;
    font-size: 22px;
    color: #b17a45 !important;
    font-weight: 600 !important;
}

.ui-accordion .ui-accordion-header .ui-icon {
    right: .5em !important;
    left: auto !important;
    margin: 0 0 0 5px;
    top: 40% !important;
}

.ui-helper-reset {
    border-radius: 8px !important;
}

.ui-chkbox .ui-chkbox-label {
    display: inline !important;
}

.ui-panelgrid-sin-pading .ui-panelgrid-cell {
    padding: 0 !important;
}

.ui-panelgrid-campos-ine .ui-panelgrid-cell {
    padding: 5px 0 5px 0 !important;
}

.ui-dataview .ui-dataview-header{
    display: none !important;
}

.ui-message-info-detail, .ui-message-warn-detail, .ui-message-error-detail, .ui-message-fatal-detail {
    margin-left: 0 !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
}

.ui-tabla-docs .ui-paginator.ui-paginator-bottom {
    background-color: #ffffff !important;
    border: none !important;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.ui-tabla-docs .ui-datatable-tablewrapper {
    padding-bottom: 0.2em !important;
    overflow: hidden !important;
    border-bottom: none !important;
}

.ui-tabla-docs thead th{
    text-align: left !important;
    background-color: #b18147 !important;
    font-size: 14.6px;
    vertical-align: top;
    color: #fff !important;
    padding: 2% 1%;
    font-weight: 600 !important;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.ui-tabla-docs th:first-child {
    border-top-left-radius: 8px !important;
}

.ui-tabla-docs th:last-child {
    border-top-right-radius: 8px !important;
}

.ui-tabla-docs tbody tr {
    border-bottom: 2px solid #e7e7e7 !important;
    border-left: 2px solid #e7e7e7 !important;
    border-right: 2px solid #e7e7e7 !important;
}

.ui-tabla-docs tbody td{
    padding: 2% 1% !important
}

.ui-tabla-docs table{
    border-radius: 7px !important;
}
.ui-fileupload-files {
    width: 100%;
}
.ui-fileupload-content .ui-progressbar {
    width: 150px !important;
    border: 1px solid #e9ecef !important;
}
.ui-fileupload-row>.ui-fileupload-filename {
    display: none !important;
}

.ui-fileupload-row>div {
    padding: 4px 5px !important;
}
.ui-chkbox .ui-chkbox-label {
    display: inline !important;
}

.ui-msg-concluido .ui-message-info-detail, .ui-msg-concluido .ui-message-warn-detail, .ui-msg-concluido .ui-message-error-detail, .ui-msg-concluido .ui-message-fatal-detail{
    font-size: 1.5rem !important;
}

.ui-msg-cuentaverificad .ui-message-info-detail, .ui-msg-concluido .ui-message-warn-detail, .ui-msg-concluido .ui-message-error-detail, .ui-msg-concluido .ui-message-fatal-detail{
    font-size: 1.2rem !important;
    border-left: 2px !important;
}

#pnlBienvenido{
    text-align: center !important;
}
#lblBienvenido{
    text-align: center !important;
}

.infoBienvenido{
    text-align: center !important;
}

placeholder{
    color: #00000075 !important;
}
#pgNoRecuerdoUsuario{
    margin-left: 17px !important;
}
#pgPassword{
    margin-left: 17px !important;
}
::-webkit-input-placeholder { /* Para navegadores webkit (Chrome, Safari, etc.) */
    color: #0000006b !important; /* Color del texto */

}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
    .PanelLogin{
        display: inline !important;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px){
    .PanelLogin{
        margin-top: 30px !important;
    }
    #pnlContenidoIzquiero {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-right: 0px !important;
    }
    #pnlContenidoInformativo{
        width: 50% !important;
    }
    .PanelLoginClass{
        width: 50% !important;
    }
}
@media screen and (min-width: 40.063em){

}
@media only screen and (min-width: 768px) and (max-width: 1024px){
    .PanelLogin{
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 0% !important;
        height: auto !important;
    }
    .PanelLoginClass{
        width: 60% !important;  /*NO QUITAR */

    }
    #pnlContenidoIzquiero {
        width: 60% !important;
        justify-content: center !important;
        margin-right: 0px !important;
        border: none;
        border-start-end-radius: 15px !important;
        border-start-start-radius: 15px !important;
    }
    #pnlContenidoInformativo{
        width: 60% !important;
        margin-top: 50px !important;
    }
    #pnlLogin{
        width: 100% !important;
        margin-top: 20px !important;
    }
}
.ui-fileupload-responsive .ui-widget-content {
    background-color: transparent; 
}

.ui-datatable-reflow .ui-reflow-dropdown {
    background-color: white;
    border: 1px solid #a8a8a8;
    border-radius: 5px;
    padding: 4px;
    height: 38px;
    width: 100%;
    margin: 0 0 5px 0;
}

.menu-barra ul li {
    width: 100% !important;
    text-align: center;
}
.menu-barra > ul{
    display: flex;
    justify-content: space-between;
}

.input-label-style {
    font-size: 0.9rem;
    font-weight: 500;
    color: #4a4a4a;
    margin-top: 15px;
    margin-bottom: 5px;
    display: block;
}

.input-field-style .ui-inputfield,
.input-field-style .ui-selectonemenu {
    width: 100% !important;
    padding: 0 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 8px !important;
    font-size: 0.95rem;
    color: #333;
    height: 40px !important;
}

.input-field-style .ui-inputfield {
    padding: 8px 12px !important;
}


.text-area-style {
    height: 80px !important;
    resize: vertical !important;
}

.custom-file-upload .ui-fileupload-simple .ui-button {
    background-color: #f7f7f7 !important;
    border: 1px solid #d0d0d0 !important;
    color: #4a4a4a !important;
    border-radius: 8px !important;
    padding: 10px;
    width: 100%;
    text-align: center;
}

.file-upload-info {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10px;
}

.btn-primary-style {
    max-width: 100%;
    min-height: 45px;
    border-radius: 8px !important;
    background-color: #901645 !important;
    border: none !important;
    font-size: 1rem;
    font-weight: 600;
    color: #fff !important;
    padding: 0 20px;
}

.btn-secondary-style {
    max-width: 100%;
    min-height: 45px;
    border-radius: 8px !important;
    background-color: #6c757dc2 !important;
    border: none !important;
    font-size: 1rem;
    font-weight: 500;
    color: #fff !important;
    padding: 0 20px;
}

.ui-inputfield:focus, .ui-selectonemenu:focus {
    border-color: #901645 !important;
    box-shadow: 0 0 5px rgba(144, 22, 69, 0.5) !important;
}

#frmMenu\:ButtonOpcUsr_button .ui-icon {
    display: none;
}

#frmMenu\:ButtonOpcUsr_button {
    content: '';
    background-image: url('/resources/img/flechaArriba.png');
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.stats-border {
    border-right: 2px solid #a8a8a8;
}

@media screen and (max-width: 991px) {
    .stats-border {
        border-right: none;
        border-bottom: 2px solid #a8a8a8;
    }
}