@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --fundo: #F4F3F4;
  --card: #FFFFFF;
  --grafite: #4A4448;
  --tinta: #2E2A2D;
  --apagado: #6E686C;
  --linha: #DCD9DB;
  --obra: #D2232A;
  --claro: #F0787D;
  --verde: #2F7D4F;
  --erro: #8E1C22;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  min-height: 100vh;
}
a { color: var(--obra); }

header.topo { background: #fff; padding: 20px 16px 22px; border-bottom: 4px solid var(--obra); }
header.topo .caixa { max-width: 520px; margin: 0 auto; }
header.topo img { height: 56px; display: block; margin-bottom: 12px; }
.selo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--obra); font-weight: 700; }
h1 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 26px; color: var(--grafite); margin: 6px 0 0; line-height: 1.15; }
h2 { font-family: 'Archivo', sans-serif; font-size: 18px; margin: 0 0 10px; }

main { max-width: 520px; margin: 0 auto; padding: 0 16px 48px; }

.etapas { display: flex; gap: 6px; margin: 18px 0 22px; }
.etapas div { flex: 1; }
.etapas .barra { height: 4px; border-radius: 2px; background: var(--linha); }
.etapas .ativa .barra, .etapas .feita .barra { background: var(--obra); }
.etapas span { font-size: 11px; margin-top: 6px; display: block; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); font-weight: 500; }
.etapas .ativa span { color: var(--tinta); font-weight: 700; }

.cartao { background: var(--card); border-radius: 14px; padding: 22px; box-shadow: 0 1px 3px rgba(46,42,45,.08); }
.mudo { font-size: 14px; color: var(--apagado); line-height: 1.55; }
.mini { font-size: 12px; color: var(--apagado); line-height: 1.55; }

label { display: block; margin-bottom: 16px; }
label b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--grafite); }
input[type=text], input[type=password] {
  width: 100%; padding: 13px 14px; font-size: 16px; border-radius: 10px;
  border: 1.5px solid var(--linha); background: #FBFCFD; font-family: inherit;
}
input:focus { outline: 3px solid var(--obra); outline-offset: 1px; border-color: var(--grafite); }
input.curto { width: 140px; letter-spacing: .2em; text-align: center; }

.botao {
  display: block; width: 100%; padding: 14px 20px; border-radius: 10px; border: none;
  background: var(--obra); color: #fff; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; text-align: center; text-decoration: none;
}
.botao.sec { background: transparent; border: 1.5px solid var(--grafite); color: var(--grafite); }
.botao:active { transform: scale(.985); }
.botao + .botao, .botao + form, form + .botao { margin-top: 10px; }

.alerta { background: #FBEAE7; color: var(--erro); font-size: 13.5px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; line-height: 1.5; }
.aviso-ok { background: #E7F2EB; color: var(--verde); font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 10px; line-height: 1.5; }

.chip-unidade {
  display: inline-block; background: var(--grafite); color: #fff;
  font-family: 'Archivo', sans-serif; font-weight: 800; border-radius: 8px;
  padding: 8px 10px; font-size: 14px; white-space: nowrap; border-left: 4px solid var(--obra);
}
.chip-unidade.grande { font-size: 24px; padding: 14px 22px; border-radius: 12px; border-left-width: 5px; }

.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px; }
.dia {
  min-width: 64px; padding: 10px 8px; border-radius: 12px; border: 1.5px solid var(--linha);
  background: var(--card); color: var(--tinta); text-align: center; text-decoration: none; position: relative;
}
.dia .sem { font-size: 11px; text-transform: uppercase; color: var(--apagado); font-weight: 700; }
.dia .num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; }
.dia .mes { font-size: 11px; color: var(--apagado); }
.dia.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.dia.ativo .sem { color: var(--claro); }
.dia.ativo .mes { color: #CFC9CC; }
.dia .sab { position: absolute; top: -7px; right: -4px; background: var(--obra); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 20px; }

.turno { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); margin: 14px 0 8px; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hora {
  padding: 11px 0; border-radius: 10px; border: 1.5px solid var(--linha); background: var(--card);
  color: var(--tinta); font-weight: 700; font-size: 14.5px; text-align: center; text-decoration: none;
}
.hora.cheio { background: var(--fundo); color: #B9B4B7; text-decoration: line-through; pointer-events: none; }

dl.resumo { margin: 0; font-size: 15px; }
dl.resumo > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
dl.resumo dt { color: var(--apagado); font-weight: 500; }
dl.resumo dd { margin: 0; font-weight: 700; text-align: right; }

.etiqueta {
  background: var(--grafite); border-radius: 18px; padding: 26px 22px 22px; color: #fff;
  position: relative; max-width: 340px; margin: 0 auto; box-shadow: 0 8px 24px rgba(74,68,72,.35); text-align: center;
}
.etiqueta .furo { width: 14px; height: 14px; border-radius: 50%; background: var(--fundo); position: absolute; top: 14px; left: 50%; transform: translateX(-50%); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.etiqueta .selo { color: var(--claro); margin-top: 10px; display: block; }
.etiqueta .unid { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 40px; line-height: 1; margin: 10px 0 2px; }
.etiqueta .quem { font-size: 14px; color: #CFC9CC; margin-bottom: 18px; }
.etiqueta .quando { background: rgba(255,255,255,.08); border-radius: 12px; padding: 14px 12px; }
.etiqueta .quando b { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; display: block; }
.etiqueta .quando span { font-size: 15px; color: var(--claro); font-weight: 700; }
.etiqueta .prot { font-size: 11.5px; color: #A7A1A5; margin-top: 14px; }

.zap {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 30px;
  background: #25D366; color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.suporte { border-top: 1px solid var(--linha); margin-top: 20px; padding-top: 18px; text-align: center; }

.lista-unidades button, .lista-unidades a {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--linha);
  background: #FBFCFD; cursor: pointer; font-family: inherit; text-decoration: none;
  color: var(--tinta); margin-bottom: 10px; font-size: 13px;
}
.centro { text-align: center; }

/* ===== v1.1 — área do cliente com conteúdo centralizado ===== */
header.topo .caixa { text-align: center; }
header.topo img { margin: 0 auto 12px; }
main { text-align: center; }
.etapas span { text-align: center; }
label b { text-align: center; }
input[type=text], input[type=password] { text-align: center; }
input.curto { display: block; margin: 0 auto; }
.lista-unidades button, .lista-unidades a { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
.suporte .mudo { text-align: center; }
dl.resumo dt { text-align: left; }
dl.resumo dd { text-align: right; }