: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{
    width:52px;height:52px;
  }
  header.topbar .brand .mark svg, header.topbar .brand .mark img{ display:block; width:100%; height:100%; }
  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:left; 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; }
  .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}