/* Portada: contador del inventario y tablero de gráficas.
   Todo es CSS puro por la CSP (sin estilos en línea, sin JavaScript):
   las barras horizontales son <progress> y las verticales usan clases de
   altura (altura-0 … altura-10, paso de 10%). */

/* ---- contador ------------------------------------------------------------- */
.contador {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 0 var(--ipro-aire-medio);
}
@media (min-width: 768px) { .contador { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.contador-tarjeta {
  display: grid; gap: .15rem;
  padding: .9rem 1rem;
  border-radius: var(--ipro-radio);
  background: var(--bs-tertiary-bg);
  box-shadow: 0 0 0 1px var(--bs-border-color), var(--ipro-sombra);
}
.contador-numero {
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--ipro-acento);
  font-variant-numeric: tabular-nums;
}
.contador-titulo { font-weight: 600; color: var(--bs-emphasis-color); }
.contador-pie { font-size: .8rem; color: var(--bs-secondary-color); }

/* ---- tablero -------------------------------------------------------------- */
.tablero { display: grid; gap: var(--ipro-aire-medio); grid-template-columns: 1fr; }
@media (min-width: 768px) { .tablero { grid-template-columns: 1fr 1fr; } }

.barras, .autores { list-style: none; padding: 0; margin: 0; display: grid; }
.barras { gap: .85rem; }
.barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .15rem .5rem; }
.barra-titulo { color: var(--bs-emphasis-color); text-transform: capitalize; }
.barra-num, .autor-num { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.barra-porciento { color: var(--bs-tertiary-color); }

.barras progress {
  grid-column: 1 / -1;
  appearance: none; -webkit-appearance: none;
  width: 100%; height: .85rem;
  border: 0; border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
  overflow: hidden;
}
.barras progress::-webkit-progress-bar { background-color: var(--bs-tertiary-bg); border-radius: 999px; }
.barras progress::-webkit-progress-value { background-color: var(--bs-primary); border-radius: 999px; }
.barras progress::-moz-progress-bar { background-color: var(--bs-primary); border-radius: 999px; }

/* ---- podio de personas ---------------------------------------------------- */
.autores { gap: .5rem; }
.autores li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.autores progress { grid-column: 3 / -1; height: .5rem; }
.autor-puesto {
  width: 1.1rem; text-align: right;
  font-size: .8rem; font-weight: 700;
  color: var(--bs-tertiary-color);
  font-variant-numeric: tabular-nums;
}
.autor-inicial {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
}
.autor-nombre { overflow-wrap: anywhere; }
/* Los tres primeros pesan más: el líder se ve de reojo. */
.autor-podio .autor-inicial { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
.autor-podio-2 .autor-inicial, .autor-podio-3 .autor-inicial { width: 1.85rem; height: 1.85rem; font-size: .9rem; }
.autor-podio-1 .autor-inicial { box-shadow: 0 0 0 2px var(--ipro-acento); color: var(--ipro-acento); }
.autor-podio .autor-nombre { font-weight: 600; }
.autor-podio-1 .autor-puesto { color: var(--bs-emphasis-color); }

/* ---- altas por mes (barras verticales) ------------------------------------ */
.alturas {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem;
}
.alturas li { display: grid; grid-template-rows: auto 6rem auto; justify-items: center; align-items: end; gap: .25rem; }
.alturas .altura-num { font-size: .8rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.alturas .altura-mes { font-size: .75rem; color: var(--bs-tertiary-color); text-transform: lowercase; }
.altura-barra {
  align-self: end;
  width: 60%; max-width: 1.6rem;
  border-radius: .3rem .3rem 0 0;
  background: var(--bs-primary);
}
.altura-0 { height: .2rem; background: var(--bs-tertiary-bg); }
.altura-1 { height: 10%; } .altura-2 { height: 20%; } .altura-3 { height: 30%; }
.altura-4 { height: 40%; } .altura-5 { height: 50%; } .altura-6 { height: 60%; }
.altura-7 { height: 70%; } .altura-8 { height: 80%; } .altura-9 { height: 90%; }
.altura-10 { height: 100%; }