/* ===================================================
VARIABLES Y AJUSTES GLOBALES
=================================================== */
:root {
    /* ═══════════════════════════════════════════════════════════════════
       PALETA CORPORATIVA APRENDEYPRACTICA — basada en el logo AP
       Azul oscuro (trazo A) · Cian vivo (interior A) · Naranja (P)
       ═══════════════════════════════════════════════════════════════════ */

    /* ── Paleta de marca (primario / secundario / acento) ── */
    --primary-color: #003366;        /* Azul Corporativo Oscuro */
    --primary-alt:   #006989;        /* Teal corporativo (404, catálogo, banner diag) */
    --secondary-color: #00C4CC;      /* Aqua Brillante (acento de enfoque) */
    --secondary-alt: #01A7C2;        /* Aqua más oscuro (404 nav) */
    --accent-color: #FF5733;         /* Naranja Vibrante (CTAs principales) */
    --accent-alt:   #E94E1B;         /* Naranja marca (hero index, título sección) */
    --accent-dark:  #C43A10;         /* Naranja oscuro (eyebrow hero, mayor contraste A11y) */

    /* ── ALIAS SEMÁNTICOS (del logo) — preferir estos en paneles nuevos ── */
    --ap-navy-deep:    #003366;      /* azul muy oscuro (titulares, hero) */
    --ap-navy:         #0a5574;      /* azul oscuro (trazo A del logo) */
    --ap-teal-deep:    #006989;      /* teal oscuro (gradientes) */
    --ap-teal:         #00A3C8;      /* cian (interior A del logo) */
    --ap-teal-bright:  #00C4CC;      /* cian vivo (focus, CTA secundario) */
    --ap-orange:       #E8603C;      /* naranja logo P */
    --ap-orange-hot:   #FF5733;      /* naranja fuerte (CTA primario) */

    /* ── Gradientes corporativos reutilizables ── */
    --ap-grad-hero:     linear-gradient(135deg, #003366 0%, #006989 50%, #00A3C8 100%);
    --ap-grad-cta:      linear-gradient(135deg, #00C4CC 0%, #006989 100%);
    --ap-grad-orange:   linear-gradient(135deg, #FF5733 0%, #E94E1B 100%);
    --ap-grad-subtle:   linear-gradient(135deg, #f4faff 0%, #e6f5f8 100%);

    /* ── Diagnóstico (hero slide 3) ── */
    --brand-navy:   #0a1f3d;         /* Azul marino del diagnóstico FUNDAE */
    --brand-amber:  #FFB547;         /* Ámbar del diagnóstico */

    /* ── Paneles (admin + área personal): fondos, bordes, textos ── */
    --ap-bg:         #f0f4f9;        /* fondo general de paneles */
    --ap-bg-soft:    #f8fafc;        /* fondo de headers de tabla, cards soft */
    --ap-card:       #ffffff;        /* fondo de card */
    --ap-border:     #e2e8f0;        /* borde estándar */
    --ap-border-soft:#eef2f8;        /* borde muy tenue */
    --ap-text:       #1f2937;        /* texto principal */
    --ap-text-soft:  #6b7280;        /* texto secundario */
    --ap-text-muted: #9ca3af;        /* texto terciario */
    --ap-shadow:     0 4px 24px rgba(0,51,102,.08);
    --ap-shadow-hover: 0 8px 30px rgba(0,51,102,.14);

    /* ── Estados (consistente en todas las UIs) ── */
    --ap-ok:      #10b981;
    --ap-warn:    #f59e0b;
    --ap-err:     #dc2626;
    --ap-info:    #0ea5e9;
    --ap-ok-bg:   #ecfdf5;
    --ap-warn-bg: #fffbeb;
    --ap-err-bg:  #fef2f2;
    --ap-info-bg: #f0f9ff;

    /* ── Colores neutros y fondos (legacy, mantener) ── */
    --text-color-dark: #333333;
    --text-color-muted: #666666;     /* Usado en párrafos secundarios */
    --text-color-light: #FFFFFF;
    --background-light: #FFFFFF;
    --section-bg-alt: #F8F8F8;       /* Fondo gris MUY claro para secciones alternas */
    --border-color-soft: #EDEDED;    /* Borde muy sutil */

    /* ── Feedback / estado (cookies banner, alerts) ── */
    --color-success: #76c720;        /* Verde aceptar cookies */
    --color-link:    #007bff;        /* Azul link banner cookies */
    --color-neutral: #a8a8a8;        /* Gris rechazar cookies */

    /* ── Espaciado y medidas ── */
    --header-height: 80px;
    --spacing-extreme: 180px;
    --spacing-large: 120px;
    --spacing-medium: 70px;
    --border-radius: 4px;
    --ap-radius:    12px;            /* radio estándar de cards en paneles */
    --ap-radius-lg: 16px;
    --ap-radius-sm: 8px;
}

/* RESET GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Tipografía y tamaño unificados con el resto del sitio. Las páginas
       .php no cargan styles.css y heredan el font-size del navegador
       (16px). Para que las HTML se vean idénticas, fijamos también 16px
       aquí. La fuente es la misma stack que en php/nav_helper.php. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background-color: var(--background-light);
    color: var(--text-color-dark);
    line-height: 1.55;
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* CONTENEDORES Y ESTRUCTURA */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* TÍTULOS DE SECCIÓN */
.section-title {
    font-size: 2.6em;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 70px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===================================================
CABECERA Y NAVEGACIÓN
=================================================== */
.main-header {
    background-color: var(--background-light);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}

.logo img {
    height: 55px;
}

/* Reglas legacy de .main-nav ul/a/active eliminadas — el nav unificado
   se estila en php/nav_helper.php para que sea idéntico en HTML y PHP. */

/* =============================================================
   ICONO DE USUARIO / ACCESO (consistente en TODAS las navbars)
   - En escritorio: círculo de 40px con SVG de persona
   - En móvil: vuelve a link normal con el texto "Acceder"/"Mi área"
   - Estado "logged": puntito verde arriba-derecha + fondo teal
   ============================================================= */
/* Reglas obsoletas del .nav-user eliminadas — el botón "Acceder/Mi área"
   ahora se estila en php/nav_helper.php (renderLayoutStyles), que se
   inyecta inline en cada página. Mantener una única fuente de verdad
   evita que las HTML estáticas y las PHP se vean distintas. */

/* OCULTAR EL BOTÓN HAMBURGUESA EN ESCRITORIO */
.menu-toggle {
    display: none;
}


/* BOTÓN CTA GLOBAL
   Nota: el hover usa filter:brightness() en lugar de cambiar background-color
   para que funcione universalmente con todos los `.cta-button`, incluidos los
   que llevan un `style="background:..."` inline (p.ej. en hero de index.html)
   o `bg-primary` de Tailwind (p.ej. 404.html). Así no rompemos su color base
   mientras siguen teniendo feedback visual de hover (lift + shadow + darken). */
.cta-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--text-color-light);
    text-decoration: none;
    padding: 15px 35px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: var(--border-radius);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.2s ease;
    border: none;
    text-transform: uppercase;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    filter: brightness(0.93);
}

/* ===================================================
ESTILOS DEL INDEX.HTML
=================================================== */

.hero-section {
    background-color: var(--background-light);
    color: var(--text-color-dark);
    padding: var(--spacing-extreme) 25px;
    text-align: center;
    border-bottom: 1px solid var(--border-color-soft);
}

.content-section {
    padding: var(--spacing-large) 0;
    text-align: center;
    border-top: 1px solid var(--border-color-soft);
}

.content-section.alt-bg {
    background-color: var(--section-bg-alt);
}

/* Estilos de Tarjetas (Benefit Grid) */
.benefit-grid {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    text-align: left;
}

.profile-card {
    flex: 1;
    background-color: var(--background-light);
    padding: 35px;
    border-radius: var(--border-radius);
    border-top: 5px solid var(--secondary-color);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

/* Estilos de Bloques de Contenido (Texto e Imagen) */
.content-block {
    display: flex;
    align-items: center;
    gap: 60px;
    text-align: left;
    margin: var(--spacing-medium) auto;
    max-width: 1000px;
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color-soft);
}

.content-block:last-child {
    border-bottom: none;
}

.content-block:nth-child(even) {
    flex-direction: row-reverse;
}

.block-text {
    flex: 1.2;
}

.block-media {
    flex: 0.8;
}

.block-media img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color-soft);
}

/* SECCIÓN DE LLAMADA A LA ACCIÓN FINAL */
.final-cta-banner {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: var(--spacing-large) 0;
    text-align: center;
}


/* FOOTER */
footer {
    text-align: center;
    padding: 30px 0;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    font-size: 0.9em;
}

footer a {
    color: var(--secondary-color);
    text-decoration: none;
    margin: 0 10px;
}

/* ===================================================
ESTILOS DEL CONTACTO.HTML
=================================================== */

.contact-page {
    padding-top: var(--header-height);
    background-color: var(--section-bg-alt);
    min-height: 80vh;
    padding-bottom: var(--spacing-large);
}

.contact-header {
    text-align: center;
    padding: 60px 0 40px;
}

/* GRID SEGURO DE CONTACTO */
.contact-grid {
    display: flex;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: stretch;
    padding: 0 25px;
}

.contact-info-panel {
    flex: 1;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.contact-form-container {
    flex: 1.5;
    background-color: var(--background-light);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color-dark);
    font-size: 0.95em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color-soft);
    border-radius: var(--border-radius);
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 196, 204, 0.15);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit-button {
    margin-top: 25px;
    width: 100%;
}

.form-submit-button .cta-button {
    width: 100%;
    padding: 14px;
    font-size: 1.05em;
}

/* MENSAJE DE ÉXITO */
.success-alert {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-color: var(--secondary-color);
    color: var(--text-color-dark);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
}

.success-alert.show {
    opacity: 1;
}


/* ===================================================
    MEDIA QUERIES (ADAPTACIÓN A MÓVILES)
=================================================== */

@media (max-width: 900px) {
    /* AJUSTES GENERALES */
    .hero-section {
        padding: var(--spacing-medium) 25px;
    }

    .section-title {
        font-size: 2em;
    }

    .section-subtitle {
        margin-bottom: 40px;
    }

    .content-section {
        padding: var(--spacing-medium) 0;
    }

    /* NAVEGACIÓN MÓVIL (MENÚ HAMBURGUESA) */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        position: relative;
        z-index: 1010;
        margin-left: auto;
    }

    .icon-bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--primary-color);
        margin: 5px 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Reglas legacy móviles de .main-nav eliminadas — el comportamiento
       responsive ya lo gestiona el nav_helper.php con su propio media
       query. Tener dos definiciones causaba que en mobile fueran
       distintas las páginas .html y las .php. */

    /* GRID Y BLOQUES */
    .benefit-grid {
        flex-direction: column;
        gap: 20px;
    }

    .content-block, .content-block:nth-child(even) {
        flex-direction: column;
        gap: 20px;
    }

    .block-text {
        order: 2;
    }

    .block-media {
        order: 1;
    }

    /* PÁGINA DE CONTACTO */
    .contact-grid {
        flex-direction: column;
        gap: 30px;
    }

    .contact-form-container {
        order: 1;
    }

    .contact-info-panel {
        order: 2;
        padding: 30px;
    }

    .success-alert {
        top: 10px;
        left: 10px;
        right: 10px;
        transform: none;
        width: auto;
        font-size: 0.9em;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .main-nav ul {
        gap: 15px;
    }
    .cta-button {
        padding: 10px 20px;
        font-size: 1em;
    }
    .section-title {
        font-size: 2em;
    }
}

/* ── Refinamientos móvil muy pequeño (≤480px) ──
   Botones a full width, tipografías más compactas y padding reducido para
   aprovechar cada pixel en pantallas estrechas (iPhone SE, Android básicos).
*/
@media (max-width: 480px) {
    body { font-size: 16px; }
    .container { padding: 0 16px; }
    .section-title { font-size: 1.65em; line-height: 1.2; }
    .section-subtitle { font-size: .98em; margin-bottom: 30px; }

    .cta-button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 13px 20px;
        font-size: .95em;
    }
    /* Logo en header un pelín más compacto */
    .logo img { height: 44px; }

    /* Content-blocks de index.html: menos padding y radios más chicos */
    .content-block { padding: 22px !important; margin-bottom: 22px !important; gap: 20px !important; }
    .content-block h2 { font-size: 1.45rem !important; }
    .content-block h3 { font-size: 1.05rem !important; }
    .content-block .block-media img { max-width: 100% !important; }

    /* Formulario de contacto: paneles más compactos */
    .contact-info-panel, .contact-form-container { padding: 24px !important; }
    .contact-header { padding: 40px 0 24px; }

    /* Footer en 2 líneas legibles */
    footer { font-size: .82em; padding: 22px 0; }
    footer a { margin: 0 6px; white-space: nowrap; }
}

/* ── Tap targets mínimos para accesibilidad táctil (WCAG 2.5.5) ── */
@media (hover: none) and (pointer: coarse) {
    .cta-button, .main-nav a, button, .hero-dot, .hero-arrow {
        min-height: 40px;
    }
    .hero-dot { width: 12px; height: 12px; }
    .hero-dot.active { width: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════
   BANNER DE COOKIES (LSSICE / RGPD)
   Movido aquí desde index.html para poder reutilizar el banner en
   cualquier página (no estaba duplicado pero sí era inline exclusivo
   de index.html, lo que impedía que otras páginas lo usaran).
   HTML markup + JS se mantienen tal cual en index.html y script.js.
   ═══════════════════════════════════════════════════════════════════ */
.cookie-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}
.cookie-modal {
    background: white;
    padding: 30px;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    font-family: sans-serif;
}
.cookie-header { display: flex; align-items: center; justify-content: flex-start; gap: 15px; margin-bottom: 20px; }
.cookie-buttons { display: flex; gap: 10px; justify-content: center; margin: 25px 0 15px 0; flex-wrap: wrap; }

.btn-accept { background: var(--color-success); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: bold; flex: 1; min-width: 120px; }
.btn-reject { background: var(--color-neutral); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: bold; flex: 1; min-width: 120px; }
.btn-manage, .btn-save { background: white; border: 1px solid #333; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 500; flex: 1; min-width: 120px; }

.cookie-option { border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.option-header { background: #fcfcfc; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 0.95rem; font-weight: 600; }
.option-desc { padding: 12px 15px; font-size: 0.85rem; color: #666; display: none; background: #fff; border-top: 1px solid #eee; line-height: 1.4; }
.status-always { color: var(--color-success); font-size: 0.85rem; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--color-link); }
input:checked + .slider:before { transform: translateX(18px); }

.cookie-links { margin-top: 15px; text-align: center; border-top: 1px solid #eee; padding-top: 15px; }
.cookie-links a { font-size: 0.8rem; margin: 0 8px; color: var(--color-link); text-decoration: none; }