/* Inspeção Diária Linha Saúde — mesmas cores do Sistema da Qualidade (8090).
   Tema claro fixo, como o site. Pensado primeiro para o celular. */

:root {
  color-scheme: light;
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --borda: #e2e7ef;
  --texto: #1c2430;
  --texto-fraco: #6b7789;
  --vinho: #A5122A;
  --vinho-escuro: #7C0D1F;
  --verde: #1f9d61;
  --verde-claro: #e3f4ec;
  --vermelho: #A5122A;
  --vermelho-claro: #fbe7ea;
  --ambar: #d97706;
  --ambar-claro: #fdf1e0;
  --azul: #1f5fbf;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(20,30,50,.06), 0 4px 14px rgba(20,30,50,.05);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 0 0 12px; }

/* ---------- topo ---------- */
.topo {
  background: var(--vinho); color: #fff; height: 56px;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  position: sticky; top: 0; z-index: 20;
}
.topo img { height: 26px; }
.topo .nome { font-weight: 600; font-size: 15px; border-left: 1px solid rgba(255,255,255,.4); padding-left: 12px; }
.topo nav { margin-left: auto; display: flex; gap: 4px; }
.topo nav a { color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.topo nav a:hover, .topo nav a.ativo { background: rgba(255,255,255,.16); text-decoration: none; }
@media (max-width: 700px) { .topo .nome { display: none; } .topo nav a { padding: 6px 8px; } }
.topo nav a { white-space: nowrap; }
@media (max-width: 420px) {
  .topo { gap: 8px; padding: 0 10px; }
  .topo img { height: 20px; }
  .topo nav { gap: 0; }
  .topo nav a { padding: 6px 7px; font-size: 13.5px; }
  .topo nav .longo { display: none; }
}

.pagina { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
.pagina.estreita { max-width: 760px; }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px;
}

/* ---------- botões ---------- */
.botao {
  display: inline-block; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto); padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none !important;
}
.botao.primario { background: var(--vinho); border-color: var(--vinho); color: #fff; }
.botao.primario:hover { background: var(--vinho-escuro); }
.botao.grande { width: 100%; padding: 15px; font-size: 17px; }

/* ---------- formulário ---------- */
label.rotulo { display: block; font-weight: 600; margin: 12px 0 6px; }
label.rotulo:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=date], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #c9d1dd; border-radius: 8px;
  font: inherit; font-size: 16px; /* abaixo de 16px o iPhone dá zoom */ background: #fff;
}
textarea { min-height: 70px; resize: vertical; }
.obrig { color: var(--vermelho); }

.escolhas { display: flex; gap: 8px; flex-wrap: wrap; }
.escolhas input { position: absolute; opacity: 0; pointer-events: none; }
.escolhas label {
  flex: 1; min-width: 70px; text-align: center; padding: 11px 8px;
  border: 1.5px solid #c9d1dd; border-radius: 8px; cursor: pointer; font-weight: 600;
  background: #fff; user-select: none;
}
.escolhas input:focus-visible + label { outline: 2px solid var(--azul); outline-offset: 2px; }
.escolhas input:checked + label { background: var(--azul); border-color: var(--azul); color: #fff; }
.escolhas input:checked + label.ok  { background: var(--verde); border-color: var(--verde); }
.escolhas input:checked + label.nok { background: var(--vermelho); border-color: var(--vermelho); }

/* barra de progresso fixa embaixo do topo */
.progresso {
  position: sticky; top: 56px; z-index: 10; background: var(--fundo);
  padding: 10px 0 8px; margin: -6px 0 8px;
}
.progresso .barra { height: 8px; background: #dfe4ec; border-radius: 99px; overflow: hidden; }
.progresso .barra div { height: 100%; background: var(--verde); width: 0; transition: width .2s; }
.progresso .texto { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-fraco); margin-top: 4px; }

/* uma área = um cartão recolhível */
.secao { padding: 0; overflow: hidden; }
.secao > summary {
  list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 10px;
}
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary .num {
  width: 28px; height: 28px; border-radius: 50%; background: #eef1f6; color: var(--texto-fraco);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none;
}
.secao > summary .titulo { font-weight: 700; }
.secao > summary .tipo { font-size: 12px; color: var(--texto-fraco); display: block; font-weight: 400; }
.secao > summary .estado { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; }
.secao.completa > summary .num { background: var(--verde); color: #fff; }
.secao.com-desvio > summary .num { background: var(--vermelho); color: #fff; }
.secao .corpo { padding: 0 16px 16px; border-top: 1px solid var(--borda); }

.aviso { background: var(--ambar-claro); border-left: 4px solid var(--ambar); padding: 10px 12px; border-radius: 6px; margin-top: 14px; font-weight: 600; }
.pergunta { padding: 14px 0; border-bottom: 1px dashed var(--borda); }
.pergunta:last-child { border-bottom: 0; }
.pergunta .enunciado { margin-bottom: 8px; }
.pergunta.desvio .enunciado { color: var(--vermelho); font-weight: 600; }
.pergunta.oculta { display: none; }
.lider { background: #f7f8fb; margin: 12px -16px -16px; padding: 14px 16px; border-top: 1px solid var(--borda); }
.lider.exigido { background: var(--vermelho-claro); }
.lider .dica { font-size: 13px; color: var(--texto-fraco); }
.lider.exigido .dica { color: var(--vermelho); font-weight: 600; }

.erros { background: var(--vermelho-claro); border: 1px solid #f0b7c0; color: var(--vermelho-escuro, #7C0D1F); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 14px; }
.erros ul { margin: 6px 0 0; padding-left: 20px; }
.sucesso { background: var(--verde-claro); border: 1px solid #a8dcc2; border-radius: var(--raio); padding: 14px 16px; margin-bottom: 14px; }

.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.etiqueta.ok { background: var(--verde-claro); color: #146b42; }
.etiqueta.nok { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---------- tabelas / listas ---------- */
table.lista { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lista th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-fraco); padding: 8px 10px; border-bottom: 2px solid var(--borda); }
table.lista td { padding: 10px; border-bottom: 1px solid var(--borda); }
table.lista tr:hover td { background: #f9fafc; }
.num-dir { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .some-celular { display: none; } }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filtros > div { min-width: 140px; flex: 1; }
.filtros label { font-size: 12px; color: var(--texto-fraco); font-weight: 600; display: block; margin-bottom: 4px; }
.filtros input, .filtros select { padding: 8px 10px; font-size: 14px; }
.atalhos a { font-size: 13px; margin-right: 12px; }
.cabecalho-pagina { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cabecalho-pagina h1 { margin: 0; margin-right: auto; }

/* ---------- painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .valor { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .rotulo { font-size: 13px; color: var(--texto-fraco); }
.kpi.alerta .valor { color: var(--vermelho); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grade2 { grid-template-columns: 1fr; } }

.barras { display: grid; grid-template-columns: minmax(110px, 48%) 1fr 36px; gap: 6px 10px; align-items: center; font-size: 13px; }
.barras .trilho { height: 16px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.barras .trilho div { height: 100%; background: var(--vermelho); border-radius: 4px; }
.barras .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vazio { color: var(--texto-fraco); font-size: 14px; }

.cobertura { display: grid; grid-template-columns: 70px repeat(var(--n), 1fr); gap: 3px; font-size: 12px; max-height: 420px; overflow: auto; }
.cobertura .cab { font-weight: 700; color: var(--texto-fraco); text-align: center; position: sticky; top: 0; background: var(--superficie); }
.cobertura .dia { color: var(--texto-fraco); }
.cobertura .cel { height: 20px; border-radius: 4px; }
.cobertura .sim { background: var(--verde); }
.cobertura .nao { background: #f2c4cc; }

/* ---------- detalhe ---------- */
.resumo-ronda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.resumo-ronda div span { display: block; font-size: 12px; color: var(--texto-fraco); }
.resp-linha { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.resp-linha:last-child { border-bottom: 0; }
.resp-linha .q { flex: 1; }
.resp-linha .v { font-weight: 700; white-space: nowrap; }
.resp-linha.desvio .v { color: var(--vermelho); }
.qr { text-align: center; }
.qr svg { display: block; margin: 10px auto; max-width: 100%; height: auto; }  /* tem viewBox (unit=mm), então encolhe sem cortar */
.qr p { overflow-wrap: anywhere; }

/* ---------- meta de rondas por dia: calendário ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cab { text-align: center; font-size: 11px; font-weight: 600; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .03em; }
.cal-dia {
  aspect-ratio: 1 / 1; max-height: 64px; border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; line-height: 1.1; cursor: default;
}
.cal-dia b { font-size: 14px; }
.cal-dia small { font-size: 11px; font-weight: 600; opacity: .85; }
.cal-dia.ok        { background: var(--verde-claro); color: #146b42; }
.cal-dia.falta     { background: var(--vermelho-claro); color: var(--vermelho); }
.cal-dia.andamento { background: var(--ambar-claro); color: #9a5406; box-shadow: inset 0 0 0 2px var(--ambar); }
.cal-dia.fora      { background: #f4f6f9; color: #b7bfcc; }
.cal-dia.fora b    { font-weight: 400; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--texto-fraco); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legenda i { width: 12px; height: 12px; border-radius: 3px; }
.cal-legenda i.ok { background: var(--verde-claro); border: 1px solid #a8dcc2; }
.cal-legenda i.falta { background: var(--vermelho-claro); border: 1px solid #f0b7c0; }
.cal-legenda i.andamento { background: var(--ambar-claro); border: 2px solid var(--ambar); }
.cal-legenda i.fora { background: #f4f6f9; border: 1px solid var(--borda); }

/* ---------- ramificação do "Não" ---------- */
.ramo { display: none; margin-top: 10px; padding: 12px; border-left: 4px solid var(--vermelho); background: var(--vermelho-claro); border-radius: 0 8px 8px 0; }
.pergunta.desvio .ramo { display: block; }
.ramo label { display: block; font-size: 13px; font-weight: 600; margin: 8px 0 4px; }
.ramo label:first-child { margin-top: 0; }
.ramo textarea { min-height: 56px; }
.ramo .escolhas label { flex: 1 1 45%; font-size: 13px; padding: 9px 6px; margin: 0; }
.ramo .escolhas input:checked + label { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
/* confirmação depois de enviar a ronda (tela da operação, sem senha) */
.sucesso.enviado { text-align: center; padding: 22px 16px; }
.enviado-titulo { font-size: 22px; font-weight: 700; color: #146b42; margin-bottom: 6px; }
.sucesso.enviado .botao.grande { display: flex; justify-content: center; margin-top: 14px; }
.desvios-enviados { text-align: left; font-size: 14px; margin: 6px auto 0; max-width: 420px; }
.entrar h1 { font-size: 20px; }

/* tela Acessos */
.convite-gerado { border-left: 4px solid var(--verde); }
.convite-gerado input { margin: 10px 0 8px; font-size: 14px; }
.linha-form { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-form select { flex: 1; min-width: 200px; }

/* legenda embaixo da pergunta (faixas de CO²) */
.legenda { list-style: none; margin: -2px 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.legenda li { padding: 5px 10px; border-radius: 6px; border-left: 4px solid; }
.legenda li.ok { background: var(--verde-claro); border-color: var(--verde); }
.legenda li.atencao { background: var(--ambar-claro); border-color: var(--ambar); }
.legenda li.perigo { background: var(--vermelho-claro); border-color: var(--vermelho); }

/* registro da resposta boa (leitura de CO²): aparece só com ela */
.info-resp { display: none; margin-top: 10px; padding: 12px; border-left: 4px solid var(--verde); background: var(--verde-claro); border-radius: 0 8px 8px 0; }
.pergunta.resposta-boa .info-resp { display: block; }
.info-resp label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.info-leitura { margin: 2px 0 4px; padding: 8px 10px; border-left: 3px solid var(--verde); background: var(--verde-claro); font-size: 13px; border-radius: 0 6px 6px 0; }
.info-leitura span { color: var(--texto-fraco); }

/* múltipla escolha na ramificação: caixas de marcar grandes, uma por linha */
.ramo .marcar { display: grid; gap: 6px; }
.ramo .marcar input { position: absolute; opacity: 0; pointer-events: none; }
.ramo .marcar label {
  margin: 0; padding: 10px 12px 10px 40px; border: 1.5px solid #c9d1dd; border-radius: 8px;
  background: #fff; font-weight: 600; font-size: 13.5px; position: relative; cursor: pointer;
}
.ramo .marcar label::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 2px solid #9aa6b8; border-radius: 4px; background: #fff;
}
.ramo .marcar input:checked + label { border-color: var(--vermelho); background: #fff5f6; }
.ramo .marcar input:checked + label::before { background: var(--vermelho); border-color: var(--vermelho); }
.ramo .marcar input:checked + label::after {
  content: ""; position: absolute; left: 18px; top: 50%; width: 5px; height: 10px; margin-top: -7px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.ramo .marcar input:focus-visible + label { outline: 2px solid var(--azul); outline-offset: 2px; }
.dica-multipla { font-weight: 400; color: var(--texto-fraco); font-size: 12px; }
.ramo-leitura { margin: 2px 0 4px; padding: 8px 10px; border-left: 3px solid var(--vermelho); background: var(--vermelho-claro); font-size: 13px; border-radius: 0 6px 6px 0; }
.ramo-leitura div span { color: var(--texto-fraco); }

/* ---------- lista de rondas no celular: cada ronda vira um cartão ---------- */
@media (max-width: 600px) {
  .cabecalho-pagina h1 { flex-basis: 100%; }
  .cabecalho-pagina .botao { flex: 1; text-align: center; }
  .filtros { display: grid; grid-template-columns: 1fr 1fr; }
  .filtros > div { min-width: 0; }
  .filtros input, .filtros select { min-width: 0; width: 100%; }
  .filtros > div:last-child .botao { width: 100%; }

  .cartao:has(> table.rondas) { padding: 6px 12px; }
  table.rondas, table.rondas tbody { display: block; }
  table.rondas thead { display: none; }
  table.rondas tr {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
    padding: 12px 0; border-bottom: 1px solid var(--borda);
  }
  table.rondas tr:hover td { background: none; }
  table.rondas td { padding: 0; border: 0; min-width: 0; }
  table.rondas .c-data { font-weight: 700; font-size: 15px; }
  table.rondas .c-turno { grid-column: 2; grid-row: 1; text-align: right; font-weight: 600; }
  table.rondas .c-resp { grid-column: 1 / -1; color: var(--texto-fraco); font-size: 13px;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.rondas .c-res { grid-column: 1; margin-top: 4px; }
  table.rondas .c-env { display: none; }
  table.rondas .c-pdf { grid-column: 2; grid-row: 3; align-self: end; }
  table.rondas .c-pdf a { display: inline-block; padding: 4px 12px; border: 1px solid var(--borda); border-radius: 6px; font-weight: 600; }
}

/* ---------- painel no celular ---------- */
@media (max-width: 600px) {
  .kpi { padding: 12px; }
  .kpi .valor { font-size: 24px; }
  /* nome em cima da barra: no celular não cabe lado a lado sem cortar */
  .barras { grid-template-columns: 1fr 32px; gap: 2px 8px; }
  .barras .nome { grid-column: 1 / -1; white-space: normal; margin-top: 6px; }
}

/* ---------- aba Rondas: abas + visão por dia ---------- */
.abas { display: flex; gap: 4px; background: #e8ecf2; padding: 4px; border-radius: 10px; margin-bottom: 14px; width: fit-content; }
.abas a { padding: 7px 18px; border-radius: 7px; font-weight: 600; color: var(--texto-fraco); text-decoration: none !important; }
.abas a.ativa { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(20,30,50,.12); }

.seletor-dia { display: flex; gap: 8px; align-items: center; padding: 10px; }
.seletor-dia input[type=date] { flex: 1; min-width: 0; text-align: center; font-weight: 600; }
.seletor-dia .seta { font-size: 22px; line-height: 1; padding: 8px 14px; }
.seletor-dia .seta.desligada { opacity: .35; cursor: default; }

.resumo-dia { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 2px 14px; }
.dia-titulo { font-size: 20px; font-weight: 700; }
.resumo-dia .vazio { text-transform: capitalize; }
.dia-numeros { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta.andamento { background: var(--ambar-claro); color: #9a5406; }
.vazio-dia { text-align: center; }
.vazio-dia p { margin: 6px 0; }

.ronda-dia { margin-bottom: 18px; scroll-margin-top: 70px; }
.ronda-cab { margin-bottom: 8px; }
.ronda-linha1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ronda-linha2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.turno-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: #fff; }
.turno-alfa { background: #1f5fbf; }
.turno-bravo { background: #7a53c4; }
.turno-charlie { background: #1c2430; }

.desvios-ronda { margin-top: 12px; display: grid; gap: 8px; }
.desvio-item { border-left: 4px solid var(--vermelho); background: var(--vermelho-claro); border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: 14px; }
.desvio-topo { font-weight: 700; color: var(--vermelho); }
.desvio-area { display: inline-block; background: #fff; color: var(--texto); border: 1px solid #f0b7c0; border-radius: 5px; padding: 0 6px; font-size: 12px; margin-right: 4px; }
.desvio-desc { margin: 3px 0; }
.desvio-tipo { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.desvio-meta { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-fraco); }
.desvio-meta strong { color: var(--texto); font-weight: 600; }
.ronda-acoes { display: flex; gap: 8px; margin-top: 12px; }
.ronda-acoes .botao:first-child { flex: 1; }
.respostas-ronda { padding-left: 10px; border-left: 3px solid var(--borda); }

/* dia do calendário do painel agora é link */
a.cal-dia { text-decoration: none !important; cursor: pointer; transition: transform .1s; }
a.cal-dia:hover { transform: scale(1.06); }

/* data da ronda: só leitura, o servidor grava o dia do envio */
.data-travada { padding: 11px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #eef1f6; font-size: 16px; font-weight: 600; color: var(--texto); }
.data-travada span { font-size: 12px; font-weight: 400; color: var(--texto-fraco); margin-left: 6px; }


/* tela de avisos */
.passo-a-passo { background: #f7f8fb; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; }
.passo-a-passo summary { cursor: pointer; font-weight: 600; color: var(--azul); }
.passo-a-passo ol { padding-left: 20px; margin: 10px 0 6px; }
.passo-a-passo li { margin-bottom: 6px; }

/* ---------- caixa de assinatura ---------- */
.caixa-assinatura {
  position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 40, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.caixa-assinatura[hidden] { display: none; }
.caixa-conteudo {
  background: var(--superficie); width: 100%; max-width: 560px; border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.2);
}
@media (min-width: 600px) { .caixa-assinatura { align-items: center; } .caixa-conteudo { border-radius: 16px; } }
.caixa-conteudo h2 { font-size: 18px; margin-bottom: 4px; }
.caixa-conteudo p { margin: 0 0 12px; font-size: 13px; }
#tela-assinatura {
  display: block; width: 100%; height: 210px; background: #fff; border: 2px dashed #b9c3d3;
  border-radius: 10px; touch-action: none;  /* sem isso o dedo rola a página em vez de assinar */
  cursor: crosshair;
}
.linha-assine { text-align: center; font-size: 12px; color: var(--texto-fraco); margin: 6px 0 12px; }
.caixa-botoes { display: flex; gap: 8px; margin-bottom: 10px; }
.caixa-botoes .botao { flex: 1; }
.botao:disabled { opacity: .45; cursor: not-allowed; }

/* assinatura gravada (tela da ronda) */
.assinatura-gravada { grid-column: 1 / -1; }
.assinatura-gravada img { display: block; max-width: 260px; width: 100%; border: 1px solid var(--borda); border-radius: 8px; background: #fff; margin-top: 4px; }

/* solicitar / aprovar acesso */
.dica-campo { font-size: 12px; color: var(--texto-fraco); margin-top: 4px; }
.pedir-acesso { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); text-align: center; color: var(--texto-fraco); font-size: 14px; }
.pedir-acesso .botao { display: flex; justify-content: center; margin-top: 8px; }
.cartao.pendentes { border-left: 4px solid var(--vermelho); }
.pedido { padding: 12px 0; border-bottom: 1px solid var(--borda); display: grid; gap: 8px; }
.pedido:last-child { border-bottom: 0; }
.pedido-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: #fff; color: var(--vermelho); font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }

/* lista de usuários na tela Acessos */
.usuario-linha { padding: 12px 0; border-bottom: 1px solid var(--borda); }
.usuario-linha:last-child { border-bottom: 0; }
.usuario-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; }
.usuario-acoes select { width: auto; padding: 8px 10px; font-size: 14px; }
.usuario-acoes .botao { padding: 8px 12px; font-size: 14px; }
.reset > summary { list-style: none; display: inline-block; }
.reset > summary::-webkit-details-marker { display: none; }
.reset[open] { flex-basis: 100%; }
.reset form { margin-top: 8px; }
.reset input[type=password] { flex: 1; min-width: 160px; }

/* backup na tela Acessos */
.cartao.backup { border-left: 4px solid var(--verde); }
.cartao.backup.atrasado { border-left-color: var(--ambar); }

/* caixas de marcar em linha (tela de e-mail) */
.caixa-linha { display: flex; gap: 10px; align-items: center; margin: 8px 0; font-size: 15px; }
.caixa-linha input { width: 20px; height: 20px; }