/* =========================================================
   Sistema EJC Jaguaribe - tema.css
   Camada de acabamento visual (moderno): botões, cartões, campos, barra
   superior, animações e layout de computador. Carregado DEPOIS de
   componentes.css, por isso sobrepõe o visual sem mexer na estrutura.
   ========================================================= */
:root {
  --raio: 14px;
  --raio-grande: 20px;
  --sombra-1: 0 1px 2px rgba(42, 21, 34, .06), 0 2px 8px rgba(11, 116, 128, .06);
  --sombra-2: 0 4px 14px rgba(42, 21, 34, .08), 0 10px 28px rgba(11, 116, 128, .10);
  --sombra-botao: 0 2px 6px rgba(11, 116, 128, .28);
  --gradiente-marca: linear-gradient(135deg, #0b7480 0%, #159aa6 100%);
  --anel-foco: 0 0 0 3px rgba(21, 154, 166, .30);
  --cor-fundo: #f6f1e7;
}

body {
  background:
    radial-gradient(900px 420px at 100% -80px, rgba(21, 154, 166, .13), transparent 70%),
    radial-gradient(700px 360px at -10% 0, rgba(235, 104, 52, .07), transparent 70%),
    var(--cor-fundo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ----- Barra superior ----- */
.marca-topo {
  background: #08545d;
  font-size: 12px;
  letter-spacing: 3px;
  padding: 6px 16px;
}
.topo {
  background: var(--gradiente-marca);
  box-shadow: 0 4px 18px rgba(11, 116, 128, .25);
  padding: 14px 16px;
}
.topo__titulo { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.topo .botao--texto {
  color: #fff !important;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 38px;
  font-size: 14px;
  backdrop-filter: blur(4px);
}
.topo .botao--texto:hover { background: rgba(255, 255, 255, .28); box-shadow: none; transform: none; }

/* ----- Botões ----- */
.botao {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .15px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.botao:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.botao--primario {
  background: var(--gradiente-marca);
  box-shadow: var(--sombra-botao);
}
.botao--primario:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 116, 128, .34); filter: brightness(1.05); }
.botao--secundario {
  background: #fff;
  border: 1.5px solid rgba(11, 116, 128, .35);
  box-shadow: var(--sombra-1);
}
.botao--secundario:hover:not(:disabled) { background: #eef8f9; border-color: var(--cor-primaria); transform: translateY(-1px); }
.botao--perigo {
  background: linear-gradient(135deg, #b3261e, #d4453b);
  box-shadow: 0 2px 6px rgba(179, 38, 30, .28);
}
.botao--perigo:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.botao--texto:hover:not(:disabled) { background: rgba(11, 116, 128, .08); border-radius: 12px; }
.botao:disabled { filter: grayscale(.4); }

/* ----- Cartões ----- */
.card {
  border: 1px solid rgba(231, 220, 201, .8);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-1);
  padding: 18px;
}
.card > h2 { font-size: 17px; letter-spacing: .1px; }

/* formulário solto (páginas públicas e ficha) vira cartão */
.container > .formulario {
  background: var(--cor-superficie);
  border: 1px solid rgba(231, 220, 201, .8);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-2);
  padding: 20px;
}

/* ----- Campos ----- */
.campo input, .campo select, .campo textarea {
  border: 1.5px solid #e2d6c0;
  border-radius: 12px;
  background: #fffdf9;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #c9b99c; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--cor-primaria-clara);
  background: #fff;
  box-shadow: var(--anel-foco);
}
.campo label { color: #4a3341; }
.busca input, .busca select {
  border: 1.5px solid #e2d6c0; border-radius: 12px; background: #fff;
  padding: 10px 14px; font-size: 16px; min-height: var(--espaco-toque);
}
.busca input:focus, .busca select:focus { outline: none; border-color: var(--cor-primaria-clara); box-shadow: var(--anel-foco); }

/* ----- Indicadores ----- */
.indicador {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, .05);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.indicador::after {
  content: "";
  position: absolute; right: -22px; top: -22px; width: 84px; height: 84px; border-radius: 50%;
  background: currentColor; opacity: .07;
}
.indicador > span { opacity: .85; }
.indicador__valor { font-size: 28px; letter-spacing: -.5px; }
a.indicador:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.indicador--azul { color: #174ea6; background: linear-gradient(135deg, #eef4ff, #e1ecff); }
.indicador--laranja { color: #a84c00; background: linear-gradient(135deg, #fff6ea, #ffead2); }
.indicador--verde { color: #18733a; background: linear-gradient(135deg, #eefaf1, #dcf3e3); }
.indicador--roxo { color: #6236a0; background: linear-gradient(135deg, #f6f0ff, #ebe1fd); }
.indicador > span, .indicador__valor { color: inherit; }

/* ----- Acesso rápido: azulejos ----- */
.card--acessos .botao--acesso {
  background: #fff;
  border: 1px solid #e7dcc9;
  box-shadow: var(--sombra-1);
  border-radius: 16px;
  color: var(--cor-texto);
}
.card--acessos .botao--acesso:hover { border-color: rgba(11, 116, 128, .5); background: #f4fbfc; transform: translateY(-2px); box-shadow: var(--sombra-2); }
.card--acessos .botao__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(11, 116, 128, .10);
  font-size: 22px;
}
.card--acessos .botao--primario { background: var(--gradiente-marca); color: #fff; border: 0; }
.card--acessos .botao--primario .botao__icone { background: rgba(255, 255, 255, .22); }

/* ----- Listas ----- */
.registro {
  border-radius: 14px;
  border-color: rgba(231, 220, 201, .9);
  box-shadow: var(--sombra-1);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.registro:hover, button.registro:hover { border-color: rgba(11, 116, 128, .45); box-shadow: var(--sombra-2); }
.lista-registros--compacta { border-radius: 16px; box-shadow: var(--sombra-1); background: #fff; }
.registro--compacto { box-shadow: none; border-radius: 0; }
.registro--compacto:hover { background: #f4fbfc; }
.registro__acao { color: var(--cor-primaria); }
.selo, .etiqueta { letter-spacing: .1px; }
.frente { border-radius: 16px; background: #fffdf9; box-shadow: var(--sombra-1); }
.grafico-barras-h__barra { border-radius: 0 999px 999px 0; background: linear-gradient(90deg, #2a78d6, #4c97ee); }
.grafico-colunas__barra { background: linear-gradient(180deg, #4c97ee, #2a78d6); }
.grafico-colunas__item--destaque .grafico-colunas__barra { background: linear-gradient(180deg, #f08a5e, #eb6834); }
.plantao { border-radius: 14px; }

/* ----- Modal e toast ----- */
.modal-fundo { background: rgba(26, 12, 22, .5); backdrop-filter: blur(3px); animation: ejc-fade .18s ease; }
.modal { border-radius: 22px 22px 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, .25); animation: ejc-sobe .22s ease; }
.toast { border-radius: 14px; box-shadow: var(--sombra-2); animation: ejc-sobe .2s ease; }
@keyframes ejc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ejc-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.container > * { animation: ejc-sobe .35s ease both; }
.container > *:nth-child(2) { animation-delay: .04s; }
.container > *:nth-child(3) { animation-delay: .08s; }
.container > *:nth-child(4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----- Barra de ação fixa ----- */
.barra-rodape { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: 0 -4px 18px rgba(0, 0, 0, .06); }

/* ----- Login: cartão central ----- */
body:has(#form-login) {
  background:
    radial-gradient(800px 500px at 50% -120px, rgba(21, 154, 166, .28), transparent 70%),
    var(--cor-fundo);
}
body:has(#form-login) main.container { padding-top: 7vh !important; }
body:has(#form-login) h1 { font-size: 30px; font-weight: 800; letter-spacing: 1px; }
body:has(#form-login) h1::before {
  content: "EJC"; display: block; margin: 0 auto 14px; width: 68px; height: 68px; line-height: 68px;
  border-radius: 20px; background: var(--gradiente-marca); color: #fff; font-size: 22px; letter-spacing: 1px;
  box-shadow: var(--sombra-botao);
}
body:has(#form-login) .formulario { padding: 24px; }

/* ----- Rodapé ----- */
.rodape { opacity: .8; }

/* =========================================================
   COMPUTADOR / TELAS GRANDES
   ========================================================= */
@media (min-width: 1024px) {
  body { font-size: 15px; }
  .marca-topo, .topo {
    padding-left: max(32px, calc((100vw - 1280px) / 2));
    padding-right: max(32px, calc((100vw - 1280px) / 2));
  }
  .topo { position: sticky; top: 0; min-height: 68px; }
  .topo__titulo { font-size: 22px; }
  .container { max-width: 1280px; padding: 32px; }
  .container--ficha { max-width: 860px; }
  .container > .formulario { padding: 28px; }
  .card { padding: 24px; margin-bottom: 20px; }
  .card > h2 { font-size: 18px; }
  .indicador { min-height: 118px; padding: 20px; }
  .indicador__valor { font-size: 34px; }
  .barra-rodape {
    padding-left: max(32px, calc((100vw - 1280px) / 2));
    padding-right: max(32px, calc((100vw - 1280px) / 2));
  }
  .modal-fundo { align-items: center; }
  .modal { border-radius: 22px; max-width: 620px; box-shadow: var(--sombra-2); }
  .lista-registros--tabela .registro { box-shadow: none; }
  .lista-registros--tabela .registro:hover { background: #f4fbfc; }
}

/* Painel inicial em grade de 12 colunas (monitor) */
@media (min-width: 1100px) {
  .container--painel {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  .container--painel > * { margin: 0 !important; grid-column: 1 / -1; min-width: 0; }
  .container--painel > .dashboard-indicadores--painel { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 0; }
  .container--painel > #card-aniversarios { grid-column: span 5; }
  .container--painel > #card-equipe-dirigente { grid-column: span 7; }
  .container--painel > .dashboard-graficos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 0; }
  .container--painel .card--acessos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .container--painel .card--acessos .botao--acesso { min-height: 104px; }
  .container--painel #frentes-painel .frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador { min-height: 112px; padding: 16px; }
  .indicador > span { font-size: 12.5px; }
  .indicador__valor { font-size: 30px; }
}
@media (min-width: 1500px) {
  .container--painel .card--acessos { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.aviso-crachas { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--raio); background: var(--cor-alerta-fundo); color: var(--cor-alerta); font-size: 13px; }
.aviso-crachas:empty { display: none; }

/* =========================================================
   AJUSTES PARA CELULAR (nada pode passar da largura da tela)
   ========================================================= */
/* Linha de busca/filtros: quebra em várias linhas em vez de estourar. */
.busca { flex-wrap: wrap; }
.busca > * { min-width: 0; }
.busca input { flex: 1 1 100%; }
.busca select { flex: 1 1 140px; max-width: 100%; }
@media (min-width: 700px) { .busca input { flex: 2 1 260px; } }

/* Topo: título encolhe com reticências; botões nunca encolhem. */
.topo__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo__acoes { flex-shrink: 0; }

/* Barra fixa de ações: botões quebram de linha se faltar espaço. */
.barra-rodape { flex-wrap: wrap; }
.barra-rodape .botao { min-width: 0; }

/* Textos e peças longas nunca alargam a página. */
.registro, .registro__linha, .card, .campo, .frente { min-width: 0; }
.registro__valor, .registro__resumo-titulo, .frente__pessoa, .aniversario-linha, .linha-acesso, .membro-selecao__dados { overflow-wrap: anywhere; }
.container, main, form, .card { max-width: 100%; }
select, input, textarea, button { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }
.grafico-barras-h__linha { grid-template-columns: minmax(60px, 34%) minmax(0, 1fr) auto; }
.indicador > span { overflow-wrap: anywhere; }
.card > div > h2, .card > div > h3 { min-width: 0; overflow-wrap: anywhere; }

/* Acabamento mobile: data/etiqueta à direita nunca quebra; títulos dos indicadores compactos. */
.aniversario-linha > span:last-child, .linha-acesso > .etiqueta { white-space: nowrap; flex-shrink: 0; overflow-wrap: normal; }
.aniversario-linha > span:first-child { min-width: 0; }
.indicador > span { overflow-wrap: break-word; line-height: 1.3; font-size: 12.5px; }
@media (min-width: 1100px) { .indicador > span { font-size: 12.5px; } }

/* Mensagem de parabéns editável (painel) */
.mensagem-label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.mensagem-parabens { width: 100%; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px; border: 1.5px solid #e2d6c0; border-radius: 12px; background: #fffdf9; resize: vertical; }
.mensagem-parabens:focus { outline: none; border-color: var(--cor-primaria-clara); box-shadow: var(--anel-foco); }