/* Guía, taller libre y progreso. */

/* Guía */
.guia {
  display: grid;
  gap: var(--espacio-5);
}
.guia__cabecera {
  display: grid;
  gap: var(--espacio-3);
  justify-items: start;
  padding: var(--espacio-6);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background:
    radial-gradient(ellipse 50% 120% at 100% 0%, rgb(var(--brillo-rgb) / 0.12), transparent 70%),
    radial-gradient(ellipse 50% 120% at 0% 100%, rgba(255, 126, 182, 0.08), transparent 70%),
    var(--superficie);
}
.guia__lema {
  font-size: var(--t-3);
  line-height: 1.5;
}
.guia__seccion {
  display: grid;
  gap: var(--espacio-4);
  padding: var(--espacio-6);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.guia__titulo {
  font-size: var(--t-5);
}
.guia-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espacio-3);
  padding: 0;
  list-style: none;
}
.guia-pasos__paso {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding: var(--espacio-4);
  border-radius: var(--radio);
  background: var(--tinta-profunda);
}
.guia-pasos__paso h3 {
  font-size: var(--t-4);
}
.guia-pasos__numero {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radio-pildora);
  background: var(--luz);
  color: var(--texto-sobre-luz);
  font-weight: 800;
}
.guia-estados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espacio-3);
  padding: 0;
  list-style: none;
}
.guia-estado {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--espacio-3);
  align-items: center;
}
.guia-estado .estado-chip {
  margin-bottom: var(--espacio-1);
}
.guia-estado__edificio {
  width: 44px;
  height: 76px;
}
.guia-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espacio-3);
  padding: 0;
  list-style: none;
}
.guia-tipo {
  display: grid;
  gap: var(--espacio-2);
  align-content: start;
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  background: var(--tinta-profunda);
}
.guia-tipo h3 {
  font-size: var(--t-4);
}
.guia-tipo__icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radio);
  background: var(--luz-suave);
  color: var(--luz);
  font-size: 1.3rem;
}
.guia-tipo__entrena {
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
}
.guia-lista {
  display: grid;
  gap: var(--espacio-3);
  padding-left: 1.2rem;
}
.proximamente {
  display: inline-block;
  padding: 0 0.55rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-pildora);
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
}
.guia-medidas,
.glosario {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
  gap: var(--espacio-3) var(--espacio-5);
  margin: 0;
}
.guia-medidas dt,
.glosario dt {
  font-weight: 700;
  color: var(--papel);
}
.guia-medidas dd,
.glosario dd {
  margin: 0;
  color: var(--papel-suave);
}

/* Progreso */
.progreso {
  display: grid;
  gap: var(--espacio-5);
}
.progreso__cabecera {
  display: grid;
  gap: var(--espacio-2);
}
.estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--espacio-3);
}
.estadistica {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.estadistica__etiqueta {
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
}
/* Cifras de resumen en la misma familia que el texto, con dígitos proporcionales. */
.estadistica__valor {
  font-size: var(--t-5);
  font-weight: 600;
  line-height: 1.15;
}
.estadistica__detalle {
  color: var(--linea-media);
  font-size: var(--t-0);
}
.progreso__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--espacio-5);
  align-items: start;
}
.progreso__panel {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.calor {
  position: relative;
  display: grid;
  gap: var(--espacio-3);
}
.calor__marco {
  overflow-x: auto;
  padding-top: var(--espacio-1);
}
.calor__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: 2rem repeat(16, 18px);
  grid-template-rows: repeat(7, 18px);
  gap: 3px;
  width: max-content;
}
.calor__celda {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: rgb(var(--linea-rgb) / 0.1);
}
.calor__rejilla .calor__celda:not(.calor__celda--futuro):hover,
.calor__rejilla .calor__celda:focus-visible {
  outline: 2px solid var(--papel);
  outline-offset: 1px;
}
.calor__celda--futuro {
  background: transparent;
  border: 1px dashed rgb(var(--linea-rgb) / 0.12);
}
.calor__dia {
  grid-column: 1;
  align-self: center;
  color: var(--linea);
  font-size: 0.75rem;
  line-height: 1;
}
.calor__leyenda {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--linea);
  font-size: var(--t-0);
}
.calor__leyenda .calor__celda:first-of-type {
  margin-left: 4px;
}
.calor__leyenda .calor__celda:last-of-type {
  margin-right: 4px;
}
.burbuja {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 0.1rem;
  translate: -50% calc(-100% - 8px);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--linea-media);
  border-radius: var(--radio);
  background: var(--tinta-profunda);
  font-size: var(--t-0);
  white-space: nowrap;
  pointer-events: none;
}
.burbuja[hidden] {
  display: none;
}
.burbuja strong {
  font-size: var(--t-1);
}
.burbuja span {
  color: var(--linea);
}
.barras__lista {
  display: grid;
  gap: var(--espacio-3);
  padding: 0;
  list-style: none;
}
.barras__fila {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem;
  gap: var(--espacio-3);
  align-items: center;
}
.barras__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-1);
}
.barras__pista {
  height: 20px;
  border-radius: 0 4px 4px 0;
  background: rgb(var(--linea-rgb) / 0.08);
}
.barras__barra {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: #bd842c;
}
.barras__fila:hover .barras__barra {
  background: #cf9540;
}
.barras__valor {
  font-weight: 700;
  font-size: var(--t-1);
}
.barras__base {
  color: var(--linea);
  font-weight: 400;
  font-size: var(--t-0);
}
.tabla-vista summary {
  cursor: pointer;
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
}
.tabla-vista table,
.tabla-conceptos {
  width: 100%;
  margin-top: var(--espacio-2);
  border-collapse: collapse;
  font-size: var(--t-1);
}
.tabla-vista th,
.tabla-vista td,
.tabla-conceptos th,
.tabla-conceptos td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--linea-tenue);
  text-align: left;
}
.tabla-vista thead th,
.tabla-conceptos thead th {
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
}
.tabla-conceptos tbody th {
  font-weight: 600;
}
.tabla-conceptos .numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabla-marco {
  overflow-x: auto;
}
.errores-frecuentes {
  display: grid;
  gap: var(--espacio-2);
  padding: 0;
  list-style: none;
}
.errores-frecuentes li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
  border-radius: 12px;
  background: rgb(var(--hondo-rgb) / 0.4);
}
.errores-frecuentes__veces {
  color: var(--linea);
  font-size: var(--t-0);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .progreso__columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .guia__seccion,
  .guia__cabecera {
    padding: var(--espacio-5);
  }
  .guia-medidas,
  .glosario {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espacio-1);
  }
  .guia-medidas dd,
  .glosario dd {
    margin-bottom: var(--espacio-3);
  }
  .barras__fila {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
  }
  .barras__nombre {
    grid-column: 1 / -1;
  }
  .errores-frecuentes li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
}

/* ---------- Guía: índice, pantallas, anomalías y sellos ---------- */
.guia__seccion {
  scroll-margin-top: 8rem;
}
.guia__titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.guia__titulo-icono {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(var(--luz-rgb) / 0.22), rgb(var(--brillo-rgb) / 0.22));
  color: var(--luz);
}
.guia-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.guia-zona {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 18px;
  background: linear-gradient(160deg, rgb(var(--luz-rgb) / 0.07), transparent 60%), var(--tinta-profunda);
  transition: translate 0.2s, border-color 0.2s;
}
.guia-zona:hover {
  translate: 0 -3px;
  border-color: rgb(var(--luz-rgb) / 0.5);
}
.guia-zona__icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--luz) 30%, #fff), var(--luz) 40%, var(--brillo));
  color: var(--texto-sobre-luz);
}
.guia-zona__titulo {
  font: 800 var(--t-2) / 1.2 var(--fuente-rotulo);
}
.guia-zona__texto {
  margin: 0;
  color: var(--papel-suave);
  font-size: var(--t-1);
  line-height: 1.5;
}
.guia-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--error) 50%, transparent);
  border-radius: 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--error) 16%, transparent), transparent);
}
.guia-aviso p {
  margin: 0;
}
.guia-aviso__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--error);
  color: #2a0710;
}
.guia-rarezas-sello {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.guia-rareza {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linea-tenue);
  border-radius: 14px;
}
.guia-rareza i {
  grid-row: span 2;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
}
.guia-rareza span {
  color: var(--papel-suave);
  font-size: var(--t-0);
}
/* Los mismos colores de rareza que las pastillas y el catálogo de sellos. */
.guia-rareza--bronce i { background: #ffd23f; }
.guia-rareza--plata i { background: #3ce0ff; }
.guia-rareza--oro i { background: #ff2a6a; box-shadow: 0 0 10px rgb(255 42 106 / 0.6); }
.guia-rareza--holo i {
  background: conic-gradient(#ffd23f, #b9e4f2, #dce8ff, #7ae582, #ffd23f);
  animation: pas-gira 5s linear infinite;
}
.guia__seccion--plegables {
  gap: var(--espacio-2);
}
@media (prefers-reduced-motion: reduce) {
  .guia-rareza--holo i {
    animation: none;
  }
}

/* ---------- Guía compacta ---------- */
.guia--compacta {
  gap: var(--espacio-4);
}
.guia-pasos--compactos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin: 0;
}
.guia-pasos--compactos .guia-paso {
  gap: 0.3rem;
  padding: var(--espacio-3);
}
.guia-pasos--compactos .guia-paso > span:last-child {
  color: var(--papel-suave);
  font-size: var(--t-0);
  line-height: 1.4;
}
.guia-pasos--compactos .guia-paso__icono {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
}
.guia-temas {
  display: grid;
  gap: var(--espacio-2);
}
.guia-tema {
  border: 1px solid var(--linea-tenue);
  border-radius: 18px;
  background: var(--superficie);
  scroll-margin-top: 5rem;
}
.guia-tema[open] {
  border-color: rgb(var(--luz-rgb) / 0.35);
}
.guia-tema > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 3.6rem;
  padding: 0.6rem var(--espacio-4);
  cursor: pointer;
  list-style: none;
}
.guia-tema > summary::-webkit-details-marker {
  display: none;
}
.guia-tema__icono {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(var(--luz-rgb) / 0.22), rgb(var(--brillo-rgb) / 0.22));
  color: var(--luz);
}
.guia-tema__texto {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.guia-tema__texto strong {
  font: 800 var(--t-2) / 1.25 var(--fuente-rotulo);
}
.guia-tema__texto span {
  overflow: hidden;
  color: var(--papel-suave);
  font-size: var(--t-0);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guia-tema__flecha {
  color: var(--linea);
  transition: rotate 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.guia-tema[open] .guia-tema__flecha {
  rotate: 180deg;
}
.guia-tema__cuerpo {
  display: grid;
  gap: var(--espacio-3);
  padding: 0 var(--espacio-4) var(--espacio-4);
}
.guia-tema__cuerpo p {
  margin: 0;
}
.guia-mini > summary {
  color: var(--luz);
  cursor: pointer;
  font-weight: 700;
}
.guia-zonas--filas {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--espacio-2);
}
.guia-zonas--filas .guia-zona {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: 0.7rem 0.8rem;
  color: inherit;
  text-decoration: none;
}
.guia-zonas--filas .guia-zona > span:nth-child(2) {
  display: grid;
  gap: 0.1rem;
}
.guia-zonas--filas .guia-zona__icono {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
}
.guia-zonas--filas .guia-zona__texto {
  font-size: var(--t-0);
}
.guia-zona__flecha {
  color: var(--linea);
}
@media (max-width: 720px) {
  .guia-pasos--compactos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guia-tema > summary {
    padding-inline: var(--espacio-3);
  }
  .guia-tema__cuerpo {
    padding: 0 var(--espacio-3) var(--espacio-3);
  }
}