/*
 * ui.css - sistema visual compartido (cursos de extensión)
 * Se carga DESPUÉS de Bootstrap. Evolución de la marca actual, no rediseño:
 * degradado azul de organización, azul #1a5276, acento amarillo para comprar/donar, crema #f5f1e8 en lección.
 */

:root {
    --brand: #1a5276;
    --brand-hover: #154360;
    --brand-active: #124057;
    --brand-2: #0e7490;
    --accent: var(--org-accent, #f59e0b);
    --surface: #f5f1e8;
    --success: #1e7e46;
    --danger: #b02a37;
    --radius: 12px;
    --tap: 44px;
    --focus-ring: rgba(26, 82, 118, 0.45);
    --font-sans: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif; /* reservada a los títulos de lección */
}

/* ---------- Botones: UNA acción primaria azul de marca ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-active);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 26, 82, 118;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.btn-link { --bs-btn-color: var(--brand); --bs-btn-hover-color: var(--brand-hover); }

/* Amarillo de marca: solo para dinero (Comprar / Donar) */
.btn-org-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #000;
}
.btn-org-accent:hover,
.btn-org-accent:focus-visible {
    background-color: color-mix(in srgb, var(--accent) 85%, black);
    border-color: color-mix(in srgb, var(--accent) 85%, black);
    color: #000;
}

/* ---------- Foco visible propio (en lugar del halo grueso de Bootstrap) ---------- */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn-check:focus + .btn,
.accordion-button:focus,
.navbar-toggler:focus {
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
}

/* Sobre fondos oscuros (cabecera, menú, pie) el anillo es claro */
header :focus-visible,
footer :focus-visible,
.offcanvas.text-bg-dark :focus-visible,
.navbar-dark :focus-visible {
    outline-color: rgba(255, 255, 255, 0.85);
}

/* ---------- Insignias: pequeñas, no pastillas gordas ---------- */
.badge {
    font-size: 0.75rem;
    padding: 0.35em 0.6em;
    font-weight: 600;
}

.btn .badge,
.accordion-button .badge {
    margin-left: auto;
}

/* ---------- Tipografía (páginas con layout principal: body.ui-app) ---------- */
body.ui-app {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
}

body.ui-app h1,
body.ui-app .h1-scale {
    font-size: clamp(1.625rem, 5.5vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body.ui-app h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

body.ui-app small,
body.ui-app .small {
    line-height: 1.45;
    letter-spacing: 0.01em;
}

body.ui-app .lesson-title { font-family: var(--font-serif); }

/* ---------- Movimiento: sin hover pegado en táctil, y respeto a reduced-motion ---------- */
@media (hover: none) {
    .card:hover { transform: none; }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .progress-bar,
    .chevron-icon,
    .chev,
    .collapsing,
    .modal.fade .modal-dialog,
    .offcanvas {
        transition: none !important;
    }

    .pending-badge,
    .stale-badge {
        animation: none !important;
    }
}

/* ---------- Páginas de error ---------- */
.error-page .btn { min-width: 12rem; }

/* ---------- Esqueleto de carga (sin saltos de diseño) ---------- */
.skeleton {
    background: linear-gradient(90deg, #e6e1d4 25%, #efebe0 37%, #e6e1d4 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ---------- Contraste en el pie (text-white-50 sobre #334155 ~4.0:1) ---------- */
footer .text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}