/* Importamos la fuente Nunito desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

/* Definimos nuestras variables de color personalizadas */
:root {
    --cc-primary: #E91E63; /* Magenta Intenso */
    --cc-secondary: #FF8A65; /* Coral Suave */
    --cc-tertiary: #BA68C8; /* Púrpura Suave */
    --cc-text-primary: #424242; /* Gris Oscuro */
    --cc-text-secondary: #757575; /* Gris Medio */
    --cc-bg-light: #F5F5F5; /* Gris muy claro (fondo alternativo) */
    --cc-white: #FFFFFF;
    --cc-success: #66BB6A; /* Verde Suave */
    --cc-error: #EF5350; /* Rojo Suave */
    --cc-warning: #FFCA28; /* Ámbar Suave */
    --cc-border-color: #E0E0E0; /* Un gris claro para bordes */
}

/* Aplicamos la fuente y el color de texto base */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Nunito', sans-serif; /* ¡Nuestra nueva fuente! */
    color: var(--cc-text-primary); /* Color de texto principal */
    margin-bottom: 60px; /* Asegura espacio para el footer */
    background-color: var(--cc-white); /* Fondo principal blanco */
}

/* Ajustes Generales */
h1, h2, h3, h4, h5, h6 {
    color: var(--cc-primary); /* Encabezados usan el color primario */
    font-weight: 700; /* Usamos el peso Bold */
}

a {
    color: var(--cc-secondary); /* Enlaces usan el color secundario */
    text-decoration: none;
}

    a:hover {
        color: var(--cc-primary);
        text-decoration: underline;
    }

/* Sobrescribimos el botón primario de Bootstrap */
.btn-primary {
    background-color: var(--cc-primary);
    border-color: var(--cc-primary);
    color: var(--cc-white); /* Texto blanco para contraste */
    font-weight: 700;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transición suave */
    border-radius: 50rem; /* Botones 'pill' (muy redondeados) */
    padding: 0.6rem 1.2rem; /* Un poco más de padding */
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: #c2185b; /* Un magenta un poco más oscuro al pasar el ratón */
        border-color: #c2185b;
        color: var(--cc-white);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave al interactuar */
    }
    /* Quitamos el feo shadow de focus por defecto de Bootstrap */
    .btn-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(233, 30, 99, 0.5);
    }


/* Sobrescribimos el botón secundario (contorno) */
.btn-outline-secondary {
    color: var(--cc-text-secondary);
    border-color: var(--cc-border-color);
    background-color: transparent; /* Fondo transparente */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border-radius: 50rem; /* Botones 'pill' */
    padding: 0.6rem 1.2rem;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active {
        color: var(--cc-primary); /* Color primario al pasar el ratón */
        background-color: rgba(233, 30, 99, 0.05); /* Fondo magenta muy sutil */
        border-color: var(--cc-primary);
        box-shadow: none; /* Quitamos shadow de focus */
    }
    /* Shadow de focus personalizado */
    .btn-outline-secondary:focus {
        box-shadow: 0 0 0 0.25rem rgba(233, 30, 99, 0.5);
    }


/* Estilos para las tarjetas (Cards) */
.card {
    border: none; /* Quitamos el borde por defecto */
    border-radius: 1rem; /* Bordes más redondeados (equivale a rounded-4) */
    background-color: var(--cc-white); /* Fondo blanco */
}

    .card.shadow-sm { /* Usaremos shadow-sm para dar profundidad */
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    }

.card-title {
    margin-bottom: 0.75rem; /* Un poco más de espacio bajo el título */
}

/* Estilos para inputs y selects (más redondeados) */
.form-control,
.form-select {
    border-radius: 0.75rem; /* rounded-3 */
    border: 1px solid var(--cc-border-color);
    padding: 0.75rem 1rem; /* Más padding */
    color: var(--cc-text-primary);
}

    .form-control::placeholder { /* Placeholder más claro */
        color: var(--cc-text-secondary);
        opacity: 0.7;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--cc-secondary); /* Borde coral al enfocar */
        box-shadow: 0 0 0 0.25rem rgba(255, 138, 101, 0.25); /* Sombra coral suave */
        color: var(--cc-text-primary);
    }

.form-check-input {
    border-radius: 0.25em; /* Ligeramente redondeado */
    border-color: var(--cc-border-color);
}

    .form-check-input:checked {
        background-color: var(--cc-primary);
        border-color: var(--cc-primary);
    }

    .form-check-input:focus {
        border-color: var(--cc-secondary);
        box-shadow: 0 0 0 0.25rem rgba(255, 138, 101, 0.25);
    }

.form-check-label {
    color: var(--cc-text-primary);
}


/* Ajustes a la barra de navegación */
.navbar {
    border-bottom: 1px solid var(--cc-border-color);
    background-color: var(--cc-white) !important; /* Asegurar fondo blanco */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.05) !important; /* Sombra sutil */
}

.navbar-brand {
    font-weight: 700;
    color: var(--cc-primary) !important; /* Forzar color primario */
    font-size: 1.5rem; /* Un poco más grande */
}

.nav-link {
    color: var(--cc-text-primary) !important;
    font-weight: 400; /* Regular */
    padding-left: 1rem;
    padding-right: 1rem;
}

    .nav-link:hover, .nav-link.active { /* Estilo para el enlace activo */
        color: var(--cc-primary) !important;
        font-weight: 700; /* Bold al pasar el ratón o si está activo */
    }

.navbar-nav .nav-item .btn-link { /* Ajustar botón de Logout y Saludo */
    color: var(--cc-text-secondary) !important;
    font-weight: 400;
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none;
}

    .navbar-nav .nav-item .btn-link:hover {
        color: var(--cc-error) !important; /* Rojo al pasar sobre Logout */
    }
/* Estilo específico para el enlace de perfil (saludo) */
.navbar-nav .nav-item a[title="Gestionar Perfil"] {
    color: var(--cc-text-secondary) !important;
}

    .navbar-nav .nav-item a[title="Gestionar Perfil"]:hover {
        color: var(--cc-primary) !important; /* Magenta al pasar sobre el saludo */
    }


/* Estilos para el footer pegado abajo */
html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
    border-top: 1px solid var(--cc-border-color);
    background-color: var(--cc-bg-light); /* Fondo gris claro */
    color: var(--cc-text-secondary); /* Texto gris */
    font-size: 0.9rem;
}

    .footer a {
        color: var(--cc-text-secondary); /* Enlaces del footer grises */
    }

        .footer a:hover {
            color: var(--cc-primary);
        }


/* Clases de utilidad para colores de Bootstrap (sobrescritas) */
.text-primary {
    color: var(--cc-primary) !important;
}

.text-secondary {
    color: var(--cc-text-secondary) !important;
}
/* Usamos nuestro gris medio */
.text-success {
    color: var(--cc-success) !important;
}

.text-danger {
    color: var(--cc-error) !important;
}

.text-warning {
    color: var(--cc-warning) !important;
}

.text-info {
    color: var(--cc-tertiary) !important;
}
/* Usamos terciario como info */
.text-muted {
    color: var(--cc-text-secondary) !important;
    opacity: 0.8;
}
/* Sobrescribimos muted */

.bg-primary {
    background-color: var(--cc-primary) !important;
}

.bg-light {
    background-color: var(--cc-bg-light) !important;
}

.bg-white {
    background-color: var(--cc-white) !important;
}

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

.border-secondary {
    border-color: var(--cc-secondary) !important;
}
/* Ahora usa Coral */
.border-success {
    border-color: var(--cc-success) !important;
}

.border-danger {
    border-color: var(--cc-error) !important;
}

.border-warning {
    border-color: var(--cc-warning) !important;
}

.border-info {
    border-color: var(--cc-tertiary) !important;
}
/* Ahora usa Púrpura */
.border-light {
    border-color: var(--cc-border-color) !important;
}
/* ... (puedes añadir más si las necesitas) ... */

/* Estilos para mensajes de alerta */
.alert {
    border-radius: 1rem; /* Más redondeado */
    border-width: 0; /* Sin borde */
    padding: 1rem 1.25rem;
}

.alert-success {
    background-color: #e8f5e9; /* Fondo verde muy claro */
    color: #2e7d32; /* Texto verde oscuro */
}

.alert-danger {
    background-color: #ffcdd2; /* Fondo rojo muy claro */
    color: #c62828; /* Texto rojo oscuro */
}

.alert-warning {
    background-color: #fff9c4; /* Fondo ámbar muy claro */
    color: #f57f17; /* Texto ámbar oscuro */
}

.alert-info {
    background-color: #e1bee7; /* Fondo púrpura muy claro */
    color: #6a1b9a; /* Texto púrpura oscuro */
}

/* Ajuste para que los iconos BI se alineen mejor con el texto */
.bi {
    vertical-align: -0.125em; /* Ajuste vertical fino */
    margin-right: 0.25rem; /* Pequeño espacio a la derecha */
}

button .bi, a .bi { /* Iconos dentro de botones/enlaces */
    margin-right: 0.5rem; /* Más espacio */
}