/* Central Charroque 2.2 — integração visual profissional.
 * Conteúdo REAL servido por ui-v456.js, produtividades e módulos existentes.
 * Não altera nenhuma chamada API, estado de tarefas ou operações comerciais.
 */
body.cc-professional-mode #app .topbar,
body.cc-professional-mode #cc-neon-ribbon { display:none!important }
body.cc-professional-mode #cc-professional-host {display:block; width:100%; position:sticky;top:0;z-index:45;box-shadow:0 5px 18px #0003}
body.cc-professional-mode .app-shell {min-height:calc(100vh - 232px);background:var(--bg);display:block!important}
body.cc-professional-mode .main-shell{grid-column:auto;min-width:0;width:100%}
body.cc-professional-mode .content-wrap{max-width:1650px;margin:0 auto;padding:26px 31px 60px}
body.cc-professional-mode .sidebar{position:fixed!important;transform:translateX(-110%);inset:0 auto 0 0;z-index:100;width:276px;overflow:auto;border-right:1px solid #375344;background:#08160f}
body.cc-professional-mode.menu-open .sidebar {transform:translateX(0)!important}
body.cc-professional-mode .menu-backdrop {position:fixed!important;inset:0;display:block!important;z-index:90;background:#000b;opacity:0;pointer-events:none}
body.cc-professional-mode.menu-open .menu-backdrop {opacity:1;pointer-events:auto}
body.cc-professional-mode #view {min-height:calc(100vh - 300px);font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;font-size:13px;line-height:1.5}
body.cc-professional-mode .hero,
body.cc-professional-mode .operations-hero,
body.cc-professional-mode .routine-hero {border-radius:11px;border:1px solid #2d4b39;background:linear-gradient(135deg,#10251b,#0a1711)!important;box-shadow:0 2px 14px #0003;padding:22px}
body.cc-professional-mode .hero h1,
body.cc-professional-mode .operations-hero h1{font-size:25px;letter-spacing:-.03em;font-weight:720}
body.cc-professional-mode .metric-grid {gap:13px}
body.cc-professional-mode .metric-card {border-radius:10px;padding:16px 18px;border:1px solid #244336;background:linear-gradient(150deg,#10281e,#0b1a15);min-height:114px}
body.cc-professional-mode .metric-label {color:#afc4b6;font-size:11px;letter-spacing:0;text-transform:none}
body.cc-professional-mode .metric-value {font-size:26px;color:#f4faf4;font-weight:700}
body.cc-professional-mode .metric-sub{font-size:10.5px;color:#8fa99b}
body.cc-professional-mode .metric-card.accent {border-color:#46602b}
body.cc-professional-mode .metric-card.accent .metric-value{color:#d8ff45}
body.cc-professional-mode .panel,
body.cc-professional-mode .card {background:linear-gradient(150deg,#0d241a,#0a1a14);border:1px solid #29483a;border-radius:11px;box-shadow:0 1px 10px rgba(0,0,0,.12)}
body.cc-professional-mode .panel-head {border-bottom:1px solid #234136;padding-bottom:12px}
body.cc-professional-mode .panel-head h2{font-weight:720;font-size:14px}
body.cc-professional-mode .panel-head p {font-size:11px;color:#a0b5a8}
body.cc-professional-mode .compact-grid{gap:12px}
body.cc-professional-mode .compact-stat {background:#0b1d15;border:1px solid #2c4a3d;border-radius:9px}
body.cc-professional-mode .compact-stat strong{color:#f4faf4}
body.cc-professional-mode .operation-task,
body.cc-professional-mode .priority-item {background:#0b2117;border:1px solid #254436;border-radius:9px}
body.cc-professional-mode .flow-table th,
body.cc-professional-mode .table th,
body.cc-professional-mode table th {font-weight:700;color:#93a99d;background:#0a1b13}
body.cc-professional-mode .flow-table td,
body.cc-professional-mode .table td,
body.cc-professional-mode table td {border-bottom:1px solid #254237;color:#d7e5dc}
body.cc-professional-mode table tr:hover td {background:rgba(216,255,69,.025)}
body.cc-professional-mode .tag,
body.cc-professional-mode .pill{border-radius:5px}
body.cc-professional-mode button:not(.nav-item):not(.cc-n-tool) {letter-spacing:0}
body.cc-professional-mode input,
body.cc-professional-mode textarea,
body.cc-professional-mode select {border-radius:7px}
body.cc-professional-mode .section-title{margin:18px 0 12px}
body.cc-professional-mode .section-title h2{font-weight:730}
body.cc-professional-mode .status-dot.attention{background:#ffd45f}
body.cc-professional-mode .status-dot.ok{background:#7cf877}
body.cc-professional-compact .content-wrap{padding-top:13px}
body.cc-professional-compact .metric-card{min-height:85px;padding:10px 14px}
body.cc-professional-compact .metric-value{font-size:21px}
body.cc-professional-compact .panel {padding:11px}
body.cc-professional-compact table td {padding:6px}
body.cc-professional-compact .hero{padding:14px}
@media(max-width:850px){
 body.cc-professional-mode .content-wrap{padding:15px 14px 35px}
 body.cc-professional-mode #view{font-size:12px}
 body.cc-professional-mode .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 body.cc-professional-mode .metric-grid{grid-template-columns:1fr}
 body.cc-professional-mode .dashboard-grid{grid-template-columns:1fr}
}