:root {
  /* Identidade visual Pet e Tutor */
  --fundo: #FBF7F0; --cartao: #fff; --tinta: #1D2A28; --discreto: #56625F; --linha: #E6DDD0;
  --marca: #1F6F6B; --marca-escura: #154E4B; --marca-suave: #E3F0EE; --destaque: #E8A33D; --destaque-texto: #8A5A12;
  --menu-fundo: #16302E; --menu-fundo-portal: #1A3F3C;
  --fonte-titulo: Nunito, "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --fonte-texto: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --ok: #16a34a; --ok-fundo: #dcfce7; --atencao: #d97706; --atencao-fundo: #fef3c7; --perigo: #dc2626; --perigo-fundo: #fee2e2; --info-fundo: #e0f2fe;
  --raio: 14px; --largura-menu: 232px;
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--fonte-texto); background: var(--fundo); color: var(--tinta); font-size: 15px; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 800; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: .5rem 0; }
a { color: var(--marca-escura); }
code { background: #eef2f7; padding: 1px 6px; border-radius: 6px; word-break: break-all; }
pre { margin: 0; }
.discreto { color: var(--discreto); }
.direita { text-align: right; }
.expande { flex: 1; }
.entre { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }

/* ---- Estrutura ---- */
.estrutura { display: grid; grid-template-columns: var(--largura-menu) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
.menu { background: var(--menu-fundo); color: #cbd5e1; display: flex; flex-direction: column; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; }
.portal .menu { background: var(--menu-fundo-portal); }
.marca { font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: .4rem; padding: .25rem .5rem 1rem; }
.marca-simbolo { width: 2rem; height: 2rem; flex: none; }
.marca small { color: #F0B95E; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.menu nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu nav a { color: #cbd5e1; text-decoration: none; padding: .65rem .75rem; border-radius: 10px; display: flex; gap: .6rem; align-items: center; }
.menu nav a:hover { background: rgba(255,255,255,.07); }
.menu nav a.active { background: var(--marca); color: #fff; }
.menu-rodape { padding: .5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; }
.conteudo { padding: 1.5rem 2rem 3rem; width: 100%; min-width: 0; }

.faixa { background: var(--atencao-fundo); border: 1px solid #fcd34d; color: #78350f; padding: .6rem .9rem; border-radius: 12px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* ---- Componentes ---- */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.cartao.cartao-ativo { border-color: var(--marca); box-shadow: 0 0 0 2px rgba(31,111,107,.2); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.duas-colunas.topo > * { min-width: 0; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cartoes.uma-coluna { grid-template-columns: 1fr; }
.cartoes .cartao { margin: 0; }
.par { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 20rem)); gap: .15rem .75rem; } /* campos lado a lado, sem esticar a tela toda */

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.indicador { background: var(--cartao); border: 1px solid var(--linha); border-left: 5px solid var(--marca); border-radius: var(--raio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.indicador small { color: var(--discreto); text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; }
.indicador b { font-size: 1.5rem; }
.indicador.ok { border-left-color: var(--ok); } .indicador.atencao { border-left-color: var(--atencao); } .indicador.perigo { border-left-color: var(--perigo); }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--discreto); margin-bottom: .7rem; }
label.marcacao { flex-direction: row; align-items: center; gap: .5rem; color: var(--tinta); font-size: .9rem; }
input, select { font: inherit; font-size: .9rem; padding: .38rem .6rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: var(--tinta); width: 100%; }
label > input, label > select { max-width: 22rem; } /* combos e campos compactos: não ocupam a largura inteira */
input[type=checkbox] { width: auto; }
input:focus, select:focus { outline: 2px solid rgba(31,111,107,.4); border-color: var(--marca); }
input.otp { font-size: 1.6rem; letter-spacing: .5em; text-align: center; }

.botao { font: inherit; border: 1px solid #cbd5e1; background: #fff; color: var(--tinta); padding: .55rem .95rem; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.botao:hover { background: #f1f5f9; }
.botao.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.botao.primario:hover { background: var(--marca-escura); }
.botao.fantasma { background: transparent; }
.botao.pequeno { padding: .3rem .65rem; font-size: .85rem; }
.botao.bloco { display: flex; width: 100%; margin-top: .5rem; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.menu .botao.fantasma { color: #cbd5e1; border-color: rgba(255,255,255,.25); }

.selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.selo.ok { background: var(--ok-fundo); color: #166534; } .selo.atencao { background: var(--atencao-fundo); color: #92400e; }
.selo.perigo { background: var(--perigo-fundo); color: #991b1b; } .selo.discreto { background: #e2e8f0; color: #475569; }
.alerta { padding: .6rem .8rem; border-radius: 10px; margin: .6rem 0; font-size: .9rem; }
.alerta.ok { background: var(--ok-fundo); color: #166534; } .alerta.perigo { background: var(--perigo-fundo); color: #991b1b; } .alerta.informacao { background: var(--info-fundo); color: #075985; }

.lista { display: flex; flex-direction: column; }
.item-lista { display: flex; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--linha); }
.item-lista:last-child { border-bottom: 0; }
.lista-cartoes { gap: .6rem; }
.fatura { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: .8rem .95rem; }
.fatura.selecionada { border-color: var(--marca); box-shadow: 0 0 0 2px rgba(31,111,107,.2); }
.lista-cartoes .item-lista { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: .8rem .95rem; }

.barra-filtros { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.barra-filtros label { margin: 0; } .barra-filtros .capacidade { margin-left: auto; font-size: .85rem; color: var(--discreto); }

/* ---- Gráficos ---- */
.barras { display: flex; gap: .75rem; align-items: flex-end; height: 190px; padding-top: .5rem; }
.barra-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; }
.barra-pilha { flex: 1; width: 100%; max-width: 52px; display: flex; flex-direction: column; justify-content: flex-end; }
.barra { width: 100%; border-radius: 4px 4px 0 0; min-height: 0; }
.barra.ok { background: var(--ok); } .barra.atencao { background: #fbbf24; }
.legenda { font-size: .8rem; color: var(--discreto); margin-top: .5rem; display: flex; gap: .5rem; align-items: center; }
.ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .ponto.ok { background: var(--ok); } .ponto.atencao { background: #fbbf24; }
.linha-horizontal { display: grid; grid-template-columns: 110px 1fr 100px; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: .35rem; }
.linha-horizontal b { text-align: right; }
.barra-horizontal { background: #e2e8f0; height: 8px; border-radius: 6px; overflow: hidden; } .barra-horizontal div { background: var(--marca); height: 100%; } .barra-horizontal.alternativa div { background: var(--destaque); }

/* ---- Vagas / Ocupação ---- */
.faixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: .75rem; }
.faixa-vaga { border-radius: 12px; padding: .6rem; display: flex; flex-direction: column; gap: 2px; }
.faixa-vaga small { font-size: .72rem; } .faixa-vaga b { font-size: 1.3rem; }
.faixa-vaga.ok, .ocupacao-celula.ok { background: var(--ok-fundo); color: #14532d; }
.faixa-vaga.atencao, .ocupacao-celula.atencao { background: var(--atencao-fundo); color: #78350f; }
.faixa-vaga.perigo, .ocupacao-celula.perigo { background: var(--perigo-fundo); color: #7f1d1d; }
.ocupacao { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 6px; }
.ocupacao-linha { display: grid; grid-template-columns: 110px repeat(4, 1fr); gap: 6px; align-items: stretch; cursor: pointer; border-radius: 12px; }
.ocupacao-linha.selecionada { outline: 2px solid var(--marca); outline-offset: 2px; }
.ocupacao-cabecalho { font-size: .75rem; text-transform: uppercase; color: var(--discreto); cursor: default; letter-spacing: .04em; padding: 0 .25rem; }
.ocupacao-data { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: .5rem; display: flex; flex-direction: column; justify-content: center; }
.ocupacao-celula { border-radius: 10px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.ocupacao-celula b { font-size: 1.05rem; } .ocupacao-rotulo { display: none; }
.medidor { height: 6px; background: rgba(0,0,0,.12); border-radius: 4px; overflow: hidden; } .medidor div { height: 100%; background: currentColor; opacity: .65; }

/* ---- Portal ---- */
.cartao-pet { display: flex; gap: .9rem; align-items: center; }
.cartao-pet img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; background: #e2e8f0; }
.cartao-pessoa { display: flex; flex-direction: column; gap: .75rem; justify-content: space-between; }
.cartao-pessoa.linha { flex-direction: row; align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .avatar.grande { width: 96px; height: 96px; margin-bottom: .6rem; }
.pilulas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pilula { font: inherit; border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: .4rem .95rem; cursor: pointer; }
.pilula.ativa { background: var(--marca); color: #fff; border-color: var(--marca); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; } .galeria img { width: 100%; border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; background: #e2e8f0; }
.codigo { background: #f1f5f9; border-radius: 10px; padding: .6rem .75rem; margin: .6rem 0; display: flex; flex-direction: column; gap: .2rem; } .codigo code { background: none; padding: 0; font-size: .85rem; }
.qrcode { display: flex; justify-content: center; } .qrcode svg { width: 220px; height: 220px; }
.termo { white-space: pre-wrap; font: inherit; background: #f8fafc; border: 1px solid var(--linha); border-radius: 10px; padding: .8rem; max-height: 260px; overflow: auto; margin-bottom: .75rem; }
.area-assinatura { width: 100%; max-width: 600px; height: 180px; border: 2px dashed #94a3b8; border-radius: 12px; background: #fff; touch-action: none; display: block; margin-bottom: .5rem; }
img.assinatura-imagem { max-height: 70px; background: #fff; border-radius: 8px; margin-top: .4rem; }

/* ---- Login ---- */
.login-fundo { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: var(--fundo); position: relative; overflow: hidden; }
.login-cartao { background: #fff; border: 1px solid var(--linha); border-radius: 20px; padding: 1.75rem; width: 100%; max-width: 410px; box-shadow: 0 12px 32px rgba(29,42,40,.07); position: relative; z-index: 1; }
.login-arte { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-arte svg { width: 100%; height: 100%; display: block; }
.arte-verde { fill: var(--marca-suave); } .arte-ambar { fill: #FBEBD2; } .arte-moeda { fill: #F2CB8C; }
.arte-barro { fill: #F5DCCF; } .arte-pontos { fill: var(--marca); opacity: .22; } .arte-fundo { fill: var(--fundo); }
.login-marca { text-align: center; } .login-logo { width: 100%; max-width: 260px; height: auto; display: inline-block; } .login-marca h1 { margin: 0; font-size: 1.6rem; } .login-marca p { font-size: .85rem; color: var(--discreto); margin: .2rem 0 1.2rem; }
.demonstracao { margin-top: 1rem; font-size: .8rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .atalho { font: inherit; font-size: .8rem; border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
.nota-rodape { text-align: center; font-size: .75rem; color: var(--discreto); margin: 1rem 0 0; }
.caixa-central { text-align: center; padding: 4rem 1rem; }

/* ---- Abas ---- */
.abas { display: flex; gap: .25rem; border-bottom: 2px solid var(--linha); margin: 0 0 1rem; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button { font: inherit; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: .65rem 1rem; cursor: pointer; color: var(--discreto); white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center; }
.abas button:hover { color: var(--tinta); }
.abas button.ativa { color: var(--marca-escura); border-bottom-color: var(--marca); font-weight: 600; }
.abas .contador { background: #e2e8f0; color: #475569; border-radius: 999px; font-size: .72rem; padding: 0 .5rem; }
.abas button.ativa .contador { background: var(--marca); color: #fff; }

/* ---- Celular ---- */
@media (max-width: 860px) {
  .estrutura { grid-template-columns: 1fr; padding-bottom: 68px; }
  .menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 20; flex-direction: row; padding: .25rem .4rem; align-items: center; }
  .marca, .menu-rodape .usuario-logado { display: none; }
  .menu nav { flex-direction: row; justify-content: space-around; }
  .menu nav a { flex-direction: column; gap: 0; padding: .35rem .5rem; font-size: .68rem; text-align: center; }
  .menu nav a i { font-style: normal; font-size: 1.15rem; }
  .menu-rodape { border: 0; padding: 0; }
  .conteudo { padding: 1rem 1rem 2rem; }
  h1 { font-size: 1.35rem; }
  .duas-colunas, .par { grid-template-columns: 1fr; }
  .barra-filtros .capacidade { margin-left: 0; width: 100%; }

  /* grade de ocupação vira cards empilhados */
  .ocupacao-cabecalho { display: none; }
  .ocupacao-linha { grid-template-columns: 1fr 1fr; background: var(--cartao); border: 1px solid var(--linha); padding: 8px; }
  .ocupacao-data { grid-column: 1 / -1; flex-direction: row; gap: .5rem; align-items: baseline; border: 0; padding: 0 .25rem; }
  .ocupacao-rotulo { display: block; font-weight: 600; }
  .linha-horizontal { grid-template-columns: 80px 1fr 90px; }
  .cartao-pessoa.linha { flex-wrap: wrap; }
}

/* ---- Plano de Daycare ---- */
.dias-semana { display: flex; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.dias-semana .pilula { min-width: 3.4rem; text-align: center; margin: 0; }
.resumo-plano { background: #f1f5f9; border-radius: 12px; padding: .7rem .9rem; margin: .5rem 0 .9rem; display: flex; flex-direction: column; gap: .15rem; }
.resumo-plano b { font-size: 1.3rem; }
.tabela-precos, .tabela { width: 100%; border-collapse: collapse; }
.tabela-precos th, .tabela-precos td, .tabela th, .tabela td { padding: .55rem .5rem; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela-precos th, .tabela th { font-size: .75rem; text-transform: uppercase; color: var(--discreto); letter-spacing: .04em; }
.tabela-precos td:last-child, .tabela-precos th:last-child { text-align: right; }
.tabela td.numero, .tabela th.numero { text-align: right; }
.contagem-dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.contagem-dias div { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: .5rem .7rem; display: flex; flex-direction: column; }
.contagem-dias b { font-size: 1.3rem; }

/* ---- Financeiro / Clínica ---- */
.rolagem { overflow-x: auto; }
.tabela input, .tabela select { padding: .35rem .5rem; min-width: 5.5rem; }
.tabela td.numero, .tabela th.numero { text-align: right; white-space: nowrap; }
.tabela tr.total td { font-weight: 700; border-top: 2px solid var(--linha); }
.positivo { color: #166534; } .negativo { color: #991b1b; }
.sala { margin-bottom: 1rem; }
.sala .medidor { margin: .4rem 0 .6rem; background: #e2e8f0; } .sala .medidor div { background: var(--marca); opacity: 1; }
.horario { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5.2rem; }
.formulario-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; align-items: end; }
.formulario-linha label { margin: 0; }
@media (max-width: 860px) { .menu nav { overflow-x: auto; justify-content: flex-start; } .menu nav a { min-width: 4.2rem; } }

/* ---- Menu lateral retrátil e grupos ---- */
.menu-topo { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.menu-topo .marca { padding-bottom: 1rem; }
.botao-menu { font: inherit; background: rgba(255,255,255,.08); color: #e2e8f0; border: 0; border-radius: 8px; width: 2rem; height: 2rem; cursor: pointer; flex: none; margin-bottom: .75rem; }
.botao-menu:hover { background: rgba(255,255,255,.18); }
.menu nav { overflow-y: visible; }
.menu nav i { font-style: normal; width: 1.4rem; text-align: center; flex: none; }
.grupo-menu { display: flex; flex-direction: column; }
.grupo-titulo { font: inherit; background: none; border: 0; color: #cbd5e1; padding: .65rem .75rem; border-radius: 10px; display: flex; gap: .6rem; align-items: center; cursor: pointer; text-align: left; width: 100%; }
.grupo-titulo i { font-style: normal; width: 1.4rem; text-align: center; flex: none; }
.grupo-titulo .texto { flex: 1; }
.grupo-titulo:hover { background: rgba(255,255,255,.07); }
.grupo-itens { display: none; flex-direction: column; gap: 2px; padding-left: .85rem; }
.grupo-menu.aberto .grupo-itens { display: flex; }
.grupo-menu.aberto .grupo-titulo { color: #fff; }

@media (min-width: 861px) {
  .estrutura.menu-recolhido { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .menu-recolhido .menu { padding-left: .5rem; padding-right: .5rem; }
  .menu-recolhido .menu-topo { flex-direction: column; align-items: center; }
  .menu-recolhido .marca span, .menu-recolhido .marca small, .menu-recolhido nav a span,
  .menu-recolhido .grupo-titulo .texto, .menu-recolhido .grupo-titulo .seta, .menu-recolhido .menu-rodape .usuario-logado { display: none; }
  .menu-recolhido .marca { padding-left: 0; padding-right: 0; }
  .menu-recolhido nav a, .menu-recolhido .grupo-titulo { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
  .menu-recolhido .grupo-itens { padding-left: 0; }
  .menu-recolhido .menu-rodape { justify-content: center; padding: .5rem 0; }
  .menu-recolhido .menu-rodape .botao { padding: .3rem .4rem; font-size: .7rem; }
}

/* Grupos do menu: os itens abrem sobrepostos à página (ao lado do menu), sem rolagem dentro do menu */
@media (min-width: 861px) {
  .menu { z-index: 40; }
  .menu nav { overflow: visible; }
  .grupo-menu { position: relative; }
  .grupo-itens { position: absolute; left: calc(100% + .4rem); top: 0; z-index: 45; min-width: 15rem; padding: .4rem; background: var(--menu-fundo); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
  .grupo-itens a { white-space: nowrap; }
  .grupo-fundo { position: fixed; inset: 0; z-index: 41; background: transparent; }
  .menu nav > a, .menu-topo, .menu-rodape, .grupo-titulo { position: relative; z-index: 42; }
  .grupo-menu.ativo .grupo-titulo { background: rgba(255,255,255,.09); color: #fff; }
  .grupo-menu.aberto .grupo-titulo { background: rgba(255,255,255,.14); }
  /* submenu dentro do painel (ex.: Cadastros › Veterinários): abre no próprio lugar, sem outro painel sobreposto */
  .grupo-menu.aninhado .grupo-itens { position: static; min-width: 0; padding: 0 0 .2rem .9rem; background: transparent; border: 0; box-shadow: none; }
  .grupo-menu.aninhado .grupo-titulo { width: 100%; }
  .menu-recolhido nav .grupo-itens a span, .menu-recolhido nav .grupo-itens .grupo-titulo .texto, .menu-recolhido nav .grupo-itens .grupo-titulo .seta { display: inline; }
  .menu-recolhido nav .grupo-itens .grupo-titulo { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; }
  .menu-recolhido nav .grupo-itens a { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; }
}

@media (max-width: 860px) {
  .grupo-fundo { display: none; }
  .botao-menu, .grupo-titulo { display: none; }
  .grupo-menu, .grupo-itens, .menu-topo { display: contents; }
  .menu nav { overflow-x: auto; overflow-y: hidden; }
  .menu nav a span { white-space: nowrap; }
}

.item-lista { flex-wrap: wrap; }
.editor-atendimento { flex-basis: 100%; background: #f8fafc; border: 1px solid var(--linha); border-radius: 12px; padding: .8rem 1rem; margin-top: .4rem; }

.abas-internas { margin-top: .25rem; }
.abas-internas button { padding: .5rem .85rem; font-size: .9rem; }
.resumo-lateral { position: sticky; top: 1rem; }
@media (max-width: 860px) { .resumo-lateral { position: static; } }

.opcoes-plano { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin: .25rem 0 .5rem; }
.opcao-plano { font: inherit; text-align: left; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: .6rem .75rem; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; }
.opcao-plano:hover { border-color: var(--marca); }
.opcao-plano.ativa { border-color: var(--marca); background: var(--marca-suave); box-shadow: 0 0 0 2px rgba(31,111,107,.2); }
.opcao-plano span { color: var(--marca-escura); font-weight: 600; }
.opcao-plano small { color: var(--discreto); }

/* ---- Assistente passo a passo ---- */
.etapas { list-style: none; display: flex; margin: 0 0 1.25rem; padding: 0; gap: 0; }
.etapa { flex: 1; position: relative; text-align: center; }
.etapa::before { content: ""; position: absolute; top: 1.05rem; left: -50%; width: 100%; height: 3px; background: var(--linha); z-index: 0; }
.etapa:first-child::before { display: none; }
.etapa.concluida::before, .etapa.atual::before { background: var(--marca); }
.etapa button { position: relative; z-index: 1; font: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--discreto); }
.etapa button:disabled { cursor: default; opacity: .6; }
.etapa .num { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; border: 2px solid var(--linha); display: inline-grid; place-items: center; font-weight: 700; }
.etapa.concluida .num { background: var(--marca); border-color: var(--marca); color: #fff; }
.etapa.atual .num { border-color: var(--marca); color: var(--marca-escura); box-shadow: 0 0 0 4px rgba(31,111,107,.18); }
.etapa.atual .titulo-etapa { color: var(--tinta); font-weight: 600; }
.titulo-etapa { font-size: .85rem; }
.acoes-etapas { justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.revisao { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.revisao dt { color: var(--discreto); } .revisao dd { margin: 0; font-weight: 600; }
.assistente { width: 100%; }
@media (max-width: 860px) { .etapa:not(.atual) .titulo-etapa { display: none; } }

.previa-arquivo { display: block; width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--linha); border-radius: 10px; background: #f8fafc; margin: .5rem 0; }
embed.previa-arquivo { height: 420px; }

.texto-modelo { white-space: pre-line; background: #f8fafc; border: 1px solid var(--linha); border-radius: 10px; padding: .5rem .7rem; margin: .4rem 0; font-size: .9rem; }
textarea { font: inherit; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: 10px; width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid rgba(31,111,107,.4); border-color: var(--marca); }

/* ---- Dicionário de dados ---- */
.dic { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
.dic-lista { max-height: calc(100vh - 7rem); overflow: auto; position: sticky; top: 1rem; padding: .75rem; }
.dic-lista h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discreto); margin: .8rem .25rem .3rem; }
.dic-item { display: flex; flex-direction: column; text-align: left; width: 100%; font: inherit; background: none; border: 1px solid transparent; border-radius: 10px; padding: .45rem .6rem; cursor: pointer; gap: .1rem; }
.dic-item:hover { background: #f1f5f9; }
.dic-item.selecionada { background: var(--marca-suave); border-color: var(--marca); }
.dic-item small { color: var(--discreto); }
.dic-detalhe .cartao h3 { margin-top: 0; }
.dic-campos td { vertical-align: top; font-size: .88rem; }
.dic-campos .nowrap, .nowrap { white-space: nowrap; }
.dic-campos .regra { color: var(--discreto); font-size: .8rem; margin-top: .2rem; }
.selo.azul { background: #dbeafe; color: #1e40af; }
.selo-botao { border: 0; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 600; }
.selo-botao:hover { filter: brightness(.95); }
.link-tabela { font: inherit; background: none; border: 0; color: var(--marca-escura); cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 860px) { .dic { grid-template-columns: 1fr; } .dic-lista { position: static; max-height: 16rem; } }

/* Perfis de acesso: grupos de telas */
.grupo-telas { border: 1px solid var(--borda, #e5e7eb); border-radius: 12px; padding: .5rem .9rem .75rem; margin: 0 0 .75rem; }
.grupo-telas legend { font-weight: 600; padding: 0 .4rem; }
.grupo-telas .marcacao { display: flex; gap: .5rem; align-items: baseline; margin: .3rem 0; }

/* Alternar visão lista / cards */
.alternar-visao { display: inline-flex; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; align-self: flex-end; }
.alternar-visao button { border: 0; background: transparent; padding: .5rem .85rem; cursor: pointer; font: inherit; color: var(--discreto); }
.alternar-visao button.ativa { background: var(--marca-escura); color: #fff; }
.tabela-rolagem { overflow-x: auto; }
.tabela td.acoes-linha { white-space: nowrap; text-align: right; display: table-cell; }
.tabela td.acoes-linha > * { margin-left: .35rem; }

/* ---- Login: campos retangulares, da largura do cartão (igual ao botão Entrar) ---- */
.login-cartao label > input, .login-cartao label > select { max-width: none; width: 100%; border-radius: 3px; padding: .6rem .7rem; font-size: 1rem; }

/* ---- Campos sempre retangulares (cantos quase retos) em todo o sistema ---- */
input, select, textarea, .tabela input, .tabela select { border-radius: 3px; }

/* ---- Versão do sistema (appsettings.json › Aplicacao:Versao), canto inferior direito de todas as telas ---- */
.versao-app { position: fixed; right: .6rem; bottom: .4rem; z-index: 50; font-size: .72rem; color: var(--discreto); background: rgba(255,255,255,.75); padding: 1px 6px; border-radius: 3px; pointer-events: none; user-select: none; }

/* ---- Botão flutuante de cadastro e modal ---- */
.fab-cadastro { position: fixed; right: 1.1rem; bottom: 2.3rem; z-index: 60; display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; background: var(--marca); color: #fff; border: 0; border-radius: 999px; padding: .75rem 1.2rem; cursor: pointer; box-shadow: 0 6px 18px rgba(21,78,75,.35); }
.fab-cadastro:hover { background: var(--marca-escura); }
.fab-cadastro span { font-size: 1.25rem; line-height: 1; }
.modal-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.5); display: grid; place-items: center; padding: 1rem; }
.modal-caixa { background: var(--cartao); border-radius: var(--raio); box-shadow: 0 20px 50px rgba(15,23,42,.35); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; padding: 1.1rem 1.25rem 1.25rem; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.modal-topo h2 { margin: 0; font-size: 1.2rem; }
.modal-rodape { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linha); }
.modal-caixa .par { grid-template-columns: 1fr 1fr; }
.modal-caixa label > input, .modal-caixa label > select, .modal-caixa label > textarea { max-width: none; }
textarea { border-radius: 3px; }
@media (max-width: 860px) { .fab-cadastro { bottom: 5.2rem; } .modal-caixa .par { grid-template-columns: 1fr; } }

/* ---- Mascote no menu lateral (homenagem) ---- */
.menu-mascote { display: flex; justify-content: center; padding: .75rem 0 1rem; flex: none; }
.menu-mascote img { width: 128px; height: 128px; border-radius: 50%; background: #24433F; object-fit: cover; object-position: center top; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.menu-recolhido .menu-mascote { display: none; }
@media (max-width: 860px) { .menu-mascote { display: none; } }
@media (max-height: 720px) { .menu-mascote img { width: 88px; height: 88px; } }

/* ---- Produtos aplicados e alerta de renovação ---- */
.topo-secao { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.topo-secao h2, .topo-secao h3 { margin: 0; }
.tabela tr.linha-encerrada td { color: var(--discreto); background: #f8fafc; }
.alerta-renovacao { border-left: 5px solid var(--destaque); }

/* ---- Daycare: presença e contador de dias do plano ---- */
.contador-daycare { border: 1px solid var(--linha); border-left: 5px solid var(--ok); border-radius: 12px; padding: .7rem .85rem; margin: .6rem 0; background: #fff; display: flex; flex-direction: column; gap: .4rem; }
.contador-daycare.zerado { border-left-color: var(--atencao); }
.contador-daycare.excedeu { border-left-color: var(--perigo); background: #fffafa; }
.cd-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
.cd-corpo { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cd-saldo { display: flex; flex-direction: column; align-items: center; min-width: 5.2rem; padding: .3rem .6rem; border-radius: 10px; background: var(--ok-fundo); color: #166534; }
.cd-saldo big { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.cd-saldo small { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.contador-daycare.zerado .cd-saldo { background: var(--atencao-fundo); color: #92400e; }
.contador-daycare.excedeu .cd-saldo { background: var(--perigo-fundo); color: #991b1b; }
.cd-numeros { display: flex; gap: 1rem; flex-wrap: wrap; }
.cd-numeros div { display: flex; flex-direction: column; }
.cd-numeros span { font-size: .7rem; color: var(--discreto); text-transform: uppercase; letter-spacing: .04em; }
.cd-numeros b { font-size: 1.3rem; }
.cd-barra { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.cd-barra div { height: 100%; background: var(--marca); }
.contador-daycare.excedeu .cd-barra div { background: var(--perigo); }
.cartao-presenca.veio { border-left: 5px solid var(--ok); }
.cartao-presenca.faltou { border-left: 5px solid var(--perigo); }

/* ---- Ocupação: hoje e amanhã em destaque, próximos dias compactos ---- */
.ocupacao-destaques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.ocupacao-destaque { margin: 0; }
.ocupacao-destaque h2 { margin: .3rem 0 .6rem; }
.ocupacao-destaque h2::first-letter { text-transform: uppercase; }
.ocupacao-destaque.selecionada { border-color: var(--marca); box-shadow: 0 0 0 2px rgba(31,111,107,.2); }
.ocupacao-faixas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ocupacao-celula.grande { padding: .6rem .75rem; font-size: .85rem; }
.ocupacao-celula.grande b { font-size: 1.5rem; }
.ocupacao-titulo { margin: 0 0 .5rem; }
.ocupacao-compacta-lista { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1rem; }
.ocupacao-compacta { display: grid; grid-template-columns: 96px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: center; cursor: pointer; padding: 3px 6px; border-radius: 10px; background: var(--cartao); border: 1px solid var(--linha); }
.ocupacao-compacta:hover { border-color: var(--marca); }
.ocupacao-compacta.selecionada { outline: 2px solid var(--marca); outline-offset: 1px; }
.oc-data { white-space: nowrap; }
.oc-data small { color: var(--discreto); text-transform: capitalize; }
.oc-chip { border-radius: 8px; padding: .25rem .5rem; font-size: .8rem; white-space: nowrap; display: flex; align-items: baseline; gap: .3rem; justify-content: center; }
.oc-chip.ok { background: var(--ok-fundo); color: #14532d; }
.oc-chip.atencao { background: var(--atencao-fundo); color: #78350f; }
.oc-chip.perigo { background: var(--perigo-fundo); color: #7f1d1d; }
.oc-chip small { opacity: .75; }
@media (max-width: 860px) {
  .ocupacao-destaques { grid-template-columns: 1fr; }
  .ocupacao-compacta { grid-template-columns: 1fr 1fr; }
  .oc-data { grid-column: 1 / -1; }
}

.dinheiro { text-align: right; font-variant-numeric: tabular-nums; }

.construcao { text-align: center; } .construcao h2 { margin: .4rem 0; } .construcao p { color: var(--discreto); margin: .3rem 0; } .construcao-mascote { width: 150px; max-width: 60%; margin: 1rem auto .5rem; display: block; }