:root {
  color-scheme: light;
  /* Cor do setor. Padrão = empresa (roxo e branco: entrada e Recepção); Clínica = verde; Banho e Tosa = azul.
     Os nomes "--verde*" ficaram por histórico: são a cor principal do setor em uso. */
  --verde: #764695; --verde-forte: #5c3478; --verde-escuro: #2a1b36; --verde-claro: #f4eef8; --verde-borda: #e2d4ec; --marca: #9a6cbb;
  --lateral-fim: #1d1326;
  --azul: #1d8ccb; --azul-claro: #e6f3fb; --roxo: #764695; --roxo-claro: #f3ecf7;
  --fundo: #f7f5fa; --tinta: #1f1a26; --suave: #645d6e; --linha: #ebe4f0; --branco: #fff;
  --ouro: #c9a24a; --ouro-claro: #f3e2b3;
  --alerta: #b4462f; --alerta-claro: #fdece7; --ambar: #a36412; --ambar-claro: #fdf2df; --ok: #1f7a45; --ok-claro: #e3f4ea;
  --titulo: 'Fraunces', Georgia, serif; --texto: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sombra: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 24px 48px -36px rgb(16 59 55 / 45%), 0 8px 18px -16px rgb(16 59 55 / 18%);
  --raio: 18px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14.5px/1.5 var(--texto); color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 500; color: var(--verde-escuro); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Clínica: verde e branco (#52BBAE). */
body[data-modulo="clinica"] {
  --verde: #2f8c82; --verde-forte: #23706a; --verde-escuro: #103b37; --verde-claro: #e8f6f4; --verde-borda: #c7e8e3; --marca: #52bbae;
  --lateral-fim: #0d302d; --fundo: #f4f8f8; --tinta: #14262a; --suave: #5a6e72; --linha: #dfeceb;
}
/* Banho e Tosa: azul e branco (#249CD8). */
body[data-modulo="banho"] {
  --verde: #1d8ccb; --verde-forte: #146c9f; --verde-escuro: #0b3550; --verde-claro: #e6f3fb; --verde-borda: #c4e2f4; --marca: #249cd8;
  --lateral-fim: #082943; --fundo: #f3f8fc; --tinta: #14262a; --suave: #5a6e72; --linha: #dbe9f3;
}
.modulos { display: grid; gap: 4px; background: rgb(255 255 255 / 7%); border-radius: 14px; padding: 4px; }
.modulos button { border: 0; background: transparent; color: rgb(255 255 255 / 72%); font-weight: 700; padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left; }
.modulos button.on { background: #fff; color: var(--verde-escuro); }
.lateral nav a b { font-weight: inherit; }

/* Entrar */
.entrar { min-height: 100%; display: grid; place-items: center; background: radial-gradient(900px 500px at 80% -10%, rgb(154 108 187 / 45%), transparent 60%), linear-gradient(135deg, #2a1b36, #764695); }
.cartao-entrar { width: min(380px, 92vw); background: #fff; border-radius: 26px; padding: 34px 32px; display: grid; gap: 14px; box-shadow: 0 40px 80px -40px rgb(0 0 0 / 60%); border-top: 3px solid #764695; }
.cartao-entrar .logo-img { display: block; width: 230px; max-width: 80%; height: auto; margin: 0 auto 10px; }
.logo-grande { font: 500 2rem var(--titulo); color: var(--verde-escuro); text-align: center; margin-bottom: 6px; }
.logo-grande small, .logo small { display: block; font: 700 .68rem var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--ouro); }
.cartao-entrar label { display: grid; gap: 4px; font-weight: 600; font-size: .85rem; color: var(--suave); }
.erro { color: var(--alerta); min-height: 1.2em; margin: 0; text-align: center; font-size: .9rem; }

/* Estrutura */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }
.lateral { background: linear-gradient(180deg, var(--verde-escuro), var(--lateral-fim)); color: #fff; padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.logo { padding: 0 10px; display: grid; gap: 6px; }
.logo img { display: block; width: 170px; max-width: 100%; height: auto; }
.lateral nav { display: grid; gap: 4px; }
.lateral nav a { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; color: rgb(255 255 255 / 78%); text-decoration: none; font-weight: 600; }
.lateral nav a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.lateral nav a.ativo { background: rgb(255 255 255 / 13%); color: #fff; box-shadow: inset 3px 0 0 var(--ouro-claro); }
.eu { margin-top: auto; padding: 12px; border-radius: 14px; background: rgb(255 255 255 / 7%); display: grid; gap: 2px; }
.eu small { color: rgb(255 255 255 / 60%); }
.eu .link { color: var(--ouro-claro); justify-self: start; padding: 0; margin-top: 6px; }
main { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: rgb(244 248 248 / 88%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-dir { margin-left: auto; display: flex; gap: 12px; align-items: center; color: var(--suave); font-weight: 600; }
.busca { position: relative; flex: 1; max-width: 640px; }
.busca input { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--verde-borda); background: #fff; box-shadow: 0 6px 16px -14px rgb(16 59 55 / 50%); }
.busca input:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.resultados { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); max-height: 70vh; overflow: auto; padding: 6px; }
.res { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.res:hover, .res.sel { background: var(--verde-claro); }
.res b { font-size: 1rem; } .res small { color: var(--suave); }
.tela { padding: 26px 28px 60px; max-width: 1500px; width: 100%; }

/* Peças */
.cartao { background: linear-gradient(180deg, #fff, #fcfefe); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra); }
.grade { display: grid; gap: 18px; }
.cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cab .dir { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sub { color: var(--suave); margin: 2px 0 0; }
.rot { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); font-weight: 700; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.rot::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--ouro) 50%, transparent), transparent); }
.btn { border: 0; border-radius: 12px; padding: 10px 16px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn.prim { color: #fff; background: linear-gradient(135deg, var(--marca), var(--verde) 45%, var(--verde-forte)); box-shadow: 0 10px 20px -14px var(--verde-forte), inset 0 1px 0 rgb(255 255 255 / 25%); }
.btn.sec { background: #fff; color: var(--verde-forte); border: 1px solid var(--verde-borda); }
.btn.perigo { background: #fff; color: var(--alerta); border: 1px solid color-mix(in srgb, var(--alerta) 30%, white); }
.btn.peq { padding: 6px 11px; font-size: .84rem; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--verde-forte); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pilula { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--verde-claro); color: var(--verde-forte); white-space: nowrap; }
.pilula.alerta { background: var(--alerta-claro); color: var(--alerta); } .pilula.ambar { background: var(--ambar-claro); color: var(--ambar); }
.pilula.ok { background: var(--ok-claro); color: var(--ok); } .pilula.cinza { background: #eef2f2; color: var(--suave); }
.pilula.azul { background: var(--azul-claro); color: var(--azul); } .pilula.roxo { background: var(--roxo-claro); color: var(--roxo); }
.pilula.ouro { background: color-mix(in srgb, var(--ouro-claro) 60%, white); color: #7a5a12; }
input.inp, select.inp, textarea.inp { width: 100%; border: 1px solid var(--verde-borda); border-radius: 11px; padding: 9px 11px; background: #fff; }
textarea.inp { min-height: 74px; resize: vertical; }
.inp:focus { outline: 2px solid var(--marca); outline-offset: 0; }
.campo { display: grid; gap: 4px; }
.campo > span { font-size: .76rem; font-weight: 700; color: var(--suave); }
.vazio { color: var(--suave); text-align: center; padding: 40px 10px; }
table.tab { width: 100%; border-collapse: collapse; }
.tab th, .tab td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tab th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }

/* Hoje */
.fila { display: grid; gap: 10px; }
.item-fila { display: grid; grid-template-columns: 70px 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--linha); position: relative; overflow: hidden; }
.item-fila::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--verde-borda); }
.item-fila.aguardando { background: linear-gradient(180deg, #fffdf6, #fff8e8); border-color: color-mix(in srgb, var(--ouro) 40%, white); }
.item-fila.aguardando::before { background: var(--ouro); }
.item-fila.chamado::before { background: var(--azul); } .item-fila.em_atendimento::before { background: var(--verde); }
.item-fila.finalizado { opacity: .62; }
.hora { font-weight: 700; font-size: 1.05rem; color: var(--verde-forte); }
.item-fila .nome { font: 500 1.2rem var(--titulo); color: var(--verde-escuro); }
.item-fila .acoes { display: flex; gap: 6px; }

/* Agenda */
.agenda-grade { display: grid; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; overflow: auto; max-height: calc(100vh - 190px); box-shadow: var(--sombra); }
.ag-cab { position: sticky; top: 0; z-index: 3; background: #fff; padding: 12px 10px; border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha); font-weight: 700; text-align: center; }
.ag-cab small { display: block; font-weight: 500; color: var(--suave); }
.ag-hora { position: sticky; left: 0; z-index: 2; background: #fbfdfd; color: var(--suave); font-size: .78rem; text-align: right; padding: 0 8px; border-top: 1px solid var(--linha); transform: translateY(-.6em); border-top-color: transparent; }
.ag-col { position: relative; border-left: 1px solid var(--linha); }
.ag-slot { border-top: 1px solid #f0f5f5; cursor: pointer; }
.ag-slot.cheia { border-top-color: var(--linha); }
.ag-slot:hover { background: var(--verde-claro); }
.ag-bloco { position: absolute; left: 4px; right: 4px; border-radius: 10px; padding: 5px 8px; font-size: .8rem; line-height: 1.3; overflow: hidden; cursor: pointer; color: #fff; box-shadow: 0 8px 16px -12px rgb(0 0 0 / 50%); border-left: 4px solid rgb(0 0 0 / 15%); }
.ag-bloco b { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-bloco.gendo { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0) 0 10px, rgb(255 255 255 / 9%) 10px 20px); }
.ag-bloco.cancelado, .ag-bloco.faltou { opacity: .45; text-decoration: line-through; }
.ag-agora { position: absolute; left: 0; right: 0; height: 2px; background: var(--alerta); z-index: 2; }

/* Ficha */
.ficha-cab { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.avatar { width: 78px; height: 78px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 500 2rem var(--titulo); color: #fff; background: linear-gradient(135deg, var(--marca), var(--verde-forte)); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--ouro); }
.avatar.felina { background: linear-gradient(135deg, #b48fd0, var(--roxo)); }
.dados { display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--suave); margin-top: 4px; } .dados b { color: var(--tinta); font-weight: 600; }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.alertas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.alerta { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 12px; background: var(--ambar-claro); color: var(--ambar); font-weight: 700; font-size: .86rem; border: 1px solid color-mix(in srgb, var(--ambar) 20%, white); }
.alerta.grave { background: var(--alerta-claro); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 25%, white); }
.alerta button { border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; padding: 0 0 0 4px; }
.sugestao { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px dashed var(--ouro); margin-top: 8px; font-size: .86rem; }
.sugestao small { color: var(--suave); }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: 18px 0 16px; overflow-x: auto; }
.abas button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font-weight: 700; color: var(--suave); cursor: pointer; white-space: nowrap; }
.abas button.on { color: var(--verde-escuro); border-bottom-color: var(--ouro); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros button { border: 1px solid var(--verde-borda); background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: .84rem; cursor: pointer; }
.filtros button.on { background: var(--verde); color: #fff; border-color: var(--verde); }
.linha { position: relative; padding-left: 24px; }
.linha::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--verde-borda), transparent); }
.ano { font: 500 1.15rem var(--titulo); color: var(--verde-escuro); margin: 18px 0 8px -24px; }
.ev { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 11px 14px; margin-bottom: 8px; }
.ev::before { content: ''; position: absolute; left: -21px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.ev.receita::before { background: var(--roxo); } .ev.aplicacao::before { background: var(--ouro); } .ev.historico::before { background: #9bb5b2; }
.ev-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .84rem; color: var(--suave); }
.ev-cab .dt { font-weight: 700; color: var(--verde-forte); }
.ev-texto { white-space: pre-wrap; margin-top: 4px; }
.ev .acoes { margin-left: auto; display: flex; gap: 6px; }
.lado .cartao + .cartao { margin-top: 14px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .9rem; } .kv dt { color: var(--suave); } .kv dd { margin: 0; }
.tutor-dado { margin: 0; color: var(--tinta); }
.form2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.do-tutor { background: var(--roxo-claro); border: 1px solid #e3d5ee; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.do-tutor h3 { color: var(--roxo); font-size: .95rem; margin-bottom: 6px; }
.do-tutor dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 3px 12px; font-size: .9rem; } .do-tutor dt { color: var(--suave); } .do-tutor dd { margin: 0; }
.rx-linha { display: grid; grid-template-columns: 2fr 1fr 3fr auto; gap: 8px; margin-bottom: 8px; }
.graf { width: 100%; height: auto; }

/* Modal e aviso */
.modal { position: fixed; inset: 0; z-index: 50; background: rgb(10 30 28 / 45%); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-caixa { width: min(620px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 40px 80px -40px rgb(0 0 0 / 60%); border-top: 3px solid var(--ouro); }
.modal-caixa .rodape { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.aviso { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--verde-escuro); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 60%); }
.aviso.erro { background: var(--alerta); }
@media (max-width: 1100px) { .ficha { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .lateral { display: none; } .tela { padding: 18px 16px 50px; } .topo { padding: 12px 16px; } .rx-linha { grid-template-columns: 1fr; } }
@media print { .lateral, .topo { display: none; } }
.tab-dados td { padding: 6px 8px; border-bottom: 1px solid #e6eaea; vertical-align: top; }
.tab-dados td:first-child { white-space: nowrap; font-weight: 600; }