/* ==========================================================================
   ETE for Proficiency Tests — Shared Styles
   --------------------------------------------------------------------------
   Estilos complementarios a Tailwind CSS (CDN) usados en la landing page
   y en las apps de cursos. Cumplen pautas WCAG 2.1 AA (foco visible,
   skip-link, contraste) y detalles de micro-interacción del tema UTN.
   ========================================================================== */

:root {
  --utn-blue: #003366;
  --utn-gold: #d4af37;
  --utn-light: #f0f4f8;
  --utn-accent: #0056b3;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Skip-link (WCAG 2.1 / Técnica G1): visible solo al recibir foco.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--utn-blue);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: left 0.15s ease-in-out;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid var(--utn-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Foco visible para teclado (WCAG 2.1.1, 2.4.7). Mejora el foco por defecto
   del navegador y garantiza contraste >= 3:1 sobre ambos fondos.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--utn-accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* --------------------------------------------------------------------------
   Fondo decorativo del hero (radiales sutiles en colores institucionales).
   -------------------------------------------------------------------------- */
.hero-pattern {
  background-image:
    radial-gradient(circle at 20% 30%, #d4af37 0, transparent 30%),
    radial-gradient(circle at 80% 70%, #0056b3 0, transparent 35%);
}

/* --------------------------------------------------------------------------
   Elementos deshabilitados / "Próximamente": se ven atenuados y con cursor
   "no permitido". El clic y el teclado se interceptan vía JS, que además
   muestra un toast de aviso. (No se usa pointer-events: none para que el
   clic llegue al manejador y el usuario reciba el toast.)
   -------------------------------------------------------------------------- */
[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Tarjetas características: elevación sutil y hover accesible.
   -------------------------------------------------------------------------- */
.feature-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 51, 102, 0.18);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Scrollbar sutil y consistente para el sidebar de semanas (quiz).
   -------------------------------------------------------------------------- */
.week-list-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--utn-blue) transparent;
}

.week-list-scroll::-webkit-scrollbar {
  width: 6px;
}

.week-list-scroll::-webkit-scrollbar-thumb {
  background-color: var(--utn-blue);
  border-radius: 9999px;
}

.week-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}