/* 
    FASPP A.C. - UNIFIED DESIGN SYSTEM v4.5
    Identity: Vino Noble, Mármol & Bronce
    Layout: Editorial Home + App Mobile + Admin Sidebar
*/

:root {
    --vino-noble: #630d16;
    --vino-dark: #3a080d;
    --marmol: #f4f1ea;
    --marmol-oscuro: #e8e5de;
    --bronce: #9c824a;
    --bronce-light: #c2ac78;
    --texto-oscuro: #1a1a1a;
    --texto-suave: #6b7280;
    --blanco: #ffffff;
    --borde: #d1cfc8;
    
    --sidebar-width: 280px;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --shadow-legal: 0 10px 30px rgba(0,0,0,0.08);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

/* 1. RESET GENERAL */
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }
body { 
    font-family: var(--font-body); 
    background-color: var(--marmol); 
    color: var(--texto-oscuro); 
    line-height: 1.6;
    overflow-x: hidden;
}
h1, h2, h3, .heading-font { font-family: var(--font-heading); font-weight: 700; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: inherit; }

/* 2. PANTALLA DE CARGA (INTRO) */
.intro-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--vino-noble); z-index: 10000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.intro-screen.hidden { transform: translateY(-100%); }
.intro-logo { width: 100px; filter: brightness(0) invert(1); margin-bottom: 20px; }

/* 3. NAVEGACIÓN PORTAL PÚBLICO */
.nav-header {
    background: var(--blanco);
    height: 80px;
    display: flex;
    align-items: center;
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--borde);
    padding: 0 5%;
}
.nav-container { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

.brand { display: flex; align-items: center; gap: 15px; cursor: pointer; }
.brand img { height: 50px; }
.brand-text h1 { font-size: 1.2rem; color: var(--vino-noble); line-height: 1; }
.brand-text p { font-size: 0.6rem; text-transform: uppercase; color: var(--bronce); letter-spacing: 2px; font-weight: 700; }

.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { 
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; 
    letter-spacing: 1px; color: var(--texto-oscuro); transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--vino-noble); }

/* 4. SECCIONES PÚBLICAS (SPA) */
.section-pane { display: none; animation: sectionFade 0.6s ease forwards; }
.section-pane.active { display: block; }
@keyframes sectionFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* Hero Editorial */
.hero-editorial { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; background: var(--blanco); }
.hero-text { padding: 8% 10%; display: flex; flex-direction: column; justify-content: center; }
.hero-text h2 { font-size: 3.5rem; color: var(--vino-noble); margin: 20px 0; line-height: 1.1; }
.hero-image { background: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?q=80&w=1973&auto=format&fit=crop') center/cover; }

/* Programas List */
.programs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding: 50px 0; }
.program-item { 
    background: var(--blanco); padding: 40px; border: 1px solid var(--borde); 
    transition: var(--transition); text-align: center;
}
.program-item:hover { border-color: var(--vino-noble); box-shadow: var(--shadow-legal); transform: translateY(-5px); }
.program-item i { font-size: 2.5rem; color: var(--bronce); margin-bottom: 20px; }

/* 5. DISEÑO DE BOTONES NOBLES */
.btn-noble {
    padding: 14px 30px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; font-size: 0.75rem; transition: var(--transition);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-vino { background: var(--vino-noble); color: var(--marmol); }
.btn-vino:hover { background: var(--vino-dark); transform: translateY(-2px); }
.btn-bronce { background: var(--bronce); color: var(--marmol); }

/* 6. ESTILO DE LOGIN (SEGURIDAD) */
.login-body { background: var(--vino-dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-card { 
    background: var(--blanco); padding: 50px; width: 100%; max-width: 450px; 
    border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); text-align: center; 
}
.error-box { background: #fee2e2; color: #b91c1c; padding: 12px; margin-bottom: 20px; border-radius: 4px; display: none; font-size: 0.8rem; }

/* 7. PANEL ADMINISTRATIVO (SIDEBAR) */
.sidebar {
    width: var(--sidebar-width); background: var(--vino-dark); color: var(--marmol);
    position: fixed; height: 100vh; display: flex; flex-direction: column; z-index: 2000;
    transition: transform 0.4s ease;
}
.main-admin { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); min-height: 100vh; }

.nav-item {
    padding: 18px 30px; display: flex; align-items: center; gap: 15px;
    color: rgba(255,255,255,0.6); font-size: 0.9rem; cursor: pointer; transition: 0.3s;
}
.nav-item:hover, .nav-item.active { color: var(--blanco); background: rgba(156, 130, 74, 0.15); border-left: 4px solid var(--bronce); }

.admin-top-bar {
    height: 70px; background: var(--blanco); border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; justify-content: space-between; padding: 0 40px;
}

/* 8. TABLAS Y FORMULARIOS ADMIN */
.admin-pane { display: none; padding: 40px; }
.admin-pane.active { display: block; }

.stat-card { background: var(--blanco); padding: 30px; border: 1px solid var(--borde); border-bottom: 4px solid var(--bronce); }
.stat-card h3 { font-size: 2.5rem; color: var(--vino-noble); margin: 10px 0; }

.data-list { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--borde); }
.data-list th { text-align: left; padding: 15px; background: var(--marmol); font-size: 0.7rem; text-transform: uppercase; color: var(--bronce); }
.data-list td { padding: 15px; border-bottom: 1px solid var(--marmol-oscuro); font-size: 0.85rem; }

/* 9. RESPONSIVIDAD MÓVIL (TIPO APP) */
.app-bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; width: 100%;
    background: var(--blanco); height: 70px; border-top: 1px solid var(--borde);
    z-index: 5000; box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}

.app-nav-list { display: flex; justify-content: space-around; align-items: center; height: 100%; list-style: none; }
.app-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--texto-suave); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.app-nav-item i { font-size: 1.2rem; }
.app-nav-item.active { color: var(--vino-noble); }

.mobile-admin-toggle {
    display: none; position: fixed; top: 15px; right: 15px; z-index: 3000;
    background: var(--vino-noble); color: white; width: 45px; height: 45px;
    border-radius: 4px; place-items: center; font-size: 1.2rem;
}

/* MEDIA QUERIES PARA CELULAR */
@media (max-width: 992px) {
    /* Portal Público */
    .nav-links, .header-actions { display: none; }
    .app-bottom-nav { display: block; }
    .hero-editorial { grid-template-columns: 1fr; }
    .hero-text { text-align: center; padding: 60px 20px; order: 2; }
    .hero-text h2 { font-size: 2.2rem; }
    .hero-image { height: 300px; order: 1; }
    .section-pane { padding-bottom: 100px; }

    /* Admin Panel */
    .sidebar { transform: translateX(-100%); }
    .sidebar.mobile-active { transform: translateX(0); }
    .main-admin { margin-left: 0; width: 100%; }
    .admin-top-bar { padding: 0 20px; }
    .mobile-admin-toggle { display: grid; }
    .admin-pane { padding: 20px; }
    .stats-grid { grid-template-columns: 1fr; }
}

/* 10. ESTILOS DE COMPONENTES ADICIONALES */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.7rem; font-weight: 800; color: var(--bronce); text-transform: uppercase; margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid var(--borde); background: var(--marmol);
}

.float-wa {
    position: fixed; bottom: 90px; right: 20px; width: 60px; height: 60px;
    background: #25d366; color: white; border-radius: 50%; display: grid;
    place-items: center; font-size: 2rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1); z-index: 4000;
}

/* Footer Editorial */
footer { background: #111; color: var(--marmol); padding: 60px 5% 100px 5%; text-align: center; }

/* ==========================================
   REPARACIÓN MÓVIL - ESTILO APLICACIÓN
   ========================================== */
@media (max-width: 992px) {
    /* Esconder navegación de escritorio */
    .nav-links, .header-actions {
        display: none !important;
    }

    /* Activar barra estilo App */
    .app-bottom-nav {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--blanco);
        height: 75px;
        border-top: 1px solid var(--borde);
        z-index: 9999;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.1);
    }

    /* Hero Editorial en Celular */
    .hero-editorial {
        display: flex;
        flex-direction: column;
    }
    .hero-image {
        height: 300px;
        order: 1;
    }
    .hero-text {
        order: 2;
        padding: 40px 20px !important;
        text-align: center;
    }
    .hero-text h2 {
        font-size: 2.2rem !important;
    }

    /* Ajuste de Secciones para no chocar con la barra */
    .section-pane {
        padding: 40px 5% 120px 5% !important;
    }

    /* Botones en Celular (Más fáciles de tocar) */
    .btn-noble {
        width: 100%;
        margin-bottom: 10px;
        padding: 18px;
        font-size: 0.8rem;
    }

    /* Grid de Programas en Celular */
    .programs-list {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .program-item {
        padding: 30px !important;
    }

    /* Admin Sidebar en Celular */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.4s ease;
    }
    .sidebar.mobile-active {
        transform: translateX(0);
    }
    .main-admin {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .mobile-admin-toggle {
        display: grid !important;
    }
}