/* ============================================================
   INTERSECCIÓN — Tokens de diseño institucionales
   Verde y blanco del Instituto Técnico Superior de Pereira.
   Flat Design + Bento Grid. Ajustar SOLO estas variables si la
   institución entrega el tono exacto de su manual de identidad.
   ============================================================ */

:root {
  --color-primario:        #1B7A43; /* verde institucional */
  --color-primario-oscuro: #14532D; /* hover / activo */
  --color-primario-suave:  #E8F5EE; /* fondos de tarjetas y badges */

  /* Neutros (modo claro) */
  --color-texto-secundario: #5C6660;
  --color-borde:            #DDE3DF;

  /* Mapeo al sistema de Bootstrap */
  --bs-primary: var(--color-primario);
  --bs-primary-rgb: 27, 122, 67;
  --bs-link-color: var(--color-primario);
  --bs-link-color-rgb: 27, 122, 67;
  --bs-link-hover-color: var(--color-primario-oscuro);
  --bs-link-hover-color-rgb: 20, 83, 45;
  --bs-border-color: var(--color-borde);
}

/* Modo oscuro: fondos neutros, verde más luminoso como acento
   para mantener contraste AA sobre superficies oscuras. */
[data-bs-theme="dark"] {
  --color-primario:        #4CAF7D;
  --color-primario-oscuro: #3D9A6B;
  --color-primario-suave:  #1D2721;

  --color-texto-secundario: #A8B3AC;
  --color-borde:            #3A403C;

  --bs-primary: var(--color-primario);
  --bs-primary-rgb: 76, 175, 125;
  --bs-link-color: var(--color-primario);
  --bs-link-color-rgb: 76, 175, 125;
  --bs-link-hover-color: #6BC495;
  --bs-link-hover-color-rgb: 107, 196, 149;
  --bs-border-color: var(--color-borde);
}

/* --- Componentes de marca (planos: sin degradados ni sombras pesadas) --- */

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

/* En modo oscuro el verde claro pide texto oscuro para cumplir AA. */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #0B1A12;
  --bs-btn-hover-color: #0B1A12;
  --bs-btn-active-color: #0B1A12;
  --bs-btn-disabled-color: #0B1A12;
}

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

/* Navbar: verde institucional en claro; en oscuro pasa a fondo
   neutro y el verde queda solo como acento. */
.navbar-marca {
  background-color: var(--color-primario);
}
/* Wordmark de la navbar: letras blancas en ambos temas (el SVG inline
   toma --bs-body-color); la cruz de colores conserva sus tonos propios. */
.navbar-marca .logo-marca {
  --bs-body-color: #FFFFFF;
}
.navbar-marca .logo-marca svg {
  display: block;
  height: 28px;
  width: auto;
}
[data-bs-theme="dark"] .navbar-marca {
  background-color: #1C1F1D;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Controles de formulario: foco y estados activos en verde. */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input:checked {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}
.form-check-input:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Foco visible accesible en ambos modos (navegación por teclado). */
:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}
.navbar-marca :focus-visible {
  outline-color: #FFFFFF;
}

/* --- Bento Grid --- */

.bento-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Grilla de grupos conformados: tope de 3 columnas (2 en tablet, 1 en móvil)
   para que las tarjetas sean anchas y el detalle por estudiante no se apriete.
   No usa el auto-fit de .bento-grid a propósito: aquí queremos un máximo fijo. */
.grid-conformados {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-conformados { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .grid-conformados { grid-template-columns: repeat(3, 1fr); }
}

/* Grilla de Gestión del panel admin: tope de 4 columnas (3 / 2 / 1 en anchos
   menores). Con el auto-fit de .bento-grid, a ≥1400px salían 5 columnas y la
   última tarjeta quedaba huérfana en su propia fila. */
.grid-gestion {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-gestion { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .grid-gestion { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .grid-gestion { grid-template-columns: repeat(4, 1fr); }
}

.bento-card {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1.5rem;
}

.bento-card--suave {
  background-color: var(--color-primario-suave);
  border-color: transparent;
}

/* En oscuro el fondo suave queda cerca del fondo de la página:
   un borde sutil separa la tarjeta y mantiene la jerarquía visual. */
[data-bs-theme="dark"] .bento-card--suave {
  border-color: var(--color-borde);
}

/* --- Tarjetas de panel (opt-in; no afectan a .bento-card) --- */

/* Cuadro redondeado del icono: relleno suave + borde (en oscuro el suave es casi
   neutro, por eso la separación la da el borde) y el icono en el verde primario. */
.icono-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primario);
  background-color: var(--color-primario-suave);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
}
.icono-tile--sm {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  border-radius: .6rem;
}

/* Tarjeta de contador: icono + número grande + etiqueta.
   Superficie neutra (tertiary-bg) para que se distinga del fondo de la página. */
.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--bs-tertiary-bg);
}
.stat-card--inicio {
  align-items: flex-start;
}
.stat-card__numero {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primario);
}
.stat-card__etiqueta {
  margin: 0;
  font-size: .875rem;
  color: var(--bs-secondary-color);
}

/* Tarjeta de acceso (enlace con stretched-link): icono, título, descripción y flecha. */
.nav-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--bs-tertiary-bg);
}
.nav-card__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
}
/* Variante apilada: cabecera (icono + título + flecha) y la descripción debajo a
   todo el ancho, sin el hueco bajo el icono ni el texto sangrado a la derecha.
   .nav-card__cuerpo pasa a display: contents (es un div sin semántica) para que
   el título y la descripción sean celdas directas de la grilla. */
.nav-card--apilada {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  row-gap: .75rem;
}
.nav-card--apilada .nav-card__cuerpo {
  display: contents;
}
.nav-card--apilada h3 {
  margin: 0;
  min-width: 0;
}
.nav-card--apilada p {
  grid-column: 1 / -1;
  grid-row: 2;
}
.nav-card--apilada .nav-card__flecha {
  grid-column: 3;
  grid-row: 1;
}
.nav-card__flecha {
  flex: 0 0 auto;
  align-self: center;
  color: var(--bs-secondary-color);
}
.nav-card:hover,
.nav-card:focus-within {
  border-color: var(--color-primario);
}
.nav-card:hover .nav-card__flecha,
.nav-card:focus-within .nav-card__flecha {
  color: var(--color-primario);
}
/* El enlace cubre toda la tarjeta: el anillo de foco se dibuja en la tarjeta. */
.nav-card a:focus-visible {
  outline: none;
}
.nav-card:focus-within {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-card {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .nav-card:hover,
  .nav-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
  }
  .nav-card__flecha {
    transition: transform .15s ease, color .15s ease;
  }
  .nav-card:hover .nav-card__flecha,
  .nav-card:focus-within .nav-card__flecha {
    transform: translateX(3px);
  }
}

/* Tarjeta de periodo (docente): misma superficie neutra que las demás; el estado
   se señala SIN depender del fondo: con grupo = borde sólido verde; sin grupo =
   borde punteado (el texto también lo dice). */
.periodo-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bs-tertiary-bg);
}
/* min-width: 0 deja que el título haga wrap en vez de empujar el badge fuera. */
.periodo-card__titulo {
  min-width: 0;
}
/* Bootstrap compila el color de la barra como #0d6efd fijo (no lee --bs-primary):
   se remapea al token para que todas las barras (docente, estadísticas) sean verdes. */
.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--color-primario);
}
.periodo-card__barra {
  height: .5rem;
}
/* Acciones al pie: margin-top auto las empuja abajo, así quedan alineadas
   entre tarjetas de la misma fila aunque el contenido varíe. */
.periodo-card__acciones {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--bs-border-color);
}
/* Contorno por estado: con grupo = borde sólido verde suave (pleno al pasar el
   mouse); sin grupo = borde punteado más marcado, para que se lea como "vacío" a
   propósito. Antes la marca era una franja inset de 4px, que se deformaba al
   seguir la curva de las esquinas redondeadas. */
.periodo-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.periodo-card--activo {
  border-color: rgba(var(--bs-primary-rgb), .4);
}
.periodo-card--activo:hover {
  border-color: var(--color-primario);
}
.periodo-card--vacio {
  border-style: dashed;
  border-color: var(--bs-secondary-color);
}

/* Misma elevación al pasar el mouse que .nav-card, pero sin cambiar el borde
   (no son enlaces). El movimiento depende del estado: solo se mueve lo que
   tiene algo que mostrar o hacer. Periodo sin grupo (--vacio), contadores y
   "Mi asignación" aún sin publicar se quedan quietos; --vivo la marca el PHP
   cuando el resultado ya está publicado.
   Solo si el usuario no pidió reducir el movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .stat-card--vivo,
  .periodo-card--activo {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .stat-card--vivo:hover,
  .periodo-card--activo:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
  }
}

/* Dato destacado en forma de píldora (p. ej. la especialidad del docente bajo el
   saludo): superficie neutra + borde verde suave, mismo lenguaje que las tarjetas. */
.dato-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  font-size: .875rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid rgba(var(--bs-primary-rgb), .4);
  border-radius: 50rem;
}

/* Contenedor angosto centrado (login, mensajes, formularios cortos). */
.contenedor-estrecho {
  max-width: 440px;
  margin-inline: auto;
}

/* Wordmark del login (SVG inline: hereda var(--bs-body-color) del tema). */
.logo-bienvenida svg {
  display: block;
  width: min(100%, 280px);
  height: auto;
}

/* Skip link accesible (visible solo al recibir foco). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primario);
  color: #FFFFFF;
  padding: .5rem 1rem;
  border-radius: 0 0 .5rem 0;
  z-index: 1080;
}
.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}