/* =========================
   base.css - Variables, resets y estilos generales
   ========================= */

/* Variables globales para colores, fuentes y estilos */
:root {
    /* Paleta principal */
    --rosa-principal: #E6007E;
    /* Color rosa principal de la marca */
    --rosado-claro: #FAD2E1;
    /* Rosa claro para fondos o detalles suaves */
    --rosado-muy-claro: #FFE4EC;
    /* Tonalidad muy clara para contrastes */
    --rosado-pastel: #F7A8B8;
    /* Rosa pastel para acentos */
    --rosado-fuerte: #EC407A;
    /* Rosa fuerte, útil en botones o textos destacados */
    --rosado-oscuro: #C2185B;
    /* Rosa oscuro, ideal para títulos o énfasis */
    --morado-amethyst: #9966CC;
    /* Toque morado complementario */
    --azul-medio: #2196F3;
    /* Azul medio para enlaces o resaltes */
    --azul-fuerte: #1565C0;
    /* Azul intenso para contraste */
    --azul-oscuro: #0D47A1;
    /* Azul profundo, más serio o formal */
    --blanco: #FFFFFF;
    /* Blanco puro para fondos */
    --negro-suave: #333333;
    /* Negro atenuado para textos */
    --letra-pie: #FFFFF7;
    /* Color claro para letras en pie de página */
    --gris-claro: #F5F5F5;
    /* Gris suave de fondo */
    --fuente-titulos: 'Arapey', sans-serif;
    /* Fuente principal para títulos */
    --fuente-cursiva: 'Dancing script';
    /* Fuente decorativa */
    --fuente-textos: 'Open Sans', sans-serif;
    /* Fuente legible para párrafos */
    --pink-accent: #ff69b4; /* Un rosa vibrante */
    --black-base: #1a1a1a;
    --text-light: #f0f0f0;
}

/* Reset y estilos generales */
html,
body {
    height: 100%;
    /* Asegura que el body ocupe toda la altura */
    margin: 0;
    /* Elimina márgenes por defecto */
    background: linear-gradient(135deg, var(--black-base) 0%, #3a0026 50%, var(--pink-accent) 100%);
    padding: 0;
    /* Elimina padding por defecto */
    font-family: 'Arapey' sans-serif;
}

body {
    min-height: 100vh;
    /* Asegura que el body cubra toda la pantalla */
    display: flex;
    /* Usa flexbox para estructura */
    flex-direction: column;
    /* Organiza el contenido en columna */
    font-family: var(--fuente-textos);
}

.main-content {
    flex: 1;
    /* Permite que el contenido principal ocupe el espacio restante */
}

a {
    text-decoration: none;
    /* Quita subrayado a los enlaces */
}

.container-fluid {
    padding-left: 0 !important;
    /* Elimina padding lateral izquierdo */
    padding-right: 0 !important;
    /* Elimina padding lateral derecho */
}

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

/* Forzar fuente de títulos en botones */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn {
  font-family: var(--fuente-titulos) !important;
}