/* ---- index.html linhas 18–1152 ---- */
  :root{
    --bg: #15181c;
    --bg-soft: #1c2126;
    --panel: #20262c;
    --panel-2: #262d34;
    --border: #343c45;
    --text: #e8ebee;
    --text-dim: #9aa5b1;
    --text-faint: #6b7682;
    --accent: #2da0e0;
    --accent-dim: #1f7cb3;
    --accent-bg: rgba(45,160,224,0.12);
    --green: #4ade80;
    --green-bg: rgba(74,222,128,0.12);
    --red: #f87171;
    --red-bg: rgba(248,113,113,0.12);
    --blue: #60a5fa;
    --blue-bg: rgba(96,165,250,0.12);
    --yellow: #fbbf24;
    --yellow-bg: rgba(251,191,36,0.12);
    --purple: #a78bfa;
    --purple-bg: rgba(167,139,250,0.12);
    --radius: 10px;
    --mono: 'JetBrains Mono', 'Roboto Mono', monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tint: 255,255,255;          /* base dos sombreamentos sutis (branco no escuro, preto no claro) */
    --sombra: rgba(0,0,0,0.35);
    color-scheme: dark;
  }

  /* ===== Tema claro ===== */
  html[data-tema="claro"]{
    --bg: #f2f4f7;
    --bg-soft: #ffffff;
    --panel: #ffffff;
    --panel-2: #f4f6f9;
    --border: #dce2e9;
    --text: #1b2430;
    --text-dim: #4d5967;
    --text-faint: #7b8693;
    --accent: #1f8fd0;
    --accent-dim: #1878b0;
    --accent-bg: rgba(31,143,208,0.12);
    --green: #15803d;
    --green-bg: rgba(22,163,74,0.12);
    --red: #dc2626;
    --red-bg: rgba(220,38,38,0.10);
    --blue: #2563eb;
    --blue-bg: rgba(37,99,235,0.10);
    --yellow: #b45309;
    --yellow-bg: rgba(217,119,6,0.14);
    --purple: #7c3aed;
    --purple-bg: rgba(124,58,237,0.10);
    --tint: 0,0,0;
    --sombra: rgba(15,23,42,0.12);
    color-scheme: light;
  }
  html[data-tema="claro"] .btn-primary{ color:#fff; }
  html[data-tema="claro"] .kanban-col-title{ filter: brightness(.78) saturate(1.2); }
  html[data-tema="claro"] .kanban-card:hover,
  html[data-tema="claro"] .modal{ box-shadow: 0 8px 28px var(--sombra); }

  *{ box-sizing: border-box; margin:0; padding:0; }

  body{
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
  }

  /* ===== Layout ===== */
  .app{
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 100vh;
  }

  .sidebar{
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding: 6px 10px 22px;
  }
  /* Logo da empresa: aparece direto, sem moldura. Só ganha um fundo quando é transparente
     e o desenho sumiria no fundo do tema (ex.: logo preto sem fundo no tema escuro). */
  .brand-logo-box{ max-width:170px; border-radius:10px; line-height:0; }
  .logo-fundo-claro{ background:#fff; padding:8px 12px; box-shadow:0 0 0 1px var(--border); }
  .logo-fundo-escuro{ background:#1b2430; padding:8px 12px; box-shadow:0 0 0 1px var(--border); }
  .brand-logo{
    max-width: 100%;
    max-height: 60px;
    width:auto; height:auto;
    display:block; object-fit:contain; border-radius:8px;
  }
  .logo-fundo-claro .brand-logo, .logo-fundo-escuro .brand-logo{ border-radius:0; max-height:48px; }
  .brand-iniciais{
    width:44px; height:44px; border-radius:11px;
    background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:17px; letter-spacing:.5px;
  }
  .brand-text strong{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.3; }
  .brand-text strong{ font-size:15px; letter-spacing:0.3px; }
  .brand-text span{ font-size:11px; color:var(--text-faint); font-family:var(--mono); }

  .nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor:pointer;
    color: var(--text-dim);
    font-size: 13.5px;
    font-weight: 500;
    transition: background .12s, color .12s;
    border:none;
    background:none;
    width:100%;
    text-align:left;
    font-family:var(--sans);
  }
  .nav-item:hover{ background: var(--panel); color: var(--text); }
  .nav-item.active{
    background: var(--accent-bg);
    color: var(--accent);
  }
  .nav-icon{ width:18px; text-align:center; flex-shrink:0; font-size:15px; }

  .nav-divider{
    height:1px;
    background: var(--border);
    margin: 12px 4px;
  }

  .sidebar-footer{
    margin-top:auto;
    padding: 12px 10px;
    font-size: 11px;
    color: var(--text-faint);
    border-top: 1px solid var(--border);
    line-height:1.6;
  }

  .main{
    padding: 28px 36px 60px;
    max-width: 1200px;
    width:100%;
    min-width:0;
  }

  .page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom: 24px;
    flex-wrap:wrap;
    gap:12px;
  }
  .page-header h1{
    font-size: 22px;
    font-weight: 600;
    letter-spacing:-0.01em;
  }
  .page-header p{
    color: var(--text-dim);
    font-size: 13px;
    margin-top:4px;
  }

  .page{ display:none; }
  .page.active{ display:block; animation: fadein .25s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

  .cl-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 5px 8px;
    border-radius: 6px;
    font-size:13px;
    color: var(--text-dim);
    background: var(--panel-2);
    gap: 8px;
  }
  .cl-item span{ flex:1; }
  .cl-opts{
    display:flex;
    gap:14px;
    flex-shrink:0;
  }
  .cl-opts label{
    display:flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    font-weight:400;
    font-size:13px;
    color: var(--text);
  }
  .cl-opts input[type="radio"]{
    accent-color: var(--accent);
    width:14px;
    height:14px;
    cursor:pointer;
  }

  /* ===== Autocomplete ===== */
  .ac-wrap{
    position: relative;
    width: 100%;
  }
  .ac-input{
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--sans);
    outline: none;
    transition: border-color .15s;
  }
  .ac-input:focus{ border-color: var(--accent); }
  .ac-dropdown{
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  }
  .ac-dropdown.open{ display: block; }
  .ac-group{
    padding: 6px 10px 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .ac-item{
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .1s, color .1s;
  }
  .ac-item:hover, .ac-item.ac-active{
    background: var(--accent-bg);
    color: var(--accent);
  }
  .ac-item-outro{
    border-top: 1px solid var(--border);
    margin-top: 4px;
    color: var(--text-faint);
    font-style: italic;
  }

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor:pointer;
    transition: border-color .12s, background .12s;
    font-family: var(--sans);
    white-space:nowrap;
  }
  .btn:hover{ border-color: var(--text-faint); }
  .btn-primary{
    background: var(--accent);
    border-color: var(--accent);
    color: #07263d;
    font-weight:600;
  }
  .btn-primary:hover{ background: var(--accent); border-color: var(--accent); filter: brightness(1.1); }
  .btn-danger{
    color: var(--red);
    border-color: rgba(248,113,113,0.3);
  }
  .btn-danger:hover{ background: var(--red-bg); border-color:var(--red); }
  .btn-ghost{
    background:transparent;
    border-color:transparent;
    color: var(--text-dim);
    padding: 6px 10px;
  }
  .btn-ghost:hover{ background: var(--panel); color:var(--text); }
  .btn-sm{ padding: 6px 11px; font-size:12px; }
  .btn:disabled{ opacity:.4; cursor:not-allowed; }

  /* ===== Cards / Panels ===== */
  .card{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
  }

  .stats-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
    gap:14px;
    margin-bottom: 24px;
  }
  .stat-card{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
  }
  .stat-card .stat-label{
    font-size:12px;
    color: var(--text-dim);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-bottom:8px;
  }
  .stat-card .stat-value{
    font-size: 26px;
    font-weight:700;
    font-family: var(--mono);
    letter-spacing:-0.02em;
  }
  .stat-card .stat-sub{
    font-size:11px;
    color: var(--text-faint);
    margin-top:4px;
  }
  .stat-accent{ color: var(--accent); }
  .stat-green{ color: var(--green); }
  .stat-red{ color: var(--red); }
  .stat-blue{ color: var(--blue); }

  /* ===== Tables ===== */
  .table-wrap{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    overflow-x:auto;
  }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    text-align:left;
    font-size: 11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color: var(--text-faint);
    font-weight:600;
    padding: 12px 16px;
    background: var(--panel-2);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
  }
  tbody td{
    padding: 13px 16px;
    border-bottom:1px solid var(--border);
    font-size:13.5px;
    vertical-align:middle;
  }
  table:has(#os-table-body) th, table:has(#os-table-body) td{ padding-left:10px; padding-right:10px; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background: rgba(var(--tint),0.018); }
  .mono{ font-family: var(--mono); font-size:12.5px; color: var(--text-dim); }
  .cell-strong{ font-weight:600; }
  .empty-row td{
    text-align:center;
    padding: 40px 16px;
    color: var(--text-faint);
  }

  /* ===== Badges ===== */
  .badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight:600;
    white-space:nowrap;
  }
  .badge::before{
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background:currentColor;
    flex-shrink:0;
  }
  .badge-aberto{ background: var(--blue-bg); color: var(--blue); }
  .badge-andamento{ background: var(--yellow-bg); color: var(--yellow); }
  .badge-aguardando{ background: var(--purple-bg); color: var(--purple); }
  .badge-concluido{ background: var(--green-bg); color: var(--green); }
  .badge-entregue{ background: rgba(var(--tint),0.08); color: var(--text-dim); }
  .badge-cancelado{ background: var(--red-bg); color: var(--red); }

  .stock-pill{
    display:inline-block;
    padding:3px 9px;
    border-radius:6px;
    font-family:var(--mono);
    font-size:12px;
    font-weight:600;
  }
  .stock-ok{ background: var(--green-bg); color: var(--green); }
  .stock-low{ background: var(--yellow-bg); color: var(--yellow); }
  .stock-out{ background: var(--red-bg); color: var(--red); }

  /* ===== Toolbar ===== */
  .toolbar{
    display:flex;
    gap:10px;
    margin-bottom:18px;
    flex-wrap:wrap;
    align-items:center;
  }
  .toolbar .search{
    flex:1;
    min-width:180px;
    position:relative;
  }
  .toolbar .search input{ width:100%; padding-left:34px; }
  .toolbar .search-icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color: var(--text-faint); font-size:14px; pointer-events:none;
  }
  .toolbar select{ width:auto; min-width:140px; }

  /* ===== Form elements ===== */
  input, select, textarea{
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--sans);
    width:100%;
    transition: border-color .12s, box-shadow .12s;
  }
  input:focus, select:focus, textarea:focus{
    outline:none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
  }
  textarea{ resize:vertical; min-height:70px; font-family:var(--sans); }
  label{
    display:block;
    font-size:12px;
    font-weight:600;
    color: var(--text-dim);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .field{ margin-bottom:14px; }
  .field-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
  }
  .field-row-3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:14px;
  }
  .hint{ font-size:11.5px; color:var(--text-faint); margin-top:4px; }

  /* ===== Modal ===== */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,0.55);
    display:none;
    align-items:flex-start;
    justify-content:center;
    z-index:100;
    padding: 40px 20px;
    overflow-y:auto;
  }
  .modal-overlay.open{ display:flex; }
  .modal{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    width:100%;
    max-width: 640px;
    padding: 24px 26px;
    animation: modalIn .18s ease;
  }
  .modal.modal-wide{ max-width: 760px; }
  @keyframes modalIn{ from{opacity:0; transform: translateY(-8px) scale(.99);} to{opacity:1; transform:translateY(0) scale(1);} }
  .modal-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:18px;
  }
  .modal-header h2{ font-size:17px; font-weight:600; }
  .modal-close{
    background:none; border:none; color:var(--text-faint);
    font-size:18px; cursor:pointer; padding:4px;
    line-height:1;
  }
  .modal-close:hover{ color:var(--text); }
  .modal-actions{
    display:flex; justify-content:flex-end; gap:10px;
    margin-top:20px; padding-top:16px; border-top:1px solid var(--border);
  }
  fieldset{ border:none; padding:0; margin:0 0 18px; }
  fieldset legend{
    font-size:12px; font-weight:700; color: var(--accent);
    text-transform:uppercase; letter-spacing:0.06em;
    padding:0; margin-bottom:12px;
    border-bottom:1px solid var(--border);
    padding-bottom:8px; width:100%;
  }

  /* Parts in OS form */
  .parts-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
  .part-row{
    display:grid;
    grid-template-columns: 1fr 70px 110px 32px;
    gap:8px;
    align-items:center;
  }
  .part-row select, .part-row input{ font-size:13px; padding:7px 10px; }
  .remove-part{
    background:none; border:1px solid var(--border); color:var(--text-faint);
    border-radius:6px; width:32px; height:32px; cursor:pointer; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .remove-part:hover{ color:var(--red); border-color: var(--red); }

  .total-line{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:12px; margin-top:6px; border-top:1px solid var(--border);
    font-size:15px; font-weight:600;
  }
  .total-line .total-value{ font-family:var(--mono); color:var(--accent); font-size:18px; }

  /* OS Detail view */
  .os-detail-grid{
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap:18px;
  }
  .timeline{ display:flex; flex-direction:column; gap:14px; }
  .timeline-item{ display:flex; gap:12px; }
  .timeline-dot{
    width:10px; height:10px; border-radius:50%;
    background: var(--accent); margin-top:5px; flex-shrink:0;
  }
  .timeline-content small{ display:block; color:var(--text-faint); font-size:11px; margin-bottom:2px; }

  .kv-list{ display:flex; flex-direction:column; gap:10px; }
  .kv-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
  .kv-row .kv-label{ color:var(--text-faint); }
  .kv-row .kv-value{ font-weight:500; text-align:right; }

  .section-title{
    font-size:13px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--text-dim);
    margin: 0 0 12px;
  }

  /* ── Hamburguer botão (mobile) ── */
  .sidebar-toggle{
    display:none;
    position:fixed; top:14px; left:14px; z-index:300;
    background:var(--panel); border:1px solid var(--border);
    border-radius:10px; padding:10px 13px; cursor:pointer;
    color:var(--text); font-size:20px; line-height:1;
    box-shadow:0 2px 12px rgba(0,0,0,.3);
    transition: background .15s;
  }
  .sidebar-toggle:hover{ background:var(--panel-2); }
  .sidebar-overlay{
    display:none;
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:199; backdrop-filter:blur(2px);
  }

  /* ── TABLET LARGO (≤ 1100px) ── */
  @media (max-width: 1100px){
    .main{ padding:28px 20px 60px; max-width:100%; }
    .stats-grid{ grid-template-columns: repeat(2,1fr); }
  }

  /* ── TABLET (≤ 900px) ── */
  @media (max-width: 900px){
    .app{ grid-template-columns: 220px 1fr; }
    .main{ padding:24px 18px 50px; }
    .modal{ padding:20px 16px; }
    .modal-wide{ max-width:98vw; }
    #dash-kpis{ grid-template-columns:repeat(2,1fr) !important; }
    #dash-row1{ grid-template-columns:1fr !important; }
    #dash-row1 + div[style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
    .kanban-board{ grid-template-columns:repeat(2,1fr); }
    tbody td{ padding:10px 12px; font-size:13px; }
    thead th{ padding:10px 12px; }
  }


  /* ===== Perfil / Avatar ===== */
  .avatar{
    border-radius:50%; flex-shrink:0; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff; font-weight:700;
    letter-spacing:.02em; user-select:none;
  }
  .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .avatar-sm{ width:36px; height:36px; font-size:13px; }
  .avatar-xl{ width:112px; height:112px; font-size:38px; }

  .perfil-card{
    display:flex; align-items:center; gap:10px; width:100%;
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:8px 10px; cursor:pointer; text-align:left; font-family:var(--sans);
    transition:border-color .15s, background .15s;
  }
  .perfil-card:hover{ border-color:var(--accent-dim); }
  .perfil-card.active{ border-color:var(--accent); background:var(--accent-bg); }
  .perfil-card-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
  .perfil-card-txt strong{ font-size:13px; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .perfil-card-txt span{ font-size:11.5px; color:var(--text-faint); }

  .perfil-grid{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
  .perfil-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
  .perfil-id{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:26px 20px; }
  .perfil-avatar-wrap{ position:relative; margin-bottom:8px; }
  .perfil-avatar-btn{
    position:absolute; right:0; bottom:0; width:34px; height:34px; border-radius:50%;
    background:var(--panel-2); border:2px solid var(--panel); color:var(--text);
    cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .perfil-avatar-btn:hover{ background:var(--accent); }
  .perfil-id h2{ font-size:18px; font-weight:600; }
  .perfil-id .mono{ font-size:12px; }
  .perfil-meta{ font-size:12px; color:var(--text-faint); margin-top:4px; }
  .perfil-cores{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px; }
  .perfil-cor{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .12s; }
  .perfil-cor:hover{ transform:scale(1.1); }
  .perfil-cor.sel{ border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
  .perfil-sec-title{ font-size:14px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .perfil-reqs{ display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; margin:-4px 0 14px; }
  .perfil-req{ font-size:12px; color:var(--text-faint); }
  .perfil-req.ok{ color:var(--green); }
  .perfil-forca{ display:flex; gap:4px; margin:-6px 0 4px; }
  .perfil-forca div{ height:3px; flex:1; border-radius:2px; background:var(--border); }
  .tema-opcoes{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .tema-opt{
    border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--bg-soft);
    display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--text); cursor:pointer; font-family:var(--sans); text-align:left;
  }
  .tema-opt.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
  .tema-opt:disabled{ opacity:.5; cursor:not-allowed; }
  .tema-opt small{ font-size:11px; color:var(--text-faint); }
  .tema-prev{ height:44px; border-radius:6px; border:1px solid var(--border); }
  .acessos-lista{ display:flex; flex-direction:column; }
  .acesso-item{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .acesso-item:last-child{ border-bottom:none; }
  .acesso-item span:last-child{ color:var(--text-faint); font-size:12px; white-space:nowrap; }

  @media (max-width: 900px){
    .perfil-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 520px){
    .perfil-reqs{ grid-template-columns:1fr; }
    .tema-opcoes{ grid-template-columns:1fr; }
  }


  /* ===== Editor de avatar ===== */
  .av-editor{ display:grid; grid-template-columns:220px 1fr; gap:22px; }
  .av-preview-col{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .av-preview{ width:200px; height:200px; border-radius:50%; overflow:hidden; background:var(--bg-soft); border:3px solid var(--border); }
  .av-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  .av-tab{ padding:6px 12px; border-radius:100px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text-dim); font-size:12.5px; cursor:pointer; font-family:var(--sans); }
  .av-tab.active{ background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
  .av-sec-label{ font-size:11px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin:4px 0 8px; }
  .av-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(62px,1fr)); gap:8px; max-height:250px; overflow-y:auto; padding:2px; margin-bottom:12px; }
  .av-opt{ aspect-ratio:1; border-radius:10px; border:2px solid var(--border); background:var(--bg-soft); cursor:pointer; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-faint); font-family:var(--sans); }
  .av-opt img{ width:100%; height:100%; display:block; }
  .av-preview svg, .av-opt svg{ width:100%; height:100%; display:block; }
  .av-cor-livre{ width:32px; height:32px; padding:0; border:none; background:none; cursor:pointer; }
  .av-opt:hover{ border-color:var(--accent-dim); }
  .av-opt.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
  .av-cores{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .av-cor{ width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid rgba(var(--tint),.15); }
  .av-cor.sel{ border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
  @media (max-width: 680px){
    .av-editor{ grid-template-columns:1fr; }
    .av-preview{ width:150px; height:150px; }
    .av-grid{ max-height:210px; }
  }


  /* ===== Usuários (admin) ===== */
  .usr-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
  .usr-stat{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
  .usr-stat b{ display:block; font-size:20px; }
  .usr-stat span{ font-size:12px; color:var(--text-faint); }
  .usr-toolbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .usr-toolbar .search{ flex:1; min-width:220px; }
  .usr-toolbar select{ width:auto; min-width:160px; }
  .usr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
  .usr-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:12px; }
  .usr-card.inativo{ opacity:.6; }
  .usr-top{ display:flex; gap:12px; align-items:center; min-width:0; }
  .usr-top .avatar{ width:48px; height:48px; font-size:17px; }
  .usr-info{ min-width:0; flex:1; }
  .usr-info strong{ display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .usr-info .mono{ display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .usr-tags{ display:flex; gap:6px; flex-wrap:wrap; }
  .usr-tag{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:100px; white-space:nowrap; }
  .usr-perfil-admin_full{ background:var(--purple-bg); color:var(--purple); }
  .usr-perfil-admin{ background:var(--blue-bg); color:var(--blue); }
  .usr-perfil-gestao{ background:var(--yellow-bg); color:var(--yellow); }
  .usr-perfil-tecnico{ background:var(--green-bg); color:var(--green); }
  .usr-perfil-auxiliar{ background:rgba(var(--tint),.07); color:var(--text-dim); }
  .usr-tag-ok{ background:var(--green-bg); color:var(--green); }
  .usr-tag-off{ background:rgba(var(--tint),.07); color:var(--text-faint); }
  .usr-tag-warn{ background:var(--yellow-bg); color:var(--yellow); }
  .usr-tag-err{ background:var(--red-bg); color:var(--red); }
  .usr-tag-eu{ background:var(--accent-bg); color:var(--accent); }
  .usr-meta{ font-size:12px; color:var(--text-faint); }
  .usr-acoes{ display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:12px; }
  .usr-acoes .btn{ padding:6px 10px; font-size:12px; }
  .usr-acoes .btn-danger-soft{ color:var(--red); }
  .usr-acoes .btn-danger-soft:hover{ border-color:var(--red); background:var(--red-bg); }
  .usr-perm-lista{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .usr-perm-item{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-faint); padding:8px 10px; border:1px dashed var(--border); border-radius:8px; }
  .usr-aviso{ background:var(--accent-bg); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--text-dim); line-height:1.5; }
  @media (max-width: 768px){
    .usr-stats{ grid-template-columns:repeat(2,1fr); }
    .usr-grid{ grid-template-columns:1fr; }
    .usr-perm-lista{ grid-template-columns:1fr; }
    .usr-toolbar select{ flex:1; }
  }


  /* ===== Permissões ===== */
  .perm-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); max-height:62vh; overflow-y:auto; }
  .perm-tab{ width:100%; border-collapse:collapse; font-size:13px; }
  .perm-tab th, .perm-tab td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:center; }
  .perm-tab thead th{ position:sticky; top:0; background:var(--panel-2); z-index:2; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); white-space:nowrap; }
  .perm-tab td:first-child, .perm-tab th:first-child{ text-align:left; }
  .perm-tab tr.perm-mod td{ background:var(--bg-soft); font-weight:700; color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
  .perm-tab input[type=checkbox]{ width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }
  .perm-tab input[type=checkbox]:disabled{ cursor:not-allowed; opacity:.55; }
  .perm-tab td.perm-alt{ background:rgba(251,191,36,.10); }
  .perm-legenda{ font-size:12px; color:var(--text-faint); margin:10px 0 0; display:flex; gap:14px; flex-wrap:wrap; }
  .perm-legenda i{ display:inline-block; width:12px; height:12px; border-radius:3px; background:rgba(251,191,36,.25); vertical-align:-2px; margin-right:4px; }
  .uperm-mod{ font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 6px; }
  .uperm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
  .uperm-row select{ width:auto; min-width:170px; padding:6px 8px; font-size:12.5px; }
  .uperm-row select.exc-lib{ border-color:var(--green); color:var(--green); }
  .uperm-row select.exc-blq{ border-color:var(--red); color:var(--red); }
  .uperm-lista{ max-height:52vh; overflow-y:auto; padding-right:4px; }
  @media (max-width: 600px){
    .uperm-row{ flex-direction:column; align-items:stretch; }
    .uperm-row select{ width:100%; }
  }

  /* ── MOBILE (≤ 768px) ── */
  @media (max-width: 768px){
    /* Layout */
    .app{ grid-template-columns:1fr; }

    /* Sidebar drawer */
    .sidebar{
      position:fixed; top:0; left:-270px; height:100vh; width:250px;
      z-index:200; transition:left .28s cubic-bezier(.4,0,.2,1);
      border-right:1px solid var(--border);
      overflow-y:auto; flex-direction:column;
      padding:20px 14px; box-shadow:none;
    }
    .sidebar.open{
      left:0;
      box-shadow:4px 0 32px rgba(0,0,0,.5);
    }
    .sidebar-overlay.open{ display:block; }
    .sidebar-toggle{ display:flex; align-items:center; justify-content:center; }

    /* Ajuste brand quando sidebar aberta */
    .brand{ padding-bottom:16px; }
    .brand-logo-box{ max-width:150px; }

    /* Main */
    .main{ padding:62px 12px 40px; min-width:0; overflow-x:hidden; }

    /* Page header */
    .page-header{
      flex-direction:column; align-items:stretch; gap:10px;
      margin-bottom:16px;
    }
    .page-header h1{ font-size:19px; }
    .page-header p{ font-size:12px; }
    .page-header > div:last-child{ display:flex; gap:8px; flex-wrap:wrap; }
    .page-header button, .page-header > div:last-child > *{ flex:1; min-width:0; justify-content:center; text-align:center; }

    /* Toolbar */
    .toolbar{ gap:8px; }
    .toolbar .search{ min-width:100%; }
    .toolbar select{ flex:1; min-width:0; }

    /* Campos */
    .field-row, .field-row-3{ grid-template-columns:1fr; gap:10px; }
    .os-detail-grid{ grid-template-columns:1fr; }
    .field{ margin-bottom:12px; }
    input, select, textarea{ font-size:16px; } /* evitar zoom automático no iOS */

    /* Tabelas com scroll */
    .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
    table{ min-width:520px; }
    tbody td{ padding:10px 12px; font-size:13px; }
    thead th{ padding:9px 12px; }

    /* Stats */
    .stats-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
    .stat-card{ padding:13px 14px; }
    .stat-card .stat-value{ font-size:22px; }

    /* Dashboard */
    #dash-kpis{ grid-template-columns:repeat(2,1fr) !important; gap:10px; }
    #dash-filtros{ padding:14px; }
    #dash-filtros input[type=date]{ width:100% !important; }
    #dash-periodo-b-wrap{ flex-direction:column !important; }
    #dash-row1{ grid-template-columns:1fr !important; }

    /* Força 1 coluna em qualquer grid de 2 colunas no dashboard */
    #page-dashboard [style*="grid-template-columns:1fr 1fr"]{
      grid-template-columns:1fr !important;
    }
    #page-dashboard [style*="grid-template-columns: 1fr 1fr"]{
      grid-template-columns:1fr !important;
    }

    /* Kanban */
    .kanban-board{ grid-template-columns:1fr !important; gap:12px; }
    .kanban-col{ min-height:auto; }
    .kanban-tabs{ overflow-x:auto; white-space:nowrap; }
    .kanban-tab{ padding:10px 16px; font-size:12px; }

    /* Modais — slide from bottom */
    .modal-overlay{
      padding:0;
      align-items:flex-end;
      justify-content:stretch;
    }
    .modal{
      border-radius:20px 20px 0 0;
      max-height:92vh; overflow-y:auto;
      width:100%; max-width:100% !important;
      padding:20px 16px 32px;
      animation: slideUp .22s ease;
    }
    @keyframes slideUp{ from{transform:translateY(100%);opacity:0;} to{transform:translateY(0);opacity:1;} }

    .modal-header{ margin-bottom:16px; }
    .modal-title{ font-size:16px; }
    .modal-actions{ flex-direction:column-reverse; gap:8px; }
    .modal-actions .btn{ width:100%; justify-content:center; }

    /* Checklist compacto */
    .cl-item{ padding:7px 10px; }
    .cl-opts{ gap:10px; }

    /* Peças */
    .part-row{ gap:6px; }
    .part-row input{ font-size:14px; }

    /* Aparelhos extras */
    .aparelho-extra-card .ae-campos .field-row{ grid-template-columns:1fr; }

    /* Botões de ação */
    .btn-ghost.btn-sm{ padding:6px 10px; font-size:12px; }
    .btn-sm{ padding:7px 12px; }

    /* Cards de compra/kanban */
    .kanban-card{ padding:12px; }
    .kanban-card-title{ font-size:13px; }

    /* Exportar dropdown */
    #export-dropdown-wrap{ width:100%; }
    #export-menu{ left:0; right:0; width:100%; }
    #export-dropdown-wrap .btn-primary{ width:100%; justify-content:center; }

    /* Toast */
    .toast-wrap{ left:10px; right:10px; bottom:16px; }
    .toast{ min-width:0; width:100%; font-size:13px; }

    /* Seção de dados PJ */
    #os-pj-fields .field-row{ grid-template-columns:1fr; }

    /* Ocultar colunas menos importantes em tabelas mobile */
    .hide-mobile{ display:none !important; }

    /* Alvos de toque maiores */
    .btn{ min-height:42px; }
    .btn-sm{ min-height:36px; }
    input, select, textarea{ min-height:44px; }
    .nav-item{ min-height:46px; }
    .ac-item{ padding:12px 14px; }
    .kanban-add-btn{ min-height:40px; }

    /* Cards de OS clicáveis */
    tbody tr{
      cursor:pointer;
      transition:background .12s;
    }
    tbody tr:active{ background:var(--panel-2); }

    /* Botão + Nova OS flutuante (FAB) */
    .fab-os{
      display:flex;
      position:fixed; bottom:76px; right:16px; z-index:140;
      width:52px; height:52px; border-radius:50%;
      background:var(--accent); color:#fff; border:none;
      font-size:24px; cursor:pointer; align-items:center; justify-content:center;
      box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 50%, transparent);
      transition:transform .15s, box-shadow .15s;
    }
    .fab-os:active{ transform:scale(.92); box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }

    /* Compras em cards no mobile */
    .compra-card-mobile{
      background:var(--panel); border:1px solid var(--border);
      border-radius:10px; padding:14px; margin-bottom:10px;
      display:flex; justify-content:space-between; align-items:flex-start;
    }

    /* Scroll snap nas abas kanban */
    .kanban-tabs{ scroll-snap-type:x mandatory; }
    .kanban-tab{ scroll-snap-align:start; }

    /* Filtros do dashboard em coluna */
    #dash-filtros > div:first-child{
      flex-direction:column !important; gap:12px !important;
    }
    #dash-filtros input[type=date]{ width:100% !important; min-width:0 !important; }
  }

  /* ── MOBILE PEQUENO (≤ 480px) ── */
  @media (max-width: 480px){
    .main{ padding:58px 10px 90px; } /* espaço para bottom nav */
    .stats-grid{ grid-template-columns:1fr !important; }
    #dash-kpis{ grid-template-columns:1fr !important; }
    .stat-card .stat-value{ font-size:20px; }
    .page-header h1{ font-size:17px; }
    .modal{ padding:16px 13px 28px; }
    .btn{ font-size:13px; }
    .kanban-board{ gap:10px; }
    .sidebar{ width:240px; left:-250px; }
    label{ font-size:11px; }
    .field{ margin-bottom:10px; }
  }

  /* ── BOTTOM NAVIGATION (mobile) ── */
  .bottom-nav{
    display:none;
    position:fixed; bottom:0; left:0; right:0;
    background:var(--bg-soft);
    border-top:1px solid var(--border);
    z-index:150;
    padding:6px 0 env(safe-area-inset-bottom, 6px);
    box-shadow:0 -2px 16px rgba(0,0,0,.3);
  }
  .bottom-nav-items{
    display:flex;
    justify-content:space-around;
    align-items:center;
  }
  .bottom-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 10px;
    background:none;
    border:none;
    color:var(--text-faint);
    font-size:9px;
    font-weight:600;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:.04em;
    transition:color .15s;
    min-width:48px;
    font-family:var(--sans);
  }
  .bottom-nav-item .bn-icon{ font-size:20px; line-height:1; }
  .bottom-nav-item.active{ color:var(--accent); }
  .bottom-nav-item:active{ opacity:.7; }

  @media (max-width: 768px){
    .bottom-nav{ display:block; }
    .sidebar-toggle{ top:12px; left:12px; }
    /* Esconder sidebar toggle quando bottom nav visível */
    .sidebar-toggle{ display:none !important; }
    /* Ajustar main para bottom nav */
    .main{ padding-bottom:80px !important; }
  }

  @media (max-width: 480px){
    .bottom-nav-item{ font-size:8px; min-width:42px; }
    .bottom-nav-item .bn-icon{ font-size:18px; }
  }

  .toast-wrap{
    position:fixed; bottom:20px; right:20px; z-index:200;
    display:flex; flex-direction:column; gap:8px;
  }
  .toast{
    background: var(--panel); border:1px solid var(--border);
    border-left:3px solid var(--green);
    border-radius:8px; padding:12px 16px; font-size:13px;
    min-width:220px; animation: toastIn .2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  .toast.toast-danger{ border-left-color: var(--red); }
  @keyframes toastIn{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }

  .alert-banner{
    background: var(--yellow-bg);
    border:1px solid rgba(251,191,36,0.3);
    border-radius:var(--radius);
    padding:12px 16px;
    color: var(--yellow);
    font-size:13px;
    margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }

  .text-faint{ color:var(--text-faint); }
  .mb-0{ margin-bottom:0 !important; }
  /* ── KANBAN ── */
  .kanban-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border); }
  .kanban-tab  { padding:10px 20px; background:none; border:none; border-bottom:2px solid transparent;
    color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
  .kanban-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

  .kanban-board { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
  @media(max-width:900px){ .kanban-board{ grid-template-columns:1fr; } }

  .kanban-col { background:var(--panel-2); border-radius:var(--radius); padding:14px; min-height:300px; }
  .kanban-col-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
  .kanban-col-title  { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
  .kanban-col-count  { font-size:11px; font-weight:700; background:rgba(var(--tint),0.08);
    border-radius:20px; padding:2px 8px; color:var(--text-dim); }

  .kanban-card { background:var(--panel); border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:box-shadow .15s, transform .15s;
    border-left:3px solid var(--accent); position:relative; }
  .kanban-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.3); transform:translateY(-1px); }
  .kanban-card-title { font-size:13px; font-weight:600; margin-bottom:6px; line-height:1.4; }
  .kanban-card-meta  { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; }
  .kanban-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; }
  .kanban-card-desc  { font-size:12px; color:var(--text-dim); margin-bottom:4px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .kanban-add-btn { width:100%; padding:8px; background:none; border:1px dashed var(--border);
    border-radius:6px; color:var(--text-faint); font-size:12px; cursor:pointer; transition:all .2s; }
  .kanban-add-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--cyan-dim,rgba(0,148,212,.06)); }

  /* Cores de prioridade */
  .pri-baixa   { background:rgba(108,117,125,.15); color:#6c757d; }
  .pri-normal  { background:rgba(0,148,212,.15);   color:#0094d4; }
  .pri-alta    { background:rgba(255,193,7,.15);   color:#ffc107; }
  .pri-urgente { background:rgba(220,53,69,.15);   color:#dc3545; }

  /* Modal tarefa */
  .comentario-item { padding:10px 0; border-bottom:1px solid var(--border); }
  .comentario-item:last-child { border-bottom:none; }
  .comentario-autor { font-size:11px; font-weight:700; color:var(--accent); }
  .comentario-data  { font-size:10px; color:var(--text-faint); margin-left:6px; }
  .comentario-texto { font-size:13px; margin-top:4px; color:var(--text); }

  /* Widget de notificações (aprovação/reprovação de orçamento pelo cliente) */
  #notif-widget{ position:fixed; right:20px; bottom:20px; z-index:9998; font-family:inherit; }
  #notif-bubble{
    width:52px; height:52px; border-radius:50%; background:var(--accent);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,0.35); font-size:22px; position:relative;
    transition:transform .15s;
  }
  #notif-bubble:hover{ transform:scale(1.06); }
  .notif-badge{
    position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
    border-radius:10px; background:var(--red); color:#fff; font-size:11px; font-weight:700;
    display:none; align-items:center; justify-content:center; border:2px solid var(--bg,#181c20);
  }
  .notif-panel{
    display:none; flex-direction:column; position:absolute; right:0; bottom:64px;
    width:340px; max-width:calc(100vw - 40px); max-height:440px; background:var(--panel);
    border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.45);
    overflow:hidden;
  }
  .notif-panel-header{
    display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
    border-bottom:1px solid var(--border); font-size:13.5px; font-weight:700;
  }
  .notif-panel-header button{
    background:none; border:none; color:var(--accent); font-size:11.5px; font-weight:600;
    cursor:pointer; padding:0;
  }
  .notif-panel-header button:hover{ text-decoration:underline; }
  #notif-lista{ overflow-y:auto; flex:1; }
  .notif-item{
    display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border);
    cursor:pointer; transition:background .15s;
  }
  .notif-item:last-child{ border-bottom:none; }
  .notif-item:hover{ background:var(--panel-2); }
  .notif-item-naolida{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
  .notif-item-icone{ font-size:16px; flex-shrink:0; line-height:1.4; }
  .notif-item-corpo{ min-width:0; }
  .notif-item-msg{ font-size:12.5px; color:var(--text); line-height:1.4; }
  .notif-item-data{ font-size:10.5px; color:var(--text-faint); margin-top:3px; }
  .notif-vazio{ padding:24px 14px; text-align:center; color:var(--text-faint); font-size:12.5px; }


/* ---- index.html linhas 1158–1189 ---- */
/* ===== Wizard de abertura de OS ===== */
.wz-steps{ display:flex; align-items:flex-start; margin:0 0 18px; position:sticky; top:0; z-index:5;
  background:var(--panel); padding:8px 0 12px; border-bottom:1px solid var(--border); }
.wz-step{ flex:1; min-width:0; background:none; border:none; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:5px; padding:0 2px; color:var(--text-faint); font-family:inherit; position:relative; }
.wz-step::before{ content:''; position:absolute; top:14px; right:50%; width:100%; height:2px; background:var(--border); z-index:0; }
.wz-step:first-child::before{ display:none; }
.wz-num{ width:30px; height:30px; border-radius:50%; border:2px solid var(--border); background:var(--panel);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; position:relative; z-index:1; }
.wz-lbl{ font-size:11px; font-weight:600; text-align:center; line-height:1.2; }
.wz-step.done::before, .wz-step.active::before{ background:var(--accent); }
.wz-step.done .wz-num{ border-color:var(--accent); color:var(--accent); }
.wz-step.active{ color:var(--accent); }
.wz-step.active .wz-num{ border-color:var(--accent); background:var(--accent); color:#fff; }
.wz-nav{ position:sticky; bottom:0; z-index:5; display:flex; gap:10px; align-items:center; background:var(--panel);
  margin-top:20px; padding:14px 0 4px; border-top:1px solid var(--border); }
.wz-nav #wz-btn-exit{ margin-left:auto; }
@media (max-width:768px){
  .wz-lbl{ font-size:10px; }
  .wz-nav{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"back next" "exit exit"; gap:8px;
    margin:16px -16px -32px; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .wz-nav .btn{ width:100%; justify-content:center; min-height:44px; }
  #wz-btn-back{ grid-area:back; } #wz-btn-next{ grid-area:next; } #wz-btn-exit{ grid-area:exit; margin-left:0 !important; }
  /* O modal da OS fica acima da barra inferior do app, senão ela cobre os botões */
  #os-modal-overlay{ z-index:160; }
  /* Checklist em 1 coluna no celular (a grade de 2 colunas estourava a largura da tela) */
  #os-checklist-wrap fieldset{ padding:12px 10px !important; min-width:0; }
  #os-checklist-wrap fieldset > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  #os-modal-overlay .modal{ overflow-x:hidden; }
  /* Avisos no topo enquanto a OS está aberta, para não cobrir os botões de navegação */
  body:has(#os-modal-overlay.open) #toast-wrap{ top:12px; bottom:auto; left:12px; right:12px; }
}

/* ---- index.html linhas 1192–1201 ---- */
/* Seções de cada aparelho: cada etapa mostra só a sua parte */
#os-modal-overlay[data-wz="2"] .dv-sec:not([data-sec="cad"]),
#os-modal-overlay[data-wz="3"] .dv-sec:not([data-sec="rec"]),
#os-modal-overlay[data-wz="4"] .dv-sec:not([data-sec="banc"]){ display:none !important; }
#os-modal-overlay:not([data-wz="2"]) #dv-add-wrap{ display:none; }
.dv-modelo{ font-size:13px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:768px){
  .ae-checklist-wrap fieldset{ padding:12px 10px !important; min-width:0; }
  .ae-checklist-wrap fieldset > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}

/* ---- index.html linhas 1204–1233 ---- */
/* Janelas abertas de dentro da OS (comentário de status, novo cliente) precisam ficar acima dela no celular */
#status-comentario-overlay, #client-modal-overlay{ z-index:170; }
/* Fotos dos aparelhos */
.fotos-box{ margin:0 0 14px; padding-bottom:12px; border-bottom:1px dashed var(--border); }
.fotos-titulo{ font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; }
.fotos-cont{ font-weight:400; }
.fotos-grid{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.foto-th{ position:relative; width:78px; height:78px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--panel-2); }
.foto-th img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.foto-x{ position:absolute; top:2px; right:2px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; font-size:16px; line-height:1; cursor:pointer; }
.foto-add{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.fotos-box.enviando{ opacity:.55; pointer-events:none; }
.foto-saida-aparelho{ margin-bottom:6px; }
.foto-saida-aparelho > .foto-titulo-ap{ font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; }
#os-modal-overlay[data-wz="6"] .fotos-box[data-stage="entrada"]{ display:none; }
.ta-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:10px; border:1px dashed var(--accent); border-radius:var(--radius); background:var(--tint, color-mix(in srgb, var(--accent) 8%, transparent)); }
.ta-bar span{ font-size:12px; color:var(--text-dim); flex:1; min-width:160px; }
.ta-info{ display:none; margin:-4px 0 10px; padding:8px 12px; border-radius:var(--radius); background:var(--panel-2); font-size:12px; color:var(--text-dim); line-height:1.6; }
.ta-info.on{ display:block; }
.ta-info b{ color:var(--text); }
.ta-val{ font-size:11px; font-weight:700; color:var(--accent); margin-left:6px; }
.cl-item.ta-auto > span::after{ content:' ⚡ auto'; font-size:10px; font-weight:700; color:var(--accent); }
.ta-plat{ display:flex; gap:8px; margin:6px 0 12px; }
.ta-plat button{ flex:1; padding:12px; border-radius:var(--radius); border:2px solid var(--border); background:transparent; color:var(--text); font:inherit; font-weight:600; cursor:pointer; }
.ta-plat button.on{ border-color:var(--accent); color:var(--accent); }
.ta-plat button:disabled{ opacity:.45; cursor:not-allowed; }
.ta-qr{ background:#fff; padding:12px; border-radius:12px; width:240px; max-width:100%; margin:8px auto; line-height:0; }
.ta-qr svg{ width:100%; height:auto; }
.ta-status{ text-align:center; font-weight:600; margin:8px 0; }
.ta-ok{ color:var(--green); } .ta-erro{ color:var(--red); }

  /* ---- Minha empresa ---- */
  .emp-logo-area{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
  /* Prévia do logo: igual ao menu — só o logo, com cantos arredondados */
  .emp-logo-prev{ display:flex; align-items:center; min-height:56px; }
  .emp-logo-prev #emp-logo-caixa{ display:inline-flex; line-height:0; border-radius:10px; }
  .emp-logo-prev img{ max-width:220px; max-height:120px; width:auto; height:auto; object-fit:contain; display:block; border-radius:10px; }
  .emp-logo-prev .logo-fundo-claro, .emp-logo-prev .logo-fundo-escuro{ padding:8px 12px; }
  .emp-logo-prev .logo-fundo-claro img, .emp-logo-prev .logo-fundo-escuro img{ border-radius:0; }
  .emp-sugestao{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
  .emp-sugestao small{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; width:100%; }
  .emp-logo-prev .emp-ini{ width:56px; height:56px; border-radius:12px; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:21px; }
  .emp-logo-acoes{ display:flex; flex-direction:column; gap:8px; }
  .emp-cores{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
  .emp-cor-opt{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
  .emp-cor-opt.sel{ border-color:var(--text); box-shadow:0 0 0 2px var(--accent-bg); }
  .emp-cor-livre{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .emp-cor-livre input[type=color]{ width:42px; height:34px; padding:2px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); cursor:pointer; }
  .emp-cor-livre input[type=text]{ width:110px; }
  .emp-prev-impresso{
    background:#fff; color:#111; border-radius:8px; padding:14px 16px;
    display:grid; grid-template-columns:96px minmax(0,1fr) 74px; gap:10px; align-items:center;
    font-family:Arial, Helvetica, sans-serif; box-shadow:0 0 0 1px var(--border);
  }
  .emp-prev-impresso .p-company{ text-align:center; min-width:0; }
  .emp-prev-impresso h1{ font-size:13px; font-weight:700; letter-spacing:.3px; margin:0; overflow-wrap:anywhere; }
  .emp-prev-impresso p{ font-size:10px; color:#333; margin:3px 0 0; line-height:1.4; overflow-wrap:anywhere; }
  .emp-prev-impresso .p-num{ text-align:right; font-size:9px; color:#555; }
  .emp-prev-impresso .p-num b{ display:block; font:700 17px monospace; }
  .emp-prev-impresso .p-logo{ min-width:0; }
  .emp-prev-impresso .p-logo img{ max-width:96px !important; max-height:48px !important; }
  .emp-row-cidade{ grid-template-columns: 1fr 90px 130px; }
  .emp-plano{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
  .emp-plano div{ background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
  .emp-plano small{ display:block; font-size:11px; color:var(--text-faint); margin-bottom:3px; }
  .emp-plano strong{ font-size:14px; }
  @media (max-width: 720px){
    .emp-row-cidade{ grid-template-columns: 1fr 1fr; }
    .emp-row-cidade > div:first-child{ grid-column:1/-1; }
    .emp-plano{ grid-template-columns:1fr; }
    .emp-prev-impresso{ grid-template-columns:1fr; text-align:center; justify-items:center; }
    .emp-prev-impresso .p-num{ text-align:center; }
  }

  /* ---- Planos: módulo fora do plano ---- */
  body .sidebar .nav-item.nav-bloqueado[data-page]{ display:flex !important; opacity:.6; }
  .nav-item.nav-bloqueado:hover{ opacity:.85; }
  .nav-cadeado{ margin-left:auto; white-space:nowrap; flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:100px;
    background:var(--accent-bg); color:var(--accent); }
  .nav-cadeado::before{ content:'🔒 '; }
  .plano-selo{ display:flex; flex-direction:column; gap:6px; background:var(--panel-2); border:1px solid var(--border);
    border-radius:8px; padding:10px 12px; font-size:13px; }
  .trava-aviso{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--accent-bg);
    border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:var(--radius);
    padding:11px 14px; margin-bottom:16px; font-size:13px; cursor:pointer; }
  .trava-aviso .trava-link{ margin-left:auto; color:var(--accent); font-weight:700; }
  .usr-plano{ font-size:13px; color:var(--text-dim); margin:-4px 0 12px; }
  .usr-plano a{ color:var(--accent); }
  body.sem-mod-teste_aparelho .ta-bar{ opacity:.75; }
  body.sem-mod-teste_aparelho .ta-bar button::after{ content:' 🔒 Max'; font-size:11px; }
  .emp-modulos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px 14px; margin-top:12px; font-size:13px; }
  .emp-modulos .off{ color:var(--text-faint); }
  .btn-whats{ background:#1fa855; border-color:#1fa855; color:#fff !important; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
  .btn-whats:hover{ filter:brightness(1.08); }
  .emp-suporte{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }