/* Tarjetas visuales de indicadores: corto en la tarjeta, detalle en la ficha */
.indicators-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.ind-vcard { background: #fff; border: 1px solid var(--border-light); border-radius: 22px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.ind-vcard:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(13,36,18,.15); }
.ind-vcard-media { position: relative; height: 150px; overflow: hidden; }
.ind-vcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.ind-vcard:hover .ind-vcard-media img { transform: scale(1.07); }
.ind-vcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,36,18,0) 45%, rgba(13,36,18,.55) 100%); }
.ind-vcard-code { position: absolute; left: .8rem; bottom: .7rem; z-index: 2; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ind-vcard-pill { position: absolute; right: .7rem; top: .7rem; z-index: 2; font-size: .68rem; font-weight: 800; padding: .25rem .65rem; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--color-forest-900); }
.ind-vcard-pill.attention { color: #8a5a00; } .ind-vcard-pill.critical { color: #a3361c; }
.ind-vcard-body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ind-vcard-name { font-size: .95rem; font-weight: 700; color: var(--text-muted); margin: 0; line-height: 1.3; }
.ind-vcard-value { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.15; font-weight: 800; color: var(--color-forest-850); }
.ind-vcard-value.long { font-size: 1.05rem; }
.ind-vcard-more { margin-top: auto; padding-top: .6rem; font-size: .82rem; font-weight: 800; color: var(--color-forest-700); }

.donut-short-lead { font-size: 1.05rem; line-height: 1.55; color: var(--text-body); margin: 0 0 1rem; }
.donut-more-btn { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 800; color: var(--color-forest-700); font-size: .92rem; text-decoration: underline; }