.volunteer-dashboard { --vd-surface: #fff; --vd-soft: #f3f6fa; --vd-text: var(--ictus-graphite, #002b54); --vd-muted: var(--ictus-lead, #566378); --vd-border: var(--ictus-border, #d8e0ea); }
.volunteer-dashboard__content { display: flex; flex-direction: column; gap: 1rem; }
.volunteer-dashboard .visitors-dashboard__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.volunteer-dashboard .visitors-dashboard__panel { margin: 0; padding: 1.25rem; border-radius: 12px; background: var(--vd-surface); border-color: var(--vd-border); }
.volunteer-dashboard .visitors-dashboard__kpi { border-radius: 12px; background: var(--vd-surface); border-color: var(--vd-border); }
.volunteer-dashboard .volunteer-dashboard__kpi--danger::before { background: #c74747; }
.volunteer-dashboard .volunteer-dashboard__kpi--danger strong, .volunteer-dashboard__danger { color: #ba3838; }
.volunteer-dashboard__spotlight { display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem; border-radius: 14px; background: linear-gradient(115deg, #002b54, #074873); color: #fff; }
.volunteer-dashboard__spotlight > div { flex: 1; }
.volunteer-dashboard__spotlight h3 { color: #fff; font-size: 1.2rem; margin: .25rem 0 .5rem; }
.volunteer-dashboard__spotlight p { color: #deedf6; margin: 0; font-size: .88rem; max-width: 76ch; }
.volunteer-dashboard__spotlight .btn { flex-shrink: 0; white-space: nowrap; }
.volunteer-dashboard__eyebrow { color: #91deee; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.volunteer-dashboard__spotlight-icon { display: inline-flex; width: 3rem; height: 3rem; flex: 0 0 3rem; align-items: center; justify-content: center; background: #ffffff16; border: 1px solid #ffffff30; border-radius: 12px; font-size: 1.3rem; }
.volunteer-dashboard .bi, .volunteer-dashboard .bi::before { line-height: 1; }
.volunteer-dashboard__spotlight-icon .bi, .volunteer-dashboard__area-photo .bi { display: inline-flex; align-items: center; justify-content: center; }
.volunteer-dashboard__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.volunteer-dashboard__panel-heading { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .7rem; }
.volunteer-dashboard__panel-heading h3 { font-size: 1.05rem; margin: .2rem 0 0; color: var(--vd-text); }
.volunteer-dashboard__panel-heading h4 { font-size: .95rem; margin: 0; color: var(--vd-text); }
.volunteer-dashboard__hint { color: var(--vd-muted); font-size: .78rem; line-height: 1.5; margin-bottom: 1rem; }
.volunteer-dashboard__badge { font-size: .7rem; padding: .35rem .65rem; border: 1px solid var(--vd-border); border-radius: 20px; color: var(--vd-muted); }
.volunteer-dashboard__segmented { display: flex; height: 14px; background: var(--vd-soft); border-radius: 7px; overflow: hidden; margin: 1.35rem 0; }
.volunteer-dashboard .is-following { background: #d79027; }
.volunteer-dashboard .is-integrated { background: #1c986f; }
.volunteer-dashboard .is-closed { background: #8796a9; }
.volunteer-dashboard__outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.volunteer-dashboard__outcomes > div { display: grid; grid-template-columns: 8px 1fr; column-gap: .5rem; align-items: center; }
.volunteer-dashboard__outcomes strong { font-size: 1.5rem; color: var(--vd-text); }
.volunteer-dashboard__outcomes span:last-child { grid-column: 2; font-size: .75rem; color: var(--vd-muted); }
.volunteer-dashboard__dot { width: 8px; height: 8px; border-radius: 50%; }
.volunteer-dashboard__timing, .volunteer-dashboard__team-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; background: var(--vd-soft); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.volunteer-dashboard__timing strong, .volunteer-dashboard__team-stats strong { display: block; color: var(--vd-text); font-size: 1.65rem; line-height: 1.2; }
.volunteer-dashboard__timing .volunteer-dashboard__danger { color: #ba3838; }
.volunteer-dashboard__timing span, .volunteer-dashboard__team-stats span { color: var(--vd-muted); font-size: .75rem; }
.volunteer-dashboard__team-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.volunteer-dashboard__team-stats small { font-size: .95rem; color: var(--vd-muted); }
.volunteer-dashboard__panel-footer { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .75rem; color: var(--vd-muted); }
.volunteer-dashboard__areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.volunteer-dashboard__area { display: block; min-width: 0; padding: 1rem; border: 1px solid var(--vd-border); border-top: 3px solid #32bfd9; border-radius: 10px; background: var(--vd-surface); text-decoration: none; transition: transform .18s, box-shadow .18s; }
.volunteer-dashboard__area:hover, .volunteer-dashboard__area:focus-visible { transform: translateY(-3px); box-shadow: 0 7px 20px #002b5417; text-decoration: none; }
.volunteer-dashboard__area-heading { display: flex; align-items: center; gap: .7rem; }
.volunteer-dashboard__area-heading > div { flex: 1; min-width: 0; }
.volunteer-dashboard__area-heading h4 { color: var(--vd-text); font-size: .9rem; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.volunteer-dashboard__area-heading span:not(.volunteer-dashboard__area-photo) { color: var(--vd-muted); font-size: .68rem; }
.volunteer-dashboard__area-heading > .bi { color: var(--vd-muted); font-size: .8rem; }
.volunteer-dashboard__area-photo { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--vd-soft); color: var(--vd-text); align-items: center; justify-content: center; }
.volunteer-dashboard__area-photo img { width: 100%; height: 100%; object-fit: cover; }
.volunteer-dashboard__area-count { display: flex; align-items: baseline; gap: .5rem; margin: .9rem 0 .5rem; flex-wrap: wrap; }
.volunteer-dashboard__area-count strong { color: var(--vd-text); font-size: 1.45rem; }
.volunteer-dashboard__area-count small { font-size: .95rem; font-weight: 500; color: var(--vd-muted); }
.volunteer-dashboard__area-count > span { font-size: .7rem; color: var(--vd-muted); }
.volunteer-dashboard__track { height: 6px; background: var(--vd-soft); border-radius: 4px; overflow: hidden; }
.volunteer-dashboard__track > span { display: block; height: 100%; background: var(--area-color, #32bfd9); border-radius: inherit; }
.volunteer-dashboard__area-footer { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .65rem; font-size: .7rem; color: var(--vd-muted); }
.volunteer-dashboard__chart { display: flex; gap: .6rem; overflow-x: auto; padding: .5rem 0; }
.volunteer-dashboard__month { flex: 1 0 36px; display: flex; flex-direction: column; gap: .4rem; text-align: center; }
.volunteer-dashboard__month strong { font-size: .8rem; color: var(--vd-text); }
.volunteer-dashboard__month > div { display: flex; align-items: flex-end; justify-content: center; height: 130px; border-bottom: 1px solid var(--vd-border); }
.volunteer-dashboard__month > div span { display: block; width: 65%; max-width: 40px; background: linear-gradient(#32bfd9, #12628e); border-radius: 5px 5px 0 0; }
.volunteer-dashboard__month small { font-size: .62rem; white-space: nowrap; color: var(--vd-muted); }
.volunteer-dashboard__stages { max-height: 255px; overflow-y: auto; scrollbar-width: thin; }
.volunteer-dashboard__stage { margin-bottom: 1rem; }
.volunteer-dashboard__stage > div:first-child { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; font-size: .75rem; color: var(--vd-text); }
.volunteer-dashboard__stage small { font-size: .7rem; color: var(--vd-muted); }
body.theme-dark .volunteer-dashboard { --vd-surface: var(--ictus-dark-surface, #062548); --vd-soft: #0a3158; --vd-text: #eaf4fc; --vd-muted: #b9c5d3; --vd-border: #ffffff26; }
body.theme-dark .volunteer-dashboard .volunteer-dashboard__danger, body.theme-dark .volunteer-dashboard .volunteer-dashboard__kpi--danger strong { color: #ffa7a7; }
body.theme-dark .volunteer-dashboard .btn-outline-primary { color: #91deee; border-color: #58819b; }
body.theme-dark .volunteer-dashboard .btn-outline-primary:hover, body.theme-dark .volunteer-dashboard .btn-outline-primary:focus-visible { color: #fff; background: #125179; }
body.theme-dark .volunteer-dashboard .btn-outline-secondary { color: #c8d4e0; border-color: #698298; }
@media (max-width: 1199px) { .volunteer-dashboard__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .volunteer-dashboard__spotlight { flex-wrap: wrap; } }
@media (max-width: 767px) { .volunteer-dashboard .visitors-dashboard__kpis, .volunteer-dashboard__team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .volunteer-dashboard__split, .volunteer-dashboard__areas { grid-template-columns: minmax(0, 1fr); } .volunteer-dashboard__spotlight { padding: 1.2rem; } .volunteer-dashboard__spotlight-icon { display: none; } .volunteer-dashboard__spotlight > div { flex-basis: 100%; } .volunteer-dashboard .visitors-dashboard__header { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .volunteer-dashboard__area { transition: none; } .volunteer-dashboard__area:hover { transform: none; } }