/* ================================================================
   Academia Plugin — Design System v2.2.0
   Variables y utilidades compartidas por todos los módulos públicos
   (frontend, auth, perfil, certificados, gamificación).
   Este archivo se carga como dependencia de los demás; no requiere
   configuración, solo define tokens reutilizables.
================================================================ */

:root{
    /* Colores base (se pueden sobreescribir por academia via --ac-h/--ac-a) */
    --ac-h: #1a2744;         /* color principal / header */
    --ac-a: #22c55e;         /* color de acento */
    --ac-h-rgb: 26,39,68;
    --ac-a-rgb: 34,197,94;

    --ac-ink: #0f172a;
    --ac-ink-soft: #374151;
    --ac-muted: #6b7280;
    --ac-muted-2: #9ca3af;
    --ac-border: #e5e7eb;
    --ac-border-soft: #f1f5f9;
    --ac-surface: #ffffff;
    --ac-bg: #f8fafc;

    --ac-danger: #ef4444;
    --ac-danger-bg: #fef2f2;
    --ac-danger-border: #fecaca;
    --ac-warn: #f59e0b;
    --ac-warn-bg: #fefce8;
    --ac-warn-border: #fde68a;
    --ac-info: #3b82f6;
    --ac-info-bg: #eff6ff;

    --ac-r-sm: 6px;
    --ac-r: 10px;
    --ac-r-lg: 16px;
    --ac-r-xl: 22px;

    --ac-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
    --ac-shadow: 0 4px 14px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
    --ac-shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
    --ac-shadow-focus: 0 0 0 3px rgba(var(--ac-a-rgb),.28);

    --ac-ease: cubic-bezier(.4,0,.2,1);
    --ac-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Contenedores del plugin heredan la tipografía y el box-sizing */
.academia-wrap, .ac-auth-wrap, .ac-perfil-wrap, .ac-cert-card, .ac-cert-verify-result{
    font-family: var(--ac-font);
}
.academia-wrap *, .academia-wrap *::before, .academia-wrap *::after,
.ac-auth-wrap *, .ac-auth-wrap *::before, .ac-auth-wrap *::after,
.ac-perfil-wrap *, .ac-perfil-wrap *::before, .ac-perfil-wrap *::after{
    box-sizing: border-box;
}

/* Scrollbars sutiles dentro del plugin (no invasivo, degrada bien) */
.academia-wrap ::-webkit-scrollbar{ width:8px; height:8px; }
.academia-wrap ::-webkit-scrollbar-track{ background:transparent; }
.academia-wrap ::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:8px; }
.academia-wrap ::-webkit-scrollbar-thumb:hover{ background:#9ca3af; }

/* Foco visible accesible en todos los elementos interactivos del plugin */
.academia-wrap a:focus-visible,
.academia-wrap button:focus-visible,
.academia-wrap input:focus-visible,
.ac-auth-wrap a:focus-visible,
.ac-auth-wrap button:focus-visible,
.ac-auth-wrap input:focus-visible,
.ac-perfil-wrap a:focus-visible,
.ac-perfil-wrap button:focus-visible{
    outline: 2px solid var(--ac-a);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Utilidad: texto truncado a 1/2 líneas, útil en cards responsive */
.ac-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ac-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Respeta la preferencia del usuario por menos movimiento */
@media (prefers-reduced-motion: reduce){
    .academia-wrap *, .ac-auth-wrap *, .ac-perfil-wrap *{
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Tap targets cómodos en touch (mínimo 40px recomendado) */
@media (hover: none) and (pointer: coarse){
    .academia-wrap button, .academia-wrap a.ac-btn-sm, .academia-wrap a.ac-nav-btn,
    .academia-wrap .ac-sec-item, .academia-wrap .ac-lec-item{
        min-height: 40px;
    }
}