@charset "UTF-8";
/* Terapia Online — cores e desenho tirados da Ficha de Anamnese de papel. */
:root {
  --marrom-fundo: #1d0e01;
  --marrom: #2b1907;
  --marrom-claro: #4a3115;
  --ouro: #bb9238;
  --ouro-claro: #e2c47c;
  --ouro-fraco: #d9c49a;
  --papel: #f6eddf;
  --papel-claro: #fbf5ea;
  --tinta: #2a1a0c;
  --tinta-fraca: #6d5a47;
  --erro: #a3271c;
  --ok: #4d6b2a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--marrom-fundo) radial-gradient(ellipse at top, #3a2410 0%, var(--marrom-fundo) 60%) fixed;
  color: var(--tinta);
  font-family: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
a { color: #7a5a14; }
a:hover { color: var(--marrom); }
small, .mini { font-size: .84rem; color: var(--tinta-fraca); }
.mini { margin: .6rem 0 0; }

/* ------------------------------------------------------------ topo */
.topo { max-width: 1024px; margin: 0 auto; }
.topo-faixa { display: block; }
.topo-faixa img { display: block; width: 100%; height: auto; }
.menu {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; justify-content: flex-end;
  padding: .55rem 1rem; background: var(--marrom); border-top: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro);
  color: var(--ouro-claro); font-size: .92rem;
}
.menu a, .menu .link { color: var(--ouro-claro); text-decoration: none; font-weight: 700; }
.menu a:hover, .menu .link:hover { color: #fff; }
.menu form { margin: 0; }
.menu-quem { margin-right: auto; color: var(--papel); }
.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ------------------------------------------------------------ miolo */
.miolo {
  max-width: 1024px; margin: 0 auto; padding: 1.4rem 1rem 1.8rem;
  background: var(--papel); border-left: 1px solid var(--ouro); border-right: 1px solid var(--ouro);
  min-height: 40vh;
}
.rodape { max-width: 1024px; margin: 0 auto; padding: 1rem 1rem 2rem; text-align: center; color: var(--ouro-claro); }
.rodape a { color: var(--ouro-fraco); font-size: .85rem; }
.rodape-links { margin: .3rem 0 0; }
.lema { font-family: 'Dancing Script', cursive; font-size: 1.55rem; text-align: center; margin: 1.2rem 0 .2rem; color: var(--marrom-claro); }
.rodape .lema { color: var(--ouro-claro); margin-top: .4rem; }

/* ------------------------------------------------------------ peças */
.pilula {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: -1.75rem 0 .9rem -.35rem; padding: .32rem .95rem;
  background: linear-gradient(180deg, #3b230a, var(--marrom)); color: #fffcef;
  border-radius: 999px; border: 1px solid var(--ouro);
  font-size: .9rem; font-weight: 800; letter-spacing: .06em;
}
.coracao { display: inline-block; line-height: 1; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Arial Unicode MS', sans-serif; }
.coracao::before { content: '♡'; color: var(--ouro-claro); font-size: 1.05em; }
.coracao.cheio::before { content: '♥'; color: var(--ouro); }
.lema .coracao::before { color: var(--ouro); }
.rodape .lema .coracao::before { color: var(--ouro-claro); }
.pagina-folha .rodape .lema { display: none; }
.lotus { display: inline-block; width: 34px; height: 22px; vertical-align: middle; background: url('/assets/lotus.svg') center / contain no-repeat; }

.cartao, .bloco {
  position: relative; background: var(--papel-claro); border: 1.5px solid var(--ouro);
  border-radius: 14px; padding: 1.15rem 1.1rem 1rem; margin: 1.5rem 0 0;
}
.cartao.destaque { background: #fff9ec; }
.cartao p { margin: .2rem 0 .7rem; }

.botao {
  display: inline-block; padding: .68rem 1.25rem; border-radius: 999px; border: 1px solid var(--marrom);
  background: var(--marrom); color: #fffcef; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; text-align: center;
}
.botao:hover { background: var(--marrom-claro); color: #fff; }
.botao-ouro { background: linear-gradient(180deg, var(--ouro-claro), var(--ouro)); border-color: #8f6d22; color: var(--marrom); }
.botao-ouro:hover { background: var(--ouro-claro); color: var(--marrom); }
.botao-claro { background: transparent; color: var(--marrom); }
.botao-claro:hover { background: #efe2c8; color: var(--marrom); }
.botao-perigo { background: var(--erro); border-color: var(--erro); }
.botao.pequeno { padding: .34rem .85rem; font-size: .88rem; }
.botao.grande { padding: .9rem 2.2rem; font-size: 1.08rem; }

.aviso { border-radius: 10px; padding: .7rem .95rem; margin: 0 0 1rem; border: 1px solid; }
.aviso-ok { background: #eef3e2; border-color: #a9bd86; color: #33491a; }
.aviso-erro { background: #f9e6e2; border-color: #d59b92; color: var(--erro); }
.erro { display: block; color: var(--erro); font-size: .85rem; font-weight: 700; margin-top: .2rem; }
.senha-prov { font-family: Consolas, 'Courier New', monospace; font-size: 1.25rem; letter-spacing: .08em; }
.escondido { display: none !important; }

/* ------------------------------------------------------------ formulários */
label { display: block; font-weight: 700; color: var(--tinta); }
label small { font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=search], textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem;
  font: inherit; font-weight: 400; color: var(--tinta);
  background: #fffdf7; border: 1px solid var(--ouro-fraco); border-bottom: 2px solid var(--ouro); border-radius: 8px;
}
input:focus, textarea:focus { outline: 2px solid var(--ouro); outline-offset: 1px; background: #fff; }
input[readonly] { background: #efe6d4; color: var(--tinta-fraca); }
textarea { resize: vertical; min-height: 4.2rem; }
.form label { margin-bottom: .85rem; }
.marca { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .6rem 0; }
.marca input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--marrom); flex: none; }

.porta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.porta.uma { grid-template-columns: minmax(0, 520px); justify-content: center; }
.porta.uma.larga { grid-template-columns: minmax(0, 760px); }
.passos { margin: .4rem 0 1rem; padding-left: 1.2rem; }
.passos li { margin-bottom: .3rem; }
.leitura p { margin-bottom: .8rem; }

/* ------------------------------------------------------------ ficha (formulário e folha preenchida) */
.folha-titulo {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  letter-spacing: .03em; text-align: center; margin: .2rem 0 .6rem; color: var(--marrom);
}
.grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: .75rem .9rem; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
.campo { font-weight: 700; }
.duas { display: grid; gap: 0 1.1rem; }
.duas.a { grid-template-columns: 5fr 8fr; }
.duas.b { grid-template-columns: 5fr 7fr; }
.itens { margin: 0; padding-left: 1.1rem; }
.itens li { margin-bottom: .7rem; }
.itens li::marker { color: var(--ouro); }
.itens.sem-ponto { list-style: none; padding-left: 0; }
.perg { font-weight: 700; }
.opcoes { display: inline-flex; flex-wrap: wrap; gap: .35rem .5rem; margin: .25rem 0 0 .2rem; vertical-align: middle; }
.op-campo { display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; }
.op-campo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op-campo span {
  padding: .3rem .8rem; border: 1.5px solid var(--ouro); border-radius: 999px; background: #fffdf7; min-width: 3.2rem; text-align: center;
}
.op-campo input:checked + span { background: var(--marrom); color: #fffcef; border-color: var(--marrom); }
.op-campo input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 2px; }
.compl-campo { margin-top: .4rem; font-weight: 600; }
.curto { display: inline-block !important; width: auto !important; min-width: 9rem; margin: 0 0 0 .4rem !important; }
.escala { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bola {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 1.5px solid var(--marrom); border-radius: 50%; font-weight: 800; background: #fffdf7; color: var(--marrom);
}
.escala-campo label { cursor: pointer; }
.escala-campo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escala-campo input:checked + .bola, .bola-sim { background: var(--marrom); color: #fffcef; box-shadow: 0 0 0 2px var(--ouro); }
.escala-campo input:focus-visible + .bola { outline: 2px solid var(--ouro); outline-offset: 2px; }
.termo { font-size: .93rem; margin: 0 0 .7rem; }
.assinatura { font-family: 'Dancing Script', cursive; font-size: 1.45rem !important; }
.enviar { text-align: center; margin: 1.6rem 0 .4rem; }

/* folha preenchida */
.lin { display: flex; align-items: baseline; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.rot { font-weight: 700; white-space: nowrap; }
.val { flex: 1 1 5rem; min-width: 3rem; border-bottom: 1px solid var(--marrom-claro); padding: 0 .25rem .05rem; color: #14233f; font-weight: 600; overflow-wrap: anywhere; }
.val.solto { display: inline-block; min-width: 9rem; }
.compl { display: inline-flex; gap: .4rem; align-items: baseline; margin-left: .5rem; }
.compl .val { min-width: 7rem; }
.op { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .55rem 0 .15rem; white-space: nowrap; }
.op i {
  display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; font-style: normal; font-size: .8rem; font-weight: 900;
  border: 1.5px solid var(--marrom); border-radius: 4px; background: #fffdf7; color: var(--marrom);
}
.op-sim { font-weight: 800; }
.op-sim i { background: var(--marrom); color: #fffcef; }
.texto { margin: .3rem 0 0; padding: .1rem .25rem .3rem; border-bottom: 1px solid var(--marrom-claro); color: #14233f; font-weight: 600; min-height: 1.6rem; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ área da clínica */
.barra {
  display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; justify-content: space-between;
  background: var(--papel-claro); border: 1.5px solid var(--ouro); border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1.2rem;
}
.barra p { margin: 0; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.acoes form { margin: 0; }
.contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1rem; }
.contador {
  display: block; text-decoration: none; text-align: center; padding: .7rem .5rem; border-radius: 12px;
  border: 1.5px solid var(--ouro); background: var(--papel-claro); color: var(--tinta); font-size: .9rem;
}
.contador b { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; color: var(--marrom); }
.contador.ativo { background: var(--marrom); color: var(--ouro-claro); }
.contador.ativo b { color: #fffcef; }
.busca { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.busca input[type=search] { flex: 1 1 16rem; margin-top: 0; }
.tabela-rola { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--papel-claro); border: 1.5px solid var(--ouro); border-radius: 12px; }
.tabela th { text-align: left; background: var(--marrom); color: #fffcef; padding: .55rem .7rem; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.tabela td { padding: .6rem .7rem; border-top: 1px solid var(--ouro-fraco); vertical-align: middle; }
.tabela .bola { width: 1.9rem; height: 1.9rem; font-size: .9rem; }
.nivel-alto { background: var(--erro); border-color: var(--erro); box-shadow: none; }
.nivel-medio { background: #9a6a12; border-color: #9a6a12; box-shadow: none; }
.nivel-baixo { background: var(--ok); border-color: var(--ok); box-shadow: none; }
.selo { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #ece3d1; color: var(--tinta-fraca); margin: .1rem 0; }
.selo-ok { background: #e3ecd2; color: #33491a; }
.selo-falta { background: #f6e3bd; color: #6b4a07; }
.vazio { text-align: center; padding: 2rem 1rem; color: var(--tinta-fraca); }
.paginas { text-align: center; margin: 1rem 0 0; }
.paginas a { margin: 0 .8rem; font-weight: 700; }
.zona { margin-top: 2.2rem; }
.zona form { margin: 0 0 .4rem; }
.zona p { margin: .3rem 0; }

/* ------------------------------------------------------------ sala de atendimento (vídeo + chat) */
.centro { text-align: center; }
.sub { font-family: 'Playfair Display', Georgia, serif; font-size: 1.05rem; margin: 1.2rem 0 .3rem; color: var(--marrom); }
.verde { color: var(--ok); }
.cinza { color: var(--tinta-fraca); }
.barra.chamada { background: #fff6dc; border-width: 2px; }
.pagina-sala .rodape .lema { display: none; }
.sala-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .8rem; }
.sala-titulo { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.15rem, 3.4vw, 1.6rem); margin: 0; color: var(--marrom); }
.sala-estado { margin: 0; font-weight: 700; color: var(--marrom-claro); }
.sala[data-ligado] .sala-estado { color: var(--ok); }
.sala-entrada { text-align: center; background: var(--papel-claro); border: 1.5px solid var(--ouro); border-radius: 14px; padding: 1.6rem 1rem; }
.sala-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(260px, 3fr); gap: 1rem; align-items: stretch; }
.sala-corpo[hidden] { display: none; }
.sala-video { position: relative; background: #120a02; border: 1.5px solid var(--ouro); border-radius: 14px; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; }
#video-outro { width: 100%; flex: 1 1 auto; min-height: 260px; max-height: 68vh; object-fit: contain; background: #120a02; display: block; }
.video-vazio { position: absolute; inset: 0 0 4.2rem 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--ouro-claro); font-weight: 700; pointer-events: none; }
.video-vazio[hidden] { display: none; }
#video-meu { position: absolute; right: .7rem; top: .7rem; width: 26%; max-width: 190px; min-width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ouro); border-radius: 10px; background: #000; transform: scaleX(-1); }
#video-meu[hidden] { display: none; }
.sala-botoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: .6rem; background: var(--marrom); }
.botao.redondo { padding: .5rem 1.05rem; font-size: .9rem; border-color: var(--ouro); }
.sala-botoes .botao-claro { color: var(--ouro-claro); }
.sala-botoes .botao-claro:hover { background: var(--marrom-claro); color: #fff; }
.botao.desligado { background: #6d5a47; color: #e9dcc6; text-decoration: line-through; }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.sala-chat { position: relative; display: flex; flex-direction: column; background: var(--papel-claro); border: 1.5px solid var(--ouro); border-radius: 14px; padding: .8rem; min-height: 320px; }
.sala-chat .pilula { align-self: flex-start; margin: 0 0 .6rem; }
.chat-lista { flex: 1 1 auto; overflow-y: auto; max-height: 58vh; min-height: 180px; display: flex; flex-direction: column; gap: .45rem; padding: .2rem .1rem .6rem; }
.msg { max-width: 88%; padding: .45rem .7rem .3rem; border-radius: 12px; border: 1px solid var(--ouro-fraco); background: #fff; overflow-wrap: anywhere; }
.msg p { margin: 0; white-space: pre-wrap; }
.msg small { display: block; font-size: .72rem; margin-top: .1rem; }
.msg-minha { align-self: flex-end; background: var(--marrom); color: #fffcef; border-color: var(--marrom); }
.msg-minha small { color: var(--ouro-claro); }
.msg-outro { align-self: flex-start; }
.chat-form { display: flex; gap: .5rem; }
.chat-form input { margin-top: 0; }
.sala-fim .sala-video { min-height: 140px; }
.sala-fim #video-outro { min-height: 100px; }
.sala-fim .sala-botoes { display: none; }

/* ------------------------------------------------------------ celular */
@media screen and (max-width: 760px) {
  .porta, .duas.a, .duas.b { grid-template-columns: 1fr; }
  .sala-corpo { grid-template-columns: 1fr; }
  #video-outro { max-height: 56vh; }
  .chat-lista { max-height: 40vh; }
  .grade { grid-template-columns: 1fr; }
  .c3, .c4, .c5, .c6, .c7, .c9, .c12 { grid-column: span 1; }
  .contadores { grid-template-columns: 1fr 1fr; }
  .miolo { padding: 1rem .7rem 1.4rem; }
  .menu { justify-content: center; }
  .menu-quem { margin-right: 0; width: 100%; text-align: center; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-top: 2px solid var(--ouro); padding: .4rem 0; }
  .tabela td { border: 0; padding: .25rem .7rem; }
  .tabela td[data-r]:not(:empty)::before { content: attr(data-r) ': '; font-weight: 700; color: var(--tinta-fraca); font-size: .8rem; }
  .bola { width: 2.05rem; height: 2.05rem; }
  .compl { display: flex; margin: .3rem 0 0; }
}

/* ------------------------------------------------------------ impressão: uma folha A4, como a ficha de papel */
@media print {
  @page { size: A4; margin: 7mm 8mm; }
  body { background: #fff; font-size: 9.4pt; line-height: 1.25; }
  .nao-imprime, .rodape, .menu { display: none !important; }
  .topo, .miolo { max-width: none; }
  .topo { background: #211202; border-radius: 3mm; overflow: hidden; }
  .topo-faixa img { height: 40mm; width: auto; margin: 0 auto; }
  .miolo { border: 0; padding: 2mm 0 0; background: #fff; min-height: 0; }
  .cartao, .bloco { margin-top: 4.6mm; padding: 3.4mm 3.5mm 2.2mm; break-inside: avoid; background: #fff; border-width: 1pt; border-radius: 3mm; }
  .pilula { margin: -6.4mm 0 1.6mm -1mm; font-size: 8pt; padding: .8mm 3.2mm; gap: 1.5mm; }
  .folha-titulo { font-size: 17pt; margin: 0; }
  .lotus { width: 8mm; height: 5mm; }
  .grade { gap: 1.5mm 4mm; }
  .duas { gap: 0 3.5mm; }
  .itens { padding-left: 4mm; }
  .itens li { margin-bottom: 1.2mm; }
  .op { margin: 0 1.6mm 0 .5mm; }
  .op i { width: 3.3mm; height: 3.3mm; font-size: 6.5pt; border-width: 1pt; }
  .texto { min-height: 4mm; margin-top: .6mm; padding-bottom: .5mm; }
  .termo { font-size: 8.4pt; margin-bottom: 1.5mm; }
  .escala { gap: 1.4mm; margin-top: 1.2mm; }
  .bola { width: 6mm; height: 6mm; font-size: 8pt; border-width: 1pt; }
  .bola-sim { box-shadow: 0 0 0 .5mm var(--ouro); }
  .lema { font-size: 13pt; margin: 2.5mm 0 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}