/* ============================================================
   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);
}
[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));
}

.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);
}

/* Contenedor angosto centrado (login, mensajes, formularios cortos). */
.contenedor-estrecho {
  max-width: 440px;
  margin-inline: 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;
}