/* ==========================================================================
   Componentes v5: lista de revision (palomitas en una tarjeta blanca) y pestanas por objetivo (una tarjeta
   con la hoja de 3 celdas por objetivo). Todo con los tokens de base.css.
   ========================================================================== */
.rail--checks { max-width: 920px; margin-inline: auto; text-align: left; }
.rail--checks .rail__value { font-size: var(--fs-26); letter-spacing: var(--tr-26); line-height: 1.15; }
.rail__check { display: inline-block; width: .8em; height: .8em; margin-right: .3em; vertical-align: -.02em; stroke-width: 2.2; color: var(--black); }
/* Con movimiento, la palomita se dibuja de izquierda a derecha (clip-path) despues de su fila, en secuencia */
.motion .rail--checks .rail__check { clip-path: inset(0 100% 0 0); }

.cp-goals .tabs__panel { margin-top: var(--sp-8); padding: 32px; border: 1px solid var(--hair); border-radius: var(--r-card); text-align: left; }
.cp-goal__title { margin-bottom: var(--sp-7); font-size: var(--fs-26); letter-spacing: var(--tr-26); line-height: 1.15; color: var(--white); }
.cp-goal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-top: var(--sp-7); }
.cp-goals .sheet dt { color: var(--smoke); }
.cp-goals .sheet .link { color: var(--white); }
@media (max-width: 759px) {
  .cp-goals .tabs__panel { padding: 22px; }
  /* Las pildoras fluyen en renglones, cada una en una sola linea (nunca una pildora de dos lineas) */
  .cp-goals .tabs__tab { padding-inline: 16px; }
}
.checklist.card { text-align: left; }