/* =====================================================================
   Aula Virtual Desafío — capa de identidad sobre EduDash
   Todos los colores salen de las variables EduDash (DESIGN.md §2).
   No hardcodear hex en el markup. Naranja (--warning-600 / --accent)
   SOLO para progreso y logro (CV, badges). Nunca para navegación/CTAs.
   ===================================================================== */

:root {
    /* Acento de energía — alias explícito de DESIGN.md */
    --accent: var(--warning-600);
    --accent-soft: rgba(255, 122, 44, 0.10);
}

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Botones (DESIGN.md §5) — utilidades en lugar de estilos inline */
.btn-desafio-primary {
    background: var(--primary-500);
    color: #fff;
    border-radius: var(--rounded-8);
    border: 0;
}
.btn-desafio-primary:hover,
.btn-desafio-primary:focus {
    background: var(--primary-600);
    color: #fff;
}

.btn-desafio-secondary {
    background: var(--color-surface, #EEF2F6);
    color: var(--neutral-900, #111827);
    border: 1px solid var(--neutral-200, #EBECEF);
    border-radius: var(--rounded-8);
}

/* Uso restringido: sólo logro / progreso */
.btn-desafio-accent {
    background: var(--accent);
    color: #fff;
    border-radius: var(--rounded-8);
    border: 0;
}
.btn-desafio-accent:hover,
.btn-desafio-accent:focus {
    filter: brightness(0.96);
    color: #fff;
}

.text-desafio-accent { color: var(--accent) !important; }

/* Fondo teal muy sutil para secciones destacadas (DESIGN.md §7) */
.bg-desafio-soft {
    background: linear-gradient(180deg, var(--primary-50), #ffffff);
}

/* Tarjeta estándar del portal (DESIGN.md §4) */
.desafio-card {
    background: var(--color-bg-alt, #fff);
    border-radius: var(--rounded-16);
    box-shadow: var(--shadow-1, 0 4px 30px 0 rgba(52, 77, 75, 0.05));
}

/* Icono en círculo teal suave para cards de resumen (DESIGN.md §5) */
.desafio-icon-circle {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 1.5rem;
}