:root {
    --primary-red: #dc3545; /* Bootstrap Danger */
    --primary-blue: #0d6efd; /* Bootstrap Primary */
    --font-main: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: #f4f4f4;
    overflow-x: hidden;
}

/* Patrón de fondo sutil */
body::before {
    content: "";
    position: fixed;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: url('img/calamar-pattern.png') repeat;
    background-size: 180px;
    transform: rotate(-15deg);
    opacity: .08;
    z-index: -1;
    pointer-events: none;
}

/* Estilo para las cards */
.result-card {
    transition: transform 0.3s ease;
}

.result-card:hover {
    transform: translateY(-8px) !important;
}

.fw-black { font-weight: 900; }

/* Ajustes de Flatpickr para que combine con el diseño */
.flatpickr-calendar {
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.flatpickr-day.selected {
    background: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}


/***********************************************************/
/*codigo para la panatalla de inicio de session*/
/* Estilos para inputs redondeados perfectos */
.input-group-text {
    border-color: #dee2e6;
    transition: all 0.3s ease;
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--primary-red);
}

.form-control:focus + .input-group-text,
.input-group:focus-within .input-group-text {
    border-color: var(--primary-red);
}

/* El azul oscuro de Calamar 38 para títulos */
.text-primary {
    color: #000066 !important;
}

/* El rojo de Calamar 77 para acentos */
.text-danger, .btn-danger {
    background-color: #FF0000 !important;
    border-color: #FF0000 !important;
}

.btn-danger:hover {
    background-color: #cc0000 !important;
    transform: translateY(-2px);
}

/*****************************************************************/
/*dashboard*/

/* --- Sidebar Styles --- */
.sidebar .nav-link {
    transition: all 0.3s;
    padding: 12px 20px;
    font-weight: 500;
    display: flex;
    align-items: center; /* Centra icono y texto verticalmente */
}

.sidebar .nav-link:not(.active):hover {
    background-color: #f8f9fa;
    color: var(--primary-red) !important;
}

.sidebar .nav-link i {
    width: 20px;
    display: inline-block;
    text-align: center;
}

/* --- Responsividad mejorada para la sidebar --- */
@media (max-width: 768px) {
    .sidebar {
        width: 70px !important;
        padding: 0 !important;
    }

    /* Ocultar el texto dentro de los enlaces */
    .sidebar .nav-link span {
        display: none !important;
    }

    /* Ocultar Logo y Footer de la Sidebar */
    .sidebar .p-4, 
    .sidebar .border-top {
        display: none !important;
    }

    .sidebar .nav-link {
        text-align: center;
        padding: 15px 0; /* Ajuste de padding para centrar icono */
        justify-content: center; /* Centra el icono horizontalmente */
    }

    .sidebar .nav-link i {
        margin: 0 !important;
        font-size: 1.5rem; /* Iconos más grandes en móvil */
    }
}



    @media (max-width: 768px) {
        .sidebar {
            position: fixed !important; /* Cambiamos a fixed para que flote sobre el contenido */
            left: -250px; /* Oculto por defecto fuera de la pantalla */
            transition: left 0.3s ease-in-out;
            height: 100vh;
            width: 250px !important; /* Vuelve a tener ancho completo para mostrar texto */
        }

        .sidebar.show {
            left: 0; /* Deslizar hacia adentro */
        }

        /* Ajustar el main content cuando el sidebar está oculto */
        .main-content {
            width: 100%;
        }
        
        /* Mostrar elementos de la sidebar cuando está activa */
        .sidebar.show .nav-link span, 
        .sidebar.show .p-4, 
        .sidebar.show .border-top {
            display: block !important;
        }
        
        .sidebar.show .nav-link {
            text-align: left;
            justify-content: flex-start;
        }
    }


     /* Transiciones suaves para el header y sus elementos */
    .transition-all {
        transition: all 0.3s ease-in-out;
    }

    /* Estado compacto: se activa por JS en PC o por CSS en móviles */
    .header-compact {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        background-color: rgba(220, 53, 69, 0.98) !important;
        backdrop-filter: blur(8px);
    }

    .header-compact #headerLogo {
        width: 80px !important; /* Logo reducido */
    }

    .header-compact #headerTitle {
        font-size: 1.2rem !important; /* Título reducido */
    }

     
    /* Pantallas Pequeñas: Menú reducido siempre */
    @media (max-width: 767.98px) {
        .main-header {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }
        .main-header #headerLogo {
            width: 80px !important;
        }
        .main-header #headerTitle {
            font-size: 1.2rem !important;
        }
        .main-header .lead {
            font-size: 0.9rem;
            margin-bottom: 5px !important;
        }
        .btn-light {
            padding: 0.25rem 0.75rem !important;
            font-size: 0.8rem;
        }
    }