/* --- TEMA PASTEL "ÑOÑO" (CORREGIDO) --- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');

/* === CORRECCIÓN IMPORTANTE: EL RESET UNIVERSAL === */
/* Esto evita que los inputs se salgan por la derecha */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Paleta Dulce */
    --bg-app: #fdf6f9;
    --bg-card: #ffffff;
    --primary: #c4b5fd;
    /* Lila */
    --primary-hover: #a78bfa;
    --secondary: #fce7f3;
    /* Rosa fondo */
    --accent: #f472b6;
    /* Rosa fuerte */
    --text-main: #70657b;
    --text-muted: #9ca3af;
    --border-color: #f3e8ff;
    --radius: 25px;
}

body,
html {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: 'Quicksand', 'Segoe UI', sans-serif;
    height: 100%;
    margin: 0;
}

/* Layout */
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

main {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-app);
    display: flex;
    flex-direction: column;
}

/* Sidebar */
.sidebar {
    background-color: #ffffff;
    border-right: 3px dashed var(--border-color);
    min-width: 260px;
}

@media (min-width: 768px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

.nav-item a,
.nav-item button,
.nav-item div.nav-link {
    color: var(--text-main);
    padding: 12px 25px;
    margin: 8px 15px;
    display: block;
    width: calc(100% - 30px);
    /* Ajuste para que respete los márgenes */
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Reseteo específico para que el botón no parezca botón */
    border: none;
    background-color: transparent;
    text-align: left;
    /* Los botones centran el texto por defecto, lo forzamos a la izq */
    font-family: inherit;
    /* Heredar la fuente Quicksand */
    font-size: inherit;
    cursor: pointer;
}

/* Efecto Hover para ambos */
.nav-item a:hover,
.nav-item button:hover {
    background-color: #fff1f2;
    color: var(--accent);
    transform: scale(1.05);
}

/* Efecto Activo (Solo enlaces) */
.nav-item a.active {
    background-color: var(--secondary);
    color: var(--accent);
    box-shadow: 0 4px 15px rgba(244, 114, 182, 0.2);
}

/* Iconos dentro de ambos */
.nav-item a i,
.nav-item button i,
.nav-item div.nav-link i {
    margin-right: 12px;
    font-size: 1.2rem;
}

/* --- FORMULARIOS --- */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
}

.auth-card {
    background: var(--bg-card);
    width: 100%;
    max-width: 450px;
    /* Un poco más ancho para que quepa todo bien */
    /* PADDING CORREGIDO: Espacio seguro a ambos lados */
    padding: 3rem;
    border-radius: 35px;
    border: 2px solid #fff;
    box-shadow: 0 10px 40px -10px rgba(196, 181, 253, 0.3);
    overflow: hidden;
    /* Seguridad extra: corta lo que se salga */
}

.auth-title {
    font-weight: 800;
    color: var(--primary-hover);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
    text-align: center;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    text-align: center;
}

/* Inputs */
.form-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    margin-left: 10px;
    display: block;
    text-align: left;
}

.form-control {
    display: block;
    width: 100%;
    /* Ahora respeta el padding gracias al box-sizing */
    padding: 12px 20px;
    font-size: 0.95rem;
    color: var(--text-main);
    background-color: #f9fafb;
    border: 2px solid #f3f4f6;
    border-radius: 20px;
    transition: all 0.2s;
}

.form-control:focus {
    background-color: #fff;
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(196, 181, 253, 0.25);
}

/* Botón */
.btn-submit {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(196, 181, 253, 0.4);
}

.btn-submit:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(196, 181, 253, 0.6);
}

/* Links */
.link-secondary {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}

.link-secondary:hover {
    color: var(--primary-hover);
}

/* Género */
.gender-group {
    display: flex;
    gap: 15px;
}

.gender-radio {
    display: none;
}

.gender-label {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 2px solid #f3f4f6;
    border-radius: 20px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 600;
    transition: all 0.2s;
    background-color: #fff;
}

.gender-radio:checked+.gender-label {
    background-color: var(--secondary);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 10px rgba(244, 114, 182, 0.2);
    transform: scale(1.02);
}


/* --- ESTILOS EXTRA PARA LA CALCULADORA --- */

/* Contenedor de resultados */
.result-card {
    background: linear-gradient(135deg, var(--secondary) 0%, #fff 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.calories-big {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin: 10px 0;
}

.calories-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* Tarjetas pequeñas de objetivos (Perder/Ganar peso) */
.goal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.goal-card {
    background: white;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.goal-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
}

.goal-value {
    font-size: 1.1rem;
    color: var(--primary-hover);
    font-weight: 700;
}

.activity-badge {
    background-color: #ffedd5;
    /* Naranja muy clarito */
    color: #c2410c;
    /* Naranja oscuro */
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* --- BOTÓN PREMIUM EN EL MENÚ --- */
.nav-item-premium a {
    background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 100%);
    /* Degradado lila suave */
    border: 2px solid #e9d5ff;
    /* Borde lila */
    color: #9333ea !important;
    /* Texto morado fuerte */
    font-weight: 800 !important;
    /* Letra extra gorda */
    box-shadow: 0 4px 10px rgba(147, 51, 234, 0.1);
}

.nav-item-premium a:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.25);
    background: white;
}

.nav-item-premium a i {
    color: #a855f7;
    /* Icono diamante brillante */
    animation: pulse 2s infinite;
    /* Pequeño latido para llamar la atención */
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* --- VIP NAV ITEM (Added) --- */
.nav-item-vip .nav-link {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(255, 255, 255, 0.5) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    box-shadow: 0 4px 10px rgba(251, 191, 36, 0.15);
}

/* --- MOBILE DRAWER & HEADER --- */
.mobile-header {
    display: none;
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1040;
}

.mobile-brand {
    font-weight: 800;
    color: var(--primary-hover);
    font-size: 1.5rem;
    font-family: 'Quicksand', sans-serif;
}

@media (max-width: 767.98px) {
    .mobile-header {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
        border-right: none;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar .navbar-toggler {
        display: none !important;
    }

    .sidebar .collapse {
        display: block !important;
    }

    .sidebar .top-row {
        justify-content: center;
    }
}

/* --- GENERIC CUTE BUTTON --- */
.btn-cute {
    background: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
    border: none;
    color: white;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 4px 15px rgba(244, 114, 182, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-cute:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 114, 182, 0.6);
    color: white;
}

.btn-cute:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.3);
}

.btn-cute:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- CUTE HAMBURGER BUTTON --- */
.btn-cute-menu {
    background: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
    /* Pink to Purple gradient */
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(244, 114, 182, 0.4);
    /* Soft pink shadow */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    -webkit-tap-highlight-color: transparent;
}

.btn-cute-menu i {
    color: white;
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.btn-cute-menu:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.3);
}

.btn-cute-menu:hover {
    transform: scale(1.1) rotate(5deg);
    /* Slight rotation for fun */
}

/* --- UNIFIED APP HEADER --- */
/* Replaces mobile-header and top-row */
.app-header {
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    /* Subtle shadow for desktop too */
    height: 70px;
    /* Fixed height for consistency */
}

/* Mobile specific overrides for the header */
@media (max-width: 767.98px) {
    .app-header {
        z-index: 1040;
        /* Higher than content but lower than sidebar (1050) */
    }
}

/* Desktop specific adjustments */
@media (min-width: 768px) {
    .app-header {
        /* On desktop, the header is inside main, so it just sits at the top */
        /* We can add more specific desktop styling here if needed */
    }
}

/* --- DESKTOP HEADER --- */
.desktop-header {
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align content to the right */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    height: 70px;
}

/* Hide desktop header on mobile if needed, or adjust spacing */
@media (max-width: 767.98px) {
    .desktop-header {
        /* On mobile, we might want to hide this if it duplicates the mobile header, 
           BUT the mobile header doesn't have the 'Ayuda' link. 
           So let's keep it but maybe reduce padding or shadow if it stacks. 
           For now, let's leave it visible as it contains unique content. */
        z-index: 1030;
        /* Below mobile header */
    }
}

/* --- DESKTOP HEADER ADJUSTMENT --- */
.desktop-header {
    justify-content: space-between !important;
}

/* --- FAB MENU BUTTON --- */
.fab-bottom-right {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 2000;
    /* Highest priority */
    width: 60px;
    /* Slightly bigger for easy thumb access */
    height: 60px;
    box-shadow: 0 4px 20px rgba(244, 114, 182, 0.6);
}

.fab-bottom-right i {
    font-size: 1.8rem;
}

/* Hide FAB on desktop */
@media (min-width: 768px) {
    .fab-bottom-right {
        display: none;
    }
}

/* --- FIX: Hide desktop header on mobile to prevent double header --- */
@media (max-width: 767.98px) {
    .desktop-header {
        display: none !important;
    }
}

/* --- CANCEL PREMIUM BUTTON --- */
.btn-cancel-premium {
    border: 2px solid #ef4444;
    color: #ef4444;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-cancel-premium:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

/* --- CUSTOM PREMIUM MODAL --- */
.custom-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px);
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* animation: fadeInOverlay 0.3s ease-out forwards; */
}

.custom-modal-content {
    background-color: #ffffff !important;
    border-radius: 25px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    text-align: center;
    /* transform: scale(0.8);
    opacity: 0;
    animation: popInModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; */
    opacity: 1 !important;
    transform: scale(1) !important;
}

.custom-modal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(244, 114, 182, 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 2rem;
}

.custom-modal-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 10px;
}

.custom-modal-message {
    color: var(--text-muted);
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.5;
}

.custom-modal-btn {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.custom-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(244, 114, 182, 0.4);
    background-color: #ec4899;
}

@keyframes fadeInOverlay {
    to {
        opacity: 1;
    }
}

@keyframes popInModal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}