/* ========================================================================== SICON Design System — v3.0 SaaS Contract Management — Colombian Public Sector Themeable via data-theme attribute on ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ══ TEMA GRAFITO OSCURO — DEFAULT ══ */ :root, [data-theme="dark"] { --bg: #191714; --bg2: #201D19; --bg3: #272320; --bg4: #2E2A26; --sidebar: #1C1917; --card: #232019; --primario: #D4A017; --primario-hover: #B8880F; --primario-text: #111111; --acento: #F0C040; --acento-hover: #D4A017; --texto: #EDE8DC; --texto2: #9A9080; --texto3: #5A5248; --borde: rgba(255,255,255,0.07); --borde2: rgba(255,255,255,0.13); --alerta: #E05252; --alerta-bg: rgba(224,82,82,.1); --exito: #52B788; --exito-bg: rgba(82,183,136,.1); --warn: #D4A017; --warn-bg: rgba(212,160,23,.1); --info: #5EADD5; --info-bg: rgba(94,173,213,.1); --nav-active: rgba(212,160,23,0.14); --nav-active-text: #D4A017; --sidebar-bg: #1C1917; --sidebar-text: rgba(237,232,220,.45); --sidebar-text-hover: rgba(237,232,220,.8); --sidebar-active-border: #D4A017; --sidebar-active-bg: rgba(212,160,23,.12); --sidebar-divider: rgba(255,255,255,.06); --switcher-bg: #272320; --switcher-active: #232019; } /* ══ TEMA CLARO CALIDO ══ */ [data-theme="light"] { --bg: #F8F7F5; --bg2: #F0EDE8; --bg3: #E8E3DC; --bg4: #DDD8D0; --sidebar: #FFFFFF; --card: #FFFFFF; --primario: #C2500F; --primario-hover: #A84209; --primario-text: #FFFFFF; --acento: #B8881A; --acento-hover: #92400E; --texto: #2A2015; --texto2: #6B5C4A; --texto3: #A89080; --borde: rgba(0,0,0,0.08); --borde2: rgba(0,0,0,0.14); --alerta: #DC2626; --alerta-bg: #FEF2F2; --exito: #2D7A4F; --exito-bg: #F0FDF4; --warn: #B8881A; --warn-bg: #FFFBEB; --info: #2579A8; --info-bg: #EFF8FF; --nav-active: rgba(194,80,15,0.10); --nav-active-text: #C2500F; --sidebar-bg: #2A2015; --sidebar-text: rgba(255,245,230,.5); --sidebar-text-hover: rgba(255,245,230,.85); --sidebar-active-border: #C2500F; --sidebar-active-bg: rgba(194,80,15,.12); --sidebar-divider: rgba(255,255,255,.06); --switcher-bg: #E8E3DC; --switcher-active: #FFFFFF; } /* ══ TEMA NAVY (estilo SIAL) ══ */ [data-theme="navy"] { --bg: #0D1520; --bg2: #131E2D; --bg3: #1A2640; --bg4: #1E2D47; --sidebar: #111C2A; --card: #1A2640; --primario: #D4A017; --primario-hover: #B8880F; --primario-text: #111111; --acento: #F0C040; --acento-hover: #D4A017; --texto: #E8EDF5; --texto2: #8FA3BE; --texto3: #4E6580; --borde: rgba(255,255,255,0.07); --borde2: rgba(255,255,255,0.13); --alerta: #EF4444; --alerta-bg: rgba(239,68,68,.1); --exito: #52B788; --exito-bg: rgba(82,183,136,.1); --warn: #D4A017; --warn-bg: rgba(212,160,23,.1); --info: #60A5FA; --info-bg: rgba(96,165,250,.1); --nav-active: rgba(212,160,23,0.14); --nav-active-text: #D4A017; --sidebar-bg: #111C2A; --sidebar-text: rgba(232,237,245,.45); --sidebar-text-hover: rgba(232,237,245,.8); --sidebar-active-border: #D4A017; --sidebar-active-bg: rgba(212,160,23,.12); --sidebar-divider: rgba(255,255,255,.06); --switcher-bg: #1A2640; --switcher-active: #0D1520; } /* ---------- Shared Design Tokens (Linear/Stripe feel) ---------- */ :root { --s-radius: 12px; --s-radius-lg: 16px; --s-shadow-sm: 0 0 0 1px var(--borde), 0 1px 2px rgba(0,0,0,.03); --s-shadow-md: 0 0 0 1px var(--borde), 0 4px 12px rgba(0,0,0,.06); --s-shadow-lg: 0 0 0 1px var(--borde), 0 8px 24px rgba(0,0,0,.08); --s-transition: .2s cubic-bezier(.4,0,.2,1); } /* ---------- Base Styles ---------- */ *, *::before, *::after { box-sizing: border-box; } body { background: var(--bg); color: var(--texto); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.6; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1); } /* Global smooth transitions for theme switching */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow, opacity; transition-duration: .15s; transition-timing-function: cubic-bezier(.4,0,.2,1); } h1, h2, h3, h4, h5, h6 { color: var(--texto); line-height: 1.3; } a { color: var(--primario); text-decoration: none; transition: color var(--s-transition); } a:hover { color: var(--primario-hover); text-decoration: underline; } img { max-width: 100%; } /* Page titles */ .page-title { font-family: 'Inter', system-ui, sans-serif; font-size: 24px; font-weight: 700; color: var(--texto); letter-spacing: -.5px; margin-bottom: 4px; } .page-subtitle { font-size: 12px; color: var(--texto3); margin-bottom: 20px; } /* Section headings */ .section-heading { font-family: 'Inter', system-ui, sans-serif; font-size: 1.25rem; font-weight: 400; color: var(--texto); } /* ---------- Navbar ---------- */ .navbar-sicon { background: var(--sidebar-bg) !important; } /* ---------- Buttons ---------- */ .btn-sicon-primary { display: inline-flex; align-items: center; gap: .4rem; background: var(--primario); color: var(--primario-text); border: none; border-radius: 8px; padding: .5rem 1.2rem; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: all var(--s-transition); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .btn-sicon-primary:hover, .btn-sicon-primary:focus-visible { background: var(--primario-hover); color: var(--primario-text); box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); } .btn-sicon-primary:active { transform: translateY(0) scale(.98); box-shadow: none; } .btn-sicon-accent { display: inline-flex; align-items: center; gap: .4rem; background: var(--acento); color: #fff; border: none; border-radius: 8px; padding: .5rem 1.15rem; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background var(--s-transition), box-shadow var(--s-transition), transform var(--s-transition); } .btn-sicon-accent:hover, .btn-sicon-accent:focus-visible { background: var(--acento-hover); color: #fff; box-shadow: var(--s-shadow-md); transform: translateY(-1px); } .btn-sicon-accent:active { transform: translateY(0); box-shadow: none; } .btn-sicon-outline { display: inline-flex; align-items: center; gap: .4rem; background: transparent; color: var(--primario); border: 1px solid var(--primario); border-radius: 7px; padding: 8px 18px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .15s; text-decoration: none; } .btn-sicon-outline:hover { background: var(--nav-active); color: var(--primario); text-decoration: none; } /* ---------- Cards ---------- */ .card-sicon { background: var(--card); border: 1px solid var(--borde); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); transition: box-shadow var(--s-transition), transform var(--s-transition); } .card-sicon:hover { box-shadow: var(--s-shadow-md); transform: translateY(-1px); } .card-sicon .card-body { padding: 1.25rem; } .card-panel { background: var(--card); border: 1px solid var(--borde); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); transition: box-shadow var(--s-transition), transform var(--s-transition); } .card-panel:hover { box-shadow: var(--s-shadow-md); transform: translateY(-1px); } .card-panel .card-header { font-size: 1rem; font-weight: 600; color: var(--texto); padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde); background: transparent; } .card-panel .card-body { padding: 1.25rem; } /* ---------- KPI / Metric Cards ---------- */ .metric-card { background: var(--card); border: none; border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem; transition: all var(--s-transition); text-decoration: none; color: var(--texto); position: relative; overflow: hidden; } .metric-card::after { content: ''; position: absolute; inset: 0; border-radius: var(--s-radius); box-shadow: inset 0 0 0 1px var(--borde); pointer-events: none; transition: box-shadow var(--s-transition); } .metric-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-lg); color: var(--texto); text-decoration: none; } .metric-card:hover::after { box-shadow: inset 0 0 0 1px var(--primario); } .metric-card__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--nav-active); color: var(--primario); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: transform var(--s-transition); } .metric-card:hover .metric-card__icon { transform: scale(1.05); } .metric-card__content { flex: 1; min-width: 0; } .metric-card__label { font-size: .75rem; font-weight: 500; color: var(--texto2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .15rem; line-height: 1.4; } .metric-card__value { font-family: 'Inter', system-ui, sans-serif; font-size: 2.2rem; font-weight: 400; color: var(--texto); line-height: 1.15; } /* Danger variant */ .metric-card--danger { background: var(--alerta-bg); } .metric-card--danger::after { box-shadow: inset 3px 0 0 var(--alerta), inset 0 0 0 1px var(--borde); } .metric-card--danger .metric-card__value { color: var(--alerta); } .metric-card--danger .metric-card__icon { background: var(--alerta-bg); color: var(--alerta); } /* Warning variant */ .metric-card--warning { border-left: 3px solid var(--warn); background: var(--warn-bg); } .metric-card--warning .metric-card__value { color: var(--warn); } .metric-card--warning .metric-card__icon { background: var(--warn-bg); color: var(--warn); } /* Legacy KPI card support */ .kpi-card { background: var(--card); border: 1px solid var(--borde); border-radius: var(--s-radius); box-shadow: var(--s-shadow-sm); transition: transform var(--s-transition), box-shadow var(--s-transition); text-decoration: none; color: var(--texto); } .kpi-card:hover { transform: translateY(-1px); box-shadow: var(--s-shadow-md); color: var(--texto); } .kpi-card .kpi-value { font-family: 'Inter', system-ui, sans-serif; font-size: 2rem; font-weight: 400; color: var(--texto); } .kpi-card.kpi-danger { border-left: 3px solid var(--alerta); } .kpi-card.kpi-danger .kpi-value { color: var(--alerta); } /* ---------- Year Selector ---------- */ .year-selector { display: inline-flex; gap: 2px; background: var(--bg2); border: none; border-radius: 10px; padding: 4px; box-shadow: inset 0 0 0 1px var(--borde); } .year-selector__pill { padding: .45rem 1.1rem; border-radius: 8px; font-size: .8rem; font-weight: 500; color: var(--texto3); background: transparent; border: none; cursor: pointer; transition: all var(--s-transition); text-decoration: none; } .year-selector__pill:hover { background: var(--bg3); color: var(--texto); text-decoration: none; } .year-selector__pill--active, .year-selector__pill--active:hover { background: var(--primario); color: var(--primario-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; text-decoration: none; } /* ---------- Dashboard Panel ---------- */ .dash-panel { background: var(--card); border: none; border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); overflow: hidden; transition: box-shadow var(--s-transition), transform var(--s-transition); } .dash-panel:hover { box-shadow: var(--s-shadow-md); } .dash-panel__header { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; } .dash-panel__title { font-size: .9rem; font-weight: 600; color: var(--texto); margin: 0; } .dash-panel__subtitle { font-size: .75rem; color: var(--texto3); margin: 0; } .dash-panel__body { padding: 1.5rem; } /* Alert variants */ .dash-panel--alert-warning .dash-panel__header { background: var(--warn-bg); border-left: 3px solid var(--warn); } .dash-panel--alert-danger .dash-panel__header { background: var(--alerta-bg); border-left: 3px solid var(--alerta); } /* ---------- Empty State ---------- */ .empty-state { text-align: center; padding: 2.5rem 1.5rem; } .empty-state__icon, .empty-state i { font-size: 2.5rem; color: var(--texto3); margin-bottom: .75rem; display: block; } .empty-state__title { font-size: .9rem; font-weight: 600; color: var(--texto); margin-bottom: .25rem; } .empty-state__text { font-size: .8rem; color: var(--texto3); max-width: 280px; margin: 0 auto; line-height: 1.5; } .empty-state__action { margin-top: 1rem; } .empty-state__action .btn, .empty-state__action button { background: var(--primario); color: var(--primario-text); border: none; border-radius: 6px; padding: .4rem .9rem; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background var(--s-transition); } .empty-state__action .btn:hover, .empty-state__action button:hover { background: var(--primario-hover); color: var(--primario-text); } /* ---------- Status Table ---------- */ .status-table { width: 100%; border-collapse: collapse; } .status-table th { font-size: .75rem; font-weight: 600; color: var(--texto2); text-transform: uppercase; letter-spacing: .5px; background: var(--bg2); border-bottom: 2px solid var(--borde); padding: .6rem .75rem; text-align: left; } .status-table td { font-size: .825rem; padding: .6rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: middle; } .status-table tr:hover { background: var(--bg2); } .status-table td a { color: var(--primario); text-decoration: none; font-weight: 500; } .status-table td a:hover { color: var(--primario-hover); text-decoration: underline; } /* Legacy table-sicon compatibility */ .table-sicon th { font-size: .75rem; font-weight: 600; color: var(--texto2); text-transform: uppercase; letter-spacing: .5px; background: var(--bg2); border-bottom: 2px solid var(--borde); border-top: none; } .table-sicon td { font-size: .875rem; vertical-align: middle; border-bottom: 1px solid var(--borde); } .table-sicon tr:hover { background: var(--bg2); } /* ---------- Badges ---------- */ .badge-status { font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 5px; display: inline-block; line-height: 1.4; } .badge-registrado { background: var(--exito-bg); color: var(--exito); } .badge-extemporaneo { background: var(--alerta-bg); color: var(--alerta); font-weight: 700; } .badge-pendiente { background: var(--warn-bg); color: var(--warn); } .badge-rendido { background: var(--info-bg); color: var(--info); } /* ---------- Form Sections ---------- */ .form-section { background: var(--card); border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 16px; overflow: hidden; } .form-section-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--borde); background: var(--bg3); } .form-section-number { width: 28px; height: 28px; border-radius: 50%; background: var(--primario); color: var(--primario-text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .form-section-title { font-size: 14px; font-weight: 600; color: var(--texto); letter-spacing: -.2px; margin: 0; } .form-section-body { padding: 20px; } /* ---------- Form Progress ---------- */ .form-progress { background: var(--card); border: 1px solid var(--borde2); border-radius: 10px; padding: 12px 20px; margin-bottom: 16px; position: sticky; top: 0; z-index: 10; } .form-progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .form-progress-label { font-size: 12px; color: var(--texto2); } .form-progress-pct { font-size: 12px; font-weight: 600; color: var(--primario); } .form-progress-bar { height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; } .form-progress-fill { height: 100%; background: var(--primario); border-radius: 99px; transition: width .3s ease; } /* ---------- Skeleton Loader ---------- */ .skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; height: 1rem; margin-bottom: .5rem; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Login Page ---------- */ .login-bg { background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--primario) 50%, var(--primario-hover) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-card { background: var(--card); border-radius: 16px; padding: 2.5rem; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); } .login-card h2, .login-card h3 { color: var(--texto); font-weight: 700; } .login-card .btn-sicon-primary, .login-card .btn-sicon-accent { width: 100%; justify-content: center; } .login-card .btn-login-cta { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; background: var(--acento); color: #fff; border: none; border-radius: 8px; padding: .6rem 1.15rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background var(--s-transition), box-shadow var(--s-transition); } .login-card .btn-login-cta:hover { background: var(--acento-hover); color: #fff; box-shadow: var(--s-shadow-md); } /* ---------- Landing / Hero Section ---------- */ .hero-section { background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--primario) 60%, var(--primario-hover) 100%); color: #fff; padding: 5rem 0; min-height: 60vh; display: flex; align-items: center; } .hero-section h1 { font-family: 'Inter', system-ui, sans-serif; color: #fff; font-size: 2.5rem; font-weight: 400; } .hero-section p { color: rgba(255,255,255,.8); } .hero-section .btn-sicon-accent { background: var(--acento); color: #fff; font-size: .9rem; padding: .65rem 1.5rem; } .hero-section .btn-sicon-accent:hover { background: var(--acento-hover); color: #fff; } /* ---------- Feature Cards ---------- */ .feature-card { background: var(--card); border: 1px solid var(--borde); border-radius: var(--s-radius); padding: 2rem; text-align: center; height: 100%; box-shadow: var(--s-shadow-sm); transition: transform var(--s-transition), box-shadow var(--s-transition); } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-md); } .feature-card i { font-size: 2.5rem; color: var(--primario); margin-bottom: 1rem; } .feature-card h5 { font-weight: 600; color: var(--texto); } /* ---------- Stat Numbers ---------- */ .stat-number { font-family: 'Inter', system-ui, sans-serif; font-size: 2.5rem; font-weight: 400; color: var(--acento); } /* ---------- Toast Container ---------- */ .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1090; } /* ---------- Focus Visible ---------- */ :focus-visible { outline: 3px solid rgba(from var(--primario) r g b / .3) !important; outline-offset: 2px; } @supports not (color: rgba(from red r g b / 1)) { :focus-visible { outline: 3px solid var(--borde2) !important; outline-offset: 2px; } } /* ---------- Theme Switcher ---------- */ .theme-switcher { display: inline-flex; align-items: center; gap: 2px; background: var(--switcher-bg, var(--bg2)); border: 1px solid var(--borde2); border-radius: 8px; padding: 3px; } .theme-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; font-size: .75rem; font-weight: 500; color: var(--texto3); background: transparent; border: none; cursor: pointer; font-family: inherit; transition: all var(--s-transition); white-space: nowrap; } .theme-btn:hover { color: var(--texto); background: var(--bg3); } .theme-btn.active { background: var(--switcher-active, var(--card)); color: var(--texto); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.15); border: 1px solid var(--borde2); } /* ---------- Sidebar Swatches ---------- */ .sidebar-palette { padding: 12px 16px; border-top: 0.5px solid var(--sidebar-divider); } .sidebar-palette-label { font-size: 10px; color: var(--texto3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .sidebar-swatches { display: flex; gap: 6px; } .sw { display: block; width: 22px; height: 22px; border-radius: 6px; border: 0.5px solid var(--borde2); flex-shrink: 0; } /* ---------- Utility Classes ---------- */ .text-muted-s { color: var(--texto3) !important; } .text-secondary-s { color: var(--texto2) !important; } .text-navy-s { color: var(--texto) !important; } .text-gold-s { color: var(--acento) !important; } .text-green-s { color: var(--exito) !important; } .text-danger-s { color: var(--alerta) !important; } .text-warning-s { color: var(--warn) !important; } .text-cyan-s { color: var(--info) !important; } .bg-card-s { background: var(--card) !important; } .border-s { border: 1px solid var(--borde) !important; } .radius-s { border-radius: var(--s-radius) !important; } .shadow-sm-s { box-shadow: var(--s-shadow-sm) !important; } /* ---------- Form Inputs (Linear style) ---------- */ .form-control, .form-select { background: var(--bg3); color: var(--texto); border: 1px solid var(--borde2); border-radius: 7px; padding: 9px 13px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .form-control::placeholder { color: var(--texto3); } .form-control:focus, .form-select:focus { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(212,160,23,.12); background: var(--bg3); color: var(--texto); outline: none; } .form-label { display: block; font-size: 10px; font-weight: 500; color: var(--texto3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; } /* ---------- Filtros Card ---------- */ .filtros-card { background: var(--card); border: 1px solid var(--borde2); border-radius: 10px; padding: 16px 20px; } .filtros-card .form-control, .filtros-card .form-select { background: var(--bg3); border: 1px solid var(--borde2); } /* ---------- Export Buttons ---------- */ .btn-export { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 7px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; border: 1px solid var(--borde2); background: var(--card); color: var(--texto2); transition: all .15s; text-decoration: none; } .btn-export:hover { background: var(--bg3); color: var(--texto); text-decoration: none; } .btn-excel:hover { color: #52B788; border-color: rgba(82,183,136,.3); } .btn-pdf:hover { color: var(--alerta); border-color: rgba(224,82,82,.3); } /* ---------- Count Badge ---------- */ .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--bg3); border: 1px solid var(--borde2); border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--texto2); margin-left: 8px; vertical-align: middle; } /* ---------- Breadcrumb ---------- */ .breadcrumb-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; } .bc-item { font-size: 12px; color: var(--texto3); } .bc-link { color: var(--texto2); text-decoration: none; } .bc-link:hover { color: var(--primario); } .bc-active { color: var(--texto); font-weight: 500; } .bc-sep { font-size: 12px; color: var(--texto3); } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .theme-btn { padding: 5px 8px; font-size: .7rem; } .metric-card__value, .kpi-card .kpi-value { font-size: 1.5rem; } .metric-card { padding: 1rem; } .year-selector { flex-wrap: wrap; } .year-selector__pill { padding: .35rem .75rem; font-size: .75rem; } .hero-section { padding: 3rem 0; min-height: auto; } .hero-section h1 { font-size: 1.75rem; } .stat-number { font-size: 1.8rem; } .page-title { font-size: 1.35rem; } .dash-panel__body { padding: 1rem; } } @media (max-width: 480px) { .metric-card__value, .kpi-card .kpi-value { font-size: 1.25rem; } .metric-card__icon { width: 34px; height: 34px; font-size: .95rem; } .dash-panel__header { flex-direction: column; align-items: flex-start; gap: .25rem; } }