/* Paleta Dois i — preto, ciano e cinza azulado */
:root {
  --marinho: #111a24;         /* cor principal (quase preto) */
  --marinho-escuro: #070c12;
  --ciano: #00a9e0;           /* ciano Dois i */
  --bronze: #0089b8;          /* acento para textos e detalhes (ciano escurecido p/ leitura) */
  --cinza-marca: #aab2bd;
  --azul-suave: #e6f6fc;      /* fundo de destaque suave */
  --fundo: #f2f4f7;
  --texto: #1b2430;
  --texto-suave: #5d6a79;
  --linha: #dde3ea;
  --branco: #ffffff;
  --ok: #1f7a4d;        --ok-fundo: #e3f4ea;
  --atencao: #8a5d0e;   --atencao-fundo: #fcf1dc;
  --erro: #b4322f;      --erro-fundo: #fbe9e8;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serifa: var(--sans);
  --cor-cliente: var(--ciano);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--sans); color: var(--texto); background: var(--fundo); }
a { color: var(--marinho); }
a:hover { color: var(--marinho-escuro); }
h1, h2, h3 { font-family: var(--sans); font-weight: 650; letter-spacing: -.015em; color: var(--marinho-escuro); line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
:focus-visible { outline: 3px solid rgba(0,169,224,.45); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Campos ---------- */
label, .rotulo { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem .75rem; min-height: 44px;
}
select[size] { min-height: 0; padding: .25rem; }
select[size] option { padding: .35rem .5rem; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--marinho); outline: 2px solid var(--azul-suave); }
.campo { margin-bottom: 1rem; }
.campo.com-erro input, .campo.com-erro textarea { border-color: var(--erro); }
.campo.com-erro .rotulo, .campo.com-erro > label { color: var(--erro); }
.erro-campo { display: block; color: var(--erro); font-size: .85rem; margin-top: .25rem; }
.ajuda { display: block; color: var(--texto-suave); font-size: .85rem; margin-top: .3rem; }
.opcional { font-weight: normal; color: var(--texto-suave); }
.req { color: var(--erro); }
.linha { display: flex; gap: 1rem; flex-wrap: wrap; }
.linha > .campo { flex: 1 1 200px; }
.linha > .campo-curto { flex: 0 1 150px; }
.linha > .campo-largo { flex: 3 1 260px; }
.com-botao { display: flex; gap: .5rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: normal; margin: .75rem 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--marinho); }
.check.com-erro span { color: var(--erro); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1.1rem; font: 600 .95rem var(--sans); text-decoration: none;
  color: var(--marinho); background: var(--branco); border: 1px solid var(--marinho);
  border-radius: var(--raio); cursor: pointer; white-space: nowrap;
}
.botao:hover { background: var(--azul-suave); color: var(--marinho-escuro); }
.botao-cheio { color: var(--branco); background: var(--marinho); }
.botao-cheio:hover { color: var(--branco); background: var(--marinho-escuro); }
.botao-largo { width: 100%; }
.link-botao { background: none; border: 0; padding: 0; font: inherit; color: var(--marinho); text-decoration: underline; cursor: pointer; }
.botao-perigo { color: var(--erro); border-color: var(--erro); }
.botao-perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.link-perigo { color: var(--erro); }
.zona-perigo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem; padding: 1rem 1.25rem;
  border: 1px solid #e7c9c9; border-radius: var(--raio); background: #fdf7f7; color: var(--texto-suave); font-size: .9rem; }
.zona-paciente { align-items: flex-end; }
.zona-paciente > div:first-of-type { flex: 1 1 100%; }
.zona-paciente h2 { color: var(--erro); margin-bottom: .4rem; }
.zona-paciente p { margin: 0 0 .4rem; }
.zona-paciente .campo { margin: 0; }
.botoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.form-inline { display: inline-flex; gap: .5rem; align-items: center; margin: 0; }
.form-inline select, .form-inline input { width: auto; }

/* ---------- Avisos e selos ---------- */
.aviso { padding: .75rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; border-left: 4px solid; }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); border-color: var(--erro); }
.aviso-alerta { background: var(--atencao-fundo); border-color: var(--atencao); }
.selo {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--azul-suave); color: var(--texto-suave); text-decoration: none; white-space: nowrap;
}
.selo-ok, .selo-atendido { background: var(--ok-fundo); color: var(--ok); }
.selo-pendente, .selo-faltou { background: var(--erro-fundo); color: var(--erro); }
.selo-atencao, .selo-chegou { background: var(--atencao-fundo); color: var(--atencao); }
.selo-agendado { background: var(--azul-suave); color: var(--marinho); }
.secao legend, .ficha-secao h3 { letter-spacing: .02em; }

/* ================= PAINEL ================= */
.topo { background: var(--marinho); color: #fff; }
.topo-linha { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1.5rem; max-width: 1320px; margin: 0 auto; }
.marca { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; min-width: 0; }
.marca:hover { color: #fff; }
.marca .produto-icone { width: 34px; height: 34px; flex: none; }
.marca strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.marca small { display: block; color: var(--cinza-marca); font-size: .74rem; }
.clinica-atual { display: inline-flex; align-items: center; gap: .5rem; margin-left: .5rem; padding: .3rem .8rem .3rem .4rem; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #e8edf2; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.clinica-atual img { height: 24px; width: 24px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.clinica-atual .inicial { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ciano); color: #fff; font-weight: 700; font-size: .75rem; }
.usuario { font-size: .9rem; color: var(--cinza-marca); display: flex; align-items: center; gap: .9rem; }
.usuario a { color: #fff; }
.menu { display: flex; gap: .2rem; padding: 0 1.25rem; max-width: 1320px; margin: 0 auto; overflow-x: auto; }
.menu a { color: #b7c0cb; text-decoration: none; padding: .65rem .85rem; border-bottom: 3px solid transparent; white-space: nowrap; font-size: .92rem; font-weight: 500; }
.menu a:hover { color: #fff; }
.menu a[aria-current] { color: #fff; border-bottom-color: var(--ciano); }
.conteudo { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sub { color: var(--texto-suave); margin: .25rem 0 0; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.busca input { min-width: 240px; }

.novos-site { padding: .85rem 1.25rem; margin-bottom: 1rem; border-left: 4px solid var(--bronze); }
.novos-site summary { cursor: pointer; color: var(--marinho-escuro); }
.novos-site summary strong { font: 1.2rem var(--serifa); color: var(--bronze); }
.novos-site ul { margin-top: .6rem; }
.resumo { display: flex; gap: 2rem; padding: .9rem 1.25rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 1rem; flex-wrap: wrap; color: var(--texto-suave); }
.resumo strong { font: 1.5rem var(--serifa); color: var(--marinho-escuro); margin-right: .25rem; }
.resumo .tem-pendencia strong { color: var(--erro); }

.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
.colunas-invertidas { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.titulo-bloco { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { padding: .5rem 0; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.lista-simples li:last-child { border-bottom: 0; }
.vazio { padding: 2.5rem 1.5rem; text-align: center; color: var(--texto-suave); background: var(--branco); border: 1px dashed var(--linha); border-radius: var(--raio); }

.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filtros a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); color: var(--texto); text-decoration: none; font-size: .9rem; }
.filtros a:hover { border-color: var(--bronze); }
.filtros a span { font-size: .8rem; color: var(--texto-suave); background: var(--azul-suave); border-radius: 999px; padding: 0 .45rem; min-width: 1.4rem; text-align: center; }
.filtros a[aria-current] { background: var(--marinho); border-color: var(--marinho); color: var(--branco); }
.filtros a[aria-current] span { background: rgba(255,255,255,.18); color: var(--branco); }
.dados-cadastro { margin: 0 0 1.5rem; border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem 1rem; }
.dados-cadastro summary { cursor: pointer; font-weight: 600; color: var(--marinho); }
.dados-cadastro .ficha-secao { margin: 1rem 0 0; }
.dados-cadastro .ficha-secao h3 { display: none; }
.tabela-rolagem { overflow-x: auto; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th { text-align: left; font-weight: 600; color: var(--texto-suave); font-size: .85rem; padding: .7rem 1rem; border-bottom: 2px solid var(--linha); background: #fbfaf8; }
.tabela td { padding: .7rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .hora { font: 1.1rem var(--serifa); color: var(--marinho-escuro); white-space: nowrap; }
.tabela .obs, .obs { font-size: .82rem; color: var(--texto-suave); }
.tabela select { min-height: 36px; padding: .3rem .5rem; }
.tabela tr.st-cancelado td, .tabela tr.st-faltou td, .tabela tr.inativa td { color: var(--texto-suave); }
.tabela tr.st-cancelado .hora { text-decoration: line-through; }
.tabela tr.st-chegou { background: #fdf8f0; }
.tabela tr.st-confirmado { background: #e8f2ea; }
.tabela tr.st-em_atendimento { background: #f1ebf8; }
.selo-em_atendimento { background: #ece3f6; color: #6a3fa3; }
.tabela tr.st-confirmado td { border-bottom-color: #d3e5d8; }
.selo-confirmado { background: #d9ebdf; color: var(--ok); }
.selo-origem { background: var(--azul-suave); color: var(--bronze); font-weight: 600; margin: .2rem 0; }
.botao-whats { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; padding: .2rem .6rem; border: 1px solid #b9d6c2; border-radius: 999px; background: #fff; color: var(--ok); font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.botao-whats:hover { background: var(--ok-fundo); color: var(--ok); }
.botao-whats svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabela-expediente input[type=time] { min-height: 38px; padding: .3rem .5rem; width: auto; }
.tabela-expediente input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--marinho); }
.sem-borda { border: 0; margin-bottom: 1rem; }
.atalhos-retorno { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.retorno-caixa { border-top: 1px dashed var(--linha); margin-top: .5rem; padding-top: 1rem; }
.selo-retorno { background: #d9ebdf; color: var(--ok); }
.nowrap { white-space: nowrap; }
code.chave { font: 600 1rem var(--sans); letter-spacing: .03em; background: var(--azul-suave); padding: .15rem .5rem; border-radius: 4px; color: var(--marinho-escuro); }

/* ---------- Ficha do paciente ---------- */
.cartao + .cartao, .bloco-clinico { margin-top: 1.25rem; }
.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cartao-topo h2 { margin: 0 .75rem .35rem 0; display: inline-block; vertical-align: middle; }
.cartao-topo .selo { vertical-align: middle; margin-right: .35rem; }
.botao-pequeno { min-height: 36px; padding: .35rem .8rem; font-size: .85rem; }
.recolhivel .dados-resumo .ficha-secao { margin-bottom: 0; }
.recolhida .dados-resumo dt:nth-of-type(n+4), .recolhida .dados-resumo dd:nth-of-type(n+4) { display: none; }
.recolhida .detalhes { display: none; }
.detalhes { margin-top: 1.5rem; }
.alternar { text-align: center; border-top: 1px solid var(--linha); margin-top: 1rem; padding-top: .75rem; }
.alternar .link-botao { font-weight: 600; text-decoration: none; color: var(--bronze); }
.alternar .link-botao::after { content: " ▾"; }
.recolhivel:not(.recolhida) .alternar .link-botao::after { content: " ▴"; }
.vazio-curto { color: var(--texto-suave); margin: 1rem 0 0; }
.form-prontuario, .form-financeiro { background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.form-prontuario .botoes, .form-financeiro .botoes { margin-top: .25rem; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--linha); }
.lt-data { font: 1.05rem var(--serifa); color: var(--bronze); }
.lt-texto .obs { margin-top: .4rem; }
.resumo-financeiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.resumo-financeiro span { display: block; font-size: .85rem; }
.resumo-financeiro strong { font-size: 1.35rem; margin: 0; }
.tabela .num { text-align: right; }
.valor-entrada { color: var(--ok); }
.largura-media { max-width: 720px; }
.campo-confirmacao { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linha); max-width: 340px; }
.usuario .conta { text-decoration: none; text-align: right; display: inline-block; vertical-align: middle; margin: 0; color: #fff; }
.usuario .conta small { display: block; font-size: .72rem; color: var(--ciano); letter-spacing: .04em; }
.usuario .conta[aria-current] { text-decoration: underline; }

/* ---------- Agenda: alternador, filtro e grade ---------- */
.agenda-controles { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.alternar-visao { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); padding: 3px; }
.alternar-visao a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .95rem; border-radius: 999px; text-decoration: none; color: var(--texto-suave); font-size: .9rem; font-weight: 600; }
.alternar-visao a[aria-current] { background: var(--marinho); color: var(--branco); }
.alternar-visao svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filtro-prof select { min-height: 40px; }
.rotulo-inline { margin: 0; font-size: .88rem; color: var(--texto-suave); font-weight: 600; }
.ponto-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.dica-grade { font-size: .85rem; color: var(--texto-suave); margin: 0 0 .75rem; }
.grade-rolagem { overflow: auto; max-height: calc(100vh - 220px); min-height: 420px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); }
.grade-semana { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.grade-semana thead th { position: sticky; top: 0; z-index: 3; background: #fbfaf8; border-bottom: 2px solid var(--linha); padding: .5rem .25rem; text-align: center; font-weight: 400; }
.grade-semana thead th a { text-decoration: none; color: var(--texto); display: block; }
.grade-semana thead th small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.grade-semana thead th strong { font: 1.35rem var(--serifa); }
.grade-semana thead th.hoje strong { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--marinho); color: var(--branco); }
.grade-semana .col-hora { width: 64px; position: sticky; left: 0; z-index: 2; background: #fbfaf8; font: .78rem var(--sans); color: var(--texto-suave); text-align: right; padding: .2rem .5rem 0 0; vertical-align: top; border-right: 1px solid var(--linha); }
.grade-semana thead .col-hora { z-index: 4; }
.grade-semana tr.hora-cheia td, .grade-semana tr.hora-cheia th.col-hora { border-top: 1px solid var(--linha); }
.grade-semana td.cel { position: relative; height: 46px; vertical-align: top; padding: 2px 3px; border-top: 1px dashed #eee9e3; border-right: 1px solid #f0ebe5; cursor: cell; user-select: none; }
.grade-semana td.cel.hoje { background: #fdfbf8; }
.grade-semana td.cel.passado { background: repeating-linear-gradient(135deg, #faf9f7, #faf9f7 6px, #f6f4f1 6px, #f6f4f1 12px); }
.grade-semana td.cel:hover { background: var(--azul-suave); }
.cel-mais { position: absolute; z-index: 3; right: 3px; bottom: 3px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bronze); background: var(--branco); color: var(--bronze); font-weight: 700; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .1s; }
.grade-semana td.cel:hover .cel-mais, .cel-mais:focus { opacity: 1; }
@media (hover: none) { .cel-mais { opacity: .55; } }
.grade-semana { --ppm: calc(46px / var(--passo, 30)); }
.consulta { position: absolute; z-index: 1; top: calc(var(--ppm) * var(--ini) + 1px); height: calc(var(--ppm) * var(--dur) - 3px); min-height: 22px;
  display: flex; flex-direction: column; gap: 1px; padding: .2rem .4rem .2rem .45rem; border-radius: 5px; overflow: hidden; cursor: pointer;
  border-left: 4px solid var(--cor-prof); background: color-mix(in srgb, var(--cor-st) 13%, #fff); color: var(--texto);
  font-size: .74rem; line-height: 1.2; box-shadow: 0 1px 2px rgba(0,0,0,.08); user-select: none; }
.consulta:hover, .consulta:focus-visible { z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,.15); outline: none; }
.consulta .c-linha { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.consulta .c-hora { font-weight: 700; }
.consulta .c-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.consulta .c-prof { font-size: .66rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consulta.curta { flex-direction: row; flex-wrap: wrap; column-gap: .35rem; align-items: center; }
.consulta.curta .c-prof { display: none; }
.consulta .bolinha, .bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-st); flex: none; }
.consulta.st-cancelado { opacity: .6; }
.consulta.st-cancelado .c-nome, .consulta.st-faltou .c-nome { text-decoration: line-through; }
.form-inline .bolinha { margin-right: .1rem; }
.hora-fim { display: block; font: .72rem var(--sans); color: var(--texto-suave); }

/* Classificação por clique */
.popover-status { position: absolute; z-index: 50; width: 220px; background: var(--branco); border: 1px solid var(--linha); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.18); padding: .6rem; }
.pop-titulo { margin: .1rem .4rem .5rem; font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-opcao { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: 6px; background: none;
  font: .9rem var(--sans); color: var(--texto); cursor: pointer; text-align: left; }
.pop-opcao:hover { background: var(--azul-suave); }
.pop-opcao .bolinha { width: 12px; height: 12px; }
.pop-opcao.atual { background: var(--fundo); font-weight: 700; }
.pop-opcao.atual::after { content: "✓"; margin-left: auto; color: var(--bronze); }
.pop-detalhes { width: 100%; margin-top: .4rem; padding: .5rem; border: 0; border-top: 1px solid var(--linha); background: none; color: var(--bronze); font-weight: 600; cursor: pointer; }

/* Janela de detalhes */
.modal-detalhes { width: min(560px, calc(100vw - 2rem)); }
.det-lista { display: grid; grid-template-columns: 130px 1fr; gap: .7rem 1rem; margin: 0 0 1rem; align-items: center; }
.det-lista dt { color: var(--texto-suave); font-size: .88rem; }
.det-lista dd { margin: 0; }
.det-lista .botao-whats { margin: 0 0 0 .5rem; }
.det-lista .selo-atencao { white-space: normal; }

/* Durações rápidas */
.duracoes { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: -.35rem 0 1rem; }
.pilula-btn { border: 1px solid var(--linha); background: var(--branco); border-radius: 999px; padding: .25rem .7rem; font: .82rem var(--sans); cursor: pointer; color: var(--texto); }
.pilula-btn:hover { border-color: var(--bronze); }
.pilula-btn.ativo { background: var(--marinho); border-color: var(--marinho); color: var(--branco); }
.faixa-prof { display: inline-block; width: 4px; height: 14px; border-radius: 2px; margin-right: .4rem; vertical-align: -2px; }
.legenda-grade .sep { width: 1px; height: 16px; background: var(--linha); }
.dica-grade { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }

.legenda-grade .bolinha { margin-right: .35rem; vertical-align: 0; }
.legenda-grade { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .75rem; font-size: .82rem; color: var(--texto-suave); align-items: center; }

/* Janela (modal) */
.modal { width: min(520px, calc(100vw - 2rem)); border: 0; border-radius: 10px; padding: 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.25); color: var(--texto); }
.modal::backdrop { background: rgba(22,22,22,.45); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; }
.modal-topo h2 { margin: 0; }
.modal-fechar { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--texto-suave); }
.modal-quando { color: var(--bronze); font-weight: 600; margin: .25rem 0 1rem; }

/* Cores dos profissionais */
.cores { display: flex; flex-wrap: wrap; gap: .5rem; }
.cor { margin: 0; cursor: pointer; text-align: center; font-weight: normal; }
.cor input { position: absolute; opacity: 0; }
.cor span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--branco); box-shadow: 0 0 0 1px var(--linha); margin: 0 auto; }
.cor input:checked + span { box-shadow: 0 0 0 2px var(--marinho); }
.cor input:focus-visible + span { outline: 3px solid #c9ab8c; outline-offset: 2px; }
.cor small { font-size: .68rem; color: var(--texto-suave); }

/* Histórico de visitas */
.visitas { list-style: none; margin: 0; padding: 0; }
.visitas > li { border-top: 1px solid var(--linha); }
.visitas summary { display: grid; grid-template-columns: 120px 1fr 170px; gap: 1rem; align-items: center; padding: .7rem .25rem; cursor: pointer; list-style: none; }
.visitas summary::-webkit-details-marker { display: none; }
.visitas summary:hover { background: var(--fundo); }
.v-data { font: 1rem var(--serifa); color: var(--marinho-escuro); }
.v-data small, .v-prof small { display: block; font: .78rem var(--sans); color: var(--texto-suave); }
.v-status { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; }
.v-log { margin: 0 0 .8rem 120px; padding: .5rem 1rem; border-left: 2px solid var(--linha); list-style: none; font-size: .88rem; }
.v-log li { padding: .2rem 0; }
@media (max-width: 860px) { .visitas summary { grid-template-columns: 1fr; gap: .25rem; } .v-log { margin-left: 0; } }

/* Ficha de saúde (visualização) */
.ficha-meta { color: var(--texto-suave); margin-top: 0; }
.caixa-atencao { background: var(--atencao-fundo); border-left: 4px solid var(--atencao); padding: 1rem 1.25rem; border-radius: var(--raio); margin-bottom: 1.5rem; }
.caixa-atencao h2 { color: var(--atencao); font-size: 1.1rem; margin-bottom: .4rem; }
.caixa-atencao ul { margin: 0; padding-left: 1.2rem; }
.ficha-secao { margin-bottom: 1.5rem; }
.ficha-secao h3 { border-bottom: 1px solid var(--linha); padding-bottom: .35rem; }
.ficha-secao dl { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: .45rem 1.5rem; margin: 0; }
.ficha-secao dt { color: var(--texto-suave); }
.ficha-secao dd { margin: 0; }
.ficha-secao dd.atencao { color: var(--atencao); font-weight: 600; }
.nota { color: var(--texto-suave); font-size: .9rem; }
.opcoes-vazias { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; color: var(--texto-suave); }
.linha-vazia { display: block; min-height: 1.5rem; border-bottom: 1px solid var(--linha); }
.linha-vazia.rotulada { margin-top: .35rem; color: var(--texto-suave); font-size: .85rem; }
.ficha-vazia .ficha-secao dl { row-gap: .8rem; }
.historico-fichas { margin-top: 1.25rem; }

/* Formulário de anamnese (portal e recepção) */
.secao { border: 0; padding: 0; margin: 0 0 1.75rem; }
.secao legend { font: 1.2rem var(--serifa); color: var(--marinho-escuro); padding: 0 0 .4rem; margin-bottom: .9rem; border-bottom: 1px solid var(--linha); width: 100%; }
.pilulas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pilula { margin: 0; font-weight: normal; cursor: pointer; }
.pilula input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilula span { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .95rem; border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); }
.pilula input:checked + span { background: var(--marinho); border-color: var(--marinho); color: var(--branco); }
.pilula input:focus-visible + span { outline: 3px solid rgba(0,169,224,.45); outline-offset: 2px; }
.campo.com-erro .pilula span { border-color: var(--erro); }
.detalhe { margin-top: .6rem; }
.detalhe label { font-weight: normal; color: var(--texto-suave); }

/* ================= PORTAL ================= */
body.portal { background: var(--fundo); min-height: 100vh; border-top: 4px solid var(--cor-cliente); }
.portal-caixa { max-width: 480px; margin: 0 auto; padding: 0 0 2rem; }
.portal-marca { text-align: center; padding: 2rem 1rem 1.5rem; }
.portal-marca img { width: 230px; max-width: 70%; height: auto; }
.portal-marca h1 { font-size: 1.5rem; margin-top: .6rem; }
.portal-caixa > .aviso { margin: 0 1rem 1rem; }
.portal-corpo { background: var(--branco); margin: 0 .75rem; padding: 1.75rem 1.5rem; border-radius: 6px; border: 1px solid var(--linha); }
.portal-corpo h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.portal-corpo > p { margin-top: 0; }
.portal-largo { padding: 1.5rem 1.25rem; }
.portal-intro { text-align: center; color: var(--texto-suave); }
.escolhas { display: grid; gap: .9rem; margin-top: 1.25rem; }
.escolha {
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; text-decoration: none;
  border: 1px solid var(--linha); border-radius: 6px; color: var(--texto); background: var(--branco);
}
.escolha:hover { border-color: var(--bronze); background: #fcfbf9; color: var(--texto); }
.escolha svg { width: 44px; height: 44px; flex: none; padding: 9px; border-radius: 50%; background: var(--cor-cliente); fill: none; stroke: var(--branco); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.escolha strong { display: block; font: 1.3rem var(--serifa); color: var(--marinho-escuro); }
.escolha small { color: var(--texto-suave); font-size: .92rem; }
.form-portal label { margin-top: .5rem; }
.form-portal input { font-size: 1.15rem; margin-bottom: 1rem; }
.form-portal .botao { width: 100%; font-size: 1.05rem; }
.voltar { display: block; text-align: center; margin-top: 1.1rem; color: var(--texto-suave); }
.portal-ok { text-align: center; }
.portal-ok .botao { width: 100%; margin-top: 1rem; }
svg.icone-ok { width: 64px; height: 64px; fill: var(--ok-fundo); stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.validade { font-size: 1.05rem; }
.portal-rodape { text-align: center; font-size: .8rem; color: var(--texto-suave); padding: 1.25rem 1rem 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 860px) {
  .duas-colunas, .colunas-invertidas { grid-template-columns: 1fr; }
  .ficha-secao dl { grid-template-columns: 1fr; gap: .1rem; }
  .ficha-secao dd { margin-bottom: .6rem; }
  .resumo-financeiro { grid-template-columns: 1fr; }
  .linha-tempo li { grid-template-columns: 1fr; gap: .25rem; }
  .topo-linha, .conteudo { padding-left: 1rem; padding-right: 1rem; }
  .usuario { font-size: .82rem; }
}

/* ---------- Impressão da ficha ---------- */
.so-impressao { display: none; }
@media print {
  .topo, .nao-imprimir, .aviso, .cabecalho-pagina { display: none !important; }
  .so-impressao { display: block; }
  .recolhida .detalhes { display: block !important; }
  .recolhida .dados-resumo dt, .recolhida .dados-resumo dd { display: block !important; }
  .cabecalho-impressao { text-align: center; margin-bottom: 1.5rem; }
  .cabecalho-impressao img { width: 170px; }
  .cabecalho-impressao h2 { margin: .75rem 0 .25rem; text-decoration: underline; }
  body { background: #fff; }
  .cartao { border: 0; padding: 0; }
  .conteudo { padding: 0; }
}


/* =====================================================================
   Acabamento moderno (Dois i)
   ===================================================================== */
.cartao, .tabela-rolagem, .resumo, .vazio, .grade-rolagem { border-radius: var(--raio); box-shadow: var(--sombra); }
.botao { border-radius: 8px; font-weight: 600; }
.botao-cheio { background: var(--marinho); border-color: var(--marinho); }
.botao-cheio:hover { background: #000; border-color: #000; }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time], select, textarea { border-radius: 8px; }
input:focus, select:focus, textarea:focus { border-color: var(--ciano); outline: 3px solid rgba(0,169,224,.18); }
.pilula input:checked + span, .pilula-btn.ativo { background: var(--marinho); border-color: var(--marinho); }
.filtros a[aria-current], .alternar-visao a[aria-current] { background: var(--marinho); border-color: var(--marinho); }
.resumo strong { font-weight: 700; }
.tabela th { background: #f8fafc; }
.tabela .hora, .v-data, .lt-data { font-weight: 700; }
.lt-data, .v-data { color: var(--marinho); }
.resumo .tem-pendencia strong { color: var(--erro); }
.cabecalho-pagina h1 { font-size: 1.6rem; }
.titulo-secao-ciano { color: var(--bronze); }
.produto-icone rect { transition: transform .2s; }

/* Login e telas da plataforma */
body.entrada { min-height: 100vh; margin: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); background: #fff; }
.entrada-lado { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 10% 10%, #13314a 0%, var(--marinho) 55%, #05090d 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.entrada-lado::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 48px; background: var(--ciano); opacity: .08; transform: rotate(18deg); }
.entrada-lado h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 0 0 1rem; max-width: 14ch; }
.entrada-lado h1 span { color: var(--ciano); }
.entrada-lado p { color: #b7c0cb; max-width: 40ch; font-size: 1.05rem; }
.entrada-lado ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; color: #dbe2ea; }
.entrada-lado li { display: flex; gap: .6rem; align-items: center; }
.entrada-lado li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ciano); flex: none; }
.entrada-marca { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.15rem; }
.entrada-marca svg { width: 40px; height: 40px; }
.entrada-rodape { font-size: .82rem; color: #8a96a3; display: flex; align-items: center; gap: .6rem; }
.entrada-rodape img { height: 40px; filter: brightness(0) invert(1); opacity: .75; }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.entrada-form > div { width: 100%; max-width: 380px; }
.entrada-form h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.entrada-form .sub { margin-bottom: 1.5rem; }
.entrada-form .botao { width: 100%; min-height: 48px; margin-top: .5rem; }
.entrada-form .doisi { display: block; margin: 2rem auto 0; height: 34px; opacity: .8; }
@media (max-width: 860px) {
  body.entrada { grid-template-columns: 1fr; }
  .entrada-lado { padding: 1.5rem; }
  .entrada-lado h1, .entrada-lado p, .entrada-lado ul { display: none; }
}
.plataforma-tag { background: var(--ciano); color: #fff; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.metrica { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; box-shadow: var(--sombra); }
.metrica span { display: block; color: var(--texto-suave); font-size: .85rem; }
.metrica strong { display: block; font-size: 1.7rem; font-weight: 700; color: var(--marinho); }
.metrica.destaque { background: var(--marinho); border-color: var(--marinho); }
.metrica.destaque span { color: var(--cinza-marca); } .metrica.destaque strong { color: var(--ciano); }
@media (max-width: 860px) { .metricas { grid-template-columns: repeat(2, 1fr); } }
.selo-ativo { background: var(--ok-fundo); color: var(--ok); } .selo-suspenso { background: var(--erro-fundo); color: var(--erro); }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; background: var(--azul-suave); color: var(--bronze); padding: .1rem .45rem; border-radius: 6px; }
.credenciais { background: var(--marinho); color: #fff; border-radius: var(--raio); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.credenciais h2 { color: #fff; }
.credenciais dl { display: grid; grid-template-columns: 140px 1fr; gap: .45rem 1rem; margin: .75rem 0; }
.credenciais dt { color: var(--cinza-marca); }
.credenciais dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.credenciais .obs { color: var(--cinza-marca); }
.links-cliente { display: grid; gap: .4rem; font-size: .88rem; }
.links-cliente code { word-break: break-all; }
.logo-preview { display: flex; align-items: center; gap: 1rem; padding: .75rem; border: 1px dashed var(--linha); border-radius: var(--raio); background: #fafbfc; margin-bottom: .75rem; }
.logo-preview img { max-height: 64px; max-width: 200px; }

.marca-texto { display: block; font-size: 1.6rem; font-weight: 700; color: var(--marinho); letter-spacing: -.02em; }
.marca-texto small { display: block; font-size: .85rem; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.por-doisi { display: inline-block; margin-top: .4rem; font-size: .72rem; color: var(--cinza-marca); }
@media (max-width: 860px) { .marca span { display: none; } .clinica-atual { max-width: 180px; } }

/* Financeiro por visita */
.fin-lista { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: #fff; margin-top: 1rem; }
.fin-cab, .fin-linha { display: grid; grid-template-columns: minmax(220px, 2.4fr) 110px 110px 110px 110px minmax(150px, 1.2fr); gap: .75rem; align-items: center; padding: .8rem 1rem; }
.fin-cab { background: #f8fafc; border-bottom: 2px solid var(--linha); font-size: .82rem; font-weight: 600; color: var(--texto-suave); }
.fin-linha { border-bottom: 1px solid var(--linha); }
.fin-linha:last-child { border-bottom: 0; }
.fin-linha .num, .fin-cab .num { text-align: right; white-space: nowrap; }
.fin-visita strong { display: block; }
.fin-visita .obs { display: flex; align-items: center; gap: .35rem; }
.fin-desc { display: block; font-size: .9rem; margin-top: .1rem; }
.fin-valor { font-weight: 700; }
.fin-aberto .fin-falta, .fin-parcial .fin-falta { color: var(--erro); font-weight: 700; }
.fin-pago { background: #f6fbf8; }
.fin-sem { background: #fbfcfd; }
.fin-sem .fin-valor { color: var(--texto-suave); font-weight: 400; }
.fin-acoes { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.selo-fin-pago { background: var(--ok-fundo); color: var(--ok); }
.selo-fin-parcial { background: var(--atencao-fundo); color: var(--atencao); }
.selo-fin-aberto { background: var(--erro-fundo); color: var(--erro); }
.selo-fin-sem { background: #eef1f4; color: var(--texto-suave); }
.fin-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem 1rem; }
.fin-form .campo { margin: 0; flex: 1 1 200px; }
.fin-form .campo-curto { flex: 0 1 160px; }
.fin-form .campo-largo { flex: 2 1 260px; }
.fin-form .pilulas { gap: .35rem; }
.fin-form .pilula span { min-height: 36px; padding: .3rem .8rem; font-size: .88rem; }
.fin-pagtos { grid-column: 1 / -1; list-style: none; margin: 0; padding: .1rem 0 0 1rem; border-left: 2px solid #cfe9d9; font-size: .88rem; }
.fin-pagtos li { padding: .15rem 0; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.fin-soltos { margin-top: 1rem; font-size: .9rem; }
.fin-avulso { margin-top: 1rem; }
.fin-avulso summary { cursor: pointer; color: var(--bronze); font-weight: 600; margin-bottom: .75rem; }
@media (max-width: 900px) {
  .fin-cab { display: none; }
  .fin-linha { grid-template-columns: 1fr 1fr 1fr; }
  .fin-visita { grid-column: 1 / -1; }
  .fin-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Assinatura com o dedo */
.campo-assinatura { margin-top: 1.25rem; }
.assinatura-caixa { position: relative; height: 190px; border: 2px dashed var(--linha); border-radius: 12px; background: #fff; touch-action: none; overflow: hidden; }
.assinatura-caixa canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.assinatura-linha { position: absolute; left: 8%; right: 8%; bottom: 42px; border-bottom: 1px solid #c3cbd5; pointer-events: none; }
.assinatura-dica { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .85rem; color: var(--texto-suave); pointer-events: none; }
.assinatura-caixa.assinado { border-style: solid; border-color: var(--ciano); }
.assinatura-caixa.assinado .assinatura-dica { visibility: hidden; }
.campo-assinatura.com-erro .assinatura-caixa { border-color: var(--erro); background: #fffafa; }
.campo-assinatura.com-erro .assinatura-dica { color: var(--erro); font-weight: 600; }
.assinatura-acoes { display: flex; justify-content: flex-end; margin-top: .35rem; font-size: .9rem; }
.ficha-assinatura img { display: block; max-width: 340px; width: 100%; height: auto; border-bottom: 1px solid var(--texto-suave); margin: .25rem 0 .5rem; }
.assinatura-meta { font-size: .82rem; color: var(--texto-suave); margin: 0; }
.assinatura-meta .integro { color: var(--ok); font-weight: 600; }
.assinatura-meta .alterado { color: var(--erro); font-weight: 700; }

/* Logotipo Agendei (o "i" é o da Dois i) */
.logo-produto { display: inline-flex; align-items: flex-end; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--marinho); font-size: 1.35rem; white-space: nowrap; }
.logo-produto.escuro { color: #fff; }
.logo-produto .produto-icone { width: auto; height: 1.18em; margin-left: .04em; margin-bottom: .02em; flex: none; }
.marca { align-items: center; }
.marca .logo-produto { font-size: 1.4rem; }
.marca .marca-por { display: block; color: var(--cinza-marca); font-size: .7rem; margin-left: .6rem; padding-left: .6rem; border-left: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
@media (max-width: 860px) { .marca .marca-por { display: none; } }

.entrada-doisi { width: 190px; max-width: 60%; height: auto; position: relative; z-index: 1; }
.entrada-produto { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.entrada-produto .logo-produto { font-size: 2.6rem; }
.entrada-logo-movel { display: none; margin-bottom: 1.5rem; }
.entrada-logo-movel .logo-produto { font-size: 2rem; }
@media (max-width: 860px) {
  .entrada-lado { flex-direction: row; align-items: center; padding: 1rem 1.25rem; }
  .entrada-lado > div, .entrada-rodape { display: none; }
  .entrada-doisi { width: 120px; }
  .entrada-logo-movel { display: block; }
}

/* Grade: horários fora do expediente */
.grade-semana td.cel.fechado { background: repeating-linear-gradient(135deg, #f1f3f6, #f1f3f6 6px, #e9edf1 6px, #e9edf1 12px); cursor: default; }
.grade-semana td.cel.fechado:hover { background: repeating-linear-gradient(135deg, #eef1f4, #eef1f4 6px, #e5e9ee 6px, #e5e9ee 12px); }
.grade-semana thead th.dia-fechado strong { color: var(--texto-suave); }
.grade-semana thead th em { display: block; font-style: normal; font-size: .68rem; color: var(--erro); font-weight: 600; }

/* Meus Horários */
.dias-semana { display: grid; gap: .5rem; }
.dia-config { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 1rem; padding: .7rem 1rem; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; }
.dia-config.fechado { background: #f7f8fa; }
.dia-config.fechado .dia-horas { opacity: .35; pointer-events: none; }
.dia-chave { display: flex; align-items: center; gap: .7rem; margin: 0; cursor: pointer; font-weight: normal; }
.dia-chave input { position: absolute; opacity: 0; }
.dia-chave .chave { width: 42px; height: 24px; border-radius: 999px; background: #cfd6de; position: relative; transition: background .15s; flex: none; }
.dia-chave .chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.dia-chave input:checked + .chave { background: var(--ciano); }
.dia-chave input:checked + .chave::after { transform: translateX(18px); }
.dia-chave input:focus-visible + .chave { outline: 3px solid rgba(0,169,224,.45); outline-offset: 2px; }
.dia-chave strong { min-width: 70px; }
.dia-chave small { font-size: .78rem; }
.dia-config:not(.fechado) .estado-fechado, .dia-config.fechado .estado-aberto { display: none; }
.dia-config .estado-aberto { color: var(--ok); } .dia-config .estado-fechado { color: var(--texto-suave); }
.dia-horas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.dia-horas label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: normal; }
.dia-horas input[type=time] { width: auto; min-height: 40px; padding: .35rem .5rem; }
.dia-intervalo { display: inline-flex; align-items: center; gap: .4rem; padding-left: 1rem; border-left: 1px solid var(--linha); }
@media (max-width: 760px) { .dia-config { grid-template-columns: 1fr; } .dia-intervalo { border-left: 0; padding-left: 0; } }

/* Mensalidades (console) */
.selo-fat-pendente { background: var(--azul-suave); color: var(--bronze); }
.selo-fat-pago { background: var(--ok-fundo); color: var(--ok); }
.selo-fat-atrasado { background: var(--erro-fundo); color: var(--erro); text-decoration: none; }
.selo-fat-cancelado { background: #eef1f4; color: var(--texto-suave); }
.tabela-faturas select { min-height: 34px; padding: .2rem .4rem; font-size: .85rem; }
.tabela-faturas tr.fat-atrasado td { background: #fff8f8; }
.tabela-faturas tr.fat-pago td { background: #f7fcf9; }
.tabela-faturas tr.fat-cancelado td { color: var(--texto-suave); }
.tabela-faturas tr.fat-edicao td { padding: 0; border-bottom: 0; }
.fat-editar { padding: .5rem 1rem 1rem; }
.fat-excluir { margin-top: .5rem; }
.obs.atraso { color: var(--erro); font-weight: 600; }
input[type=month] { font: inherit; border: 1px solid var(--linha); border-radius: 8px; padding: .5rem .6rem; min-height: 44px; background: #fff; }

/* Cards de situação dos clientes (console) */
.cards-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.card-status { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); text-decoration: none; color: var(--texto); border-top: 4px solid var(--cinza-marca); transition: transform .12s, box-shadow .12s; }
.card-status:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.08); color: var(--texto); }
.card-status .cs-rotulo { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.card-status strong { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.card-status small { font-size: .74rem; color: var(--texto-suave); }
.card-ativos { border-top-color: var(--ciano); } .card-ativos strong { color: var(--bronze); }
.card-em_dia { border-top-color: var(--ok); } .card-em_dia strong { color: var(--ok); }
.card-atrasado { border-top-color: var(--erro); } .card-atrasado strong { color: var(--erro); }
.card-suspensos { border-top-color: #5d6a79; }
.card-sem_mensalidade { border-top-color: #d4900f; } .card-sem_mensalidade strong { color: #a86f08; }
.card-novos { border-top-color: #7b4bb7; } .card-novos strong { color: #6a3fa3; }
.card-status.ativo { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.card-status.ativo .cs-rotulo, .card-status.ativo small { color: var(--cinza-marca); }
.card-status.ativo strong { color: #fff; }
.filtro-ativo { margin: -.5rem 0 1rem; color: var(--texto-suave); font-size: .9rem; }
@media (max-width: 1100px) { .cards-status { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cards-status { grid-template-columns: repeat(2, 1fr); } }

.selo-mail-enviado { background: var(--ok-fundo); color: var(--ok); }
.selo-mail-pendente { background: var(--azul-suave); color: var(--bronze); }
.selo-mail-erro { background: var(--erro-fundo); color: var(--erro); }
.selo-mail-cancelado { background: #eef1f4; color: var(--texto-suave); }

/* Código de acesso (MFA) */
.campo-codigo { font: 700 1.8rem/1 ui-monospace, Menlo, monospace !important; letter-spacing: .5em; text-align: center; padding: .7rem !important; }
.mfa-acoes { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; font-size: .9rem; }

.check-mfa { background: var(--azul-suave); border-radius: var(--raio); padding: .7rem .8rem; }
.check-mfa small { color: var(--texto-suave); }