:root {
    --bg-dark: #000000;
    --brand-red: #D32F2F;
    --brand-red-gradient: linear-gradient(135deg, #D32F2F 0%, #9A0007 100%);
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --glass-bg: rgba(20, 20, 20, 0.98);
    --glass-border: 1px solid rgba(255, 255, 255, 0.12);
    --radius-m: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* BLINDAJE IOS */
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%; height: 100dvh;
    overflow: hidden; 
    overscroll-behavior: none;
    background-color: #000;
    font-family: 'Inter', sans-serif; color: var(--text-main);
    position: fixed;
}

/* FONDO */
.background-blobs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; }
.blob-1 { width: 90vw; height: 90vw; background: radial-gradient(circle, var(--brand-red) 0%, transparent 70%); top: -20%; left: -20%; }
.glass-overlay { position: absolute; top:0; left:0; width:100%; height:100%; backdrop-filter: blur(15px); z-index: -1; }

/* LANDING */
.landing-container { 
    width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center; 
    position: relative; z-index: 2000; 
    overflow-y: auto; padding: 20px;
}
.login-card { width: 100%; max-width: 400px; padding: 30px; text-align: center; border-radius: 24px; background: rgba(30, 30, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); }
.login-logo { width: 70px; height: 70px; margin-bottom: 15px; border-radius: 15px; }
.login-card h1 { font-size: 1.5rem; margin: 0 0 10px 0; font-weight: 800; letter-spacing: -1px; }
.input-group { position: relative; margin-bottom: 15px; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #888; }
.input-group input { padding-left: 45px; width: 100%; height: 45px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; color: white; outline: none; }
.full-width { width: 100%; margin-top: 10px; }
.switch-auth { margin-top: 15px; font-size: 0.85rem; color: #888; }
.switch-auth a { color: var(--brand-red); text-decoration: none; font-weight: bold; cursor:pointer;}
.pwa-install-box { margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); text-align: left; font-size: 0.85rem; color: #aaa; }
.pwa-steps { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 5px; border: 1px solid rgba(255,255,255,0.05); }
.pwa-steps strong { color: var(--brand-red); }

/* APP HEADER */
.app-header {
    height: auto; min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 5px 15px; 
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(15, 15, 15, 0.98); 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-top: calc(env(safe-area-inset-top) + 5px); padding-bottom: 10px;
    touch-action: none; 
}
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-area img { height: 28px; border-radius: 6px; }
.desktop-nav { display: flex; gap: 20px; }
.nav-link { background: transparent; border: none; color: #aaa; font-size: 1rem; cursor: pointer; padding: 8px 15px; border-radius: 8px; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
.nav-link.active { color: white; background: rgba(255,255,255,0.1); }
.btn-icon { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; }

/* MAIN CONTENT */
.main-content {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    padding-bottom: 90px; 
    padding-top: calc(85px + env(safe-area-inset-top)); 
    padding-left: 15px; padding-right: 15px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; 
    max-width: 1200px; margin: 0 auto;
}

/* --- MOBILE NAV (PEGADA AL SUELO Y SEPARADA DE ARRIBA) --- */
.mobile-bottom-nav {
    display: none; 
    position: fixed; bottom: 0; left: 0; width: 100%; 
    background: #000; 
    border-top: 1px solid rgba(255,255,255,0.15); 
    z-index: 9999; 
    
    display: flex; justify-content: space-around; align-items: flex-end;
    
    /* PADDING CLAVE: */
    padding-bottom: 0; /* Pegado al suelo */
    padding-top: 12px; /* Separación generosa de la línea superior */
    
    /* Altura total */
    height: 52px; 

    touch-action: none; overscroll-behavior: none;
}
@media (min-width: 769px) { .mobile-bottom-nav { display: none !important; } }

.mobile-nav-btn { 
    background: none; border: none; color: #777; flex: 1; 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    
    font-size: 0.65rem; 
    font-weight: 500; 
    gap: 2px; 
    height: 100%; 
    
    /* Margen de seguridad con el borde inferior físico */
    padding-bottom: 4px;
}
.mobile-nav-btn i { 
    font-size: 1.4rem; 
    margin-bottom: 0; 
}
.mobile-nav-btn.active { color: white; }
.mobile-nav-btn.active i { color: var(--brand-red); margin-top: -2px; }

/* COMPONENTES */
.btn-primary { background: var(--brand-red-gradient); color: white; border: none; padding: 12px 24px; border-radius: 12px; font-weight: 700; cursor: pointer; text-align: center;}
.btn-primary.sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-danger { background: rgba(220, 53, 69, 0.2); border: 1px solid #dc3545; color: #ff6b6b; padding: 8px 16px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }

.glass-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 10px; border-radius: 8px; width: 100%; font-size: 1rem; }
.glass-input.sm { padding: 8px; width: auto; font-size: 0.9rem; }

/* SELECTS COLORIDOS */
select.glass-input {
    background-color: rgba(211, 47, 47, 0.15);
    border: 1px solid rgba(211, 47, 47, 0.4);
    color: white; font-weight: 600;
}
select.glass-input option { background-color: #111; color: white; }

.search-box { display: flex; align-items: center; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 0 10px; height: 38px; }
.search-box input { background: transparent; border: none; color: white; width: 120px; font-size: 0.9rem; outline: none; }
.search-box i { color: #888; font-size: 0.9rem; margin-right: 5px; }

/* GRID */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; margin-top: 10px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.card { background: rgba(30,30,30,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; position: relative; }
.status-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }

/* CREADOR MANUAL STYLES */
.meal-group-header { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 5px; }
.btn-mini-add { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #ccc; border-radius: 6px; padding: 4px 8px; font-size: 0.8rem; cursor: pointer; }
.dynamic-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.btn-mini-del { background: rgba(255,0,0,0.2); border: 1px solid rgba(255,0,0,0.3); color: #ff9999; border-radius: 6px; width: 35px; height: 35px; display:flex; align-items:center; justify-content:center; cursor: pointer; }

/* MODALS FULL SCREEN */
.full-screen-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 99999; flex-direction: column; padding-top: env(safe-area-inset-top); }
.fs-header { position: absolute; top: env(safe-area-inset-top); left: 0; width: 100%; height: 60px; background: rgba(20,20,20,0.98); border-bottom: 1px solid #333; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; z-index: 2; }
.fs-body { position: absolute; top: calc(60px + env(safe-area-inset-top)); left: 0; right: 0; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding: 20px; padding-bottom: 200px; }
.fs-close-btn { background: rgba(255,255,255,0.1); border: none; color: white; padding: 8px 16px; border-radius: 20px; cursor: pointer; display:flex; align-items:center; gap:5px; font-weight: 600;}

/* MODALS POPUP */
.modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); padding-top: env(safe-area-inset-top); }
.modal-content { background: #151515; margin: 5% auto; padding: 25px; width: 95%; border-radius: 20px; border: 1px solid #333; max-height: 85vh; overflow-y: auto; position: relative; }
.close-btn { position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.1); border-radius: 50%; width: 30px; height: 30px; border: none; color: #fff; cursor: pointer; display:flex; align-items:center; justify-content:center;}
#clientSelectorModal { z-index: 6000; }

/* DIET DETAILS & GUIDES */
.diet-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-bottom: 30px; }
.meal-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; margin-bottom: 15px; }
.meal-title { color: var(--brand-red); margin-bottom: 15px; font-weight: 800; text-transform: uppercase; display:flex; justify-content:space-between; align-items: center; font-size: 0.95rem; }
.option-card { background: rgba(0,0,0,0.4); padding: 15px; border-radius: 10px; margin-bottom: 10px; border-left: 3px solid #444; }
.warning-box { background: rgba(255, 152, 0, 0.1); border-left: 4px solid #f57c00; padding: 15px; margin: 15px 0; border-radius: 4px; color: #ffcc80; font-size: 0.9rem; }
.hydration-box { background: rgba(33, 150, 243, 0.1); border: 1px solid rgba(33, 150, 243, 0.3); color: #64b5f6; padding: 15px; border-radius: 8px; display: flex; gap: 10px; align-items: center; font-weight: 500; }

/* Guía Grid */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.guide-card { padding: 15px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); }
.guide-card h4 { margin: 0 0 10px 0; font-size: 0.9rem; font-weight: 800; text-transform: uppercase; }
.guide-card ul { margin: 0; padding-left: 20px; color: #ccc; font-size: 0.85rem; }
.guide-card li { margin-bottom: 5px; }
.card-green { border-color: rgba(76, 175, 80, 0.3); background: rgba(76, 175, 80, 0.05); }
.card-green h4 { color: #66bb6a; }
.card-red { border-color: rgba(244, 67, 54, 0.3); background: rgba(244, 67, 54, 0.05); }
.card-red h4 { color: #ef5350; }
.sub-list { list-style: none; padding: 0; margin-top: 10px; }
.sub-list li { margin-bottom: 8px; font-size: 0.9rem; color: #ddd; display: flex; gap: 10px; align-items: flex-start; }
.sub-list li i { color: var(--brand-red); font-size: 1rem; margin-top: 2px; }

@media (max-width: 768px) {
    .desktop-nav { display: none; }
    .mobile-bottom-nav { display: flex; }
    .app-header { padding-left: 15px; padding-right: 15px; }
    .diet-hero, .guide-grid { grid-template-columns: 1fr; }
}