/* ==========================================================================
   Torino — Estrutura do sistema e páginas da área do gestor
   ========================================================================== */

/* Borda dourada em degradê (cartões em destaque) */
.t-borda-grad::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(201, 161, 59, 0.75), transparent 38%, transparent 62%, rgba(11, 107, 53, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Estrutura -------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.lateral {
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 40;
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px 18px;
  border-right: 1px solid var(--borda);
  background: color-mix(in srgb, var(--superficie-forte) 72%, transparent);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  overflow-y: auto;
}
.lateral-topo { padding: 4px 8px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-secao { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-3); padding: 14px 14px 6px; }
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  color: var(--texto-2); font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: background .2s, color .2s;
}
.nav a svg { width: 20px; height: 20px; transition: transform .25s; }
.nav a:hover { background: var(--superficie-3); color: var(--texto); }
.nav a:hover svg { transform: scale(1.1); }
.nav a.ativo { color: var(--texto); background: linear-gradient(90deg, rgba(201, 161, 59, 0.24), rgba(176, 138, 46, 0.06)); box-shadow: inset 0 0 0 1px rgba(201, 161, 59, 0.28); }
.nav a.ativo svg { color: #8c6a1c; }
.nav a.ativo::before { content: ''; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); box-shadow: 0 0 14px rgba(201, 161, 59, 0.8); }
.nav .contador { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--tinta-ouro); background: var(--grad); }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.usuario-caixa { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.usuario-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.usuario-info strong { font-size: 14px; }
.usuario-info span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veu { display: none; }

.conteudo { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 20px clamp(16px, 3vw, 36px) 16px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.topo.rolado { border-bottom-color: var(--borda); }
.topo-titulo { min-width: 0; }
.topo-titulo h1 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 800; }
.topo-titulo p { color: var(--texto-3); font-size: 14px; margin-top: 2px; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.relogio-pilula { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--borda); font-weight: 700; font-size: 14.5px; }
.ponto-vivo { --c: var(--ok); width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: pulsar 1.8s ease-out infinite; }
.menu-movel { display: none; }
.pagina { padding: 6px clamp(16px, 3vw, 36px) 48px; outline: none; }
.vista > * { animation: subir .5s cubic-bezier(.2, 1, .3, 1) both; }
.vista > *:nth-child(2) { animation-delay: .05s; }
.vista > *:nth-child(3) { animation-delay: .1s; }
.vista > *:nth-child(4) { animation-delay: .15s; }
.vista.estatica > * { animation: none; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

/* Avisos ----------------------------------------------------------------- */
#avisos:empty { display: none; }
#avisos { display: flex; flex-direction: column; gap: 10px; padding: 0 clamp(16px, 3vw, 36px) 14px; }
.aviso {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(201, 161, 59, 0.17), rgba(11, 107, 53, 0.08));
  border: 1px solid rgba(201, 161, 59, 0.3);
  font-size: 14px;
}
.aviso > svg { width: 20px; height: 20px; color: #8c6a1c; flex: none; }
.aviso.atencao { background: color-mix(in srgb, var(--alerta) 12%, transparent); border-color: color-mix(in srgb, var(--alerta) 40%, transparent); }
.aviso.atencao > svg { color: var(--alerta); }
.aviso p { flex: 1; min-width: 200px; color: var(--texto-2); }
.aviso b { color: var(--texto); }

/* Cartões ---------------------------------------------------------------- */
.cartao {
  position: relative; min-width: 0;
  padding: 22px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
}
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cartao-topo h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cartao-topo p { color: var(--texto-3); font-size: 13px; margin-top: 3px; }
.cartao-topo h2 .ic { width: 18px; height: 18px; color: var(--texto-3); }

/* Painel ----------------------------------------------------------------- */
.painel-topo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.painel-meio { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.painel-graficos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.hero { overflow: hidden; padding: 28px; display: flex; flex-direction: column; }
.hero::after {
  content: ''; position: absolute; width: 420px; height: 420px; right: -160px; top: -200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 161, 59, 0.35), transparent 65%);
}
.hero-saud { font-size: 15px; color: var(--texto-2); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hero-saud svg { width: 18px; height: 18px; color: var(--alerta); }
.hero-num { margin-top: 18px; font-size: clamp(52px, 6vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.hero-num small { font-size: 0.42em; letter-spacing: -0.02em; color: var(--texto-3); font-weight: 700; -webkit-text-fill-color: var(--texto-3); }
.hero-desc { color: var(--texto-2); margin-top: 8px; font-size: 15px; }
.hero .distrib { margin-top: auto; }
.hero-desc { margin-bottom: 26px; }

.distrib { display: flex; gap: 2px; height: 14px; border-radius: 8px; overflow: hidden; background: var(--superficie-3); }
.distrib span { background: var(--c); min-width: 8px; transition: flex-grow .8s cubic-bezier(.2, 1, .3, 1); cursor: default; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-2); }
.legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.legenda b { color: var(--texto); font-variant-numeric: tabular-nums; }

.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kpi { overflow: hidden; padding: 20px; display: flex; flex-direction: column; }
.kpi::after { content: ''; position: absolute; width: 160px; height: 160px; right: -70px; top: -70px; border-radius: 50%; background: var(--g); opacity: 0.16; filter: blur(30px); pointer-events: none; }
.kpi-icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--fg, #fff); background: var(--g); box-shadow: 0 10px 24px -10px var(--sh, rgba(0, 0, 0, .5)); }
.kpi-icone svg { width: 22px; height: 22px; }
.kpi-rotulo { color: var(--texto-2); font-size: 13.5px; font-weight: 600; margin-top: 16px; }
.kpi-valor { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 2px; }
.kpi-sub { font-size: 12.5px; color: var(--texto-3); margin-top: 4px; }
.g-roxo { --g: linear-gradient(135deg, #ecd185, #b08a2e); --sh: rgba(176, 138, 46, .7); --fg: var(--tinta-ouro); }
.g-verde { --g: linear-gradient(135deg, #1f9a56, #0b6b35); --sh: rgba(11, 107, 53, .6); }
.g-ambar { --g: linear-gradient(135deg, #f5cd55, #d68b0c); --sh: rgba(214, 139, 12, .6); --fg: var(--tinta-ouro); }
.g-rosa { --g: linear-gradient(135deg, #e2403f, #a3121a); --sh: rgba(192, 22, 26, .55); }
.g-ciano { --g: linear-gradient(135deg, #4a443b, #161412); --sh: rgba(22, 20, 18, .55); }

.lista-equipe { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; margin: -6px -8px; padding: 0 8px; }
.pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--borda); text-decoration: none; border-radius: 12px; transition: background .2s; }
.pessoa:last-child { border-bottom: 0; }
.pessoa:hover { background: var(--superficie-2); }
.pessoa-nome { font-weight: 700; font-size: 14.5px; }
.pessoa-sub { font-size: 12.5px; color: var(--texto-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.pessoa-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.pessoa-dir small { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.marcas-mini { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.marcas-mini span { font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--superficie-3); color: var(--texto-2); }

.feed { display: flex; flex-direction: column; gap: 2px; margin: -6px -8px; }
.feed-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; transition: background .2s; }
.feed-item:hover { background: var(--superficie-2); }
.feed-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--borda-forte); cursor: zoom-in; }
.feed-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.feed-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-texto span { font-size: 12.5px; color: var(--texto-3); }
.feed-hora { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.feed-hora b { font-family: var(--mono); font-size: 14px; }
.feed-hora small { color: var(--texto-3); font-size: 11.5px; }
.feed-item.novo { animation: realce 2.4s ease; }
@keyframes realce { 0%, 30% { background: rgba(201, 161, 59, 0.2); } }

/* Gráficos --------------------------------------------------------------- */
.graf { position: relative; width: 100%; }
.graf svg { width: 100%; overflow: visible; }
.graf text { fill: var(--texto-3); font-size: 11.5px; font-family: var(--fonte); }
.graf .rot-x { font-weight: 600; }
.graf .rot-x.hoje { fill: var(--texto); font-weight: 800; }
.graf .grade-l { stroke: var(--graf-grade); stroke-width: 1; }
.graf .eixo { stroke: var(--graf-eixo); stroke-width: 1; }
.graf .valor { fill: var(--texto); font-weight: 700; font-size: 12px; }
.graf .barra { transition: opacity .2s; }
.graf .alvo { fill: transparent; cursor: pointer; }
.graf.focando .barra { opacity: 0.45; }
.graf.focando .barra.ativa { opacity: 1; }
.graf-dica {
  position: absolute; z-index: 10; pointer-events: none;
  padding: 8px 12px; border-radius: 10px;
  background: var(--superficie-forte); border: 1px solid var(--borda-forte); box-shadow: var(--sombra);
  font-size: 12.5px; color: var(--texto-2); white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0; transition: opacity .15s;
}
.graf-dica.visivel { opacity: 1; }
.graf-dica b { display: block; color: var(--texto); font-size: 14px; }
.graf-vazio { padding: 40px 0; text-align: center; color: var(--texto-3); font-size: 14px; }

.div-lista { display: flex; flex-direction: column; gap: 4px; }
.div-linha { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 3px 0; border-radius: 8px; }
.div-linha:hover { background: var(--superficie-2); }
.div-nome { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.div-nome span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-trilha { position: relative; height: 26px; }
.div-trilha::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--graf-eixo); }
.div-barra { position: absolute; top: 6px; height: 14px; }
.div-barra.pos { left: 50%; background: var(--div-pos); border-radius: 0 4px 4px 0; }
.div-barra.neg { right: 50%; background: var(--div-neg); border-radius: 4px 0 0 4px; }
.div-valor { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.div-legenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); margin-top: 10px; padding-left: calc(min(150px, 30%) + 12px); }
.div-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.div-legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* Barra de ferramentas --------------------------------------------------- */
.barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.barra .espaco { flex: 1; }
.barra .busca { flex: 1 1 260px; max-width: 380px; }
.barra select.entrada { width: auto; min-width: 180px; }
.seletor-mes { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.seletor-mes strong { min-width: 168px; text-align: center; font-size: 14.5px; }
.seletor-mes strong::first-letter { text-transform: uppercase; }
.seletor-mes .btn { flex: none; }
/* As abas quebram em mais de uma linha quando não cabem (nunca vazam para o lado). */
.abas { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 4px; gap: 2px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.abas button { height: 34px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: var(--texto-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.abas button.ativo { background: var(--superficie-forte); color: var(--texto); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }

/* Funcionários ----------------------------------------------------------- */
.grade-func { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 18px; }
.func-cartao { overflow: hidden; padding: 22px; display: flex; flex-direction: column; gap: 16px; transition: transform .3s cubic-bezier(.2, 1, .3, 1), box-shadow .3s, border-color .3s; }
.func-cartao::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 84px; background: linear-gradient(120deg, rgba(240, 217, 145, .5), rgba(201, 161, 59, .12) 70%, transparent); border-bottom: 1px solid rgba(201, 161, 59, .18); pointer-events: none; }
.func-cartao:hover { transform: translateY(-5px); border-color: rgba(201, 161, 59, 0.38); box-shadow: 0 34px 60px -30px rgba(176, 138, 46, 0.65); }
.func-cartao.inativo { opacity: 0.62; }
.func-topo { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.func-id { position: relative; }
.func-nome { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.func-cargo { color: var(--texto-3); font-size: 13.5px; }
.func-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.func-info div { display: flex; flex-direction: column; min-width: 0; }
.func-info span { font-size: 11.5px; color: var(--texto-3); font-weight: 600; }
.func-info b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.func-acoes { display: flex; gap: 8px; margin-top: auto; }
.func-acoes .btn:first-child { flex: 1; }

.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grade .largo { grid-column: 1 / -1; }
.form-grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-secao { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--texto-3); }
.form-secao::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.form-secao:first-child { margin-top: 0; }
.dias-escolha { display: flex; gap: 6px; flex-wrap: wrap; }
.dias-escolha label { position: relative; cursor: pointer; }
/* Caixa invisível presa ao próprio rótulo (solta, ela fazia o modal rolar para o lado no iPhone). */
.dias-escolha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.dias-escolha span { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); font-size: 13px; font-weight: 700; color: var(--texto-2); transition: all .2s; }
.dias-escolha input:checked + span { background: var(--grad); border-color: transparent; color: var(--tinta-ouro); box-shadow: var(--sombra-cor); }
.dias-escolha input:focus-visible + span { box-shadow: var(--anel-foco); }
/* Horário próprio de alguns dias (ex.: sábado até meio-dia) */
.horarios-dia { gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.hd-linha { display: grid; grid-template-columns: 44px repeat(2, minmax(0, 1fr)) minmax(0, 120px) 52px; gap: 8px; align-items: center; }
.hd-cab span { font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
.hd-linha > b { font-size: 13px; font-weight: 800; color: var(--texto-3); }
.hd-linha.proprio > b { color: var(--ouro-escuro); }
.campo.horarios-dia input { background: var(--superficie-forte); }
.hd-linha.proprio input { border-color: rgba(201, 161, 59, 0.55); }
.hd-carga { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.func-info .largo { grid-column: 1 / -1; }
.pin-revelado { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 8px 0; }
.pin-revelado .pin { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: 0.3em; padding: 12px 18px 12px 28px; border-radius: 18px; background: var(--superficie-2); border: 1px dashed var(--borda-forte); }

/* Tabelas ---------------------------------------------------------------- */
/* position: relative segura os elementos absolutos da tabela (ex.: .sr-only do cabeçalho "Ações"):
   sem isso eles escapavam da rolagem e a página inteira rolava para o lado no iPhone. */
.tabela-caixa { position: relative; overflow-x: auto; margin: 0 -22px; padding: 0 22px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabela th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-3); padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr { transition: background .15s; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .nome-cel { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tabela .nome-cel small { display: block; color: var(--texto-3); font-weight: 500; font-size: 12px; }
.saldo { font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.saldo svg { width: 15px; height: 15px; }

.esp-linha.fim td { color: var(--texto-3); }
.esp-linha.futuro { opacity: 0.4; }
.esp-linha.hoje td { background: rgba(201, 161, 59, 0.1); }
.esp-linha.hoje td:first-child { box-shadow: inset 3px 0 0 #c9a13b; }
.esp-dia { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.esp-dia b { font-variant-numeric: tabular-nums; font-size: 15px; width: 22px; }
.esp-dia span { font-size: 12.5px; color: var(--texto-3); width: 30px; }
.marcs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.marc {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--superficie-3);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .2s, transform .15s;
}
.marc:hover { border-color: rgba(201, 161, 59, 0.6); transform: translateY(-1px); }
.marc.manual { border-style: dashed; border-color: color-mix(in srgb, var(--alerta) 70%, transparent); }
.marc svg { width: 13px; height: 13px; color: var(--texto-3); }
.btn-add-marc { opacity: 0; }
.esp-linha:hover .btn-add-marc, .btn-add-marc:focus-visible { opacity: 1; }

.esp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; }
.esp-pessoa { display: flex; align-items: center; gap: 16px; min-width: 0; }
.esp-pessoa h2 { font-size: 22px; font-weight: 800; }
.esp-pessoa p { color: var(--texto-3); font-size: 13.5px; }
.totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-top: 20px; }
.total { padding: 14px 16px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.total > span { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.total strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.total.destaque { background: linear-gradient(135deg, rgba(201, 161, 59, 0.22), rgba(11, 107, 53, 0.08)); border-color: rgba(201, 161, 59, 0.38); }

.detalhe-marc { display: grid; gap: 12px; }
.detalhe-marc .linha { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.detalhe-marc .linha span { color: var(--texto-3); }
.detalhe-marc .linha b { text-align: right; }
.detalhe-marc img { width: 100%; max-width: 280px; aspect-ratio: 1; object-fit: cover; border-radius: 18px; margin: 0 auto 6px; box-shadow: var(--sombra); }

/* Configurações ---------------------------------------------------------- */
.grade-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grade-config form { display: flex; flex-direction: column; gap: 14px; }
.lista-simples { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; margin: 0 -8px; }
.lista-simples > div { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; }
.lista-simples > div:hover { background: var(--superficie-2); }
.lista-simples .data { font-family: var(--mono); font-size: 13px; color: var(--texto-2); width: 92px; flex: none; }
.lista-simples .nome { flex: 1; font-size: 14px; }
.linha-form, .grade-config .linha-form { display: flex; flex-direction: row; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.linha-form .campo { flex: 1 1 140px; }

.vazio { text-align: center; padding: 48px 16px; color: var(--texto-3); }
.vazio svg { width: 46px; height: 46px; margin: 0 auto 14px; opacity: 0.55; }
.vazio h3 { color: var(--texto); font-size: 17px; margin-bottom: 4px; }
.carregando { display: grid; place-items: center; padding: 80px 0; }
.carregando span { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--superficie-3); border-top-color: var(--roxo); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.so-impressao { display: none; }

/* Portal: acesso, documentos e rede -------------------------------------- */
.func-acesso { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-3); font-weight: 600; }
.func-acesso svg { width: 14px; height: 14px; color: var(--pos-texto); }
.acesso-dados { width: 100%; display: grid; gap: 8px; text-align: left; }
.acesso-dados div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: var(--superficie-2); border: 1px dashed var(--borda-forte); }
.acesso-dados span { color: var(--texto-3); font-size: 13px; }
.acesso-dados b { font-size: 15px; word-break: break-all; text-align: right; }
.previa-doc { width: 100%; height: min(62vh, 640px); border: 1px solid var(--borda); border-radius: 14px; background: #fff; object-fit: contain; }
img.previa-doc { height: auto; max-height: min(62vh, 640px); }
.ocorr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.kpi { transition: transform .25s cubic-bezier(.2, 1, .3, 1), border-color .25s; }
a.kpi:hover { transform: translateY(-3px); border-color: rgba(201, 161, 59, 0.4); }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 2px 2px 2px 10px; border-radius: 10px; background: var(--superficie-3); border: 1px solid var(--borda); font-size: 13px; }
.doc-chip a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; }
.doc-chip a:hover { text-decoration: underline; }
.doc-chip svg { width: 14px; height: 14px; }
.doc-chip .visto { display: inline-flex; align-items: center; gap: 4px; color: var(--pos-texto); font-size: 12px; font-weight: 600; }
.doc-chip .nao-visto { color: var(--texto-3); font-size: 12px; }
.doc-chip .btn { --altura: 26px; }
.rede-atual { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--borda); }
.rede-atual > svg { width: 22px; height: 22px; color: var(--texto-3); flex: none; }
.rede-atual.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.rede-atual.ok > svg { color: var(--pos-texto); }
.rede-atual > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; line-height: 1.4; }
.rede-atual span, .rede-atual small { color: var(--texto-3); font-size: 12.5px; }
.rede-atual b { font-size: 17px; }
.tabela.registro tr.alerta td { background: color-mix(in srgb, var(--critico) 7%, transparent); }
.tabela.registro td { vertical-align: top; }

/* Modal "Analisar": no iPhone/iPad o PDF dentro do quadro mostra só a 1ª página, então o botão de abrir fica em destaque */
.btn-doc {
  --altura: 50px;
  border: 1.5px solid rgba(201, 161, 59, 0.6);
  background: linear-gradient(180deg, #fffdf6, #f7efd8);
  color: var(--ouro-escuro); font-weight: 700; font-size: 15px;
}
.btn-doc:hover { background: linear-gradient(180deg, #fffaf0, #f1e4c0); border-color: var(--ouro); }
.previa-dica { margin-top: -6px; font-size: 12.5px; color: var(--texto-3); text-align: center; }
/* O X do modal nunca encolhe quando o título é comprido */
.gestor .modal-topo > .btn { flex: none; }

/* Responsivo ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .painel-topo, .painel-meio, .painel-graficos { grid-template-columns: minmax(0, 1fr); }
  .ocorr-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* Menu lateral recolhível: preso às bordas da tela visível (não usa 100vh, que no Safari fica atrás da barra),
     respeita o entalhe e a barra de início e some de vez quando fechado (não recebe toque nem foco). */
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto;
    width: calc(280px + env(safe-area-inset-left)); max-width: 88vw;
    padding: calc(22px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    transform: translateX(-105%); visibility: hidden;
    transition: transform .35s cubic-bezier(.2, 1, .3, 1), visibility 0s linear .35s;
    background: var(--superficie-forte);
    -webkit-backdrop-filter: none; backdrop-filter: none; /* fundo já é opaco: o desfoque só deixaria a abertura mais lenta */
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .lateral.aberta { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, 1, .3, 1), visibility 0s; box-shadow: 30px 0 80px rgba(0, 0, 0, .5); }
  .veu { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(28, 22, 10, .5); opacity: 0; pointer-events: none; transition: opacity .3s; touch-action: none; }
  .veu.visivel { opacity: 1; pointer-events: auto; }
  /* Com o menu aberto o fundo não rola junto */
  html.menu-aberto, html.menu-aberto body { overflow: hidden; }
  /* No celular o conteúdo passa muito por baixo do topo: fundo mais firme para o título não se misturar */
  .gestor .topo.rolado { background: color-mix(in srgb, var(--bg) 90%, transparent); }
  .menu-movel { display: inline-flex; flex: none; }
  .grade-config { grid-template-columns: minmax(0, 1fr); }
}
/* iPad em pé (sem o menu fixo): os 4 indicadores de ocorrências cabem numa linha */
@media (min-width: 641px) and (max-width: 960px) {
  .ocorr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .ocorr-kpis .kpi { padding: 16px; }
  .ocorr-kpis .kpi-valor { font-size: 26px; }
  /* Espelho: funcionário, mês e botões numa linha só */
  .gestor .barra select.entrada { flex: 1 1 180px; min-width: 0; max-width: 300px; }
  .gestor .seletor-mes strong { min-width: 140px; }
}
@media (max-width: 640px) {
  .topo { padding-top: 14px; }
  .topo-titulo p { display: none; }
  .relogio-pilula { display: none; }
  .mini-kpis { gap: 12px; }
  .kpi { padding: 16px; }
  .kpi-valor { font-size: 26px; }
  .form-grade, .form-grade.tres { grid-template-columns: minmax(0, 1fr); }
  .cartao { padding: 18px; }
  .tabela-caixa { margin: 0 -18px; padding: 0 18px; }
  .seletor-mes strong { min-width: 130px; }
  .barra .busca { max-width: none; }
}

/* ==========================================================================
   iPhone, iPad e Safari (área do gestor)
   Tudo com o prefixo .gestor para não mexer no portal do funcionário, que usa
   as mesmas peças (.barra, .tabela, .totais...) com regras próprias.
   ========================================================================== */

/* Área segura: entalhe do iPhone deitado e barra de início ------------------ */
.gestor .topo, .gestor #avisos, .gestor .pagina {
  padding-left: max(clamp(16px, 3vw, 36px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 3vw, 36px), env(safe-area-inset-right));
}
.gestor .topo { padding-top: calc(20px + env(safe-area-inset-top)); }
.gestor .pagina { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.gestor .toasts { right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  /* Avisos rápidos (toasts) na largura da tela, acima da barra de início */
  .gestor .toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
}

/* Toque: alvos de pelo menos 40px (36px nas tabelas densas) ---------------- */
@media screen and (pointer: coarse) {
  .gestor .btn-sm { --altura: 40px; }
  .gestor .tabela .btn-sm, .gestor .doc-chip .btn { --altura: 36px; }
  .gestor .abas button { height: 40px; }
  .gestor .marc { height: 36px; padding: 0 10px; }
  .gestor a.pilula { height: 36px; padding: 0 14px 0 12px; }
  .gestor .div-linha { min-height: 40px; }
  .gestor .nav a { padding-top: 12px; padding-bottom: 12px; }
  /* Sem "passar o mouse" no toque: o + de lançar marcação fica sempre à vista */
  .gestor .btn-add-marc { opacity: .6; }
  /* Botão de mostrar a senha: maior e ainda dentro do campo de 44px */
  .gestor .senha-caixa button { top: 2px; right: 2px; }
  /* Caixa invisível do interruptor ocupa o próprio interruptor (o toque é no rótulo inteiro) */
  .gestor .interruptor { position: relative; }
  .gestor .interruptor input { inset: 0; width: 100%; height: 100%; margin: 0; }
  /* A prévia em PDF no iPhone/iPad é só uma imagem da 1ª página: menor, para os botões aparecerem */
  .gestor iframe.previa-doc { height: min(42vh, 420px); }
  .gestor img.previa-doc { max-height: min(50vh, 520px); }
}

/* Celular (até 640px) ------------------------------------------------------- */
@media (max-width: 640px) {
  /* Topo: título numa linha só */
  .gestor .topo { gap: 8px; padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
  .gestor .menu-movel { margin-left: -8px; }
  .gestor .topo-titulo h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Avisos compactos: ícone, texto e botão alinhados ao texto */
  .gestor #avisos { gap: 8px; }
  .gestor .aviso { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }
  .gestor .aviso > svg { margin-top: 1px; }
  .gestor .aviso p { min-width: 0; }
  .gestor .aviso > p:first-child { grid-column: 1 / -1; }
  .gestor .aviso > .btn { grid-column: 2; justify-self: start; }

  /* Barra de ferramentas: cada controle ocupa a largura toda; botões dividem a linha */
  .gestor .barra { gap: 10px; margin-bottom: 16px; }
  .gestor .barra .espaco { display: none; }
  .gestor .barra .busca, .gestor .barra select.entrada { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; }
  .gestor .barra .seletor-mes { display: flex; flex: 1 1 100%; }
  .gestor .seletor-mes strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gestor .barra .abas { display: flex; width: 100%; }
  .gestor .abas button { flex: 1 1 auto; padding: 0 12px; }
  .gestor .barra > .btn:not(.btn-icone) { flex: 1 1 auto; }

  /* Totais em duas colunas */
  .gestor .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gestor .total { padding: 12px 14px; }
  .gestor .total strong { font-size: 19px; }

  /* Painel: equipe sem rolagem interna e situação embaixo do nome */
  .gestor .lista-equipe { max-height: none; }
  .gestor .pessoa { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }
  .gestor .pessoa > .avatar { grid-row: span 2; }
  .gestor .pessoa-dir { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  .gestor .div-legenda { padding-left: 0; }

  /* Funcionários */
  .gestor .func-cartao { padding: 18px; }
  .gestor .func-acoes { gap: 6px; }
  .gestor .func-acoes .btn:first-child { min-width: 0; }

  /* Espelho: cabeçalho da pessoa mais compacto */
  .gestor .esp-pessoa { gap: 12px; align-items: flex-start; }
  .gestor .esp-pessoa .avatar { --tam: 46px !important; }
  .gestor .esp-pessoa h2 { font-size: 19px; }
  .gestor .esp-pessoa p { font-size: 13px; }

  /* Configurações */
  .gestor .lista-simples > div { gap: 10px; }
  .gestor .lista-simples .data[style] { min-width: 0 !important; flex: 0 1 auto; overflow-wrap: anywhere; }
  .gestor .lista-simples .nome { min-width: 0; overflow-wrap: anywhere; }
  .gestor .cartao-topo > .btn { flex: 1 1 auto; }

  /* Formulários dos modais */
  .gestor .form-grade.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gestor .form-grade.tres > :last-child { grid-column: 1 / -1; }
  .gestor .dias-escolha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gestor .dias-escolha span { width: auto; height: 44px; }
  .gestor .horarios-dia { padding: 10px; }
  .gestor .hd-linha { grid-template-columns: 34px repeat(2, minmax(0, 1fr)) 58px; gap: 6px; }
  .gestor .hd-linha .hd-carga, .gestor .hd-cab span:last-child { display: none; }
  .gestor .horarios-dia input { padding: 0 8px; }
  .gestor .beneficio .campo:first-child { flex-basis: 100%; }
  .gestor .pin-revelado .pin { font-size: 34px; }
  .gestor .acesso-dados div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .gestor .acesso-dados b { text-align: left; }

  /* Modais: quase a tela toda, cabem no iPhone SE e rolam por dentro com os botões sempre à vista */
  .gestor dialog.modal:not(.folha-ios) {
    /* 100% = largura visível sem a barra de rolagem (o modal é fixo na tela) */
    width: min(var(--largura, 560px), calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-width: none; /* o Safari limita o <dialog> a 100% - 2em por padrão */
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 20px;
  }
  .gestor dialog.modal:not(.folha-ios) .modal-topo { align-items: flex-start; gap: 10px; padding: 16px 14px 12px 18px; }
  .gestor dialog.modal:not(.folha-ios) .modal-topo h3 { font-size: 17px; }
  .gestor dialog.modal:not(.folha-ios) .modal-corpo { padding: 16px 18px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .gestor dialog.modal:not(.folha-ios) .modal-acoes { gap: 8px; padding: 12px 18px 14px; }
  .gestor dialog.modal:not(.folha-ios) .modal-acoes > .btn { flex: 1 1 auto; }
  .gestor .modal-corpo .tabela-caixa { margin: 0 -18px; padding: 0 18px; }
}

/* iPhone SE e menores: no cartão do funcionário, "Espelho" ganha a linha toda e os 4 ícones dividem a de baixo */
@media (max-width: 380px) {
  .gestor .func-acoes { flex-wrap: wrap; }
  .gestor .func-acoes .btn:first-child { flex: 1 1 100%; }
  .gestor .func-acoes .btn-icone { flex: 1 1 0; }
}

/* Espelho: marcações sempre lado a lado (com pouca largura a tabela rola para o lado em vez de cada dia virar uma coluna alta).
   Só na tela: na impressão (folha A4 ≈ 700px) elas continuam quebrando linha para caber na página. */
@media screen {
  .gestor .tabela-esp .marcs { flex-wrap: nowrap; }
}

/* Celular, celular deitado e iPad (até 960px, ou iPad deitado até 1180px): tabelas */
@media screen and (max-width: 960px), screen and (pointer: coarse) and (max-width: 1180px) {
  /* Espelho: a coluna do dia fica fixa ao rolar a tabela para o lado */
  .gestor .tabela-esp th:first-child, .gestor .tabela-esp td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--superficie-forte); box-shadow: 1px 0 0 var(--borda);
  }
  .gestor .tabela-esp .esp-linha.hoje td:first-child { background: linear-gradient(rgba(201, 161, 59, 0.1), rgba(201, 161, 59, 0.1)), var(--superficie-forte); box-shadow: inset 3px 0 0 #c9a13b, 1px 0 0 var(--borda); }
  .gestor .tabela-esp tbody tr:hover td:first-child { background: var(--superficie-2); }
  /* Tabelas que continuam tabela (espelho, banco de horas): nome numa linha só */
  .gestor .tabela:not(.tabela-cartoes) .nome-cel { white-space: nowrap; }

  /* Tabelas em cartões (ausências, ocorrências, holerites, contratos, registro de segurança):
     cada linha vira um cartão; o nome da coluna aparece acima de cada valor (data-rotulo). */
  .gestor .tabela-cartoes, .gestor .tabela-cartoes tbody { display: block; }
  .gestor .tabela-cartoes thead { display: none; }
  /* Duas informações por linha (quatro no iPad); .cel-larga ocupa a linha toda; .cel-auto fica do tamanho
     do conteúdo; as ações vão para a direita, ao lado do último campo quando cabem ou numa linha própria. */
  .gestor .tabela-cartoes tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 16px 0; border-bottom: 1px solid var(--borda); }
  .gestor .tabela-cartoes tbody tr:last-child { border-bottom: 0; }
  .gestor .tabela-cartoes tbody tr:hover { background: transparent; }
  .gestor .tabela-cartoes td { display: block; flex: 1 1 calc(50% - 7px); min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal !important; overflow-wrap: anywhere; }
  .gestor .tabela-cartoes td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; margin-bottom: 4px;
    font-family: var(--fonte); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3);
  }
  .gestor .tabela-cartoes .cel-larga { flex-basis: 100%; }
  .gestor .tabela-cartoes .cel-auto { flex: 0 1 auto; }
  .gestor .tabela-cartoes .cel-primeira { order: -2; }
  .gestor .tabela-cartoes .cel-topo { order: -1; }
  .gestor .tabela-cartoes .cel-fim { order: 1; }
  .gestor .tabela-cartoes .cel-acoes { flex: 1 0 auto; align-self: flex-end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
  .gestor .tabela-cartoes .btn-sm { --altura: 40px; }
  .gestor .tabela-cartoes .nome-cel { font-size: 15px; }
  /* Pílula comprida em coluna estreita (iPhone SE) quebra a linha em vez de vazar */
  .gestor .tabela-cartoes .pilula { max-width: 100%; height: auto; min-height: 26px; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 1.3; }
  .gestor .tabela-cartoes a.pilula { min-height: 36px; }
  .gestor .tabela.registro.tabela-cartoes tr.alerta { margin: 0 -18px; padding-left: 18px; padding-right: 18px; background: color-mix(in srgb, var(--critico) 7%, transparent); }
  .gestor .tabela.registro.tabela-cartoes tr.alerta td { background: none; }
  .gestor .doc-chip { padding: 4px 4px 4px 12px; }
  .gestor .doc-chip a { min-height: 32px; }
}
/* iPad (em pé e deitado) e celular deitado: até quatro informações por linha nos cartões */
@media screen and (min-width: 641px) and (max-width: 960px), screen and (pointer: coarse) and (min-width: 641px) and (max-width: 1180px) {
  .gestor .tabela-cartoes td { flex-basis: calc(25% - 11px); }
  .gestor .tabela-cartoes .cel-larga { flex-basis: 100%; }
  .gestor .tabela-cartoes .cel-metade { flex-basis: calc(50% - 7px); }
  .gestor .tabela-cartoes .cel-auto { flex: 0 1 auto; }
  .gestor .tabela-cartoes .cel-acoes { flex: 1 0 auto; }
}

/* Celular deitado (pouca altura): modais e topo mais baixos ----------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .gestor .topo { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
  .gestor .topo-titulo p { display: none; }
  .gestor #avisos { gap: 8px; }
  .gestor .aviso { gap: 10px 14px; padding: 8px 14px; font-size: 13.5px; }
  .gestor dialog.modal:not(.folha-ios) {
    width: min(var(--largura, 560px), calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-width: none;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .gestor dialog.modal:not(.folha-ios) .modal-topo { padding: 12px 14px 10px 20px; }
  .gestor dialog.modal:not(.folha-ios) .modal-corpo { padding: 14px 20px; overscroll-behavior: contain; }
  .gestor dialog.modal:not(.folha-ios) .modal-acoes { padding: 10px 20px; }
  .gestor iframe.previa-doc { height: 60vh; }
  .gestor .detalhe-marc img { max-width: 200px; }
}

/* Impressão (espelho de ponto) ------------------------------------------- */
@media print {
  :root, :root[data-theme] {
    --bg: #fff; --superficie: #fff; --superficie-forte: #fff; --superficie-2: #fff; --superficie-3: #f2f2f2;
    --borda: #d4d4d4; --borda-forte: #bbb; --texto: #000; --texto-2: #222; --texto-3: #555;
    --pos-texto: #000; --neg-texto: #000;
  }
  body { background: #fff; font-size: 11px; }
  .aurora, .grade-fundo, .lateral, .topo, #avisos, .barra, .nao-imprimir, .toasts, .veu, .btn-add-marc { display: none !important; }
  .app { display: block; }
  .pagina, .gestor .pagina { padding: 0; }
  .vista > * { animation: none !important; }
  .cartao { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: 0; margin-bottom: 12px; }
  .so-impressao { display: block; }
  .avatar { display: none; }
  .total { padding: 6px 8px; }
  .total strong { font-size: 14px; }
  .tabela td, .tabela th { padding: 4px 6px; }
  .marc { height: auto; padding: 0 4px; border: 0; background: none; }
  .marc svg { display: none; }
  .esp-linha.hoje td { background: none; box-shadow: none; }
  .pilula { background: none; border: 0; padding: 0; height: auto; }
  .pilula .ponto { display: none; }
  .assinaturas { display: flex !important; gap: 60px; margin-top: 50px; }
  .assinaturas div { flex: 1; border-top: 1px solid #000; padding-top: 6px; text-align: center; }
  @page { margin: 12mm; }
}
.assinaturas { display: none; }