:root{
    --bg:#eef1f6;
    --surface:#ffffff;
    --surface-2:#e3e9f1;
    --ink:#1a2433;
    --ink-soft:#55606f;
    --primaria:#1f3a5f;
    --primaria-escura:#14283f;
    --destaque:#1a5c4d;
    --destaque-claro:#e1f0ec;
    --alerta:#b23a3a;
    --alerta-claro:#f7e2e2;
    --line:#c8d1dc;
    --cabecalho-texto:#f5f7fa;
    --cabecalho-texto-suave:rgba(255,255,255,0.74);
    --hover:color-mix(in srgb, var(--surface-2) 65%, var(--line));
    --ocupacao-media:color-mix(in srgb, var(--primaria) 30%, var(--surface));
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--fonte-texto,'IBM Plex Sans'), sans-serif;
    min-height:100vh;
  }
  h1,h2,h3,.display{
    font-family:var(--fonte-titulo,'Fraunces'), serif;
    font-weight:600;
    color:var(--primaria-escura);
    margin:0;
  }
  .linha-tracejada{
    background-image: repeating-linear-gradient(90deg, var(--primaria) 0 8px, transparent 8px 16px);
    height:2px;
    opacity:0.55;
  }
  .caixa-tracejada{
    border:1.5px dashed var(--line);
    border-radius: var(--radius);
  }

  header.topbar{
    position:relative;
    background-color:var(--primaria-escura);
    background-repeat:repeat-x;
    background-position:left center;
    background-size:auto 100%;
    color:var(--cabecalho-texto);
    padding:19px 20px 21px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  header.topbar .brand{
    display:flex; align-items:center; gap:10px;
  }
  header.topbar .brand .mark{
    height:52px; min-width:52px; max-width:150px;
  }
  header.topbar .brand .mark svg{ display:block; width:52px; height:52px; }
  header.topbar .brand .mark{ display:flex; align-items:center; }
  header.topbar .brand .mark img{ display:block; height:52px; width:auto; max-width:150px; object-fit:contain; }
  /* logo sobre o topo escuro (ver comum/logo-contraste.js) */
  header.topbar .brand .mark.logo-selo img{ background:#fff; border-radius:10px; padding:4px 8px; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.18); }
  header.topbar .brand .mark.logo-branco img{ filter:brightness(0) invert(1); }
  /* a logo nunca encolhe por baixo do nome (logo larga não invade o texto); no celular ela fica um pouco menor e o nome quebra linha */
  header.topbar .brand{ min-width:0; }
  header.topbar .brand .mark{ flex:0 0 auto; }
  header.topbar .brand .mark:not(:has(img, svg)){ display:none; }   /* sem logo (tela de acesso): não reserva espaço vazio */
  header.topbar .brand h1{ min-width:0; overflow-wrap:anywhere; }
  @media (max-width:480px){ header.topbar .brand .mark{ height:44px; } header.topbar .brand .mark img{ height:44px; max-width:118px; } }
  header.topbar h1{
    color:var(--cabecalho-texto); font-size:19px; letter-spacing:0.02em;
    display:inline-block; padding-bottom:3px;
    border-bottom:1px solid rgba(255,255,255,0.35);
  }
  header.topbar .clock{font-size:12.5px; color:var(--cabecalho-texto-suave); font-variant-numeric: tabular-nums;}

  nav.tabs{
    display:flex; gap:2px; background:var(--surface-2);
    padding:6px; overflow-x:auto;
    border-bottom:1px solid var(--line);
  }
  nav.tabs button{
    border:none; background:transparent; padding:10px 16px;
    font-family:var(--fonte-texto,'IBM Plex Sans'), sans-serif; font-weight:600; font-size:13.5px;
    color:var(--ink-soft); cursor:pointer; border-radius:8px; white-space:nowrap;
  }
  nav.tabs button.active{ background:var(--primaria); color:#fff; }
  nav.tabs button:hover:not(.active){ background:var(--hover); }

  main{ max-width:980px; margin:0 auto; padding:20px 16px 60px; }

  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px; margin-bottom:16px;
  }
  .section-title{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
  .section-title h2{ font-size:20px; }
  .section-title .linha-tracejada{ flex:1; }

  .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
  .stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
  .stat .num{
    font-family:var(--fonte-titulo,'Fraunces'),serif; font-size:clamp(20px,4.8vw,26px); font-weight:600;
    color:var(--primaria-escura); line-height:1.15; min-width:0;
    white-space:normal; overflow-wrap:anywhere; word-break:break-word;
    font-variant-numeric:tabular-nums;
  }
  .stat .lab{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px;}
  .stat.pend .num{ color:var(--alerta); }
  .stat.ok .num{ color:var(--destaque); }

  table{ width:100%; border-collapse:collapse; font-size:13.5px; display:block; overflow-x:auto; max-width:100%; }
  th{ text-align:start; padding:8px 8px; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); border-bottom:2px solid var(--primaria); }
  td{ padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
  tr:hover td{ background:var(--surface-2); }

  .badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
  .badge.pendente{ background:var(--alerta-claro); color:var(--alerta); }
  .badge.entregue{ background:var(--destaque-claro); color:var(--destaque); }
  .badge.orcamento{ background:#eee3c8; color:#8a6d1f; }
  .badge.cancelada{ background:var(--surface-2); color:var(--ink-soft); text-decoration:line-through; }

  button.btn{
    font-family:var(--fonte-texto,'IBM Plex Sans'),sans-serif; font-weight:600; font-size:13px;
    border:none; border-radius:8px; padding:9px 16px; cursor:pointer;
  }
  button.btn.primary{ background:var(--primaria); color:#fff; }
  button.btn.primary:hover{ background:var(--primaria-escura); }
  button.btn.ghost{ background:transparent; border:1.5px solid var(--primaria); color:var(--primaria); }
  button.btn.small{ padding:5px 10px; font-size:12px; }
  button.btn:disabled{ opacity:0.5; cursor:not-allowed; }

  input, select, textarea{
    font-family:var(--fonte-texto,'IBM Plex Sans'),sans-serif; font-size:14px;
    padding:9px 10px; border:1.5px solid var(--line); border-radius:8px;
    background:#fff; color:var(--ink); width:100%;
  }
  input:focus, select:focus, textarea:focus{ outline:2px solid var(--destaque); outline-offset:1px; border-color:var(--destaque); }
  label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:4px; }
  .field{ margin-bottom:12px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .row3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; }

  .search-box{ margin-bottom:14px; }

  .client-item{ padding:10px 8px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .client-item:hover{ background:var(--surface-2); }
  .client-item .name{ font-weight:600; }
  .client-item .sub{ font-size:12px; color:var(--ink-soft); }

  .pay-item{ padding:10px 8px; border-bottom:1px solid var(--line); }
  .pay-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .pay-cliente{ font-weight:600; word-break:break-word; }
  .pay-valor{ font-weight:700; color:var(--destaque); white-space:nowrap; }
  .pay-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; word-break:break-word; }

  .profile-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
  .profile-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; font-size:13.5px; margin-bottom:16px; }
  .profile-fields div span.k{ color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; display:block; }

  .cart-item{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px; gap:8px; flex-wrap:wrap; }
  .qty-stepper{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
  .qty-btn{
    width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2);
    color:var(--ink); font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center;
    justify-content:center; padding:0; line-height:1;
  }
  .qty-btn:active{ background:var(--line); }
  .qty-stepper b{ min-width:16px; text-align:center; }
  .cart-total{ display:flex; justify-content:space-between; padding-top:10px; font-family:var(--fonte-titulo,'Fraunces'),serif; font-size:19px; font-weight:600; }

  .toggle-group{ display:flex; gap:8px; }
  .toggle-group button{ flex:1; padding:9px; border-radius:8px; border:1.5px solid var(--line); background:#fff; font-weight:600; cursor:pointer; font-size:13px; }
  .toggle-group button.sel{ background:var(--primaria); border-color:var(--primaria); color:#fff; }

  .empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); }
  .empty .caixa-tracejada{ padding:24px; }

  .toast{
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    background:var(--primaria-escura); color:#fff; padding:12px 20px; border-radius:8px;
    font-size:13.5px; z-index:2000; box-shadow:0 4px 14px rgba(0,0,0,0.25);
    opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }
  .toast.err{ background:var(--alerta); }

  .loading{ text-align:center; padding:30px; color:var(--ink-soft); font-style:italic; }

  .config-banner{ background:var(--alerta-claro); border:1px solid var(--alerta); color:var(--alerta); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; font-size:13.5px; }

  @media (max-width:640px){
    .row2, .row3{ grid-template-columns:1fr; }
    .profile-fields{ grid-template-columns:1fr; }
    header.topbar h1{ font-size:16px; }
    nav.tabs button{ padding:9px 12px; font-size:12.5px; }
  }

  .modal-overlay{
    position:fixed; inset:0; background:rgba(15,18,24,0.55);
    display:flex; align-items:center; justify-content:center; z-index:1000;
    padding:14px;
  }
  .modal-overlay.hidden{ display:none; }
  /* Classe genérica de esconder, pra qualquer elemento que não seja um
     modal (ex: caixinha de token do Gerador de Imagens) - o
     .modal-overlay.hidden acima só cobre elementos que também têm a
     classe modal-overlay. */
  .hidden{ display:none; }
  .modal-box{
    background:var(--surface); border-radius:14px; max-width:520px; width:100%;
    max-height:92vh; overflow:auto; padding:20px; position:relative;
  }
  .modal-close{
    position:absolute; top:12px; right:14px; background:none; border:none;
    font-size:20px; cursor:pointer; color:var(--ink-soft);
  }

  .cal-modal-box{
    max-width:720px; width:96vw; padding:14px 10px 16px; max-height:94vh;
  }
  .cal-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .cal-topbar h3{ font-size:16px; margin:0; }
  .cal-topbar .modal-close{ position:static; font-size:18px; line-height:1; padding:2px 4px; }
  .cal-nav{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
  .cal-nav .btn{ flex:0 0 auto; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; width:100%; }
  .cal-dow{ text-align:center; font-size:9.5px; color:var(--ink-soft); font-weight:600; padding:3px 0; }
  .cal-day{
    min-height:40px; border-radius:6px; display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start; font-size:11px; cursor:pointer;
    border:1px solid var(--line); position:relative; padding:2px 2px 3px; min-width:0; overflow:hidden;
  }
  .cal-day.empty{ visibility:hidden; }
  .cal-day .n{ font-weight:700; text-align:center; font-size:11px; line-height:1.2; }
  .cal-day.livre{ background:var(--surface-2); color:var(--ink); }
  .cal-day.medio{ background:var(--ocupacao-media); color:var(--primaria-escura); }
  .cal-day.cheio{ background:var(--primaria); color:#fff; }
  .cal-day.passado{ background:transparent; color:var(--ink-soft); opacity:0.4; cursor:default; }
  .cal-day.hoje{ box-shadow:0 0 0 2px var(--destaque) inset; }
  .cal-day.bloqueado{ background:repeating-linear-gradient(45deg, var(--alerta-claro), var(--alerta-claro) 4px, color-mix(in srgb, var(--alerta) 14%, var(--alerta-claro)) 4px, color-mix(in srgb, var(--alerta) 14%, var(--alerta-claro)) 8px); border-color:var(--alerta); }
  .cal-day.bloqueado::after{ content:"✕"; position:absolute; top:2px; right:3px; font-size:9px; color:var(--alerta); }
  .cal-day .os-mini{ margin-top:1px; overflow:hidden; }
  .cal-day .os-mini-item{
    font-size:6.5px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding:0.5px 2px; margin-top:1px; border-radius:2px; background:rgba(255,255,255,0.55); color:var(--primaria-escura);
    font-weight:600;
  }
  .cal-day.cheio .os-mini-item{ background:rgba(255,255,255,0.25); color:#fff; }
  .cal-day .os-mini-mais{ font-size:6.5px; text-align:center; color:inherit; opacity:0.8; }
  .cal-legend{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:12px; font-size:10.5px; }
  .cal-legend span{ display:flex; align-items:center; gap:5px; }
  .cal-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; flex:0 0 auto; }

  .day-os-item{ padding:9px 11px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; cursor:pointer; background:var(--surface-2); font-size:13px; }
  .day-os-item:hover{ background:var(--hover); }
  .day-os-item b{ display:block; }
  .day-os-item small{ color:var(--ink-soft); }
  .slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; margin-top:8px; }
  .slot-btn{
    padding:8px 4px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2);
    font-size:12px; cursor:pointer; text-align:center; font-family:inherit; color:var(--ink);
  }
  .slot-btn:hover{ background:var(--hover); border-color:var(--destaque); }
  .slot-btn.ocupado{ background:var(--alerta-claro); border-color:var(--alerta); color:var(--primaria-escura); cursor:pointer; font-size:10px; line-height:1.25; padding:6px 4px; font-family:inherit; }
  .slot-btn.passado{ background:transparent; border-color:var(--line); color:var(--ink-soft); opacity:0.5; cursor:default; font-size:10px; line-height:1.25; padding:6px 4px; }
  .slot-btn.sel{ background:var(--alerta-claro); border-color:var(--alerta); font-weight:700; }
  .slot-btn.bloqueado-h{ background:repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--line) 6px, var(--line) 8px); border-color:var(--ink-soft); color:var(--ink-soft); font-size:10px; line-height:1.25; padding:6px 4px; font-family:inherit; }
  div.slot-btn.bloqueado-h{ cursor:default; }
  .bloq-barra{ border:1px solid var(--alerta); background:var(--alerta-claro); border-radius:10px; padding:10px 12px; margin-top:8px; font-size:13px; }
  .bloq-barra input{ width:100%; margin-top:6px; }
  /* País, moeda e fuso (aba Empresa) */
  .row3-regiao{ display:grid; grid-template-columns:1fr 1.4fr 1.2fr; gap:8px 10px; margin-top:4px; }
  .row3-regiao select{ width:100%; }
  @media (max-width:640px){ .row3-regiao{ grid-template-columns:1fr; } }
  /* Gráfico de movimento (grafico.js) */
  .gm-off{ display:flex; align-items:center; gap:10px; padding:8px 12px; margin:0 0 16px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink-soft); font-size:13.5px; }
  .gm-off-ico{ display:inline-flex; color:var(--primaria); }
  .gm-off-txt{ flex:1; min-width:0; font-weight:600; }
  .gm-chave{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); min-height:36px; user-select:none; flex:0 0 auto; }
  .gm-chave input{ position:absolute; opacity:0; width:1px; height:1px; }
  .gm-trilho{ position:relative; width:38px; height:22px; border-radius:11px; background:var(--line); transition:background .2s; flex:0 0 auto; }
  .gm-trilho::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s; }
  .gm-chave input:checked + .gm-trilho{ background:var(--destaque); }
  .gm-chave input:checked + .gm-trilho::after{ transform:translateX(16px); }
  .gm-chave input:focus-visible + .gm-trilho{ outline:2px solid var(--primaria); outline-offset:2px; }
  .gm-card{ padding:16px 16px 12px; }
  .gm-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .gm-titulo{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; min-width:0; }
  .gm-titulo h2{ font-size:18px; margin:0; }
  .gm-vivo{ font-size:11.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; }
  .gm-vivo i{ width:7px; height:7px; border-radius:50%; background:var(--destaque); display:inline-block; }
  .gm-vivo.on i{ animation:gmPisca 2s ease-in-out infinite; }
  @keyframes gmPisca{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  .gm-controles{ display:flex; flex-wrap:wrap; gap:8px 12px; margin:10px 0 6px; }
  .gm-seg{ display:inline-flex; flex-wrap:wrap; background:var(--surface-2); border-radius:9px; padding:3px; gap:2px; }
  .gm-seg button{ border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:7px; cursor:pointer; min-height:30px; white-space:nowrap; }
  .gm-seg button[aria-pressed="true"]{ background:var(--surface); color:var(--primaria-escura); box-shadow:0 1px 2px rgba(0,0,0,.12); }
  .gm-seg button:focus-visible{ outline:2px solid var(--primaria); outline-offset:1px; }
  .gm-resumo{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; margin:6px 0 2px; }
  .gm-valor{ font-family:var(--fonte-titulo,'Fraunces'),serif; font-size:clamp(22px,5.4vw,28px); font-weight:600; color:var(--primaria-escura); font-variant-numeric:tabular-nums; line-height:1.15; }
  .gm-var{ font-size:13.5px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .gm-var.sobe{ color:var(--destaque); } .gm-var.desce{ color:var(--alerta); }
  .gm-var span{ font-weight:500; color:var(--ink-soft); font-size:12px; }
  .gm-ult{ font-size:12.5px; color:var(--ink-soft); flex-basis:100%; }
  .gm-ult b{ color:var(--ink); font-variant-numeric:tabular-nums; }
  .gm-area{ position:relative; width:100%; margin-top:4px; }
  .gm-svg{ display:block; max-width:100%; touch-action:pan-y; cursor:crosshair; border-radius:6px; }
  .gm-svg:focus-visible{ outline:2px solid var(--primaria); outline-offset:2px; }
  .gm-grade{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; opacity:.9; }
  .gm-grade.base{ stroke-dasharray:none; }
  .gm-eixo{ font-size:10.5px; fill:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .gm-linha{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
  .gm-ant{ fill:none; stroke:var(--ink-soft); stroke-width:1.4; stroke-dasharray:4 4; opacity:.6; }
  .gm-mira{ stroke:var(--ink-soft); stroke-width:1; stroke-dasharray:3 3; }
  .gm-mira-ponto{ stroke:var(--surface); stroke-width:2; }
  .gm-ponta{ stroke:var(--surface); stroke-width:1.5; }
  .gm-pulso{ transform-box:fill-box; transform-origin:center; animation:gmPulso 1.8s ease-out infinite; }
  @keyframes gmPulso{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(3.4); opacity:0; } }
  .gm-etiqueta-t{ font-size:10.5px; font-weight:700; fill:#fff; font-variant-numeric:tabular-nums; }
  .gm-dica{ position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.14); padding:6px 9px; font-size:12px; white-space:nowrap; z-index:2; }
  .gm-dica-q{ color:var(--ink-soft); font-size:11px; }
  .gm-dica-v{ font-weight:700; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .gm-dica-a{ color:var(--ink-soft); font-size:11.5px; font-variant-numeric:tabular-nums; }
  .gm-dica-a .sobe{ color:var(--destaque); } .gm-dica-a .desce{ color:var(--alerta); }
  .gm-legenda{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:12px; color:var(--ink-soft); }
  .gm-leg-item{ display:inline-flex; align-items:center; gap:6px; }
  .gm-leg-linha{ width:16px; height:2px; border-radius:1px; display:inline-block; }
  .gm-leg-ant{ width:16px; height:0; border-top:1.5px dashed var(--ink-soft); display:inline-block; opacity:.75; }
  .gm-barra{ opacity:.16; }
  .gm-leg-barra{ width:8px; height:10px; border-radius:1px; display:inline-block; background:var(--ink-soft); opacity:.35; }
  .gm-leg-comparar{ cursor:pointer; min-height:30px; }
  .gm-leg-comparar input{ width:auto; margin:0; min-height:0; }
  @media (prefers-reduced-motion: reduce){ .gm-pulso, .gm-vivo.on i{ animation:none; } .gm-pulso{ display:none; } .gm-trilho, .gm-trilho::after{ transition:none; } }
  /* Relatórios */
  .rel-abas{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
  .rel-h{ font-size:15px; margin:14px 0 6px; color:var(--primaria-escura); }
  .rel-h:first-child{ margin-top:0; }
  #relConteudo{ overflow-x:auto; }
  .rel-tab{ width:100%; border-collapse:collapse; font-size:13px; }
  .rel-tab th{ text-align:start; font-size:11.5px; color:var(--ink-soft); font-weight:700; padding:6px; border-bottom:2px solid var(--line); white-space:nowrap; }
  .rel-tab td{ padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
  .rel-tab .num{ text-align:end; white-space:nowrap; }
  .rel-tab input[type=number]{ min-height:36px; padding:4px 6px; text-align:end; }
  .rel-sobe{ color:var(--destaque); font-weight:700; white-space:nowrap; }
  .rel-desce{ color:var(--alerta); font-weight:700; white-space:nowrap; }
  .rel-barra{ display:block; height:5px; background:var(--surface-2); border-radius:3px; margin-top:4px; overflow:hidden; min-width:60px; }
  .rel-barra > span{ display:block; height:100%; background:var(--destaque); border-radius:3px; }
  .rel-barra.larga{ height:12px; flex:1; margin:0; }
  .rel-linha-barra{ display:flex; align-items:center; gap:8px; font-size:13px; margin:5px 0; }
  .rel-linha-barra .rot{ flex:0 0 92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rel-linha-barra .val{ flex:0 0 auto; min-width:110px; text-align:end; white-space:nowrap; }
  .rel-link{ background:none; border:0; padding:0; color:var(--primaria); font:inherit; text-decoration:underline; cursor:pointer; text-align:start; }
  @media (max-width:560px){ .rel-linha-barra .rot{ flex-basis:70px; } .rel-linha-barra .val{ min-width:0; font-size:12px; } .rel-tab{ font-size:12.5px; } }
  .lista-atraso{ display:grid; gap:6px; margin-top:6px; }
  .item-atraso{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:start; padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.55); color:inherit; font:inherit; font-size:13px; cursor:pointer; }
  .item-atraso span{ font-size:12px; opacity:.85; }
  .passo-inicial{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; text-align:start; padding:8px 10px; margin:4px 0; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:inherit; font-size:14px; cursor:pointer; }
  .passo-inicial .marca{ flex:0 0 24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-size:13px; font-weight:700; }
  .passo-inicial.feito{ color:var(--ink-soft); }
  .passo-inicial.feito span:last-child{ text-decoration:line-through; }
  .passo-inicial.feito .marca{ background:var(--destaque); border-color:var(--destaque); color:#fff; }
  .agenda-sec-title{ font-weight:700; font-size:13.5px; margin:16px 0 2px; font-family:var(--fonte-titulo,'Fraunces'),serif; }
  .agenda-item-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
  .agenda-item-row.passado{ opacity:0.5; }
  .warn-box{ background:var(--alerta-claro); border:1px solid var(--alerta); border-radius:10px; padding:14px 16px; color:var(--ink); font-size:13.5px; line-height:1.5; margin-bottom:14px; }

  .receipt-canvas{ width:100%; border:1px solid var(--line); border-radius:8px; }

  .os-detail{ font-size:12px; color:var(--ink-soft); background:var(--surface-2); border-radius:6px; padding:8px 10px; margin-top:6px; }
  .os-detail div{ display:flex; justify-content:space-between; padding:1px 0; }

  .alert-atraso{ background:var(--alerta-claro); border:1px solid var(--alerta); color:var(--alerta); border-radius:var(--radius); padding:12px 16px; margin-bottom:14px; }
  .alert-atraso h3{ color:var(--alerta); font-size:14px; margin-bottom:6px; }
  /* ===== Painel: números do topo, cartão de OS, resumos recolhíveis (estilos que faltavam no arquivo original) ===== */
  .muted{ color:var(--ink-soft); }
  .stat-bar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:16px; }
  .stat-bar .item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; min-width:0; }
  .stat-bar .num{
    font-family:var(--fonte-titulo,'Fraunces'),serif; font-size:clamp(20px,4.8vw,26px); font-weight:600;
    color:var(--primaria-escura); line-height:1.15; overflow-wrap:anywhere; font-variant-numeric:tabular-nums;
  }
  .stat-bar .lab{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }
  .stat-bar .item.pend .num{ color:var(--alerta); }
  .stat-bar .item.ok .num{ color:var(--destaque); }
  .btn-olho-valores:hover{ opacity:0.7; }

  .os-card{ border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--surface); }
  .os-card:hover{ background:var(--surface-2); }
  button.btn.btn-entregar{ display:block; width:100%; margin-top:10px; padding:11px 16px; font-size:14px; }
  .acoes-secundarias{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }

  .card.compacto{ padding:12px 16px; margin-bottom:10px; }
  .resumo-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
  .resumo-toggle h2{ font-size:16px; flex:1; min-width:0; }
  .resumo-toggle .seta{ color:var(--ink-soft); transition:transform 0.2s; }
  .chip{
    display:inline-block; background:var(--primaria); color:#fff; border-radius:20px; padding:2px 10px;
    font-size:12px; font-weight:700; white-space:nowrap;
  }
  .resumo-corpo{ display:none; }
  .resumo-corpo.aberto{ display:block; }

  .link-compacto{ position:relative; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); padding:6px 4px; }
#fim-App_Estilos{display:none}

/* Telas de toque (celular e tablet): áreas de toque confortáveis (por volta de 44 px, como recomendam Apple e Google)
   e letra de 16 px nos campos (abaixo disso o iPhone aproxima a tela sozinho ao tocar no campo). Computador com mouse não muda. */
@media (pointer:coarse){
  input, select, textarea{ font-size:16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select{ min-height:44px; }
  input[type=checkbox], input[type=radio]{ width:22px; height:22px; }
  button.btn{ min-height:44px; }
  button.btn.small{ min-height:38px; padding:8px 12px; font-size:13px; }
  header.topbar button.btn{ min-height:38px; }
  nav.tabs button{ min-height:42px; }
  .qty-btn{ width:36px; height:36px; }
  .slot-btn{ min-height:44px; }
  .toggle-group button{ min-height:44px; }
}
/* ---------- qualquer idioma, escrita e direção (comum/idioma.js) ----------
   O que é posicionado à mão ganha a versão espelhada para árabe/hebraico ([dir="rtl"]); no português nada disto vale. */
[dir="rtl"] .modal-close{ right:auto; left:14px; }
[dir="rtl"] .cal-day.bloqueado::after{ right:auto; left:3px; }
[dir="rtl"] .gm-trilho::after{ left:auto; right:3px; }
[dir="rtl"] .gm-chave input:checked + .gm-trilho::after{ transform:translateX(-16px); }
/* escritas com letras ligadas (árabe) não levam espaço entre letras; árabe/hebraico/japonês sem itálico e com linhas mais altas */
:lang(ar) *, :lang(ar) *::before, :lang(ar) *::after{ letter-spacing:0 !important; }
:lang(ar) body, :lang(he) body, :lang(ja) body{ line-height:1.6; }
:lang(ar) em, :lang(ar) i, :lang(he) em, :lang(he) i, :lang(ja) em, :lang(ja) i{ font-style:normal; }
:lang(ja){ line-break:strict; }
:lang(de) p, :lang(nl) p{ hyphens:auto; }

/* ===================== Página do instalador (técnico de campo) — instalador.html ===================== */
.pagina-instalador main{ max-width:560px; padding-top:12px; }
.inst-topo{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--primaria-escura); color:var(--cabecalho-texto); }
.inst-empresa{ font-family:"Fraunces", Georgia, serif; font-weight:700; font-size:18px; }
.inst-tecnico{ font-size:12.5px; color:var(--cabecalho-texto-suave); }
.inst-topo button.btn.inst-sair{ color:var(--cabecalho-texto); border-color:var(--cabecalho-texto-suave); background:transparent; }
.inst-sem-rede{ margin:10px 16px 0; padding:12px 14px; border-radius:var(--radius); background:var(--alerta-claro); color:var(--ink); font-size:13.5px; line-height:1.45; }
.inst-sem-rede.hidden{ display:none; }
.inst-sem-rede .inst-ligar-empresa{ display:block; width:100%; margin-top:10px; text-align:center; }
.inst-card{ margin-bottom:10px; }
.inst-linhas{ font-size:13px; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
.inst-itens{ font-size:12.5px; margin-top:4px; }
.inst-aviso{ font-size:12.5px; margin:0 0 8px; }
.inst-modal{ max-width:420px; }
.inst-sub{ font-size:13px; margin:2px 0 12px; }
.inst-valores{ margin-bottom:12px; font-size:13.5px; }
.inst-pergunta{ font-weight:700; margin-bottom:6px; }
.inst-formas{ display:flex; gap:8px; margin-bottom:12px; }
.inst-formas .btn{ flex:1; padding:12px 8px; }
.inst-confirmar{ display:block; width:100%; margin-top:8px; text-align:center; }
.inst-erro{ color:var(--alerta); font-size:13px; min-height:16px; }
.inst-ok{ font-size:52px; line-height:1; text-align:center; }
.inst-centro{ text-align:center; }/* links com cara de botão (rota, ligar, WhatsApp): o mesmo visual dos botões do Painel */
.pagina-instalador a.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:10px 16px; border-radius:var(--radius); font-weight:600; font-size:14px; text-decoration:none; background:transparent; border:1.5px solid var(--primaria); color:var(--primaria); }
.pagina-instalador a.btn.primary{ background:var(--primaria); color:#fff; }
.pagina-instalador a.btn.primary:hover{ background:var(--primaria-escura); }
.pagina-instalador a.btn.small{ min-height:38px; padding:8px 12px; font-size:13px; }
.pagina-instalador a.btn.inst-confirmar{ display:flex; width:100%; }/* faixa "dados preenchidos pelo pedido no link" no Novo cliente */
.prefill-link{ margin:0 0 12px; padding:12px 14px; border-radius:var(--radius); background:#e3efff; border:1.5px solid #8fb8f0; color:var(--primaria-escura); font-weight:600; font-size:14px; }