:root { --bg: #050811; --surface: #0b1120; --surface-2: #101827; --line: #1d2a3c; --text: #edf3ff; --muted: #7e8da7; --gold: #d8ab45; --cyan: #22c7d7; --green: #48d597; --red: #f37474; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 28px; background: #080e1b; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.logo { width: 105px; max-height: 48px; object-fit: contain; object-position: left center; }
.brand h1 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.02em; }
.brand span, .header-status { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.header-status { display: flex; align-items: center; gap: 12px; color: var(--green); white-space: nowrap; }
.pill { color: var(--gold); border: 1px solid rgba(216,171,69,.35); border-radius: 999px; padding: 7px 10px; letter-spacing: .03em; }
.container { width: min(1560px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 50px; }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.toolbar-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.segmented { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; }
.segmented button, .action { color: #d7e1f2; border: 0; background: transparent; border-radius: 7px; padding: 10px 13px; font-size: 12px; font-weight: 800; }
.segmented button.active, .segmented button:hover { color: var(--gold); background: rgba(216,171,69,.15); }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.action { border: 1px solid var(--line); background: var(--surface); }
.action:hover { border-color: var(--cyan); color: var(--cyan); }
.goal-control { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.goal-control input { width: 74px; color: var(--text); border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px; font-weight: 800; }
.layout-zone { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.layout-block { grid-column: span 6; min-width: 0; position: relative; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 19px; box-shadow: 0 14px 35px rgba(0,0,0,.13); }
.layout-block.full, .layout-block.wide { grid-column: span 12; }
.layout-block.quarter { grid-column: span 3; }
.drag-handle { display: none; margin: -9px -9px 13px; color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.layout-editing .drag-handle { display: block; padding: 8px; border: 1px dashed rgba(216,171,69,.5); border-radius: 7px; cursor: grab; }
.layout-editing .layout-block { outline: 1px dashed rgba(34,199,215,.35); }
.layout-block.dragging { opacity: .45; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { min-height: 125px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(140deg, #0d1627, #0a1020); }
.kpi span, .summary-stats span { display: block; color: #8ea0bd; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kpi strong { display: block; margin: 15px 0 8px; color: #fff; font-size: clamp(22px, 2.5vw, 31px); letter-spacing: -.04em; }
.kpi small { color: var(--cyan); font-size: 11px; font-weight: 700; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.section-head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.section-head span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.summary-copy { min-height: 52px; margin: 0; color: #cbd6e8; font-size: 15px; line-height: 1.65; }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 22px; }
.summary-stats div { border-top: 1px solid var(--line); padding-top: 13px; }
.summary-stats strong { display: block; margin-top: 7px; color: var(--gold); font-size: 18px; }
.goal-line { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 0 10px; }
.goal-line strong { font-size: 19px; }
.goal-line b { color: var(--gold); }
.progress, .track { overflow: hidden; height: 9px; border-radius: 999px; background: #1a2536; }
.progress i, .track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--cyan)); }
.muted, .empty { color: var(--muted); font-size: 13px; }
.chart-box { height: 275px; }
.chart-box.small { height: 205px; }
.ranking { display: grid; gap: 15px; }
.rank-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.rank-row span { overflow: hidden; color: #d8e2f4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.rank-row strong { color: var(--gold); font-size: 12px; white-space: nowrap; }
.rank-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.track { height: 6px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 980px; border-collapse: collapse; }
th { padding: 11px 10px; color: #7789a4; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
td { padding: 13px 10px; border-bottom: 1px solid rgba(29,42,60,.75); color: #d4deee; font-size: 12px; vertical-align: middle; }
td strong { display: block; color: #f4f7fc; }
td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.status { display: inline-block; padding: 6px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-waiting { color: var(--gold); background: rgba(216,171,69,.14); }
.status-whatsapp { color: var(--cyan); background: rgba(34,199,215,.14); }
.status-contact { color: var(--green); background: rgba(72,213,151,.14); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: 360px; padding: 13px 16px; border: 1px solid rgba(72,213,151,.4); border-radius: 8px; background: #10261f; color: #d7fff0; font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(243,116,116,.45); background: #2b151a; color: #ffdcdc; }
@media (max-width: 1100px) { .header, .toolbar { align-items: flex-start; flex-direction: column; } .header-status { white-space: normal; } .toolbar-actions { justify-content: flex-start; } .layout-block.quarter { grid-column: span 6; } .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .container { width: min(100% - 22px, 1560px); padding-top: 14px; } .header { padding: 13px 14px; } .logo { width: 82px; } .brand h1 { font-size: 17px; } .layout-block, .layout-block.full, .layout-block.wide, .layout-block.quarter { grid-column: span 12; padding: 14px; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { min-height: 110px; padding: 13px; } .kpi strong { font-size: 23px; } .summary-stats { grid-template-columns: 1fr; } .segmented button { padding: 9px 10px; } }
@media print { .header { position: static; } .toolbar, .drag-handle, .toast { display: none !important; } .layout-zone { display: block; } .layout-block { margin-bottom: 14px; break-inside: avoid; box-shadow: none; } body { background: #fff; color: #111; } .layout-block, .kpi { background: #fff; border-color: #ccd4df; } .section-head h2, td, .kpi strong { color: #111; } }