/* ============ TOKENS (cores, espaçamentos) ============ */
  :root{
    --bg: #ECF0EE;
    --surface: #FFFFFF;
    --surface-alt: #E1E7E3;
    --surface-sunken: #DCE3DF;
    --ink: #172621;
    --ink-soft: #56655D;
    --ink-faint: #8B978F;
    --accent: #2F6F5E;
    --accent-ink: #1E5646;
    --accent-tint: #DCEAE4;
    --line: #C6CFC9;
    --line-strong: #9FADA5;
    --danger: #B3402A;
    --danger-tint: #F6E1DB;
    --warn: #96700B;
    --shadow: 0 1px 2px rgba(23,38,33,.06), 0 6px 20px -8px rgba(23,38,33,.18);
    --radius-s: 3px;
    --radius-m: 6px;
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #121C18;
      --surface: #182420;
      --surface-alt: #1F2E28;
      --surface-sunken: #0F1815;
      --ink: #E7EEEA;
      --ink-soft: #A3B3AA;
      --ink-faint: #6C7C73;
      --accent: #5FBE9C;
      --accent-ink: #8FDABE;
      --accent-tint: #1D3830;
      --line: #2C3D36;
      --line-strong: #3C5049;
      --danger: #E2694F;
      --danger-tint: #3A231E;
      --warn: #E0B24A;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --bg: #121C18;
    --surface: #182420;
    --surface-alt: #1F2E28;
    --surface-sunken: #0F1815;
    --ink: #E7EEEA;
    --ink-soft: #A3B3AA;
    --ink-faint: #6C7C73;
    --accent: #5FBE9C;
    --accent-ink: #8FDABE;
    --accent-tint: #1D3830;
    --line: #2C3D36;
    --line-strong: #3C5049;
    --danger: #E2694F;
    --danger-tint: #3A231E;
    --warn: #E0B24A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box;}
  /* Garante que o atributo "hidden" sempre esconda o elemento, mesmo quando
     outra regra (ex.: #auth-screen{display:flex}, .field{display:flex}) tem
     a mesma especificidade e por padrão venceria o "hidden" nativo do navegador. */
  [hidden]{display:none !important;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--font-sans);}
  input,textarea,select,button{font-family:inherit;color:inherit;}
  button{cursor:pointer;}
  ::selection{background:var(--accent-tint);color:var(--accent-ink);}

  /* ============ ESTRUTURA GERAL ============ */
  #app{
    display:flex;
    min-height:100%;
    align-items:flex-start;
  }
  .rail{
    width:272px;
    flex:none;
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    background:var(--surface-alt);
    border-right:1px solid var(--line);
    padding:calc(env(safe-area-inset-top,0px) + 20px) 16px 16px;
  }
  .rail-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .rail-mark{flex:none;}
  .rail-title{font-size:17px;font-weight:600;letter-spacing:-.01em;}
  .rail-sub{font-size:11.5px;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase;}
  /* seletor de projeto — filtra a lista de sondagens abaixo por projeto, e
     toda sondagem nova criada enquanto um projeto estiver selecionado já
     nasce marcada com ele (não precisa escolher de novo a cada sondagem). */
  .rail-projeto{margin-bottom:12px;}
  .rail-projeto-label{
    display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:5px;
  }
  .rail-projeto-select{
    width:100%;padding:8px 10px;border-radius:var(--radius-s);
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
    font-size:13px;font-weight:600;
  }

  /* Barra de estatísticas gerais — dá uma visão rápida do tamanho da operação
     assim que o sistema abre, sem precisar entrar em nenhuma sondagem. */
  .rail-stats{
    display:flex;gap:6px;margin-bottom:14px;
  }
  .rail-stat{
    flex:1;min-width:0;text-align:center;padding:8px 4px;border-radius:var(--radius-s);
    background:var(--surface);border:1px solid var(--line);
  }
  .rail-stat-num{display:block;font-size:17px;font-weight:700;color:var(--accent-ink);letter-spacing:-.01em;}
  .rail-stat-label{display:block;font-size:9.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-top:1px;}

  /* Painel resumo do projeto selecionado — só aparece quando um projeto
     específico está escolhido no seletor acima (não em "Todos os projetos"). */
  .projeto-resumo{
    margin-bottom:12px;padding:10px 12px;border-radius:var(--radius-m);
    background:var(--surface);border:1px solid var(--line);
  }
  .pr-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:3px 0;}
  .pr-label{color:var(--ink-soft);}
  .pr-value{font-weight:700;color:var(--ink);}
  .pr-actions{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
  .btn-sm{padding:6px 10px;font-size:12px;width:100%;justify-content:center;}

  .btn-new{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:10px 12px;border-radius:var(--radius-m);
    border:1px dashed var(--line-strong);background:transparent;color:var(--accent-ink);
    font-size:13.5px;font-weight:600;letter-spacing:.01em;
    transition:background .12s ease, border-color .12s ease;
  }
  .btn-new:hover{background:var(--accent-tint);border-color:var(--accent);}
  .rail-list{
    flex:1;overflow-y:auto;margin-top:14px;
    display:flex;flex-direction:column;gap:6px;
    -webkit-overflow-scrolling:touch;
  }
  .rail-empty{font-size:12.5px;color:var(--ink-faint);padding:10px 4px;line-height:1.5;}
  .rail-item{
    display:flex;align-items:flex-start;gap:8px;
    padding:9px 10px;border-radius:var(--radius-m);
    border:1px solid transparent;background:transparent;
    text-align:left;width:100%;
  }
  .rail-item:hover{background:var(--surface);}
  .rail-item.is-active{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow);}
  .rail-item-main{flex:1;min-width:0;}
  .rail-item-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;}
  .rail-item-status-dot{flex:none;width:7px;height:7px;border-radius:50%;}
  .rail-item-sub{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
  .rail-item-del,.rail-item-dl{
    flex:none;opacity:0;width:20px;height:20px;border-radius:4px;border:none;background:transparent;
    color:var(--ink-faint);font-size:13px;display:flex;align-items:center;justify-content:center;
  }
  .rail-item-dl{font-size:11px;}
  .rail-item:hover .rail-item-del,.rail-item:hover .rail-item-dl{opacity:1;}
  .rail-item-del:hover{background:var(--danger-tint);color:var(--danger);}
  .rail-item-dl:hover{background:var(--accent-tint);color:var(--accent-ink);}
  .rail-foot{font-size:11px;color:var(--ink-faint);padding-top:12px;margin-top:12px;border-top:1px solid var(--line);line-height:1.5;}

  main.sheet{flex:1;min-width:0;padding-bottom:80px;}

  .topbar{
    position:sticky;top:0;z-index:5;
    padding:calc(env(safe-area-inset-top,0px) + 14px) 28px 14px;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .topbar-id{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap;}
  .topbar-id .tag{
    font-family:var(--font-mono);font-size:12px;font-weight:600;
    background:var(--accent-tint);color:var(--accent-ink);
    padding:3px 8px;border-radius:4px;letter-spacing:.02em;
  }
  .topbar-id .obra{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* Agora é um <select> (dá pra trocar o projeto da sondagem aberta direto
     por aqui, sem precisar ir em "Todos os projetos" procurar nada) — herda
     o visual do .tag normal, só ajustando o cursor pra deixar claro que é
     clicável. */
  .topbar-id .tag-projeto{background:var(--surface-alt);color:var(--ink-soft);border:1px solid var(--line-strong);cursor:pointer;}

  /* Seletor de status da sondagem (rascunho/concluída/revisada) — a cor de
     fundo muda com a opção escolhida (ver classes st-* aplicadas via JS em
     atualizarCorStatus()), pra dar visibilidade rápida do andamento sem
     precisar abrir cada sondagem. */
  .status-select-wrap{
    display:inline-flex;border-radius:4px;padding:1px;
    background:var(--surface-alt);border:1px solid var(--line-strong);
  }
  .status-select-wrap.st-rascunho{background:var(--surface-alt);border-color:var(--line-strong);}
  .status-select-wrap.st-concluida{background:#DCE8FB;border-color:#7FA8E8;}
  .status-select-wrap.st-revisada{background:var(--accent-tint);border-color:var(--accent);}
  .status-select{
    border:none;background:transparent;font-size:11.5px;font-weight:700;
    padding:3px 6px;border-radius:3px;color:var(--ink-soft);letter-spacing:.01em;
  }
  .status-select-wrap.st-concluida .status-select{color:#1B4FA8;}
  .status-select-wrap.st-revisada .status-select{color:var(--accent-ink);}
  .topbar-actions{display:flex;gap:8px;flex:none;}
  .btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 14px;border-radius:var(--radius-m);border:1px solid var(--line-strong);
    background:var(--surface);font-size:13px;font-weight:600;letter-spacing:.01em;
    transition:transform .08s ease, box-shadow .12s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-ink);}
  .btn-ghost{background:transparent;}
  .btn-ghost:hover{background:var(--surface-alt);}

  .example-badge{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;color:var(--warn);background:transparent;border:1px solid currentColor;
    padding:4px 9px;border-radius:20px;margin:18px 28px 0;width:fit-content;
  }

  /* ============ SEÇÕES ============ */
  .section{
    margin:22px 28px;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-m);box-shadow:var(--shadow);overflow:hidden;
  }
  .section-head{
    display:flex;align-items:center;gap:10px;
    padding:13px 18px;border-bottom:1px solid var(--line);background:var(--surface-alt);
  }
  .section-num{
    font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--accent-ink);
    background:var(--accent-tint);width:20px;height:20px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .section-head h2{font-size:14.5px;font-weight:600;letter-spacing:.01em;}
  .section-head .hint{margin-left:auto;font-size:11.5px;color:var(--ink-faint);}
  .section-body{padding:18px;}

  .field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px 16px;}
  .field{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .field.wide{grid-column:span 2;}
  .field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-soft);}
  .field input[type=text],.field input[type=email],.field input[type=password],.field input[type=date],.field input[type=time],.field textarea{
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
    border-radius:var(--radius-s);padding:8px 9px;font-size:13.5px;font-family:var(--font-mono);
    width:100%;
  }
  .field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .field textarea{font-family:var(--font-sans);resize:vertical;min-height:38px;}

  /* Ditado por voz — campo + microfone lado a lado. O botão soma no
     .field-voice, não no .field (que continua só empilhando label+conteúdo
     verticalmente), pra não bagunçar os campos que não têm microfone. */
  .field-voice{display:flex;align-items:center;gap:6px;}
  .field-voice input{flex:1;min-width:0;}
  .btn-voice{
    flex:none;width:32px;height:32px;border-radius:50%;
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
    padding:0;transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .btn-voice:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink);}
  /* enquanto está ouvindo: fica vermelho e pulsando, igual gravando um
     áudio — mesma linguagem visual que todo mundo já reconhece do WhatsApp. */
  .btn-voice.is-ouvindo{background:var(--danger);border-color:var(--danger);color:#fff;animation:voice-pulse 1.1s ease-in-out infinite;}
  @keyframes voice-pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(179,64,42,.45); }
    50%{ box-shadow:0 0 0 8px rgba(179,64,42,0); }
  }
  /* dentro da tabela de litologia, o microfone fica menor, ao lado da
     descrição da camada (que é textarea — pode crescer, então alinha o
     botão no topo em vez de centralizar). */
  .td-voice{display:flex;align-items:flex-start;gap:4px;}
  .td-voice textarea{flex:1;min-width:0;}
  .btn-voice-sm{width:26px;height:26px;font-size:12px;margin-top:2px;}
  /* Navegador sem suporte a reconhecimento de voz (ex.: Safari no iPhone) —
     some com todos os microfones de uma vez, inclusive os que ainda vão ser
     criados depois em novas linhas de litologia, em vez de mostrar um botão
     que não vai funcionar. Ver checarSuporteVoz() no script.js. */
  body.voz-indisponivel .btn-voice{display:none;}

  .group-row{display:flex;flex-wrap:wrap;gap:26px;row-gap:14px;}
  .group{display:flex;flex-direction:column;gap:8px;min-width:180px;}
  .group > .glabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-soft);}
  .group-choices{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;}

  .chk{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;}
  .chk input{position:absolute;opacity:0;width:1px;height:1px;}
  .chk .box{
    position:relative;flex:none;width:16px;height:16px;border-radius:3px;
    border:1.6px solid var(--line-strong);background:var(--surface);
  }
  .chk .box::after{
    content:"";position:absolute;left:3px;top:1px;width:6px;height:9px;
    border-right:2px solid var(--surface);border-bottom:2px solid var(--surface);
    transform:rotate(40deg);opacity:0;
  }
  .chk input:checked + .box{background:var(--accent);border-color:var(--accent);}
  .chk input:checked + .box::after{opacity:1;}
  .chk input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px;}
  .otxt{width:132px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--radius-s);
    padding:5px 7px;font-size:12.5px;font-family:var(--font-mono);margin-left:2px;}
  .otxt:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

  /* ============ TABELAS ============ */
  .lith-grid{display:grid;grid-template-columns:2.7fr 0.95fr 0.85fr;gap:18px;align-items:start;}
  @media (max-width:900px){.lith-grid{grid-template-columns:1fr;}}
  .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-s);}
  table.dtbl{width:100%;border-collapse:collapse;min-width:360px;}
  table.dtbl th{
    font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
    text-align:left;font-weight:600;padding:8px 8px;background:var(--surface-alt);
    border-bottom:1px solid var(--line);white-space:nowrap;
  }
  table.dtbl td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top;}
  table.dtbl tr:last-child td{border-bottom:none;}
  table.dtbl input{
    width:100%;border:1px solid transparent;background:transparent;color:var(--ink);
    border-radius:4px;padding:6px 6px;font-size:13px;font-family:var(--font-mono);
  }
  table.dtbl input.txt{font-family:var(--font-sans);}
  table.dtbl input:hover{border-color:var(--line);}
  table.dtbl input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:transparent;}
  table.dtbl textarea{
    width:100%;border:1px solid transparent;background:transparent;color:var(--ink);
    border-radius:4px;padding:6px 6px;font-size:12.5px;font-family:var(--font-sans);
    resize:none;overflow:hidden;line-height:1.35;display:block;min-height:30px;
  }
  table.dtbl textarea:hover{border-color:var(--line);}
  table.dtbl textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:transparent;}
  .col-narrow{width:64px;}
  .col-mid{width:96px;}
  .row-del{
    width:24px;height:24px;border:none;background:transparent;color:var(--ink-faint);
    border-radius:4px;font-size:13px;display:flex;align-items:center;justify-content:center;
  }
  .row-del:hover{background:var(--danger-tint);color:var(--danger);}
  .amostra-pair{display:flex;gap:10px;}
  .amostra-pair .chk{font-size:12px;}
  .amostra-pair .box{width:14px;height:14px;}

  .tbl-foot{padding:9px 10px;}
  .btn-add{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
    color:var(--accent-ink);background:transparent;border:none;padding:2px 2px;
  }
  .btn-add:hover{text-decoration:underline;}

  .lith-col-card{border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 8px 4px;background:var(--surface-sunken);}
  .lith-col-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:600;margin-bottom:4px;padding-left:2px;}
  #lith-svg-host svg{width:100%;height:auto;aspect-ratio:380/470;display:block;}
  .lith-label-h{font-family:var(--font-sans);font-weight:600;font-size:10.6px;color:var(--ink);line-height:1.25;}
  .lith-label-s{font-family:var(--font-sans);font-size:9.6px;color:var(--ink-soft);line-height:1.25;}
  .lith-legend{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-soft);line-height:1.6;}
  .lith-legend .lg-row{display:flex;align-items:center;gap:6px;}
  .lith-legend .lg-swatch{flex:none;width:9px;height:9px;border-radius:2px;border:1px solid var(--line-strong);}
  .lith-legend .lg-title{font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.03em;font-size:9.5px;margin-bottom:2px;}

  /* Perfil construtivo */
  .perfil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px 16px;}
  .furo-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}

  .note{font-size:12px;color:var(--ink-faint);line-height:1.6;padding:0 28px 30px;max-width:640px;}

  #print-sheet{display:none;}

  /* ============ COORDENADAS E FOTO DO LOCAL ============ */
  .geo-photo-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);}
  .geo-card,.photo-card{
    flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:9px;
    border:1px solid var(--line);border-radius:var(--radius-s);padding:12px;background:var(--surface-alt);
  }
  .geo-card > .glabel,.photo-card > .glabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-soft);}
  .geo-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .field-zona{max-width:110px;}
  .geo-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .geo-actions .btn{font-size:12.5px;padding:7px 12px;}
  .geo-map-link{font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:none;}
  .geo-map-link:hover{text-decoration:underline;}
  .geo-hint{font-size:11.5px;color:var(--ink-faint);min-height:14px;}
  .geo-hint.is-error{color:var(--warn);}
  .geo-endereco{
    font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:var(--radius-s);padding:7px 10px;
  }

  .photo-box{
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    height:150px;width:100%;max-width:220px;margin:0 auto;
    border-radius:var(--radius-s);border:1px dashed var(--line-strong);
    background:var(--surface);
  }
  /* object-fit:contain (em vez de "cover") — mostra a foto inteira, sem
     cortar as bordas, mesmo quando ela é bem mais larga/panorâmica que a
     caixinha; sobra uma pequena faixa vazia em cima/embaixo ou nos lados
     em vez de cortar pedaço da foto. */
  .photo-box img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in;}
  .photo-placeholder{font-size:12px;color:var(--ink-faint);padding:0 10px;text-align:center;}
  .photo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .photo-actions .btn{font-size:12.5px;padding:7px 12px;}

  /* pop-up (lightbox) pra ver a foto do local ampliada — clica na miniatura,
     abre por cima de tudo com fundo escuro; clica fora, no X, ou aperta Esc
     pra fechar de novo. */
  .foto-lightbox{
    position:fixed;inset:0;z-index:200;background:rgba(10,14,12,.86);
    display:flex;align-items:center;justify-content:center;padding:32px;
    cursor:zoom-out;
  }
  .foto-lightbox img{
    max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;
    box-shadow:0 8px 32px rgba(0,0,0,.5);cursor:default;
  }
  .foto-lightbox-fechar{
    position:fixed;top:18px;right:22px;z-index:201;
    width:40px;height:40px;border-radius:50%;border:none;
    background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1;
    cursor:pointer;
  }
  .foto-lightbox-fechar:hover{background:rgba(255,255,255,.22);}
  @media print{
    .foto-lightbox,.foto-lightbox-fechar{display:none !important;}
  }

  /* pop-up com o mapa de todos os pontos de um projeto — mesma família visual
     do lightbox da foto, mas com uma caixa branca (o mapa em si já é escuro/
     colorido, então o fundo aqui fica claro pra legenda ficar legível). */
  .mapa-projeto-modal{
    position:fixed;inset:0;z-index:200;background:rgba(10,14,12,.72);
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .mapa-projeto-box{
    background:var(--surface);border-radius:var(--radius-m);box-shadow:0 8px 32px rgba(0,0,0,.4);
    max-width:100%;max-height:100%;overflow:auto;
  }
  .mapa-projeto-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;
  }
  .mapa-projeto-fechar{
    width:28px;height:28px;border-radius:50%;border:none;background:var(--surface-alt);
    color:var(--ink-soft);font-size:14px;line-height:1;cursor:pointer;flex:none;
  }
  .mapa-projeto-fechar:hover{background:var(--danger-tint);color:var(--danger);}
  .mapa-projeto-corpo{padding:14px;}
  .mapa-projeto-vazio{font-size:13px;color:var(--ink-soft);max-width:340px;margin:0;padding:20px 4px;}
  .mp-viewport{position:relative;overflow:hidden;border-radius:var(--radius-s);background:#e5e5e5;border:1px solid var(--line-strong);}
  .mp-viewport img{position:absolute;display:block;}
  .mp-marker{position:absolute;transform:translate(-50%,-100%);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
  .mp-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;max-width:620px;}
  .mp-legenda-item{font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
  .mp-legenda-num{
    flex:none;width:16px;height:16px;border-radius:50%;background:#D32F2F;color:#fff;
    font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  }
  @media (max-width:700px){
    /* em telas estreitas o mapa não encolhe (isso desalinharia os blocos
       calculados em px) — a caixa deixa rolar pra ver o resto, como uma foto grande. */
    .mapa-projeto-box{max-width:94vw;max-height:88vh;}
  }

  @media (max-width:520px){
    .geo-fields{grid-template-columns:1fr;}
  }

  #toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);
    background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:20px;
    font-size:13px;font-weight:500;box-shadow:var(--shadow);opacity:0;pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;z-index:20;
  }
  #toast.show{opacity:1;transform:translate(-50%,0);}

  @media (max-width:860px){
    /* #app{display:flex} vira coluna aqui (rail em cima, formulário embaixo).
       O bug real do "tudo minúsculo/cortado" no celular era a falta da tag
       <meta name="viewport"> no HTML (o navegador tratava a página como
       desktop de 980px e reduzia tudo); depois de corrigir isso, sobrou este
       segundo problema: align-items:flex-start (herdado do layout desktop)
       faz o main.sheet não ser limitado à largura da tela — ele cresce até
       caber o conteúdo mais largo (ex.: os botões do topo em uma linha só),
       e a página inteira ganha rolagem horizontal. align-items:stretch aqui
       resolve isso, junto com dar width:100% explícito ao main.sheet. */
    #app{flex-direction:column;align-items:stretch;}
    main.sheet{width:100%;}
    .rail{
      width:100%;height:auto;position:relative;flex-direction:row;align-items:center;
      overflow-x:auto;padding:14px 14px;gap:14px;
    }
    .rail-brand{border-bottom:none;padding-bottom:0;margin-bottom:0;border-right:1px solid var(--line);padding-right:14px;}
    .rail-stats{flex:none;margin-bottom:0;width:210px;}
    .rail-projeto{margin-bottom:0;flex:none;width:170px;}
    .projeto-resumo{margin-bottom:0;flex:none;width:190px;}
    .btn-new{width:auto;white-space:nowrap;}
    .rail-list{flex-direction:row;margin-top:0;overflow-x:auto;overflow-y:visible;}
    .rail-item{width:auto;min-width:150px;}
    .rail-foot{display:none;}
    .section,.example-badge{margin-left:16px;margin-right:16px;}
    .note{padding-left:16px;padding-right:16px;}
    .topbar{padding-left:16px;padding-right:16px;}
    /* Os botões do topo ("Folha do perfil", "Salvar" etc.) eram um único
       flex:none sem quebra de linha -> ficavam com ~830px de largura
       forçando a tela inteira a rolar de lado. Deixa quebrar em várias
       linhas e encolhe um pouco o texto/espaçamento pra caber melhor. */
    .topbar-actions{flex-wrap:wrap;flex:1 1 100%;gap:6px;}
    .topbar-actions .btn{font-size:12px;padding:7px 10px;}
  }

  /* ============ IMPRESSÃO ============ */
  @media print{
    @page{margin:14mm;}
    body{background:#fff;font-size:11.5px;}
    .rail,.topbar-actions,.btn-new,.rail-foot,.example-badge,.row-del,.btn-add,#toast{display:none !important;}
    .status-select-wrap,.mapa-projeto-modal{display:none !important;}
    .geo-actions,.photo-actions,#photo-placeholder{display:none !important;}
    .btn-voice{display:none !important;}
    .geo-card,.photo-card{background:#fff;border-color:#999;}
    .rail{display:none;}
    #app{display:block;}
    main.sheet{padding-bottom:0;}
    .topbar{position:static;background:#fff;backdrop-filter:none;padding:0 0 10px;}
    .section{margin:0 0 14px;box-shadow:none;border:1px solid #999;break-inside:avoid;}
    .section-head{background:#f1f1f1;}
    .field input,.field textarea,table.dtbl input,table.dtbl textarea{border-color:transparent !important;background:transparent !important;}
    input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{display:none;}
    .chk .box{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    #lith-svg-host svg *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    .lith-legend .lg-swatch{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    .lith-col-card{background:#fff;}

    /* folha única "folha do perfil" — perfil + legenda + carimbo */
    body.print-sheet-mode #app{display:none !important;}
    body.print-sheet-mode #print-sheet{display:block !important;}
    #print-sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  }

  #print-sheet{
    font-family:var(--font-sans);color:#1a1a1a;
  }
  /* impressão em lote (relatório consolidado do projeto): cada sondagem vira
     uma página própria — quebra depois de cada uma, menos a última (senão
     sairia uma folha em branco extra no fim). */
  .ps-page{page-break-after:always;break-after:page;}
  .ps-page:last-child{page-break-after:auto;break-after:auto;}
  .ps-frame{
    border:2px solid #1a1a1a;padding:10mm;height:269mm;box-sizing:border-box;
    display:flex;flex-direction:column;
  }
  .ps-header{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    border:1px solid #1a1a1a;padding:8px 12px;margin-bottom:8px;
  }
  .ps-header-brand{display:flex;align-items:center;gap:10px;}
  .ps-header-title{font-size:15px;font-weight:700;letter-spacing:.01em;}
  .ps-header-sub{font-size:10.5px;color:#444;margin-top:1px;}
  .ps-header-id{text-align:right;font-family:var(--font-mono);font-size:12px;font-weight:600;}
  .ps-header-id div:last-child{font-size:10px;font-weight:400;color:#444;margin-top:2px;}
  .ps-body{
    flex:1;border:1px solid #1a1a1a;display:flex;align-items:flex-start;justify-content:center;
    padding:4mm 5mm;min-height:0;gap:5mm;
  }
  /* só o SVG do perfil litológico (filho direto de .ps-body) deve esticar
     pra 100% da altura — usar um seletor "descendente" aqui (sem o >) também
     pegava sem querer o SVG pequeno do marcador (pino vermelho) dentro do
     mapa, esticando ele até ficar enorme dentro da caixinha do mapa. */
  .ps-body > svg{height:100%;max-height:100%;width:auto;max-width:100%;}

  /* mapa do local, ao lado do perfil — encostado no topo (align-items:flex-start
     no .ps-body, acima) em vez de centralizado, e mais estreito, pra sobrar
     mais espaço pro perfil gráfico crescer sem mudar a estrutura dele —
     é só a mesma figura de sempre renderizada maior. */
  .ps-map{
    flex:none;width:42mm;border:1px solid #1a1a1a;display:flex;flex-direction:column;
    background:#f4f4f4;overflow:hidden;
  }
  .ps-map-title{font-size:9px;font-weight:700;letter-spacing:.05em;text-align:center;padding:3px 4px;border-bottom:1px solid #1a1a1a;background:#f4f4f4;text-transform:uppercase;}
  /* o mapa em si é composto de blocos ("tiles") reais do OpenStreetMap —
     ps-map-viewport é a "janelinha" (42mm x 42mm) que corta a vista, e
     ps-map-grid é a grade 3x3 de blocos por baixo, deslocada via
     transform:translate(...) (calculado no script.js) pra deixar o ponto
     exato da sondagem sempre centralizado atrás do marcador vermelho. */
  .ps-map-viewport{
    position:relative;width:42mm;height:42mm;overflow:hidden;background:#e5e5e5;
  }
  .ps-map-grid{position:absolute;left:0;top:0;}
  .ps-map-grid img{position:absolute;display:block;}
  .ps-map-marker{position:absolute;left:50%;top:50%;width:20px;height:28px;max-width:20px;max-height:28px;transform:translate(-50%,-100%);}
  .ps-map-coords{
    font-family:var(--font-mono);font-size:7.5px;text-align:center;color:#444;
    padding:3px 4px;border-top:1px solid #ccc;background:#fff;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ps-map-empty{
    height:42mm;align-items:center;justify-content:center;text-align:center;padding:8px;
  }
  .ps-map-empty span{font-size:8.5px;color:#777;}
  .ps-foot{display:flex;gap:8px;margin-top:8px;align-items:stretch;}
  .ps-legend{
    flex:1.1;border:1px solid #1a1a1a;padding:8px 12px;
  }
  .ps-legend-title{font-size:10.5px;font-weight:700;letter-spacing:.05em;margin-bottom:6px;}
  .ps-legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;}
  .ps-legend-row{display:flex;align-items:center;gap:6px;font-size:9.5px;}
  .ps-legend-row svg{flex:none;border:1px solid #999;}
  .ps-legend-note{font-size:8.5px;color:#555;margin-top:6px;font-style:italic;}
  .ps-carimbo{flex:1;border:1px solid #1a1a1a;padding:0;font-size:9.5px;}
  .ps-carimbo table{width:100%;height:100%;border-collapse:collapse;}
  .ps-carimbo td{border:1px solid #999;padding:4px 8px;vertical-align:top;}
  .ps-carimbo .pc-label{display:block;font-size:7.5px;text-transform:uppercase;letter-spacing:.04em;color:#666;margin-bottom:2px;}
  .ps-carimbo .pc-value{font-weight:600;}

  /* ============ AUTENTICAÇÃO ============ */
  #auth-screen, #pending-org-screen{
    min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:24px; background:var(--bg);
  }
  .auth-card{
    width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-m); box-shadow:var(--shadow); padding:28px 26px;
  }
  .auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
  .auth-title{font-size:17px;font-weight:600;letter-spacing:-.01em;}
  .auth-sub{font-size:11.5px;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase;}
  .auth-tabs{display:flex;gap:4px;background:var(--surface-alt);border-radius:var(--radius-m);padding:3px;margin-bottom:18px;}
  .auth-tab{flex:1;padding:8px;border:none;background:transparent;border-radius:5px;font-size:13px;font-weight:600;color:var(--ink-soft);}
  .auth-tab.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}
  #auth-form .field{margin-bottom:14px;}
  .auth-error{font-size:12.5px;color:var(--danger);background:var(--danger-tint);border-radius:var(--radius-s);padding:8px 10px;margin-bottom:14px;line-height:1.4;}
  .auth-error.is-info{color:var(--accent-ink);background:var(--accent-tint);}
  #pending-org-screen .auth-card{text-align:center;}
  #pending-org-screen p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:12px 0 20px;}

  .rail-user{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:8px 10px;margin-bottom:12px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--radius-s);
  }
  .rail-user-info{min-width:0;}
  .rail-user-org{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rail-user-email{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rail-user-logout{flex:none;font-size:11px;font-weight:600;color:var(--ink-soft);background:transparent;border:none;padding:4px 6px;border-radius:4px;}
  .rail-user-logout:hover{background:var(--danger-tint);color:var(--danger);}

  /* ============ CADASTRO: TIPO DE CONTA ============ */
  .auth-tipo-rotulo{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-soft);}
  .auth-tipo{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .auth-tipo label{position:relative;cursor:pointer;}
  .auth-tipo input{position:absolute;opacity:0;pointer-events:none;}
  .auth-tipo span{
    display:block;text-align:center;padding:9px 8px;border:1px solid var(--line);border-radius:8px;
    font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--surface);
  }
  .auth-tipo input:checked + span{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink);}
  .auth-tipo input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px;}
  .auth-tipo-dica{margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--ink-faint);}