/* ============================================================
       Tipografia: Escala Major Third (1.25)
       Base: 14px → títulos seguem a progressão ×1.25
       Espaçamento: Grid de 8pt (múltiplos de 8px)
       Sombras: Soft shadows em 3 camadas (sem bordas pesadas)
       Contraste: WCAG AA (mínimo 4.5:1 em texto normal)
       ============================================================ */

    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    /* === TOKENS DE DESIGN — DARK MODE (padrão) === */
    :root {
      /* --- Paleta cromática --- */
      --bg:  #060B14;
      --s1:  #0C1220;
      --s2:  #121A2C;
      --s3:  #1A2438;
      --s4:  #223050;

      /* Bordas — sutis, sem peso visual excessivo */
      --bd:  rgba(59,130,246,.12);
      --bd2: rgba(59,130,246,.22);
      --bd3: rgba(59,130,246,.36);

      /* Acentos — paleta harmônica azul-violeta */
      --ac:  #4F8EF7;   /* Azul primário — contraste 4.6:1 em bg */
      --ac2: #74AAFF;   /* Azul claro — links e badges */
      --ac3: #1D50BC;   /* Azul profundo — hover states */

      /* Estados semânticos */
      --gr:  #22C97A;   /* Sucesso — contraste 5.1:1 */
      --or:  #FDB645;   /* Aviso — contraste 7.2:1 */
      --rd:  #F56565;   /* Erro — contraste 5.8:1 */
      --pu:  #A78BFA;   /* Roxo — administrativo */
      --cy:  #38BDF8;   /* Ciano — dados/GPS */
      --ai:  #C084FC;   /* IA — violeta especial */

      /* Tipografia — WCAG AA garantido */
      --tx:  #EDF2F7;   /* Primário — contraste 14.5:1 */
      --tx2: #A0AEC0;   /* Secundário — contraste 6.2:1 */
      --tx3: #8090B0;   /* Terciário — uso em labels (WCAG AA: 6.3:1) */
      --tx4: #2D4060;   /* Placeholder/disabled */

      /* --- Tipografia — Major Third Scale (×1.25) --- */
      /* base = 13.5px */
      --text-xs:   10.8px;  /* 13.5 ÷ 1.25 */
      --text-sm:   12px;
      --text-base: 13.5px;
      --text-md:   14px;
      --text-lg:   16.875px; /* 13.5 × 1.25 */
      --text-xl:   21.09px;  /* × 1.25² */
      --text-2xl:  26.37px;  /* × 1.25³ */
      --text-3xl:  32.96px;  /* × 1.25⁴ */

      /* Line-heights */
      --lh-heading: 1.2;
      --lh-body:    1.55;
      --lh-compact: 1.35;

      /* Letter-spacing */
      --ls-heading: -0.03em;
      --ls-label:   0.06em;
      --ls-code:    0.01em;

      /* --- Grid 8pt --- */
      --sp-1: 4px;   /* meio-passo */
      --sp-2: 8px;   /* 1 unidade */
      --sp-3: 12px;
      --sp-4: 16px;  /* 2 unidades */
      --sp-5: 20px;
      --sp-6: 24px;  /* 3 unidades */
      --sp-8: 32px;  /* 4 unidades */
      --sp-10: 40px;
      --sp-12: 48px; /* 6 unidades */

      /* --- Border Radius --- */
      --r:  7px;
      --R:  12px;
      --Rx: 18px;   /* Para modais */

      /* --- Font stacks --- */
      --F:  'Inter', system-ui, -apple-system, sans-serif;
      --FM: 'JetBrains Mono', 'Cascadia Code', monospace;

      /* --- Soft Shadows (3 camadas) --- */
      /* Princípio: sombra ambiente + sombra direcional + highlight */
      --shadow-xs:  0 1px 2px rgba(0,0,0,.3),
                    0 1px 4px rgba(0,0,0,.2);
      --shadow-sm:  0 2px 4px rgba(0,0,0,.35),
                    0 4px 12px rgba(0,0,0,.25),
                    0 0 0 1px rgba(255,255,255,.02);
      --shadow:     0 4px 8px rgba(0,0,0,.4),
                    0 8px 24px rgba(0,0,0,.3),
                    0 0 0 1px rgba(255,255,255,.03);
      --shadow-lg:  0 8px 16px rgba(0,0,0,.45),
                    0 20px 48px rgba(0,0,0,.35),
                    0 0 0 1px rgba(255,255,255,.04);
      --shadow-ac:  0 4px 16px rgba(79,142,247,.3),
                    0 2px 6px rgba(79,142,247,.2);

      /* --- Transições --- */
      --ease-out: cubic-bezier(.16,1,.3,1);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      --t-fast: 120ms;
      --t-med: 200ms;
      --t-slow: 320ms;

      /* Glow para elementos ativos */
      --glow-ac: 0 0 20px rgba(79,142,247,.2);
    }

    /* === TOKENS DE DESIGN — LIGHT MODE === */
    html.light {
      --bg:  #EEF2F9;
      --s1:  #FFFFFF;
      --s2:  #F4F7FD;
      --s3:  #E8EDF8;
      --s4:  #D8E3F5;
      --bd:  rgba(37,99,235,.14);
      --bd2: rgba(37,99,235,.24);
      --bd3: rgba(37,99,235,.4);
      --ac:  #2563EB;
      --ac2: #1D4ED8;
      --ac3: #1E40AF;
      --gr:  #059669;
      --or:  #B45309;
      --rd:  #DC2626;
      --pu:  #7C3AED;
      --cy:  #0284C7;
      --ai:  #9333EA;
      --tx:  #0F172A;
      --tx2: #334155;
      --tx3: #64748B;
      --tx4: #94A3B8;
      --shadow-xs:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
      --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.02);
      --shadow:     0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03);
      --shadow-lg:  0 4px 12px rgba(0,0,0,.1), 0 20px 48px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
      --shadow-ac:  0 4px 16px rgba(37,99,235,.24), 0 2px 6px rgba(37,99,235,.14);
      --glow-ac:    0 0 20px rgba(37,99,235,.18);
    }

    /* === TOKENS DE DESIGN — BLUE FUTURISTA === */
    html.blue {
      color-scheme: dark;
      --bg:  #010A1A;
      --s1:  #020F28;
      --s2:  #041535;
      --s3:  #071C44;
      --s4:  #0A2255;

      --bd:  rgba(0,224,255,.10);
      --bd2: rgba(0,224,255,.22);
      --bd3: rgba(0,224,255,.40);

      --ac:  #00E5FF;
      --ac2: #40F0FF;
      --ac3: #009BBF;

      --gr:  #00FF9D;
      --or:  #FFB800;
      --rd:  #FF3D6B;
      --pu:  #CC00FF;
      --cy:  #00CFFF;
      --ai:  #D400FF;

      --tx:  #DCF4FF;
      --tx2: #7EC8E8;
      --tx3: #5FA8C9;
      --tx4: #164060;

      --shadow-xs:  0 1px 3px rgba(0,0,0,.5),
                    0 0 8px rgba(0,224,255,.05);
      --shadow-sm:  0 2px 6px rgba(0,0,0,.6),
                    0 4px 16px rgba(0,0,0,.4),
                    0 0 0 1px rgba(0,224,255,.06);
      --shadow:     0 4px 12px rgba(0,0,0,.65),
                    0 10px 30px rgba(0,0,0,.5),
                    0 0 0 1px rgba(0,224,255,.08);
      --shadow-lg:  0 8px 24px rgba(0,0,0,.7),
                    0 24px 56px rgba(0,0,0,.55),
                    0 0 0 1px rgba(0,224,255,.10);
      --shadow-ac:  0 4px 20px rgba(0,224,255,.45),
                    0 2px 8px rgba(0,224,255,.25),
                    0 0 40px rgba(0,224,255,.10);
      --glow-ac:    0 0 30px rgba(0,224,255,.35),
                    0 0 60px rgba(0,224,255,.12);
    }

    /* Efeitos especiais somente no tema Blue */
    html.blue .sb {
      background: linear-gradient(180deg, #020F28 0%, #010A1A 100%);
      border-right-color: rgba(0,224,255,.12);
      box-shadow: 4px 0 32px rgba(0,224,255,.06);
    }
    html.blue .sb-ico {
      background: linear-gradient(135deg, #00E5FF 0%, #CC00FF 100%);
      box-shadow: 0 0 20px rgba(0,224,255,.5), 0 0 40px rgba(0,224,255,.15);
    }
    html.blue .ni.on {
      background: rgba(0,224,255,.10);
      color: var(--ac);
    }
    html.blue .ni.on::before {
      background: linear-gradient(180deg, #00E5FF, #CC00FF);
    }
    html.blue .tb {
      background: linear-gradient(90deg, #010A1A 0%, #020F28 100%);
      border-bottom-color: rgba(0,224,255,.12);
      box-shadow: 0 1px 0 rgba(0,224,255,.08), 0 2px 20px rgba(0,0,0,.4);
    }
    html.blue .kpi::after { background: linear-gradient(90deg, #00E5FF, #CC00FF); }
    html.blue .kb::after  { background: linear-gradient(90deg, #00E5FF, #CC00FF); }
    html.blue .kb .kv { color: var(--ac); text-shadow: 0 0 16px rgba(0,224,255,.6); }
    html.blue .kg .kv { color: var(--gr); text-shadow: 0 0 14px rgba(0,255,157,.5); }
    html.blue .ko .kv { color: var(--or); text-shadow: 0 0 14px rgba(255,184,0,.4); }
    html.blue .kp .kv { color: var(--ai); text-shadow: 0 0 14px rgba(212,0,255,.5); }
    html.blue .card {
      background: var(--s1);
      border-color: rgba(0,224,255,.10);
    }
    html.blue .card:hover { border-color: rgba(0,224,255,.28); box-shadow: var(--shadow), 0 0 24px rgba(0,224,255,.08); }
    html.blue .modal {
      background: var(--s1);
      border-color: rgba(0,224,255,.20);
      box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 60px rgba(0,224,255,.08);
    }
    html.blue .btn-tema {
      background: rgba(0,224,255,.08);
      border-color: rgba(0,224,255,.25);
      color: var(--ac2);
    }
    html.blue .btn-tema:hover {
      background: rgba(0,224,255,.16);
      border-color: rgba(0,224,255,.5);
      box-shadow: 0 0 16px rgba(0,224,255,.2);
    }
    html.blue .bac {
      background: linear-gradient(135deg, #00AABB, #00E5FF);
      color: #001A24;
      box-shadow: 0 0 16px rgba(0,224,255,.35);
    }
    html.blue .bac:hover { background: linear-gradient(135deg, #00C8DD, #40F0FF); box-shadow: 0 0 24px rgba(0,224,255,.55); }
    html.blue .cbar { background: linear-gradient(180deg, #00E5FF, #CC00FF); }
    html.blue input:focus, html.blue select:focus, html.blue textarea:focus {
      border-color: var(--ac);
      box-shadow: 0 0 0 3px rgba(0,224,255,.18), 0 0 12px rgba(0,224,255,.12);
    }
    html.blue .tw { border-color: rgba(0,224,255,.12); }
    html.blue .tw th { background: #030E22; color: var(--tx3); border-bottom-color: rgba(0,224,255,.10); }
    html.blue .tw tbody tr:hover td { background: rgba(0,224,255,.04); }
    html.blue .abox.info  { background: rgba(0,224,255,.07);  border-color: rgba(0,224,255,.22);  color: var(--ac2); }
    html.blue .abox.warn  { background: rgba(255,184,0,.07);  border-color: rgba(255,184,0,.22);  color: var(--or); }
    html.blue .abox.suc   { background: rgba(0,255,157,.07);  border-color: rgba(0,255,157,.22);  color: var(--gr); }
    html.blue .abox.ai    { background: rgba(212,0,255,.07);  border-color: rgba(212,0,255,.22);  color: var(--ai); }
    html.blue .pf { background: linear-gradient(90deg, #00E5FF, #CC00FF); }
    html.blue .bgps { background: rgba(0,207,255,.12); border-color: rgba(0,207,255,.25); color: var(--cy); }
    html.blue .bai2 { background: rgba(212,0,255,.12); border-color: rgba(212,0,255,.22); color: var(--ai); }
    /* Scanline sutil no fundo — efeito futurista */
    html.blue body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,224,255,.012) 2px,
        rgba(0,224,255,.012) 4px
      );
      pointer-events: none;
      z-index: 0;
    }
    html.blue .app { position: relative; z-index: 1; }
    /* Glow no acento ativo da nav */
    html.blue .ni:hover { background: rgba(0,224,255,.06); color: var(--tx); }
    /* Scrollbar neon */
    html.blue ::-webkit-scrollbar-thumb { background: rgba(0,224,255,.25); }
    html.blue ::-webkit-scrollbar-track { background: #010A1A; }

    /* === RESET & BASE === */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--tx);
      font-family: var(--F);
      font-size: var(--text-md);
      line-height: var(--lh-body);
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    /* === TRANSIÇÃO DE TEMA — suave, sem quebrar animações específicas === */
    :root { color-scheme: dark }
    html.light { color-scheme: light }

    *:not(.btn):not(.ni):not(.kpi):not(.foto-card):not(.ni-app):not(.gal-pag-btn):not(.mo):not(.mo > div) {
      transition:
        background-color var(--t-med) var(--ease-in-out),
        border-color var(--t-med) var(--ease-in-out),
        color var(--t-fast) var(--ease-in-out);
    }

    /* Botões, cards, nav items — transições específicas e controladas */
    .btn, .ni, .kpi, .foto-card, .ni-app, .gal-pag-btn {
      transition:
        background-color var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out),
        transform var(--t-fast) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out) !important;
    }

    /* === APP SHELL === */
    .app { display: flex; height: 100vh; }

    /* === SIDEBAR === */
    .sb {
      width: 236px;
      flex-shrink: 0;
      background: var(--s1);
      border-right: 1px solid var(--bd);
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 24px rgba(0,0,0,.18);
    }

    .sb-h {
      padding: var(--sp-4) var(--sp-3) var(--sp-3);
      border-bottom: 1px solid var(--bd);
    }

    .sb-brand {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }

    .sb-ico {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, #4F8EF7 0%, #A78BFA 100%);
      border-radius: var(--r);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-family: 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
      flex-shrink: 0;
      box-shadow: var(--shadow-ac);
    }

    .sb-tit {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--tx);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
    }

    .sb-sub {
      font-size: var(--text-xs);
      color: var(--tx3);
      margin-top: 2px;
      letter-spacing: .02em;
    }

    .sb-nav {
      flex: 1;
      padding: var(--sp-2) var(--sp-1);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      scrollbar-width: thin;
      scrollbar-color: var(--bd2) transparent;
    }
    .sb-nav::-webkit-scrollbar { width: 3px; }
    .sb-nav::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 2px; }

    /* === SECTION HEADERS DA NAV === */
    .ns {
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: var(--ls-label);
      padding: var(--sp-3) var(--sp-2) var(--sp-1);
      margin-top: var(--sp-1);
    }

    /* === NAV ITEMS === */
    .ni {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding: var(--sp-2) var(--sp-3);
      border-radius: var(--r);
      cursor: pointer;
      color: var(--tx2);
      font-size: var(--text-sm);
      font-weight: 500;
      line-height: var(--lh-compact);
      position: relative;
      user-select: none;
    }

    .ni:hover {
      background: var(--s3);
      color: var(--tx);
    }

    .ni.on {
      background: rgba(79,142,247,.12);
      color: var(--ac);
      font-weight: 600;
    }

    /* Indicador ativo — barra vertical esquerda */
    .ni.on::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 3px; height: 55%;
      background: linear-gradient(180deg, var(--ac), var(--pu));
      border-radius: 0 3px 3px 0;
    }

    .ni-ico {
      font-size: 14px;
      width: 18px;
      text-align: center;
      flex-shrink: 0;
    }

    .ni-adm { display: none; }

    .sb-ft {
      padding: var(--sp-3) var(--sp-4);
      border-top: 1px solid var(--bd);
      font-size: var(--text-xs);
      color: var(--tx3);
    }

    /* === TOPBAR THEME TOGGLE === */
    .btn-tema {
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: 20px;
      padding: var(--sp-1) var(--sp-3);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      font-size: var(--text-sm);
      font-weight: 600;
      font-family: var(--F);
      color: var(--tx2);
    }

    .btn-tema:hover {
      background: var(--s3);
      color: var(--tx);
      border-color: var(--bd2);
      box-shadow: var(--shadow-xs);
    }

    .btn-tema .tema-ico { font-size: 14px; line-height: 1; }

    /* === MAIN AREA === */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }

    /* === PAGE CONTAINER & VISIBILITY === */
    .cnt { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; position: relative; }
    .page { display: none; width: 100%; height: 100%; overflow-y: auto; }
    .page.on { display: block; padding: 20px; }

    /* === TOPBAR (Toolbar) === */
    .tb {
      background: var(--s1);
      border-bottom: 1px solid var(--bd);
      padding: 0 var(--sp-6);
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      flex-shrink: 0;
      box-shadow: 0 1px 0 var(--bd), 0 2px 8px rgba(0,0,0,.12);
    }

    .tb-t {
      font-size: var(--text-lg);
      font-weight: 800;
      letter-spacing: var(--ls-heading);
      line-height: var(--lh-heading);
      color: var(--tx);
    }

    .tb-s {
      font-size: var(--text-xs);
      color: var(--tx3);
      margin-top: 2px;
      letter-spacing: .01em;
    }

    .tb-r {
      display: flex;
      gap: var(--sp-2);
      align-items: center;
      flex-wrap: wrap;
    }

    /* BOOT / LOGIN (MOVED TO CRITICAL) */
    #boot-screen {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 14px;
      transition: opacity .4s
    }
    #boot-screen.hidden { opacity: 0; pointer-events: none }
    .boot-logo {
      width: 56px; height: 56px;
      background: linear-gradient(135deg, #3B82F6, #8B5CF6);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; box-shadow: 0 6px 20px rgba(59, 130, 246, .4)
    }
    .boot-txt { font-size: 13px; color: var(--tx3) }

  /* === DEFERRED STYLES === */

    /* DEFERRED STYLES — (Layout, Cards, Gallery, Forms, Modals) */
    #pg-upload {
      padding: 0;
      overflow: hidden;
      display: none;
      flex-direction: column
    }

    #pg-upload.on {
      display: flex
    }

    .up-topbar {
      flex-shrink: 0;
      padding: 11px 18px;
      border-bottom: 1px solid var(--bd);
      background: var(--s1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap
    }

    .up-topbar-left {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .up-topbar-title {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.3px;
      color: var(--tx)
    }

    /* ── SPLIT LAYOUT 50/50 ───────────────────────────────────── */
    .up-body {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 0;
      overflow: hidden
    }

    .up-col {
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0
    }

    .up-col-l {
      border-right: 1px solid var(--bd);
      background: var(--s1);
      position: relative
    }
    .up-col-l::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--bd2) 20%, var(--bd2) 80%, transparent)
    }

    /* Coluna direita — preview + GPS */
    .up-col:not(.up-col-l) {
      background: var(--bg)
    }

    .up-col::-webkit-scrollbar { width: 6px }
    .up-col::-webkit-scrollbar-track { background: var(--s1) }
    .up-col::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: 3px }
    .up-col::-webkit-scrollbar-thumb:hover { background: var(--ac) }

    /* Label da coluna direita */
    .up-col-r-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0 2px;
      border-bottom: 1px solid var(--bd);
      margin-bottom: 4px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--tx3)
    }

    /* === MENU HAMBURGUER === */
    .btn-hamburguer {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      padding: 6px;
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: var(--r);
      cursor: pointer;
      flex-shrink: 0;
    }
    .btn-hamburguer span {
      display: block;
      height: 2px;
      background: var(--tx);
      border-radius: 2px;
      transition: transform var(--t-med) ease, opacity var(--t-med) ease;
    }
    .btn-hamburguer:hover { background: var(--s3); }

    /* Overlay escurecido ao abrir sidebar no mobile */
    #sb-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 300;
      backdrop-filter: blur(2px);
    }
    #sb-overlay.on { display: block; }

    /* Responsivo: empilhar abaixo de 900px */
    @media (max-width: 900px) {
      .up-body {
        grid-template-columns: 1fr;
        overflow-y: auto
      }
      .up-col {
        overflow-y: visible
      }
      .up-col-l::after {
        display: none
      }
      .up-col-l {
        border-right: none;
        border-bottom: 1px solid var(--bd)
      }
    }

    /* === RESPONSIVO MOBILE (≤ 768px) === */
    @media (max-width: 768px) {
      /* Hamburguer visível */
      .btn-hamburguer { display: flex; }

      /* Sidebar vira gaveta lateral */
      .sb {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 400;
        transform: translateX(-100%);
        transition: transform var(--t-slow) ease;
        width: 260px;
      }
      .sb.aberta { transform: translateX(0); }

      /* Topbar ocupa largura total */
      .tb { padding: 0 12px; }

      /* Pills e botões menores */
      .pill { font-size: 10px; padding: 3px 8px; }
      .btn-tema span:last-child { display: none; }
      .btn-tema { padding: 4px 8px; }

      /* Conteúdo ocupa tela inteira sem a sidebar */
      .main { width: 100%; min-width: 0; }

      /* Cards em coluna única */
      .g4, .g3, .g2 { grid-template-columns: 1fr !important; }
    }

    /* COORD TABS */
    .coord-tabs {
      display: flex;
      gap: 2px;
      background: var(--s3);
      border-radius: calc(var(--r) + 2px);
      padding: 3px;
      margin-bottom: 12px
    }

    .coord-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 8px;
      border-radius: var(--r);
      font-size: 11px;
      font-weight: 600;
      font-family: var(--F);
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--tx3);
      transition: .15s;
      white-space: nowrap
    }

    .coord-tab:hover {
      color: var(--tx2);
      background: rgba(255, 255, 255, .04)
    }

    .coord-tab.active {
      background: var(--ac);
      color: #fff;
      box-shadow: 0 2px 8px rgba(59, 130, 246, .35)
    }

    /* PREVIEW */
    .foto-preview-placeholder {
      width: 100%;
      min-height: 180px;
      background: var(--s3);
      border-radius: var(--r);
      border: 1.5px dashed var(--bd2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    .foto-preview-img {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
      border-radius: var(--r);
      border: 1px solid var(--bd2);
      background: var(--s3);
      display: block;
      cursor: zoom-in;
      transition: max-height .25s ease
    }

    .foto-preview-img.zoomed {
      max-height: none;
      cursor: zoom-out
    }

    /* GPS */
    .gps-chip {
      background: rgba(59, 130, 246, .08);
      border: 1px solid rgba(59, 130, 246, .28);
      border-radius: var(--r);
      padding: 9px 12px;
      margin-top: 10px;
      font-family: var(--FM);
      font-size: 12px;
      display: none
    }

    .gps-chip.show {
      display: block
    }

    .gps-chip-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--tx3);
      margin-bottom: 4px
    }

    .gps-chip-val {
      color: var(--cy);
      font-size: 13px
    }

    .gps-chip-val span {
      color: var(--tx3);
      font-size: 10px;
      margin-right: 2px
    }

    .gps-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 12px
    }

    .gps-actions .btn {
      justify-content: center;
      font-size: 11px
    }

    .exif-banner {
      display: none;
      margin-top: 8px;
      padding: 8px 12px;
      background: rgba(16, 185, 129, .07);
      border: 1px solid rgba(16, 185, 129, .28);
      border-radius: var(--r);
      font-size: 11px;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .exif-banner.show {
      display: flex
    }

    /* QUEUE */
    .queue-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 2px 8px
    }

    .queue-count {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--tx2)
    }

    .drive-info-strip {
      font-size: 10.5px;
      color: var(--tx3);
      padding: 8px 12px;
      background: rgba(59, 130, 246, .05);
      border: 1px solid rgba(59, 130, 246, .14);
      border-radius: var(--r);
      flex-shrink: 0;
      line-height: 1.5
    }

    /* UTILS */
    .flex {
      display: flex
    }

    .flex-col {
      flex-direction: column
    }

    .items-center {
      align-items: center
    }

    .justify-between {
      justify-content: space-between
    }

    .gap-1 {
      gap: 4px
    }

    .gap-2 {
      gap: 8px
    }

    .gap-3 {
      gap: 12px
    }

    .mt-2 {
      margin-top: 8px
    }

    .mt-3 {
      margin-top: 12px
    }

    .text-xs {
      font-size: 10px
    }

    .text-sm {
      font-size: 12px
    }

    .text-muted {
      color: var(--tx3)
    }

    .text-mono {
      font-family: var(--FM)
    }

    .font-bold {
      font-weight: 700
    }

    .w-full {
      width: 100%
    }

    .shrink-0 {
      flex-shrink: 0
    }

    .rounded {
      border-radius: var(--r)
    }

    .rounded-lg {
      border-radius: var(--R)
    }

    /* GRIDS */
    .g2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 14px
    }

    .g3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 14px
    }

    .g4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 14px
    }

    @media(max-width:1200px) {
      .g4 {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media(max-width:900px) {
      .g4 {
        grid-template-columns: repeat(2, 1fr)
      }

      .g2 {
        grid-template-columns: 1fr
      }
    }

    /* === CARDS === */
    .card {
      background: var(--s1);
      border: 1px solid var(--bd);
      border-radius: var(--R);
      padding: var(--sp-4);
      box-shadow: var(--shadow-sm);
      transition: border-color var(--t-fast) var(--ease-out),
                  box-shadow var(--t-med) var(--ease-out);
    }

    .card:hover { border-color: var(--bd2); box-shadow: var(--shadow); }

    /* === CARD TITLE === */
    .ctit {
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--tx2);
      text-transform: uppercase;
      letter-spacing: var(--ls-label);
      margin-bottom: var(--sp-3);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .cbar {
      width: 3px; height: 13px;
      border-radius: 2px;
      flex-shrink: 0;
      background: linear-gradient(180deg, var(--ac), var(--pu));
    }

    /* === KPI CARDS === */
    /* Princípio Gestalt: Proximidade — valores e labels agrupados visivelmente */
    .kpi {
      background: var(--s1);
      border: 1px solid var(--bd);
      border-radius: var(--R);
      padding: var(--sp-4);
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition:
        border-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out),
        transform var(--t-fast) var(--ease-out);
    }

    .kpi:hover {
      border-color: var(--bd2);
      box-shadow: var(--shadow);
      transform: translateY(-2px);
    }

    /* Bottom glow line — identidade visual dos KPIs */
    .kpi::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
    }

    .kb::after { background: linear-gradient(90deg, var(--ac), var(--pu)) }

    .kg::after {
      background: linear-gradient(90deg, var(--gr), var(--cy))
    }

    .ko::after {
      background: linear-gradient(90deg, var(--or), #F97316)
    }

    .kp::after {
      background: linear-gradient(90deg, var(--ai), #EC4899)
    }

    .kh::after { background: linear-gradient(90deg, var(--pu), #EC4899) }
    .kh .kv { color: var(--pu) }

    .kl {
      font-size: 9.5px;
      color: var(--tx3);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 700
    }

    .kv {
      font-size: 26px;
      font-weight: 800;
      margin: 4px 0 2px;
      line-height: 1
    }

    .kb .kv {
      color: var(--ac)
    }

    .kg .kv {
      color: var(--gr)
    }

    .ko .kv {
      color: var(--or)
    }

    .kp .kv {
      color: var(--ai)
    }

    .ks {
      font-size: 10.5px;
      color: var(--tx3)
    }

    .ki {
      position: absolute;
      right: 12px;
      top: 12px;
      font-size: 22px;
      opacity: .18
    }

    /* === BOTÕES — Design System === */
    /* Princípio: feedback imediato via transform + shadow (sem delay perceptivo) */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      padding: var(--sp-2) var(--sp-4);
      border-radius: var(--r);
      border: none;
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: 600;
      font-family: var(--F);
      white-space: nowrap;
      line-height: 1;
      letter-spacing: .01em;
      transition:
        transform var(--t-fast) var(--ease-out),
        box-shadow var(--t-fast) var(--ease-out),
        background-color var(--t-fast) var(--ease-out),
        opacity var(--t-fast) var(--ease-out);
    }
    .btn:active { transform: scale(.97) translateY(0) !important; }

    /* --- Botões com cor de fundo (filled) --- */
    .bac { background: var(--ac); color: #fff; }
    .bac:hover { background: #3E7EF0; transform: translateY(-1px); box-shadow: var(--shadow-ac); }

    .bgr { background: var(--gr); color: #fff; }
    .bgr:hover { background: #18B36A; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34,201,122,.35); }

    .bpu { background: var(--pu); color: #fff; }
    .bpu:hover { background: #9170EB; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(167,139,250,.35); }

    .brd { background: var(--rd); color: #fff; }
    .brd:hover { background: #E85555; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,101,101,.35); }

    .bor { background: var(--or); color: #000; font-weight: 700; }
    .bor:hover { background: #E8A830; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(253,182,69,.3); }

    .bai { background: linear-gradient(135deg, var(--ai), #EC4899); color: #fff; }
    .bai:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192,132,252,.35); }

    /* --- Ghost (outline) --- */
    .bgh {
      background: var(--s2);
      color: var(--tx2);
      border: 1px solid var(--bd);
    }
    .bgh:hover { background: var(--s3); color: var(--tx); border-color: var(--bd2); box-shadow: var(--shadow-xs); }

    /* --- Outline (border only) --- */
    .bor2 {
      background: transparent;
      color: var(--ac);
      border: 1px solid var(--bd3);
    }
    .bor2:hover { background: rgba(79,142,247,.08); border-color: var(--ac); }

    /* --- Tamanho pequeno (small) --- */
    .bsm { padding: var(--sp-1) var(--sp-2); font-size: var(--text-xs); gap: var(--sp-1); }

    /* --- Estado desabilitado --- */
    .btn:disabled {
      opacity: .38;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }

    /* === FORM ELEMENTS === */
    /* Princípio: Focus ring claro para acessibilidade WCAG 2.4.7 */
    input, select, textarea {
      background: var(--s2);
      border: 1px solid var(--bd);
      color: var(--tx);
      border-radius: var(--r);
      padding: var(--sp-2) var(--sp-3);
      font-size: var(--text-sm);
      font-family: var(--F);
      outline: none;
      line-height: var(--lh-body);
      transition:
        border-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-fast) var(--ease-out);
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--ac);
      box-shadow: 0 0 0 3px rgba(79,142,247,.18);
    }

    input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
      border-color: var(--bd2);
    }

    input::placeholder, textarea::placeholder { color: var(--tx3); opacity: 1; }

    label {
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--tx2);
      margin-bottom: var(--sp-1);
      display: block;
      letter-spacing: .01em;
    }

    .fg { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
    .fg input, .fg select, .fg textarea { width: 100%; }

    .fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }
    textarea { resize: vertical; min-height: 65px; }

    /* === DROPZONE === */
    .dz {
      border: 2px dashed var(--bd2);
      border-radius: var(--R);
      padding: var(--sp-10) var(--sp-5);
      text-align: center;
      cursor: pointer;
      transition:
        border-color var(--t-med) var(--ease-out),
        background-color var(--t-med) var(--ease-out),
        transform var(--t-fast) var(--ease-out);
      background: var(--s2);
      position: relative;
      margin-bottom: var(--sp-3);
    }

    .dz:hover, .dz.hv {
      border-color: var(--ac);
      background: rgba(79,142,247,.05);
      box-shadow: var(--shadow-ac);
    }

    .dz input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

    .dz-i { font-size: 34px; margin-bottom: var(--sp-2); opacity: .35; }
    .dz-t { font-size: var(--text-md); font-weight: 700; margin-bottom: 3px; }
    .dz-s { font-size: var(--text-xs); color: var(--tx3); }

    /* GALERIA — melhorada: 4-6 colunas, lazy, filtros */
    .gal-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap
    }

    .gal-filters {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      align-items: center
    }

    .gal-view-btns {
      display: flex;
      gap: 4px
    }

    .gal-view-btn {
      background: var(--s2);
      border: 1px solid var(--bd);
      color: var(--tx3);
      border-radius: 6px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 12px;
      transition: .15s
    }

    .gal-view-btn.active {
      background: var(--ac);
      border-color: var(--ac);
      color: #fff
    }

    /* Grid compacto por padrão */
    .galeria {
      display: grid;
      gap: 8px;
      margin-bottom: 14px
    }

    .galeria.view-lg {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }

    .galeria.view-md {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))
    }

    .galeria.view-sm {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
    }

    /* FOTO CARD */
    .foto-card {
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: var(--r);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: .2s
    }

    .foto-card:hover {
      border-color: var(--ac);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .4)
    }

    .foto-card img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      display: block;
      background: var(--s3)
    }

    .foto-card .fc-info {
      padding: 7px 9px
    }

    .foto-card .fc-data {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--tx);
      margin-bottom: 2px
    }

    .foto-card .fc-loc {
      font-size: 10px;
      color: var(--tx3);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .foto-card .fc-gps {
      font-size: 9.5px;
      color: var(--cy);
      font-family: var(--FM);
      margin-top: 2px
    }

    .foto-card .fc-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .75);
      opacity: 0;
      transition: .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      flex-direction: column
    }

    .foto-card:hover .fc-overlay {
      opacity: 1
    }

    .fc-overlay-btns {
      display: flex;
      gap: 6px
    }

    .foto-card .fc-ai {
      position: absolute;
      top: 6px;
      right: 6px;
      background: linear-gradient(135deg, var(--ai), #EC4899);
      color: #fff;
      font-size: 8.5px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      display: none
    }

    .foto-card.has-ai .fc-ai {
      display: block
    }

    .foto-card .fc-num {
      position: absolute;
      top: 6px;
      left: 6px;
      background: rgba(0, 0, 0, .75);
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 5px;
      font-family: var(--FM)
    }

    .foto-card .fc-tipo-badge {
      position: absolute;
      bottom: 42px;
      left: 6px;
      font-size: 8.5px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(59, 130, 246, .8);
      color: #fff
    }

    /* PAGINAÇÃO GALERIA */
    .gal-paginacao {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 14px 0;
      flex-wrap: wrap
    }

    .gal-pag-btn {
      background: var(--s2);
      border: 1px solid var(--bd);
      color: var(--tx2);
      border-radius: 6px;
      padding: 5px 11px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--F);
      transition: .15s;
      min-width: 36px;
      text-align: center
    }

    .gal-pag-btn:hover {
      border-color: var(--ac);
      color: var(--ac)
    }

    .gal-pag-btn.active {
      background: var(--ac);
      border-color: var(--ac);
      color: #fff
    }

    .gal-pag-btn:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    /* === BADGES === */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px var(--sp-2);
      border-radius: 20px;
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .02em;
    }

    .badm { background: rgba(167,139,250,.18); color: var(--pu); border: 1px solid rgba(167,139,250,.25); }
    .busr { background: rgba(79,142,247,.15); color: var(--ac2); border: 1px solid rgba(79,142,247,.22); }
    .bgps { background: rgba(56,189,248,.12); color: var(--cy); border: 1px solid rgba(56,189,248,.22); }
    .bai2 { background: rgba(192,132,252,.12); color: var(--ai); border: 1px solid rgba(192,132,252,.2); }

    /* === PILLS (topbar counters) === */
    .pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .pill.pb { background: rgba(79,142,247,.12); border-color: rgba(79,142,247,.25); color: var(--ac2); }
    .pill.pg { background: rgba(34,201,122,.10); border-color: rgba(34,201,122,.25); color: var(--gr); }
    .pill.pp { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.25); color: var(--pu); }

    /* === DATA TABLE === */
    /* Princípio Gestalt: Semelhança — linhas alternadas destacam grupos */
    .tw { overflow: auto; border-radius: var(--R); border: 1px solid var(--bd); box-shadow: var(--shadow-sm); }

    .tw table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

    .tw thead { position: sticky; top: 0; z-index: 2; }

    .tw th {
      background: var(--s3);
      color: var(--tx3);
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--ls-label);
      padding: var(--sp-2) var(--sp-3);
      text-align: left;
      border-bottom: 1px solid var(--bd);
      white-space: nowrap;
    }

    .tw td {
      padding: var(--sp-2) var(--sp-3);
      border-bottom: 1px solid rgba(79,142,247,.06);
      vertical-align: middle;
      line-height: var(--lh-compact);
    }

    .tw tr:last-child td { border-bottom: none; }
    .tw tbody tr:hover td { background: rgba(79,142,247,.04); }

    /* === MODAIS === */
    /* Microinteração: backdrop blur + fade + slide (percepção de profundidade) */
    .mo {
      position: fixed;
      inset: 0;
      background: rgba(2,6,16,.75);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px) saturate(.9);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--t-med) var(--ease-in-out);
    }

    html.light .mo { background: rgba(15,23,42,.5); }

    .mo.open {
      opacity: 1;
      pointer-events: all
    }

    .modal {
      background: var(--s1);
      border: 1px solid var(--bd2);
      border-radius: 14px;
      padding: 24px;
      width: 540px;
      max-width: 94vw;
      max-height: 92vh;
      overflow-y: auto;
      transform: translateY(16px);
      transition: .2s
    }

    .mo.open .modal {
      transform: none
    }

    .modal.wide {
      width: 860px
    }

    .modal.ultra {
      width: 1000px
    }

    /* === MODAL PANEL === */
    .mt {
      font-size: var(--text-md);
      font-weight: 800;
      letter-spacing: var(--ls-heading);
      margin-bottom: var(--sp-4);
      display: flex;
      align-items: center;
      gap: var(--sp-2);
    }

    .ma {
      display: flex;
      gap: var(--sp-2);
      justify-content: flex-end;
      margin-top: var(--sp-5);
      flex-wrap: wrap;
    }

    /* MODAL EDIÇÃO FOTO — melhorado */
    .foto-edit-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .foto-viewer-wrap {
      position: relative
    }

    .foto-viewer-img {
      width: 100%;
      max-height: 360px;
      object-fit: contain;
      border-radius: var(--r);
      background: var(--s3);
      margin-bottom: 10px;
      border: 1px solid var(--bd)
    }

    .foto-viewer-img.zoomable {
      cursor: zoom-in
    }

    .foto-viewer-img.zoomable.zoomed {
      max-height: none;
      cursor: zoom-out
    }

    /* === META ROWS (Photo Detail) === */
    .meta-row {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-2);
      padding: var(--sp-2) 0;
      border-bottom: 1px solid var(--bd);
      font-size: var(--text-sm);
    }

    .meta-row:last-child { border-bottom: none; }

    .meta-key {
      width: 100px;
      flex-shrink: 0;
      color: var(--tx3);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .01em;
    }

    .meta-val { color: var(--tx); flex: 1; word-break: break-all; }
    .meta-val.mono { font-family: var(--FM); font-size: var(--text-xs); color: var(--cy); }

    /* === AI ANALYSIS BOX === */
    .ai-box {
      background: linear-gradient(135deg, rgba(192,132,252,.07), rgba(236,72,153,.05));
      border: 1px solid rgba(192,132,252,.22);
      border-radius: var(--r);
      padding: var(--sp-3) var(--sp-4);
      margin-top: var(--sp-3);
      box-shadow: 0 2px 8px rgba(192,132,252,.08);
    }

    .ai-box-tit {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--ai);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .ai-box-txt {
      font-size: 12px;
      color: var(--tx2);
      line-height: 1.65
    }

    /* PROGRESS */
    .pbar {
      background: var(--s3);
      border-radius: 4px;
      height: 5px;
      overflow: hidden;
      margin: 7px 0
    }

    .pf {
      height: 100%;
      border-radius: 4px;
      transition: width .3s;
      background: linear-gradient(90deg, var(--ac), var(--pu))
    }

    /* TOAST */
    #toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 6px;
      pointer-events: none
    }

    .ti {
      background: var(--s2);
      border: 1px solid var(--bd2);
      border-radius: 9px;
      padding: 10px 14px;
      font-size: 12.5px;
      display: flex;
      align-items: center;
      gap: 8px;
      animation: sIn .3s ease;
      max-width: 360px;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .5)
    }

    .ti.s {
      border-color: rgba(16, 185, 129, .5)
    }

    .ti.e {
      border-color: rgba(239, 68, 68, .5)
    }

    .ti.i {
      border-color: rgba(59, 130, 246, .4)
    }

    .ti.w {
      border-color: rgba(245, 158, 11, .4)
    }

    @keyframes sIn {
      from {
        transform: translateX(24px);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    /* SPINNER */
    .sp {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(128, 128, 128, .25);
      border-top-color: var(--ac);
      border-radius: 50%;
      animation: spin .6s linear infinite;
      display: inline-block
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    /* === SECTION HEADER (.sh) === */
    /* Princípio Gestalt: Figura/Fundo — título diferenciado do conteúdo */
    .sh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--sp-4);
      flex-wrap: wrap;
      gap: var(--sp-3);
    }

    .sh-t {
      font-size: var(--text-lg);
      font-weight: 800;
      letter-spacing: var(--ls-heading);
      line-height: var(--lh-heading);
    }

    .sh-s {
      font-size: var(--text-xs);
      color: var(--tx3);
      margin-top: 3px;
      letter-spacing: .01em;
    }

    /* === ALERT BOXES (.abox) === */
    /* Estados semânticos WCAG: boa visibilidade de estado */
    .abox {
      padding: var(--sp-2) var(--sp-4);
      border-radius: var(--r);
      font-size: var(--text-sm);
      margin-bottom: var(--sp-3);
      line-height: var(--lh-body);
    }

    .abox.info  { background:rgba(79,142,247,.07);  border:1px solid rgba(79,142,247,.22);  color:var(--ac2); }
    .abox.warn  { background:rgba(253,182,69,.07);  border:1px solid rgba(253,182,69,.22);  color:var(--or); }
    .abox.suc   { background:rgba(34,201,122,.07);  border:1px solid rgba(34,201,122,.22);  color:var(--gr); }
    .abox.ai    { background:rgba(192,132,252,.07); border:1px solid rgba(192,132,252,.22); color:var(--ai); }

    .sep { height: 1px; background: var(--bd); margin: var(--sp-3) 0; }

    /* EMPTY */
    .empty {
      text-align: center;
      padding: 44px 20px
    }

    .ei {
      font-size: 38px;
      opacity: .15;
      margin-bottom: 10px
    }

    .et {
      font-size: 13px;
      color: var(--tx3)
    }

    /* UQ */
    .uq-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: var(--r);
      margin-bottom: 6px
    }

    .uq-thumb {
      width: 44px;
      height: 44px;
      object-fit: cover;
      border-radius: 5px;
      flex-shrink: 0;
      border: 1px solid var(--bd);
      background: var(--s3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px
    }

    .uq-info {
      flex: 1;
      min-width: 0
    }

    .uq-name {
      font-size: 11.5px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .uq-meta {
      font-size: 10.5px;
      color: var(--tx3);
      margin-top: 2px
    }


    /* ===== AJUSTES TEMA LIGHT ===== */
    html.light .sb {
      background: var(--s1);
      border-color: var(--bd)
    }

    html.light .tb {
      background: var(--s1);
      border-color: var(--bd)
    }

    html.light .card {
      background: var(--s1);
      border-color: var(--bd)
    }

    html.light .kpi {
      background: var(--s1);
      border-color: var(--bd)
    }

    html.light .modal {
      background: var(--s1);
      border-color: var(--bd2);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .15)
    }

    html.light .tw table {
      background: var(--s1)
    }

    html.light .tw th {
      background: var(--s2);
      color: var(--tx2)
    }

    html.light .tw tbody tr:hover td {
      background: var(--s3)
    }

    html.light .page {
      background: var(--bg)
    }

    html.light input,
    html.light select,
    html.light textarea {
      background: var(--s1);
      border-color: var(--bd);
      color: var(--tx)
    }

    html.light .btn-tema {
      background: var(--s2);
      border-color: var(--bd);
      color: var(--tx2)
    }

    html.light .ni {
      color: var(--tx2)
    }

    html.light .ni:hover {
      background: var(--s3)
    }

    html.light .ni.on {
      background: rgba(37, 99, 235, .1);
      color: var(--ac)
    }

    html.light .chat-hdr {
      background: linear-gradient(135deg, rgba(147, 51, 234, .08), rgba(236, 72, 153, .05))
    }

    html.light #chat-panel {
      background: var(--s1);
      border-color: var(--bd2)
    }

    html.light .cmsg.a {
      background: var(--s2);
      border-color: var(--bd);
      color: var(--tx)
    }

    html.light .cmsg.u {
      color: #fff
    }

    html.light .ni-app:hover {
      background: var(--s3)
    }

    html.light #boot-screen,
    html.light #login-screen {
      background: var(--bg)
    }

    html.light .abox.info {
      background: rgba(37, 99, 235, .06);
      border-color: rgba(37, 99, 235, .2);
      color: #1e40af
    }

    html.light .abox.warn {
      background: rgba(217, 119, 6, .06);
      border-color: rgba(217, 119, 6, .2);
      color: #92400e
    }

    html.light .abox.suc {
      background: rgba(5, 150, 105, .06);
      border-color: rgba(5, 150, 105, .2);
      color: #065f46
    }

    html.light .abox.ai {
      background: rgba(147, 51, 234, .06);
      border-color: rgba(147, 51, 234, .2);
      color: #6b21a8
    }

    html.light .pill.pb {
      background: rgba(37, 99, 235, .1);
      border-color: rgba(37, 99, 235, .3);
      color: var(--ac)
    }

    html.light .pill.pg {
      background: rgba(5, 150, 105, .1);
      border-color: rgba(5, 150, 105, .3);
      color: var(--gr)
    }

    html.light .pill.pp {
      background: rgba(124, 58, 237, .1);
      border-color: rgba(124, 58, 237, .3);
      color: var(--pu)
    }

    html.light .foto-card {
      background: var(--s2);
      border-color: var(--bd)
    }

    html.light .foto-card:hover {
      border-color: var(--ac)
    }

    html.light #pdf-loader {
      background: rgba(240, 244, 250, .92)
    }

    html.light #pdf-loader .pdf-loader-txt {
      color: var(--tx)
    }

    html.light #pdf-loader .pdf-loader-sub {
      color: var(--tx2)
    }

    html.light .chat-sugs {
      border-color: var(--bd)
    }

    html.light .chat-inp {
      background: var(--s2);
      border-color: var(--bd);
      color: var(--tx)
    }

    html.light .chat-ft {
      background: var(--s1);
      border-color: var(--bd)
    }

    /* Scrollbar no tema light */
    html.light ::-webkit-scrollbar-thumb {
      background: #C1CFDF
    }

    html.light ::-webkit-scrollbar-track {
      background: #EBF0F9
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px
    }

    ::-webkit-scrollbar-track {
      background: var(--s2);
      border-radius: 3px
    }

    ::-webkit-scrollbar-thumb {
      background: var(--bd2);
      border-radius: 3px
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--ac)
    }

    /* APPS EXTERNOS NA SIDEBAR */
    .ni-app {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: var(--r);
      cursor: pointer;
      transition: .15s;
      margin-bottom: 2px;
      border: 1px solid transparent
    }

    .ni-app:hover {
      background: var(--s2);
      border-color: var(--bd)
    }

    .ni-app-ico {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .3)
    }

    .ni-app-info {
      flex: 1;
      min-width: 0
    }

    .ni-app-nome {
      font-size: 11px;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.2
    }

    .ni-app-sub {
      font-size: 9px;
      color: var(--tx3);
      margin-top: 1px
    }

    .ni-app-ext {
      font-size: 11px;
      color: var(--tx3);
      flex-shrink: 0;
      transition: .2s
    }

    .ni-app:hover .ni-app-ext {
      color: var(--ac);
      transform: translate(2px, -2px)
    }

    /* BOTAO CHAT */
    .ni-chat-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 26px 10px; /* Altura aumentada conforme solicitado */
      border-radius: var(--r);
      cursor: pointer;
      background: linear-gradient(135deg, rgba(168, 85, 247, .12), rgba(236, 72, 153, .08));
      border: 1px solid rgba(168, 85, 247, .3);
      transition: .2s;
      position: relative;
      overflow: hidden;
      margin: 4px 0
    }

    .ni-chat-btn:hover {
      background: linear-gradient(135deg, rgba(168, 85, 247, .2), rgba(236, 72, 153, .15));
      border-color: rgba(168, 85, 247, .5);
      transform: translateY(-1px)
    }

    .ni-chat-pulse {
      position: absolute;
      top: 10px;
      right: 30px;
      width: 7px;
      height: 7px;
      background: var(--gr);
      border-radius: 50%;
      animation: chatPulse 2s infinite
    }

    @keyframes chatPulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .5)
      }

      60% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0)
      }
    }

    /* PAINEL CHAT FLUTUANTE */
    #chat-panel {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: min(400px, calc(100vw - 40px));
      height: min(590px, calc(100vh - 40px));
      background: var(--s1);
      border: 1px solid var(--bd2);
      border-radius: 16px;
      z-index: 450;
      display: none;
      flex-direction: column;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
      overflow: hidden;
      resize: both;
      min-width: 300px;
      min-height: 400px
    }

    #chat-panel.open {
      display: flex
    }

    .chat-hdr {
      padding: 12px 16px;
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: linear-gradient(135deg, rgba(168, 85, 247, .12), rgba(236, 72, 153, .06));
      flex-shrink: 0;
      border-radius: 16px 16px 0 0;
      cursor: move;
      user-select: none
    }

    .chat-ai-ico {
      width: 34px;
      height: 34px;
      background: linear-gradient(135deg, var(--ai), #EC4899);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(168, 85, 247, .4)
    }

    .chat-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 9px;
      min-height: 0
    }

    .chat-body::-webkit-scrollbar {
      width: 3px
    }

    .chat-body::-webkit-scrollbar-thumb {
      background: var(--bd2)
    }

    .cmsg {
      max-width: 90%;
      border-radius: 12px;
      padding: 9px 13px;
      font-size: 12.5px;
      line-height: 1.65;
      word-break: break-word;
      white-space: pre-wrap
    }

    .cmsg.u {
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #fff;
      align-self: flex-end;
      border-radius: 12px 12px 3px 12px
    }

    .cmsg.a {
      background: var(--s2);
      border: 1px solid var(--bd);
      color: var(--tx);
      align-self: flex-start;
      border-radius: 3px 12px 12px 12px
    }

    .cmsg.think {
      color: var(--tx3);
      font-style: italic;
      font-size: 11px;
      background: transparent;
      border: none;
      padding: 4px 0;
      align-self: flex-start
    }

    .chat-sugs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 7px 12px;
      border-bottom: 1px solid var(--bd);
      flex-shrink: 0
    }

    .chat-sug {
      font-size: 10.5px;
      padding: 4px 10px;
      background: rgba(168, 85, 247, .1);
      border: 1px solid rgba(168, 85, 247, .25);
      border-radius: 20px;
      cursor: pointer;
      color: var(--ai);
      font-weight: 600;
      transition: .15s;
      white-space: nowrap
    }

    .chat-sug:hover {
      background: rgba(168, 85, 247, .22)
    }

    .chat-ft {
      padding: 10px 12px;
      border-top: 1px solid var(--bd);
      display: flex;
      gap: 8px;
      align-items: flex-end;
      flex-shrink: 0
    }

    .chat-inp {
      flex: 1;
      background: var(--s2);
      border: 1px solid var(--bd);
      border-radius: 10px;
      padding: 9px 13px;
      font-size: 12.5px;
      font-family: var(--F);
      color: var(--tx);
      resize: none;
      min-height: 40px;
      max-height: 110px;
      outline: none;
      line-height: 1.5
    }

    .chat-inp:focus {
      border-color: var(--ai);
      box-shadow: 0 0 0 3px rgba(168, 85, 247, .1)
    }

    .chat-sbtn {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--ai), #EC4899);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
      transition: .15s;
      box-shadow: 0 2px 8px rgba(168, 85, 247, .4)
    }

    .chat-sbtn:hover {
      transform: scale(1.07)
    }

    .chat-sbtn:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none
    }

    /* PDF LOADER OVERLAY */
    #pdf-loader {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(0, 0, 0, .88);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      backdrop-filter: blur(6px)
    }

    /* Bloquear completamente interações durante PDF */
    #pdf-loader.show {
      display: flex;
      pointer-events: all
    }

    #pdf-loader.show~* {
      pointer-events: none !important
    }

    .app:has(~ #pdf-loader.show) {
      pointer-events: none
    }

    .pdf-loader-ico {
      font-size: 48px;
      animation: pulse 1.2s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1
      }

      50% {
        transform: scale(1.1);
        opacity: .75
      }
    }

    .pdf-loader-txt {
      font-size: 14px;
      font-weight: 700;
      color: var(--tx)
    }

    .pdf-loader-sub {
      font-size: 12px;
      color: var(--tx3)
    }

    .pdf-loader-bar {
      width: 280px;
      height: 4px;
      background: var(--s3);
      border-radius: 4px;
      overflow: hidden
    }

    .pdf-loader-fill {
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--ac), var(--pu));
      transition: width .4s ease;
      width: 0%
    }

    /* ====== MOD-02: SKELETON LOADERS ====== */
    @keyframes skShimmer {
      0%   { background-position: -400px 0 }
      100% { background-position: 400px 0 }
    }
    .skeleton {
      background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 50%, var(--s2) 75%);
      background-size: 800px 100%;
      animation: skShimmer 1.4s ease-in-out infinite;
      border-radius: 6px;
    }
    .sk-line { height: 12px; border-radius: 4px; margin-bottom: 8px; }
    .sk-line.tall { height: 18px; }
    .sk-line.wide { width: 100%; }
    .sk-line.half { width: 60%; }
    .sk-line.short { width: 35%; }
    .sk-card { border-radius: var(--r); padding: 18px; background: var(--s1); border: 1px solid var(--bd); }
    .sk-kpi { border-radius: var(--r); padding: 18px; background: var(--s1); border: 1px solid var(--bd); display: flex; flex-direction: column; gap: 8px; }
    .sk-img { border-radius: var(--r); aspect-ratio: 4/3; }

    /* ====== MOD-05: ANIMAÇÃO DE ENTRADA ENTRE PÁGINAS ====== */
    @keyframes pgEntrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .page.on { animation: pgEntrada 180ms ease both; }
    /* Upload precisa de flex, não block */
    #pg-upload.on { display: flex !important; animation: pgEntrada 180ms ease both; }

    /* ====== MOD-07: INDICADOR DE SYNC ====== */
    @keyframes syncPulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
    .sync-pulsing { animation: syncPulse 1s ease infinite; }
    #sync-auto-status.syncing { color: var(--ac) !important; }

    /* ====== MOD-08: ACESSIBILIDADE ====== */
    :focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 4px; }
    .btn { user-select: none; cursor: pointer; }
    .btn.bsm { min-height: 32px; min-width: 32px; }
    .ni, .ni-app, .ni-chat-btn { cursor: pointer; }
    button:disabled { cursor: not-allowed; opacity: .55; }

    /* ====== MULTI-SELEÇÃO GALERIA (MOD-04) ====== */
    .gal-barra-selecao {
      display: none; align-items: center; gap: 10px;
      padding: 8px 14px; border-radius: var(--r);
      background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3);
      margin-bottom: 10px; flex-wrap: wrap;
    }
    .gal-barra-selecao.show { display: flex; }
    .gal-card.selecionado { outline: 2px solid var(--ac); outline-offset: 2px; }
    .gal-sel-chk {
      position: absolute; top: 6px; left: 6px; z-index: 5;
      width: 18px; height: 18px; cursor: pointer; opacity: 0;
      transition: opacity .15s;
    }
    .gal-card:hover .gal-sel-chk, .gal-card.selecionado .gal-sel-chk { opacity: 1; }

    /* ====== GRÁFICO TEMPORAL (MOD-03) ====== */
    .dash-grafico-wrap {
      background: var(--s1); border: 1px solid var(--bd); border-radius: var(--r);
      padding: 16px 18px; margin-bottom: 14px;
    }
    .dash-grafico-bars { display: flex; align-items: flex-end; gap: 5px; height: 60px; }
    .dash-grafico-bar {
      flex: 1; background: rgba(59,130,246,.55); border-radius: 3px 3px 0 0;
      min-height: 2px; transition: height .4s ease;
      position: relative; cursor: default;
    }
    .dash-grafico-bar:hover::after {
      content: attr(data-title); position: absolute; bottom: calc(100% + 4px); left: 50%;
      transform: translateX(-50%); background: var(--s3); color: var(--tx);
      font-size: 10px; white-space: nowrap; padding: 2px 6px; border-radius: 4px;
      pointer-events: none; z-index: 10;
    }
    .dash-grafico-labels { display: flex; gap: 5px; margin-top: 4px; }
    .dash-grafico-label { flex: 1; font-size: 9px; color: var(--tx3); text-align: center; overflow: hidden; }

    /* ====== MAPA INTERATIVO ====== */
    .pg-flex-map.on { display: flex !important; flex-direction: column; }
    #map-root { background: var(--s2); outline: none; }
    
    html:not(.light) .leaflet-bar a { background-color: var(--s2); color: var(--tx) !important; border-color: var(--bd); }
    html:not(.light) .leaflet-bar a:hover { background-color: var(--s3); }
    html:not(.light) .leaflet-control-layers { background-color: var(--s2); color: var(--tx); border-color: var(--bd); border-radius:6px; }
    html:not(.light) .leaflet-control-layers-expanded { background: var(--s1); color: var(--tx); border-color: var(--bd2); }
    
    /* Pop-up do Leaflet customizado para o tema */
    .leaflet-popup-content-wrapper { background: var(--s1); color: var(--tx); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0, .5); padding:0; overflow:hidden;}
    .leaflet-popup-content { margin: 10px 12px; width: 180px !important;}
    html:not(.light) .leaflet-popup-tip { background: var(--s1); }
    
    .map-popup-custom { font-family: var(--F); }
    .map-popup-img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; background:var(--s3); }
    .map-popup-tit { font-size: 12.5px; font-weight: 700; color: var(--ac); margin-bottom: 3px; line-height: 1.2; }
    .map-popup-sub { font-size: 10px; color: var(--tx2); margin-bottom: 6px; line-height: 1.3; }
    .map-popup-btn { width: 100%; padding: 7px 0; border-radius: 6px; background: var(--s3); border: 1px solid var(--bd); color: var(--tx); cursor: pointer; font-size: 10.5px; font-weight: 600; transition: .2s; margin-top:4px;}
    .map-popup-btn:hover { background: var(--ac); border-color: var(--ac); color: #fff; }
    /* Estilos Geoprocessamento v2.5 */
    .coord-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--bd); padding-bottom: 8px; overflow-x: auto; }
    .coord-tab { padding: 6px 12px; border-radius: 6px; border: 1px solid transparent; background: var(--s2); font-size: 10.5px; font-weight: 600; cursor: pointer; color: var(--tx2); white-space: nowrap; transition: .2s; }
    .coord-tab.active { background: var(--ac); color: white; border-color: var(--ac); box-shadow: 0 2px 4px rgba(59,130,246,.3); }
    .coord-tab:hover:not(.active) { background: var(--s3); color: var(--tx); }
    
    #mini-map-upload .leaflet-container { background: var(--s3); border-radius: 0; }
    #mini-map-upload .leaflet-marker-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
    
    .btn-geoloc { position: absolute; z-index: 1000; bottom: 10px; right: 10px; background: white; border: 1px solid var(--bd); padding: 5px; border-radius: 4px; cursor: pointer; box-shadow: var(--sh); }
    
    /* Pulsação para Rascunhos */
    @keyframes pulse-draft {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
      70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    }
    .custom-marker[style*="var(--or)"] {
      animation: pulse-draft 2s infinite;
    }

    /* ── AGENDA / CALENDÁRIO ─────────────────────────────────────── */
    .agenda-semana-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-bottom: 2px;
      padding: 0 2px;
    }
    .agenda-semana-header > div {
      text-align: center;
      font-size: 10px;
      font-weight: 700;
      color: var(--tx3);
      padding: 4px 0;
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .agenda-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      padding: 0 2px 8px;
    }
    .agenda-dia {
      min-height: 80px;
      background: var(--s2);
      border-radius: var(--r);
      border: 1px solid var(--bd);
      padding: 4px;
      cursor: pointer;
      transition: border-color .15s, background .15s;
      overflow: hidden;
    }
    .agenda-dia:hover { border-color: var(--ac); background: var(--s3); }
    .agenda-dia.hoje { border-color: var(--ac); border-width: 2px; }
    .agenda-dia.outro-mes { opacity: .35; cursor: default; }
    .agenda-dia.outro-mes:hover { border-color: var(--bd); background: var(--s2); }
    .agenda-dia-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--tx2);
      margin-bottom: 3px;
      line-height: 1;
    }
    .agenda-dia.hoje .agenda-dia-num {
      background: var(--ac);
      color: #fff;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      margin-bottom: 4px;
    }
    .agenda-evento {
      font-size: 9.5px;
      font-weight: 600;
      padding: 2px 5px;
      border-radius: 4px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      line-height: 1.4;
    }
    .agenda-evento.pendente  { background: rgba(251,146,60,.2);  color: #fb923c; border-left: 2px solid #fb923c; }
    .agenda-evento.concluido { background: rgba(52,211,153,.2);  color: var(--gr); border-left: 2px solid var(--gr); }
    .agenda-evento.atrasado  { background: rgba(248,113,113,.2); color: #f87171; border-left: 2px solid #f87171; }
    .agenda-evento.cancelado { background: var(--s3); color: var(--tx3); border-left: 2px solid var(--tx3); text-decoration: line-through; }
    .agenda-mais {
      font-size: 9px;
      color: var(--tx3);
      padding: 1px 4px;
      cursor: pointer;
    }
    /* Modal lista do dia */
    .agenda-dia-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 8px 0;
      border-bottom: 1px solid var(--bd);
    }
    .agenda-dia-item:last-child { border-bottom: none; }
    .agenda-dia-barra {
      width: 3px;
      border-radius: 2px;
      flex-shrink: 0;
      align-self: stretch;
      min-height: 32px;
    }
    /* ─────────────────────────────────────────────────────────────── */

    /* ====== MELHORIAS UX — HEURÍSTICAS NIELSEN ====== */

    /* H3 — Modal de confirmação customizado */
    ._conf-modal-overlay {
      animation: fadeIn .15s ease
    }
    ._conf-modal-overlay > div {
      animation: slideUp .2s var(--ease-out)
    }
    @keyframes slideUp {
      from { opacity:0; transform:translateY(12px) }
      to   { opacity:1; transform:translateY(0) }
    }

    /* H5 — Validação inline */
    .campo-erro {
      border-color: var(--rd) !important;
      box-shadow: 0 0 0 2px rgba(245,101,101,.15) !important
    }
    .campo-erro-msg {
      font-size: 11px;
      color: var(--rd);
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 4px
    }

    /* H9 — Toast de erro mais visível */
    #toast .ti.e {
      border-left: 3px solid var(--rd);
      background: rgba(245,101,101,.12)
    }
    #toast .ti.w {
      border-left: 3px solid var(--or)
    }
    #toast .ti.s {
      border-left: 3px solid var(--gr)
    }

    /* H1 — Status de conexão pulsante quando offline */
    #conn-status.offline {
      animation: pulsarOffline 2s ease infinite
    }
    @keyframes pulsarOffline {
      0%,100% { opacity:1 }
      50%      { opacity:.5 }
    }