/* =================================================================== */
/*        ESTILOS GLOBALES Y DE LA APP INTERNA (app.css)               */
/* =================================================================== */

:root {
    --color-primary: #2c3e50;
    --color-secondary: #e74c3c;
    --color-accent: #3498db;
    --color-success: #2ecc71;
    --color-warning: #f1c40f; /* Naranja/Dorado para Premium */
    --color-danger: #e74c3c;
    --color-elite: #9b59b6; /* Color para funciones premium */
    --color-elite-bg: rgba(155, 89, 182, 0.08); /* Fondo morado suave */
    --color-purchase: #1abc9c; /* Color para compras únicas */
    --color-background: #ecf0f1;
    --color-surface: #ffffff;
    --color-text-primary: #34495e;
    --color-text-secondary: #7f8c8d;
    --color-border: #dde1e2;
    --color-link: var(--color-accent);
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 10px 35px rgba(0, 0, 0, 0.15);
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --border-radius-small: 8px;
    --border-radius-medium: 16px;
    --border-radius-large: 24px;
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease;
    --z-bottom-nav: 100;
    --z-floating-btn: 950;
    --z-modal-overlay: 1001;
    --z-spinner: 1002;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body { 
    font-family: var(--font-family); 
    line-height: 1.7; 
    background-color: var(--color-background); 
    color: var(--color-text-primary); 
    transition: background-color 0.3s ease, color 0.3s ease; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}


/* --- CÓDIGO NUEVO Y CORREGIDO --- */
/* --- INICIO DEL SISTEMA DE LAYOUT DEFINITIVO (FLEXBOX CORRECTO) --- */

/* 1. El contenedor global (#app-content-wrapper) se convierte en el director del layout.
   Ocupa toda la altura de la ventana y organiza a sus hijos (header y main) en una columna. */
body.logged-in #app-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ocupa la altura completa y exacta de la ventana. */
    width: 100%;
    position: fixed; /* Lo fijamos para evitar cualquier scroll del body. */
    top: 0;
    left: 0;
}

/* 2. Las barras de estado superiores ocupan su espacio natural y no se encogen.
   Empujan al 'main' hacia abajo automáticamente. */
.trial-status-header,
.membership-status-header {
    flex-shrink: 0; /* Evita que la barra se encoja. */
}

/* 3. La barra de navegación inferior también es parte del layout principal.
   De esta forma, el sistema siempre sabe dónde está el final del contenido. */
.bottom-nav, .bottom-nav-legacy, .bottom-nav-new {
    flex-shrink: 0; /* Evita que la barra se encoja. */
    position: relative; /* Quitamos 'fixed' para que sea parte del flujo de Flexbox. */
}

/* 4. El área de contenido principal crece para llenar el espacio sobrante y gestiona su propio scroll. */
main.app-container {
    flex-grow: 1; /* ¡LA CLAVE! Crece para llenar todo el espacio disponible. */
    overflow-y: auto; /* Habilita el scroll vertical SÓLO en esta área. */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS. */

    /* Añadimos padding para que el contenido no se pegue a los bordes y no quede oculto por la barra de navegación inferior. */
    padding: 20px 20px 85px 20px;
}

/* --- FIN DEL SISTEMA DE LAYOUT DEFINITIVO --- */

#landing-page-wrapper { display: block; }

body.logged-in #landing-page-wrapper { 
    display: none; 
    /* Nueva regla clave: la eliminamos completamente del layout */
    height: 0;
    overflow: hidden;
}
#app-content-wrapper { display: none; }
body.logged-in #landing-page-wrapper { display: none; }
body.logged-in #app-content-wrapper { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 28px; border: 2px solid transparent; border-radius: 50px; font-size: 1rem; font-weight: 500; text-decoration: none; text-align: center; cursor: pointer; box-shadow: var(--shadow-light); transition: var(--transition-medium); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn { background-color: var(--color-primary); color: var(--color-surface); }
body:not(.logged-in) .btn { color: var(--color-background); }
.btn-secondary { background-color: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); box-shadow: none; }
.btn-secondary:hover { background-color: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
.btn.btn-small { padding: 8px 16px; font-size: 0.9rem; }
.btn-primary-glow { background-color: var(--color-secondary); color: #fff; box-shadow: 0 4px 20px rgba(231, 76, 60, 0.4); }
.btn-primary-glow:hover { background-color: #c0392b; box-shadow: 0 6px 25px rgba(192, 57, 43, 0.5); }
.btn-danger { background-color: var(--color-danger); color: #fff; box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3); }
.btn-danger:hover { background-color: #c0392b; }
.btn-ultimate { background: linear-gradient(90deg, #2c3e50 0%, #34495e 100%); color: #fff; border: 2px solid transparent; font-weight: bold; }
.btn-ultimate:hover { box-shadow: 0 0 20px rgba(44, 62, 80, 0.5); transform: translateY(-3px) scale(1.02); }
.form-group { margin-bottom: 24px; text-align: left; }
.form-group legend, .form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.95rem; color: var(--color-text-secondary); }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px; background-color: #fff; color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--border-radius-small); font-size: 1rem; font-family: inherit; transition: var(--transition-fast); }
.form-group input:focus-visible, .form-group textarea:focus-visible, .form-group select:focus-visible { border-color: var(--color-accent); outline: 0; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); }
.form-text { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 8px; }
.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; }
.radio-group.vertical { flex-direction: column; gap: 12px; align-items: flex-start; }
.radio-group.vertical label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--border-radius-small); cursor: pointer; transition: var(--transition-fast); }
.radio-group.vertical label:hover { background-color: var(--color-background); }
.radio-group.vertical input:checked + span { font-weight: 700; color: var(--color-primary); }
.card { background: var(--color-surface); border-radius: var(--border-radius-large); padding: clamp(20px, 5vw, 40px); width: 100%; max-width: 900px; text-align: center; box-shadow: var(--shadow-medium); margin: 20px auto; }
.password-wrapper { position: relative; }
.password-group {
    position: relative;
}
.password-toggle-icon { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); cursor: pointer; color: var(--color-text-secondary); transition: color 0.2s ease; }
.password-toggle-icon:hover { color: var(--color-text-primary); }
.password-wrapper input { padding-right: 45px; }
.auth-options { display: flex; justify-content: flex-end; margin-top: -15px; margin-bottom: 20px; }
.forgot-password-link { font-size: 0.9rem; color: var(--color-link); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; padding: 5px; }
.forgot-password-link:hover { text-decoration: underline; }
.form-card-highlight { background-color: var(--color-surface); border-radius: var(--border-radius-large); padding: 40px; box-shadow: var(--shadow-medium); max-width: 500px; margin: auto; }
.form-card-highlight.dark { background-color: #111; }
/* --- NUEVO DISEÑO BASE PARA EL SELECTOR TIPO PÍLDORA --- */
.form-toggle {
    display: flex;
    background-color: var(--color-background);
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 30px;
    border: 1px solid var(--color-border);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

.form-toggle-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600; /* Texto un poco más bold */
    color: var(--color-text-secondary);
    border-radius: 50px; /* Bordes redondeados para el botón activo */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.form-toggle-btn.active {
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* --- TEMA VERDE PARA EL PRIMER FORMULARIO (COMO EN LA IMAGEN) --- */
#auth-container .form-toggle-btn.active {
    background: var(--color-primary);
    color: #ffffff;
}

/* --- TEMA ROSADO PARA EL SEGUNDO FORMULARIO (CLON) --- */
#auth-container-clone .form-toggle-btn.active {
    background: #e91e63; /* Color rosa/magenta principal */
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(233, 30, 99, 0.3);
}
body:not(.logged-in) .form-toggle-btn.active { color: var(--color-background); }
.scroll-top-btn { position: fixed; bottom: 20px; right: 20px; z-index: 999; background-color: rgba(231, 76, 60, 0.7); color: #fff; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-heavy); display: none; align-items: center; justify-content: center; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.3s; opacity: 0; visibility: hidden; transform: translateY(20px); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.scroll-top-btn.show { display: flex; opacity: 1; visibility: visible; transform: translateY(0); }
body.logged-in .scroll-top-btn { bottom: 105px; }
.app-container { min-height: 100vh; padding: 20px 20px 100px; }
.page { display: none; width: 100%; }
.page.active { display: block; animation: slideInFromRight 0.4s ease-out; }
.page.exiting { animation: slideOutToLeft 0.4s ease-in; }
.breadcrumb { margin-bottom: 20px; text-align: left; }
.breadcrumb-btn { background: none; border: none; color: var(--color-accent); font-weight: 500; cursor: pointer; padding: 5px; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }
/* =================================================================== */
/*        BARRA DE NAVEGACIÓN INFERIOR (ESTILOS CONSOLIDADOS)          */
/* =================================================================== */
.bottom-nav { display: none; } /* Oculto por defecto */

body.logged-in .bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: var(--color-surface); 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    padding: 5px 0; 
    z-index: var(--z-bottom-nav); 
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08); 
    border-top: 1px solid var(--color-border); 
    height: 65px; 
}

body.app-locked .bottom-nav { display: none; }

/* Keyframe para la animación flotante del botón central */
@keyframes floatAnimation {
    0%   { transform: translateY(-20px); }
    50%  { transform: translateY(-25px); }
    100% { transform: translateY(-20px); }
}

/* Estilo para los 4 botones laterales (con icono y texto) */
.bottom-nav-btn { 
    background: none; 
    border: none; 
    color: var(--color-text-secondary); 
    cursor: pointer; 
    font-family: var(--font-family); 
    flex: 1; 
    padding: 6px 2px; 
    border-radius: var(--border-radius-small); 
    transition: var(--transition-fast); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.bottom-nav-btn i { 
    font-size: 1.2rem; 
    margin-bottom: 3px; 
    display: block; 
    transition: transform 0.2s ease-out, color 0.2s ease-in-out; 
}
.bottom-nav-btn span { 
    font-size: 0.65rem; 
    font-weight: 600; 
    transition: color 0.2s ease-in-out;
}
.bottom-nav-btn.active i { 
    transform: scale(1.1); 
}

/* --- INICIO: COLORES PERSONALIZADOS PARA TEXTOS E ICONOS --- */
/* Estilo para Inicio: Gris Oscuro */
.bottom-nav-btn[data-page="page-dashboard"] span,
.bottom-nav-btn[data-page="page-dashboard"] i { 
    color: var(--color-text-primary); /* Gris oscuro principal del tema */
}

/* Estilo para Tienda: Naranja */
.bottom-nav-btn[data-page="page-purchases"] span,
.bottom-nav-btn[data-page="page-purchases"] i { color: #f39c12; }

/* Estilo para Mi Perfil: Morado */
.bottom-nav-btn[data-page="page-profile"] span,
.bottom-nav-btn[data-page="page-profile"] i { color: var(--color-elite); }
/* --- FIN: COLORES PERSONALIZADOS --- */


/* --- INICIO: ANIMACIÓN PARA ¡ACTÍVATE! --- */
.bottom-nav-btn.activate .icon-container {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cloud-icon, .bolt-icon {
    position: absolute;
    font-size: 1.2rem;
}
@keyframes cloudToBolt {
    0%, 40% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(0.3) rotate(45deg); }
    50.01%, 100% { opacity: 0; }
}
@keyframes boltFromCloud {
    0%, 40% { opacity: 0; transform: scale(0.3) rotate(-45deg); }
    50% { opacity: 1; transform: scale(1) rotate(0deg); }
    90%, 100% { opacity: 1; }
}
.cloud-icon {
    color: #3498db;
    animation: cloudToBolt 3s infinite ease-in-out;
}
.bolt-icon {
    color: #f1c40f;
    animation: boltFromCloud 3s infinite ease-in-out;
}
@keyframes pulse-red {
    0% { color: #e74c3c; }
    50% { color: #c0392b; }
    100% { color: #e74c3c; }
}
.bottom-nav-btn.activate .activate-text {
    font-weight: 700;
    animation: pulse-red 1.5s infinite;
}
/* --- FIN: ANIMACIÓN --- */


/* Estilo para el botón central "Publicar" (Verde, circular, flotante) */
.bottom-nav-btn.create {
    background: radial-gradient(circle, #4CAF50, #2E7D32);
    color: white;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    box-shadow: 0 -4px 15px rgba(46, 204, 113, 0.4);
    border: 4px solid var(--color-surface);
    /* Aplicamos la animación */
    animation: floatAnimation 2s ease-in-out infinite;
}
.bottom-nav-btn.create:hover {
    background: radial-gradient(circle, #5cb85c, #39903d);
}
.bottom-nav-btn.create i {
    font-size: 1.6rem;
    margin-bottom: 0;
}
/* El botón flotante ya no existe, por lo que sus estilos se han eliminado. */
/* --- FIN DE EFECTOS AVANZADOS --- */
.main-title-app { margin-bottom: 10px; font-size: 1.8rem; }
#user-name-placeholder { color: var(--color-accent); }
.onboarding-reminder { background-color: rgba(52, 152, 219, 0.1); border: 1px solid rgba(52, 152, 219, 0.3); border-radius: var(--border-radius-medium); padding: 15px 20px; margin: 20px auto; text-align: left; font-size: 0.9rem; }
.onboarding-reminder p { margin: 5px 0; color: var(--color-text-primary); }
.onboarding-reminder strong { color: var(--color-primary); font-weight: 500; }
.dashboard-header { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
@media(min-width: 992px) { /* Cambiamos a 992px para dar más espacio a las 3 tarjetas */
    .activation-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.dashboard-widget { background-color: #fff; padding: 20px; border-radius: var(--border-radius-medium); border: 1px solid var(--color-border); }
.stat-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.stat-item:last-child { border-bottom: none; }
.stat-item span { color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 8px; }
.stat-item strong { color: var(--color-text-primary); font-weight: 500; }

/* =================================================================== */
/*   NUEVOS ESTILOS: DASHBOARD UNIFICADO Y COMPRAS                     */
/* =================================================================== */

.dashboard-features-section {
    margin-top: 35px;
    padding-top: 35px;
    border-top: 1px solid var(--color-border);
}

.features-section-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
    color: var(--color-primary);
}

.features-section-title.main-features-title i {
    color: var(--color-accent);
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.nav-btn {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 15px 20px;
    border-radius: var(--border-radius-medium);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    transition: var(--transition-medium);
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    position: relative;
}

.nav-btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-medium);
}

.nav-btn i {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
    transition: color 0.2s ease;
}

.nav-btn:hover i {
    color: #fff;
}

.nav-btn-badge {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    opacity: 0;
    transition: var(--transition-fast);
}

.nav-btn.has-badge .nav-btn-badge {
    opacity: 1;
}

.nav-btn-badge.basic {
    background-color: var(--color-accent);
}

.nav-btn-badge.elite {
    background-color: var(--color-elite);
}

/* Estilos de botones por tipo de plan */
.nav-btn[data-plan-type="basic"]:hover {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.nav-btn.nav-btn-elite.locked {
    background-color: var(--color-elite-bg);
    border: 1px dashed var(--color-elite);
    color: var(--color-elite);
}

.nav-btn.nav-btn-elite.locked i {
    color: var(--color-elite);
}

.nav-btn.nav-btn-elite.locked:hover {
    background: var(--color-elite);
    color: #fff;
    opacity: 1;
    border-style: solid;
}

.nav-btn.nav-btn-elite.locked:hover i {
    color: #fff;
}

.nav-btn.nav-btn-elite:not(.locked) {
    background-color: var(--color-elite);
    color: #fff;
    border-color: var(--color-elite);
}

.nav-btn.nav-btn-elite:not(.locked):hover {
    background-color: #8e44ad; /* Élite más oscuro */
    box-shadow: 0 10px 20px rgba(155, 89, 182, 0.3);
}

/* Sección de Compras Únicas */
.dashboard-premium-widgets {
    margin-top: 35px;
    padding-top: 35px;
    border-top: 1px solid var(--color-border);
}

.premium-widgets-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
    color: var(--color-purchase);
}

.premium-purchase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.premium-purchase-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--color-border);
    transition: var(--transition-medium);
    cursor: pointer;
    text-align: left;
}

.premium-purchase-card.locked:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--color-purchase);
}

.premium-purchase-card.unlocked {
    background-color: #f0fdf9;
    border-color: var(--color-success);
    cursor: default;
}

.premium-card-icon {
    flex-shrink: 0;
}

.premium-card-icon i {
    font-size: 1.8rem; /* Tamaño del icono */
    width: 48px;  /* Contenedor cuadrado */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Círculo perfecto */
    color: #fff;
    background-color: var(--color-text-secondary); /* Color por defecto para 'próximamente' */
}

.premium-purchase-card.locked .premium-card-icon i { 
    background-color: var(--color-purchase); 
}

.premium-purchase-card.unlocked .premium-card-icon i { 
    background-color: var(--color-success); 
}

.premium-purchase-card.locked:hover .premium-card-icon i {
    transform: scale(1.1);
    transition: var(--transition-fast);
}

.premium-card-text {
    flex-grow: 1;
}

.premium-card-text h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.premium-purchase-card.locked .premium-card-text h4 { 
    color: var(--color-text-primary); 
}

.premium-purchase-card.unlocked .premium-card-text h4 { 
    color: var(--color-success); 
}

.premium-card-text p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
}

.premium-card-price {
    margin-left: auto;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-purchase);
    white-space: nowrap;
    background-color: rgba(26, 188, 156, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
}


/* Página de Activación */
.activation-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
    align-items: stretch;
}
@media(min-width: 768px) {
    .activation-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
.activation-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-medium);
    position: relative;
}
.activation-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}
.activation-card.recommended {
    border: 2px solid var(--color-primary);
    background-color: #f8f9fa;
}
.activation-card .popular-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.7rem;
}
.activation-card h3 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.activation-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}
.activation-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}
.activation-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    flex-grow: 1;
    margin-bottom: 20px;
}

/* Secciones Extra y Cuenta */
.dashboard-extra-sections {
    margin-top: 35px;
    padding-top: 35px;
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.dashboard-card-action { 
    background-color: var(--color-accent); 
    color: #fff; 
    border-radius: var(--border-radius-medium); 
    padding: 25px; 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    text-align: left; 
    cursor: pointer; 
    transition: var(--transition-medium); 
    text-decoration: none; 
}
.dashboard-card-action:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.4); 
    background-color: #2980b9; 
}
.card-action-icon { 
    font-size: 2.5rem; 
    opacity: 0.8; 
}
.card-action-text h3 { 
    font-size: 1.3rem; 
    margin: 0 0 5px; 
    color: #fff; 
}
.card-action-text p { 
    font-size: 0.9rem; 
    line-height: 1.4; 
    opacity: 0.9; 
    margin: 0; 
}
.account-details { 
    text-align: left; 
}
.account-details p { 
    margin-bottom: 15px; 
}
.account-actions { 
    margin-top: 30px; 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
}
.account-onboarding-summary { 
    margin-top: 30px; 
    padding-top: 30px; 
    border-top: 1px solid var(--color-border); 
    text-align: left; 
}
.account-onboarding-summary h4 { 
    color: var(--color-primary); 
    margin-bottom: 15px; 
}
.onboarding-summary-item { 
    margin-bottom: 10px; 
}
.onboarding-summary-item strong { 
    display: block; 
    font-size: 0.9rem; 
    color: var(--color-text-secondary); 
}
.onboarding-summary-item span { 
    color: var(--color-text-primary); 
    font-weight: 500; 
}
/* --- INICIO DE LA PARTE 2 DE 3 --- */

.section-explanation { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 700px; margin: -10px auto 30px; line-height: 1.6; }
.xp-section { margin: 25px 0 35px; }
.level-indicator { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); background-color: #fff; padding: 6px 18px; border-radius: 20px; display: inline-block; margin-bottom: 12px; border: 1px solid var(--color-border); }
.level-indicator #user-level { font-weight: 700; color: var(--color-primary); }
.xp-bar-container { width: 100%; max-width: 400px; margin: 0 auto 8px; height: 12px; background-color: #fff; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border); }
.xp-bar-progress { height: 100%; width: 0%; background-image: linear-gradient(45deg, var(--color-warning), #f39c12); border-radius: 6px; transition: width 0.5s ease-out; }
.xp-label { font-size: 0.85rem; color: var(--color-text-secondary); position: relative; height: 1.2em; }
#xp-gain-animation { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-weight: bold; color: var(--color-success); opacity: 0; }
#xp-gain-animation.show { animation: xp-gain-pop 1.5s ease-out forwards; }
#achievements-grid, #challenges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; }
.achievement-card, .challenge-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-medium); padding: 25px; text-align: center; transition: var(--transition-medium); }
.achievement-card.locked, .challenge-card.completed { opacity: 0.6; filter: grayscale(80%); }
.achievement-card:not(.locked):hover, .challenge-card:not(.completed):hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.achievement-icon, .challenge-icon { font-size: 3rem; margin-bottom: 15px; }
.achievement-card.locked .achievement-icon { color: var(--color-text-secondary); }
.achievement-card:not(.locked) .achievement-icon { color: var(--color-warning); }
.challenge-icon { color: var(--color-accent); }
.achievement-title, .challenge-title { font-size: 1.2rem; color: var(--color-text-primary); margin-bottom: 8px; font-weight: 700; }
.achievement-desc, .challenge-desc { font-size: 0.9rem; color: var(--color-text-secondary); min-height: 40px; }
.challenge-xp-reward { margin-top: 15px; font-weight: bold; color: var(--color-warning); }
.community-posts-grid { display: grid; grid-template-columns: 1fr; gap: 25px; margin-top: 30px; text-align: left; }
.community-post-card { background: var(--color-surface); border-radius: var(--border-radius-medium); padding: 25px; border: 1px solid var(--color-border); transition: var(--transition-medium); }
.post-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.post-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.post-author-name { font-weight: 700; color: var(--color-text-primary); }
.post-timestamp { font-size: 0.8rem; color: var(--color-text-secondary); }
.post-content .post-title { font-size: 1.3rem; margin-bottom: 10px; color: var(--color-primary); font-weight: 700; }
.post-actions { display: flex; gap: 20px; margin-top: 20px; border-top: 1px solid var(--color-border); padding-top: 15px; }
.like-btn, .comment-btn { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); font-size: 1rem; display: flex; align-items: center; gap: 8px; transition: color 0.2s ease, transform 0.2s ease; }
.like-btn:hover, .comment-btn:hover { color: var(--color-text-primary); transform: scale(1.05); }
.like-btn.liked { color: var(--color-danger); }
#chat-container { height: 45vh; min-height: 300px; border: 1px solid var(--color-border); border-radius: var(--border-radius-medium); padding: 15px; overflow-y: auto; margin-bottom: 15px; background-color: var(--color-background); display: flex; flex-direction: column; gap: 12px; }
.chat-message { max-width: 85%; padding: 12px 18px; border-radius: 20px; line-height: 1.5; animation: popIn 0.3s ease-out; word-wrap: break-word; }
.chat-message.user { background-color: var(--color-accent); color: white; border-bottom-right-radius: 5px; align-self: flex-end; }
.chat-message.ai { background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); border-bottom-left-radius: 5px; align-self: flex-start; }
.chat-message.ai.typing span { display: inline-block; animation: blink-caret 1.2s infinite; background-color: var(--color-text-secondary); width: 8px; height: 8px; border-radius: 50%; margin: 0 1px; }
.chat-message.ai.typing span:nth-child(1) { animation-delay: 0s; }
.chat-message.ai.typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-message.ai.typing span:nth-child(3) { animation-delay: 0.4s; }
.chat-input-area { display: flex; gap: 10px; }
#user-input { flex-grow: 1; }
.suggestions-area { margin-top: 15px; text-align: left; }
.suggestions-area h4 { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 10px; }
#suggestions-container { display: flex; flex-wrap: wrap; gap: 10px; }
.suggestion-btn { background: rgba(0,0,0,0.05); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: var(--transition-fast); font-size: 0.9rem; }
.suggestion-btn:hover { background-color: var(--color-accent); color: white; border-color: var(--color-accent); }
/* Panel de Instrucciones del Asistente Básico */
.assistant-instructions-panel {
    background-color: var(--color-background);
    padding: 12px 20px;
    margin-top: 15px;
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: left;
}
.assistant-instructions-panel strong {
    color: var(--color-primary);
}

/* Banner Premium Rediseñado (Vibrante y Persuasivo) */
#ai-upsell-banner {
    display: none; /* Se activa con JS a 'flex' */
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    background: linear-gradient(45deg, var(--color-elite), #8e44ad);
    color: #fff;
    padding: 25px;
    margin: 0; /* Ocupa todo el ancho del footer */
    border-radius: 0;
    box-shadow: 0 -5px 20px rgba(155, 89, 182, 0.3);
    border: none;
    text-align: left;
}
@media (min-width: 768px) {
    #ai-upsell-banner {
        flex-wrap: nowrap;
        gap: 25px;
        padding: 20px 25px;
    }
}

#ai-upsell-banner .upsell-icon {
    font-size: 3rem;
    color: var(--color-warning);
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
    animation: bounceIn 1.2s ease;
    flex-shrink: 0;
}
#ai-upsell-banner .upsell-text {
    flex-grow: 1;
}
#ai-upsell-banner .upsell-text h4 {
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 12px;
    font-weight: 700;
}
#ai-upsell-banner .upsell-text h4 strong {
    color: var(--color-warning);
}
#ai-upsell-banner .upsell-features {
    font-size: 0.85rem;
    opacity: 0.95;
    list-style: none;
    padding: 0;
    margin: 0;
}
#ai-upsell-banner .upsell-features li i {
    color: var(--color-success);
}
#ai-upsell-banner .api-note {
    font-size: 0.75rem;
    margin-top: 12px;
    padding: 6px 10px;
    background-color: rgba(0,0,0,0.25);
    border-radius: var(--border-radius-small);
    display: inline-block;
    font-style: italic;
}
#ai-upsell-banner #go-to-ai-premium-btn {
    background-color: var(--color-warning);
    color: var(--color-primary) !important;
    font-weight: bold;
    flex-shrink: 0;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    align-self: center; /* Se alinea en el centro verticalmente en móvil */
}
#ai-upsell-banner #go-to-ai-premium-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Ajustes finales a la estructura del footer del chat */
.chat-footer {
    background-color: var(--color-background);
}
.suggestions-area {
    border-top: none; /* Quitamos borde superior de sugerencias */
}
.chat-input-area {
    background-color: var(--color-surface);
}
/* --- ESTILOS EXCLUSIVOS PARA LA INTERFAZ PREMIUM --- */
.card.premium-active {
    border-color: var(--color-elite);
    box-shadow: 0 0 25px rgba(155, 89, 182, 0.2);
}
.premium-active #assistant-header {
    background: linear-gradient(135deg, var(--color-elite-bg), #fdfafe);
    border-bottom-color: rgba(155, 89, 182, 0.3);
}
.premium-active #assistant-title {
    color: var(--color-elite);
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}
.premium-active .chat-message.ai {
    background: linear-gradient(45deg, var(--color-elite), #8e44ad);
    color: #fff;
    border: none;
    box-shadow: 0 4px 10px rgba(155, 89, 182, 0.4);
}
.premium-active .suggestion-btn:hover {
    background-color: var(--color-elite);
    border-color: var(--color-elite);
    color: #fff;
}
/* --- FINALIZA EL FRAGMENTO A REEMPLAZAR Y AÑADIR --- */
/* =================================================================== */
/*   ESTILOS DE MODALES Y OVERLAYS (Verificados y completos)           */
/* =================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-overlay);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
/* --- CORRECCIÓN DE APILAMIENTO: Asegura que alertas y diálogos siempre estén al frente --- */
#dialog-modal, #notification-modal {
    z-index: 1003; /* Un valor superior al spinner (1002) y al modal normal (1001) */
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-content { background: var(--color-surface); color: var(--color-text-primary); padding: clamp(20px, 5vw, 40px); border-radius: var(--border-radius-large); text-align: center; width: 90%; max-width: 500px; box-shadow: var(--shadow-heavy); position: relative; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; transform: scale(0.90) translateY(20px); }
.modal-overlay.show .modal-content { opacity: 1; transform: scale(1) translateY(0); }
.modal-content.wide { max-width: 800px; }
.modal-content.scrollable { max-height: 80vh; overflow-y: auto; text-align: left; }
/* --- ESTILOS ESPECÍFICOS PARA EL MODAL DE COMPRA DE WIDGETS --- */
#premium-widget-purchase-modal .modal-content {
    max-width: 550px; /* Limita el ancho del modal para evitar que se desborde */
}

#premium-widget-purchase-modal .benefits-list {
    text-align: left;
    margin: 20px 0;
    padding-left: 10px; /* Añade un pequeño margen interior */
}

#premium-widget-purchase-modal .benefits-list li {
    display: flex;
    align-items: flex-start; /* Alinea el ícono con la primera línea de texto */
    gap: 12px; /* Espacio entre el ícono y el texto */
    margin-bottom: 12px;
}

#premium-widget-purchase-modal .benefits-list li i {
    color: var(--color-success);
    margin-top: 4px; /* Ajuste vertical fino del ícono */
    font-size: 1.1rem;
    flex-shrink: 0; /* Evita que el ícono se encoja */
}

#premium-widget-purchase-modal .form-text {
    background: var(--color-background);
    padding: 15px;
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    margin: 20px 0;
}
.modal-close-btn { position: absolute; top: 15px; right: 15px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 50%; width: 36px; height: 36px; font-size: 1.2rem; color: var(--color-text-secondary); cursor: pointer; line-height: 1; z-index: 10; transition: var(--transition-fast); }
.modal-close-btn:hover { background-color: var(--color-danger); color: #fff; transform: rotate(90deg); }
#level-up-modal .modal-content { overflow: hidden; }
#confetti-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.level-up-icon { font-size: 5rem; display: block; margin-bottom: 10px; animation: bounceIn 0.8s ease-out; }
#level-up-modal h2 { color: var(--color-primary); }
#level-up-modal p { margin-bottom: 25px; }
.notification-content { border-left: 5px solid var(--color-success); padding: 20px 25px; text-align: left; }
.notification-content.error { border-left-color: var(--color-danger); }
#shopping-list-modal .modal-content { max-height: 85vh; display: flex; flex-direction: column; }
#shopping-list-content { overflow-y: auto; padding-right: 15px; margin-right: -15px; flex-grow: 1; }
#shopping-list-controls { display: flex; gap: 15px; justify-content: flex-end; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
#shopping-list-final { text-align: left; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--border-radius-medium); background-color: var(--color-background); animation: fadeIn 0.4s ease; }
#shopping-list-final h3 { text-align: center; color: var(--color-primary); margin-bottom: 15px; }
#shopping-list-final ul { list-style: none; padding-left: 0; columns: 2; column-gap: 20px; }
@media(max-width: 500px) { #shopping-list-final ul { columns: 1; } }
/* =================================================================== */
/*        NUEVOS ESTILOS - MODAL LISTA DE COMPRAS (v2.0)               */
/* =================================================================== */

.sl-stage-title {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}

.sl-mini-calendar .calendar-day-button {
    background: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    aspect-ratio: 1 / 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.9rem;
}

.sl-mini-calendar .calendar-day-button:not(.disabled):hover {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.sl-mini-calendar .calendar-day-button.selected {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-medium);
}

.sl-mini-calendar .calendar-day-button.disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-border);
    cursor: not-allowed;
    opacity: 0.7;
}

.sl-stage-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

/* Estilos para la lista de ingredientes (Etapa 2) */
#sl-items-list {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 10px; /* Espacio para la barra de scroll */
    margin: 20px 0;
    text-align: left;
}

.sl-category {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}
.sl-category:first-of-type {
    margin-top: 0;
}

.sl-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.sl-items-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-background);
    padding: 10px;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sl-items-grid label:hover {
    background-color: #e0e6e8;
}

/* Estilos para la lista final (Etapa 3) */
#sl-final-list-content {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    text-align: left;
    max-height: 45vh;
    overflow-y: auto;
}

#sl-final-list-content ul {
    list-style: none;
    padding-left: 0;
    columns: 2;
    column-gap: 20px;
}

@media (max-width: 600px) {
    #sl-final-list-content ul {
        columns: 1;
    }
}

#sl-final-list-content li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-border);
}
#shopping-list-final li { padding: 8px 0; border-bottom: 1px dashed var(--color-border); }
/* --- INICIO DE LA PARTE 3 DE 3 --- */

/* =================================================================== */
/*                       ESTILOS GENERALES Y DE COMPONENTES            */
/* =================================================================== */
@keyframes slideInFromRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutToLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-30px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink-caret { 0%, 100% { background-color: var(--color-text-secondary); } 50% { background-color: transparent; } }
@keyframes xp-gain-pop { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -50px); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.loading-spinner-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    display: flex; /* CAMBIO: Ahora es flex por defecto */
    flex-direction: column; /* AÑADIDO: Para alinear el texto debajo */
    align-items: center; 
    justify-content: center; 
    z-index: var(--z-spinner); 
    -webkit-backdrop-filter: blur(3px); 
    backdrop-filter: blur(3px);
    
    /* LÓGICA DE VISIBILIDAD INVERTIDA */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* LA CLAVE: La clase 'show' ya no controla 'display', sino la opacidad.
   El overlay inicial no tendrá la clase 'show' al principio, por lo que será visible. */
.loading-spinner-overlay:not(.show) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Asegura que no se pueda interactuar con el overlay oculto */
}


/* El overlay de carga inicial de app.html SÍ tiene la clase 'show' por defecto,
   así que estas reglas se aplicarán a él, haciéndolo visible al cargar. */
#initial-loading-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Cuando le quitemos la clase 'show' con JS, se aplicarán las reglas de arriba y desaparecerá. */

.spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
.empty-state-card { grid-column: 1 / -1; text-align: center; padding: 50px 20px; background-color: var(--color-background); border: 2px dashed var(--color-border); border-radius: var(--border-radius-medium); color: var(--color-text-secondary); }
.empty-state-card i { font-size: 3.5rem; margin-bottom: 20px; display: block; color: var(--color-border); }
.empty-state-card h3 { color: var(--color-text-primary); margin-bottom: 10px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 20px; }
.calendar-day { padding: 10px 5px; border-radius: var(--border-radius-medium); text-align: center; cursor: pointer; transition: var(--transition-medium); color: var(--color-text-primary); font-weight: 500; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 2px solid transparent; }
.calendar-day small { font-size: 0.75rem; font-weight: 400; opacity: 0.9; margin-top: 4px; }
.calendar-day:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-medium); }
.calendar-day.active { transform: translateY(-4px) scale(1.05); box-shadow: var(--shadow-medium); border-color: var(--color-primary); font-weight: 700; }
.day-normal { background-color: #bdc3c7; }
.day-fast-8 { background-color: var(--color-success); color: #fff; }
.day-fast-12 { background-color: var(--color-danger); color: #fff; }
.day-fast-16 { background-color: var(--color-accent); color: #fff; }
.day-exercise { background-color: var(--color-accent); color: #fff; }
.day-rest { background-color: var(--color-warning); color: var(--color-text-primary); }
.details-display { margin-top: 25px; text-align: left; background-color: var(--color-background); padding: 25px; border-radius: var(--border-radius-medium); display: none; animation: fadeIn 0.5s; border: 1px solid var(--color-border); }
.details-display h3 { color: var(--color-primary); margin-bottom: 20px; }
.meal-card { background-color: var(--color-surface); border-radius: var(--border-radius-medium); padding: 20px; margin-bottom: 15px; border: 1px solid var(--color-border); }
.meal-name { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
.meal-dish { margin-bottom: 15px; }
.meal-section { margin-top: 15px; }
.meal-section strong { color: var(--color-text-primary); }
.meal-ingredients { list-style-position: inside; padding-left: 5px; margin-top: 8px; }
.meal-ingredients li, .meal-preparation { color: var(--color-text-secondary); line-height: 1.6; }
.meal-preparation { margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 20px 0; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.legend-color { width: 15px; height: 15px; border-radius: 50%; }
.calendar-explanation { background-color: rgba(52, 152, 219, 0.1); border: 1px solid rgba(52, 152, 219, 0.4); border-radius: var(--border-radius-medium); padding: 15px; margin: -10px auto 25px; max-width: 80%; font-size: 0.9rem; color: var(--color-text-primary); line-height: 1.6; }
.calendar-explanation i { margin-right: 8px; color: var(--color-accent); }
.info-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; border-bottom: 1px solid var(--color-border); padding-bottom: 20px; }
.tab-btn { background: none; border: 2px solid transparent; border-bottom: 2px solid transparent; color: var(--color-text-secondary); padding: 10px 15px; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 500; transition: all 0.3s ease; font-size: 1rem; }
.tab-btn:hover { background-color: rgba(0,0,0,0.05); color: var(--color-text-primary); }
.tab-btn.active { font-weight: 700; color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tab-content { display: none; animation: fadeIn 0.4s ease; }
.tab-content.active { display: block; }
.info-section { text-align: left; }
.info-section h3 { margin-bottom: 15px; color: var(--color-primary); }
.info-section ol, .info-section ul { padding-left: 25px; margin-bottom: 15px; }
.info-section li { margin-bottom: 10px; color: var(--color-text-secondary); line-height: 1.8; }
.info-section-danger { background-color: rgba(231, 76, 60, 0.05); border-left: 5px solid var(--color-danger); padding: 20px; border-radius: var(--border-radius-medium); }
.info-section-danger h3, .info-section-danger h4 { color: var(--color-danger); }
.type-card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--border-radius-medium); padding: 20px; margin-top: 15px; }
.progress-container { display: grid; gap: 30px; }
@media(min-width: 768px) { .progress-container { grid-template-columns: repeat(2, 1fr); grid-template-areas: "numeric wellbeing" "diary photos" "actions actions"; } .progress-form { grid-area: numeric; } .progress-wellbeing { grid-area: wellbeing; } .progress-diary { grid-area: diary; } .progress-photos { grid-area: photos; } .progress-actions { grid-area: actions; } }
.progress-actions { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 20px; }
.daily-motivation-box { background-color: #fff; border: 1px dashed var(--color-border); padding: 20px; margin: 30px 0; border-radius: var(--border-radius-medium); font-style: italic; }
.stats-container { margin-top: 30px; min-height: 300px; }
.stats-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--color-text-secondary); padding: 40px; }
.stats-placeholder-svg { max-width: 100%; height: auto; margin-bottom: 20px; opacity: 0.5; }
.benefits-list { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.benefits-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.benefits-list li i { color: var(--color-success); margin-top: 5px; }
.user-manual-content { text-align: left; }
.manual-section { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--color-border); }
.manual-section:last-child { border-bottom: none; }
.manual-section h3 { font-size: 1.4rem; color: var(--color-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.manual-section h3 i { color: var(--color-accent); font-size: 1.5rem; }
.manual-section p { color: var(--color-text-secondary); line-height: 1.8; }
.manual-section strong { color: var(--color-primary); font-weight: 700; }
.upgrades-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
@media (min-width: 900px) { .upgrades-grid { grid-template-columns: 1fr 1fr; } }
.upgrades-grid .pricing-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-large); padding: 30px; text-align: left; display: flex; flex-direction: column; transition: var(--transition-medium); position: relative; }
.upgrades-grid .pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
.upgrades-grid .pricing-card.recommended { border: 2px solid var(--color-primary); }
.upgrades-grid .pricing-card .popular-badge, .upgrades-grid .pricing-card .ultimate-badge { position: absolute; top: -15px; left: 20px; color: #fff; padding: 6px 15px; border-radius: 20px; font-weight: 700; font-size: 0.8rem; box-shadow: var(--shadow-light); }
.upgrades-grid .pricing-card .popular-badge { background-color: var(--color-primary); }
.upgrades-grid .pricing-card .ultimate-badge { background-color: #d35400; }
.upgrades-grid .pricing-card h3 { color: var(--color-text-primary); margin-top: 20px; }
.upgrades-grid .pricing-card .card-subtitle { color: var(--color-text-secondary); font-size: 0.9rem; min-height: 3.5em; }
.upgrades-grid .pricing-card .price-wrapper { margin: 20px 0; }
.upgrades-grid .pricing-card .original-price { color: var(--color-text-secondary); text-decoration: line-through; }
.upgrades-grid .pricing-card .final-price { font-weight: 800; font-size: 2.8rem; }
.upgrades-grid .pricing-card .final-price.price-2 { color: var(--color-primary); }
.upgrades-grid .pricing-card .final-price.price-3 { color: #d35400; }
.upgrades-grid .pricing-card .final-price span { font-size: 1rem; font-weight: 500; }
.upgrades-grid .pricing-card .offer-details { color: var(--color-text-secondary); font-size: 0.85rem; }
.upgrades-grid .pricing-card .features-list { border-top: 1px solid var(--color-border); margin-top: 20px; padding-top: 20px; flex-grow: 1; list-style: none; padding-left: 0; }
.upgrades-grid .pricing-card .features-list li { color: var(--color-text-secondary); margin-bottom: 15px; display: flex; gap: 10px; align-items: flex-start; }
.upgrades-grid .pricing-card .features-list li i { color: var(--color-primary); margin-top: 4px; }
.upgrades-grid .pricing-card .features-list strong { color: var(--color-text-primary); }
.upgrades-grid .pricing-card .btn, .upgrades-grid #upgrade-elite-paypal-container { margin-top: auto; width: 100%; }
.upgrades-grid .btn-ultimate { border-color: #d35400; color: #d35400; background: transparent; }
.upgrades-grid .btn-ultimate:hover { background: #d35400; color: #fff; }
#upgrade-elite-paypal-container .paypal-buttons { max-width: 300px; margin: auto; }
.question-block { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.question-block legend { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 15px; }
.question-block .radio-group { flex-direction: column; align-items: flex-start; gap: 12px; }
.question-block .radio-group label { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--color-text-primary); cursor: pointer; }
#ayuno-total-form button[type="submit"] { width: 100%; margin-top: 20px; }
.assessment-progress-bar-container { width: 100%; height: 10px; background-color: var(--color-border); border-radius: 5px; margin: 15px 0 25px; overflow: hidden; }
.assessment-progress-bar { width: 0%; height: 100%; background-color: var(--color-success); border-radius: 5px; transition: width 0.4s ease; }
.assessment-form { max-height: 55vh; overflow-y: auto; padding: 5px; margin: 0 -5px 20px; text-align: left; }
.assessment-step { display: none; animation: fadeIn 0.5s ease-in-out; }
.assessment-step.active { display: block; }
.assessment-nav { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border); }
#assessment-prev-btn { visibility: hidden; }
#assessment-next-btn,
#assessment-prev-btn { min-width: 120px; }
.dashboard-notifications { margin-top: 35px; padding-top: 35px; border-top: 1px solid var(--color-border); text-align: left; }
.notifications-title { font-size: 1.5rem; margin-bottom: 20px; color: var(--color-primary); display: flex; align-items: center; gap: 10px; }
.notifications-content { background-color: var(--color-background); border-radius: var(--border-radius-medium); padding: 20px; min-height: 80px; }
.notification-item { background-color: #fff; padding: 15px; border-radius: var(--border-radius-small); border-left: 5px solid var(--color-accent); margin-bottom: 10px; box-shadow: var(--shadow-light); }
.notification-item p { margin: 0; color: var(--color-text-primary); }
.notification-item .timestamp { font-size: 0.8rem; color: var(--color-text-secondary); display: block; margin-top: 5px; }
.no-notifications { color: var(--color-text-secondary); text-align: center; padding: 10px; }

/* =================================================================== */
/*        NUEVOS ESTILOS - PÁGINAS LEGALES Y RESERVAS                  */
/* =================================================================== */
.legal-links-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
}
@media (min-width: 600px) {
    .legal-links-container {
        grid-template-columns: 1fr 1fr;
    }
}
.legal-link-item {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 1.2rem;
    transition: var(--transition-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.legal-link-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.legal-link-item i {
    font-size: 2.5rem;
    color: var(--color-accent);
}
.legal-link-inline {
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}
#legal-modal-content h4 {
    color: var(--color-primary);
    margin-top: 25px;
    margin-bottom: 10px;
}
#legal-modal-content ul {
    list-style-position: inside;
    padding-left: 10px;
}
#legal-modal-content ul li {
    margin-bottom: 10px;
}
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9rem;
    overflow-x: auto;
    display: block;
}
.privacy-table th, .privacy-table td {
    border: 1px solid var(--color-border);
    padding: 12px;
    text-align: left;
}
.privacy-table thead {
    background-color: var(--color-background);
}
.privacy-table th {
    font-weight: 700;
}
.booking-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media(min-width: 768px) {
    .booking-container {
        grid-template-columns: 1fr 1fr;
    }
}
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.calendar-nav h3 {
    color: var(--color-primary);
    font-size: 1.2rem;
}
.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.calendar-day-header {
    text-align: center;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}
.calendar-day-button {
    background: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}
.calendar-day-button:not(.disabled):hover {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.calendar-day-button.selected {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: scale(1.1);
}
.calendar-day-button.disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-border);
    cursor: not-allowed;
}
.day-number { font-size: 1.1rem; font-weight: 500; }
.day-name { font-size: 0.7rem; }

.booking-time-slots h4 {
    margin-bottom: 20px;
    text-align: center;
}
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}
.time-slot-button {
    padding: 10px;
    border-radius: var(--border-radius-small);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}
.time-slot-button:not(.disabled):hover {
    background-color: var(--color-accent);
    color: #fff;
}
.time-slot-button.selected {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.time-slot-button.disabled {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    text-decoration: line-through;
}
.time-slots-placeholder {
    padding: 40px 20px;
    text-align: center;
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
}
.booking-confirmation {
    margin-top: 30px;
    padding: 20px;
    border: 2px solid var(--color-success);
    border-radius: var(--border-radius-medium);
    text-align: center;
}
#booking-summary-text {
    font-size: 1.1rem;
    margin-bottom: 20px;
}
#booking-summary-text strong {
    color: var(--color-primary);
}
#booking-paypal-container .paypal-buttons {
    max-width: 300px;
    margin: auto;
}
/* =================================================================== */
/*   ESTILOS MEJORADOS PARA EL FORMULARIO DE ONBOARDING (VIBRANTE)     */
/* =================================================================== */

#page-onboarding .card {
    max-width: 800px; /* Un poco más de espacio para la rejilla */
    padding: 40px;
}

#onboarding-form .form-group {
    margin-bottom: 35px;
}

#onboarding-form legend {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
}

/* Clave para el diseño de rejilla */
#onboarding-form .radio-group {
    display: grid;
    /* Crea una rejilla flexible que se adapta al espacio */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

#onboarding-form .radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-weight: 600;
    min-height: 80px;
}

#onboarding-form .radio-group label:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

#onboarding-form .radio-group input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* No necesitamos el pseudo-elemento ::before en este diseño */
#onboarding-form .radio-group span::before {
    display: none; 
}

/* Estilo para la opción seleccionada */
#onboarding-form .radio-group label:has(input:checked) {
    background: linear-gradient(45deg, var(--color-accent), #5dade2);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}
/* --- INICIO DE NUEVOS ESTILOS (Añadir al final de app.css) --- */

/* =================================================================== */
/*        NUEVO MODAL DE CARGA DIVERTIDO                               */
/* =================================================================== */

.fun-loading-modal {
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    max-width: 300px;
}

#fun-loading-text {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 25px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    animation: fadeInText 0.5s ease-out forwards;
}

@keyframes fadeInText {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hourglass {
    position: relative;
    width: 60px;
    height: 100px;
    margin: 0 auto;
    animation: flip 4s infinite linear;
}

.hourglass-top,
.hourglass-bottom {
    position: absolute;
    width: 60px;
    height: 50px;
    border: 3px solid #FFF;
    overflow: hidden;
}

.hourglass-top {
    top: 0;
    border-radius: 30px 30px 0 0;
}

.hourglass-bottom {
    bottom: 0;
    border-radius: 0 0 30px 30px;
}

.hourglass-top::before,
.hourglass-bottom::before {
    content: '';
    position: absolute;
    width: 100%;
    background-color: var(--color-warning);
}

/* Arena en la parte superior */
.hourglass-top::before {
    height: 100%;
    top: 0;
    animation: sand-fall 4s infinite linear;
}

/* Arena en la parte inferior */
.hourglass-bottom::before {
    height: 0;
    bottom: 0;
    animation: sand-fill 4s infinite linear;
}


@keyframes sand-fall {
    0%, 10% { height: 100%; }
    90%, 100% { height: 0; }
}

@keyframes sand-fill {
    0%, 10% { height: 0; }
    90%, 100% { height: 100%; }
}

@keyframes flip {
    0%, 90% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}


/* ... (todo el código CSS existente hasta el final) ... */
@keyframes flip{0%, 90%{transform:rotate(0deg)}100%{transform:rotate(180deg)}}

/* =================================================================== */
/*        MEJORA DE UI: OCULTAR ELEMENTOS DURANTE ONBOARDING           */
/* =================================================================== */
body.app-locked .bottom-nav,
body.app-locked .bottom-nav-legacy, /* Se asegura de ocultar la barra antigua */
body.app-locked .bottom-nav-new,   /* ¡CORRECCIÓN CLAVE! Oculta la nueva barra */
body.app-locked .floating-assistant {
    display: none;
}

/* --- FIN DE NUEVOS ESTILOS --- */
/* =================================================================== */
/*   ESTILOS MEJORADOS PARA EL FORMULARIO DE ONBOARDING (VIBRANTE)     */
/* =================================================================== */

#page-onboarding .card {
    max-width: 800px; /* Un poco más de espacio para la rejilla */
    padding: 40px;
}

#onboarding-form .form-group {
    margin-bottom: 35px;
}

#onboarding-form legend {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
}

/* Clave para el diseño de rejilla */
#onboarding-form .radio-group {
    display: grid;
    /* Crea una rejilla flexible que se adapta al espacio */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

#onboarding-form .radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: none;
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-weight: 600;
    min-height: 80px;
}

#onboarding-form .radio-group label:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-medium);
}

#onboarding-form .radio-group input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* No necesitamos el pseudo-elemento ::before en este diseño */
#onboarding-form .radio-group span::before {
    display: none; 
}

/* Estilo para la opción seleccionada */
#onboarding-form .radio-group label:has(input:checked) {
    background: linear-gradient(45deg, var(--color-accent), #5dade2);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

/* --- INICIO: NUEVOS ESTILOS PARA INDICADOR DE VALIDACIÓN --- */
#page-onboarding .validation-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 12px 18px;
    border-radius: var(--border-radius-medium);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease-in-out;
}

#page-onboarding .indicator-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid;
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

#page-onboarding .indicator-checkbox i {
    color: white;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Estado Desactivado (por defecto) */
#page-onboarding .validation-indicator.disabled {
    background-color: var(--color-background);
    color: var(--color-text-secondary);
}
#page-onboarding .validation-indicator.disabled .indicator-checkbox {
    border-color: var(--color-border);
}

/* Estado Activado (éxito) */
#page-onboarding .validation-indicator.success {
    background-color: #e8f9f1; /* Verde muy claro */
    color: var(--color-success);
}
#page-onboarding .validation-indicator.success .indicator-checkbox {
    background-color: var(--color-success);
    border-color: var(--color-success);
}
#page-onboarding .validation-indicator.success .indicator-checkbox i {
    opacity: 1;
    transform: scale(1);
}

/* Estilo para el botón desactivado */
#onboarding-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
    box-shadow: none;
}
#onboarding-submit-btn:disabled:hover {
    transform: none;
}
/* --- FIN: NUEVOS ESTILOS PARA INDICADOR DE VALIDACIÓN --- */
/* =================================================================== */
/*        ESTILOS PARA CUESTIONARIO EN MODAL DE SERVICIOS              */
/* =================================================================== */

.service-modal-content .radio-group.vertical {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.service-modal-content .radio-group.vertical label {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 500;
    min-height: 80px;
}

.service-modal-content .radio-group.vertical label:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
    border-color: var(--color-accent);
}

.service-modal-content .radio-group.vertical input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* Estilo para la opción seleccionada */
.service-modal-content .radio-group.vertical label:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.service-modal-content .radio-group.vertical label:has(input:checked) span {
    font-weight: 700;
}
/* =================================================================== */
/*        ESTILOS PARA CUESTIONARIO EN MODAL DE SERVICIOS              */
/* =================================================================== */

.service-modal-content .radio-group.vertical {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.service-modal-content .radio-group.vertical label {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 500;
    min-height: 80px;
}

.service-modal-content .radio-group.vertical label:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
    border-color: var(--color-accent);
}

.service-modal-content .radio-group.vertical input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* Estilo para la opción seleccionada */
.service-modal-content .radio-group.vertical label:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.service-modal-content .radio-group.vertical label:has(input:checked) span {
    font-weight: 700;
}
/* =================================================================== */
/*        ESTILOS PARA CUESTIONARIO EN MODAL DE SERVICIOS              */
/* =================================================================== */

.service-modal-content .radio-group.vertical {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.service-modal-content .radio-group.vertical label {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 500;
    min-height: 80px;
}

.service-modal-content .radio-group.vertical label:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
    border-color: var(--color-accent);
}

.service-modal-content .radio-group.vertical input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* Estilo para la opción seleccionada */
.service-modal-content .radio-group.vertical label:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.service-modal-content .radio-group.vertical label:has(input:checked) span {
    font-weight: 700;
}
/* =================================================================== */
/*        ESTILOS PARA CUESTIONARIO EN MODAL DE SERVICIOS              */
/* =================================================================== */

.service-modal-content .radio-group.vertical {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.service-modal-content .radio-group.vertical label {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 500;
    min-height: 80px;
}

.service-modal-content .radio-group.vertical label:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
    border-color: var(--color-accent);
}

.service-modal-content .radio-group.vertical input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* Estilo para la opción seleccionada */
.service-modal-content .radio-group.vertical label:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.service-modal-content .radio-group.vertical label:has(input:checked) span {
    font-weight: 700;
}
/* =================================================================== */
/*        ESTILOS PARA CUESTIONARIO EN MODAL DE SERVICIOS              */
/* =================================================================== */

.service-modal-content .radio-group.vertical {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.service-modal-content .radio-group.vertical label {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 500;
    min-height: 80px;
}

.service-modal-content .radio-group.vertical label:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
    border-color: var(--color-accent);
}

.service-modal-content .radio-group.vertical input[type="radio"] {
    display: none; /* Oculta el botón de radio real */
}

/* Estilo para la opción seleccionada */
.service-modal-content .radio-group.vertical label:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.service-modal-content .radio-group.vertical label:has(input:checked) span {
    font-weight: 700;
}
/* =================================================================== */
/*        ESTILOS DEFINITIVOS PARA SERVICIOS PERSONALIZADOS            */
/* =================================================================== */

.dashboard-services-section {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.services-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Siempre dos columnas */
    gap: 25px;
    margin-top: 20px;
}

.service-box {
    display: flex;
    flex-direction: column;   /* La clave para el diseño vertical */
    align-items: center;      /* Centra todo horizontalmente */
    text-align: center;
    padding: 30px 25px;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease-in-out;
}

.service-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.service-box-icon {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
    border-radius: 50%;
}

.service-box-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--color-text-primary);
}

.service-box-description {
    text-align: justify; /* Justifica el texto del párrafo */
    color: var(--color-text-secondary);
    flex-grow: 1;       /* Empuja el precio y el botón hacia abajo */
    margin-bottom: 15px;
    min-height: 90px;
}

.service-box-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 20px;
}

.service-box .btn {
    width: 100%;
}

/* --- Responsividad para pantallas pequeñas --- */
@media (max-width: 768px) {
    .services-grid-container {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
    }
}

/* =================================================================== */
/*        ESTILOS PARA CUESTIONARIO EN MODAL DE SERVICIOS              */
/* =================================================================== */

.service-modal-content .form-group {
    margin-bottom: 35px;
}

.service-modal-content .radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.service-modal-content .radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 15px;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: 500;
    min-height: 80px;
}

.service-modal-content .radio-group label:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-light);
    border-color: var(--color-accent);
}

.service-modal-content .radio-group input[type="radio"] {
    display: none;
}

.service-modal-content .radio-group label:has(input:checked) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.25);
}

.service-modal-content .radio-group label:has(input:checked) span {
    font-weight: 700;

}
/* --- INICIO DE NUEVOS ESTILOS (Añadir al final de app.css) --- */

/* =================================================================== */
/*        NUEVO MODAL DE CARGA DIVERTIDO                               */
/* =================================================================== */

.fun-loading-modal {
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    max-width: 300px;
}

#fun-loading-text {
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 25px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    animation: fadeInText 0.5s ease-out forwards;
}

@keyframes fadeInText {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hourglass {
    position: relative;
    width: 60px;
    height: 100px;
    margin: 0 auto;
    animation: flip 4s infinite linear;
}

.hourglass-top,
.hourglass-bottom {
    position: absolute;
    width: 60px;
    height: 50px;
    border: 3px solid #FFF;
    overflow: hidden;
}

.hourglass-top {
    top: 0;
    border-radius: 30px 30px 0 0;
}

.hourglass-bottom {
    bottom: 0;
    border-radius: 0 0 30px 30px;
}

.hourglass-top::before,
.hourglass-bottom::before {
    content: '';
    position: absolute;
    width: 100%;
    background-color: var(--color-warning);
}

/* Arena en la parte superior */
.hourglass-top::before {
    height: 100%;
    top: 0;
    animation: sand-fall 4s infinite linear;
}

/* Arena en la parte inferior */
.hourglass-bottom::before {
    height: 0;
    bottom: 0;
    animation: sand-fill 4s infinite linear;
}


@keyframes sand-fall {
    0%, 10% { height: 100%; }
    90%, 100% { height: 0; }
}

@keyframes sand-fill {
    0%, 10% { height: 0; }
    90%, 100% { height: 100%; }
}

@keyframes flip {
    0%, 90% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}


/* --- CÓDIGO NUEVO Y CORREGIDO --- */
/* =================================================================== */
/*        MEJORA DE UI: OCULTAR ELEMENTOS DURANTE ONBOARDING (V3)      */
/* =================================================================== */

/* Oculta los elementos no conflictivos de la UI cuando la app está bloqueada. */
body.app-locked .floating-assistant,
body.app-locked .bottom-nav-legacy {
    display: none;
}

/* ¡REGLA DE MÁXIMA PRIORIDAD!
   Cuando el body tenga AMBAS clases, la de la nueva interfaz Y la de bloqueo,
   la barra de navegación DEBE ocultarse. Este selector es más específico y anula
   la regla 'display: flex' que causaba el problema. */
body.new-interface-active.app-locked .bottom-nav-new {
    display: none;
}
/* =================================================================== */
/*        OLEADA 2: ESTILOS PARA LA INTERFAZ BLOQUEADA               */
/* =================================================================== */

/* Deshabilita los clics y baja la opacidad de los botones de navegación bloqueados */
body.app-locked .bottom-nav-btn,
body.app-locked .nav-btn,
body.app-locked .floating-assistant,
body.app-locked .service-box .btn,
body.app-locked .premium-purchase-card.locked {
    pointer-events: none;
    opacity: 0.6;
}

/* Excepto los botones que sí queremos permitir */
body.app-locked .nav-btn[data-page="page-account"],
body.app-locked .nav-btn[data-page="page-legal"] {
    pointer-events: auto;
    opacity: 1;
}

/* Opcional: añade un cursor de "no permitido" para mayor claridad */
body.app-locked .bottom-nav-btn,
body.app-locked .nav-btn:not([data-page="page-account"]):not([data-page="page-legal"]),
body.app-locked .floating-assistant {
    cursor: not-allowed;
}

/* Opcional: Añade un banner de aviso en la parte superior */
body.app-locked::before {
    content: 'Modo de Activación: Desbloquea tu plan para acceder a todas las funciones.';
    display: block;
    background-color: var(--color-warning);
    color: var(--color-text-primary);
    text-align: center;
    padding: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}
/* =================================================================== */
/*        MEJORA: ESTILOS PARA LA TABLA DE HISTORIAL DE PROGRESO     */
/* =================================================================== */

#progress-history-container {
    margin-top: 30px;
    overflow-x: auto; /* Permite scroll horizontal en pantallas pequeñas */
}

.progress-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.progress-history-table th,
.progress-history-table td {
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    text-align: center;
}

.progress-history-table thead {
    background-color: var(--color-background);
    color: var(--color-primary);
    font-weight: 600;
}

.progress-history-table tbody tr:nth-child(even) {
    background-color: var(--color-background);
}

.progress-history-table td.notes-cell {
    text-align: left;
    max-width: 250px; /* Evita que la columna de notas sea demasiado ancha */
    white-space: pre-wrap; /* Respeta los saltos de línea en las notas */
    font-size: 0.85rem;
    line-height: 1.5;
}
/* =================================================================== */
/*        MEJORA: ESTILO PARA EL BOTÓN DE BORRAR PROGRESO            */
/* =================================================================== */

#delete-progress-btn {
    background-color: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}

#delete-progress-btn:hover {
    background-color: var(--color-danger);
    color: #fff;
}
/* =================================================================== */
/*        MEJORA: ESTILOS PARA LA GALERÍA DE PROGRESO                */
/* =================================================================== */

.progress-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light);
    aspect-ratio: 1 / 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px 10px 10px;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
}
/* =================================================================== */
/*        MEJORA: ESTILO PARA EL CONTADOR DE GALERÍA                 */
/* =================================================================== */
.badge {
    background-color: var(--color-primary);
    color: white;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    margin-left: 8px;
    font-weight: bold;
}
/* =================================================================== */
/*        MEJORA: ESTILOS PARA LA PÁGINA "MI VIAJE DE AYUNO"            */
/* =================================================================== */

.saved-profile, .recurring-log-section, .log-history-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
    text-align: left;
}

.saved-profile h4, .recurring-log-section h4, .log-history-section h4 {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.profile-item {
    margin-bottom: 15px;
}

.profile-item strong {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.profile-item p {
    color: var(--color-text-primary);
    font-weight: 500;
    padding-left: 10px;
    border-left: 3px solid var(--color-accent);
}

.log-entry {
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    margin-bottom: 15px;
}

.log-entry-header {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}
/* =================================================================== */
/*        PASO A: ESTILOS PARA INTEGRACIÓN TOTAL Y GAMIFICACIÓN        */
/* =================================================================== */

/* --- Estilos para la nueva sección del Dashboard --- */
.dashboard-journal-section {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .dashboard-journal-section {
        grid-template-columns: 1fr 1fr;
    }
}

.journal-card {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.journal-card:hover {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.journal-card:hover .card-action-text h3,
.journal-card:hover .card-action-text p {
    color: #fff;
}

/* --- Estilos para los enlaces recíprocos --- */
.reciprocal-link {
    display: block;
    text-align: center;
    margin: -10px auto 20px;
    padding: 8px 15px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
}
/* =================================================================== */
/*        PASO 3: LÓGICA DE BLOQUEO DE FUNCIONES (VISUAL)              */
/* =================================================================== */

/* 1. Estilo base para cualquier elemento bloqueado */
.locked {
    opacity: 0.65;
    pointer-events: none; /* Desactiva clics y hovers */
    cursor: not-allowed;
    position: relative; /* Necesario para posicionar el candado */
    overflow: hidden;
}

/* 2. Estilo para el icono del candado */
.locked::after {
    content: '\f023'; /* Código del ícono de candado en Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    z-index: 1;
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* 3. Posicionamiento del candado para los botones de la cuadrícula (.nav-btn) */
.nav-btn.locked::after {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

/* 4. Posicionamiento del candado para los botones de la barra inferior (.bottom-nav-btn) */
.bottom-nav-btn.locked::after {
    top: 5px; /* Ajuste vertical */
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
}
.reciprocal-link:hover {
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-light);
}

/* --- Estilos para el visor de XP (Toast) --- */
.xp-toast {
    position: fixed;
    bottom: 80px; /* Encima de la barra de navegación */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #f1c40f, #f39c12);
    color: var(--color-primary);
    padding: 12px 25px;
    border-radius: 50px;
    box-shadow: var(--shadow-heavy);
    font-size: 1.1rem;
    font-weight: bold;
    z-index: 1005;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transición con "rebote" */
}

.xp-toast.show {
    opacity: 1;
    visibility: visible;
    bottom: 100px; /* Sube un poco al aparecer */
}
/* =================================================================== */
/*        PASO B: ESTILOS PARA INTERFAZ PREMIUM Y ENLACES FLOTANTES    */
/* =================================================================== */

/* --- Estilos para los Círculos Flotantes --- */
.float-link-btn {
    position: fixed;
    bottom: 85px; /* Encima de la barra de navegación */
    left: 20px; /* En el lado izquierdo */
    width: 60px;
    height: 60px;
    background-color: var(--color-accent);
    color: white;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-heavy);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 900;
    transition: all 0.3s ease;
}

.float-link-btn:hover {
    transform: scale(1.1) rotate(-10deg);
    background-color: #2980b9;
}

/* --- Estilos para el Visor de XP en la parte superior --- */
/* Modificamos el .xp-toast existente */
.xp-toast {
    top: 20px; /* Lo movemos arriba */
    bottom: auto;
    background: linear-gradient(45deg, #2ecc71, #27ae60); /* Verde éxito */
    color: white;
    font-family: 'Poppins', sans-serif;
    transform: translate(-50%, -100px); /* Posición inicial fuera de la pantalla */
}

.xp-toast.show {
    bottom: auto;
    top: 20px; /* Posición final */
    transform: translateX(-50%);
}

.xp-toast .xp-amount {
    font-size: 1.5em;
    font-weight: 800;
    margin-right: 8px;
    vertical-align: middle;
    /* Animación de color */
    animation: color-pulse 1s infinite alternate;
}

@keyframes color-pulse {
    from { color: #f1c40f; text-shadow: 0 0 5px #f1c40f; }
    to { color: #ffffff; text-shadow: none; }
}
/* =================================================================== */
/*        PASO C: ESTILOS PARA PULIDO FINAL DEL DASHBOARD              */
/* =================================================================== */

/* --- Estilo para el total de XP en el Dashboard --- */
.level-indicator #user-xp-total {
    font-weight: 800;
    color: #f1c40f; /* Dorado */
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.7);
}

/* --- Nuevo estilo para el mensaje motivador central --- */
.dashboard-motivation-quote {
    text-align: center;
    margin: 30px 20px;
    padding: 20px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}
/* =================================================================== */
/*        MEJORA DE GAMIFICACIÓN: ESTILOS VISUALES                     */
/* =================================================================== */

/* Da color verde y un brillo sutil al contador de XP actual */
.xp-label #user-xp-current {
    font-weight: 700;
    color: #2ecc71; /* Verde éxito */
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
    transition: color 0.3s ease;
}
/* =================================================================== */
/*        MEJORA DE GAMIFICACIÓN: ESTILOS INTERACTIVOS                 */
/* =================================================================== */

/* Estilo para el modal de progreso del reto */
.challenge-progress-display {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 20px 0;
    color: var(--color-primary);
}

.challenge-progress-display .progress-value {
    color: var(--color-accent);
}

#check-in-btn:disabled {
    background-color: var(--color-border);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Sello de "LOGRADO" para retos completados */
.challenge-card.completed {
    position: relative;
    overflow: hidden;
}

.challenge-card.completed::after {
    content: '✓ LOGRADO';
    position: absolute;
    top: 15px;
    right: -45px;
    background-color: var(--color-success);
    color: white;
    padding: 5px 40px;
    font-weight: bold;
    font-size: 0.8rem;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.post-header {
    justify-content: space-between; /* Alinea el nombre a la izq y el botón a la der */
}

.delete-post-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.delete-post-btn:hover {
    color: var(--color-danger);
    transform: scale(1.1);
}
/* app.css (AÑADIR AL FINAL) */

/* =================================================================== */
/*        NUEVO: ESTILOS PARA EL CONTENEDOR CENTRAL DE WIDGETS         */
/* =================================================================== */

.dashboard-core-widgets {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

@media(min-width: 768px) {
    .dashboard-core-widgets {
        grid-template-columns: 1fr 1fr; /* Dos columnas en escritorio */
    }
}

/* Los widgets y las tarjetas de acción dentro de este contenedor */
.dashboard-core-widgets .dashboard-widget,
.dashboard-core-widgets .dashboard-card-action {
    margin-top: 0; /* Reseteamos el margen que tenían antes */
}

/* Ajustes para las tarjetas de acción dentro de la nueva rejilla */
.dashboard-core-widgets .dashboard-card-action {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    box-shadow: none; /* Quitamos la sombra por defecto */
}

.dashboard-core-widgets .dashboard-card-action:hover {
    background-color: var(--color-primary);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.dashboard-core-widgets .dashboard-card-action:hover h3,
.dashboard-core-widgets .dashboard-card-action:hover p,
.dashboard-core-widgets .dashboard-card-action:hover .card-action-icon {
    color: #fff;
}

.dashboard-core-widgets .card-action-icon {
    color: var(--color-accent);
    transition: color 0.3s ease;
}

.dashboard-core-widgets .card-action-text h3 {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.dashboard-core-widgets .card-action-text p {
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

/* Eliminamos las clases antiguas que ya no son necesarias para el layout */
.dashboard-header {
   display: contents; /* Hace que este div no afecte el layout de la rejilla */
}
.dashboard-journal-section {
    display: contents; /* Hace que este div no afecte el layout de la rejilla */
}
/* =================================================================== */
/*        OPERACIÓN CADENA DE MANDO: ESTILOS PARA CUESTIONARIOS        */
/* =================================================================== */

.service-modal-content fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.service-modal-content legend {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}
* =================================================================== */
/*        ESTILOS PARA EL EXPEDIENTE PERSONAL                          */
/* =================================================================== */

.expediente-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large);
    padding: 20px 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-light);
}
.expediente-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    color: var(--color-primary);
}
.expediente-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.expediente-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
    border-left: 4px solid var(--color-primary);
}
.expediente-item.past { border-left-color: var(--color-text-secondary); opacity: 0.8; }
.expediente-item.success { border-left-color: var(--color-success); }
.expediente-item.warning, .expediente-item.danger { border-left-color: var(--color-danger); }
.expediente-item.info { border-left-color: var(--color-accent); }

.expediente-icon { 
    font-size: 1.5rem; 
    color: var(--color-text-secondary); 
    width: 25px; 
    text-align: center; 
    margin-top: 2px;
}
.expediente-details { 
    flex: 1; 
    text-align: left; 
}
.expediente-details strong { 
    display: block; 
    margin-bottom: 5px; 
    color: var(--color-text-primary); 
}
.expediente-details span { 
    font-size: 0.9rem; 
    color: var(--color-text-secondary); 
}
.expediente-details .notification-date { 
    font-size: 0.75rem; 
    opacity: 0.8; 
    display: block; 
    margin-top: 5px; 
}
.expediente-status { 
    font-size: 0.8rem; 
    font-weight: bold; 
    color: var(--color-text-secondary); 
    align-self: center; 
}
.empty-state-text {
    padding: 20px 0;
    text-align: center;
    color: var(--color-text-secondary);
}
.spinner-container {
    text-align: center;
    padding: 40px 0;
}
.spinner-container p {
    margin-top: 15px;
}/* AÑADIR AL FINAL DE app.css */

/* --- Paleta de Colores para Logros --- */
:root {
    --color-ach-bronce: #CD7F32;
    --color-ach-plata: #C0C0C0;
    --color-ach-oro: #FFD700;
    --color-ach-platino: #E5E4E2;
    --color-ach-diamante: #B9F2FF;
    --color-ach-adamantio: #2ecc71;
    --color-ach-vibranium: #9b59b6;
    /* Puedes añadir más colores aquí */
}

/* --- Estilos para las Tarjetas de Logro --- */
.achievement-card {
    position: relative;
    border-width: 2px;
    padding-top: 40px; /* Espacio para el XP */
}

/* Estado Bloqueado (por defecto) */
.achievement-card.locked {
    background-color: var(--color-background);
    filter: grayscale(90%);
    opacity: 0.7;
}

.achievement-card.locked .achievement-icon {
    color: var(--color-text-secondary);
}

/* Estado Desbloqueado */
.achievement-card:not(.locked) {
    border-color: var(--ach-color, var(--color-warning));
    box-shadow: 0 0 15px 0px var(--ach-color, var(--color-warning));
}

.achievement-card:not(.locked) .achievement-icon {
    color: var(--ach-color, var(--color-warning));
    animation: bounceIn 0.5s ease;
}

/* Nuevo: Visor de XP para Desbloqueo */
.achievement-xp-unlock {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    color: var(--color-surface);
    font-weight: bold;
    font-size: 0.8rem;
    padding: 5px 15px;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-light);
    display: flex;
    align-items: center;
    gap: 5px;
}

.achievement-card:not(.locked) .achievement-xp-unlock {
    background-color: var(--ach-color, var(--color-warning));
    color: var(--color-primary);
}

.achievement-xp-unlock i {
    color: #f1c40f; /* Color de la estrella de XP */
}
/* =================================================================== */
/*      INICIA EL BLOQUE COMPLETO A AÑADIR AL FINAL DE APP.CSS         */
/* =================================================================== */

/* --- Estilos para el Header de Estado de Membresía --- */
.membership-status-header {
    background-color: var(--color-primary);
    color: var(--color-surface);
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: var(--shadow-medium);
}

.membership-status-header p {
    margin: 0;
    font-weight: 500;
}

.membership-status-header i {
    margin-right: 8px;
}

.membership-status-header strong {
    color: var(--color-warning);
}

.membership-actions {
    display: none; /* Se mostrarán con JS cuando sea necesario */
    gap: 10px;
}

.membership-actions .btn {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: none;
}

.membership-actions .btn-primary-glow {
    background-color: var(--color-secondary);
    color: #fff;
}

/* --- Estilos para el Panel de Administración --- */
.admin-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--color-border);
    text-align: left;
}

.admin-section h3 {
    color: var(--color-primary);
    margin-bottom: 20px;
}
/* =================================================================== */
/*        NUEVOS ESTILOS PARA LA BARRA DE ESTADO EN "MI CUENTA"        */
/* =================================================================== */

#account-status-bar-container {
    margin: 30px 0;
}

.account-status-bar {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

@media (min-width: 600px) {
    .account-status-bar {
        flex-direction: row;
        justify-content: space-between;
    }
}

.account-status-bar.trial {
    background-color: #fff9e6;
    border-color: var(--color-warning);
}

.account-status-bar p {
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
}

.account-status-bar p strong {
    color: var(--color-primary);
}

.account-status-bar.trial p strong {
    color: var(--color-danger);
}

.account-status-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
}

.admin-table thead {
    background-color: var(--color-background);
}

.admin-table th {
    font-weight: 600;
}

.admin-table .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.notification-approval-card {
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    margin-bottom: 15px;
}

.notification-approval-card p {
    margin: 0 0 10px 0;
}

.notification-approval-card .form-group {
    margin-bottom: 15px;
}
/* (El archivo termina aquí) */

/* --- ESTILOS PARA EL HEADER DE PRUEBA GRATUITA --- */
.trial-status-header {
    background: linear-gradient(45deg, var(--color-accent), #5dade2);
    color: var(--color-surface);
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: var(--shadow-medium);
}
.trial-status-header p {
    margin: 0;
    font-weight: 500;
}
.trial-status-header i {
    margin-right: 8px;
}
.trial-status-header strong {
    color: var(--color-warning);
}
.trial-status-header .btn {
    background-color: var(--color-surface);
    color: var(--color-accent);
    border: none;
}
/* (El archivo termina aquí) */

/* --- ESTILOS PARA LA TARJETA DE PRUEBA EN LA PÁGINA DE ACTIVACIÓN --- */
.activation-card.free-trial {
    
    border-style: dashed;
    border-color: var(--color-accent);
    background-color: var(--color-background);
}
.activation-card.free-trial .activation-price {
    color: var(--color-success);
}
.activation-card.free-trial .btn-secondary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.activation-card.free-trial .btn-secondary:hover {
    background-color: var(--color-accent);
    color: #fff;
}
/* (El archivo termina aquí) */

/* --- ESTILOS PARA BOTÓN DESHABILITADO (GHOST) --- */
.btn-disabled-ghost {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}
.btn-disabled-ghost:hover {
    transform: none !important;
    box-shadow: none !important;
}
/* --- CÓDIGO NUEVO Y CORREGIDO --- */
/* =================================================================== */
/*        ESTILOS PARA EL MODO FREEMIUM ACTIVO (VERSIÓN CORREGIDA)     */
/* =================================================================== */

/* 1. Por defecto, TODOS los botones de navegación que lleven a PÁGINAS estarán bloqueados.
   Usamos selectores más específicos para evitar bloquear botones de acción dentro de las páginas. */
body.plan-freemium-active .nav-btn[data-page],
body.plan-freemium-active .bottom-nav-btn[data-page] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}

/* 2. Añadimos un ícono de candado visual a los botones bloqueados */
body.plan-freemium-active .nav-btn[data-page]::after {
    content: '\f023'; /* Candado de Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 7px;
    border-radius: 50%;
    font-size: 0.8rem;
}
body.plan-freemium-active .bottom-nav-btn[data-page]::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(50%);
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 4px;
    border-radius: 50%;
    font-size: 0.6rem;
}

/* 3. EXCEPCIÓN: Reactivamos explícitamente los botones PERMITIDOS para que el usuario no quede atrapado. */
/* Botones de la barra inferior */
body.plan-freemium-active .bottom-nav-btn[data-page="page-dashboard"],
body.plan-freemium-active .bottom-nav-btn[data-page="page-profile"],
body.plan-freemium-active .bottom-nav-btn[data-page="page-account"], /* Por si acaso se usa en otra versión de la nav */
/* Botones de navegación dentro de las páginas (ej. en el Dashboard) */
body.plan-freemium-active .nav-btn[data-page="page-dashboard"],
body.plan-freemium-active .nav-btn[data-page="page-profile"],
body.plan-freemium-active .nav-btn[data-page="page-account"],
body.plan-freemium-active .nav-btn[data-page="page-upgrades"],
body.plan-freemium-active .nav-btn[data-page="page-legal"],
body.plan-freemium-active .nav-btn[data-page="page-user-manual"] {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* 4. Y a esos botones permitidos, les quitamos el candado. */
body.plan-freemium-active .bottom-nav-btn[data-page="page-dashboard"]::after,
body.plan-freemium-active .bottom-nav-btn[data-page="page-profile"]::after,
body.plan-freemium-active .bottom-nav-btn[data-page="page-account"]::after,
body.plan-freemium-active .nav-btn[data-page="page-dashboard"]::after,
body.plan-freemium-active .nav-btn[data-page="page-profile"]::after,
body.plan-freemium-active .nav-btn[data-page="page-account"]::after,
body.plan-freemium-active .nav-btn[data-page="page-upgrades"]::after,
body.plan-freemium-active .nav-btn[data-page="page-legal"]::after,
body.plan-freemium-active .nav-btn[data-page="page-user-manual"]::after {
    content: none;
}

/* 3. EXCEPCIÓN: Reactivamos explícitamente los botones PERMITIDOS para que el usuario no quede atrapado. */
/* Botones de la barra inferior */
body.plan-freemium-active .bottom-nav-btn[data-page="page-dashboard"],
body.plan-freemium-active .bottom-nav-btn[data-page="page-profile"],
body.plan-freemium-active .bottom-nav-btn[data-page="page-account"], /* Por si acaso se usa en otra versión de la nav */
/* Botones de navegación dentro de las páginas (ej. en el Dashboard) */
body.plan-freemium-active .nav-btn[data-page="page-dashboard"],
body.plan-freemium-active .nav-btn[data-page="page-profile"],
body.plan-freemium-active .nav-btn[data-page="page-account"],
body.plan-freemium-active .nav-btn[data-page="page-upgrades"],
body.plan-freemium-active .nav-btn[data-page="page-legal"],
body.plan-freemium-active .nav-btn[data-page="page-user-manual"] {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* 4. Y a esos botones permitidos, les quitamos el candado. */
body.plan-freemium-active .bottom-nav-btn[data-page="page-dashboard"]::after,
body.plan-freemium-active .bottom-nav-btn[data-page="page-profile"]::after,
body.plan-freemium-active .bottom-nav-btn[data-page="page-account"]::after,
body.plan-freemium-active .nav-btn[data-page="page-dashboard"]::after,
body.plan-freemium-active .nav-btn[data-page="page-profile"]::after,
body.plan-freemium-active .nav-btn[data-page="page-account"]::after,
body.plan-freemium-active .nav-btn[data-page="page-upgrades"]::after,
body.plan-freemium-active .nav-btn[data-page="page-legal"]::after,
body.plan-freemium-active .nav-btn[data-page="page-user-manual"]::after {
    content: none;
}

/* Estilos para el nuevo Plan Premium */
.plan-premium.recommended,
.activation-card.plan-premium.recommended {
    border-width: 2px;
    border-color: var(--color-warning);
}

.plan-premium .popular-badge {
    background-color: var(--color-warning);
    color: var(--color-primary); /* Mejor contraste */
}

.plan-premium .plan-icon,
.plan-premium .price-tag,
.activation-card.plan-premium h3,
.activation-card.plan-premium .activation-price {
    color: var(--color-warning);
}

.btn-premium {
    background-color: var(--color-warning);
    color: var(--color-primary) !important;
}

.btn-premium:hover {
    background-color: #f39c12; /* Un tono más oscuro de naranja */
}
/* =================================================================== */
/*      INICIA EL BLOQUE COMPLETO A AÑADIR AL FINAL DE APP.CSS         */
/* =================================================================== */

/* --- Estilos para el Header de Estado de Membresía --- */
.membership-status-header {
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: var(--shadow-medium);
    color: var(--color-surface);
    transition: background 0.3s ease;
}

.membership-status-header p {
    margin: 0;
    font-weight: 500;
}

.membership-status-header i {
    margin-right: 8px;
    animation: pulse 2s infinite; /* Animación sutil para el icono */
}

.membership-status-header strong {
    color: var(--color-warning);
}

.membership-actions {
    display: none; /* Se mostrarán con JS cuando sea necesario */
    gap: 10px;
}

/* --- ESTILOS ESPECÍFICOS POR PLAN --- */

/* Plan Básico (Transformación 30) */
.membership-status-header.basic {
    background: linear-gradient(45deg, var(--color-primary), #34495e);
}
.membership-status-header.basic .membership-actions .btn {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: none;
}
.membership-status-header.basic .membership-actions .btn-primary-glow {
    background-color: var(--color-elite);
    color: #fff;
}

/* Plan Élite (Metamorfosis) */
.membership-status-header.elite {
    background: linear-gradient(45deg, var(--color-elite), #8e44ad);
}
.membership-status-header.elite .membership-actions .btn {
    background-color: var(--color-surface);
    color: var(--color-elite);
    border: none;
}

/* La barra de prueba gratuita ya tiene sus estilos definidos (.trial-status-header) */

/* Keyframe para la animación del icono */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* =================================================================== */
/*        PASO 5: ESTILOS VISUALES PERSONALIZADOS (AÑADIDOS)           */
/* =================================================================== */

/* --- Fondos para Páginas de Plan y Ejercicio --- */
#page-calendar .card {
    background-color: #f0fdf9; /* Verde claro sutil */
}

#page-exercises .card {
    background-color: #f0f8ff; /* Azul claro sutil */
}

/* --- Colores para Detalles de Rutina de Ejercicio --- */
#page-exercises .exercise-item {
    background-color: #ffffff;
    border-left: 4px solid var(--color-accent);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-light);
}

#page-exercises .exercise-sets-reps {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 5px;
}

/* --- Nota de Actualización en Expediente --- */
.expediente-refresh-note {
    background-color: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.4);
    border-radius: var(--border-radius-medium);
    padding: 15px;
    margin-bottom: 25px; /* Espacio antes de la lista de documentos */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.expediente-refresh-note i {
    color: var(--color-accent);
    font-size: 1.2rem;
}
/* =================================================================== */
/*        PASO 5: ESTILOS VISUALES PERSONALIZADOS (AÑADIDOS)           */
/* =================================================================== */

/* --- Fondos para Páginas de Plan y Ejercicio --- */
#page-calendar .card {
    background-color: #f0fdf9; /* Verde claro sutil */
}

#page-exercises .card {
    background-color: #f0f8ff; /* Azul claro sutil */
}

/* --- Colores para Detalles de Rutina de Ejercicio --- */
#page-exercises .exercise-item {
    background-color: #ffffff;
    border-left: 4px solid var(--color-accent);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-light);
}

#page-exercises .exercise-sets-reps {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 5px;
}

/* --- Nota de Actualización en Expediente --- */
.expediente-refresh-note {
    background-color: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.4);
    border-radius: var(--border-radius-medium);
    padding: 15px;
    margin-bottom: 25px; /* Espacio antes de la lista de documentos */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.expediente-refresh-note i {
    color: var(--color-accent);
    font-size: 1.2rem;
}
/* =================================================================== */
/*      BLOQUE DEFINITIVO PARA LA INTERFAZ DEL ASISTENTE (v3.0)        */
/* =================================================================== */

/* 1. Asegura que la página activa pueda crecer y ocupar el espacio vertical */
main.app-container {
    flex-grow: 1; /* Permite que crezca para llenar el espacio. */
    overflow-y: auto; /* Habilita el scroll vertical SÓLO en esta área. */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS. */
    
    /* LA CORRECCIÓN DEFINITIVA: */
    /* En un contexto flex, 'height: 0' obliga al contenedor a respetar los límites 
       de su padre y no crecer infinitamente con su contenido, activando así el 'overflow'. */
    height: 0;

    /* Mantenemos el padding para que la barra de navegación no oculte el final del contenido. */
    padding-bottom: 85px;
}

.page.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que la página crezca */
}

/* 2. El contenedor principal de la página del asistente */
#page-assistant .card {
    flex-grow: 1; /* Crece para llenar el espacio de la página */
    display: flex;
    flex-direction: column;
    padding: 0; /* Eliminamos padding para que el contenido ocupe todo */
    overflow: hidden; /* Evita desbordamientos */
}

/* 3. La interfaz del chat se convierte en el contenedor flex principal */
#ai-chat-interface {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Apila todos los elementos verticalmente */
    background-color: var(--color-surface);
}

/* 4. El área del historial de chat es la que debe crecer y ser desplazable */
#chat-container {
    flex-grow: 1; /* ¡CLAVE! Hace que este div ocupe todo el espacio disponible */
    overflow-y: auto; /* Añade scroll si los mensajes superan la altura */
    padding: 15px;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 5. Los demás elementos ocupan su espacio natural (no crecen) */
#assistant-header,
.suggestions-area,
#ai-upsell-banner,
.chat-footer {
    flex-shrink: 0;
}

/* 6. Estilos específicos y refinados para cada sección */
#assistant-header {
    padding: 20px 25px 0;
    border-bottom: 1px solid var(--color-border);
}

#assistant-title {
    margin-bottom: 15px; /* Separación del panel de instrucciones */
}

.assistant-instructions-panel {
    margin-top: 0; /* Reseteo de margen */
    margin-bottom: 15px;
}

.suggestions-area {
    padding: 15px 25px;
    border-bottom: 1px solid var(--color-border);
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface); /* Fondo para la caja de texto */
}

#ai-upsell-banner {
    order: 10; /* Asegura que el banner esté siempre antes del input */
    border-top: 1px solid var(--color-border);
}

/* 7. Estilos para los mensajes y la caja de texto (sin cambios mayores) */
#user-input { flex-grow: 1; border-radius: 25px; padding: 12px 20px; }
#send-message-btn, #clear-chat-btn { border-radius: 50%; width: 50px; height: 50px; flex-shrink: 0; padding: 0; font-size: 1.2rem; }

.chat-message { max-width: 80%; padding: 12px 18px; border-radius: 20px; line-height: 1.6; word-wrap: break-word; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.chat-message.user { background: linear-gradient(45deg, var(--color-accent), #5dade2); color: white; border-bottom-right-radius: 5px; align-self: flex-end; box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); }
.chat-message.ai { background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); border-bottom-left-radius: 5px; align-self: flex-start; }

/* 8. Estilos para la interfaz Premium (sin cambios) */
.card.premium-active { border: 2px solid var(--color-elite); }
.premium-active #assistant-header { background-color: var(--color-elite-bg); }
.premium-active #assistant-header h2 i { color: var(--color-elite); }
/* =================================================================== */
/*        PLAN 5: OPERACIÓN PULSO DE LA TRIBU (ESTILOS)                */
/* =================================================================== */

/* --- Estilos para la Nueva Barra de Navegación --- */
.bottom-nav-btn.create {
    transform: translateY(-15px) scale(1.2);
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    box-shadow: 0 -5px 15px rgba(46, 204, 113, 0.4);
    border: 4px solid var(--color-surface);
}
.bottom-nav-btn.create:hover {
    background-color: var(--color-secondary);
}
.bottom-nav-btn.create i {
    font-size: 1.8rem;
}
.bottom-nav-btn.create span {
    font-size: 0.7rem;
    margin-top: 2px;
}
.bottom-nav-btn:not(.create).active {
    color: var(--color-primary);
}

/* Contenedor principal del nuevo feed del dashboard */
#page-dashboard .card {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}
.dashboard-feed-layout {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Estilo base para todas las tarjetas del feed */
.feed-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--color-border);
    overflow: hidden;
    animation: fadeIn 0.6s ease-out both;
    text-align: left;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilos para el contenido interno de las tarjetas */
.card-content { padding: 25px; }
.card-actions { padding: 0 25px 25px 25px; }
.card-image-header { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }

/* 1. Tarjeta de Misión Diaria */
.mission-card .card-content { display: flex; align-items: center; gap: 20px; }
.mission-card .icon { font-size: 3rem; color: var(--color-primary); }
.mission-card h3 { margin: 0; font-size: 1.3rem; }
.mission-card p { margin: 5px 0 0; color: var(--color-text-secondary); }

/* 2. Tarjeta de Receta / Contenido */
.recipe-card h3 { margin: 0 0 10px; font-size: 1.5rem; }
.recipe-card p { margin: 0 0 20px; color: var(--color-text-secondary); }

/* 3. Tarjeta de Sponsor */
.sponsor-story-card { position: relative; color: #fff; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; }
.sponsor-story-card .card-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sponsor-story-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1)); z-index: 2; }
.sponsor-story-card .card-content { position: relative; z-index: 3; }
.sponsor-story-card .sponsor-logo { max-width: 120px; margin-bottom: 15px; }
.sponsor-story-card h3 { font-size: 1.8rem; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.sponsor-story-card p { font-size: 1rem; opacity: 0.9; margin-bottom: 20px; }

/* 4. Tarjeta de Comunidad */
.community-card .post-author { font-weight: bold; color: var(--color-text-primary); margin-bottom: 10px; }
.community-card blockquote { margin: 0; padding-left: 15px; border-left: 3px solid var(--color-accent); font-style: italic; }

/* 5. Tarjeta de Persuasión */
.persuasion-card { background: linear-gradient(45deg, var(--color-primary), #34495e); color: #fff; border: none; }
.persuasion-card.elite { background: linear-gradient(45deg, var(--color-elite), #8e44ad); }
.persuasion-card h3 { color: #fff; font-size: 1.6rem; }
.persuasion-card .features-list { list-style: none; padding: 0; margin: 15px 0; }
.persuasion-card .features-list li { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.persuasion-card .features-list i { color: var(--color-success); }


/* =================================================================== */
/*        INICIA FASE 1: ESTILOS PARA "EL PULSO DE LA TRIBU"         */
/* =================================================================== */

/* El interruptor maestro: oculta la UI antigua y muestra la nueva */
body.new-interface-active .bottom-nav-legacy,
body.new-interface-active .dashboard-legacy-layout {
    display: none;
}

body.new-interface-active .bottom-nav-new,
body.new-interface-active #page-dashboard .dashboard-feed-layout {
    display: flex; /* O 'grid' según corresponda */
}

/* --- 1. Barra de Estado de Membresía --- */
body.new-interface-active .membership-status-header {
    display: flex; /* Por defecto está oculta, la mostramos */
    position: sticky;
    top: 0;
    z-index: 100;
}

/* --- 2. Nueva Barra de Navegación Inferior --- */
.bottom-nav-new {
    display: none; /* Oculta por defecto */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    justify-content: space-around;
    align-items: center;
    padding: 5px 0;
    z-index: var(--z-bottom-nav);
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
    border-top: 1px solid var(--color-border);
    height: 65px;
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: var(--font-family);
    flex: 1;
    padding: 6px 2px;
    border-radius: var(--border-radius-small);
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn i {
    font-size: 1.2rem;
    margin-bottom: 3px;
    display: block;
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn span {
    font-size: 0.65rem;
    font-weight: 500;
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn.active {
    color: var(--color-primary);
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn.create {
    transform: translateY(-20px);
    background: linear-gradient(45deg, var(--color-success), var(--color-primary));
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: var(--shadow-heavy);
    border: 4px solid var(--color-surface);
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn.create i {
    font-size: 1.6rem;
    margin-bottom: 0;
}

body.new-interface-active .bottom-nav-new .bottom-nav-btn.create span {
    display: none; /* El botón central es solo un ícono */
}

/* --- 3. Estilos del Feed del Dashboard --- */
body.new-interface-active #page-dashboard .card {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

body.new-interface-active .dashboard-feed-layout {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 80px; /* Espacio para que el último item no quede tapado por la nav */
}

/* --- 4. Estilos para las Tarjetas del Feed --- */
body.new-interface-active .feed-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-align: left;
}

body.new-interface-active .card-content { padding: 20px; }
body.new-interface-active .card-actions { padding: 0 20px 20px; display: flex; gap: 10px; }
body.new-interface-active .card-image-header { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }

/* Tarjeta de Misión Diaria */
body.new-interface-active .mission-card .card-content { display: flex; align-items: center; gap: 15px; }
body.new-interface-active .mission-card .icon { font-size: 2.5rem; color: var(--color-primary); }
body.new-interface-active .mission-card h3 { margin: 0; font-size: 1.1rem; }
body.new-interface-active .mission-card p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 0.9rem; }

/* Tarjeta de Sponsor */
body.new-interface-active .sponsor-story-card { position: relative; color: #fff; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; }
body.new-interface-active .sponsor-story-card .card-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
body.new-interface-active .sponsor-story-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 2; }
body.new-interface-active .sponsor-story-card .card-content { position: relative; z-index: 3; }
body.new-interface-active .sponsor-story-card .sponsor-logo { max-width: 100px; margin-bottom: 10px; }
body.new-interface-active .sponsor-story-card h3 { font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
body.new-interface-active .sponsor-story-card p { font-size: 0.9rem; opacity: 0.9; margin-bottom: 15px; }

/* --- 5. Estilos para Segmentación de Experiencia --- */
/* Por defecto, los anuncios están visibles */
body.new-interface-active .feed-card[data-card-type="sponsor"] { display: flex; }

/* Ocultar anuncios para planes Premium y Élite */
body.new-interface-active.plan-premium-active .feed-card[data-card-type="sponsor"],
body.new-interface-active.plan-elite-active .feed-card[data-card-type="sponsor"] {
    display: none;
}
/* ... Últimas líneas del archivo app.css ... */
.expediente-status { 
    font-size: 0.8rem; 
    font-weight: bold; 
    color: var(--color-text-secondary); 
    align-self: center; 
}
.empty-state-text {
    padding: 20px 0;
    text-align: center;
    color: var(--color-text-secondary);
}
.spinner-container {
    text-align: center;
    padding: 40px 0;
}
.spinner-container p {
    margin-top: 15px;
}

/* =================================================================== */
/*      NUEVO: ESTILOS PARA PUBLICACIONES DESTACADAS                   */
/* =================================================================== */

.feed-card.featured-post {
    border-color: var(--color-warning);
    background: linear-gradient(135deg, var(--color-surface) 90%, #fffbe6);
    position: relative;
    box-shadow: 0 5px 25px rgba(241, 196, 15, 0.2);
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-warning);
    color: var(--color-primary);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* =================================================================== */
/*      NUEVO: ESTILOS PARA PUBLICACIONES DESTACADAS                   */
/* =================================================================== */

.feed-card.featured-post {
    border-color: var(--color-warning);
    background: linear-gradient(135deg, var(--color-surface) 90%, #fffbe6);
    position: relative;
    box-shadow: 0 5px 25px rgba(241, 196, 15, 0.2);
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-warning);
    color: var(--color-primary);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* =================================================================== */
/*        NUEVO: ESTILOS PARA CARGA DE IMÁGENES EN LA COMUNIDAD        */
/* =================================================================== */

/* Estilo para el falso botón de "Adjuntar Foto" */
.image-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: var(--color-background);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    color: var(--color-text-secondary);
}

.image-upload-label:hover {
    background-color: #e9ecef;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Contenedor para la vista previa de la imagen seleccionada */
.image-preview-container {
    margin-top: 15px;
    position: relative;
    max-width: 200px; /* Limita el tamaño de la vista previa */
}

.image-preview-container img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
}

/* Botón para quitar la imagen de la vista previa */
.remove-image-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--color-danger);
    color: white;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: var(--shadow-light);
}

/* =================================================================== */
/*        NUEVO: ESTILOS PARA MODAL DE CREACIÓN DE ENCUESTAS           */
/* =================================================================== */
.poll-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio entre cada campo de opción */
}

.poll-options-container input[name="poll-option"] {
    background-color: var(--color-background);
}

#add-poll-option-btn {
    width: auto; /* El botón no ocupará todo el ancho */
    padding: 8px 16px;
    font-size: 0.9rem;
}

#add-poll-option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-border);
}


/* Estilo para la imagen una vez publicada en el feed */
.post-image-container {
    margin-top: 15px;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}
/* =================================================================== */
/*      NUEVO: ESTILOS PARA EL WIDGET "MI PRIMERA DIETA"               */
/* =================================================================== */

.first-diet-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.first-diet-container h2 {
    text-align: center;
    color: var(--color-primary);
}

.first-diet-selector .form-group {
    margin-bottom: 10px;
}

.first-diet-selector select {
    font-size: 1.1rem;
    padding: 12px;
}

.first-diet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.first-diet-info-panel {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 25px;
    margin-top: 15px;
    animation: fadeIn 0.4s ease;
}

.first-diet-info-panel h3 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 15px;
}

.diet-meta-data {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

.diet-meta-data span {
    font-weight: 500;
}

.diet-meta-data strong {
    color: var(--color-text-primary);
}

.first-diet-info-panel p {
    line-height: 1.8;
}

.payment-prompt {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    border: 2px dashed var(--color-purchase);
    border-radius: var(--border-radius-medium);
    background-color: rgba(26, 188, 156, 0.05);
}

.payment-prompt .price-display {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-purchase);
    margin: 10px 0;
}
/* =================================================================== */
/*        NUEVO: ESTILOS PARA MODALES DE ENCUESTAS Y AGRADECIMIENTOS     */
/* =================================================================== */

/* Estilos para las opciones de Agradecimiento (reutiliza .creation-hub-option) */
#gratitude-options-container .creation-hub-option {
    flex-direction: row; /* Alinea ícono y texto horizontalmente */
    text-align: left;
    gap: 15px;
    padding: 15px;
}

#gratitude-options-container .creation-hub-option .icon {
    font-size: 1.5rem;
    margin-bottom: 0;
}

#gratitude-options-container .creation-hub-option p,
#gratitude-options-container .creation-hub-option h4 {
    margin: 0;
    text-align: left;
}

#gratitude-options-container .creation-hub-option p {
    flex-grow: 1; /* Asegura que el texto ocupe el espacio */
}

/* Estilos para el formulario de Encuesta */
#poll-form .form-group {
    margin-bottom: 20px;
}

#poll-form button[type="submit"] {
    width: 100%;
}
/* =================================================================== */
/*        NUEVO DISEÑO PARA TARJETAS DE COACHING (A PRUEBA DE ERRORES)   */
/* =================================================================== */

.coaching-grid-new {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .coaching-grid-new {
        grid-template-columns: 1fr 1fr;
    }
}

.coaching-card-new {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large);
    padding: 30px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.coaching-card-new:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.coaching-card-new-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.coaching-card-new-title {
    font-size: 1.3rem;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.coaching-card-new-description {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    flex-grow: 1; /* Empuja el botón hacia abajo */
    margin-bottom: 25px;
}

.coaching-card-new .btn {
    width: 100%;
    max-width: 250px;
}
/* =================================================================== */
/*        FASE 1: ESTILOS PARA EL NUEVO HUB INTERACTIVO                */
/* =================================================================== */

/* --- 1. Eliminación de Estilos Obsoletos --- */
.activate-sub-nav, .sub-nav-btn {
    display: none; /* Oculta y elimina del layout por completo */
}

/* --- 2. Estilos para el Contenedor del Hub Modal --- */
#activate-hub-modal .modal-content {
    background-color: var(--color-background);
    padding: 20px;
}

@media (min-width: 768px) {
    #activate-hub-modal .modal-content {
        padding: 30px 40px;
    }
}

.hub-container {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 30px;
}

@media (min-width: 768px) {
    .hub-container {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas en escritorio */
    }
}

/* --- 3. Estilos para las Columnas y Títulos --- */
.hub-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hub-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border);
}

.hub-title i {
    color: var(--color-accent);
}
.hub-column:nth-child(2) .hub-title i { color: var(--color-elite); }
.hub-column:nth-child(3) .hub-title i { color: var(--color-purchase); }

/* --- 4. Estilos para los Botones del Hub --- */
.hub-btn {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 15px;
    border-radius: var(--border-radius-medium);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    width: 100%;
}

.hub-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hub-btn i {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

/* Estilo para botones de funciones "Próximamente" */
.hub-btn.coming-soon {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-background);
}

.hub-btn.coming-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.hub-btn.coming-soon::after {
    content: 'Próximamente';
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: auto;
    background-color: var(--color-border);
    padding: 2px 8px;
    border-radius: 10px;
}
/* =================================================================== */
/*        CORRECCIÓN: ESTILOS PARA SUBTÍTULOS EN BOTONES DEL HUB       */
/* =================================================================== */

.hub-btn {
    align-items: flex-start; /* Alinea el ícono con la parte superior del texto */
    padding-top: 20px;
    padding-bottom: 20px;
}

.hub-btn i {
    margin-top: 5px; /* Baja un poco el ícono para alinearlo mejor visualmente */
}

.hub-btn .hub-btn-text {
    display: flex;
    flex-direction: column; /* Apila el título y el subtítulo verticalmente */
    flex-grow: 1;
    text-align: left;
}

.hub-btn .hub-btn-text span:first-child {
    font-size: 1rem; /* Tamaño del título principal */
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.hub-btn .hub-btn-text span:last-child {
    font-size: 0.8rem; /* Letra pequeña para el subtítulo */
    font-weight: 400;
    color: var(--color-text-secondary); /* Color más suave */
    margin-top: 4px; /* Pequeño espacio entre título y subtítulo */
}

/* Cuando se pasa el mouse, el color del título también cambia */
.hub-btn:hover .hub-btn-text span:first-child {
    color: var(--color-primary);
}
/* =================================================================== */
/*        REPARACIÓN: FORZAR CURSOR EN BOTONES DE COACHING             */
/* =================================================================== */

.coaching-card-new .btn {
    cursor: pointer !important; /* Fuerza el cursor de puntero */
}

/* =================================================================== */
/*        NUEVOS ESTILOS PARA PÁGINA DE ACTIVACIÓN (MODELO 2024)       */
/* =================================================================== */

#page-activate .activation-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 992px) {
    #page-activate .activation-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#page-activate .pricing-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 25px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(52, 73, 94, 0.04);
    position: relative;
    overflow: hidden;
}

#page-activate .pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
}

#page-activate .plan-header { margin-bottom: 15px; text-align: center; }
#page-activate .plan-icon { font-size: 1.8rem; margin-bottom: 15px; }
#page-activate .plan-header h3 { font-size: 1.4rem; font-weight: 700; color: var(--color-text-primary); margin: 0; }
#page-activate .price-tag { font-size: 2rem; font-weight: 700; margin: 10px 0; }
#page-activate .price-tag span { font-size: 0.9rem; font-weight: 400; color: var(--color-text-secondary); }
#page-activate .card-subtitle { font-size: 0.9rem; color: var(--color-text-secondary); min-height: 3em; border-bottom: 1px solid var(--color-border); padding-bottom: 20px; margin-bottom: 20px; }
#page-activate .features-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
#page-activate .features-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; font-size: 0.9rem; color: var(--color-text-secondary); }
#page-activate .features-list li i { margin-top: 4px; color: var(--color-success); font-size: 0.9rem; }
#page-activate .features-list li strong { color: var(--color-text-primary); }
#page-activate .pricing-card .btn, #page-activate .pricing-card div[id*="-paypal-container"] { width: 100%; margin-top: auto; }

/* Plan Freemium */
#page-activate .plan-freemium .plan-icon { color: var(--color-text-secondary); }
#page-activate .btn-freemium { background-color: var(--color-surface); color: var(--color-text-primary); border: 2px solid var(--color-border); }
#page-activate .btn-freemium:hover { background-color: var(--color-background); border-color: var(--color-text-secondary); }

/* Plan Elite */
#page-activate .plan-elite.recommended { border-width: 2px; border-color: var(--color-elite); }
#page-activate .popular-badge {
    position: absolute;
    top: 18px;
    right: -30px;
    background: var(--color-advanced);
    color: #fff;
    padding: 4px 30px;
    font-weight: 700;
    font-size: 0.8rem;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#page-activate .plan-elite .plan-icon, #page-activate .plan-elite .price-tag { color: var(--color-elite); }

/* Plan Advanced */
#page-activate .plan-advanced .plan-icon, #page-activate .plan-advanced .price-tag { color: var(--color-advanced); }
/* =================================================================== */
/*        ESTILOS PARA FONDOS Y BADGE EN TARJETAS DE ACTIVACIÓN        */
/* =================================================================== */

#page-activate .pricing-card.plan-elite.recommended {
    background-color: rgba(142, 68, 173, 0.05); /* Morado muy suave */
    border-color: var(--color-elite);
}

#page-activate .pricing-card.plan-advanced {
    background-color: rgba(243, 156, 18, 0.05); /* Naranja muy suave */
    border-color: var(--color-advanced);
}

#page-activate .popular-badge {
    background-color: var(--color-elite);
}
/* =================================================================== */
/*        NUEVO MODAL DE BIENVENIDA DINÁMICO (ESTILOS)                 */
/* =================================================================== */

.welcome-modal-content {
    max-width: 450px;
    border-top: 8px solid; /* El color se aplicará con JS */
    border-radius: var(--border-radius-large);
    padding-top: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.welcome-modal-media {
    margin-bottom: 20px;
    animation: bounceIn 0.8s ease-out;
}

.welcome-emoji {
    font-size: 5rem;
    display: block;
    line-height: 1;
}

.welcome-gif {
    max-width: 150px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow-medium);
}

.welcome-modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: 10px;
}

.welcome-modal-text {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-bottom: 25px;
}

.welcome-modal-text strong {
    font-weight: 700;
    color: var(--color-text-primary);
}

.welcome-modal-details {
    background-color: var(--color-background);
    padding: 10px 15px;
    border-radius: var(--border-radius-small);
    font-weight: 500;
    margin-bottom: 25px;
    display: inline-block;
}

#welcome-modal-close-btn {
    width: 100%;
    font-weight: bold;
    color: #fff !important;
}

/* =================================================================== */
/*        NUEVO: ESTILOS PARA EL DISTINTIVO DE AFILIADO (DASHBOARD)     */
/* =================================================================== */

.dashboard-notice-board.affiliate-badge {
    background-color: var(--color-background); /* Un fondo sutil */
    border: 2px dashed var(--color-primary); /* Borde discontinuo para destacarlo como algo especial */
    border-radius: var(--border-radius-medium);
    padding: 15px 20px;
    margin-bottom: 0; /* Lo gestiona el gap del layout del feed */
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: fadeIn 0.5s ease-out;
}

.dashboard-notice-board.affiliate-badge .icon {
    font-size: 1.8rem;
    color: var(--color-primary); /* Icono con el color verde principal */
}

.dashboard-notice-board.affiliate-badge p {
    margin: 0;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.4;
    font-size: 0.95rem;
}

.dashboard-notice-board.affiliate-badge p strong {
    color: var(--color-primary);
    font-weight: 700;
}
/* =================================================================== */
/*      BLOQUE DEFINITIVO PARA LA INTERFAZ DEL ASISTENTE (v3.0)        */
/* =================================================================== */

/* 1. Asegura que la página activa pueda crecer y ocupar el espacio vertical */
main.app-container {
    flex-grow: 1; /* Permite que crezca para llenar el espacio. */
    overflow-y: auto; /* Habilita el scroll vertical SÓLO en esta área. */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS. */
    
    /* LA CORRECCIÓN DEFINITIVA: */
    /* En un contexto flex, 'height: 0' obliga al contenedor a respetar los límites 
       de su padre y no crecer infinitamente con su contenido, activando así el 'overflow'. */
    height: 0;

    /* Mantenemos el padding para que la barra de navegación no oculte el final del contenido. */
    padding-bottom: 85px;
}

.page.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que la página crezca */
}

/* 2. El contenedor principal de la página del asistente */
#page-assistant .card {
    flex-grow: 1; /* Crece para llenar el espacio de la página */
    display: flex;
    flex-direction: column;
    padding: 0; /* Eliminamos padding para que el contenido ocupe todo */
    overflow: hidden; /* Evita desbordamientos */
}

/* 3. La interfaz del chat se convierte en el contenedor flex principal */
#ai-chat-interface {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Apila todos los elementos verticalmente */
    background-color: var(--color-surface);
}

/* 4. El área del historial de chat es la que debe crecer y ser desplazable */
#chat-container {
    flex-grow: 1; /* ¡CLAVE! Hace que este div ocupe todo el espacio disponible */
    overflow-y: auto; /* Añade scroll si los mensajes superan la altura */
    padding: 15px;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 5. Los demás elementos ocupan su espacio natural (no crecen) */
#assistant-header,
.suggestions-area,
#ai-upsell-banner,
.chat-footer {
    flex-shrink: 0;
}

/* 6. Estilos específicos y refinados para cada sección */
#assistant-header {
    padding: 20px 25px 0;
    border-bottom: 1px solid var(--color-border);
}

#assistant-title {
    margin-bottom: 15px; /* Separación del panel de instrucciones */
}

.assistant-instructions-panel {
    margin-top: 0; /* Reseteo de margen */
    margin-bottom: 15px;
}

.suggestions-area {
    padding: 15px 25px;
    border-bottom: 1px solid var(--color-border);
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface); /* Fondo para la caja de texto */
}

#ai-upsell-banner {
    order: 10; /* Asegura que el banner esté siempre antes del input */
    border-top: 1px solid var(--color-border);
}

/* 7. Estilos para los mensajes y la caja de texto (sin cambios mayores) */
#user-input { flex-grow: 1; border-radius: 25px; padding: 12px 20px; }
#send-message-btn, #clear-chat-btn { border-radius: 50%; width: 50px; height: 50px; flex-shrink: 0; padding: 0; font-size: 1.2rem; }

.chat-message { max-width: 80%; padding: 12px 18px; border-radius: 20px; line-height: 1.6; word-wrap: break-word; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.chat-message.user { background: linear-gradient(45deg, var(--color-accent), #5dade2); color: white; border-bottom-right-radius: 5px; align-self: flex-end; box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3); }
.chat-message.ai { background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); border-bottom-left-radius: 5px; align-self: flex-start; }

/* 8. Estilos para la interfaz Premium (sin cambios) */
.card.premium-active { border: 2px solid var(--color-elite); }
.premium-active #assistant-header { background-color: var(--color-elite-bg); }
.premium-active #assistant-header h2 i { color: var(--color-elite); }
/* =================================================================== */
/*      ESTILOS PARA LA BARRA DE NAVEGACIÓN "CLASSIC" (FINAL)          */
/* =================================================================== */

.bottom-nav-classic {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background-color: var(--color-surface);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
    border-top: 1px solid var(--color-border);
    padding: 0 5px;
    z-index: var(--z-bottom-nav);
}

/* Botones laterales (RECTÁNGULOS COMPACTOS) */
.bottom-nav-classic .nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    color: white;
    font-weight: 700;
    font-size: clamp(0.6rem, 2.5vw, 0.75rem); /* Texto responsivo y pequeño */
    text-transform: uppercase;
    flex-grow: 1; /* Ocupan espacio disponible */
    flex-basis: 0; /* Asegura que se distribuyan equitativamente */
    max-width: 22%; /* Limita el ancho para no ser largos */
    height: 38px;
    padding: 0 5px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.bottom-nav-classic .nav-btn:hover {
    transform: scale(1.05);
}

/* --- COLORES EXACTOS Y REQUERIDOS --- */
.bottom-nav-classic .nav-btn:nth-of-type(1) { background-color: #2ecc71; } /* VERDE */
.bottom-nav-classic .nav-btn:nth-of-type(2) { background-color: #f1c40f; } /* AMARILLO */
/* El botón de ¡ACTÍVATE! es ahora el 3ro en el flujo de botones rectangulares */
.bottom-nav-classic .nav-btn:nth-of-type(3) { background-color: #e74c3c; } /* ROJO */
.bottom-nav-classic .nav-btn:nth-of-type(4) { background-color: #3498db; } /* AZUL */

/* Botón Central (CÍRCULO GRANDE, ESTILO ORIGINAL RESTAURADO) */
.bottom-nav-classic .nav-btn-central {
    cursor: pointer;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    position: relative; /* Para que esté por encima de la barra */
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

/* --- ESTADOS DEL BOTÓN CENTRAL --- */
.bottom-nav-classic .nav-btn-central.active {
    background: radial-gradient(circle, #f39c12, #e67e22); /* NARANJA/DORADO */
}

.bottom-nav-classic .nav-btn-central:not(.active) {
    background: #34495e; /* GRIS OSCURO (No Negro para no ser tan agresivo) */
    color: #7f8c8d;
    transform: translateY(-15px); /* Se hunde un poco */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.15);
}

/* --- AJUSTES DE ESPACIO PARA EL BOTÓN CENTRAL --- */
.bottom-nav-classic .nav-btn:nth-of-type(2) {
    margin-right: 35px; /* Crea espacio a la derecha del 2do botón */
}
.bottom-nav-classic .nav-btn:nth-of-type(3) {
    margin-left: 35px; /* Crea espacio a la izquierda del 3er botón */
}