#observations #work-area-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 16px}
#observations #work-area-filters .tramo-status-pill{display:flex;flex-direction:column;position:relative;isolation:isolate;min-width:0;padding:24px;border:1px solid var(--wa-border);border-radius:16px;background:linear-gradient(120deg,#fff 35%,var(--wa-soft));box-shadow:0 6px 20px #102a4c08;overflow:hidden;transition:border-color .2s,box-shadow .2s}
#observations #work-area-filters .tramo-status-pill:before,#observations #work-area-filters .tramo-status-pill:after{content:'';position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-70px;top:-80px;background:var(--wa-color);opacity:.045;pointer-events:none}#observations #work-area-filters .tramo-status-pill:after{width:240px;height:240px;right:-90px;top:-100px;opacity:.025}
#observations #work-area-filters .tramo-status-pill:hover{box-shadow:0 8px 25px #102a4c13;border-color:var(--wa-color)}#observations #work-area-filters .tramo-status-pill.selected{box-shadow:inset 0 0 0 1px var(--wa-border),0 6px 20px #102a4c0c;border-color:var(--wa-color)}
#observations #work-area-filters [data-tramo-choice]{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 18px;width:100%;padding:0;min-height:0;text-align:left;background:none;border:0;color:#102A4C;align-items:center;font:inherit}
#observations #work-area-filters .work-area-icon{display:grid;place-items:center;width:64px;height:64px;margin:0;border-radius:18px;background:var(--wa-soft);color:var(--wa-color)}#observations #work-area-filters .work-area-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#observations #work-area-filters .work-area-copy strong{display:block;font-size:19px;line-height:1.3;color:#102A4C;overflow-wrap:break-word}#observations #work-area-filters .work-area-copy small{display:block;font-size:14px;color:#64748B;margin-top:5px;font-weight:400}
#observations #work-area-filters .work-area-total{grid-column:2;display:block;color:#64748B;font-size:14px;font-weight:400;margin-top:16px}#observations #work-area-filters .work-area-total b{display:block;font-size:36px;color:#102A4C;line-height:1.2;margin-bottom:5px}
#observations #work-area-filters .work-area-stats{display:grid;grid-template-columns:1fr 1fr;padding:20px 0;margin:20px 0 0;border-top:1px solid #E2E8F0;background:transparent;gap:0;text-align:left}
#observations #work-area-filters .work-area-stats span{display:block;padding:0 12px;color:#64748B;font-size:13px}#observations #work-area-filters .work-area-stats span+span{border-left:1px solid #E2E8F0}#observations #work-area-filters .work-area-stats b{display:block;font-size:24px;line-height:1.3;color:#102A4C;margin-bottom:3px}
#observations #work-area-filters .work-area-footer{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(115px,42%);align-items:center;gap:10px;margin-top:auto;padding-top:12px;background:transparent}#observations #work-area-filters .work-area-footer small{font-size:16px;font-weight:700;color:#047857;line-height:1.3}
#observations #work-area-filters .work-area-footer select{width:100%;min-width:0;height:44px;margin:0;border:1px solid #CBDDEB;border-radius:12px;background-color:white;color:#102A4C;padding:8px 28px 8px 12px;font-size:14px}
#observations #work-area-filters .wa-ring{position:relative;display:grid;place-items:center;width:56px;height:56px;color:var(--wa-color)}#observations #work-area-filters .wa-ring svg{width:56px;height:56px;overflow:visible;transform:none}#observations #work-area-filters .wa-ring circle{fill:none;stroke-width:5}.wa-track{stroke:#E2E8F0}.wa-value{stroke:var(--wa-color);transform:rotate(-90deg);transform-origin:32px 32px;transition:stroke-dasharray .2s}.wa-check{fill:none;stroke:var(--wa-color);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}#observations #work-area-filters .wa-ring b{position:absolute;font-size:12px}
@media(max-width:1100px){#observations #work-area-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){#observations #work-area-filters{grid-template-columns:minmax(0,1fr)}#observations #work-area-filters .tramo-status-pill{padding:22px}#observations #work-area-filters .work-area-footer{grid-template-columns:52px minmax(0,1fr) minmax(110px,40%);gap:8px}}
@media(prefers-reduced-motion:reduce){#observations #work-area-filters .tramo-status-pill,.wa-value{transition:none}}

#observations #work-area-filters [data-tramo-choice]{grid-template-areas:none}#observations #work-area-filters .work-area-icon{grid-area:auto;grid-column:1;grid-row:1}#observations #work-area-filters .work-area-copy{grid-area:auto;grid-column:2;grid-row:1;display:block}#observations #work-area-filters .work-area-total{grid-area:auto;grid-column:2;grid-row:2;margin:16px 0 0!important;color:#64748B!important}#observations #work-area-filters .tramo-status-pill{gap:0}

/* Compact area cards: presentation only. */
#observations #work-area-filters .tramo-status-pill{padding:16px;min-height:0}
#observations #work-area-filters [data-tramo-choice]{grid-template-columns:44px minmax(0,1fr);column-gap:12px}
#observations #work-area-filters .work-area-icon{width:44px;height:44px;border-radius:13px}
#observations #work-area-filters .work-area-icon svg{width:25px;height:25px}
#observations #work-area-filters .work-area-copy strong{font-size:17px;line-height:1.25}
#observations #work-area-filters .work-area-copy small{font-size:12px;margin-top:2px}
#observations #work-area-filters .work-area-total{margin:7px 0 0!important;font-size:12px;line-height:1.25}
#observations #work-area-filters .work-area-total b{font-size:29px;display:inline;margin:0 6px 0 0;line-height:1.15}
#observations #work-area-filters .work-area-stats{padding:11px 0;margin:11px 0 0}
#observations #work-area-filters .work-area-stats span{display:flex;align-items:center;gap:7px;padding:0 8px;font-size:12px}
#observations #work-area-filters .work-area-stats b{display:inline;font-size:20px;margin:0;line-height:1.2}
#observations #work-area-filters .work-area-footer{grid-template-columns:40px minmax(0,1fr) minmax(110px,42%);gap:8px;padding-top:6px}
#observations #work-area-filters .wa-ring,#observations #work-area-filters .wa-ring svg{width:40px;height:40px}
#observations #work-area-filters .wa-ring b{font-size:10px}
#observations #work-area-filters .work-area-footer small{font-size:14px;line-height:1.2}
#observations #work-area-filters .work-area-footer select{height:40px;min-height:40px;border-radius:10px;font-size:13px;padding:7px 24px 7px 10px}