body{font-size:14px}
.app{grid-template-columns:210px minmax(0,1fr)}
aside{padding:18px 12px}
.wordmark{font-size:17px;padding:0 8px 18px}
.wordmark span{width:29px;height:29px}
nav{gap:3px}
nav button{padding:9px 11px;font-size:14px}
.account{padding:12px 7px 0}
main>header{height:62px;padding:0 22px}
main>header h1{font-size:18px}
.content{max-width:none;padding:20px 22px 36px}
.heading{margin-bottom:14px}
.heading h2{font-size:23px}
.heading input{padding:9px 11px}
.metrics{gap:10px;margin-bottom:14px}
.metrics-five{grid-template-columns:repeat(5,minmax(140px,1fr))}
.metrics article{padding:14px;border-radius:13px}
.metrics strong{font-size:21px;line-height:1.25;margin:6px 0}
.dashboard-grid{display:grid;grid-template-columns:1fr;gap:14px}
.card{min-width:0;border-radius:13px}
.card h3{padding:14px 16px;font-size:18px}
.filters{display:grid;grid-template-columns:1.5fr repeat(4,minmax(125px,1fr));gap:8px;margin-bottom:12px}
.filters input,.filters select{padding:9px 10px}
table{min-width:680px}
th,td{padding:10px 12px;font-size:13px}
th{font-size:11px}
.period{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.period.mensual{background:#e8f1ff;color:#1f55b5}
.period.anual,.period.bienal{background:#e8f8ef;color:#087747}
.period.variable{background:#fff2dc;color:#9a5a00}
.period.trimestral,.period.semestral{background:#f0eaff;color:#6941c6}
.period.puntual{background:#f1f3f6;color:#475467}
.chart{height:220px;padding:14px 16px;display:flex;gap:8px;align-items:flex-end}
.chart-month{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.chart-bars{height:165px;width:100%;display:flex;justify-content:center;align-items:flex-end;gap:4px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf0f5 40px)}
.chart-bar{width:20px;min-height:2px;border-radius:4px 4px 0 0}
.chart-bar.forecast{background:#b9c8ee}
.chart-bar.actual{background:var(--blue)}
.chart-month small{color:var(--muted)}
.chart-legend{padding:0 16px 14px}
.calendar-card{padding:14px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.cal-head,.cal-day{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px}
.cal-head{min-height:auto;text-align:center;background:#f8fafc;color:var(--muted);font-size:11px;font-weight:800}
.cal-day{min-height:92px}
.cal-day.out{background:#fafafa;color:#a3abb8}
.cal-event{display:block;margin-top:5px;padding:4px 5px;border-left:3px solid var(--blue);background:#edf3ff;border-radius:4px;font-size:10px;line-height:1.25}
.cal-event.variable{border-color:#d97706;background:#fff5e5}
@media(max-width:1350px){.metrics-five{grid-template-columns:repeat(3,1fr)}.filters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.app{grid-template-columns:1fr}.metrics-five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.metrics-five,.filters{grid-template-columns:1fr}.calendar-card{overflow:auto}.calendar{min-width:680px}}
