@charset "UTF-8";

/* Colocar aquí SOLO estilos que puedan ser reutilizados en diferentes pantallas.
   Si son estilos que solo se usarán en un xhtml en particular es mejor colocarlos en el propio xhtml o un un .css particular */

:root {
    --color-rojo-principal: #9F2241;
    --seleccion-dorado: #BC955C;
}

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

.ui-panelgrid-sin-fondo {
    background: none !important;
}

.encabezado-form{
  font-size: 1.2rem !important;
  color: #9F2241 !important;
  font-weight: bold !important;
  padding: 0px 0px 0px 1.25rem !important;
}

.button {
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}

/* Botón Cancelar */
.button-cancel {
    background-color: transparent  !important;
    color: #a22035 !important;/* Rojo oscuro */
    border-color: #a22035 !important;;
}

.button-cancel:hover {
    background-color: #a22035;
    color: white;
}

/* Botón Siguiente */
.button-next {
    background-color: #a22035 !important; /* Rojo oscuro */
    color: white !important;
    border-color: #a22035 !important;
}

.button-next:hover {
    background-color: #870026; /* Un rojo más oscuro */
}

.lbl-text {
    color: #55585A !important;
    font-family: Montserrat !important;
    font-size: 1rem !important;
}

.lbl-subtitle {
    color: #55585A !important;
    font-family: Montserrat !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/*inputs*/
.custom-input {
    /*border: 1px solid #55585A !important;*/
    border: 1px solid #A4A4A4 !important;
    color: #55585A !important;
    font-family: Montserrat !important;
    font-size: 16px !important;
    border-radius: 5px;
    background-color: #F9F9F9;
}

/*Selects*/
.custom-select {
    border: 1px solid #A4A4A4 !important;
    border-radius: 5px !important;
    font-family: Montserrat !important;
    font-size: 16px !important;
    color: #55585A !important;
    height: 40px !important;
}

/*Selects*/
.custom-select .ui-selectonemenu-trigger .ui-icon {
    color:  #9F2241 !important; /* Color de la flecha */
}

/*radion*/

.label-p {
    margin: 0px !important;
    padding: 0px !important;
    display: inline-block !important;
}


.ui-state-active .ui-radiobutton-box {
    background: #FFFFFF !important;
    border-color: #000000 !important;
}

.ui-radiobutton-box {
    border-color: #000000 !important;
}

.ui-state-active .ui-radiobutton-box {
    background: var(--seleccion-dorado) !important;
    border-color: #000000 !important;
}

.ui-radiobutton-icon {
    background-color: #FFFFFF !important;
}

/*estilos para selectOneRadio*/
body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
  background: none !important;
  background-color: var(--seleccion-dorado) !important;
}

/*estilos para selectOneRadio*/
.ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon {
                color: var(--seleccion-dorado) !important;
}

/*estilos para selectOneRadio*/
.ui-radiobutton .ui-radiobutton-box.ui-state-active {
                background-color: var(--seleccion-dorado) !important;
                border-color: #000000 !important;
}

.ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
            background: var(--seleccion-dorado) !important;;
 }

.ui-datepicker-trigger {

    color: var(--color-rojo-principal) !important;
    font-size: 18px; /* Ajusta el tamaño si es necesario */
}

.ui-datepicker-trigger.ui-button {
    background-color: transparent !important;
    border: 1px solid #ced4da !important;
}

/*botones*/

.button-cancelar {
    background-color: #ffffff !important;
    color: var(--color-rojo-principal) !important;
    border: 2px solid var(--color-rojo-principal) !important;

    text-align: center;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    margin: 10px !important;
    font-size: calc(14px + 0.5vw) !important; /* Aumenta proporcionalmente al ancho de la pantalla */
    width: min(150px, 40%); /* Nunca supera 150px, pero se adapta a 40% del contenedor */
    padding: calc(5px + 0.3vw) calc(10px + 0.5vw); /* Se adapta en padding */
}


.button-siguiente {
    background-color:var(--color-rojo-principal) !important;
    color: #ffffff !important;
    border: 2px solid var(--color-rojo-principal) !important;
    text-align: center;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    margin: 10px !important;
    font-size: calc(14px + 0.5vw) !important; /* Aumenta proporcionalmente al ancho de la pantalla */
    width: min(150px, 40%); /* Nunca supera 150px, pero se adapta a 40% del contenedor */
    padding: calc(5px + 0.3vw) calc(10px + 0.5vw); /* Se adapta en padding */
}

.button-siguiente-static {
    background-color:var(--color-rojo-principal) !important;
    color: #ffffff !important;
    border: 2px solid var(--color-rojo-principal) !important;
    text-align: center;
    border-radius: 8px !important;
    margin: 10px !important;
    font-size: 2rem;
    width: 7rem !important;
    padding: calc(5px + 0.3vw) calc(10px + 0.5vw); /* Se adapta en padding */
}

.button-cancelar-static {
    background-color: #ffffff !important;
    color: var(--color-rojo-principal) !important;
    border: 2px solid var(--color-rojo-principal) !important;
    text-align: center;
    border-radius: 8px !important;
    margin: 10px !important;
    font-size: 2rem;
    width: 7rem !important;
    padding: calc(5px + 0.3vw) calc(10px + 0.5vw); /* Se adapta en padding */
}

.button-cancelar-carga {
    background-color: #ffffff !important;
    color: #266CB4 !important;
    border: 2px solid #266CB4 !important;
    text-align: center;
    border-radius: 8px !important;
    margin: 10px !important;
    font-size: 2rem;
    width: 7rem !important;
    padding: calc(5px + 0.3vw) calc(10px + 0.5vw); /* Se adapta en padding */
}

.btn-regresar {
    background: none !important;
    border: none !important;
    color: #266CB4 !important;
    font-family: Montserrat !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-size: 20px !important;
    width: 150px !important;
    background-image: url('/resources/img/arrow_left.png') !important;
    background-repeat: no-repeat !important;
    background-position: left 10px !important;
    background-size: 20px 20px !important;
}

.btn-rojo-revert{
    color: var(--color-rojo-principal) !important;
    background-color: white!important;
    border: 1px solid var(--color-rojo-principal) !important;
    font-family: Montserrat !important;
    font-weight: 600 !important;
    font-style: SemiBold !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
}

/*paginador*/
/* Estilos para la cabecera */
.ui-datatable thead th {
    background-color: #F5E9EC !important;
    color: #55585A !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 10px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estilos para las celdas de datos */
.ui-datatable tbody td {
    background-color: transparent !important; /* Gris oscuro */
    color: #55585A !important; /* Texto en blanco para mejor legibilidad */
    padding: 10px !important;
    text-align: center !important;
    border: 1px solid #333 !important; /* Opcional: añade bordes entre celdas */
}

/* Quita bordes de la tabla */
.ui-datatable {
    border: none !important;
}

/* Opcional: Estilo alternativo de filas */
.ui-datatable tr:nth-child(even) td {
    background-color: #3A3A3A !important; /* Un gris aún más oscuro para filas pares */
}

.search-container {
    position: relative !important;
    width: 40% !important;
    display: flex;
    align-content: flex-end;
}

.ui-input-icon-left {
    width: 100% !important;
}


/** cuadro de busqueda
*/

.search-input {
    width: 25rem !important;
    padding: 10px 10px 10px 35px !important; /* Espacio para el icono */
    font-size: 14px !important;
    border: 1px solid #55585A !important;
    background: #FFF !important;
    text-transform: uppercase;
}

.search-input:focus {
    border-bottom: 2px solid #8B0000 !important; /* Cambio de color al enfocar */
    box-shadow: none !important;
    outline: none !important;
}

.search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: gray !important;
    font-size: 16px !important;
    margin-top: 1.5rem !important;
}

/**
FIN CUADRO DE BUSQUEDA
 */


/* Cambia el color de las flechas del paginador */
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next {
    color: #9F2241 !important; /* Color personalizado */
    font-size: 18px !important; /* Ajustar tamaño si es necesario */
}

/* Cambia el color al pasar el mouse */
.ui-paginator .ui-paginator-prev:hover,
.ui-paginator .ui-paginator-next:hover {
    color: #7F1A32 !important; /* Un tono más oscuro al hacer hover */
}

/* Ubica el paginador en la esquina inferior derecha */
.ui-paginator {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 20px !important; /* Ajusta la distancia del borde derecho */
}

/* Color de las flechas del paginador */
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-last {
    color: #9F2241 !important; /* Color personalizado */
    font-size: 18px !important;
}

/* Cambia el color de las flechas al pasar el mouse */
.ui-paginator .ui-paginator-prev:hover,
.ui-paginator .ui-paginator-next:hover,
.ui-paginator .ui-paginator-first:hover,
.ui-paginator .ui-paginator-last:hover {
    color: #7F1A32 !important; /* Un tono más oscuro */
}

/* Ubica el paginador en la esquina inferior derecha */
.ui-paginator {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 20px !important;
}

/* Hace que el número activo sea transparente */
.ui-paginator .ui-state-active {
    background: transparent !important;
    color: #9F2241 !important; /* Color del texto */
    border: 2px solid #9F2241 !important; /* Borde del número activo */
    box-shadow: none !important;
}

/* Cambia el color del número activo al pasar el mouse */
.ui-paginator .ui-state-active:hover {
    background: rgba(159, 34, 65, 0.1) !important; /* Ligero fondo al hacer hover */
}

.ui-paginator .ui-state-active {
    border: none !important;
}
/* final paginador*/


.btn-descargar {
    background-color: #226cb7 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 10px 13px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border: none !important;
    cursor: pointer !important;
    background-image: url(/resources/img/descargar_archivo.png) !important;
    background-repeat: no-repeat !important;
    background-position: left 19px center !important;
    background-size: 20px 20px !important;
    padding-left: 40px !important;
}


/*linea de separacion*/
.separator-line {
  width: calc(100% + 145px); /* 40px izquierdo + 40px derecho */
  margin: 1rem -45px;
  border: none;
  height: 1px;
  background-color: rgba(237, 230, 239, 1); /* Color clarito */
}

body .ui-fileupload .ui-fileupload-content {
    border: none !important;
    background:none !important;
    color: #495057;
    padding: 0px;
    border-top: 0 none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


.ui-fileupload-content {
    padding: 0px 0px !important;

}

body .ui-fileupload .ui-fileupload-buttonbar {
    border: none !important;
    background:none !important;

}

/*Boton Capacitaciones y Vacantes*/
.button-acciones{
background: none !important;
border: none !important;
color: #266CB4 !important;
}

/*Registros Exitosos y con error en cargas*/

.carga-exitosa{
  color:#00C851 !important;
}

.carga-error{
  color:#9F2241 !important;
}