/* Estilos da app Allô CST — extraídos de index.html em 27/05/2026 */
/* Mantém alinhado com o tema dark/light controlado via data-theme="light" no body */

:root {
    /* ─── Redesenho v1 (A1 contraste, 2026-06-05) ───────────────────────────
       Paleta dark de ALTO CONTRASTE (protótipo UX). Ao contrário do
       "aclaramento" de 2026-05-25 (fundo mais claro → MENOS contraste com texto
       branco), volta-se a fundos escuros + texto mais brilhante = legível ao sol.
       Mantêm-se os nomes das variáveis para não partir nada a jusante. */
    --orange: #2EE6D6;       /* accent ciano (calmo) — era #3df9f3 */
    --orange-light: #5cf0e4;
    --orange-dim: rgba(46,230,214,0.15);
    --dark: #021a2b;        /* fundo principal (escuro alto-contraste) — era #073a5b */
    --dark2: #07273b;       /* cards, painéis — era #0a4e76 */
    --dark3: #0c3149;       /* bordas, separadores — era #126391 */
    --dark4: #16415c;       /* bordas claras — era #1a78ac */
    --text: #ffffff;
    --text-dim: rgba(255,255,255,0.90);   /* secundário (subido de 0.82) */
    --text-muted: rgba(255,255,255,0.80); /* labels e meta (subido p/ legibilidade) */
    --green: #22C55E;
    --green-dim: rgba(34,197,94,0.12);
    --red: #EF4444;
    --red-dim: rgba(239,68,68,0.1);
    --blue: #3B82F6;
    --yellow: #F59E0B;
    --radius: 14px;
    --radius-sm: 8px;
  }

  /* ═══════════════════════════════════════════════════════════
     TEMA CLARO (light mode) — activado via [data-theme="light"]
     Sobrescreve as variáveis acima quando o utilizador escolhe.
     Mantém os accent ciano/orange/green/red/yellow iguais.
     ═══════════════════════════════════════════════════════════ */
  body[data-theme="light"] {
    --orange: #0891b2;          /* ciano escuro — accent com bom contraste em fundo branco */
    --orange-light: #0e7490;
    --orange-dim: rgba(8,145,178,0.10);
    --dark: #f1f5f9;            /* fundo principal (cinza muito claro) */
    --dark2: #ffffff;           /* cards e painéis (branco) */
    --dark3: #e2e8f0;           /* bordas e separadores */
    --dark4: #cbd5e1;           /* bordas claras / dividers */
    --text: #0a1822;            /* texto principal (quase preto, máx. contraste ao sol) */
    --text-dim: rgba(10,24,34,0.92);   /* secundário — Modo sol mais legível */
    --text-muted: rgba(10,24,34,0.80); /* labels/meta — quase-preto, nada de cinzento esbatido */
    --green: #16a34a;
    --green-dim: rgba(22,163,74,0.10);
    --red: #dc2626;
    --red-dim: rgba(220,38,38,0.08);
    --blue: #2563eb;
    --yellow: #d97706;
  }
  /* No light mode, o body fica claro (em vez do dark) */
  body[data-theme="light"] {
    background: var(--dark);
    color: var(--text);
  }
  /* Hero da HOME no Modo sol — o wordmark ALLÔ é uma imagem com letras BRANCAS
     + símbolo/slogan ciano; sobre azul-pálido ficava sem contraste. Passa-se a
     um azul de marca mais profundo, que faz o branco e o ciano saltarem, e o
     subtítulo/estado ficam claros. (contraste, 2026-06-29) */
  body[data-theme="light"] #screen-home {
    background: linear-gradient(160deg, #0e7490 0%, #075985 55%, #0c4a6e 100%);
  }
  body[data-theme="light"] #screen-home .home-sub,
  body[data-theme="light"] #screen-home #home-sync-status {
    color: rgba(255,255,255,0.92);
  }
  body[data-theme="light"] #screen-home img[alt="ALLÔ SÃO TOMÉ"] {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.30));
  }
  body[data-theme="light"] .home-logo { color: #0f172a; }
  body[data-theme="light"] .home-divider { background: var(--orange); }
  /* Botões com fundo orange ainda têm texto escuro hard-coded #011e30, que continua a funcionar */
  /* Status banner offline continua vermelho, sem mudar */
  /* Inputs ficam com fundo branco */
  body[data-theme="light"] .field input,
  body[data-theme="light"] .field select,
  body[data-theme="light"] .field textarea {
    background: #ffffff;
    border-color: var(--dark4);
    color: var(--text);
  }
  body[data-theme="light"] .field input::placeholder,
  body[data-theme="light"] .field textarea::placeholder { color: var(--text-muted); }
  /* Topbar fica branca com sombra suave */
  body[data-theme="light"] .topbar {
    background: var(--dark2);
    border-bottom: 1px solid var(--dark3);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  body[data-theme="light"] .topbar-title { color: var(--text); }
  body[data-theme="light"] .topbar-logo { color: var(--orange); }
  /* ── Contraste no Modo sol (2026-06-29): as caixas teal/vio/slate tinham número e borda
     em tons CLAROS (desenhados p/ fundo escuro) → ilegíveis sobre fundo pálido. Escurecer. ── */
  body[data-theme="light"] .hoje-att.teal  { color:#0f766e; border-color:#0f766e; background:rgba(15,118,110,.10); }
  body[data-theme="light"] .hoje-att.vio   { color:#6d28d9; border-color:#7c3aed; background:rgba(124,58,237,.10); }
  body[data-theme="light"] .hoje-att.slate { color:#334155; border-color:#64748b; background:rgba(71,85,105,.10); }
  body[data-theme="light"] .hoje-att.zero  { color:var(--text-muted); opacity:.9; }
  /* Ícones do topo e botões-ícone: garantir cor sólida escura no Modo sol */
  body[data-theme="light"] .btn-icon { color:#0f172a; background:#e2e8f0; border-color:#cbd5e1; }
  /* Modals com fundo branco */
  body[data-theme="light"] .modal-overlay { background: rgba(15,23,42,0.55); }
  body[data-theme="light"] .modal { background: var(--dark2); }
  body[data-theme="light"] .modal-handle { background: var(--dark4); }
  body[data-theme="light"] .modal-title { color: var(--text); }
  /* Toast verde mantém-se */
  /* Sombras subtis nos cards do admin */
  body[data-theme="light"] .stat-card,
  body[data-theme="light"] .record-item,
  body[data-theme="light"] .tech-card,
  body[data-theme="light"] .action-card,
  body[data-theme="light"] .recent-item,
  body[data-theme="light"] .daily-item,
  body[data-theme="light"] .router-item {
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html { overflow-x: hidden; max-width: 100%; }
  body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--text); min-height: 100vh; overflow-x: hidden; max-width: 100%; }
  /* Redesenho v1 (A2) — botão "Modo sol" (pílula) */
  .theme-toggle { background: var(--dark2); border: 1px solid var(--dark3); color: var(--text);
    border-radius: 999px; padding: 9px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px;
    font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .theme-toggle:active { transform: scale(.98); }
  /* Redesenho v1 (A3) — secções opcionais dobráveis (<details> nativo, "Mais detalhes") */
  .form-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
    gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 10px 0; user-select: none; }
  .form-details > summary::-webkit-details-marker { display: none; }
  .form-details > summary::before { content: '▸'; color: var(--orange); font-size: 12px;
    transition: transform .15s ease; }
  .form-details[open] > summary::before { transform: rotate(90deg); }

  .screen { display: none; min-height: 100vh; }
  .screen.active { display: flex; flex-direction: column; }

  /* HOME */
  #screen-home {
    background: linear-gradient(160deg, #021a2b 0%, #06283d 55%, #0c3149 100%); align-items: center; justify-content: center;
    padding: 32px 24px; position: relative; overflow: hidden;
  }
  #screen-home::before {
    content:''; position:absolute; top:-120px; left:-80px;
    width:400px; height:400px;
    background:radial-gradient(circle,rgba(46,230,214,.15) 0%,transparent 70%);
    pointer-events:none;
  }
  #screen-home::after {
    content:''; position:absolute; bottom:-80px; right:-60px;
    width:300px; height:300px;
    background:radial-gradient(circle,rgba(1,92,148,.35) 0%,transparent 70%);
    pointer-events:none;
  }
  .home-logo { font-family:'Syne',sans-serif; font-size:64px; font-weight:800; color:var(--orange); letter-spacing:-2px; line-height:1; position:relative; z-index:1; }
  .home-logo span { color:var(--text); }
  .home-sub { font-size:13px; color:var(--text-dim); letter-spacing:3px; text-transform:uppercase; margin-top:6px; text-align:center; position:relative; z-index:1; }
  .home-divider { width:48px; height:2px; background:var(--orange); margin:36px auto; position:relative; z-index:1; }
  .home-buttons { display:flex; flex-direction:column; gap:14px; width:100%; max-width:320px; position:relative; z-index:1; }

  /* STATUS BANNER */
  .status-banner {
    position:fixed; top:0; left:0; right:0; z-index:999;
    padding:10px 16px; font-size:13px; font-weight:600; text-align:center;
    display:none;
  }
  .status-banner.offline { background:#EF4444; color:#fff; display:block; }
  .status-banner.syncing { background:var(--yellow); color:#000; display:block; }

  /* BUTTONS */
  .btn { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 24px; border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; cursor:pointer; border:none; transition:all .18s; width:100%; }
  .btn:active { transform:scale(.97); }
  .btn-primary { background:var(--orange); color:#011e30; font-weight:700; }
  .btn-primary:hover { background:var(--orange-light); }
  .btn-secondary { background:var(--dark3); color:var(--text); border:1px solid var(--dark4); }
  .btn-ghost { background:transparent; color:var(--text-dim); font-size:13px; padding:10px; }
  .btn-sm { padding:9px 16px; font-size:13px; border-radius:var(--radius-sm); }
  .btn-icon { width:40px; height:40px; padding:0; border-radius:10px; background:var(--dark3); border:1px solid var(--dark4); color:var(--text-dim); font-size:18px; }

  /* TOPBAR */
  .topbar { display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--dark2); border-bottom:1px solid var(--dark3); position:sticky; top:0; z-index:100; }
  .topbar-title { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; flex:1; }
  .topbar-logo { font-family:'Syne',sans-serif; font-weight:800; color:var(--orange); font-size:18px; }

  /* TECH PICKER */
  .tech-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:20px; }
  .tech-card { background:var(--dark2); border:2px solid var(--dark3); border-radius:var(--radius); padding:20px 14px; text-align:center; cursor:pointer; transition:all .18s; }
  .tech-card:active { transform:scale(.96); }
  .tech-card.selected { border-color:var(--orange); background:var(--orange-dim); }
  .tech-avatar { width:48px; height:48px; border-radius:50%; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:18px; font-weight:700; color:var(--orange); margin:0 auto 10px; }
  .tech-card.selected .tech-avatar { background:var(--orange); color:#fff; }
  .tech-name { font-size:13px; font-weight:600; line-height:1.3; }

  /* FORM */
  .form-body { flex:1; padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .form-section { margin-bottom:28px; }
  .form-section-title { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--dark3); }
  .field { margin-bottom:16px; }
  .field label { display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; letter-spacing:.5px; }
  .field label .req { color:var(--orange); margin-left:2px; }
  .field input, .field select, .field textarea { width:100%; background:var(--dark2); border:1.5px solid var(--dark3); border-radius:var(--radius-sm); color:var(--text); font-family:'DM Sans',sans-serif; font-size:15px; padding:13px 14px; outline:none; transition:border-color .15s; -webkit-appearance:none; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color:var(--orange); }
  .field input::placeholder { color:var(--text-muted); }
  .field textarea { resize:none; min-height:80px; line-height:1.5; }
  .field select option { background:var(--dark2); }
  .field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  
  
  .type-btn { flex:1; min-width:72px; min-height:44px; padding:10px 8px; border:2px solid var(--dark3); border-radius:var(--radius-sm); background:var(--dark2); color:var(--text-dim); font-size:13px; font-weight:700; text-align:center; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
  .type-btn.selected-install { border-color:var(--green); background:var(--green-dim); color:var(--green); }
  .type-btn.selected-repair { border-color:var(--yellow); background:rgba(245,158,11,.1); color:var(--yellow); }

  .status-toggle { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .status-btn { padding:12px; border-radius:var(--radius-sm); border:2px solid var(--dark3); background:var(--dark2); color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; text-align:center; transition:all .15s; }
  .status-btn.selected-ok { border-color:var(--green); background:var(--green-dim); color:var(--green); }
  .status-btn.selected-nok { border-color:var(--red); background:var(--red-dim); color:var(--red); }
  .status-btn.selected-pend { border-color:var(--orange); background:var(--orange-dim); color:var(--orange); }

  .form-footer { padding:16px 20px; background:var(--dark2); border-top:1px solid var(--dark3); display:flex; gap:10px; }

  /* TOAST */
  .toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--green); color:#fff; padding:12px 24px; border-radius:40px; font-size:14px; font-weight:600; opacity:0; transition:all .3s; z-index:9999; white-space:nowrap; pointer-events:none; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  /* TECH HOME */
  .tech-home-hero { background:var(--dark2); padding:24px 20px; border-bottom:1px solid var(--dark3); }
  .tech-greeting { font-size:13px; color:var(--text-dim); margin-bottom:4px; }
  .tech-greeting-name { font-family:'Syne',sans-serif; font-size:22px; font-weight:700; }
  .tech-today-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:16px; }
  .today-stat { background:var(--dark3); border-radius:var(--radius-sm); padding:12px 10px; text-align:center; }
  .today-stat-num { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--orange); }
  .today-stat-label { font-size:11px; color:var(--text-muted); margin-top:2px; }

  .action-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px; }
  .action-card { background:var(--dark2); border:1.5px solid var(--dark3); border-radius:var(--radius); padding:22px 16px; cursor:pointer; text-align:center; transition:all .18s; }
  .action-card:active { transform:scale(.96); }
  .action-card:hover { border-color:var(--orange); }
  .action-card-icon { font-size:32px; margin-bottom:10px; display:block; }
  .action-card-label { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; }
  .action-card-sub { font-size:11px; color:var(--text-muted); margin-top:4px; }

  .recent-list { padding:0 20px 20px; }
  .recent-title { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
  .recent-item { display:flex; align-items:center; gap:12px; background:var(--dark2); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; border-left:3px solid transparent; }
  .recent-item.type-install { border-left-color:var(--green); }
  .recent-item.type-repair { border-left-color:var(--yellow); }
  .recent-item-icon { font-size:18px; flex-shrink:0; }
  .recent-item-info { flex:1; min-width:0; }
  .recent-item-client { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .recent-item-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
  .recent-item-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
  .badge-ok { background:var(--green-dim); color:var(--green); }
  .badge-nok { background:var(--red-dim); color:var(--red); }

  /* ADMIN LOGIN */
  #screen-admin-login { background:var(--dark); align-items:center; justify-content:center; padding:32px 24px; }
  .admin-login-box { width:100%; max-width:340px; background:var(--dark2); border:1px solid var(--dark3); border-radius:20px; padding:32px 28px; }
  .admin-login-icon { width:56px; height:56px; background:var(--orange-dim); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; }
  .admin-login-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; margin-bottom:6px; }
  .admin-login-sub { font-size:13px; color:var(--text-dim); margin-bottom:28px; }
  .pin-display { display:flex; justify-content:center; gap:12px; margin:24px 0; }
  .pin-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--dark4); background:transparent; transition:all .15s; }
  .pin-dot.filled { background:var(--orange); border-color:var(--orange); }
  .pin-pad { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
  .pin-key { aspect-ratio:1; background:var(--dark3); border:1.5px solid var(--dark4); border-radius:12px; font-family:'Syne',sans-serif; font-size:20px; font-weight:700; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; user-select:none; -webkit-user-select:none; }
  .pin-key:active { background:var(--orange); color:#fff; transform:scale(.93); }
  .pin-key.zero { grid-column:2; }
  .pin-key.del { grid-column:3; background:transparent; border-color:transparent; color:var(--text-dim); font-size:16px; }
  .pin-error { text-align:center; color:var(--red); font-size:13px; font-weight:600; min-height:20px; margin-top:-10px; margin-bottom:4px; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
  .shake { animation:shake .4s ease; }

  /* ADMIN DASHBOARD */
  .admin-tabs { display:flex; border-bottom:1px solid var(--dark3); background:var(--dark2); position:sticky; top:0; z-index:50; }
  .admin-tab { flex:1; padding:14px 8px; text-align:center; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; letter-spacing:.5px; }
  .admin-tab.active { color:var(--orange); border-bottom-color:var(--orange); }
  /* ─── Redesenho v1: barra de topo = sub-separadores do grupo ativo ─── */
  .admin-tabs { flex-wrap: wrap; }                 /* rede de segurança: nunca corta */
  .admin-tab.grp-off { display: none; }            /* esconde sub-tabs fora do grupo (permissões !important continuam a esconder os restritos) */
  /* Navegação inferior fixa (5 grupos) — só visível com #screen-admin ativo (é filho dele) */
  .admin-bnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex;
    background: var(--dark2); border-top: 1px solid var(--dark3);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .abnav-btn { flex: 1; min-height: 54px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; background: none; border: none; color: var(--text-muted);
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .3px; cursor: pointer; }
  .abnav-btn .abnav-ic { font-size: 20px; line-height: 1; }
  .abnav-btn.active { color: var(--orange); }
  #admin-scrollable { padding-bottom: 72px; }      /* conteúdo não fica tapado pela barra inferior */
  /* "Exportar" flutuante deixa de tapar a barra inferior */
  #screen-admin .fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* ─── Redesenho v1: home "Hoje" do técnico — caixas de atenção + ação ─── */
  .hoje-sec { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--text-muted); text-transform: uppercase; margin: 12px 2px 8px; }
  .hoje-att-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .hoje-att { border-radius: 14px; padding: 14px 6px; border: 1.5px solid transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
  .hoje-att-n { font-size: 28px; font-weight: 800; line-height: 1; }
  .hoje-att-l { font-size: 11.5px; font-weight: 700; line-height: 1.2; text-align: center; }
  .hoje-att.red  { background: var(--red-dim);             border-color: var(--red);    color: var(--red); }
  .hoje-att.amb  { background: rgba(245,158,11,.14);        border-color: var(--yellow); color: var(--yellow); }
  .hoje-att.blue { background: rgba(59,130,246,.14);        border-color: var(--blue);   color: var(--blue); }
  .hoje-att.teal  { background: rgba(15,158,136,.16);       border-color: #0f9e88;       color: #2dd4bf; }
  .hoje-att.vio   { background: rgba(123,83,214,.16);       border-color: #7b53d6;       color: #a78bfa; }
  .hoje-att.slate { background: rgba(100,116,139,.18);      border-color: #64748b;       color: #cbd5e1; }
  .hoje-att.zero { background: var(--dark2); border-color: var(--dark3); color: var(--text-muted); opacity: .7; } /* esbate a 0 */
  .hoje-att-grid.hoje-att-grid-2 { grid-template-columns: 1fr 1fr; } /* redesenho v3: 6 caixas 2×3 */
  .hoje-start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hoje-start { background: var(--dark2); border: 1.5px solid var(--dark3); border-radius: 16px; padding: 20px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; }
  .hoje-start:active { transform: scale(.98); }
  .hoje-start-ic { font-size: 34px; line-height: 1; }
  .hoje-start-t { font-size: 16px; font-weight: 800; color: var(--text); }
  .hoje-start-s { font-size: 12px; color: var(--text-muted); }
  /* ─── Redesenho: KPIs do mês comercial (topo do admin) ─── */
  .kpi-hero { background: var(--dark2); border: 1.5px solid var(--dark3); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
  .kpi-hero-k { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
  .kpi-hero-big { font-size: 44px; font-weight: 800; color: var(--green); line-height: 1; margin: 4px 0 2px; font-family: 'DM Sans', sans-serif; }
  .kpi-hero-sub { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
  .kpi-card { background: var(--dark2); border: 1.5px solid var(--dark3); border-left-width: 6px; border-radius: 16px; padding: 14px 14px 12px; margin-bottom: 12px; cursor: pointer; }
  .kpi-card:active { transform: scale(.995); }
  .kpi-card.kpi-in { border-left-color: var(--blue); }
  .kpi-card.kpi-av { border-left-color: var(--yellow); }
  .kpi-card-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .kpi-card-lb { font-size: 17px; font-weight: 800; color: var(--text); }
  .kpi-card-tot { font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: right; }
  .kpi-split { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 11px; }
  .kpi-st { border-radius: 11px; padding: 9px 6px; text-align: center; cursor: pointer; border: 1px solid transparent; }
  .kpi-st:active { transform: scale(.97); }
  .kpi-st-n { font-size: 22px; font-weight: 800; line-height: 1; }
  .kpi-st-t { font-size: 10.5px; font-weight: 800; margin-top: 4px; line-height: 1.2; }
  .kpi-st.ok   { background: rgba(34,197,94,.16);  border-color: rgba(34,197,94,.4); }
  .kpi-st.ok .kpi-st-n, .kpi-st.ok .kpi-st-t   { color: #4ade80; }
  .kpi-st.nok  { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.4); }
  .kpi-st.nok .kpi-st-n, .kpi-st.nok .kpi-st-t { color: #f87171; }
  .kpi-st.pend { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.4); }
  .kpi-st.pend .kpi-st-n, .kpi-st.pend .kpi-st-t { color: #fbbf24; }
  .kpi-tap { font-size: 10.5px; font-weight: 800; color: var(--accent); margin-top: 10px; }
  /* Modo sol — reforçar contraste dos números de estado */
  body[data-theme="light"] .kpi-hero-big { color: #0a6b3c; }
  body[data-theme="light"] .kpi-st.ok .kpi-st-n, body[data-theme="light"] .kpi-st.ok .kpi-st-t   { color: #0a6b3c; }
  body[data-theme="light"] .kpi-st.nok .kpi-st-n, body[data-theme="light"] .kpi-st.nok .kpi-st-t { color: #8f1c1c; }
  body[data-theme="light"] .kpi-st.pend .kpi-st-n, body[data-theme="light"] .kpi-st.pend .kpi-st-t { color: #7a4200; }
  /* ─── Redesenho v1: navegação inferior fixa do técnico ─── */
  .tnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex;
    background: var(--dark2); border-top: 1px solid var(--dark3); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tnav-btn { flex: 1; min-height: 54px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; background: none; border: none; color: var(--text-muted);
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; }
  .tnav-btn .tnav-ic { font-size: 20px; line-height: 1; }
  .tnav-btn.active { color: var(--orange); }
  #screen-tech-home .scrollable { padding-bottom: 72px; }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }

  .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:20px; }
  .stat-card { background:var(--dark2); border-radius:var(--radius); padding:18px 16px; border:1px solid var(--dark3); }
  .stat-card-label { font-size:11px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
  .stat-card-value { font-family:'Syne',sans-serif; font-size:32px; font-weight:800; }
  .stat-card-sub { font-size:11px; color:var(--text-dim); margin-top:4px; }
  .stat-install .stat-card-value { color:var(--green); }
  .stat-repair .stat-card-value { color:var(--yellow); }
  .stat-pending .stat-card-value { color:var(--red); }
  .stat-total .stat-card-value { color:var(--orange); }
  .stat-bt-added .stat-card-value { color:var(--green); }
  .stat-bt-removed .stat-card-value { color:var(--blue); }

  /* Cartões clicáveis no painel admin (Overview) */
  .stat-card-clickable { cursor:pointer; user-select:none; position:relative; transition:all .18s ease; }
  .stat-card-clickable:hover { border-color:var(--orange); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
  .stat-card-clickable:active { transform:translateY(0) scale(.98); }
  .stat-card-clickable:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
  .stat-card-cta { font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--orange); margin-top:6px; opacity:.75; transition:opacity .15s; }
  .stat-card-clickable:hover .stat-card-cta { opacity:1; }

  /* Botões de atalho de período por cima dos cartões */
  .period-quick-filter {
    display:flex; gap:6px; padding:16px 20px 0; flex-wrap:wrap; overflow-x:auto;
    scrollbar-width:none;
  }
  .period-quick-filter::-webkit-scrollbar { display:none; }
  .period-btn {
    padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600;
    background:var(--dark3); color:var(--text-dim); border:1.5px solid transparent;
    cursor:pointer; white-space:nowrap; transition:all .15s; font-family:'DM Sans',sans-serif;
  }
  .period-btn.active {
    background:var(--orange-dim); color:var(--orange); border-color:var(--orange);
  }
  .period-btn:hover { color:var(--orange); }
  .stat-pending.stat-card-clickable .stat-card-cta { color:var(--red); }
  .stat-repair.stat-card-clickable  .stat-card-cta { color:var(--yellow); }
  .stat-install.stat-card-clickable .stat-card-cta { color:var(--green); }

  .section-padded { padding:0 20px 20px; }
  .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .section-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); }

  .tech-perf-item { display:flex; align-items:center; gap:14px; background:var(--dark2); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:8px; }
  .tech-perf-avatar { width:40px; height:40px; border-radius:50%; background:var(--dark3); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:15px; font-weight:800; color:var(--orange); flex-shrink:0; }
  .tech-perf-info { flex:1; min-width:0; }
  .tech-perf-name { font-size:14px; font-weight:600; }
  .tech-perf-bar { height:4px; background:var(--dark3); border-radius:4px; margin-top:6px; overflow:hidden; }
  .tech-perf-fill { height:100%; background:var(--orange); border-radius:4px; transition:width .6s ease; }
  .tech-perf-nums { text-align:right; flex-shrink:0; }
  .tech-perf-total { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; color:var(--orange); }
  .tech-perf-detail { font-size:10px; color:var(--text-muted); }

  /* Redesenho/fix: chips quebram linha (flex-wrap) em vez de transbordar/cortar — antes overflow-x:auto cortava-os com html{overflow-x:hidden}. */
  .filter-bar { display:flex; flex-wrap:wrap; gap:8px; padding:12px 20px; border-bottom:1px solid var(--dark3); }
  .filter-bar::-webkit-scrollbar { display:none; }
  .filter-chip { padding:7px 14px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; background:var(--dark3); color:var(--text-dim); border:1.5px solid transparent; transition:all .15s; }
  .filter-chip.active { background:var(--orange-dim); color:var(--orange); border-color:var(--orange); }

  .record-list { padding:0 20px 100px; }
  .record-item { background:var(--dark2); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; border-left:3px solid transparent; cursor:pointer; transition:all .15s; }
  .record-item:active { transform:scale(.99); }
  .record-item.type-install { border-left-color:var(--green); }
  .record-item.type-repair { border-left-color:var(--yellow); }
  .record-item.status-nok { opacity:.65; }
  .record-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
  .record-client { font-size:14px; font-weight:600; line-height:1.3; }
  .record-type-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; margin-left:8px; }
  .badge-install { background:var(--green-dim); color:var(--green); }
  .badge-repair { background:rgba(245,158,11,.12); color:var(--yellow); }
  .record-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--text-muted); }

  .search-bar { padding:12px 20px; background:var(--dark2); border-bottom:1px solid var(--dark3); }
  .search-bar input { width:100%; background:var(--dark3); border:1.5px solid var(--dark4); border-radius:10px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; padding:11px 14px 11px 38px; outline:none; }
  .search-bar input:focus { border-color:var(--orange); }
  .search-wrap { position:relative; }
  .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:15px; pointer-events:none; }

  .fab { position:fixed; bottom:24px; right:20px; background:var(--orange); color:#011e30; border:none; border-radius:50px; padding:14px 20px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(61,249,243,.35); z-index:200; transition:all .18s; }
  .fab:active { transform:scale(.95); }

  /* MODAL */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:500; display:none; align-items:flex-end; justify-content:center; }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--dark2); border-radius:20px 20px 0 0; padding:24px 20px 40px; width:100%; max-width:480px; max-height:85vh; overflow-y:auto; animation:slideUp .25s ease; }
  @keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
  .modal-handle { width:40px; height:4px; background:var(--dark4); border-radius:4px; margin:0 auto 20px; }
  .modal-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; margin-bottom:20px; }
  .modal-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--dark3); font-size:13px; }
  .modal-row:last-child { border-bottom:none; }
  .modal-row-label { color:var(--text-muted); }
  .modal-row-value { font-weight:600; text-align:right; max-width:60%; }

  .scrollable { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
  .empty-state-icon { font-size:48px; margin-bottom:16px; }
  .mt-8 { margin-top:8px; }
  .mt-16 { margin-top:16px; }

  /* LOADING SPINNER */
  .spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--dark4); border-top-color:var(--orange); border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* CONFIG WARNING */
  .config-warning {
    position:fixed; inset:0; background:var(--dark); z-index:9000;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:32px; text-align:center;
  }
  .config-warning-icon { font-size:56px; margin-bottom:20px; }
  .config-warning h2 { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--orange); margin-bottom:12px; }
  .config-warning p { font-size:14px; color:var(--text-dim); line-height:1.6; max-width:340px; }
  .config-warning code { background:var(--dark3); padding:2px 8px; border-radius:6px; font-size:13px; color:var(--text); }

  /* ADMIN READONLY */
  .admin-readonly .admin-edit-only { display: none !important; }
  /* Apenas SUPER ADMIN v\u00ea elementos marcados com .superadmin-only */
  .not-superadmin .superadmin-only { display: none !important; }
  .admin-readonly-badge { background:rgba(61,249,243,.15); color:var(--orange); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.5px; }

  /* Admin 1207 — oculta apenas Equipas e Produtividade */
  .admin-limited #tab-btn-team,
  .admin-limited #tab-btn-prod { display: none !important; }
  .admin-limited #tab-team,
  .admin-limited #tab-prod { display: none !important; }

  /* MATERIAIS CHECKLIST */
  .mat-item { display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--dark2); border:1.5px solid var(--dark3); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; transition:all .15s; cursor:pointer; user-select:none; }
  .mat-item .mat-row { display:flex; align-items:center; gap:10px; width:100%; }
  .mat-router-sn { width:100%; margin-top:10px; padding-top:10px; border-top:1px dashed var(--dark4); cursor:default; }
  .mat-router-sn label { display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; letter-spacing:.5px; }
  .mat-router-sn input { width:100%; background:var(--dark2); border:1.5px solid var(--dark3); border-radius:var(--radius-sm); color:var(--text); padding:11px 12px; font-size:14px; outline:none; text-transform:uppercase; font-family:'Courier New',monospace; font-weight:600; letter-spacing:.5px; }
  .mat-router-sn input:focus { border-color:var(--orange); }
  .mat-router-sn .hint { font-size:11px; color:var(--text-muted); margin-top:4px; line-height:1.4; }
  .mat-item.active { border-color:var(--orange); background:var(--orange-dim); }
  .mat-check { width:22px; height:22px; border-radius:50%; border:2px solid var(--dark4); background:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; transition:all .15s; }
  .mat-item.active .mat-check { background:var(--orange); border-color:var(--orange); color:#011e30; font-weight:700; }
  .mat-name { flex:1; font-size:14px; font-weight:500; }
  .mat-qty { display:none; align-items:center; gap:6px; }
  .mat-item.active .mat-qty { display:flex; }
  .mat-qty-lbl { font-size:12px; color:var(--text-dim); white-space:nowrap; }
  .mat-qty input { width:54px; background:var(--dark3); border:1.5px solid var(--dark4); border-radius:6px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; padding:5px 8px; text-align:center; outline:none; }
  .mat-qty input:focus { border-color:var(--orange); }

  /* TEAM SELECT CHIPS */
  .team-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; border:2px solid var(--dark3); background:var(--dark2); color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; margin:4px; transition:all .15s; user-select:none; }
  .team-chip.selected { border-color:var(--orange); background:var(--orange-dim); color:var(--orange); }
  .team-chips-wrap { display:flex; flex-wrap:wrap; gap:0; padding:2px 0; }

  /* DAILY LOG */
  .wait-display { background:var(--dark3); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; font-weight:700; color:var(--orange); margin-top:6px; display:none; }
  /* Validação inline */
  .field-invalid input,
  .field-invalid select,
  .field-invalid textarea { border-color:var(--red) !important; background:rgba(239,68,68,.05) !important; }
  .field-err { font-size:11px; color:var(--red); margin-top:3px; display:none; font-weight:600; }
  .field-invalid .field-err { display:block; }
  /* Aviso de duplicado */
  .dup-warning { background:rgba(245,158,11,.12); border:1.5px solid var(--orange); border-radius:var(--radius); padding:12px 14px; font-size:13px; font-weight:600; color:var(--orange); margin-bottom:12px; display:none; cursor:pointer; }
  /* Firebase status */
  .fb-status-ok   { background:rgba(34,197,94,.12); border:1.5px solid var(--green); color:var(--green); border-radius:var(--radius); padding:12px 14px; font-size:13px; font-weight:700; }
  .fb-status-err  { background:rgba(239,68,68,.1); border:1.5px solid var(--red); color:var(--red); border-radius:var(--radius); padding:14px 16px; font-size:13px; font-weight:600; }
  .fb-rules-box   { background:var(--dark3); border-radius:var(--radius-sm); padding:14px; font-family:monospace; font-size:11px; color:#a3f7b5; margin:10px 0; white-space:pre; overflow-x:auto; user-select:all; }
  .pending-badge  { display:inline-block; background:var(--orange); color:#011e30; border-radius:20px; padding:2px 9px; font-size:10px; font-weight:800; margin-left:6px; vertical-align:middle; }

  /* DAILY LOG LIST */
  .daily-item { background:var(--dark2); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; border-left:3px solid var(--orange); }
  .daily-item-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
  .daily-item-tech { font-size:14px; font-weight:700; }
  .daily-item-date { font-size:11px; color:var(--text-muted); }
  .daily-item-row { font-size:12px; color:var(--text-dim); margin-top:3px; }


  /* TECH PIN SCREEN */
  #screen-tech-pin { background:var(--dark); align-items:center; justify-content:center; padding:32px 24px; }
  .tech-pin-box { width:100%; max-width:340px; background:var(--dark2); border:1px solid var(--dark3); border-radius:20px; padding:28px 24px; }
  .tech-pin-avatar { width:56px; height:56px; border-radius:50%; background:var(--orange-dim); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--orange); margin:0 auto 10px; }

  /* EDITAR REGISTO */
  .btn-edit-record { background:var(--dark3); color:var(--orange); border:1.5px solid var(--orange); border-radius:var(--radius-sm); padding:10px 18px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; width:100%; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; }
  .btn-edit-record:active { transform:scale(.97); }

  /* CHANGE PIN MODAL */
  .change-pin-form { padding:16px 0 0; }


  .service-tabs { display:flex; gap:8px; margin-bottom:12px; }
  .svc-tab { flex:1; padding:10px; border-radius:var(--radius-sm); border:2px solid var(--dark3); background:var(--dark2); color:var(--text-dim); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }
  .svc-tab.active { border-color:var(--orange); background:var(--orange-dim); color:var(--orange); }
  .svc-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); border:1.5px solid var(--dark3); background:var(--dark2); margin-bottom:6px; cursor:pointer; transition:all .15s; user-select:none; }
  .svc-item.selected { border-color:var(--orange); background:var(--orange-dim); }
  .svc-check { width:20px; height:20px; border-radius:50%; border:2px solid var(--dark4); background:transparent; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; transition:all .15s; }
  .svc-item.selected .svc-check { background:var(--orange); border-color:var(--orange); color:#011e30; font-weight:700; }

  
  .transport-entry { background:var(--dark2); border:1.5px solid var(--dark3); border-radius:var(--radius); padding:14px; margin-bottom:10px; position:relative; }
  .transport-entry-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .transport-entry-title { font-size:13px; font-weight:700; color:var(--orange); }
  .transport-duration { font-size:12px; font-weight:700; color:var(--green); margin-top:8px; display:none; }

  #export-overlay { display:none; position:fixed; inset:0; z-index:199; }
  #export-overlay.active { display:block; }

  /* PRODUTIVIDADE */
  .prod-tech-card { background:var(--dark2); border-radius:var(--radius); padding:16px; margin-bottom:12px; border:1px solid rgba(255,255,255,0.06); }
  .prod-tech-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .prod-tech-name { font-weight:600; font-size:15px; }
  .prod-eff-badge { font-size:12px; padding:3px 10px; border-radius:20px; font-weight:600; }
  .prod-eff-high { background:rgba(34,197,94,0.2); color:#22C55E; }
  .prod-eff-mid  { background:rgba(245,158,11,0.2); color:#F59E0B; }
  .prod-eff-low  { background:rgba(239,68,68,0.2);  color:#EF4444; }
  .prod-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
  .prod-stat { text-align:center; }
  .prod-stat-val { font-size:20px; font-weight:700; }
  .prod-stat-lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
  .prod-bar-wrap { background:rgba(255,255,255,0.06); border-radius:4px; height:6px; overflow:hidden; }
  .prod-bar-fill { height:100%; border-radius:4px; background:var(--orange); transition:width .5s; }
  .avg-time-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
  .avg-time-row:last-child { border-bottom:none; }
  .avg-time-label { font-size:13px; }
  .avg-time-val { font-size:13px; font-weight:600; color:var(--orange); }
  .avg-time-sub { font-size:11px; color:var(--text-muted); }

  /* ═══ FUNCIONALIDADES NOVAS ═══ */

  /* Carregando bibliotecas via CDN na secção de script abaixo */
  /* MODAL DE ASSINATURA */
  /* Quadro de assinatura — ecrã cheio + suporte para modo horizontal */
  .signature-modal { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:600; display:none; }
  .signature-modal.open { display:flex; flex-direction:column; }
  .signature-modal-box {
    background:var(--dark2); width:100%; height:100%;
    padding:14px 16px 18px; display:flex; flex-direction:column; gap:10px;
    border-radius:0; max-width:none;
  }
  .signature-modal-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; }
  .signature-modal-text { font-size:13px; color:var(--text-dim); line-height:1.4; }
  .signature-rotate-hint {
    font-size:12px; color:var(--orange); text-align:center; font-weight:600;
    background:rgba(61,249,243,.08); padding:8px 12px; border-radius:8px;
    border:1px solid rgba(61,249,243,.25);
  }
  @media (orientation: landscape) and (max-height: 500px) { .signature-rotate-hint { display:none; } }
  .signature-canvas {
    border:2.5px solid var(--orange); border-radius:var(--radius-sm); background:#fff;
    width:100%; flex:1; min-height:120px; cursor:crosshair; display:block;
    touch-action: none;
  }
  .signature-actions { display:flex; gap:10px; }
  .signature-actions button { flex:1; padding:14px 18px; font-size:15px; font-weight:700; }
  .signature-skip-btn { width:100%; opacity:.55; font-size:12px; padding:8px; }
  .signature-skip-btn:hover { opacity:.9; }
  /* Indicador no formulário quando a assinatura já foi recolhida */
  .form-sig-status {
    display:none; align-items:center; gap:8px; padding:10px 12px;
    background:rgba(34,197,94,.12); border:1.5px solid var(--green);
    border-radius:var(--radius-sm); color:var(--green); font-size:13px; font-weight:600;
    margin-top:8px;
  }
  .form-sig-status.show { display:flex; }
  .form-sig-button {
    width:100%; padding:14px; background:var(--orange-dim);
    border:2px dashed var(--orange); color:var(--orange); font-weight:700;
    border-radius:var(--radius-sm); cursor:pointer; font-size:14px; margin-top:10px;
  }
  .form-sig-button:active { transform:scale(.98); }

  /* Inventário de Routers */
  .router-item {
    display:flex; align-items:center; gap:12px; background:var(--dark2);
    border-radius:var(--radius); padding:12px 14px; margin-bottom:8px;
    border-left:3px solid var(--green); cursor:pointer; transition:all .15s;
  }
  .router-item:active { transform:scale(.99); }
  .router-item:hover { background:var(--dark3); }
  .router-item.router-used { border-left-color:var(--red); opacity:.75; }
  .router-info { flex:1; min-width:0; }
  .router-serial {
    font-family:'Courier New', monospace; font-size:13px;
    font-weight:700; letter-spacing:.5px; word-break:break-all; color:var(--text);
  }
  .router-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }

  /* CALENDÁRIO */
  .calendar-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--dark2); border-bottom:1px solid var(--dark3); }
  .calendar-nav-btn { background:var(--dark3); border:1px solid var(--dark4); border-radius:var(--radius-sm); padding:8px 12px; color:var(--text); cursor:pointer; }
  .calendar-month-display { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; }
  .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding:16px 20px; background:var(--dark2); }
  .calendar-day-header { text-align:center; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; padding:8px 0; }
  .calendar-day { aspect-ratio:1; background:var(--dark3); border-radius:var(--radius-sm); padding:8px; cursor:pointer; transition:all .15s; border:1.5px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
  .calendar-day:hover { border-color:var(--orange); }
  .calendar-day-number { font-weight:600; font-size:14px; }
  .calendar-day-dots { display:flex; gap:2px; margin-top:4px; flex-wrap:wrap; justify-content:center; }
  .calendar-day-dot { width:4px; height:4px; border-radius:50%; }
  .dot-ok { background:var(--green); }
  .dot-nok { background:var(--red); }
  .dot-pend { background:var(--orange); }
  .calendar-day-badge { font-size:9px; font-weight:700; background:var(--orange-dim); color:var(--orange); padding:1px 4px; border-radius:3px; position:absolute; bottom:2px; right:2px; }
  .calendar-day.empty { opacity:0.3; cursor:default; }
  .calendar-day.selected { background:var(--orange-dim); border-color:var(--orange); }
  #calendar-day-detail { padding:20px; }
  .calendar-detail-item { background:var(--dark3); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; border-left:3px solid transparent; }
  .calendar-detail-item.type-install { border-left-color:var(--green); }
  .calendar-detail-item.type-repair { border-left-color:var(--yellow); }
  .calendar-detail-client { font-weight:600; font-size:13px; }
  .calendar-detail-meta { font-size:11px; color:var(--text-muted); margin-top:4px; }

  /* RASTREIO */
  #screen-tracking { background:var(--dark); display:none; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
  #screen-tracking.active { display:flex; }
  .tracking-logo { font-family:'Syne',sans-serif; font-size:48px; font-weight:800; color:var(--orange); margin-bottom:32px; }
  .tracking-card { background:var(--dark2); border-radius:var(--radius); padding:28px 24px; max-width:400px; width:100%; }
  .tracking-client { font-size:13px; color:var(--text-muted); margin-bottom:4px; }
  .tracking-client-name { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:20px; }
  .tracking-status-icon { font-size:64px; text-align:center; margin-bottom:16px; }
  .tracking-status-label { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; text-align:center; margin-bottom:16px; color:var(--orange); }
  .tracking-info-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--dark3); font-size:13px; }
  .tracking-info-row:last-child { border-bottom:none; }
  .tracking-info-label { color:var(--text-muted); }
  .tracking-info-value { font-weight:600; text-align:right; }
  .tracking-message { text-align:center; font-size:13px; color:var(--text-dim); margin-top:16px; padding-top:16px; border-top:1px solid var(--dark3); }

  /* REPORTAR PDF */
  .cst-report-section { margin-bottom:20px; }
  .cst-report-filters { display:flex; flex-direction:column; gap:12px; padding:20px; background:var(--dark3); border-radius:var(--radius-sm); }
  .filter-field { display:flex; flex-direction:column; }
  .filter-field label { font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; }
  .filter-field input, .filter-field select { background:var(--dark2); border:1px solid var(--dark4); border-radius:var(--radius-sm); color:var(--text); padding:10px 12px; font-size:13px; }
  .cst-report-btn { background:var(--orange); color:#011e30; font-weight:700; width:100%; }

  
  /* ═══ LOGIN SCREEN ═══ */
  #screen-login {
    background:linear-gradient(160deg,#021a2b 0%,#06283d 55%,#0c3149 100%);
    align-items:center; justify-content:center; padding:32px 24px;
    position:relative; overflow:hidden;
  }
  #screen-login::before {
    content:''; position:absolute; top:-120px; left:-80px;
    width:400px; height:400px;
    background:radial-gradient(circle,rgba(46,230,214,.12) 0%,transparent 70%);
    pointer-events:none;
  }
  .login-card {
    width:100%; max-width:360px; background:var(--dark2);
    border:1px solid var(--dark3); border-radius:20px;
    padding:36px 28px 28px; position:relative; z-index:1;
  }
  .login-logo { font-family:'Syne',sans-serif; font-size:52px; font-weight:800;
    color:var(--orange); text-align:center; letter-spacing:-2px; }
  .login-sub { font-size:11px; color:var(--text-muted); text-align:center;
    letter-spacing:3px; text-transform:uppercase; margin-bottom:32px; }
  .login-error { font-size:12px; font-weight:600; text-align:center;
    min-height:18px; color:var(--red); margin-bottom:8px; }
  /* ═══ USERS TAB ═══ */
  .user-item { background:var(--dark2); border-radius:var(--radius); padding:14px 16px;
    margin-bottom:10px; display:flex; align-items:center; gap:12px; }
  .user-item-info { flex:1; }
  .user-item-name { font-size:14px; font-weight:700; }
  .user-item-meta { font-size:11px; color:var(--text-muted); margin-top:2px; }
  .user-create-box { background:var(--dark2); border-radius:var(--radius);
    padding:20px; border:1px solid var(--dark3); margin:0 20px 20px; }

  /* ═══════════════════════════════════════════════════════════
     MOBILE FIXES — iPad, iPhone, safe-areas, evitar zoom em inputs
     Adicionado em 2026-05-04 após reporte de "formatos estranhos".
     ═══════════════════════════════════════════════════════════ */

  /* Safe-area iPhone com notch (Dynamic Island, etc.) */
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }

  /* iOS Safari faz auto-zoom em inputs com font-size < 16px — anti-pattern */
  input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
  input[type="password"], input[type="search"], input[type="date"], input[type="time"],
  input[type="datetime-local"], select, textarea {
    font-size: 16px !important;
  }

  /* Touch targets mínimos: Apple HIG e Material Design recomendam 44px */
  button, .btn, .action-card, .mat-item {
    touch-action: manipulation;       /* evita delay 300ms e zoom em duplo-tap */
    -webkit-touch-callout: none;
  }
  button, .btn {
    min-height: 44px;
  }

  /* iPad e tablets: mostrar 3 colunas em vez de 2 e centrar conteúdo */
  @media (min-width: 768px) {
    .action-grid {
      grid-template-columns: repeat(3, 1fr);
      max-width: 760px;
      margin: 0 auto;
    }
    .topbar, .tech-home-hero {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }
    .modal-overlay {
      align-items: center !important;
    }
    .modal {
      max-width: 520px;
      border-radius: 20px;
      max-height: 80vh;
      margin: 0 auto;
    }
  }

  /* iPad em landscape — 4 colunas */
  @media (min-width: 1024px) {
    .action-grid {
      grid-template-columns: repeat(4, 1fr);
      max-width: 960px;
    }
    .topbar, .tech-home-hero {
      max-width: 960px;
    }
  }

  /* iPhone pequeno (SE, mini) */
  @media (max-width: 380px) {
    .action-grid { gap: 10px; padding: 14px; }
    .action-card { padding: 16px 10px; }
    .action-card-icon { font-size: 28px; }
    .action-card-label { font-size: 12px; }
    .topbar { padding: 12px 14px; gap: 8px; }
    .topbar-title { font-size: 15px; }
    .modal { padding: 20px 16px 32px; }
  }

  /* Modal de envio de PDF: garantir z-index máximo e bottom-sheet em mobile */
  #send-prompt-overlay {
    z-index: 9999;
  }
  @media (max-width: 767px) {
    #send-prompt-overlay {
      align-items: flex-end !important;
    }
    #send-prompt-overlay > div {
      border-radius: 20px 20px 0 0 !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
  }

  /* Modal de detalhe: scroll suave em iOS */
  .modal {
    -webkit-overflow-scrolling: touch;
  }

  /* Botões de ação no modal — wrap em mobile e tamanho adequado */
  @media (max-width: 480px) {
    .modal > div[style*="flex-wrap"] button,
    .modal > div[style*="display:flex"] button {
      min-width: calc(50% - 5px);
      font-size: 13px;
      padding: 10px 8px;
    }
  }

  /* Textarea em mobile: maior por default */
  @media (max-width: 767px) {
    textarea { min-height: 80px; }
  }

  /* Imagens dentro de cards/forms não estouram */
  img { max-width: 100%; height: auto; }

  /* Beontech card em iPad */
  @media (min-width: 768px) {
    #beontech-pendentes-block { max-width: 760px; margin: 0 auto 12px !important; }
  }

  /* Dropdown custom para SN dos Routers (substitui o <datalist> que não funciona bem em iOS) */
  #f-sn-suggestions {
    position: absolute;
    top: calc(100% - 8px);
    left: 0;
    right: 0;
    background: var(--dark2);
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    -webkit-overflow-scrolling: touch;
  }
  #f-sn-suggestions .sn-sug {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dark3);
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(61,249,243,0.3);
  }
  #f-sn-suggestions .sn-sug:last-child { border-bottom: none; }
  #f-sn-suggestions .sn-sug:active,
  #f-sn-suggestions .sn-sug:hover {
    background: var(--dark3);
    color: var(--accent);
  }
  #f-sn-suggestions .sn-sug-empty {
    padding: 14px 16px;
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
  }

  /* Dropdown de sugestões para Nº Fibra (Beontech) — mesmo estilo dos SN */
  #f-fibra-suggestions {
    position: absolute;
    top: calc(100% - 8px);
    left: 0;
    right: 0;
    background: var(--dark2);
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    -webkit-overflow-scrolling: touch;
  }
  #f-fibra-suggestions .fb-sug {
    padding: 12px 14px;
    border-bottom: 1px solid var(--dark3);
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(61,249,243,0.3);
  }
  #f-fibra-suggestions .fb-sug:last-child { border-bottom: none; }
  #f-fibra-suggestions .fb-sug:active,
  #f-fibra-suggestions .fb-sug:hover {
    background: var(--dark3);
  }
  #f-fibra-suggestions .fb-sug-fibra {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 700;
    color: var(--accent);
    font-size: 14px;
  }
  #f-fibra-suggestions .fb-sug-cliente {
    font-size: 13px;
    color: var(--text);
    margin-top: 2px;
  }
  #f-fibra-suggestions .fb-sug-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 1px;
  }
  #f-fibra-suggestions .fb-sug-tipo {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    margin-right: 6px;
    vertical-align: middle;
  }
  #f-fibra-suggestions .fb-sug-tipo.install { background: rgba(59,130,246,.2); color: #60a5fa; }
  #f-fibra-suggestions .fb-sug-tipo.repair { background: rgba(245,158,11,.2); color: #fbbf24; }
  #f-fibra-suggestions .fb-sug-empty {
    padding: 14px 16px;
    color: var(--text-dim);
    font-size: 13px;
    font-style: italic;
  }
/* ════════════════════════════════════════════════════════════════════
   CONTRASTE MODO SOL v2 (2026-06-29) — caixas "Trabalho por fazer" a
   BRANCO com borda e número ESCUROS (alto contraste, fim dos fundos
   pálidos tingidos que tornavam os números ilegíveis no fundo branco).
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .hoje-att.amb   { background:#ffffff; border-color:#d97706; color:#b45309; }
body[data-theme="light"] .hoje-att.blue  { background:#ffffff; border-color:#2563eb; color:#1d4ed8; }
body[data-theme="light"] .hoje-att.red   { background:#ffffff; border-color:#dc2626; color:#b91c1c; }
body[data-theme="light"] .hoje-att.teal  { background:#ffffff; border-color:#0f766e; color:#0f766e; }
body[data-theme="light"] .hoje-att.vio   { background:#ffffff; border-color:#7c3aed; color:#6d28d9; }
body[data-theme="light"] .hoje-att.slate { background:#ffffff; border-color:#475569; color:#334155; }
body[data-theme="light"] .hoje-att.zero  { background:#f8fafc; border-color:#cbd5e1; color:#64748b; opacity:1; }

/* ════════════════════════════════════════════════════════════════════
   CONTRASTE MODO SOL v3 (2026-06-29) — legibilidade das caixas:
   • ETIQUETAS a preto-azulado (alto contraste; antes eram coloridas e custavam a ler)
   • NÚMEROS em tons mais escuros/fortes da cor (mantém o código de cor, mas legível)
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .hoje-att-l { color:#1e293b; font-weight:800; }
body[data-theme="light"] .hoje-att.amb   .hoje-att-n { color:#92400e; }
body[data-theme="light"] .hoje-att.blue  .hoje
/* ════════════════════════════════════════════════════════════════════
   ENTRADA NO MODO SOL (2026-06-29) — login + role-picker com fundo CLARO,
   logótipo PRETO (trocado por JS) e texto escuro. Consistente com a app.
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] #screen-home { background: linear-gradient(160deg,#e0f2fe 0%,#f1f5f9 60%,#ffffff 100%); }
body[data-theme="light"] #screen-home .home-sub,
body[data-theme="light"] #screen-home #home-sync-status { color:#1e293b; }
body[data-theme="light"] #screen-home img[alt="ALLÔ SÃO TOMÉ"] { filter:none; }
body[data-theme="light"] #screen-login { background: linear-gradient(160deg,#e0f2fe 0%,#f1f5f9 60%,#ffffff 100%); }
body[data-theme="light"] .login-card { box-shadow:0 4px 16px rgba(15,23,42,.08); }
body[data-theme="light"] .login-logo { color:#0a1822; }
body[data-theme="light"] .login-sub { color:#475569; }

/* ════════════════════════════════════════════════════════════════════
   CONTRASTE v4 (2026-06-29) — CAIXAS A COR CHEIA + TEXTO BRANCO.
   O Paulo quer as cores (distinção rápida); o que falhava era a leitura
   do texto. Cor sólida + branco = contraste máximo e cada oferta salta à vista.
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .hoje-att.amb   { background:#ea580c !important; border-color:#ea580c !important; }
body[data-theme="light"] .hoje-att.blue  { background:#2563eb !important; border-color:#2563eb !important; }
body[data-theme="light"] .hoje-att.red   { background:#dc2626 !important; border-color:#dc2626 !important; }
body[data-theme="light"] .hoje-att.teal  { background:#0d9488 !important; border-color:#0d9488 !important; }
body[data-theme="light"] .hoje-att.vio   { background:#7c3aed !important; border-color:#7c3aed !important; }
body[data-theme="light"] .hoje-att.slate { background:#64748b !important; border-color:#64748b !important; }
body[data-theme="light"] .hoje-att .hoje-att-n,
body[data-theme="light"] .hoje-att .hoje-att-l { color:#ffffff !important; }
body[data-theme="light"] .hoje-att.zero { opacity:.55; }  /* caixas a 0: cor cheia mas esbatida (Variante A) */

/* ── ENTRADA v2: fundo AZUL DE MARCA (#015c94) + logo a cor; login com cartão branco ── */
body[data-theme="light"] #screen-home { background:linear-gradient(160deg,#015c94 0%,#013f66 60%,#012b46 100%) !important; }
body[data-theme="light"] #screen-home .home-sub,
body[data-theme="light"] #screen-home #home-sync-status { color:rgba(255,255,255,0.88) !important; }
body[data-theme="light"] #screen-home img[alt="ALLÔ SÃO TOMÉ"] { filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25)) !important; }
body[data-theme="light"] #screen-login { background:linear-gradient(160deg,#015c94 0%,#013f66 60%,#012b46 100%) !important; }
body[data-theme="light"] .login-card { background:#ffffff !important; box-shadow:0 8px 30px rgba(0,0,0,.25) !important; }
body[data-theme="light"] .login-logo { color:#015c94 !important; }
body[data-theme="light"] .login-sub { color:#475569 !important; }

/* ════════════════════════════════════════════════════════════════════
   ADMIN — COERÊNCIA (2026-06-29): os 4 cartões do topo com a MESMA regra
   das caixas (Variante A: cor cheia + texto branco). Cores alinhadas com
   as caixas: Instalações azul · Avarias laranja · Pendentes vermelho · Total azul-marca.
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .stat-card-clickable.stat-install { background:#2563eb !important; border-color:#2563eb !important; }
body[data-theme="light"] .stat-card-clickable.stat-repair  { background:#ea580c !important; border-color:#ea580c !important; }
body[data-theme="light"] .stat-card-clickable.stat-pending { background:#dc2626 !important; border-color:#dc2626 !important; }
body[data-theme="light"] .stat-card-clickable.stat-total   { background:#015c94 !important; border-color:#015c94 !important; }
body[data-theme="light"] .stat-card-clickable.stat-install *,
body[data-theme="light"] .stat-card-clickable.stat-repair *,
body[data-theme="light"] .stat-card-clickable.stat-pending *,
body[data-theme="light"] .stat-card-clickable.stat-total * { color:#ffffff !important; }
/* sub-estatísticas KPI (ok/nok) mais escuras no Modo sol */
body[data-theme="light"] .kpi-st.ok .kpi-st-n, body[data-theme="light"] .kpi-st.ok .kpi-st-t { color:#15803d !important; }
body[data-theme="light"] .kpi-st.nok .kpi-st-n, body[data-theme="light"] .kpi-st.nok .kpi-st-t { color:#b91c1c !important; }

/* ════════════════════════════════════════════════════════════════════
   ADMIN KPI v2 (2026-06-29) — sub-estatísticas Concluídas/Sem êxito/Pendentes
   a COR CHEIA + texto branco (mesmo esquema sólido das caixas).
   ════════════════════════════════════════════════════════════════════ */
body[data-theme="light"] .kpi-st.ok   { background:#16a34a !important; border-color:#16a34a !important; }
body[data-theme="light"] .kpi-st.nok  { background:#dc2626 !important; border-color:#dc2626 !important; }
body[data-theme="light"] .kpi-st.pend { background:#d97706 !important; border-color:#d97706 !important; }
body[data-theme="light"] .kpi-st.ok .kpi-st-n,   body[data-theme="light"] .kpi-st.ok .kpi-st-t,
body[data-theme="light"] .kpi-st.nok .kpi-st-n,  body[data-theme="light"] .kpi-st.nok .kpi-st-t,
body[data-theme="light"] .kpi-st.pend .kpi-st-n, body[data-theme="light"] .kpi-st.pend .kpi-st-t { color:#ffffff !important; }