@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root { --red:#b52329; --red-dark:#6f1418; --red-mid:#941b20; --red-light:#ce2c32; --navy:#6f1418; --muted:#756769; --surface:#fff; --background:#f5f1f1; --border:#eadfe0; }
* { box-sizing: border-box; }
body { margin:0; background:var(--background); color:var(--navy); font-family:Inter,'Segoe UI',sans-serif; }
.topbar { min-height:108px; display:flex; align-items:center; gap:32px; padding:20px max(28px, calc((100vw - 1480px)/2)); background:linear-gradient(120deg,#6f1418 0%,#7f171c 54%,#941b20 100%); color:#fff; border-bottom:4px solid #b52329; box-shadow:0 5px 18px rgba(111,20,24,.20); }
.brand { min-width:160px; font-size:29px; letter-spacing:-1.8px; font-weight:600; }
.brand-main { color:#fff; }.brand-accent { color:#f2b6b9; font-weight:800; }
.header-content { flex:1; display:flex; justify-content:space-between; align-items:center; border-left:1px solid rgba(255,255,255,.22); padding-left:32px; }
.header-content h1 { margin:0 0 4px; color:#fff; font-size:25px; font-weight:800; letter-spacing:-.5px; }.header-content p { margin:0; color:#e7c9ca; font-size:13px; }
.refresh-button { border:1px solid rgba(255,255,255,.8); border-radius:10px; padding:11px 17px; color:#fff; background:transparent; font-weight:600; font-size:13px; transition:.2s; }.refresh-button:hover { transform:translateY(-1px); background:#fff; color:var(--red-dark); box-shadow:0 7px 18px rgba(48,7,10,.22); }
.dashboard-container { width:min(1480px,calc(100% - 40px)); margin:24px auto; display:flex; flex-direction:column; }
.dashboard-container > .filters-panel { order:1; }
.dashboard-container > .table-panel { order:2; }
.dashboard-container > .kpi-row { order:3; }
.dashboard-container > .charts-row { order:4; }
.dashboard-container > .footer { order:5; }
.h-100 { height:100%; }
.kpi-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.charts-row { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.chart-col { grid-column:span 6; margin-bottom:4px; }.chart-col-8 { grid-column:span 8; }.chart-col-4 { grid-column:span 4; }
.filters-panel,.panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 5px 22px rgba(111,20,24,.055); }
.filters-panel { position:relative; z-index:30; overflow:visible; padding:20px 22px 15px; margin-bottom:22px; }.filter-header,.table-heading { display:flex; justify-content:space-between; align-items:center; }.section-title { font-size:14px; font-weight:700; }
.clear-button { border:0; background:transparent; color:var(--red); font-size:12px; font-weight:700; }.clear-button:hover { text-decoration:underline; }
.filters-grid { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:15px; margin-top:16px; }.filter-item { min-width:0; }.date-filter { grid-column:span 2; }.search-filter { grid-column:span 3; }
.volume-filters { grid-template-columns:repeat(4,minmax(160px,1fr)); }
.volume-filters .date-filter { grid-column:span 2; }
.volume-filters .search-filter { grid-column:span 2; }
.volume-filters .date-range,.volume-filters .DateRangePicker,.volume-filters .DateRangePickerInput { width:100%; }
.volume-filters .DateRangePickerInput { display:flex!important; align-items:center; min-height:42px; }
.volume-filters .DateInput { flex:1 1 0; width:auto; min-width:0; }
.volume-filters .DateInput_input { width:100%; text-align:center; }
.filter-label { display:block; margin:0 0 7px; color:#485269; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; }
.smart-dropdown .Select-control,.search-input,.date-range .DateRangePickerInput { min-height:42px; border:1px solid #dfd2d3!important; border-radius:9px!important; background:#fcfafa; font-size:12px; }.smart-dropdown .Select-control:hover,.search-input:focus { border-color:#ce797d!important; box-shadow:0 0 0 3px rgba(181,35,41,.10); }
.smart-dropdown .Select-placeholder { line-height:40px; }.smart-dropdown .Select-value { margin-top:4px; }.smart-dropdown .Select-value-label { color:#4d3234!important; }.smart-dropdown .Select--multi .Select-value { background:#f8e9ea; border-color:#e7b6b8; color:#7f171c; }
.search-input { width:100%; padding:0 13px; outline:0; }.date-range,.date-range .DateRangePicker,.date-range .DateRangePickerInput { width:100%; }.date-range .DateInput { width:43%; background:transparent; }.date-range .DateInput_input { height:40px; font-size:12px; background:transparent; padding:8px; }.date-range .DateRangePickerInput_arrow { padding:0 4px; }.DateRangePicker_picker,.DayPicker { z-index:9999!important; }.DateRangePicker_picker { box-shadow:0 18px 45px rgba(66,12,16,.22); border-radius:12px; overflow:hidden; }
.filter-summary { color:var(--muted); font-size:11px; margin-top:13px; min-height:16px; }.filter-summary strong { color:var(--navy); }
.kpi-card { border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 5px 22px rgba(111,20,24,.055); overflow:hidden; }.kpi-body { display:flex; gap:15px; align-items:center; padding:19px; }.kpi-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:13px; font-size:13px; font-weight:800; letter-spacing:.04em; }.kpi-icon.red { color:#6f1418; background:#f3dfe0; }.kpi-icon.blue { color:#941b20; background:#f6e5e6; }.kpi-icon.teal { color:#b52329; background:#f8e9ea; }.kpi-icon.amber { color:#ce2c32; background:#fbeff0; }
.kpi-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.055em; font-weight:700; }.kpi-value { margin:2px 0 0; font-size:25px; letter-spacing:-.6px; font-weight:800; }.kpi-detail { min-height:15px; color:#8a93a5; font-size:10px; }
.panel { padding:18px 20px; }.chart-heading h3 { margin:0; font-size:15px; font-weight:750; }.chart-heading p { margin:4px 0 0; font-size:11px; color:var(--muted); }.chart-graph { height:340px; }
.table-panel { position:relative; z-index:1; margin-bottom:22px; overflow:hidden; }.table-panel-primary { border-top:3px solid var(--red); }.table-heading { margin-bottom:17px; }.last-update { color:var(--muted); font-size:11px; }
.table-actions { display:flex; align-items:flex-end; flex-direction:column; gap:7px; }
.table-action-buttons { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.table-refresh-button { border:1px solid #d9b8ba; border-radius:10px; min-height:41px; padding:0 17px; background:#fff; color:var(--red-dark); cursor:pointer; font-family:Inter,'Segoe UI',sans-serif; font-size:12px; font-weight:700; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.table-refresh-button:hover { transform:translateY(-1px); background:#f8e9ea; box-shadow:0 7px 16px rgba(111,20,24,.12); }
.column-selector-wrap { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:12px; margin:0 0 14px; padding:10px 12px; background:#fbf7f7; border:1px solid #eadfe0; border-radius:11px; }
.column-selector-controls { display:grid; gap:8px; min-width:0; }
.column-selector-wrap .filter-label { margin:0; }
.column-selector-copy { display:grid; gap:3px; }
.column-selector-copy small { color:var(--muted); font-size:9px; line-height:1.25; }
.column-selector .Select-control { background:#fff; }
.column-selector .Select-value { cursor:grab; touch-action:none; transition:opacity .15s ease,transform .15s ease; }
.column-selector .Select-value.is-column-dragging { opacity:.38; transform:scale(.96); }
.column-selector .Select-value.is-column-drop-target { outline:2px solid var(--red); outline-offset:1px; }
body.is-dragging-column-chip,body.is-dragging-column-chip * { cursor:grabbing!important; user-select:none!important; }
.dash-spreadsheet-container th[data-dash-column] { position:relative; }
.column-resize-handle { position:absolute; z-index:20; top:0; right:-4px; width:9px; height:100%; cursor:col-resize; user-select:none; touch-action:none; }
.column-resize-handle::after { content:""; position:absolute; top:22%; bottom:22%; left:4px; width:1px; background:rgba(255,255,255,.38); }
.column-resize-handle:hover::after,.column-resize-handle.is-resizing::after { width:2px; background:#fff; }
body.is-resizing-table-column,body.is-resizing-table-column * { cursor:col-resize!important; user-select:none!important; }
.volume-export-button { border:0; border-radius:10px; min-height:41px; padding:0 17px; background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; box-shadow:0 6px 15px rgba(111,20,24,.25); cursor:pointer; font-family:Inter,'Segoe UI',sans-serif; font-size:12px; font-weight:700; transition:transform .18s ease,box-shadow .18s ease; }
.volume-export-button::before { content:'⇩'; display:inline-block; margin-right:8px; font-size:17px; transform:translateY(1px); }
.volume-export-button:hover { transform:translateY(-1px); box-shadow:0 9px 20px rgba(111,20,24,.32); }
.dash-table-container button.export { float:right; margin:0 0 12px; border:0; border-radius:10px; min-height:39px; padding:0 15px; background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; box-shadow:0 6px 15px rgba(111,20,24,.25); cursor:pointer; font-size:0; font-family:Inter,'Segoe UI',sans-serif; font-weight:700; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.dash-table-container button.export::before { content:'⇩'; display:inline-block; margin-right:8px; font-size:17px; line-height:1; transform:translateY(1px); }.dash-table-container button.export::after { content:'Exportar Excel'; font-size:12px; }.dash-table-container button.export:hover { transform:translateY(-1px); background:linear-gradient(135deg,#c82a30,#6f1418); box-shadow:0 9px 20px rgba(111,20,24,.32); }.dash-table-container button.export:active { transform:translateY(0); box-shadow:0 4px 10px rgba(111,20,24,.22); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]) { color:#344054!important; }.previous-next-container button { border:1px solid var(--border)!important; background:#fff!important; border-radius:7px!important; color:var(--navy)!important; }.page-number { color:var(--muted)!important; }
.connection-alert { margin-bottom:18px; padding:15px 18px; border:1px solid #fecaca; background:#fef2f2; color:#991b1b; border-radius:12px; font-size:13px; }.footer { padding:18px 0 30px; text-align:center; color:#98a0af; font-size:11px; }
@media(max-width:1100px){.filters-grid{grid-template-columns:repeat(3,1fr)}.date-filter,.search-filter{grid-column:span 3}.volume-filters .date-filter,.volume-filters .search-filter{grid-column:span 3}.kpi-row{grid-template-columns:repeat(2,1fr)}.chart-col,.chart-col-8,.chart-col-4{grid-column:span 12}}
@media(max-width:700px){.topbar{align-items:flex-start;gap:10px;flex-direction:column;padding:18px 20px}.header-content{width:100%;padding:12px 0 0;border-left:0;border-top:1px solid var(--border)}.header-content h1{font-size:19px}.dashboard-container{width:calc(100% - 22px)}.filters-grid{grid-template-columns:1fr}.date-filter,.search-filter,.volume-filters .date-filter,.volume-filters .search-filter{grid-column:span 1}.kpi-row{grid-template-columns:1fr}.chart-graph{height:300px}.refresh-button{padding:9px 12px}}
@media(max-width:700px){.column-selector-wrap{grid-template-columns:1fr}}