/*
 * theme.css - Tokens de color WCAG 2.2 AAA + modo oscuro
 * Compartido por index.html, admin/index.html, aviso-legal.html,
 * politica-privacidad.html y politica-cookies.html.
 */

/* ============ Paleta clara (AAA sobre blanco) ============ */
:root {
    color-scheme: light;

    /* Marca */
    --primary:        #02636B;  /* 7.06:1 sobre blanco — AAA */
    --primary-dark:   #014F56;  /* 9.6:1  sobre blanco — AAA */
    --primary-light:  #E6F4F5;
    --primary-glow:   rgba(3, 105, 114, 0.22);

    /* Superficies */
    --bg:             #F8FAFB;
    --card-bg:        #FFFFFF;
    --surface-2:      #F3F4F6;

    /* Texto */
    --text:           #111827;
    --text-mid:       #374151;
    --text-muted:     #4B5260;  /* 7.14:1 sobre blanco — AAA */

    /* Bordes */
    --border:         #E5E7EB;
    --border-hover:   #9CA3AF;
    --border-strong:  #6B7280;  /* 4.83:1 — 1.4.11 AA para componentes */

    /* Semánticos */
    --red:            #B91C1C;  /* 7.0:1 — AAA */
    --green:          #047857;  /* 5.3:1 — AA texto grande / UI */
    --yellow:         #B45309;  /* 4.65:1 — AA */

    --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:      0 12px 32px rgba(0,0,0,0.10);

    --radius:         14px;
    --radius-sm:      8px;
}

/* ============ Paleta oscura (AAA sobre #0F172A) ============ */
[data-theme="dark"] {
    color-scheme: dark;

    --primary:        #5EF4E2;  /* 10.1:1 sobre --bg oscuro — AAA */
    --primary-dark:   #2DD4BF;  /* 8.3:1 — AAA */
    --primary-light:  #134E4A;
    --primary-glow:   rgba(94, 234, 212, 0.28);

    --bg:             #0F172A;
    --card-bg:        #1E293B;
    --surface-2:      #273449;

    --text:           #F1F5F9;  /* 15.8:1 — AAA */
    --text-mid:       #CBD5E1;  /* 10.4:1 — AAA */
    --text-muted:     #f3f8ff;  /* 5.9:1 — AA (metadatos) */

    --border:         #334155;
    --border-hover:   #475569;
    --border-strong:  #64748B;

    --red:            #F87171;
    --green:          #34D399;
    --yellow:         #FBBF24;

    --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:      0 12px 32px rgba(0,0,0,0.55);
}

/* ============ Foco accesible (2.4.7 + 2.4.13 AAA) ============ */
*:focus { outline: none; }
*:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============ Skip-link (2.4.1 AAA Bypass blocks) ============ */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    z-index: 10000;
    transform: translateY(-200%);
    transition: transform 0.18s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: 2px;
}
[data-theme="dark"] .skip-link { color: #0F172A; }

/* ============ Utilidad screen-reader-only ============ */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============ Transiciones respetando reduced-motion ============ */
body {
    transition: background-color 0.25s ease, color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ Overrides de modo oscuro para index.html ============ */
[data-theme="dark"] body {
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 20% 80%, rgba(94,234,212,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(94,234,212,0.04) 0%, transparent 50%) !important;
}
[data-theme="dark"] .navbar {
    background: var(--card-bg);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .pol_oscuro {
    color: #fafafa !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] #matrix-container {
    background: var(--card-bg);
    border-color: var(--border);
}
[data-theme="dark"] .fmt-badge {
    background: var(--primary-light);
    color: #bbfbf1;
    border-color: var(--primary-dark);
}
[data-theme="dark"] .drop-zone {
    background: var(--surface-2);
    border-color: var(--border-hover);
}
[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.dragover {
    background: var(--primary-light);
    border-color: var(--primary);
}
[data-theme="dark"] .results-area {
    background: var(--surface-2);
    border-color: var(--border);
}
[data-theme="dark"] .result-item {
    background: var(--card-bg);
    border-color: var(--border);
}
[data-theme="dark"] .result-item code {
    background: var(--surface-2);
    color: var(--primary);
}
[data-theme="dark"] .sigs-table th {
    background: var(--surface-2);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .sigs-table td {
    border-bottom-color: var(--border);
}
[data-theme="dark"] #originalDocSection {
    background: var(--surface-2);
    border-color: var(--border-hover);
}
[data-theme="dark"] .verdict-modal,
[data-theme="dark"] .attachments-modal,
[data-theme="dark"] .certdet-modal {
    background: var(--card-bg);
    color: var(--text);
}
[data-theme="dark"] .verdict-analysis,
[data-theme="dark"] .verdict-recs {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-mid);
}
[data-theme="dark"] .verdict-sig.ok       { background: #064E3B; }
[data-theme="dark"] .verdict-sig.warning  { background: #78350F; }
[data-theme="dark"] .verdict-sig.error    { background: #7F1D1D; }
[data-theme="dark"] .verdict-sig.info     { background: var(--primary-light); }
[data-theme="dark"] .attachment-item {
    background: #2E1065;
    border-color: #4C1D95;
}
[data-theme="dark"] .certdet-signer.ok      { background: #064E3B; border-color: #065F46; }
[data-theme="dark"] .certdet-signer.warning { background: #78350F; border-color: #92400E; }
[data-theme="dark"] .certdet-signer.error   { background: #7F1D1D; border-color: #991B1B; }
[data-theme="dark"] .certdet-tag           { background: #1E3A8A; color: #BFDBFE; }
[data-theme="dark"] .certdet-tag.green     { background: #065F46; color: #A7F3D0; }
[data-theme="dark"] .certdet-tag.red       { background: #7F1D1D; color: #FECACA; }
[data-theme="dark"] .certdet-tag.yellow    { background: #78350F; color: #FDE68A; }
[data-theme="dark"] .certdet-tag.purple    { background: #4C1D95; color: #DDD6FE; }
[data-theme="dark"] .sig-ts-badge {
    background: #064E3B;
    color: #A7F3D0;
    border-color: #065F46;
}

/* ============ Overrides de modo oscuro para admin ============ */
[data-theme="dark"] .tabs,
[data-theme="dark"] .login-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .config-item,
[data-theme="dark"] .filters,
[data-theme="dark"] table,
[data-theme="dark"] .page-btn {
    background: var(--card-bg);
    color: var(--text);
}
[data-theme="dark"] thead th {
    background: var(--surface-2);
    color: var(--text-mid);
    border-bottom-color: var(--border);
}
[data-theme="dark"] tbody td { border-bottom-color: var(--border); color: var(--text); }
[data-theme="dark"] tbody tr:hover { background: var(--surface-2); }
[data-theme="dark"] .btn-secondary { background: var(--surface-2); color: var(--text-mid); }
[data-theme="dark"] .btn-secondary:hover { background: var(--border); }
[data-theme="dark"] .btn-logout { background: #7F1D1D; color: #FECACA; }
[data-theme="dark"] .btn-logout:hover { background: #991B1B; }
[data-theme="dark"] .badge-ok       { background: #065F46; color: #A7F3D0; }
[data-theme="dark"] .badge-error    { background: #7F1D1D; color: #FECACA; }
[data-theme="dark"] .badge-active   { background: #1E3A8A; color: #BFDBFE; }
[data-theme="dark"] .badge-inactive { background: var(--surface-2); color: var(--text-muted); }
[data-theme="dark"] .toggle-slider { background: var(--border-hover); }
[data-theme="dark"] .tab-btn { color: var(--text-muted); }

/* ============ Overrides de modo oscuro para páginas de políticas ============ */
[data-theme="dark"] .container {
    background: var(--card-bg);
    box-shadow: 0 0 40px rgba(0,0,0,0.35);
}
[data-theme="dark"] .info-block { background: var(--surface-2); }
[data-theme="dark"] .highlight {
    background: var(--primary-light);
    border-left-color: var(--primary);
}
[data-theme="dark"] .highlight-warn {
    background: #78350F;
    border-left-color: var(--yellow);
}

/* ── Footer moderno 4 columnas ──────────────────────────────────── */
.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 640px) {
    .footer-columns { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .footer-columns { grid-template-columns: repeat(4, 1fr); }
}

.footer-col-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1rem;
    color: #fff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .875rem;
}

.footer-col ul.contact-list { gap: .75rem; }

.footer-col a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: color .2s;
}

.footer-col a:hover,
.footer-col a:focus-visible { color: #fff; }

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    color: rgba(255,255,255,.78);
}

.footer-contact-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: .125rem;
    color: #77beb8;
}

.footer-logo {
    height: 80px;
    width: auto;
    filter: brightness(0) invert(1);
    display: block;
    margin-bottom: 1rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
}

.footer-bottom-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
    color: rgba(255,255,255,.82);
}

@media (min-width: 768px) {
    .footer-bottom-inner { flex-direction: row; }
}

/* Badges W3C */
.a11y-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.a11y-badges a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    transition: background .2s, border-color .2s, transform .15s;
    min-height: 44px;
    min-width: 44px;
}

.a11y-badges a:hover,
.a11y-badges a:focus-visible {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.35);
    transform: translateY(-1px);
}

.a11y-badges img {
    height: 36px;
    width: auto;
    display: block;
}