/* ========================================================== */
/* VARIABLES GLOBALES                                         */
/* Colores, tipografias y tamaños reutilizables               */
/* ========================================================== */

:root {

    /* COLORES PRINCIPALES */
    --rosa-principal: #c7355f;
    --naranja-principal: #c65a2e;
    --turquesa-principal: #2f7f7a;
    --verde-principal: #7e8f4f;
    --amarillo-principal: #d9a441;

    /* COLORES NEUTROS */
    --blanco: #ffffff;
    --negro: #000000;

    --fondo-principal: #f7f0ea;

    /* TIPOGRAFIAS */
    --fuente-titulos: 'Roboto Slab', serif;
    --fuente-textos: 'Poppins', sans-serif;

    /* TAMAÑOS DE TEXTO */
    --titulo-hero: 3.5rem;
    --texto-hero: 1.5rem;

    --titulo-seccion: 2.7rem;
    --texto-seccion: 1rem;

    --texto-menu: 0.95rem;

    /* TAMAÑOS DE TEXTO PARA RESPONSIVE */

    --titulo-hero-tablet: 3rem;
    --texto-hero-tablet: 1.2rem;

    --titulo-seccion-tablet: 2.3rem;
    --texto-seccion-tablet: 1.2rem;

    --titulo-hero-movil: 2.6rem;
    --texto-hero-movil: 1.1rem;

    --titulo-seccion-movil: 2rem;
    --texto-seccion-movil: 1rem;

    /* PESOS DE FUENTE - NEGRITAS */
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-negrita: 700;

    /* BORDES REDONDEADOS */
    --radio-pequeno: 0.5rem;
    --radio-mediano: 1rem;
    --radio-grande: 2rem;

    --radio-imagen: 0.75rem;
    --radio-boton: 0.75rem;
    --radio-tarjeta: 1rem;

    /* TRANSICIONES */
    --transicion-suave: 0.3s ease;

    /* SOMBRAS */
    --sombra-suave: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    --sombra-media: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);


    /* TAMAÑOS DE TEXTO - PANEL ADMINISTRADOR */
    --titulo-panel: 2rem;
    --subtitulo-panel: 1.4rem;

    --titulo-tarjeta-panel: 1.2rem;
    --numero-panel: 2rem;

    --texto-panel: 0.9rem;
    --texto-secundario-panel: 0.95rem;
    --texto-menu-panel: 0.95rem;
    --texto-boton-panel: 0.95rem;
    --texto-tabla-panel: 0.9rem;

    /* TAMAÑOS RESPONSIVE - PANEL ADMINISTRADOR */
    --titulo-panel-tablet: 2rem;
    --subtitulo-panel-tablet: 1.4rem;

    --titulo-panel-movil: 1.8rem;
    --subtitulo-panel-movil: 1.3rem;
}


/* ========================================================== */
/* RESET                                                      */
/* Elimina estilos predeterminados del navegador              */
/* ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ========================================================== */
/* CONFIGURACION GENERAL                                      */
/* ========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--fondo-principal);
    font-family: var(--fuente-textos);
    color: var(--negro);
    line-height: 1.6;
}


/* ========================================================== */
/* TITULOS                                                    */
/* ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fuente-titulos);
    font-weight: var(--peso-negrita);
}


/* ========================================================== */
/* TEXTO GENERAL                                              */
/* ========================================================== */

p,
a,
li,
button,
input,
textarea {
    font-family: var(--fuente-textos);
}


/* ========================================================== */
/* ENLACES                                                    */
/* ========================================================== */

a {
    text-decoration: none;
    color: inherit;
}


/* ========================================================== */
/* IMAGENES                                                   */
/* ========================================================== */

img {
    display: block;
    max-width: 100%;
}


/* ========================================================== */
/* LISTAS                                                     */
/* ========================================================== */

ul,
ol {
    list-style: none;
}


/* ========================================================== */
/* BOTONES                                                    */
/* ========================================================== */

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fuente-textos);
}


/* ========================================================== */
/* CONTENEDOR GENERAL                                         */
/* Utilizado para centrar el contenido del sitio              */
/* ========================================================== */

.contenedor {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}




/* ===============================
        MENSAJES
================================ */

.mensaje {
    width: 100%;
    max-width: 25rem;

    margin: 0 auto 1.5rem;

    padding: 0.9rem 1rem;

    border-radius: var(--radio-boton);

    font-size: 0.95rem;
    font-weight: var(--peso-medio);

    text-align: center;
}

.mensaje-error {
    color: #8b1e1e;
    background-color: #fdecec;
    border: 0.1rem solid #f5b5b5;
}

.mensaje-exito {
    color: #1d5e36;
    background-color: #e8f8ef;
    border: 0.1rem solid #9ed7b5;
}

.mensaje-advertencia {
    color: #7a4f01;
    background-color: #fff6df;
    border: 0.1rem solid #efd28b;
}




/* ===============================
        ALERTAS
================================ */

.alerta {
    position: fixed;

    top: 5.8rem;
    right: 2rem;

    width: 100%;
    max-width: 24rem;

    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 1.2rem;

    background-color: var(--blanco);

    border-left: 0.35rem solid var(--verde-principal);
    border-radius: var(--radio-mediano);

    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);

    z-index: 9999;

    animation: mostrar-alerta 0.35s ease;
}

.alerta-icono {
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerta-icono img {
    width: 1.8rem;
    height: 1.8rem;
}

.alerta-informacion {
    flex: 1;
}

.alerta-mensaje {
    font-size: 0.95rem;
    line-height: 1.4;
}

.alerta-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerta-cerrar img {
    width: 1rem;
    height: 1rem;

    transition: var(--transicion-suave);
}

.alerta-cerrar:hover img {
    transform: scale(1.1);
}

.alerta-ocultar {
    opacity: 0;
    transform: translateY(-1rem);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* ANIMACIÓN */

@keyframes mostrar-alerta {

    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ==================================
        TABLET Y MÓVIL
================================== */

@media (max-width: 768px) {

    .alerta {
        top: 5.5rem;
        right: 1rem;
        left: 1rem;

        width: auto;
        max-width: none;
    }

}

/* ==================================
        MÓVIL PEQUEÑO
================================== */

@media (max-width: 480px) {

    .alerta {
        padding: 0.9rem 1rem;
    }

    .alerta-mensaje {
        font-size: 0.9rem;
    }

}