/*
 * Portal publico de consulta de procesos.
 *
 * Aqui solo esta lo que Bootstrap no trae hecho: la barra de etapas.
 *
 * La version anterior traia 1.782 lineas, y no porque el diseno fuera
 * complicado: reimplementaba a mano la rejilla, las tarjetas, los botones,
 * los campos, las insignias y las tablas que el sitio ya carga de Bootstrap,
 * mas todo el panel de administracion que ya no vive en esta pagina. Al pasar
 * la plantilla a `pages/index.html` y a clases de Bootstrap, lo que quedo sin
 * equivalente fue esto.
 *
 * Los colores salen de las variables de `main.css`, no de una paleta propia.
 * Una paleta paralela es como la pagina acaba teniendo dos azules distintos.
 */

/* ------------------------------------------------------------------ *
 * Barra de etapas
 *
 * Bootstrap tiene `.progress`, que es una barra continua: sirve para un
 * porcentaje, no para seis pasos con nombre donde importa cual es el actual
 * y cuales quedaron atras.
 *
 * Es una lista con `role="list"` y no una `<ol>` porque el estado de cada
 * paso lo lleva `aria-current`, y el numero que se ve es decorativo: quien
 * usa lector de pantalla oye el nombre de la etapa, que es lo que significa
 * algo.
 * ------------------------------------------------------------------ */

.cp-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--bs-border-color);
}

.cp-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 8rem;
  min-width: 0;
  color: var(--bs-secondary-color);
}

.cp-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--bs-border-color);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.cp-label {
  font-size: 0.8125rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Etapas ya superadas. */
.cp-step.done {
  color: var(--bs-success);
}

.cp-step.done .cp-dot {
  border-color: var(--bs-success);
  background-color: var(--bs-success);
  color: #fff;
}

/*
 * La etapa actual.
 *
 * Lleva negrita ademas del color: el verde de «hecha» y el azul de «actual»
 * se distinguen mal con una deficiencia de vision del color, y entonces el
 * unico dato de la pantalla --por donde va mi caso-- seria el que no se ve.
 * El `aria-current="step"` de la plantilla dice lo mismo a quien no la mira.
 */
.cp-step.current {
  color: var(--accent-color);
  font-weight: 600;
}

.cp-step.current .cp-dot {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  /*
   * En modo oscuro el acento se aclara y un blanco fijo no se leeria sobre
   * el. El texto sale de la misma variable que el de los botones para que los
   * dos cambien a la vez y no haya que acordarse de este.
   */
  color: var(--boton-primario-texto);
}

/* En pantalla estrecha los seis pasos en fila no caben: van en columna. */
@media (max-width: 575.98px) {
  .cp-stepper {
    flex-direction: column;
    gap: 0.5rem;
  }

  .cp-step {
    flex: 0 0 auto;
  }
}