/************************* IMPORTACIONES ***************************/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); /** ICONOS **/

/************************* FUENTES: MONTSERRAT *************************/
/* * Nota: Asegúrate de que todos los archivos .woff2 listados existan 
 * en la carpeta 'fonts/' relativa a donde se encuentre este CSS.
 * He simplificado las reglas @font-face: para usar la font-family 
 * 'Montserrat' solo se necesita una definición con diferentes 
 * font-weight y font-style.
*/

/* 100 - Thin */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* 200 - ExtraLight */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* 300 - Light */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* 400 - Regular */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: normal; /* o 400 */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Italic.woff2') format('woff2');
    font-weight: normal; /* o 400 */
    font-style: italic;
    font-display: swap;
}

/* 500 - Medium */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* 600 - SemiBold */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-SemiBoldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* 700 - Bold */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: bold; /* o 700 */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-BoldItalic.woff2') format('woff2');
    font-weight: bold; /* o 700 */
    font-style: italic;
    font-display: swap;
}

/* 800 - ExtraBold */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* 900 - Black */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


/************************* VARIABLES DE COLOR (BOOTSTRAP) ***************************/
 :root {
    /* Colores base */
    --bs-primary: #5576c4;   /* Azul principal */
    --bs-secondary: #9a55c4; /* Púrpura */
    --bs-success: #6C9D35;   /* Verde */
    --bs-warning: #f0ad4e;   /* Naranja */
    --bs-danger: #c45567;    /* Rojo */
    --bs-info: #0DA4F0;      /* Azul claro (se añade aquí) */
    --bs-light: #f8f9fa;     /* Claro */
    --bs-dark: #212529;      /* Oscuro */

    /* Colores derivados de dropdowns (personalización de Bootstrap) */
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-hover-bg: var(--bs-primary);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-hover-color: #fff;
}
/************************* ESTILOS GENERALES ***************************/
body {
    /* Aplica la fuente Montserrat como principal */
    font-family: 'Montserrat', sans-serif;
}

.hrgrande {
    /* Línea divisoria destacada */
    height: 5px;
    background-color: var(--bs-primary);
    border: none;
}

.card {
    /* Bordes redondeados consistentes para las tarjetas */
    border-radius: .375rem !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* --- Colores Personalizados para Badges --- */

/* Verde Personalizado (#6C9D35) - Sobrescribe la clase success de Bootstrap */
.text-bg-success {
    background-color: #6C9D35 !important;
    color: #ffffff !important;
}

/* Azul Personalizado (#5576c4) - Nueva clase para usar con el nombre 'text-bg-azul' */
.text-bg-primary {
    background-color: #5576c4 !important;
    color: #ffffff !important;
}
/* Amarillo Personalizado (#f0ad4f) - Nueva clase para usar con el nombre 'text-bg-amarillo' */
.text-bg-warning {
    background-color: #f0ad4f !important;
    color: #000000 !important;
}

/************************* DROPDOWN ITEMS ***************************/
.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff;
    /* Usando un color oscuro para el hover, diferente al primary para distinguirlo */
    background-color: #32383E; 
}
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--bs-primary);
}

/************************* UTILITIES DE FONDO (BG) ***************************/
/* Estas clases fuerzan tus colores y el color de texto asociado */
.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}
.bg-success {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}
.bg-danger {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
}
.bg-warning {
    background-color: var(--bs-warning) !important;
    /* Texto oscuro para fondo claro */
    color: var(--bs-dark) !important; 
}
.bg-info {
    background-color: var(--bs-info) !important;
    color: #fff !important;
}
.bg-light {
    background-color: var(--bs-light) !important;
    color: var(--bs-dark) !important;
}
.bg-dark {
    background-color: var(--bs-dark) !important;
    color: #fff !important;
}
/************************* UTILITIES DE TEXTO (TEXT) ***************************/
.text-primary {
    color: var(--bs-primary) !important;
}
.text-success {
    color: var(--bs-success) !important;
}
/* Estilo adicional para un texto secundario con opacidad */
.direccion {
    color: #8B40B9 !important; /* Color específico del original, no usa var(--bs-secondary) */
    opacity: 50%;
}
/************************* BOTONES (BTN) ***************************/

/* --- PRIMARY --- */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.btn-primary:hover {
    background-color: #405d9b !important; /* Un poco más oscuro que primary */
    border-color: #38518a !important;
}
.btn-outline-primary {
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
    background-color: #405d9b !important;
    color: white !important;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(85, 118, 196, 0.5) !important;
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--bs-primary) !important;
    background-color: transparent !important;
}

/* --- SECONDARY --- */
.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}
.btn-secondary:hover {
    background-color: #8B40B9 !important; /* Un poco más oscuro que secondary */
    border-color: #8B40B9 !important;
}

/* --- DANGER --- */
.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}
.btn-danger:hover {
    background-color: #b43f52 !important; /* Un poco más oscuro que danger */
    border-color: #b43f52 !important;
}
.btn-outline-danger {
    border-color: var(--bs-danger) !important;
    color: var(--bs-danger) !important;
}
.btn-outline-danger:hover {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: white !important;
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
    box-shadow: 0 0 0 0.2rem rgba(196, 85, 103, 0.5) !important;
}
.btn-outline-danger:active,
.btn-outline-danger.active,
.show > .btn-outline-danger.dropdown-toggle {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: white !important;
}
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    color: var(--bs-danger) !important;
    background-color: transparent !important;
}

/* --- WARNING --- */
.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}
.btn-warning:hover {
    background-color: #EB951A !important; /* Un poco más oscuro que warning */
    border-color: #EB951A !important;
}

/* --- SUCCESS --- */
.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}
.btn-success:hover {
    background-color: #557C29 !important; /* Un poco más oscuro que success */
    border-color: #557C29 !important;
}
.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
}
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.btn-outline-success:active,
.btn-outline-success.active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-outline-success:disabled,
.btn-outline-success.disabled {
    color: rgba(108, 157, 53, 0.6);
    border-color: rgba(108, 157, 53, 0.6);
    background-color: transparent;
    pointer-events: none;
    opacity: 0.65;
}

/* --- INFO --- */
.btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #ffffff !important;
}
.btn-info:hover {
    background-color: #0A84C1 !important; /* Un poco más oscuro que info */
    border-color: #0A84C1 !important;
    color: #ffffff !important;
}

/************************* PAGINACIÓN (PAGE) ***************************/
.page-link {
    color: var(--bs-primary);
}
.page-link:hover {
    color: var(--bs-primary);
    background-color: rgba(85, 118, 196, 0.1);
    border-color: #dee2e6;
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.page-item.disabled .page-link {
    /* El color usa el primario con opacidad */
    color: rgba(85, 118, 196, 0.5); 
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/************************* LOGIN (MEDIA QUERY) ***************************/
.mi-card-centrada {
    max-width: 500px;
    /* Centrado en pantallas grandes */
    margin: 0 auto; 
}
/* Para pantallas más pequeñas (móviles) */
@media (max-width: 767px) {
    .mi-card-centrada {
        width: 95%;
        /* Asegura el centrado sin importar el ancho */
        margin-left: auto; 
        margin-right: auto;
    }
}

/***************************** OJOS de REGISTRO *****************************/
.password-container {
    position: relative;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}

/***************************** GENERADOR DE CONTRASEÑAS *****************************/
.button-contras {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 576px) {
    /* Apila los botones verticalmente y los estira para móviles */
    .button-contras {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
}

/***************************** CALENDARIO *****************************/
.calendario {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mes {
    /* Usamos variables de Bootstrap para el borde */
    border: 1px solid var(--bs-border-color); 
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    /* Calcula el ancho para que quepan dos meses en pantallas grandes */
    width: calc(50% - 10px);
    box-sizing: border-box;
    margin-bottom: 20px;
}
.mes h2 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2rem;
}
.semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}
.dia {
    padding: 6px;
    text-align: center;
    font-size: 0.9rem;
}
/* Estilo del día de la semana (L, M, X...) si están marcados con esta clase */
.dia-actual {
    /* Usamos tu color primario */
    background-color: var(--bs-primary);
    color: white;
    border-radius: 50%;
}
.dia-otro-mes {
    /* Usamos un color de texto más suave */
    color: var(--bs-secondary-color); 
}
.domingo {
    color: var(--bs-danger); /* Usa tu color danger */
}
.hoy {
    /* Usamos tu color warning para el día de hoy */
    background-color: var(--bs-warning);
    color: var(--bs-dark); /* Color oscuro para contraste con fondo claro */
    border-radius: 50%;
}

/* Media query para pantallas más pequeñas (ej. móviles) */
@media (max-width: 768px) {
    .calendario {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .mes {
        width: 95%;
        margin-bottom: 20px;
        padding: 15px;
    }
    .mes h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    .semana {
        /* Se mantiene grid-template-columns: repeat(7, 1fr); - No es necesario duplicar */
        gap: 3px;
        margin-bottom: 3px;
    }
    /* El selector '.semana .dia' se elimina porque los estilos del calendario ya están definidos en .dia */
    .dia {
        padding: 10px;
        font-size: 1rem;
    }
}

/***************************** COLOR PICKER *****************************/
.color-picker-container {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    /*border: 1px solid var(--bs-border-color);*/ /* Puedes descomentar si necesitas borde */
    border-radius: .375rem;
    text-align: center;
}
input[type="color"] {
    width: 100%;
    height: 50px;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: .375rem;
}
.color-display {
    margin-top: 20px;
    padding: 15px;
    /*border: 1px solid var(--bs-border-color);*/ /* Puedes descomentar si necesitas borde */
    border-radius: .375rem;
}
.color-info {
    margin-bottom: 10px;
}

/***************************** TABLA GESTIÓN DE USUARIOS *****************************/
@media (max-width: 767.98px) {
    /* Estilos para la columna Rol más ancha */
    .table th:nth-child(6), /* Encabezado de la columna Rol */
    .table td:nth-child(6) { /* Celdas de la columna Rol */
        min-width: 180px;
    }

    /* Estilos para los select en móviles */
    .table td select.form-select-sm {
        padding: 1rem;
        font-size: 1.2rem;
        height: auto;
        width: auto;
        min-width: 150px;
    }

    /* Estilos para los botones en móviles */
    .table .btn-sm {
        padding: 0.8rem 1rem;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* Estilos generales de la tabla en móviles */
    .table td,
    .table th {
        padding: 0.7rem 0.5rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/***************************** PAGINACION GESTION USUARIOS *****************************/
.pagination .page-link {
    /* Usa la variable de color primary */
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    margin: 0;
    border-radius: 0;
    text-decoration: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.pagination .page-item:first-child .page-link {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
.pagination .page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
.pagination .page-link:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #FFFFFF;
    z-index: 2;
}
.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #ffffff;
    z-index: 3;
}
.pagination .page-item.disabled .page-link {
    /* Usamos un color basado en primary para el disabled */
    background-color: #4166BD; 
    color: #FFFFFF;
    border-color: var(--bs-primary);
    pointer-events: none;
    opacity: 0.8;
}
.pagination .page-item.disabled .page-link:hover {
    /* Esto revierte a los estilos predeterminados de Bootstrap para disabled */
    background-color: var(--bs-light); 
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
    cursor: not-allowed;
}

/***************************** JULIO VERNE *****************************/
.book-description {
    /* Usamos un color de texto más suave */
    color: var(--bs-secondary-color);
    /* Usamos la variable de color primary para la barra lateral */
    border-left: 6px solid var(--bs-primary); 
    margin-left: 10px;
}
.book-description p:last-child {
    margin-bottom: 0 !important;
}
hr.my-4 {
    /* Manteniendo la variable de Bootstrap para bordes */
    border-color: var(--bs-border-color-translucent); 
    opacity: 0.75;
}
.list-unstyled li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

/***************************** TASKS *****************************/
.list-group-item.active {
    z-index: 2;
    color: #fff;
    /* Usamos un color oscuro específico, similar a un 'dark' personalizado */
    background-color: #3B434A; 
    border-color: #3B434A;
}
.task-item {
    display: flex;
    align-items: center;
    padding: .75rem 1.25rem;
    /* Aseguramos que se use la variable de borde de Bootstrap */
    border-bottom: 1px solid var(--bs-border-color); 
}
.task-item .form-check {
    margin-right: 1rem;
}
.task-description {
    flex-grow: 1;
}
.task-completed .task-description {
    text-decoration: line-through;
    /* Usamos un color de texto secundario para el tachado */
    color: var(--bs-secondary-color); 
}
.task-actions {
    margin-left: auto;
}

/***************************** PERFIL (DATE INPUT) *****************************/
/* Ajusta el padding para dejar espacio al icono del navegador en inputs de tipo date */
.form-floating .form-control[type="date"] {
    padding-right: 1.5rem;
    padding-left: 0.75rem;
    text-align: left;
    /* Desactiva los estilos nativos para evitar conflictos con el icono personalizado */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Oculta el icono nativo del navegador */
.form-floating input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}
/* Estilo para el contenedor del icono de calendario personalizado */
.form-floating.has-calendar-icon {
    position: relative;
}
.form-floating.has-calendar-icon .bi-calendar-date {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Usa la variable de color de texto del cuerpo */
    color: var(--bs-body-color); 
    z-index: 2;
}

/***************************** RECAPTCHA *****************************/
.g-recaptcha {
    margin-top: 15px;
    margin-bottom: 20px;
}

/***************************** LLUVIAS *****************************/
.table-hoy-sutil, 
.table-hoy-sutil > td, 
.table-hoy-sutil > th {
    /* Color de fondo: Verde de Bootstrap (Success) con 10% de opacidad (rgba) */
    background-color: rgba(25, 135, 84, 0.1) !important; 
    /* ¡El !important asegura que anule las clases base de Bootstrap! */
}

/* Opcional: Estilo al pasar el ratón (hover) */
.table-hoy-sutil:hover {
    background-color: rgba(25, 135, 84, 0.15) !important;
}

/***************************** CARTEL COOKIES *****************************/
#cookie-banner {
    position: fixed;
    bottom: 20px;
    /* CAMBIO CLAVE: Cambiamos 'right' por 'left' */
    left: 20px;
    right: auto; /* Aseguramos que la propiedad 'right' no interfiera */
    z-index: 1050; 
    max-width: 350px;
    transition: opacity 0.3s, transform 0.3s;
}

/* 2. Estado inicial: oculto (clase JS) */
.cookie-hidden {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* 3. Área de preferencias (manejo del toggle/animación) */
.details-hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.details-visible {
    max-height: 500px; 
    transition: max-height 0.5s ease-in;
}
/* Seleccionamos todos los botones que están dentro de las acciones del banner */
#cookie-banner .d-flex button,
#cookie-banner #save-preferences {
    /* Usamos propiedades específicas para reducir el tamaño */
    padding: 5px 10px !important; /* Reducir el relleno interno (arriba/abajo, izq/der) */
    font-size: 0.8rem !important; /* Reducir el tamaño de la fuente */
    line-height: 1.2 !important; /* Ajustar la altura de línea */
    height: auto !important; /* Asegurar que no se fije una altura grande */
}
/**************************** LOGO CON CÓDIGO *****************************/
.logo-luism {
    width: 50px;
    height: 50px;
}
/**************************************************************************/