/* ==========================================================================
   Cadencia — Hoja de estilos principal
   Proyecto: Diplomado en Desarrollo Web · Módulo 5
   Dirección visual: editorial técnico (tinta, papel cálido y lima eléctrica)

   Índice
   01. Tokens de diseño (variables)
   02. Puente con Bootstrap
   03. Base y tipografía
   04. Navegación
   05. Portada
   06. Tarjetas y composición bento
   07. Métricas e indicadores
   08. Tablero Kanban
   09. Sprints y gráficas
   10. Equipo y avatares
   11. Formularios y acceso
   12. Pie de página
   13. Utilidades
   14. Adaptaciones responsivas
   15. Accesibilidad y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   01. Tokens de diseño
   Todo el color, el ritmo y la tipografía del sitio nacen aquí.
   ========================================================================== */
:root {
  /* Color: tinta */
  --tinta-900: #101319;
  --tinta-800: #181d26;
  --tinta-700: #232a36;
  --tinta-600: #3b4453;
  --tinta-400: #6d7789;
  --tinta-300: #9aa3b2;

  /* Color: papel */
  --papel:     #f4f2ed;
  --papel-alt: #fbfaf7;
  --papel-linea: #e2ded4;

  /* Color: acentos */
  --lima:      #c8f24f;
  --lima-osc:  #a8d327;
  --coral:     #ff5a3c;
  --azul:      #3355ff;
  --ambar:     #f2b134;
  --verde:     #2fa36b;

  /* Escala tipográfica fluida */
  --texto-xs:    0.75rem;
  --texto-sm:    0.875rem;
  --texto-base:  1rem;
  --texto-lg:    clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --texto-xl:    clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --texto-2xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.35rem);
  --texto-3xl:   clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
  --texto-portada: clamp(2.6rem, 1.5rem + 5vw, 5.4rem);

  /* Ritmo vertical */
  --espacio-seccion: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --espacio-bloque:  clamp(1.5rem, 1.2rem + 1vw, 2.5rem);

  /* Formas */
  --radio-sm:  0.5rem;
  --radio-md:  0.875rem;
  --radio-lg:  1.375rem;
  --radio-xl:  2rem;

  /* Profundidad */
  --sombra-baja:  0 1px 2px rgba(16, 19, 25, 0.06),
                  0 2px 8px rgba(16, 19, 25, 0.04);
  --sombra-media: 0 2px 4px rgba(16, 19, 25, 0.06),
                  0 12px 28px rgba(16, 19, 25, 0.09);
  --sombra-alta:  0 4px 10px rgba(16, 19, 25, 0.08),
                  0 28px 60px rgba(16, 19, 25, 0.16);

  /* Movimiento */
  --vel-rapida: 140ms;
  --vel-normal: 260ms;
  --curva:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   02. Puente con Bootstrap
   Se reescriben las variables del framework para que sus componentes
   (botones, tarjetas, formularios, badges) adopten la identidad de Cadencia
   sin tener que pelear con !important en cada regla.
   ========================================================================== */
:root {
  --bs-body-bg: var(--papel);
  --bs-body-color: var(--tinta-700);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: var(--texto-base);
  --bs-body-line-height: 1.65;

  --bs-primary: var(--azul);
  --bs-primary-rgb: 51, 85, 255;
  --bs-secondary-rgb: 61, 68, 83;
  --bs-success: var(--verde);
  --bs-warning: var(--ambar);
  --bs-danger: var(--coral);

  --bs-border-color: var(--papel-linea);
  --bs-border-radius: var(--radio-md);
  --bs-border-radius-sm: var(--radio-sm);
  --bs-border-radius-lg: var(--radio-lg);
  --bs-link-color: var(--azul);
  --bs-link-hover-color: #1f3ce0;
  --bs-emphasis-color: var(--tinta-900);
}

/* Botón principal: relleno de tinta, no el azul plano del framework. */
.btn-tinta {
  --bs-btn-color: var(--papel-alt);
  --bs-btn-bg: var(--tinta-900);
  --bs-btn-border-color: var(--tinta-900);
  --bs-btn-hover-color: var(--lima);
  --bs-btn-hover-bg: var(--tinta-800);
  --bs-btn-hover-border-color: var(--tinta-800);
  --bs-btn-active-bg: var(--tinta-700);
  --bs-btn-active-border-color: var(--tinta-700);
  --bs-btn-focus-shadow-rgb: 200, 242, 79;
}

/* Botón de acento: se reserva para la acción más importante de cada vista. */
.btn-lima {
  --bs-btn-color: var(--tinta-900);
  --bs-btn-bg: var(--lima);
  --bs-btn-border-color: var(--lima);
  --bs-btn-hover-color: var(--tinta-900);
  --bs-btn-hover-bg: var(--lima-osc);
  --bs-btn-hover-border-color: var(--lima-osc);
  --bs-btn-active-bg: var(--lima-osc);
  --bs-btn-focus-shadow-rgb: 168, 211, 39;
}

/* Botón de contorno sobre fondo claro. */
.btn-contorno {
  --bs-btn-color: var(--tinta-900);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--tinta-900);
  --bs-btn-hover-color: var(--papel-alt);
  --bs-btn-hover-bg: var(--tinta-900);
  --bs-btn-hover-border-color: var(--tinta-900);
  --bs-btn-focus-shadow-rgb: 16, 19, 25;
}

.btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 999px;
  letter-spacing: -0.01em;
  transition: transform var(--vel-rapida) var(--curva),
              background-color var(--vel-rapida) ease,
              color var(--vel-rapida) ease;
}

.btn:active {
  transform: translateY(1px);
}

/* Tarjetas del framework alineadas al lenguaje visual del proyecto. */
.card {
  --bs-card-bg: var(--papel-alt);
  --bs-card-border-color: var(--papel-linea);
  --bs-card-border-radius: var(--radio-lg);
  --bs-card-inner-border-radius: var(--radio-md);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
}

/* Etiquetas y barras de progreso. */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.4em;
  --bs-badge-border-radius: 999px;
  letter-spacing: 0.01em;
}

.progress {
  --bs-progress-bg: rgba(16, 19, 25, 0.08);
  --bs-progress-height: 0.5rem;
  --bs-progress-border-radius: 999px;
  --bs-progress-bar-bg: var(--tinta-900);
}

/* ==========================================================================
   03. Base y tipografía
   ========================================================================== */
body {
  font-family: var(--bs-body-font-family);
  background-color: var(--papel);
  color: var(--tinta-700);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .titular {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  color: var(--tinta-900);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-xl); }

.antetitulo {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-400);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.antetitulo::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--lima-osc);
  border-radius: 2px;
}

.entrada {
  font-size: var(--texto-lg);
  color: var(--tinta-600);
  max-width: 58ch;
}

.seccion {
  padding-block: var(--espacio-seccion);
}

.seccion--tinta {
  background: var(--tinta-900);
  color: var(--tinta-300);
}

.seccion--tinta h2,
.seccion--tinta h3,
.seccion--tinta .titular {
  color: var(--papel-alt);
}

.seccion--tinta .entrada {
  color: var(--tinta-300);
}

.seccion--tinta .antetitulo {
  color: var(--lima);
}

/* Encabezado que abre cada vista interna del sistema. */
.encabezado-vista {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) 1.5rem;
  border-bottom: 1px solid var(--papel-linea);
  background: linear-gradient(180deg, var(--papel-alt), var(--papel));
}

.titulo-vista {
  font-size: var(--texto-3xl);
  margin-bottom: 0.75rem;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--tinta-300);
  --bs-breadcrumb-item-active-color: var(--tinta-400);
  --bs-breadcrumb-font-size: var(--texto-sm);
  --bs-breadcrumb-margin-bottom: 1.1rem;
}

.breadcrumb a { color: var(--tinta-400); text-decoration: none; }
.breadcrumb a:hover { color: var(--tinta-900); }

/* Texto con marcador de resaltado: sostiene la jerarquía en los titulares. */
.resaltado {
  background-image: linear-gradient(transparent 62%, var(--lima) 62%);
  padding-inline: 0.08em;
}

/* ==========================================================================
   04. Navegación
   ========================================================================== */
.barra-nav {
  background: rgba(244, 242, 237, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--papel-linea);
}

.marca {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.04em;
  color: var(--tinta-900);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.marca:hover { color: var(--tinta-900); }

/* Variante de la marca para fondos oscuros (pie de página y panel de acceso). */
.marca--claro,
.marca--claro:hover { color: var(--papel-alt); }

.marca--claro .marca__glifo {
  background: var(--papel-alt);
  color: var(--tinta-900);
}

.marca__glifo {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--tinta-900);
  border-radius: 0.65rem;
  color: var(--lima);
  flex: 0 0 auto;
}

.barra-nav .nav-link {
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--tinta-600);
  padding-inline: 0.9rem;
  position: relative;
}

.barra-nav .nav-link:hover,
.barra-nav .nav-link:focus-visible {
  color: var(--tinta-900);
}

/* Subrayado animado que marca la sección activa. */
.barra-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--lima-osc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--vel-normal) var(--curva);
}

.barra-nav .nav-link:hover::after,
.barra-nav .nav-link.active::after {
  transform: scaleX(1);
}

.barra-nav .nav-link.active {
  color: var(--tinta-900);
  font-weight: 600;
}

.navbar-toggler {
  border: 1px solid var(--papel-linea);
  border-radius: 0.6rem;
  padding: 0.4rem 0.6rem;
}

.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(200, 242, 79, 0.5); }

/* ==========================================================================
   05. Portada
   ========================================================================== */
.portada {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--espacio-seccion);
  overflow: hidden;
}

/* Trama de puntos que da textura al fondo sin cargar una imagen. */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center,
                    rgba(16, 19, 25, 0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}

.portada > .container { position: relative; z-index: 1; }

.portada__titulo {
  font-size: var(--texto-portada);
  letter-spacing: -0.045em;
  margin-bottom: 1.25rem;
}

.portada__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-top: 2.25rem;
  margin-top: 2.25rem;
  border-top: 1px solid var(--papel-linea);
}

/* Maqueta de tablero que acompaña al titular: da profundidad por capas. */
.maqueta {
  position: relative;
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-alta);
  padding: 1.25rem;
}

.maqueta__barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--papel-linea);
}

.maqueta__punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--papel-linea);
}

.maqueta__columna {
  background: rgba(16, 19, 25, 0.035);
  border-radius: var(--radio-md);
  padding: 0.7rem;
  min-height: 100%;
}

.maqueta__ficha {
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-sm);
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--sombra-baja);
  font-size: var(--texto-xs);
  font-weight: 500;
  color: var(--tinta-600);
}

.maqueta__ficha:last-child { margin-bottom: 0; }

.maqueta__ficha--activa {
  border-color: var(--tinta-900);
  box-shadow: var(--sombra-media);
  transform: rotate(-1.4deg);
}

/* Insignia flotante que rompe la retícula de la maqueta. */
.maqueta__sello {
  position: absolute;
  right: -0.75rem;
  bottom: -1.1rem;
  background: var(--lima);
  color: var(--tinta-900);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: var(--texto-sm);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  box-shadow: var(--sombra-media);
}

/* ==========================================================================
   06. Tarjetas y composición bento
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.bento__celda {
  grid-column: span 6;
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-lg);
  padding: 1.75rem;
  transition: transform var(--vel-normal) var(--curva),
              box-shadow var(--vel-normal) var(--curva),
              border-color var(--vel-normal) ease;
}

.bento__celda:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: var(--tinta-300);
}

.bento__celda--ancha { grid-column: span 6; }
.bento__celda--tinta {
  background: var(--tinta-900);
  border-color: var(--tinta-700);
  color: var(--tinta-300);
}

.bento__celda--tinta h3 { color: var(--papel-alt); }
.bento__celda--lima {
  background: var(--lima);
  border-color: var(--lima-osc);
  color: var(--tinta-900);
}

.bento__celda--lima h3,
.bento__celda--lima p { color: var(--tinta-900); }

.icono-caja {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--radio-md);
  display: grid;
  place-items: center;
  background: rgba(51, 85, 255, 0.1);
  color: var(--azul);
  margin-bottom: 1.1rem;
}

.icono-caja--lima { background: rgba(168, 211, 39, 0.22); color: #5f7a0d; }
.icono-caja--coral { background: rgba(255, 90, 60, 0.13); color: var(--coral); }
.icono-caja--verde { background: rgba(47, 163, 107, 0.13); color: var(--verde); }
.icono-caja--claro { background: rgba(251, 250, 247, 0.12); color: var(--lima); }

/* Tarjeta de proyecto reutilizada en los listados. */
.tarjeta-proyecto {
  height: 100%;
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-lg);
  background: var(--papel-alt);
  transition: transform var(--vel-normal) var(--curva),
              box-shadow var(--vel-normal) var(--curva);
}

.tarjeta-proyecto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
}

.tarjeta-proyecto__cinta {
  height: 4px;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  background: var(--tinta-900);
}

.tarjeta-proyecto__cinta--riesgo { background: var(--coral); }
.tarjeta-proyecto__cinta--curso  { background: var(--azul); }
.tarjeta-proyecto__cinta--listo  { background: var(--verde); }

/* ==========================================================================
   07. Métricas e indicadores
   ========================================================================== */
.metrica__valor {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--texto-2xl);
  font-weight: 700;
  color: var(--tinta-900);
  letter-spacing: -0.04em;
  line-height: 1;
}

.seccion--tinta .metrica__valor { color: var(--lima); }

.metrica__etiqueta {
  font-size: var(--texto-sm);
  color: var(--tinta-400);
  margin-top: 0.4rem;
}

/* Anillo de progreso dibujado con un degradado cónico. */
.anillo {
  --progreso: 0;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--lima) calc(var(--progreso) * 1%),
                             rgba(16, 19, 25, 0.09) 0);
  margin-inline: auto;
}

.anillo__centro {
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 50%;
  background: var(--papel-alt);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--papel-linea);
}

.anillo__numero {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--tinta-900);
  line-height: 1;
}

.anillo__texto {
  font-size: var(--texto-xs);
  color: var(--tinta-400);
}

/* Etiquetas de estado con color semántico, no decorativo. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--texto-xs);
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.estado::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.estado--curso  { background: rgba(51, 85, 255, 0.1);  color: var(--azul); }
.estado--riesgo { background: rgba(255, 90, 60, 0.12); color: #c33a20; }
.estado--listo  { background: rgba(47, 163, 107, 0.12); color: #1e7a4d; }
.estado--espera { background: rgba(242, 177, 52, 0.16); color: #96690b; }

/* ==========================================================================
   08. Tablero Kanban
   ========================================================================== */
.tablero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16.5rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.columna {
  background: rgba(16, 19, 25, 0.04);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-lg);
  padding: 0.9rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 24rem;
}

.columna__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--papel-linea);
}

.columna__titulo {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--tinta-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.columna__marca {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
}

.columna--pendiente .columna__marca { background: var(--tinta-400); }
.columna--curso    .columna__marca { background: var(--azul); }
.columna--revision .columna__marca { background: var(--ambar); }
.columna--hecho    .columna__marca { background: var(--verde); }

.columna__cuenta {
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--tinta-400);
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

/* Aviso de límite de trabajo en curso, propio de Kanban. */
.columna__limite {
  font-size: var(--texto-xs);
  color: var(--coral);
  font-weight: 600;
  margin-top: 0.65rem;
}

.ficha {
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-left: 3px solid var(--tinta-300);
  border-radius: var(--radio-md);
  padding: 0.9rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--sombra-baja);
  cursor: grab;
  transition: transform var(--vel-rapida) var(--curva),
              box-shadow var(--vel-rapida) var(--curva);
}

.ficha:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

.ficha:active { cursor: grabbing; }

.ficha--alta  { border-left-color: var(--coral); }
.ficha--media { border-left-color: var(--ambar); }
.ficha--baja  { border-left-color: var(--verde); }

.ficha__titulo {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--tinta-900);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.ficha__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: var(--texto-xs);
  color: var(--tinta-400);
}

.ficha__puntos {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--tinta-700);
  background: rgba(16, 19, 25, 0.06);
  border-radius: 0.4rem;
  padding: 0.05rem 0.45rem;
}

/* Barra de herramientas del tablero. */
.herramientas {
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--sombra-baja);
}

/* ==========================================================================
   09. Sprints y gráficas
   ========================================================================== */
.panel-sprint {
  background: var(--tinta-900);
  color: var(--tinta-300);
  border-radius: var(--radio-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  position: relative;
  overflow: hidden;
}

.panel-sprint::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 242, 79, 0.18), transparent 68%);
  pointer-events: none;
}

.panel-sprint h2,
.panel-sprint h3 { color: var(--papel-alt); }

/* Gráfica de trabajo pendiente dibujada en SVG dentro del sistema visual. */
.grafica {
  width: 100%;
  height: auto;
  display: block;
}

.grafica__reja  { stroke: var(--papel-linea); stroke-width: 1; }
.grafica__ideal { stroke: var(--tinta-300); stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.grafica__real  { stroke: var(--azul); stroke-width: 3; fill: none; stroke-linecap: round; }
.grafica__area  { fill: rgba(51, 85, 255, 0.08); }
.grafica__punto { fill: var(--papel-alt); stroke: var(--azul); stroke-width: 2.5; }
.grafica__eje   { fill: var(--tinta-400); font-size: 11px; font-family: "Inter", sans-serif; }

/* Línea de tiempo de los eventos de Scrum. */
.cronologia {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.cronologia::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--papel-linea);
}

.cronologia__paso {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 1.75rem;
}

.cronologia__paso:last-child { padding-bottom: 0; }

.cronologia__paso::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.3rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--papel-alt);
  border: 3px solid var(--tinta-900);
}

.cronologia__paso--hecho::before { background: var(--lima); border-color: var(--lima-osc); }

/* ==========================================================================
   10. Equipo y avatares
   ========================================================================== */
.avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--papel-alt);
  background: var(--tinta-700);
  border: 2px solid var(--papel-alt);
  flex: 0 0 auto;
}

.avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.35rem; }
.avatar--azul  { background: var(--azul); }
.avatar--coral { background: var(--coral); }
.avatar--verde { background: var(--verde); }
.avatar--ambar { background: #b8820f; }
.avatar--lima  { background: var(--lima-osc); color: var(--tinta-900); }

/* Grupo de avatares encimados. */
.avatar-grupo { display: flex; }
.avatar-grupo .avatar:not(:first-child) { margin-left: -0.6rem; }

.tarjeta-persona {
  background: var(--papel-alt);
  border: 1px solid var(--papel-linea);
  border-radius: var(--radio-lg);
  padding: 1.75rem 1.5rem;
  height: 100%;
  text-align: center;
  transition: transform var(--vel-normal) var(--curva),
              box-shadow var(--vel-normal) var(--curva);
}

.tarjeta-persona:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
}

.tarjeta-persona__rol {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-400);
}

/* ==========================================================================
   11. Formularios y acceso
   ========================================================================== */
.form-control,
.form-select {
  --bs-border-radius: var(--radio-md);
  background-color: var(--papel-alt);
  border-color: var(--papel-linea);
  padding: 0.7rem 0.95rem;
  color: var(--tinta-800);
  transition: border-color var(--vel-rapida) ease,
              box-shadow var(--vel-rapida) ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tinta-900);
  box-shadow: 0 0 0 3px rgba(200, 242, 79, 0.45);
  background-color: var(--papel-alt);
}

.form-label {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--tinta-800);
  margin-bottom: 0.4rem;
}

.form-text { font-size: var(--texto-xs); color: var(--tinta-400); }

.acceso {
  min-height: calc(100vh - 4.5rem);
  display: grid;
  grid-template-columns: 1fr;
}

.acceso__panel {
  background: var(--tinta-900);
  color: var(--tinta-300);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.acceso__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center,
                    rgba(251, 250, 247, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.acceso__panel > * { position: relative; z-index: 1; }

.acceso__formulario {
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.acceso__caja { width: 100%; max-width: 26rem; }

/* Pestañas del framework con el acento de la marca. */
.nav-pills {
  --bs-nav-pills-border-radius: 999px;
  --bs-nav-pills-link-active-bg: var(--tinta-900);
  --bs-nav-pills-link-active-color: var(--papel-alt);
}

.nav-pills .nav-link {
  color: var(--tinta-600);
  font-size: var(--texto-sm);
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1px solid transparent;
}

.nav-pills .nav-link:hover:not(.active) {
  background: rgba(16, 19, 25, 0.05);
  color: var(--tinta-900);
}

/* Acordeón con la tipografía y los radios del proyecto. */
.accordion {
  --bs-accordion-bg: var(--papel-alt);
  --bs-accordion-border-color: var(--papel-linea);
  --bs-accordion-border-radius: var(--radio-lg);
  --bs-accordion-active-bg: rgba(200, 242, 79, 0.2);
  --bs-accordion-active-color: var(--tinta-900);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(200, 242, 79, 0.45);
}

.accordion-button {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  color: var(--tinta-900);
}

/* Tablas de datos. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tinta-700);
  --bs-table-border-color: var(--papel-linea);
  --bs-table-hover-bg: rgba(16, 19, 25, 0.03);
  vertical-align: middle;
}

.table > thead th {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-400);
  border-bottom-width: 1px;
  white-space: nowrap;
}

/* Ventanas modales y panel lateral. */
.modal-content,
.offcanvas {
  background: var(--papel-alt);
  border-color: var(--papel-linea);
  border-radius: var(--radio-lg);
}

.offcanvas { border-radius: 0; }

/* ==========================================================================
   12. Pie de página
   ========================================================================== */
.pie {
  background: var(--tinta-900);
  color: var(--tinta-400);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
}

.pie a {
  color: var(--tinta-300);
  text-decoration: none;
  transition: color var(--vel-rapida) ease;
}

.pie a:hover { color: var(--lima); }

.pie__titulo {
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-alt);
  margin-bottom: 1rem;
}

.pie__linea {
  border-top: 1px solid var(--tinta-700);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: var(--texto-sm);
}

/* ==========================================================================
   13. Utilidades
   ========================================================================== */
.texto-suave  { color: var(--tinta-400); }
.texto-tinta  { color: var(--tinta-900); }
.fondo-papel  { background: var(--papel-alt); }
.borde-suave  { border: 1px solid var(--papel-linea); }
.mono {
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.separador-punteado {
  border: 0;
  border-top: 1px dashed var(--papel-linea);
  opacity: 1;
}

/* Enlace de salto para navegación por teclado. */
.salto-contenido {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1080;
  background: var(--tinta-900);
  color: var(--lima);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radio-md) 0;
}

.salto-contenido:focus {
  left: 0;
  color: var(--lima);
}

/* ==========================================================================
   14. Adaptaciones responsivas
   Se sigue el enfoque «primero móvil»: las reglas de arriba describen la
   pantalla chica y estas consultas van ampliando la composición.
   ========================================================================== */

/* Tabletas verticales en adelante (≥ 576 px) */
@media (min-width: 576px) {
  .bento__celda { grid-column: span 3; }
  .bento__celda--ancha { grid-column: span 6; }
}

/* Tabletas horizontales en adelante (≥ 768 px) */
@media (min-width: 768px) {
  .bento { gap: 1.25rem; }
  .bento__celda { grid-column: span 2; }
  .bento__celda--ancha { grid-column: span 4; }
  .acceso { grid-template-columns: 1fr 1fr; }
  .anillo { width: 9.5rem; height: 9.5rem; }
  .anillo__centro { width: 7.4rem; height: 7.4rem; }
}

/* Computadoras portátiles y de escritorio (≥ 992 px) */
@media (min-width: 992px) {
  .portada__titulo { max-width: 13ch; }
  .maqueta { padding: 1.75rem; }
  .tablero {
    grid-auto-flow: unset;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }
  .acceso { grid-template-columns: 0.9fr 1.1fr; }
}

/* Pantallas grandes (≥ 1400 px) */
@media (min-width: 1400px) {
  .container { max-width: 1240px; }
}

/* En pantallas chicas el tablero se recorre de lado; se avisa al usuario. */
@media (max-width: 991.98px) {
  .aviso-desliza { display: flex; }
}

.aviso-desliza {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--texto-xs);
  color: var(--tinta-400);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   15. Accesibilidad y movimiento reducido
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--lima-osc);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bento__celda:hover,
  .tarjeta-proyecto:hover,
  .tarjeta-persona:hover,
  .ficha:hover { transform: none; }
}

/* Estilos de impresión: útiles para entregar la evidencia del proyecto. */
@media print {
  .barra-nav,
  .pie,
  .btn { display: none !important; }

  body { background: #fff; }
  .seccion { padding-block: 1rem; }
}