/* Estética del portal (el índice y el login). Sobria a propósito: el marco compartido lo
 * pone /brand/v1/tokens.css; esto es solo el cuerpo del índice. Cada curso trae su propio
 * estilo.css que manda sobre su contenido (doctrina, estándar 2). */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--aca-fuente);
  color: #1a1f28;
  background: #f6f7f9;
  line-height: 1.5;
}

.indice {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--aca-esp-6) var(--aca-esp-4) 4rem;
}

.indice__titulo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--aca-esp-6) 0 var(--aca-esp-4);
}

.indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--aca-esp-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.indice__vacio { color: #5b6572; }

.curso__liga {
  display: block;
  height: 100%;
  padding: var(--aca-esp-4);
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.curso__liga:hover,
.curso__liga:focus-visible {
  border-color: var(--aca-acento);
  transform: translateY(-2px);
}

.curso__liga:focus-visible {
  outline: 2px solid var(--aca-acento);
  outline-offset: 2px;
}

.curso__nombre {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--aca-esp-2);
}

.curso__cohorte {
  margin: 0 0 var(--aca-esp-2);
  color: #5b6572;
  font-size: 0.9375rem;
}

.curso__edicion {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--aca-acento);
  font-weight: 600;
}

/* Liga "Entrar" en la barra del índice: navegación, no adorno. La estética con carácter del
 * portal llega en el paso de diseño final (consume el design system de Jorge). */
.aca-barra__entrar {
  flex: 0 0 auto;
  padding: var(--aca-esp-1) var(--aca-esp-4);
  border: 1px solid var(--aca-barra-borde);
  border-radius: var(--aca-radio);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Ficha pública del curso (ADR-0007). Estética sobria; el carácter llega en el paso de diseño
 * final (T16, consume el design system de Jorge). */
.ficha {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--aca-esp-6) var(--aca-esp-4) 4rem;
}

.ficha__encabezado { margin-bottom: var(--aca-esp-6); }

.ficha__nombre {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--aca-esp-2);
}

.ficha__cohorte { margin: 0 0 var(--aca-esp-2); color: #5b6572; }

.ficha__meta {
  display: flex;
  align-items: center;
  gap: var(--aca-esp-3);
  margin: 0;
}

.ficha__edicion { color: var(--aca-acento); font-weight: 600; font-size: 0.9375rem; }

.ficha__badge {
  padding: var(--aca-esp-1) var(--aca-esp-3);
  border-radius: var(--aca-radio);
  font-size: 0.75rem;
  font-weight: 600;
}

.ficha__badge--activo { background: #e4f4ea; color: #1d7a45; }
.ficha__badge--borrador { background: #f4efdc; color: #8a6d1b; }
.ficha__badge--archivado { background: #eceef1; color: #5b6572; }

.ficha__descripcion {
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 var(--aca-esp-6);
}

.ficha__cta {
  display: inline-block;
  padding: var(--aca-esp-3) var(--aca-esp-6);
  background: var(--aca-acento);
  color: #fff;
  border-radius: var(--aca-radio);
  text-decoration: none;
  font-weight: 600;
}

.ficha__acceso { margin-top: var(--aca-esp-6); color: #5b6572; font-size: 0.9375rem; }

.ficha__testimonios {
  margin-top: 3rem;
  display: grid;
  gap: var(--aca-esp-4);
}

.ficha__testimonio {
  margin: 0;
  padding: var(--aca-esp-4);
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
}

.ficha__testimonio blockquote { margin: 0 0 var(--aca-esp-2); font-style: italic; }
.ficha__testimonio figcaption { color: #5b6572; font-size: 0.875rem; }

/* Login */
.login {
  max-width: 24rem;
  margin: 4rem auto;
  padding: 0 var(--aca-esp-4);
}

.login__caja {
  background: #fff;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  padding: var(--aca-esp-6);
}

.login__titulo { margin: 0 0 var(--aca-esp-2); font-size: 1.25rem; }
.login__ayuda { margin: 0 0 var(--aca-esp-4); color: #5b6572; font-size: 0.9375rem; }

.login__campo {
  display: block;
  width: 100%;
  padding: var(--aca-esp-3);
  margin-bottom: var(--aca-esp-3);
  border: 1px solid #cbd2db;
  border-radius: var(--aca-radio);
  font-size: 1rem;
  font-family: inherit;
}

.login__boton {
  width: 100%;
  padding: var(--aca-esp-3);
  border: 0;
  border-radius: var(--aca-radio);
  background: var(--aca-acento);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.login__boton:disabled { opacity: 0.55; cursor: not-allowed; }
.login__aviso { margin-top: var(--aca-esp-4); font-size: 0.875rem; color: #5b6572; }