/* Página do cliente (camada 2, 22/10/2026): uma coluna da largura do celular; no computador, centrada em 480 px. Paleta
   clara única: é página de consumidor, aberta pelo WhatsApp. A tela aprovada pelo Rod: as semanas até a data com as etapas. */
:root {
  color-scheme: light;
  --fundo: #EEF2EE; --papel: #FFFFFF; --papel2: #F5F7F4; --tinta: #14201A; --sub: #5D6A63; --linha: #E1E6E0;
  /* Texto pequeno com contraste AA (4,5:1): --claro sobre --marca 4,66; --muda sobre --muda-f 5,77; --chuva-t (o mm) sobre
     --papel2 5,24 e sobre --marca-f 4,87. --chuva fica só no traço dos pingos. */
  --marca: #15805A; --marca-f: #E2F2E9; --marca-t: #0E5C40; --branco: #FFFFFF; --escuro: #0B131E; --claro: #F2FBF6;
  --sol: #E3A21A; --nuvem: #A9B3BB; --chuva: #3A80C2; --chuva-t: #2C6AA6; --chuva-f: #E7F0FA; --feriado: #A7B0AA;
  --muda: #8A5110; --muda-f: #FDF1DF;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.45 }
body { padding-block: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
[hidden] { display: none !important }
/* Só para o leitor de tela: fora da vista, sem ocupar lugar. */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap }
/* O título que recebe o foco depois de "Tentar de novo" não ganha moldura (não é controle). */
[tabindex="-1"]:focus { outline: none }

.exemplo { max-width: 480px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--sub) }
.exemplo .rot { width: 100%; font-weight: 600 }
.caso { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--linha); background: var(--papel);
  color: var(--tinta); min-height: 34px }
.caso[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--branco) }

.app { max-width: 480px; margin: 0 auto; background: var(--papel); border-radius: 22px; padding: 18px 18px 22px; display: flex;
  flex-direction: column; gap: 16px; box-shadow: 0 8px 28px rgba(10, 30, 20, .08) }
.carregando { color: var(--sub); text-align: center; margin: 24px 0 }

.topo { display: flex; align-items: center; gap: 12px }
.logo { background: var(--escuro); border-radius: 10px; padding: 8px 10px; flex: none; display: flex }
.logo img { height: 20px; width: auto; display: block }
.ola { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; min-width: 0; overflow-wrap: anywhere }
.ola small { display: block; font-size: 13.5px; font-weight: 400; color: var(--sub); margin-top: 2px }

.mudou { border-radius: 14px; background: var(--muda-f); padding: 11px 13px; font-size: 14.5px }
.mudou b { color: var(--muda) }
.mudou s { color: var(--sub) }

.hero { background: var(--marca-f); border-radius: 18px; padding: 16px }
.hero.firme { background: var(--marca); color: var(--branco) }
.hero.revisao { background: var(--muda-f) }
.hero .olho { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--marca-t); font-weight: 700 }
.hero .data { font-size: 27px; line-height: 1.15; font-weight: 700; margin-top: 4px; text-wrap: balance }
.hero .falta { font-size: 14.5px; color: var(--marca-t); margin-top: 4px }
.hero.firme .olho, .hero.firme .falta { color: var(--claro) }
.hero.revisao .olho, .hero.revisao .falta { color: var(--muda) }

.sec { display: flex; flex-direction: column; gap: 8px }
.sec h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--sub) }
.semanas { display: flex; flex-direction: column; gap: 6px }
.sem { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 14px }
/* Obra com sábado: seis dias na linha (a 360 px, 31 px de conteúdo por dia). Encolhem só o "feriado" e o mm: em Segoe UI,
   "feriado" a 9 px tem 28 px (em caixa alta, 36: por isso sem caixa alta, abaixo), "9,5 mm" a 9 px em negrito, 30,7. */
.semanas.sabado .sem { grid-template-columns: 52px repeat(6, minmax(0, 1fr)) }
.semanas.sabado .d.feriado small { font-size: 9px; letter-spacing: 0 }
.semanas.sabado .mm { font-size: 9px; letter-spacing: -.02em }
.sem.alvo { background: var(--marca-f) }
.sem .rot { font-size: 11.5px; color: var(--sub); align-self: center; line-height: 1.2; font-variant-numeric: tabular-nums }
.sem.alvo .rot { color: var(--marca-t); font-weight: 600 }
.gap { font-size: 12px; color: var(--sub); text-align: center; padding: 2px 0 }
/* padding-block: respiro em cima e embaixo da célula, porque os mm encostavam na borda de baixo (QA de 22/10). Não muda a
   largura. */
.d { border-radius: 10px; background: var(--papel2); min-height: 54px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; border: 1.5px solid transparent;
  padding-block: 4px }
.d small { font-size: 10px; text-transform: uppercase; color: var(--sub); letter-spacing: .03em }
.sem.alvo .d { background: var(--papel) }
.d.passado { opacity: .45 }
/* Hoje é um contorno por dentro (sombra), não a borda: convive com a borda tracejada do dia previsto. */
.d.hoje { box-shadow: inset 0 0 0 2px var(--tinta) }
.d.feriado { color: var(--feriado) }
/* "feriado" em caixa baixa (como o desenho escreve): em caixa alta não cabe na coluna a 360 px, nem com 5 dias (41,7 px
   a 10 px para 39 de conteúdo). */
.d.feriado small { text-transform: none; letter-spacing: 0 }
/* Depois do .sem.alvo .d, com a mesma força: a marca do dia vale mais que o fundo da semana. */
.sem .d.previsto { border: 1.5px dashed var(--marca); background: var(--marca-f); color: var(--marca-t); font-weight: 700 }
.sem .d.firme { background: var(--marca); color: var(--branco); font-weight: 700 }
.sem .d.feito { background: var(--tinta); color: var(--branco); font-weight: 700 }
.sem .d.firme small, .sem .d.feito small, .sem .d.firme .mm, .sem .d.feito .mm { color: var(--branco) }
.mm { font-size: 10px; color: var(--chuva-t); font-weight: 700; line-height: 1; white-space: nowrap }
.junto { white-space: nowrap }

.ic { width: 18px; height: 18px; display: block; flex: none }
.ic .sol { fill: var(--sol) }
.ic .raio { stroke: var(--sol); stroke-width: 2; stroke-linecap: round; fill: none }
.ic .nuvem { fill: var(--nuvem) }
.ic .pingo { stroke: var(--chuva); stroke-width: 2; stroke-linecap: round; fill: none }
.ic .trovao { stroke: var(--sol); stroke-width: 2; stroke-linejoin: round; fill: none }

.leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--sub) }
.leg span { display: inline-flex; align-items: center; gap: 5px }
.leg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block }
.leg .q-hoje { box-shadow: inset 0 0 0 2px var(--tinta) }
.leg .q-prev { border: 1.5px dashed var(--marca); background: var(--marca-f) }
.leg .q-firme { background: var(--marca) }

.tempo { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--sub); background: var(--papel2); border-radius: 12px;
  padding: 10px 12px }
.tempo.chuva { background: var(--chuva-f); color: var(--tinta) }

.etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.etapa { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 12px }
.etapa:last-child { padding-bottom: 0 }
.etapa::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--linha) }
.etapa:last-child::before { display: none }
.bola { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linha); background: var(--papel); display: grid;
  place-items: center; font-size: 12px; color: var(--branco); position: relative; z-index: 1 }
.etapa.ok .bola { background: var(--marca); border-color: var(--marca) }
.etapa.agora .bola { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-f) }
.etapa .t { font-size: 15px; line-height: 1.3 }
.etapa .t small { display: block; font-size: 13px; color: var(--sub) }
.etapa.depois .t { color: var(--sub) }

.aviso { margin: 0; font-size: 13.5px; color: var(--sub) }
.pv { display: flex; flex-direction: column; gap: 6px }
.zap { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px; background: var(--tinta);
  color: var(--branco); font-weight: 600; font-size: 16px; text-decoration: none }
.numero { font-size: 13.5px; color: var(--sub); text-align: center }
.rodape { margin: 0; font-size: 12px; color: var(--sub); text-align: center }
.indisponivel h2, .erro h2 { font-size: 22px; line-height: 1.2; margin: 6px 0 8px }
.indisponivel p, .erro p { margin: 0; color: var(--sub) }
.tentar { margin-top: 12px; font: inherit; font-weight: 600; min-height: 46px; padding: 0 18px; border-radius: 12px; border: 0;
  background: var(--marca); color: var(--branco) }
.zap:focus-visible, .caso:focus-visible, .tentar:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px }