/* ---------------------------------------------------------------------------
 * Pantallas de mantenedor, importador y tableros.
 *
 * Todo lo que hay aquí se apoya en las variables de application.css; ningún
 * color nuevo. Se carga después de las tres hojas base porque
 * NavigationHelper#shell_stylesheets ordena primero application, layout y grids
 * y el resto alfabéticamente.
 * --------------------------------------------------------------------------- */

/* Recorrido del importador: cuatro pasos, el actual marcado. --------------- */

.pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: 0 0 var(--esp-5);
  padding: 0;
  counter-reset: paso;
}

.pasos__paso {
  counter-increment: paso;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
  background: var(--hn-superficie);
  color: var(--texto-tenue);
  font-size: var(--hn-texto-grilla);
}

.pasos__paso::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--hn-fondo);
  color: var(--texto-suave);
  font-weight: 700;
  font-size: var(--hn-texto-xs);
}

.pasos__paso--actual {
  border-color: var(--hn-marino);
  color: var(--hn-texto);
  font-weight: 600;
}

.pasos__paso--actual::before {
  background: var(--hn-marino);
  color: var(--hn-blanco);
}

/* Cifra grande de una tarjeta de resumen. -------------------------------- */

.cifra {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Revisión de errores del importador: tabla con celdas editables. --------- */

.revision__motivo {
  min-width: 18rem;
  color: var(--hn-peligro);
  font-size: var(--hn-texto-grilla);
}

.revision .tabla-datos input[type="text"],
.revision .tabla-datos select {
  min-width: 8rem;
  padding: 4px 6px;
  font-size: var(--hn-texto-grilla);
}

/* Tableros: rejilla de tarjetas con gráfico. ------------------------------ */

.tablero {
  display: grid;
  gap: var(--esp-4);
}

.tablero__rejilla {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.tablero__tarjeta {
  background: var(--hn-superficie);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
  padding: var(--esp-4);
  min-width: 0;
}

.tablero__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--hn-texto-base);
  font-weight: 700;
}

/* Barras horizontales: una fila por categoría, con la barra proporcional. La
   barra se dibuja con un degradado sobre la propia celda, así no hace falta
   ninguna librería de gráficos ni un canvas que el lector de pantalla no lee. */

.barras {
  display: grid;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras__fila {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr auto;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--hn-texto-grilla);
}

.barras__etiqueta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-suave);
}

.barras__pista {
  height: 0.9rem;
  border-radius: var(--hn-radio);
  background: var(--hn-fondo);
  overflow: hidden;
}

.barras__barra {
  display: block;
  height: 100%;
  border-radius: var(--hn-radio);
  background: var(--hn-marino);
}

.barras__fila--alerta .barras__barra { background: var(--hn-peligro); }
.barras__fila--aviso .barras__barra { background: var(--hn-alerta); }
.barras__fila--ok .barras__barra { background: var(--hn-exito); }

.barras__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}