/* =================================================================== */
/*      MAKUMOTO MODALS: CORE (v2.0)
/*      Sistemas Críticos: Lyra (IA Onboarding) y Pasarela de Pagos
/* =================================================================== */

/* =================================================================== */
/*      1. LYRA / ACTIVATE HUB (COSMIC THEME)
/* =================================================================== */

/* El Overlay de Lyra */
#activate-hub-modal {
    z-index: var(--z-modal); /* 300 */
    background: rgba(15, 12, 21, 0.95); /* Fondo casi sólido para inmersión */
}

/* La Tarjeta Principal */
.lyra-modal-card {
    position: relative;
    width: 90%; max-width: 380px;
    height: 80vh; max-height: 800px;
    
    /* Tema Cósmico */
    background-color: #0f0c15;
    background-image: radial-gradient(circle at 50% 20%, #2c2044 0%, #0f0c15 70%);
    
    border: 1px solid #3c305a;
    border-radius: 24px;
    box-shadow: 0 0 50px rgba(171, 113, 237, 0.3);
    
    display: flex; flex-direction: column;
    overflow: hidden;
    margin: auto;
    color: #fff;
}

/* --- Pantalla de Presentación (Intro) --- */
.lyra-presentation-screen {
    position: absolute;
    inset: 0; /* Ocupa todo el modal */
    background: #0f0c15;
    z-index: 10; /* Tapa el chat */
    
    display: flex; 
    flex-direction: column;
    align-items: center; 
    /* Cambiamos justify-content para que si hay scroll, empiece arriba */
    justify-content: flex-start; 
    
    padding: 40px 20px; /* Un poco más de aire arriba */
    text-align: center;
    
    transition: opacity 0.5s ease;

    /* --- FIX SCROLL PORTADA (IPHONE) --- */
    overflow-y: auto !important;          /* Activar scroll si no cabe */
    -webkit-overflow-scrolling: touch;    /* Suavidad nativa iOS */
    overscroll-behavior: contain;         /* Evita mover el fondo */
    
    /* Espacio extra abajo para que no se corten los botones de tema */
    padding-bottom: 80px !important; 
}

.lyra-avatar-large {
    width: 140px; height: 140px;
    border-radius: 50%;
    background-color: #333;
    background-size: cover; background-position: center top;
    border: 3px solid #ab71ed;
    box-shadow: 0 0 30px rgba(171, 113, 237, 0.6);
    margin-bottom: 25px;
    /* La animación float está en fx.css, aquí solo la estructura */
}

.lyra-presentation-title {
    font-size: 1.8rem; font-weight: 800; color: #fff;
    margin: 0 0 15px 0;
    text-shadow: 0 0 10px rgba(171, 113, 237, 0.5);
}

.lyra-presentation-desc {
    font-size: 1rem; color: #ccc; line-height: 1.5;
    max-width: 90%; margin: 0 auto 30px auto;
}

#start-chat-btn {
    background: linear-gradient(90deg, #ab71ed, #9b59b6);
    color: white; border: none;
    padding: 14px 30px; border-radius: 50px;
    font-weight: 800; font-size: 1rem;
    box-shadow: 0 5px 15px rgba(171, 113, 237, 0.4);
    cursor: pointer; text-transform: uppercase;
}

/* --- Chat Interno --- */
.activate-chat-body {
    flex: 1; 
    padding: 20px; 
    
    /* FIX SCROLL IPHONE (iOS) */
    overflow-y: scroll !important;        /* Forzar barra de scroll */
    -webkit-overflow-scrolling: touch;    /* Activar inercia nativa (rebote suave) */
    overscroll-behavior-y: contain;       /* Evitar que se mueva la página de fondo */
    
    display: flex; 
    flex-direction: column; 
    gap: 20px;
    
    /* Padding extra abajo para que el teclado o el borde no tapen el último mensaje */
    padding-bottom: 150px !important; 
}

.chat-bubble {
    display: flex; gap: 15px; max-width: 90%;
}

.chat-bubble .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background-size: cover; flex-shrink: 0;
    border: 1px solid #ab71ed;
}

.chat-bubble p {
    background: #2c2541; color: #fff;
    padding: 15px; border-radius: 0 15px 15px 15px;
    line-height: 1.5; border: 1px solid #3c305a;
}

/* Botones de Misión */
.mission-button {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px 15px; border-radius: 12px;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; gap: 15px;
    transition: all 0.2s;
}
.mission-button:hover {
    background: rgba(171, 113, 237, 0.1);
    border-color: #ab71ed; transform: translateX(5px);
}

/* =================================================================== */
/*      2. MY PLAN (MEMBRESÍAS)
/* =================================================================== */

.plan-modal-title { 
    text-align: center; margin-bottom: 20px; 
    color: var(--color-primary); font-size: 1.5rem; font-weight: 800;
}

.plan-cards-container { display: flex; flex-direction: column; gap: 15px; }

.premium-plan-card {
    background: #1a1a1a; border: 1px solid #333;
    border-radius: 12px; padding: 20px;
    position: relative; overflow: hidden;
}

/* Variantes */
.premium-plan-card.elite { border-color: #3498db; }
.premium-plan-card.advanced { 
    border-color: var(--color-primary); 
    background: linear-gradient(145deg, #221f00, #1a1a1a); 
}

/* Badges */
.card-badge {
    position: absolute; top: 0; right: 0;
    font-size: 0.6rem; font-weight: 700;
    padding: 3px 10px; border-bottom-left-radius: 8px;
}
.card-badge.blue { background: #3498db; color: #fff; }
.card-badge.gold { background: var(--color-primary); color: #000; }

/* Contenido Tarjeta */
.card-header { display: flex; align-items: center; margin-bottom: 15px; }
.card-header h4 { margin: 0; font-size: 1.2rem; flex: 1; color: #fff; }
.price { font-size: 1.1rem; font-weight: 700; color: #fff; }

.btn-activate {
    width: 100%; padding: 10px; border: none; border-radius: 8px;
    font-weight: 700; cursor: pointer; text-transform: uppercase;
}
.btn-activate.elite { background: #3498db; color: #fff; }
.btn-activate.advanced { background: var(--color-primary); color: #000; }

/* =================================================================== */
/*      3. PAYPAL CLEAN ROOM (GATEWAY)
/*      Pantalla Completa de Seguridad para Pagos
/* =================================================================== */

#payment-gateway-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100dvh;
    
    /* FONDO NEGRO PURO - Cero distracciones */
    background-color: #000000;
    
    /* NIVEL DIOS - Encima de todo */
    z-index: var(--z-alert); /* 500 o más (usar --z-god si existe) */
    
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    
    /* Reset de seguridad para iframes de PayPal */
    transform: none; filter: none; perspective: none;
}

.gateway-card {
    background: #111;
    border: 2px solid #333;
    border-radius: 20px;
    padding: 30px 20px;
    width: 90%; max-width: 400px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    position: relative;
}

.gateway-title {
    color: #fff; font-size: 1.2rem; font-weight: 700; margin-bottom: 10px;
}

.gateway-price {
    color: var(--color-primary);
    font-size: 2.5rem; font-weight: 800; margin-bottom: 30px;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

/* Contenedor Botones PayPal (Aislado) */
#gateway-paypal-container {
    width: 100%; min-height: 150px;
    margin-bottom: 20px;
    position: relative; z-index: 10;
}

.gateway-cancel-btn {
    background: transparent; border: 1px solid #444; color: #888;
    padding: 12px 30px; border-radius: 50px; cursor: pointer;
    font-size: 0.9rem; transition: all 0.2s;
}
.gateway-cancel-btn:hover { border-color: #fff; color: #fff; }

/* Auxiliar: Ocultar el resto de la app cuando se paga */
body.payment-mode-active > *:not(#payment-gateway-fullscreen) {
    display: none !important;
}
/* ==========================================================================
   ESTADO: APP BLOQUEADA (LOCKDOWN MODE)
   ========================================================================== */
body.locked-mode {
    overflow: hidden !important;
    background-color: #000 !important;
}

/* Ocultar interfaz EXCEPTO bloqueo Y pagos */
body.locked-mode .bottom-nav,
body.locked-mode #ghost-nav-top,
body.locked-mode #desktop-sidebar-left,
body.locked-mode #fab-publish,
body.locked-mode .dashboard-feed-layout,
body.locked-mode .app-container,
/* Ocultamos modales genéricos, pero permitimos el de bloqueo Y el de pasarela de pago */
body.locked-mode .modal-overlay:not(#fatal-lock-screen):not(#payment-gateway-overlay):not(#assessment-overlay) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Estilo de la Ventana de Bloqueo Permanente */
#fatal-lock-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* Máxima prioridad */
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}
/* ==========================================================================
   ESTILOS DE BLOQUEO "GAMER / CYBERPUNK"
   ========================================================================== */

/* Animación de entrada dramática */
@keyframes lockPop {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}

/* Efecto de respiración (Glow) */
@keyframes neonPulse {
    0% { box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); border-color: #ff0055; }
    50% { box-shadow: 0 0 50px rgba(255, 0, 85, 0.8), 0 0 100px rgba(255, 0, 85, 0.2); border-color: #ff3377; }
    100% { box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); border-color: #ff0055; }
}

.lock-card {
    animation: lockPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, neonPulse 3s infinite;
    background: linear-gradient(165deg, #050505 0%, #1a0005 100%) !important;
}

/* Scroll para cuando carguemos los planes dentro */
.lock-scroll-area {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
    margin-top: 15px;
}
/* =================================================================== */
/*      MODALES BOTANICAL: LYRA & PAGOS
/* =================================================================== */

/* LYRA (Fondo Blanco Spa) */
body.theme-pastel .lyra-modal-card,
body.theme-pastel .lyra-presentation-screen, 
body.theme-pastel .activate-chat-body {
    background: #FFFFFF !important;
    /* Gradiente sutil Menta -> Blanco */
    background-image: linear-gradient(to bottom, #E8F5E9, #FFFFFF) !important;
    border: 1px solid #A5D6A7 !important;
    color: #1B5E20 !important;
}

/* Textos de Lyra */
body.theme-pastel .lyra-presentation-title { color: #1B5E20 !important; text-shadow: none; }
body.theme-pastel .lyra-presentation-desc { color: #558B2F !important; }

/* Burbujas del Chat */
body.theme-pastel .chat-bubble p {
    background: #F1F8E9 !important; /* Verde Té muy claro */
    color: #2E7D32 !important;      /* Texto Esmeralda */
    border: 1px solid #C8E6C9 !important;
}

/* MODAL DE PAGOS (GATEWAY) */
body.theme-pastel #payment-gateway-fullscreen {
    background-color: #E8F5E9 !important; /* Fondo Menta */
}
body.theme-pastel .gateway-card {
    background: #FFFFFF !important;
    border: 2px solid #D81B60 !important; /* Borde Rose Gold para dinero */
    box-shadow: 0 10px 40px rgba(27, 94, 32, 0.1) !important;
}
body.theme-pastel .gateway-title { color: #1B5E20 !important; }
body.theme-pastel .gateway-price { color: #D81B60 !important; text-shadow: none; }
/* =================================================================== */
/*      EXORCISMO LYRA: TEMA PASTEL (NIVEL EXTREMO)
/* =================================================================== */

/* 1. ATAQUE MASIVO A TODOS LOS CONTENEDORES DE LYRA */
/* Usamos selectores encadenados para tener más "peso" que el estilo original */
body.theme-pastel #activate-hub-modal .lyra-modal-card,
body.theme-pastel #activate-hub-modal .lyra-presentation-screen,
body.theme-pastel #activate-hub-modal .activate-chat-body,
body.theme-pastel .lyra-modal-card * {
    /* Reseteo de seguridad */
    --lyra-bg: #FFFFFF; 
}

/* 2. FORZAR FONDO BLANCO (MATAR DEGRADADOS) */
body.theme-pastel .lyra-modal-card,
body.theme-pastel .lyra-presentation-screen {
    /* La propiedad 'background' mata a image y color simultáneamente */
    background: #FFFFFF !important; 
    background-image: none !important;
    background-color: #FFFFFF !important;
    
    /* Bordes Verdes */
    border: 1px solid #A5D6A7 !important;
    box-shadow: none !important; /* Quitar resplandor morado */
}

/* 3. FORZAR TEXTOS OSCUROS (Para que se lean) */
body.theme-pastel .lyra-presentation-title,
body.theme-pastel .system-status-text,
body.theme-pastel .lyra-presentation-desc,
body.theme-pastel .countdown-timer {
    color: #1B5E20 !important; /* Verde Bosque */
    text-shadow: none !important;
    -webkit-text-fill-color: #1B5E20 !important;
}

/* 4. CÍRCULOS DEL MENÚ (Los 4 Botones Grandes) */
body.theme-pastel .menu-circle-btn,
body.theme-pastel .hub-btn {
    background: #F1F8E9 !important; /* Verde muy pálido */
    border: 2px solid #2E7D32 !important; /* Borde Verde Fuerte */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* Iconos y Texto dentro de los círculos */
body.theme-pastel .menu-circle-btn i,
body.theme-pastel .hub-btn i {
    color: #2E7D32 !important;
    text-shadow: none !important;
}
body.theme-pastel .menu-circle-btn span,
body.theme-pastel .hub-btn span,
body.theme-pastel .btn-label {
    color: #1B5E20 !important;
    font-weight: 800 !important;
}

/* 5. INPUT DE COMANDO (La barra de escribir) */
body.theme-pastel input#lyra-command-input {
    background: #FFFFFF !important;
    border: 2px solid #A5D6A7 !important;
    color: #000000 !important;
    box-shadow: none !important;
}
body.theme-pastel input#lyra-command-input::placeholder {
    color: #558B2F !important;
}

/* 6. SETTINGS BAR (Abajo del todo: Tema y Sonido) */
body.theme-pastel .lyra-settings-bar,
body.theme-pastel .settings-panel {
    background: #E8F5E9 !important;
    border: 1px solid #C8E6C9 !important;
}

/* Botones de Tema (Dark/Pastel) */
body.theme-pastel .theme-toggle-btn {
    border: 1px solid #2E7D32 !important;
    color: #2E7D32 !important;
}
body.theme-pastel .theme-toggle-btn.active {
    background: #2E7D32 !important;
    color: #FFFFFF !important;
}
/* FIX LYRA INTERNA (Header y Footer) */
body.theme-pastel #lyra-header-bar,
body.theme-pastel #lyra-footer-bar {
    background: #FFFFFF !important;
    border-color: #A5D6A7 !important;
}

body.theme-pastel .lyra-header-title { color: #1B5E20 !important; }
body.theme-pastel .lyra-header-sub { color: #558B2F !important; }

/* Input de Chat */
body.theme-pastel #lyra-chat-input {
    background: #F1F8E9 !important;
    color: #000 !important;
    border: 1px solid #C8E6C9 !important;
}
/* =================================================================== */
/*      FIX LYRA: OVERRIDE A LOS ESTILOS EN LÍNEA DEL JS
/* =================================================================== */

/* 1. MENÚ PRINCIPAL (THE ORB) */
/* Atacamos el ID del overlay y la clase del contenedor */
body.theme-pastel #my-journey-sheet-overlay,
body.theme-pastel .o-container {
    background: #FFFFFF !important; /* Adiós #050505 */
    background-image: none !important; /* Adiós Glow Morado */
}

/* El brillo de fondo (Glow) lo ocultamos */
body.theme-pastel .o-glow {
    display: none !important;
}

/* Textos del Menú Principal */
body.theme-pastel .o-system-txt { color: #558B2F !important; }
body.theme-pastel .o-plan { color: #1B5E20 !important; text-shadow: none !important; }
body.theme-pastel .o-timer { color: #2E7D32 !important; }

/* Botones Circulares */
body.theme-pastel .o-circle-btn {
    background: #F1F8E9 !important;
    border: 1px solid #A5D6A7 !important;
}
body.theme-pastel .o-circle-btn span { color: #1B5E20 !important; }

/* 2. CHAT DE LYRA (MODAL ACTIVAR) */
/* Atacamos los divs que tienen estilo negro incrustado */
body.theme-pastel #activate-hub-modal .modal-content,
body.theme-pastel #activate-hub-modal div[style*="background: #000"],
body.theme-pastel #activate-hub-modal div[style*="background: rgb(0, 0, 0)"] {
    background: #FFFFFF !important;
    border-bottom-color: #A5D6A7 !important;
    border-top-color: #A5D6A7 !important;
}

/* Input del Chat */
body.theme-pastel #lyra-chat-input,
body.theme-pastel .o-input {
    background: #F1F8E9 !important;
    color: #000 !important;
    border: 1px solid #C8E6C9 !important;
}

/* Mensajes */
body.theme-pastel .lyra-msg {
    background: #F1F8E9 !important;
    color: #1B5E20 !important;
    border-left: 3px solid #2E7D32 !important;
}
/* =================================================================== */
/*      FIX LYRA: CONTROLES EN VERDE BONITO (NO MÁS NEGRO)
/* =================================================================== */

/* 1. LAS FILAS DE CONFIGURACIÓN (TEMA Y SONIDO) */
/* Antes eran Gris Oscuro (#111) */
body.theme-pastel .config-row {
    background: #F1F8E9 !important; /* Verde Té muy suave */
    border: 1px solid #A5D6A7 !important; /* Borde Verde Hoja */
}

/* Etiquetas (TEMA / SONIDO) */
body.theme-pastel .config-label {
    color: #1B5E20 !important; /* Verde Bosque */
}
body.theme-pastel .config-label i {
    color: #2E7D32 !important; /* Iconos en Verde */
}

/* 2. LA CÁPSULA DE LOS BOTONES (EL FONDO NEGRO) */
/* Antes era Negro Puro (#000) */
body.theme-pastel .config-toggle-group {
    /* EL VERDE BONITO DE LA BARRA INFERIOR */
    background: rgba(200, 230, 201, 1) !important; 
    border: 1px solid #A5D6A7 !important;
}

/* Botones inactivos dentro de la cápsula */
body.theme-pastel .c-toggle-btn {
    color: #1B5E20 !important; /* Texto Verde Oscuro */
}

/* Botón ACTIVO (El seleccionado) */
body.theme-pastel .c-toggle-btn.active {
    background: #2E7D32 !important; /* Verde Fuerte para resaltar */
    color: #FFFFFF !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 3. EL BOTÓN DE CERRAR (X) ARRIBA A LA DERECHA */
/* Antes era un círculo negro */
body.theme-pastel .o-close {
    background: rgba(200, 230, 201, 1) !important; /* Verde Bonito */
    color: #1B5E20 !important; /* X en Verde Oscuro */
    border: 1px solid #A5D6A7 !important;
    border-radius: 50%; /* Asegurar que sea redondo */
    width: 35px; height: 35px; /* Asegurar tamaño */
    display: flex; align-items: center; justify-content: center;
    opacity: 1 !important;
}

/* 4. FOOTER (LINKS DE ABAJO) */
body.theme-pastel .o-footer div {
    color: #2E7D32 !important; /* Verde Fuerte */
}
/* Excepción para "SALIR" que suele ser rojo, lo dejamos rojo o verde oscuro? 
   Si quieres todo verde: */
body.theme-pastel #lnk-logout {
    color: #D32F2F !important; /* Rojo elegante para salir */
}
/* --- FIX BOTONES TOGGLE (Matar el Negro y el Morado) --- */

/* 1. La Cápsula contenedora (Donde viven los botones) */
body.theme-pastel .config-toggle-group {
    background: #E8F5E9 !important; /* Fondo Menta Suave */
    border: 1px solid #A5D6A7 !important; /* Borde Verde */
}

/* 2. Botones INACTIVOS (Ej: DARK, OFF cuando no están seleccionados) */
body.theme-pastel .c-toggle-btn {
    background: transparent !important; /* Adiós fondo negro */
    color: #1B5E20 !important;          /* Texto Verde Oscuro (Muy legible) */
    font-weight: 700 !important;
    opacity: 0.6; /* Un poco transparente para indicar inactividad */
}

/* 3. Botones ACTIVOS (Ej: PASTEL, ON cuando están seleccionados) */
body.theme-pastel .c-toggle-btn.active {
    background: #2E7D32 !important;     /* Verde Esmeralda Fuerte */
    color: #FFFFFF !important;          /* Texto Blanco Puro */
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3) !important;
    opacity: 1;
}
/* =================================================================== */
/*      FIX FINAL: TODOS LOS MODALES (PLAN, MAGAZINE, TIPS, DIARIO)
/* =================================================================== */

/* --- 1. MODAL "MI PLAN" (30 DÍAS) --- */
/* ID: #plan-hub-overlay */

/* Fondo y Cabecera */
body.theme-pastel #plan-hub-overlay,
body.theme-pastel #plan-hub-overlay div[style*="background:#111"] {
    background: #FFFFFF !important;
    border-bottom-color: #A5D6A7 !important;
}

/* Títulos y Textos */
body.theme-pastel #plan-hub-overlay h3,
body.theme-pastel #plan-hub-overlay div[style*="color:#fff"] {
    color: #1B5E20 !important; /* Verde Bosque */
}
body.theme-pastel #plan-hub-overlay div[style*="color:#888"] {
    color: #558B2F !important; /* Verde Oliva */
}

/* Celdas del Calendario (Días) */
body.theme-pastel .day-cell {
    background: #F1F8E9 !important; /* Verde Té */
    border: 1px solid #C8E6C9 !important;
}
body.theme-pastel .day-cell .day-num { color: #1B5E20 !important; font-weight: 900 !important; }
body.theme-pastel .day-cell .day-label { color: #558B2F !important; }

/* Tabs (Nutrición / Entrenamiento) */
body.theme-pastel #plan-hub-overlay .uni-tab {
    color: #558B2F !important;
}
body.theme-pastel #plan-hub-overlay .uni-tab.active {
    color: #1B5E20 !important;
    border-bottom-color: #2E7D32 !important;
}

/* Iconos Header */
body.theme-pastel #plan-hub-overlay i.fa-fish,
body.theme-pastel #plan-hub-overlay i.fa-dumbbell {
    color: #2E7D32 !important; /* Verde Fuerte */
}


/* --- 2. MAGAZINE (PULSE) --- */
/* ID: #magazine-overlay */

/* Fondo General */
body.theme-pastel #magazine-overlay,
body.theme-pastel .mag-header,
body.theme-pastel .mag-content {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Header */
body.theme-pastel .mag-header {
    border-bottom: 1px solid #A5D6A7 !important;
}
body.theme-pastel .mag-header div[style*="color:#fff"] {
    color: #1B5E20 !important;
}
body.theme-pastel .mag-header span[style*="color:#FFD700"] {
    color: #D81B60 !important; /* Rose Gold */
}

/* Tarjetas de Debate */
body.theme-pastel .debate-card {
    background: #F9FBE7 !important; /* Lima muy suave */
    border: 1px solid #C8E6C9 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
body.theme-pastel .debate-headline { color: #1B5E20 !important; }
body.theme-pastel .take-text { color: #333 !important; }
body.theme-pastel .debate-content strong { color: #2E7D32 !important; }

/* Input de Opinión */
body.theme-pastel .interaction-input {
    background: #FFFFFF !important;
    border: 1px solid #A5D6A7 !important;
    color: #000 !important;
}


/* --- 3. TIPS (BIO INTEL) --- */
/* ID: #tips-fullscreen-hub */

/* Fondo y Nav */
body.theme-pastel #tips-fullscreen-hub,
body.theme-pastel .tips-nav {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Header */
body.theme-pastel .tips-header-pro {
    background: rgba(232, 245, 233, 0.95) !important;
    border-bottom: 1px solid #A5D6A7 !important;
}
body.theme-pastel .tips-header-pro div { color: #1B5E20 !important; }
body.theme-pastel .tips-header-pro span[style*="color:#00f3ff"] { color: #2E7D32 !important; }

/* Botones Nav */
body.theme-pastel .t-nav-btn { color: #558B2F !important; }
body.theme-pastel .t-nav-btn.active { 
    color: #1B5E20 !important; 
    border-bottom-color: #2E7D32 !important; 
}

/* Tarjetas de Noticias */
body.theme-pastel .news-card {
    background: #F1F8E9 !important;
    border: 1px solid #C8E6C9 !important;
}
body.theme-pastel .news-title { color: #1B5E20 !important; }
body.theme-pastel .news-meta span { color: #558B2F !important; }


/* --- 4. DIARIO (JOURNAL) --- */
/* ID: #master-journal-overlay */

/* Fondo Modal */
body.theme-pastel #master-journal-overlay .modal-content {
    background: #FFFFFF !important;
    border: 2px solid #A5D6A7 !important;
}

/* Textos Header */
body.theme-pastel #master-journal-overlay h2 { color: #1B5E20 !important; }
body.theme-pastel #master-journal-overlay p { color: #558B2F !important; }

/* Inputs y Textareas */
body.theme-pastel #master-journal-overlay input,
body.theme-pastel #master-journal-overlay textarea,
body.theme-pastel #jr-weight,
body.theme-pastel #jr-experience {
    background: #F1F8E9 !important;
    color: #000 !important;
    border-color: #C8E6C9 !important;
}

/* Botones de Sentimiento */
body.theme-pastel .feel-btn {
    background: #F9FBE7 !important;
    color: #558B2F !important;
    border-color: #C8E6C9 !important;
}
body.theme-pastel .feel-btn.selected {
    background: #2E7D32 !important;
    color: #FFFFFF !important;
    border-color: #2E7D32 !important;
}

/* Caja de Foto */
body.theme-pastel #jr-photo-box {
    background: #F1F8E9 !important;
    border-color: #A5D6A7 !important;
}
body.theme-pastel #jr-photo-box i { color: #2E7D32 !important; }

/* Botón Guardar */
body.theme-pastel #jr-save-btn {
    background: #2E7D32 !important;
    color: #FFFFFF !important;
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3) !important;
}
/* =================================================================== */
/*      FIX MAGAZINE: EXORCISMO FINAL (FOOTER Y ETIQUETAS)
/* =================================================================== */

/* 1. EL FOOTER NEGRO (LA BARRA DE ABAJO) */
/* Atacamos al ÚLTIMO DIV hijo del overlay, que siempre es el footer */
body.theme-pastel #magazine-overlay > div:last-child,
body.theme-pastel .mag-modern-overlay > div:last-child {
    /* Forzar fondo Verde Té */
    background: #F1F8E9 !important;
    background-color: #F1F8E9 !important;
    
    /* Borde suave */
    border-top: 1px solid #C8E6C9 !important;
    
    /* Texto base */
    color: #1B5E20 !important;
}

/* 2. TEXTO "TOP VOICES" */
body.theme-pastel #magazine-overlay span[style*="color:#888"] {
    color: #558B2F !important; /* Verde Oliva */
}

/* 3. BOTÓN "SOLO ELITE" (CANDADO) */
body.theme-pastel #btn-elite-locked {
    background: #FFFFFF !important;
    border: 1px solid #A5D6A7 !important;
    color: #1B5E20 !important;
}

/* 4. ETIQUETA ROJA DE LA NOTICIA (Runner's World) */
/* Cambiamos ese rojo agresivo por un Rosa/Coral elegante */
body.theme-pastel .debate-source-badge {
    background: #FF8A80 !important; /* Coral Suave */
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border-radius: 0 0 8px 0 !important; /* Detalle estético */
}

/* 5. FONDO DE LA TARJETA DE NOTICIA (Por si acaso es gris) */
body.theme-pastel .debate-card {
    background: #FFFFFF !important;
    border: 1px solid #C8E6C9 !important;
}

/* 6. TÍTULO DE LA NOTICIA */
body.theme-pastel .debate-headline {
    color: #1B5E20 !important;
}

/* 7. CAJA "ANÁLISIS MAKUMOTO" */
body.theme-pastel .makumoto-take {
    background: #FFFDE7 !important; /* Amarillo Crema muy suave */
    border-left: 3px solid #FFD700 !important;
}
body.theme-pastel .take-label { color: #FBC02D !important; }
body.theme-pastel .take-text { color: #555 !important; }
/* =================================================================== */
/*      FIX TIPS (BIO INTEL): LIMPIEZA FINAL
/* =================================================================== */

/* 1. LA ALERTA ROJA DE ARRIBA */
/* Cambiamos el rojo agresivo por un Naranja/Coral suave "Botanical" */
body.theme-pastel .alert-banner {
    background: linear-gradient(90deg, #FFCC80 0%, #FFAB91 100%) !important;
    border-bottom: 1px solid #FF8A65 !important;
    
    /* Texto Oscuro para que se lea */
    color: #BF360C !important; 
}
body.theme-pastel .alert-banner i {
    color: #BF360C !important;
}

/* 2. EL BOTÓN "VER NOTICIAS" (GOOGLE) */
/* Atacamos el enlace específico que apunta a google news */
body.theme-pastel a[href*="news.google.com"] {
    /* Fondo Verde Fuerte */
    background: #1B5E20 !important; 
    
    /* Texto Blanco */
    color: #FFFFFF !important;
    
    /* Limpieza */
    border: none !important;
    box-shadow: 0 4px 15px rgba(27, 94, 32, 0.2) !important;
}

/* 3. TÍTULOS DE LAS NOTICIAS (H3) */
/* Asegurar que sean Verde Oscuro */
body.theme-pastel .news-title,
body.theme-pastel .advice-card h3 {
    color: #1B5E20 !important;
    text-shadow: none !important;
}

/* 4. ETIQUETAS AMARILLAS (HACE 2H / EN VIVO) */
/* Hacerlas más legibles y limpias */
body.theme-pastel .news-badge {
    background: #FFFFFF !important;
    color: #Fbc02d !important; /* Amarillo Oscuro */
    border: 1px solid #FFF59D !important;
    font-weight: 800 !important;
}

/* 5. TEXTO DE METADATOS Y CUERPO */
body.theme-pastel .news-meta,
body.theme-pastel .news-meta span,
body.theme-pastel .advice-card p {
    color: #558B2F !important; /* Verde Oliva */
}

/* 6. BOTÓN "LEER ->" */
body.theme-pastel .news-meta button {
    color: #D81B60 !important; /* Rosa para el enlace */
}
/* =================================================================== */
/*      FIX MAGAZINE: LIMPIEZA DE DEBATES (ADIÓS CAJAS NEGRAS)
/* =================================================================== */

/* 1. EL COMENTARIO DESTACADO (RunnerPro) */
/* Actualmente es gris oscuro, lo pasamos a Verde Té */
body.theme-pastel .top-comment {
    background: #F1F8E9 !important; /* Verde muy pálido */
    border: 1px solid #C8E6C9 !important; /* Borde sutil */
    color: #333333 !important; /* Texto gris oscuro legible */
}

/* El nombre del usuario en el comentario */
body.theme-pastel .top-comment strong {
    color: #1B5E20 !important; /* Verde Bosque */
}

/* El icono de comillas */
body.theme-pastel .top-comment i {
    color: #A5D6A7 !important; /* Verde suave */
}

/* 2. LA CAJA DE ELEGIR OPINIÓN (INPUT) */
/* El campo de texto negro */
body.theme-pastel .interaction-input {
    background: #FFFFFF !important; /* Blanco */
    border: 1px solid #A5D6A7 !important; /* Borde Verde */
    color: #000000 !important;
}
body.theme-pastel .interaction-input::placeholder {
    color: #558B2F !important; /* Texto de ayuda en verde oliva */
}

/* 3. EL BOTÓN DE ENVIAR (AVIÓN DE PAPEL) */
body.theme-pastel .send-opinion-btn {
    background: #FFFFFF !important;
    border: 1px solid #1B5E20 !important;
    color: #1B5E20 !important; /* Icono Verde Fuerte */
    box-shadow: none !important;
}

/* 4. LAS BOLITAS DE "TOP VOICES" (ABAJO A LA IZQUIERDA) */
/* Actualmente son grises (#555, #777), las pasamos a gama de verdes */
body.theme-pastel .voices-stack-dock div {
    background-color: #C8E6C9 !important; /* Verde Pastel */
    border-color: #FFFFFF !important; /* Borde Blanco */
}
/* Variación para que no se vean todas iguales (opcional, truco visual) */
body.theme-pastel .voices-stack-dock div:nth-child(2) { background-color: #A5D6A7 !important; }
body.theme-pastel .voices-stack-dock div:nth-child(3) { background-color: #81C784 !important; }

/* 5. TEXTO DE ESTADÍSTICAS ("82 Miembros...") */
body.theme-pastel .stats-text {
    color: #1B5E20 !important;
}
/* =================================================================== */
/*      FIX FINAL: INPUT DE OPINIÓN (TAPA EL FONDO NEGRO)
/* =================================================================== */

/* Usamos una "Sombra Interna Sólida" para tapar el fondo negro inline */
body.theme-pastel .interaction-input {
    /* 1. EL TRUCO: Una sombra interna gigante de color claro que tapa el negro */
    box-shadow: inset 0 0 0 100px #F1F8E9 !important; 
    
    /* 2. Intentar cambiar el fondo por si el navegador lo permite */
    background-color: #F1F8E9 !important;
    background: #F1F8E9 !important;
    
    /* 3. Borde Verde Suave */
    border: 1px solid #C8E6C9 !important;
    
    /* 4. Forzar color de texto del usuario (lo que escribes) */
    color: #1B5E20 !important;
    -webkit-text-fill-color: #1B5E20 !important;
}

/* 5. EL TEXTO DE AYUDA "Escribe tu opinión..." */
body.theme-pastel .interaction-input::placeholder {
    color: #558B2F !important; /* Verde Oliva legible */
    opacity: 1 !important;
    text-shadow: none !important;
}

/* 6. EL BOTÓN DE ENVIAR (AVIÓN) */
/* Aseguramos que combine perfecto al lado */
body.theme-pastel .send-opinion-btn {
    background: #2E7D32 !important; /* Fondo Verde Fuerte */
    color: #FFFFFF !important;      /* Icono Blanco */
    border: none !important;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.2) !important;
}
/* =================================================================== */
/*      FIX FINAL LYRA: ICONOS INVISIBLES Y LÍNEAS NEGRAS
/* =================================================================== */

/* 1. ICONO DE "TIPS" (EL FOCO) */
/* Antes era blanco, ahora será Verde Bosque para que se vea */
body.theme-pastel #opt-tips i,
body.theme-pastel .o-circle-btn i {
    color: #1B5E20 !important; /* Verde Bosque Oscuro */
    text-shadow: none !important;
}

/* 2. ELIMINAR LÍNEAS NEGRAS LATERALES DEL MODAL */
/* Quitamos cualquier borde lateral del contenedor principal */
body.theme-pastel #my-journey-sheet-overlay,
body.theme-pastel .o-container {
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important; /* Solo sombra suave, no borde negro */
}

/* Asegurar que el overlay ocupe todo sin bordes */
body.theme-pastel .modal-overlay {
    padding: 0 !important; /* Quitar padding que deja ver fondo negro */
}
/* =================================================================== */
/*      FIX MAGAZINE: BOTÓN VOLVER (TEMA PASTEL)
/* =================================================================== */

/* Asegurar visibilidad y color en Tema Pastel */
body.theme-pastel #force-back-btn {
    /* Fondo Blanco para contraste */
    background: #FFFFFF !important;
    
    /* Borde y Texto Verde Fuerte */
    border: 2px solid #1B5E20 !important;
    color: #1B5E20 !important;
    
    /* Sombra */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    
    opacity: 1 !important;
    display: flex !important;
}

body.theme-pastel #force-back-btn:active {
    background: #1B5E20 !important;
    color: #FFFFFF !important;
}
/* =================================================================== */
/*      FIX DIARIO (JOURNAL): LIMPIEZA DE NEGROS (TEMA PASTEL)
/* =================================================================== */

/* 1. EL FONDO NEGRO DETRÁS DEL INPUT DE PESO Y LOS BOTONES DE ABAJO */
/* Atacamos cualquier caja con fondo #111 dentro del diario */
body.theme-pastel #master-journal-overlay div[style*="background:#111"] {
    background: #F1F8E9 !important; /* Verde Té */
    border: 1px solid #C8E6C9 !important; /* Borde Verde Suave */
}

/* 2. EL TEXTO E ICONO DEL INPUT DE PESO */
body.theme-pastel #jr-weight {
    color: #1B5E20 !important; /* Verde Oscuro */
}
body.theme-pastel .fa-weight-scale {
    color: #2E7D32 !important; /* Icono Verde */
}

/* 3. BOTONES DE "CÓMO ESTUVO TU DÍA" */
/* Estado Normal (No seleccionado) */
body.theme-pastel .feel-btn {
    background: #FFFFFF !important;
    border: 1px solid #C8E6C9 !important;
    color: #558B2F !important; /* Verde Oliva */
}
/* Estado Seleccionado */
body.theme-pastel .feel-btn.selected {
    background: #2E7D32 !important; /* Verde Fuerte */
    color: #FFFFFF !important;
    border-color: #2E7D32 !important;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
}

/* 4. ÁREA DE TEXTO (BITÁCORA) */
body.theme-pastel #jr-experience {
    background: #FFFFFF !important;
    color: #000 !important;
    border: 1px solid #A5D6A7 !important;
}
body.theme-pastel #jr-experience::placeholder {
    color: #81C784 !important;
}

/* 5. CAJA DE SUBIR FOTO */
body.theme-pastel #jr-photo-box {
    background: #F9FBE7 !important; /* Lima muy suave */
    border: 2px dashed #A5D6A7 !important;
}
body.theme-pastel #jr-photo-text { color: #558B2F !important; }

/* 6. BOTONES INFERIORES (GRÁFICAS Y EXPEDIENTE) */
body.theme-pastel #btn-link-stats,
body.theme-pastel #btn-link-expediente {
    background: #FFFFFF !important;
    border: 1px solid #A5D6A7 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Textos dentro de esos botones */
body.theme-pastel #btn-link-stats div,
body.theme-pastel #btn-link-expediente div {
    color: #1B5E20 !important;
}
/* Subtextos (los que eran grises) */
body.theme-pastel #btn-link-stats div[style*="color:#666"],
body.theme-pastel #btn-link-expediente div[style*="color:#666"] {
    color: #558B2F !important;
}
/* =================================================================== */
/*      FIX DIARIO: LIMPIEZA PROFUNDA (BOTONES Y FONDOS)
/* =================================================================== */

/* 1. ASEGURAR FONDO BLANCO EN TODO EL CONTENEDOR */
body.theme-pastel #master-journal-overlay .modal-content,
body.theme-pastel #journal-scroll-body {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #1B5E20 !important;
}

/* 2. BOTONES DE ABAJO (GRÁFICAS Y EXPEDIENTE) - ADIÓS NEGRO */
/* Estos suelen quedarse negros porque tienen IDs específicos */
body.theme-pastel #btn-link-stats,
body.theme-pastel #btn-link-expediente {
    /* Fondo Verde Pálido */
    background: #F1F8E9 !important; 
    
    /* Borde Verde Suave */
    border: 1px solid #C8E6C9 !important;
    
    /* Sombra suave */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 3. ICONOS Y TEXTOS DE LOS BOTONES DE ABAJO */
body.theme-pastel #btn-link-stats i,
body.theme-pastel #btn-link-expediente i {
    color: #2E7D32 !important; /* Iconos Verdes */
}
body.theme-pastel #btn-link-stats div,
body.theme-pastel #btn-link-expediente div {
    color: #1B5E20 !important; /* Texto Verde Oscuro */
}
body.theme-pastel #btn-link-stats div[style*="color:#666"],
body.theme-pastel #btn-link-expediente div[style*="color:#666"] {
    color: #558B2F !important; /* Subtítulos Verde Oliva */
}

/* 4. BOTÓN "GUARDAR REGISTRO" */
/* Asegurar que sea Verde Fuerte y no se pierda */
body.theme-pastel #jr-save-btn {
    background: #1B5E20 !important; /* Verde Bosque */
    color: #FFFFFF !important;
    box-shadow: 0 5px 15px rgba(27, 94, 32, 0.4) !important;
}
/* =================================================================== */
/*      FIX NUCLEAR DIARIO: ELIMINAR TODOS LOS FONDOS NEGROS
/* =================================================================== */

/* 1. EL TELÓN DE FONDO (Overlay que cubre toda la pantalla) */
/* Actualmente es negro al 95%. Lo pasamos a Blanco Transparente */
body.theme-pastel #master-journal-overlay {
    background: rgba(255, 255, 255, 0.92) !important; /* Blanco niebla */
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
}

/* 2. LA TARJETA DEL DIARIO (El cuadro central) */
/* Atacamos por ID y clase para vencer al estilo en línea */
body.theme-pastel #master-journal-overlay .modal-content {
    /* Forzar Blanco Puro */
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    
    /* Cambiar borde verde neón por verde elegante */
    border: 2px solid #A5D6A7 !important;
    
    /* Sombra suave */
    box-shadow: 0 10px 40px rgba(27, 94, 32, 0.15) !important;
    
    /* Asegurar texto base oscuro */
    color: #1B5E20 !important;
}

/* 3. HEADER DEL DIARIO (Donde dice "Mi Diario") */
/* A veces tiene borde inferior oscuro */
body.theme-pastel #master-journal-overlay div[style*="border-bottom:1px solid #222"] {
    border-bottom: 1px solid #C8E6C9 !important;
}

/* 4. TÍTULO Y FECHA */
body.theme-pastel #master-journal-overlay h2 {
    color: #1B5E20 !important; /* Verde Bosque */
    font-family: 'Poppins', sans-serif !important;
}
body.theme-pastel #master-journal-overlay p {
    color: #558B2F !important; /* Verde Oliva */
}

/* 5. BOTÓN DE CERRAR (X) */
body.theme-pastel #close-journal-btn {
    color: #1B5E20 !important;
    background: rgba(0,0,0,0.05) !important; /* Círculo sutil */
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
}
/* =================================================================== */
/*      FIX TIPS FINAL: ELIMINACIÓN TOTAL DE TEXTO BLANCO
/* =================================================================== */

/* 1. REGLA MAESTRA: TODO EL TEXTO DEL MÓDULO A NEGRO */
/* Atacamos el ID principal y todos sus descendientes (*) */
body.theme-pastel #tips-fullscreen-hub * {
    color: #000000 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
}

/* 2. EXCEPCIÓN A: LA ALERTA DE ARRIBA (Fondo Oscuro -> Texto Blanco) */
body.theme-pastel #alert-banner-container * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
/* El fondo de la alerta (Verde Oscuro) */
body.theme-pastel .alert-banner {
    background: #1B5E20 !important;
    background-image: none !important;
    border-bottom: 1px solid #2E7D32 !important;
}
/* El icono de la alerta (Amarillo) */
body.theme-pastel .alert-banner i {
    color: #FFD700 !important;
    -webkit-text-fill-color: #FFD700 !important;
}

/* 3. EXCEPCIÓN B: EL BOTÓN DE GOOGLE (Fondo Oscuro -> Texto Blanco) */
body.theme-pastel a[href*="news.google.com"],
body.theme-pastel a[href*="news.google.com"] * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background-color: #1B5E20 !important; /* Asegurar fondo verde */
}

/* 4. EXCEPCIÓN C: ENLACES "LEER" (Color Rosa para destacar) */
body.theme-pastel .news-meta button,
body.theme-pastel .news-meta button i {
    color: #D81B60 !important;
    -webkit-text-fill-color: #D81B60 !important;
}

/* 5. AJUSTES DE FONDOS (Para que el negro se lea) */
body.theme-pastel .tips-header-pro,
body.theme-pastel .tips-nav {
    background: #E8F5E9 !important; /* Fondo Verde Claro */
    border-color: #A5D6A7 !important;
}
body.theme-pastel .news-card,
body.theme-pastel .advice-card {
    background: #FFFFFF !important; /* Tarjetas Blancas */
    border: 1px solid #C8E6C9 !important;
}
/* =================================================================== */
/*      FIX TIPS FINAL: ESTRATEGIA "TARJETAS DE HOJA" (FONDO OSCURO)
/* =================================================================== */

/* 1. EL BOTÓN DE GOOGLE (Corrección) */
/* Fondo Verde Fuerte + TEXTO BLANCO */
body.theme-pastel a[href*="news.google.com"] {
    background-color: #1B5E20 !important; /* Verde Bosque */
    color: #FFFFFF !important;            /* Blanco Puro */
    -webkit-text-fill-color: #FFFFFF !important;
    border: 2px solid #2E7D32 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}
/* Asegurar que el icono de Google dentro también sea blanco */
body.theme-pastel a[href*="news.google.com"] i {
    color: #FFFFFF !important;
}

/* 2. LAS TARJETAS DE NOTICIAS (FONDO VERDE OSCURO) */
/* Si las letras son blancas, oscurecemos el fondo para que resalten */
body.theme-pastel .news-card,
body.theme-pastel .advice-card {
    background-color: #2E7D32 !important; /* Verde Hoja Intenso */
    background: #2E7D32 !important;
    border: 1px solid #1B5E20 !important;
    box-shadow: 0 4px 10px rgba(27, 94, 32, 0.3) !important;
}

/* 3. LOS TEXTOS (Blancos y Legibles) */
/* Ahora permitimos que sean blancos, y les damos una sombra suave */
body.theme-pastel .news-card *,
body.theme-pastel .advice-card *,
body.theme-pastel #tips-content-area [style*="color:#fff"] {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; /* Sombra para nitidez */
}

/* 4. EXCEPCIONES */
/* La etiqueta amarilla (Hace 2h) debe tener texto negro */
body.theme-pastel .news-badge {
    background-color: #FFF176 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
}

/* El enlace "Leer" en color claro para que destaque sobre verde */
body.theme-pastel .news-meta button {
    color: #81D4FA !important; /* Azul Cielo claro */
    -webkit-text-fill-color: #81D4FA !important;
}
/* =================================================================== */
/*      FIX IMAGEN PERDIDA EN TIPS (TEMA PASTEL)
/* =================================================================== */

/* 1. EL CONTENEDOR DE LA FOTO */
/* El problema era que el 'background' de la tarjeta se comía a la foto */
body.theme-pastel .news-img {
    /* Forzar que el navegador respete la imagen que pone el JS */
    background-color: transparent !important; 
    
    /* Asegurar dimensiones */
    height: 160px !important;
    width: 100% !important;
    display: block !important;
    
    /* Estilos de imagen */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid #1B5E20 !important;
    
    /* TRUCO: Si la imagen falla, mostrar un color gris oscuro */
    background: #333; 
}

/* 2. ASEGURAR QUE LA IMAGEN EN LÍNEA TENGA PRIORIDAD */
/* Esto reactiva el style="background-image:..." que pone el Javascript */
body.theme-pastel .news-img[style] {
    background-color: transparent !important;
}
/* =================================================================== */
/*      FIX TIPS FINAL: TARJETAS BLANCAS + FOTOS VISIBLES
/* =================================================================== */

/* 1. TARJETAS DE NOTICIAS (BLANCO PURO) */
body.theme-pastel .news-card,
body.theme-pastel .advice-card {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #C8E6C9 !important; /* Borde Verde Suave */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* 2. FORZAR TEXTOS NEGROS (Para leer sobre blanco) */
body.theme-pastel .news-content *,
body.theme-pastel .news-title,
body.theme-pastel .news-meta,
body.theme-pastel .news-meta span {
    color: #000000 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
}

/* 3. RESCATAR LA IMAGEN (FIX CRÍTICO) */
/* El problema era que el fondo verde tapaba la imagen o le quitaba altura */
body.theme-pastel .news-img {
    /* Dimensiones obligatorias */
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    
    /* Asegurar que la imagen de fondo (URL) se vea */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Quitar colores de fondo sólidos que la tapen */
    background-color: #eee !important; /* Gris claro mientras carga */
    
    /* Bordes redondeados arriba */
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid #E0E0E0 !important;
    
    /* Asegurar visibilidad */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. ALERTA SUPERIOR (Verde Oscuro + Texto Blanco) - MANTENER */
body.theme-pastel .alert-banner {
    background: #1B5E20 !important;
    color: #FFFFFF !important;
}
body.theme-pastel .alert-banner * { color: #FFFFFF !important; }