/* Ordivo 1.2.0 — tema com a paleta da logo (laranja #FB6300, verde #019054, grafite #011917).
   Carregado por último: só sobrepõe aparência, sem mudar comportamento. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Marca */
  --brand-orange: #fb6300;
  --brand-orange-600: #e25800;
  --brand-orange-700: #b54600;
  --brand-orange-100: #ffe3cc;
  --brand-orange-50: #fff4eb;
  --brand-green: #019054;
  --brand-green-700: #01703f;
  --brand-green-50: #e7f6ee;
  --brand-ink: #011917;
  --brand-ink-2: #0b2724;
  --brand-ink-3: #16352f;

  /* Tokens usados pelo restante do CSS */
  --bg: #f4f6f5;
  --surface: #fff;
  --ink: #0f201e;
  --muted: #64736f;
  --line: #e4eae8;
  --orange: var(--brand-orange);
  --orange-dark: var(--brand-orange-700);
  --soft: var(--brand-orange-50);
  --green: var(--brand-green);
  --blue: #2563b0;
  --red: #c0313f;
  --shadow: 0 1px 2px #01191708, 0 6px 20px #0119170a;
  --shadow-lg: 0 2px 4px #0119170d, 0 18px 48px #01191714;
  --radius: 14px;
  --focus: 0 0 0 3px #fb630033;

  /* Cores das 6 fases do atendimento */
  --ph0: #47605b; --ph0-bg: #edf2f1;   /* Agendamento */
  --ph1: #2563b0; --ph1-bg: #eaf2fc;   /* Entrada */
  --ph2: #6d4bd1; --ph2-bg: #f1edfd;   /* Diagnóstico */
  --ph3: #b54600; --ph3-bg: #fff1e5;   /* Aprovação (espera o cliente) */
  --ph4: #0b7d8c; --ph4-bg: #e4f5f7;   /* Execução */
  --ph5: #01703f; --ph5-bg: #e7f6ee;   /* Entrega */

  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink);
}
body { background: var(--bg); }
::selection { background: var(--brand-orange-100); }
h1 { font-weight: 750; letter-spacing: -0.8px; color: var(--brand-ink); }
h2, h3 { color: var(--brand-ink); font-weight: 680; }
.eyebrow { color: var(--brand-orange-700); }
:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

/* ---------- Menu lateral grafite ---------- */
.sidebar {
  background: var(--brand-ink);
  border-right: 0;
  color: #c9d6d3;
  background-image: radial-gradient(120% 60% at 0% 100%, #01905422 0%, transparent 60%), radial-gradient(90% 40% at 100% 0%, #fb630014 0%, transparent 60%);
}
.sidebar .brand { padding: 0 6px 26px; }
.nav-caption { color: #6f8a85; }
.nav-link { color: #b5c4c0; font-weight: 520; position: relative; transition: background .15s, color .15s; }
.nav-link svg { color: #7f9a95; }
.nav-link:hover { background: #ffffff0d; color: #fff; }
.nav-link:hover svg { color: #fff; }
.nav-link.active { background: linear-gradient(90deg, #fb630026, #fb630008); color: #fff; font-weight: 650; }
.nav-link.active svg { color: var(--brand-orange); }
.nav-link.active:before { content: ""; position: absolute; left: -18px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-orange); }
.nav-link.active:after { display: none; }
.sidebar-bottom { border-top-color: #ffffff14; }
.sidebar .user strong { color: #fff; }
.sidebar .user small, .sidebar-note { color: #7f9a95; }
.sidebar .icon-button { color: #9fb2ae; }
.sidebar .icon-button:hover { background: #ffffff12; color: #fff; }
.sidebar .avatar { background: var(--brand-green); color: #fff; }
.sidebar>nav { scrollbar-color: #ffffff22 transparent; }

/* ---------- Barra superior ---------- */
.topbar { height: 68px; background: #ffffffe6; border-bottom-color: var(--line); }
.breadcrumb b { font-weight: 650; }
.online { color: var(--brand-green-700); background: var(--brand-green-50); padding: 5px 10px; border-radius: 20px; font-weight: 600; }
.online:before { background: var(--brand-green); box-shadow: 0 0 0 3px #01905426; }
.topbar .company-name { font-weight: 600; color: var(--ink); font-size: 13px; }
.topbar-right > .avatar { background: var(--brand-orange); color: #fff; }

/* ---------- Botões ---------- */
.btn { border-radius: 10px; border-color: #dbe3e1; color: #24413c; font-weight: 620; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { border-color: #c3cfcc; background: #f7faf9; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand-orange); border-color: var(--brand-orange); box-shadow: 0 1px 0 #ffffff33 inset, 0 6px 14px #fb630030; }
.btn.primary:hover { background: var(--brand-orange-600); border-color: var(--brand-orange-600); }
.btn.danger { color: var(--red); border-color: #f1d0d4; }
.btn.danger:hover { background: #fdf3f4; }

/* ---------- Cartões e painéis ---------- */
.kpi, .panel, .operation { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.kpi { position: relative; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.kpi:hover { box-shadow: var(--shadow-lg); }
.kpi-head { color: var(--muted); font-weight: 600; font-size: 12px; }
.kpi-value { font-weight: 760; letter-spacing: -1px; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.kpi-note { color: #81908c; font-size: 11px; }
.kpi-icon { background: var(--brand-orange-50); color: var(--brand-orange); border-radius: 10px; width: 34px; height: 34px; }
.kpi-icon svg { width: 17px; height: 17px; }
.kpi:nth-child(2) .kpi-icon, .kpi:nth-child(6) .kpi-icon { background: var(--brand-green-50); color: var(--brand-green); }
.kpi:nth-child(3) .kpi-icon, .kpi:nth-child(7) .kpi-icon { background: var(--ph1-bg); color: var(--ph1); }
.kpi:nth-child(4) .kpi-icon, .kpi:nth-child(8) .kpi-icon { background: var(--ph2-bg); color: var(--ph2); }
.kpi:first-child { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; background-image: radial-gradient(120% 120% at 100% 0%, #fb630040 0%, transparent 55%), radial-gradient(90% 90% at 0% 100%, #01905433 0%, transparent 60%); }
.kpi:first-child .kpi-head, .kpi:first-child .kpi-note { color: #a9bcb8; }
.kpi:first-child .kpi-value { color: #fff; }
.kpi:first-child .kpi-icon { background: #ffffff14; color: #fff; }
.panel-head h2 { font-size: 16px; }
.panel-head p { font-size: 12px; }
.operation { padding: 18px 20px; }
.operation svg { color: var(--brand-orange); background: var(--brand-orange-50); border-radius: 10px; padding: 8px; width: 38px; height: 38px; }
.operation:nth-child(2) svg { color: var(--ph3); background: var(--ph3-bg); }
.operation:nth-child(3) svg { color: var(--ph4); background: var(--ph4-bg); }
.operation:nth-child(4) svg { color: var(--brand-green); background: var(--brand-green-50); }
.operation strong { font-weight: 760; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.operation small { font-size: 11px; color: var(--muted); }
.section-title h2 { font-size: 17px; }
.time { background: var(--brand-orange-50); color: var(--brand-orange-700); font-variant-numeric: tabular-nums; }
.agenda-row { transition: background .15s; }
.chart .curve { stroke: var(--brand-orange); }
.chart .point { fill: var(--brand-orange); }
.legend:before { background: var(--brand-orange); }
.pipeline meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--brand-orange), #ff8a3d); }
.pipeline meter::-moz-meter-bar { background: var(--brand-orange); border-radius: 5px; }
.pipeline { font-size: 12px; }

/* ---------- Etiquetas de etapa (cor por fase) ---------- */
.status { font-size: 11px; font-weight: 650; padding: 4px 10px 4px 9px; border-radius: 20px; letter-spacing: .1px; }
.status.ph-0 { color: var(--ph0); background: var(--ph0-bg); }
.status.ph-1 { color: var(--ph1); background: var(--ph1-bg); }
.status.ph-2 { color: var(--ph2); background: var(--ph2-bg); }
.status.ph-3 { color: var(--ph3); background: var(--ph3-bg); }
.status.ph-4 { color: var(--ph4); background: var(--ph4-bg); }
.status.ph-5 { color: var(--ph5); background: var(--ph5-bg); }
/* "Aprovado" e "Finalizado"/"Entregue" sempre em verde: sinal positivo */
.status.green.ph-3 { color: var(--brand-green-700); background: var(--brand-green-50); }
.status.red, .status.ph-x { color: var(--red); background: #fcedef; }
/* "Aprovado" (orçamento) e "Repor" continuam usando as cores semânticas */
.status.green:not([class*="ph-"]) { color: var(--brand-green-700); background: var(--brand-green-50); }
.status.orange:not([class*="ph-"]) { color: var(--brand-orange-700); background: var(--brand-orange-50); }

/* ---------- Barra de etapas agrupada por fase ---------- */
.stepper-panel { overflow: visible; }
.stepper-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px 4px; }
.stepper-head strong { display: block; font-size: 17px; color: var(--brand-ink); margin-top: 3px; letter-spacing: -.3px; }
.stepper-progress { width: min(320px, 45%); height: 8px; border: 0; border-radius: 10px; overflow: hidden; appearance: none; background: #edf1f0; }
.stepper-progress::-webkit-progress-bar { background: #edf1f0; border-radius: 10px; }
.stepper-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--brand-orange), var(--brand-green)); border-radius: 10px; }
.stepper-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--brand-orange), var(--brand-green)); border-radius: 10px; }
.stepper { display: flex; gap: 10px; padding: 14px 18px 18px; overflow-x: auto; scrollbar-width: thin; }
.phase { flex: var(--n, 2) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.phase.ph-0, .phase.ph-1, .phase.ph-3, .phase.ph-5 { --n: 2; }
.phase.ph-2, .phase.ph-4 { --n: 3; }
.phase-name { font-size: 10px; font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase; color: #97a5a1; padding-bottom: 8px; border-bottom: 3px solid #e9eeed; }
.phase-steps { display: flex; gap: 4px; }
.phase .step { min-width: 0; flex: 1; font-size: 10.5px; line-height: 1.3; color: #93a19d; gap: 6px; }
.phase .step span { width: 26px; height: 26px; font-size: 11px; font-weight: 650; background: #f0f3f2; color: #8a9894; transition: background .2s; }
.phase.phase-done .phase-name, .phase.phase-current .phase-name { color: var(--pc); border-bottom-color: var(--pc); }
.phase.phase-current .phase-name { border-image: linear-gradient(90deg, var(--pc) 0 50%, #e9eeed 50% 100%) 1; }
.phase .step.done { color: #5f6f6b; }
.phase .step.done span { background: var(--pcbg); color: var(--pc); }
.phase .step.current { color: var(--brand-ink); font-weight: 720; }
.phase .step.current span { background: var(--pc); color: #fff; box-shadow: 0 0 0 4px var(--pcbg); }
.phase.ph-0 { --pc: var(--ph0); --pcbg: var(--ph0-bg); }
.phase.ph-1 { --pc: var(--ph1); --pcbg: var(--ph1-bg); }
.phase.ph-2 { --pc: var(--ph2); --pcbg: var(--ph2-bg); }
.phase.ph-3 { --pc: var(--ph3); --pcbg: var(--ph3-bg); }
.phase.ph-4 { --pc: var(--ph4); --pcbg: var(--ph4-bg); }
.phase.ph-5 { --pc: var(--ph5); --pcbg: var(--ph5-bg); }

/* ---------- Formulários ---------- */
.field > span { color: #4f625e; font-size: 12px; }
.field input, .field select, .field textarea, .select { border-color: #dbe3e1; border-radius: 10px; font-size: 13px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c5d1ce; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand-orange); outline: 0; box-shadow: var(--focus); }
.check-label input, .condition-options input { accent-color: var(--brand-orange); }
.condition-options label { border-radius: 20px; padding: 5px 11px; font-size: 11px; }
.condition-options label:has(input:checked) { border-color: #ffc29a; background: var(--brand-orange-50); color: var(--brand-orange-700); }

/* ---------- Tabelas ---------- */
th { background: #f7f9f8; color: #6f7f7b; font-weight: 650; font-size: 10.5px; letter-spacing: .7px; }
td { border-bottom-color: #eef2f1; font-size: 13px; }
td strong { font-size: 13px; color: var(--brand-ink); }
td small { font-size: 11px; }
.row-link { transition: background .12s; }
.row-link:hover { background: #fffaf6; }
.cell-link:hover strong { color: var(--brand-orange-700); }
.table-footer { font-size: 11px; background: #fbfcfc; }
.align-right strong { font-variant-numeric: tabular-nums; }

/* ---------- Avisos, histórico, diálogos ---------- */
.note { border-radius: 12px; border-color: #ffd9bd; background: var(--brand-orange-50); color: #8a4a17; font-size: 12px; }
.note.info { border-color: #d7e6e2; background: #f3f8f7; color: #4d6662; }
.event { font-size: 12px; }
.event:before { background: var(--brand-orange); box-shadow: 0 0 0 1px #ffc29a; }
.event p { color: #3f514d; }
.event small { font-size: 10.5px; }
.share-box { background: #f3f7f6; color: #4d6662; border-radius: 10px; }
dialog { border-radius: 18px; box-shadow: 0 30px 90px #01191740; }
dialog::backdrop { background: #01191773; }
.modal-footer { background: #f7f9f8; }
#toast { background: var(--brand-ink); border-radius: 12px; box-shadow: 0 10px 30px #01191740; }
#toast.error { background: #9b2633; }
.empty strong { color: var(--brand-ink); }
.empty svg { color: var(--brand-orange); opacity: .7; }
.totals .grand { color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.back:hover { color: var(--brand-orange-700); }
.summary-grid dd { font-size: 13px; color: var(--brand-ink); }
.summary-grid dt { font-size: 11px; }

/* ---------- Tela de entrada ---------- */
.login-visual { background: var(--brand-ink); background-image: radial-gradient(70% 55% at 100% 100%, #01905440 0%, transparent 70%), radial-gradient(60% 45% at 0% 0%, #fb630024 0%, transparent 70%); }
.login-visual:after { border-color: #fb630014; }
.login-visual .brand { background: transparent; padding: 0; border-radius: 0; width: min(360px, 100%); }
.login-visual .brand-logo { max-width: 360px; }
.login-copy .eyebrow { color: #ff9a57; }
.login-copy h1 { color: #fff; font-weight: 780; }
.login-copy h1 em { color: var(--brand-orange); }
.login-copy p { color: #a9bcb8; }
.login-pills span { border-color: #ffffff1f; color: #d3dfdc; background: #ffffff08; }
.login-pills span:before { content: "✓"; color: var(--brand-green); margin-right: 6px; font-weight: 800; }
.login-footer { color: #6f8a85; }
.login-form-wrap { background: #fff; }
.login-form h2 { color: var(--brand-ink); }

/* ---------- Página do cliente e impressão ---------- */
.tracking-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--brand-orange), var(--brand-green)); }
.tracking-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--brand-orange), var(--brand-green)); }
.tracking-connection.connected { color: var(--brand-green-700); background: var(--brand-green-50); }
.print-head { border-bottom-color: var(--brand-orange); }

/* ---------- Telas menores ---------- */
@media (max-width: 1200px) {
  .phase .step { font-size: 9.5px; }
}
@media (max-width: 1000px) {
  .detail-grid, .grid-2, .grid-equal { grid-template-columns: minmax(0, 1fr); }
  .detail-grid > *, .grid-2 > *, .grid-equal > * { min-width: 0; }
  .stepper { gap: 14px; }
  .phase { flex: none; }
  .phase .step { width: 72px; flex: none; }
}
@media (max-width: 720px) {
  .sidebar { box-shadow: none; }
  .shell.nav-open .sidebar { box-shadow: 20px 0 60px #01191755; }
  .topbar { height: 60px; }
  .stepper-head { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 16px 2px; }
  .stepper-progress { width: 100%; }
  .panel-head { flex-wrap: wrap; }
  .panel-head > .actions, .panel-head > div:last-child:not(:first-child) { flex-wrap: wrap; }
  .summary-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stepper { padding: 12px 14px 16px; }
  /* Lista de OS vira cartões no celular */
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody { display: block; }
  .orders-table tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who arrow" "eq eq" "when value" "stage stage"; gap: 6px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
  .orders-table tr:last-child { border-bottom: 0; }
  .orders-table td { display: block; padding: 0; border: 0; font-size: 12px; }
  .orders-table td:nth-child(1) { grid-area: who; }
  .orders-table td:nth-child(2) { grid-area: eq; color: #4f625e; }
  .orders-table td:nth-child(2) small { display: inline; margin-left: 4px; }
  .orders-table td:nth-child(3) { grid-area: when; color: var(--muted); align-self: center; }
  .orders-table td:nth-child(4) { grid-area: stage; }
  .orders-table td:nth-child(5) { grid-area: value; text-align: right; align-self: center; }
  .orders-table td:nth-child(6) { grid-area: arrow; align-self: start; justify-self: end; margin: -6px -6px 0 0; }
  .orders-table td:nth-child(6) .icon-button { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}