/* ── Indicadores del hato («¿Cómo va mi finca?») ── */
.herd-card { cursor: pointer; height: 100%; transition: box-shadow .15s ease, transform .15s ease; }
.herd-card:hover { box-shadow: var(--mud-elevation-6); }
.herd-card:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.herd-card-hidden { opacity: .55; }
.herd-card-title { line-height: 1.25; min-height: 2.5em; }

.herd-card-value { display: flex; align-items: baseline; gap: .4rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.herd-card-number { font-size: 2.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.herd-card-unit { font-size: 1.05rem; color: var(--mud-palette-text-secondary); }

.herd-gauge { position: relative; height: 14px; margin-top: .75rem; }
.herd-gauge-track { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--mud-palette-lines-inputs); }
.herd-gauge-goal { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--mud-palette-text-primary); }
.herd-gauge-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--mud-palette-surface); box-shadow: 0 0 0 1px var(--mud-palette-text-primary); }

@media (prefers-reduced-motion: reduce) { .herd-card { transition: none; } }

/* Tendencia de 12 meses en el detalle de un indicador */
.herd-trend { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 120px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.herd-trend-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.herd-trend-bar { width: 100%; max-width: 28px; border-radius: 3px 3px 0 0; background: var(--mud-palette-primary); opacity: .55; }
.herd-trend-bar-closed { opacity: 1; }
.herd-trend-empty { width: 100%; max-width: 28px; height: 0; border-bottom: 2px dashed var(--mud-palette-lines-inputs); }
.herd-trend-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--mud-palette-text-primary); pointer-events: none; }
.herd-trend-labels { display: flex; gap: 6px; margin-top: 4px; margin-bottom: 4px; }
.herd-trend-label { flex: 1; min-width: 0; text-align: center; font-size: .7rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
@media (max-width: 600px) { .herd-trend-label { font-size: .6rem; } .herd-trend-label:nth-child(even) { visibility: hidden; } }