/* [ZSPORT-herr-completas] "Qué procesa" A LA VISTA en cada tarjeta del hub.
   Regla del taller: nada plegado (un <details> es esconder). Para que la
   tarjeta no se haga eterna en el teléfono, la lista va corrida y en letra
   chica: un nombre detrás de otro, separados por " · ", con su marca (** / *-)
   pegada. Las documentadas y las que están en preparación, en su propia línea.
   Va después de herramientas-cliente.css y solo pisa lo de la lista. */

.hc-caps.hc-caps-abierto{
  display:block; border-top:1px solid var(--hc-borde-suave);
  padding-top:7px; margin-top:2px; text-align:left;
}
.hc-caps-abierto .hc-resumen{
  font-family:var(--hc-mono); font-size:10.5px; line-height:1.45;
  letter-spacing:.02em; color:var(--hc-dato);
}
.hc-caps-corrida{ margin:4px 0 0; font-size:11.5px; line-height:1.5; color:var(--hc-hueso-2) }
.hc-caps-corrida .hc-cap{
  display:inline; position:static; padding:0;
  font-size:inherit; line-height:inherit; color:inherit;
}
.hc-caps-corrida .hc-cap::before{ content:none }
.hc-caps-corrida .hc-cap + .hc-cap::before{
  content:" · "; position:static; width:auto; height:auto;
  background:none; color:var(--hc-ceniza);
}
.hc-caps-corrida .hc-cap-nom{ color:inherit }
.hc-caps-corrida .hc-cap-est{
  margin-left:4px; font-family:var(--hc-mono); font-size:10px;
  color:var(--hc-ambar); white-space:nowrap;
}
.hc-caps-corrida .hc-cap-externa .hc-cap-est{ color:var(--hc-dato) }
.hc-caps-corrida .hc-cap-preparacion,
.hc-caps-corrida .hc-cap-preparacion .hc-cap-est{ color:var(--hc-ceniza) }
.hc-rotulo-corrido{
  font-family:var(--hc-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--hc-ceniza);
}
.hc-caps-abierto .hc-ficha{ display:inline-block; margin-top:6px }

@media (max-width:480px){
  .hc-caps-corrida{ font-size:11px; line-height:1.45 }
  .hc-caps-abierto .hc-resumen{ font-size:10px }
}

/* En el teléfono la tarjeta se acomoda para que la lista a la vista no la
   alargue de más: el ícono va al lado del título y el precio (no arriba, solo),
   y los márgenes se ajustan. Nada se esconde. */
@media (max-width:560px){
  article.hc-tarjeta:has(> .hc-ico){
    display:grid; grid-template-columns:52px minmax(0, 1fr);
    column-gap:12px; row-gap:6px; align-items:start; padding:12px 13px 10px;
  }
  article.hc-tarjeta:has(> .hc-ico) > *{ grid-column:1 / -1 }
  article.hc-tarjeta:has(> .hc-ico) > .hc-ico{
    grid-column:1; grid-row:1 / span 2; width:52px; height:52px; margin:0; border-radius:10px;
  }
  article.hc-tarjeta:has(> .hc-ico) > .hc-ico svg{ width:40px; height:40px }
  article.hc-tarjeta:has(> .hc-ico) > .hc-titulo,
  article.hc-tarjeta:has(> .hc-ico) > .hc-precio{ grid-column:2; align-self:center }
  article.hc-tarjeta:has(> .hc-ico) > .hc-precio{ margin-top:0 }
}