/* General & Typography */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

/* Variables de BioTrack v2 */
:root {    
    --primary-dark: #6a27e0;    
    --dark: #18191a;
    --light-bg: #242526;
    --text-main: #e4e6eb;
    --text-muted: #9b9a9a;
    --sidebar-width: 250px;
    --sidebar-mini: 80px;
    --transition: all 0.3s ease;
}

html, body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: var(--dark);
    font-size: 15px;
    color: var(--text-main);
    letter-spacing: .5px;
    overflow-x: hidden;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-weight: 500;
}

/* Headings Sizes */
h1 {
    font-size: 48px;
    line-height: 52px;
}
h2 {
    font-size: 38px;
    line-height: 42px;
}
h3 {
    font-size: 30px;
    line-height: 34px;
}
h4 {
    font-size: 24px;
    line-height: 28px;
}
h5 {
    font-size: 18px;
    line-height: 22px;
}
h6 {
    font-size: 14px;
    line-height: 18px;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--primary-dark);
}

hr {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 1rem 0;
}

/* Layout Structure */
#wrapper {
    width: 100%;
    position: relative;
}

#sidebar-wrapper {
    background-color: var(--dark);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: var(--sidebar-width);
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transition);
}

.content-wrapper {
    margin-left: var(--sidebar-width);
    padding: 70px 15px 70px 15px;
    min-height: 100vh;
    transition: var(--transition);
}

.footer {
    margin-top: auto;
    padding: 12px 30px;
    background-color: var(--light-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    width: 100%;
}

/* Lógica de Sidebar Reducido (Toggled) */
#wrapper.toggled #sidebar-wrapper {
    width: var(--sidebar-mini);
}
#wrapper.toggled .content-wrapper,
#wrapper.toggled .footer {
    margin-left: var(--sidebar-mini);
    width: calc(100% - var(--sidebar-mini));
}

#wrapper.toggled .menu-title,
#wrapper.toggled .menu-label,
#wrapper.toggled .brand-logo .logo-text {
    display: none !important;
}

#wrapper.toggled .parent-icon {
    margin-right: 0 !important;
    width: 100%;
    justify-content: center;
}

/* Menú Navigation (MetisMenu) */
.metismenu {
    padding: 0;
    list-style: none;
    margin: 0;
}

.metismenu li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-main);
    text-decoration: none;
}

.parent-icon {
    font-size: 18px;
    width: 30px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.menu-title {
    margin-left: 15px;
}

.menu-label {
    padding: 20px 20px 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Topbar & Header */
.topbar-nav .navbar {
    height: 60px;
    background: var(--light-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 999;
}

.toggle-menu {
    cursor: pointer;
    z-index: 1100;
    display: flex;
    padding: 0 15px;
    color: var(--text-main);
}

/* Buttons System */
.btn {
    font-size: .70rem;
    font-weight: 500;
    padding: 9px 19px;
    border-radius: .25rem;
    text-transform: uppercase;
    transition: var(--transition);
}

/* Agrupación de colores de botones para evitar repetición */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}
.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
}
.btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: #fff;
}

/* Cards & Components */
.card {
    margin-bottom: 25px;
    background-color: var(--light-bg);
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    font-weight: 500;
}

/* Form Controls */
.form-control {
    background-color: #3a3b3c;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--text-main) !important;
    transition: var(--transition);
}

.form-control:focus {
    background-color: var(--dark);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

/* Utilities (Colores de fondo y texto) */
.bg-primary {
    background-color: var(--primary) !important;
}
.bg-success {
    background-color: var(--success) !important;
}
.bg-danger {
    background-color: var(--danger) !important;
}

.text-primary {
    color: var(--primary) !important;
}
.text-success {
    color: var(--success) !important;
}
.text-danger {
    color: var(--danger) !important;
}

/* Responsive adjustments */
@media only screen and (max-width: 1024px) {
    #sidebar-wrapper {
        left: -250px;
    }
    #wrapper.toggled #sidebar-wrapper {
        left: 0;
        width: var(--sidebar-width);
    }
    .content-wrapper, .footer {
        margin-left: 0;
        width: 100%;
    }
}

/* EFECTO DE RESPLANDOR PARA LA OPCIÓN ACTIVA */

/* 1. Fondo y borde destacado */
/* Anulamos cualquier resaltado automático que no sea por la clase mm-active */
.metismenu li:not(.mm-active) > a {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-left: none !important;
}

/* Forzamos el estilo solo en tu clase manual */
.metismenu li.mm-active > a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-left: 4px solid var(--primary) !important;
}

.metismenu li.mm-active > a i {
    color: var(--primary) !important;
}

/* 3. Resaltado del Texto */
.metismenu li.mm-active .menu-title {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff !important;
}

/* 4. Ajuste para el modo reducido (Mini Sidebar) */
#wrapper.toggled .metismenu li.mm-active > a {
    border-left: 4px solid var(--primary);
    background: rgba(121, 52, 243, 0.2) !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}
.me-2 {
    margin-right: 0.5rem !important;
}
.me-3 {
    margin-right: 1rem !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}
.ms-2 {
    margin-left: 0.5rem !important;
}

/* 1. Fondo y contenedor principal del calendario */
.ui-datepicker.ui-widget-content {
    background-color: #2b2b2b !important;
    border: 1px solid var(--primary) !important;
    box-shadow: 0 0 15px rgba(121, 52, 243, 0.3) !important; /* Brillo púrpura */
    color: #ffffff !important;
}

/* 2. Cabecera (Mes y Año) */
.ui-datepicker .ui-datepicker-header {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
}

/* 3. Estilo de los días del mes (ELIMINA LA OSCURIDAD) */
.ui-datepicker-calendar td:not(.ui-datepicker-other-month) a {
    color: #ffffff !important; /* Blanco puro para días seleccionables */
    background: transparent !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* 4. Efecto HOVER (Al pasar el mouse por encima) */
.ui-datepicker-calendar td:not(.ui-datepicker-other-month) a.ui-state-hover {
    background-color: rgba(121, 52, 243, 0.4) !important; /* Púrpura traslúcido */
    color: #ffffff !important;
    border-radius: 4px !important;
}

/* 5. Día seleccionado actualmente */
.ui-datepicker-calendar td a.ui-state-active {
    background-color: var(--primary) !important;
    color: white !important;
    font-weight: bold !important;
    border-radius: 4px !important;
}

/* 6. Días de otros meses (Para que se vean opacos y no confundan) */
.ui-datepicker-other-month {
    opacity: 0.3 !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    filter: invert(1) brightness(2); /* Vuelve las flechas blancas */
}

/* Forza al contenedor a ser una sola línea horizontal */
.datepicker-fix {
    display: flex !important;    
    width: 100% !important;
}

/* El campo de texto: le quitamos el redondeo de la derecha */
.datepicker-fix .ui-inputfield, 
.form-control-custom {
    height: 40px !important; /* Altura fija para que coincida con los botones */
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    flex: 1 !important; /* Hace que el input crezca */
}

/* 3. "Soldamos" el input con el botón del calendario */
.datepicker-fix .ui-inputfield {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 4. Estilo del botón púrpura del calendario */
.datepicker-fix .ui-datepicker-trigger.ui-button {
    width: 45px !important;
    height: 40px !important;
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 5. Centrado absoluto del icono dentro del botón */
.datepicker-fix .ui-datepicker-trigger.ui-button .ui-button-icon-left {
    color: white !important;
    position: relative !important; /* Cambiamos absolute por relative para que flexbox lo maneje */
    left: auto !important;         /* Anulamos el left: .5em por defecto de PrimeFaces */
    top: auto !important;          /* Anulamos el top: 50% por defecto */
    margin: 0 !important;          /* Quitamos márgenes que puedan desplazarlo */
    font-size: 1.1rem !important;  /* Ajuste opcional de tamaño para mejor visibilidad */
}

/* Refuerzo para el botón contenedor */
.datepicker-fix .ui-datepicker-trigger.ui-button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;         /* Eliminamos padding interno que empuja el icono */
}

/* 6. Etiquetas superiores (Labels) */
.form-label-custom {
    display: block;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

/* =============================================
   ESTILO TABLAS BIOTRACK 2 (PrimeFaces)
   ============================================= */

/* 1. Contenedor y Header de la Tabla */
body .ui-datatable thead th {
    background-color: #1a1a1a !important;
    color: #2196f3 !important; /* Amarillo característico */
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #333 !important;
    padding: 12px 10px !important;
    font-size: 0.85rem;
}

/* 2. Filas y Celdas */
body .ui-datatable .ui-datatable-data > tr {
    background-color: #242424 !important; /* Fondo oscuro de fila */
    color: #ffffff !important;
    transition: background-color 0.2s;
    font-size: 0.85rem;
}

body .ui-datatable .ui-datatable-data > tr > td {
    border: 1px solid #333 !important;
    padding: 10px !important;
    vertical-align: middle !important;
}

/* 3. Efecto Hover (Al pasar el mouse) */
body .ui-datatable .ui-datatable-data > tr.ui-state-hover {
    background-color: rgba(121, 52, 243, 0.15) !important; /* Púrpura sutil */
}

/* 4. Paginador (Estilo Dark) */
body .ui-paginator {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    padding: 5px !important;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background-color: var(--primary) !important;
    color: white !important;
    border-radius: 4px;
}

body .ui-paginator .ui-paginator-first, 
body .ui-paginator .ui-paginator-prev, 
body .ui-paginator .ui-paginator-next, 
body .ui-paginator .ui-paginator-last {
    color: white !important;
}

/* =============================================
   ESTILO PARA MODALES / POPUPS (BioTrack 2)
   ============================================= */

/* 1. Contenedor Principal del Modal */
.dark-modal .modal-content, 
.dark-modal.ui-dialog .ui-dialog-content,
.dark-modal.ui-dialog .ui-dialog-titlebar,
.dark-modal.ui-dialog .ui-dialog-footer {
    background-color: #1a1a1a !important; /* Fondo casi negro */
    color: #ffffff !important;
    border: 1px solid #333 !important;
}

/* 2. Cabecera del Modal */
.dark-modal .modal-header,
.dark-modal .ui-dialog-titlebar {
    border-bottom: 2px solid var(--primary) !important; /* Línea púrpura */
    padding: 1.5rem !important;
}

.dark-modal .modal-title,
.dark-modal .ui-dialog-title {
    color: var(--primary) !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Tabla dentro del Modal */
.dark-modal .table {
    background-color: #242424 !important;
    border-color: #333 !important;
    margin-bottom: 0;
}

.dark-modal .table thead th {
    background-color: #111 !important;
    color: var(--warning) !important; /* Amarillo/Naranja */
    border-bottom: 1px solid #444 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* 4. Badges de Carga dentro de la tabla */
.dark-modal .badge-carga {
    background-color: #333 !important;
    color: #bbb !important;
    border: 1px solid #444;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
}

/* 5. Botón de Cerrar (X) */
.dark-modal .btn-close, 
.dark-modal .ui-dialog-titlebar-close {
    filter: invert(1) grayscale(1) brightness(2); /* Vuelve la X blanca */
}

/* =============================================
   CORRECCIÓN LOGIN BIOTRACK 2
   ============================================= */

/* 1. Forzar fondo oscuro en inputs de PrimeFaces */
body .ui-inputfield.form-control {
    background-color: #2a3038 !important; /* Gris oscuro */
    color: #ffffff !important;
    border: 1px solid #444 !important;
    padding-left: 10px !important;
    height: 45px !important;
}

/* 2. Posicionamiento del icono a la derecha */
.has-icon-right {
    position: relative !important;
    display: block !important;
}

.has-icon-right .form-control-position {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 45px !important; /* Debe coincidir con la altura del input */
}

.has-icon-right .form-control-position i {
    color: white !important; /* Púrpura BioTrack */
    font-size: 1.1rem !important;
}

/* 3. Ajuste para p:password con toggleMask */
body .ui-password.form-control {
    width: 100% !important;
    background-color: #2a3038 !important;
}

/* Aseguramos que los contenedores base no limiten el crecimiento */
html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
}

/* Si usas la clase min-vh-100 de Bootstrap y no responde, 
   puedes forzarla así: */
.min-vh-100 {
    min-height: 100vh !important;
}

/* Ajuste opcional: mejorar el sombreado para que la caja 
   resalte en el modo oscuro de BioTrack 2 */
.card-authentication1 {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
}

/* =============================================
   REFINAMIENTO LOGIN BIOTRACK 2
   ============================================= */

/* 1. Unificar dimensiones de todos los inputs */
body .ui-inputfield.form-control, 
body .ui-password.form-control,
body .ui-password.form-control input {
    width: 100% !important; /* Ocupa todo el ancho del card */
    height: 40px !important; /* Altura generosa y uniforme */
    background-color: #2a3038 !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    box-sizing: border-box !important;
}

/* 2. Mantener el fondo oscuro en el AUTOCOMPLETADO (Chrome/Edge/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px #2a3038 inset !important; /* Color de tu input */
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* 3. Asegurar que el contenedor de password no rompa el ancho */
body .ui-password {
    width: 100% !important;
    display: block !important;
}

/* =============================================
   COLOR BLANCO PARA ICONO DE PASSWORD (BioTrack 2)
   ============================================= */

/* 1. Icono de mostrar/ocultar contraseña */
body .ui-password .ui-password-show, 
body .ui-password .ui-password-hide {
    color: #ffffff !important;
    opacity: 1 !important; /* Asegura que no se vea grisáceo */
    transition: color 0.3s ease;
}

/* 2. Efecto hover opcional (púrpura al pasar el mouse) */
body .ui-password .ui-password-show:hover, 
body .ui-password .ui-password-hide:hover {
    color: var(--primary) !important;
}

/* 3. Asegurar alineación del icono dentro del input */
body .ui-password {
    display: flex !important;
    align-items: center;
}

body .ui-password i {
    right: 12px !important; /* Ajusta la distancia desde el borde derecho */
}

/* =============================================
   FORZAR ICONO PASSWORD A BLANCO PURO
   ============================================= */

/* Targetear específicamente el contenedor del icono de PrimeFaces */
body .ui-password.ui-inputfield + i.ui-icon,
body .ui-password-mask-icon {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.5) !important; /* Fuerza visibilidad */
}

/* Efecto hover opcional */
body .ui-password-mask-icon:hover {
    color: var(--primary) !important;
}

/* Asegurar que el input de contraseña no tape el icono */
body .ui-password {
    padding-right: 40px !important; 
}

body .ui-password.ui-password-masked .ui-password-icon:before {
    color: white !important;
}

/* =============================================
   FORZAR NEGRILLA (REEMPLAZO DE fw-bold)
   ============================================= */

.fw-bold, 
.text-bold {
    font-weight: 700 !important;
    letter-spacing: 0.5px !important; /* Ayuda a la legibilidad en pantallas oscuras */
}

/* Aplicar negrilla a las etiquetas de los inputs */
.form-label-custom {
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* =============================================
   ESTILO PARA DESPLEGABLES (p:selectOneMenu)
   ============================================= */

/* 1. Fondo del panel y color de texto de los items */
body .ui-selectonemenu-panel {
    background-color: #2a3038 !important; /* Gris oscuro del card */
    border: 1px solid #444 !important;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item {
    color: #ffffff !important; /* Texto blanco */
    padding: 8px 12px !important;
}

/* 2. Color cuando pasas el mouse (Hover) o seleccionas */
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
    background-color: var(--primary) !important; /* Púrpura BioTrack */
    color: #ffffff !important;
}

/* 3. Color del texto cuando no hay selección (Placeholder) */
body .ui-selectonemenu .ui-selectonemenu-label {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* 4. El icono de la flecha en blanco */
body .ui-selectonemenu .ui-selectonemenu-trigger {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* =============================================
   FIX TOTAL: SELECT DARK MODE - BIOTRACK 2
   ============================================= */

/* 1. La caja del select (cerrada) */
body .ui-selectonemenu.custom-select-dark {
    background-color: #2a3038 !important; /* Gris oscuro card */
    background-image: none !important;    /* Quita gradientes blancos */
    border: 1px solid #444 !important;
    height: 45px !important;
}

/* 2. El texto seleccionado (etiqueta) */
body .ui-selectonemenu.custom-select-dark .ui-selectonemenu-label {
    color: #ffffff !important;
    background-color: transparent !important;
    padding-top: 10px !important; /* Alineación vertical */
}

/* 3. El panel desplegable (abierto) */
body .ui-selectonemenu-panel {
    background-color: #2a3038 !important;
    background-image: none !important;
    border: 1px solid var(--primary) !important; /* Borde púrpura para resaltar */
}

/* 4. Las opciones dentro del panel */
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* 5. Efecto cuando el mouse pasa por encima o la opción está marcada */
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight,
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item:hover {
    background-color: var(--primary) !important; /* Púrpura BioTrack */
    color: #ffffff !important;
}

/* 6. El botón de la flecha */
body .ui-selectonemenu.custom-select-dark .ui-selectonemenu-trigger {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

body {
    display: flex;
    flex-direction: column;
}

#wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content-wrapper {
    flex: 1;
}

/* Neutralizar estilos base de PrimeFaces en botones con clases Bootstrap */
.ui-button.btn {
    background: unset;
    border: unset;
    color: unset;    
    padding: unset;
    font-size: unset;
    transition: unset;
}

/* Ahora los colores de Bootstrap toman control */
.ui-button.btn-info  { background-color: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.ui-button.btn-primary  { background-color: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.ui-button.btn-success  { background-color: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.ui-button.btn-danger   { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.ui-button.btn-warning  { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #000 !important; }
.ui-button.btn-secondary  { background-color: var(--indigo) !important; border-color: var(--indigo) !important; color: #000 !important; }
.ui-button.btn-outline-light { background-color: transparent !important; border-color: #f8f9fa !important; color: #f8f9fa !important; }

/* Hover */
.ui-button.btn-primary:hover  { background-color: #0b5ed7 !important; border-color: #0a58ca !important; }
.ui-button.btn-success:hover  { background-color: #157347 !important; border-color: #146c43 !important; }
.ui-button.btn-danger:hover   { background-color: #bb2d3b !important; border-color: #b02a37 !important; }
.ui-button.btn-warning:hover   { background-color: #d7a307 !important; border-color: #af8402 !important; }
.ui-button.btn-outline-light:hover { background-color: #f8f9fa !important; color: #000 !important; }