/* ===== 45digital — Design.md aplicado a DownloadVID =====
   Tokens y tipografía copiados 1:1 de _proj_web/45digital-mockup.html
   (fuente de verdad citada en Design.md §2.1/§2.2/§3) para que esta
   herramienta interna comparta la misma identidad que nuevo.45digital.mx.
   No se reconstruyen componentes editoriales (Tianguis, INE, etc.) —
   solo el lenguaje visual: color, tipografía, esquinas rectas, modo oscuro. */

:root {
    --primary: #1E3FA8;
    --primary-dark: #15287A;
    --primary-light: #2563EB;
    --primary-deep: #0A1F6B;
    --accent: #DC2626;
    --accent-dark: #991B1B;
    --yellow: #FACC15;
    --yellow-dark: #EAB308;
    --success: #15803D;
    --success-light: #22C55E;
    --paper: #FAF7F2;
    --paper-dark: #F0EBE3;
    --ink: #1A1A1A;
    --ink-soft: #404040;
    --ink-muted: #737373;
    --line: #D4D4D4;
    --line-soft: #E5E5E5;
    --card: #ffffff;
    --hover: #F5F5F5;
    --green-wa: #25D366;

    /* Radio único: 45digital usa esquinas rectas como firma de marca
       (Design.md §4/§12.1) -- 2px es "recto" a nivel visual, evita bordes
       agresivos en inputs mientras mantiene la identidad tabloide. */
    --radius: 2px;

    /* Alias hacia los nombres usados en el rebrand rápido anterior de este
       proyecto (login.ejs/index.ejs/usuarios.ejs) -- así las ~20 referencias
       existentes a var(--brand-primary) quedan respaldadas por los tokens
       reales de Design.md sin tener que tocar cada una. */
    --brand-primary: var(--primary);
    --brand-primary-dark: var(--primary-dark);
    --brand-red: var(--accent);
    --brand-gray-light: var(--paper-dark);
}

[data-theme="dark"] {
    --paper: #171717;
    --paper-dark: #262626;
    --ink: #FAFAFA;
    --ink-soft: #D4D4D4;
    --ink-muted: #A3A3A3;
    --line: #404040;
    --line-soft: #262626;
    --card: #1F1F1F;
    --hover: #262626;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--paper);
    color: var(--ink);
}

/* Oswald condensada mayúsculas = titulares/etiquetas (Design.md §3) */
h1, h2, h3, h4, h5.card-title,
.btn,
.brand-tagline-label {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

h5.card-title {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Roboto Slab = bajadas/subtítulos editoriales (Design.md §3) */
.brand-tagline {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    font-style: italic;
    color: var(--ink-muted);
}

/* ===== Superficie ===== */
.card {
    background: var(--card);
    border-color: var(--line);
    border-radius: var(--radius);
}

.result-box {
    background-color: var(--paper-dark) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}

/* Esquinas rectas en toda la UI de producto (Design.md §4, §12.1) --
   las superficies "humanas" (login) se suavizan aparte, ver login.ejs */
.btn, .form-control, .form-select, .input-group-text, .alert,
.card, .status-indicator, .processing-status {
    border-radius: var(--radius) !important;
}

/* ===== Jerarquía de botones (Design.md §6) =====
   azul = navegación/acción recurrente · rojo = urgente/conversión ·
   amarillo = resalte sin ser la acción principal · verde = solo confianza */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.btn-success {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
}

.btn-outline-danger {
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline-danger:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(30, 63, 168, 0.25);
}

/* Franja tricolor -- misma firma de marca que el masthead del portal
   (Design.md §7.1 .tricolor) */
.brand-tricolor {
    height: 5px;
    background: linear-gradient(90deg,
        var(--accent) 0%, var(--accent) 33.33%,
        var(--primary) 33.33%, var(--primary) 66.66%,
        var(--yellow) 66.66%, var(--yellow) 100%);
}

/* Badge "Redes" usa el amarillo de resalte (no es la acción principal,
   solo distingue el propósito del video) -- Design.md §2.1 rol 3 */
.badge-purpose-redes {
    background-color: var(--yellow) !important;
    color: var(--primary-deep) !important;
}
.badge-purpose-produccion {
    background-color: var(--paper-dark) !important;
    color: var(--ink-soft) !important;
}

/* ===== Toggle de tema (el portal ya lo implementa, Design.md §9) ===== */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.theme-toggle:hover {
    background: var(--hover);
}