/* Tarjeta de pilar: la única, usada por la rueda y la rejilla del inicio (js/tarjeta-pilar.js).
   Material de cristal: app.css (lista :where). Numeral de fondo: numeral.css (.con-numeral + data-numeral).
   Compacta: su alto sale del contenido; el contenedor de cada vista iguala las alturas (rejilla: filas 1fr; rueda: carril 1fr).
   Lo único que cambia entre vistas son los parámetros --tp-* del final. */
.tarjeta-pilar {
  --tp-titulo: 1.38rem;      /* «Contribución» y «Alimentación» caben enteras en 126 px de texto (360 px de pantalla) */
  --tp-lema: .85rem;
  --tp-estado: .78rem;
  --tp-pad: var(--esp-4) 14px 14px;
  --numeral-tamano: 34px;
  /* Rejilla interna: el título ocupa todo el ancho; lema y estado dejan sitio al numeral, que es una celda más
     (su ::before). Así el texto nunca se monta sobre el número. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "nombre nombre" "lema lema" "estado numero";
  column-gap: var(--esp-1);
  row-gap: var(--esp-1);
  min-width: 0;
  padding: var(--tp-pad);
  color: var(--texto);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.tarjeta-pilar::before {   /* el numeral de numeral.css, como celda de la rejilla en vez de absoluto */
  position: static;
  grid-area: numero;
  align-self: end;
  justify-self: end;
  line-height: .78;
  letter-spacing: 0;
}
.tp-nombre { grid-area: nombre; align-self: start; }
.tp-lema { grid-area: lema; }
.tp-estado { grid-area: estado; align-self: end; }
.tarjeta-pilar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tarjeta-pilar.pronto { opacity: .8; }

.tp-nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--tp-titulo);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.tp-lema { margin-bottom: var(--esp-2); font-size: var(--tp-lema); line-height: 1.25; color: var(--texto-suave); }

/* Línea de estado real (estadoPilar): punto + texto, pegada al pie. El tono sale del estado. */
.tp-estado {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--vidrio-divisor);
  font-size: var(--tp-estado);
  font-weight: 500;
  line-height: 1.25;
}
.tp-estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); }
.tp-estado[data-tono="carga"]::before { visibility: hidden; }
.tp-estado[data-tono="nuevo"] { color: var(--texto-suave); }
.tp-estado[data-tono="nuevo"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--oro-texto); }
.tp-estado[data-tono="neutro"]::before { background: var(--texto-suave); }
.tp-estado[data-tono="aviso"] { color: var(--aviso); font-weight: 600; }
.tp-estado[data-tono="aviso"]::before { background: var(--aviso); }

/* ── Parámetros por vista ── */
.rejilla .tarjeta-pilar:hover, .rejilla .tarjeta-pilar:focus-visible { border-color: var(--acento); background: var(--vidrio-fondo-fuerte); transform: translateY(-2px); }
.rejilla .tarjeta-pilar:active { transform: translateY(0) scale(.985); }
@media (min-width: 700px) {
  .rejilla .tarjeta-pilar { --tp-titulo: 1.7rem; --tp-lema: .9rem; --tp-estado: .85rem; --numeral-tamano: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rejilla .tarjeta-pilar { transition: none; transform: none; }
}

.rueda .tarjeta-pilar {
  --tp-titulo: clamp(2.1rem, 11vw, 3rem);   /* una línea a 360 px */
  --tp-lema: .95rem;
  --tp-estado: .9rem;
  --tp-pad: var(--esp-4) var(--esp-4) 14px;
  --numeral-tamano: clamp(44px, 13vw, 88px);   /* a 360 px cabe en la fila del título, como en el prototipo */
  grid-template-areas: "nombre numero" "lema lema" "estado estado";
  border-radius: var(--radio-contenedor);
  box-shadow: var(--vidrio-brillo), var(--vidrio-sombra-alta);
  transform-origin: center;
  will-change: transform, opacity;
}
.rueda .tarjeta-pilar::before { align-self: start; }