/* ============================================
   LEGAL PAGES — Shared Styles
   Test Celador SACYL
   ============================================ */

/* ---- Variables (scoped, no conflict with app) ---- */
:root {
    --l-primary: #0077B6;
    --l-primary-light: #00B4D8;
    --l-accent: #c0392b;
    --l-bg: #f0f4f8;
    --l-surface: #ffffff;
    --l-text: #1a2533;
    --l-muted: #64748b;
    --l-border: #e2e8f0;
    --l-radius: 12px;
}

/* ============================================
   LEGAL PAGE LAYOUT (only inside legal/*.html)
   ============================================ */
.legal-page-body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--l-bg);
    color: var(--l-text);
    line-height: 1.7;
    min-height: 100vh;
}

.legal-wrapper {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* Back button */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--l-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2rem;
    transition: opacity 0.2s;
}
.back-btn:hover { opacity: 0.75; }
.back-btn svg { width: 18px; height: 18px; }

/* Article */
.legal-content h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 800;
    color: var(--l-primary);
    margin-bottom: 0.4rem;
}

.update-date {
    font-size: 0.85rem;
    color: var(--l-muted);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--l-border);
}

.legal-content h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--l-text);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--l-primary);
}

.legal-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--l-text);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.legal-content p {
    color: #374151;
    margin-bottom: 0.9rem;
}

.legal-content ul {
    margin: 0.5rem 0 1rem 1.5rem;
    color: #374151;
}
.legal-content ul li { margin-bottom: 0.4rem; }

.legal-content a {
    color: var(--l-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--l-primary-light); }

/* Tables */
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.88rem;
    background: var(--l-surface);
    border-radius: var(--l-radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.legal-content th {
    background: var(--l-primary);
    color: #fff;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
}
.legal-content td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--l-border);
    color: #374151;
    vertical-align: top;
}
.legal-content tr:last-child td { border-bottom: none; }
.legal-content tr:nth-child(even) td { background: #f8fafc; }

code {
    background: #e2e8f0;
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'Courier New', monospace;
    color: var(--l-accent);
}

/* ============================================
   COOKIE BANNER — inyectado en index.html
   ============================================ */
#cookieBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a2533;
    color: #e2e8f0;
    /* padding-bottom extra para no tapar la barra inferior de navegación */
    padding: 1rem 1.25rem 1rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#cookieBanner.visible { transform: translateY(0); }

#cookieBanner p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
#cookieBanner a { color: #7dd3fc; text-decoration: underline; }

.cookie-actions {
    display: flex;
    gap: 0.75rem;
}

#btnAcceptCookies {
    flex: 1;
    background: #0077B6;
    color: #fff;
    border: none;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
#btnAcceptCookies:hover { background: #005f8e; }

#btnRejectCookies {
    flex: 1;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}
#btnRejectCookies:hover { border-color: #94a3b8; color: #cbd5e1; }

/* ============================================
   LOGIN LEGAL FOOTER (dentro del login screen)
   ============================================ */
.login-legal-footer {
    text-align: center;
    padding: 1.25rem 0 2rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}
.login-legal-footer a {
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    margin: 0 0.3rem;
    transition: color 0.2s;
}
.login-legal-footer a:hover {
    color: var(--blue, #0077B6);
    text-decoration: underline;
}
.login-legal-footer span { opacity: 0.4; margin: 0 0.05rem; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 600px) {
    #cookieBanner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #cookieBanner p { flex: 1; margin-right: 1rem; }
    .cookie-actions { flex-shrink: 0; }
    #btnAcceptCookies, #btnRejectCookies { flex: unset; }
}