/* ===========================================================================
   Camada 29 — Agenda & Vagas (Administração Global)
   Escopada em #adm-agenda-unidades. Existe porque a folha da aba tem
   `#adm-tab-agenda > div > div { background:glass !important; border; shadow }`,
   que transforma qualquer neto direto em cartão — foi isso que empilhou molduras
   quando o painel foi montado com divs. Aqui a estrutura é declarada de uma vez,
   com um cartão só por região e o resto respirando dentro dele.
   Tokens do tema Aurora: --brand, --glass, --glass-brd, --line, --ink, --ink-soft.
   =========================================================================== */

#adm-agenda-unidades {
  display: block;
  /* escala de 4 px: tudo nesta tela sai daqui */
  --aga-1: 4px; --aga-2: 8px; --aga-3: 12px; --aga-4: 16px; --aga-5: 20px; --aga-6: 24px;
}

/* ── molduras acidentais ───────────────────────────────────────────────────
   Tres folhas antigas transformam QUALQUER neto direto da aba em cartao:
   10-capacitacao-intranet.css:1267 (`#adm-tab-agenda > div > div`, #fff),
   aurora-legacy-reset.css:311 (a mesma coisa em vidro) e o <style> de
   views/admin.html:524 — este ultimo ja abre excecao para este painel
   (`:not(#adm-agenda-unidades)`), sinal de que a moldura aqui nao e desejada.
   Como as duas primeiras nao abrem, cada bloco do painel (cabecalho, faixa de
   numeros, barra de acoes, corpo) ganhava uma moldura SEM padding: o texto
   encostava na borda e as regioes viravam caixas dentro de caixas.
   Os cartoes de verdade desta tela sao .aga-card, .aga-kpi e .aga-import — e
   por isso .aga-card fica de fora desta regra. */
#adm-tab-agenda > #adm-agenda-unidades > *:not(.aga-card) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── cabeçalho ─────────────────────────────────────────────────────────── */
#adm-agenda-unidades .aga-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--aga-4); flex-wrap: wrap; margin-bottom: var(--aga-5);
}
#adm-agenda-unidades .aga-head h2 {
  margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.02em;
}
#adm-agenda-unidades .aga-head p {
  margin: var(--aga-1) 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
}
#adm-agenda-unidades .aga-ctl { display: flex; align-items: center; gap: var(--aga-2); flex-wrap: wrap; }
/* ANTIDOTO do legado css/04-utils-views-units.css:221 —
   `input, select, textarea { width:100%; margin:4px 0 14px }`, sem escopo nenhum.
   Era ele que esticava o seletor de unidade e o campo de mes para a largura
   inteira da coluna: cada controle virava uma LINHA, o cabecalho crescia para
   ~200px e, com `align-items:flex-end`, o titulo era empurrado para o rodape do
   cartao — o buraco branco por cima de "Agenda & Vagas". Os controles voltam a
   ter largura de conteudo e a caber numa linha so. */
#adm-agenda-unidades input,
#adm-agenda-unidades select,
#adm-agenda-unidades textarea { margin: 0; }
#adm-agenda-unidades .aga-ctl select,
#adm-agenda-unidades .aga-ctl input[type="month"] {
  min-height: 38px; padding: 0 var(--aga-3); border-radius: 10px;
  border: 1px solid var(--glass-brd); background: var(--glass); color: var(--ink);
  font-size: 13px; font-weight: 600;
  width: auto; min-width: 0; flex: 0 0 auto; margin: 0; box-sizing: border-box;
}
/* o rotulo da unidade e curto ("Regulacao", "Policlinica"): 190px cobre sem esticar */
#adm-agenda-unidades .aga-ctl select { min-width: 190px; max-width: 280px; }
#adm-agenda-unidades .aga-ctl input[type="month"] { width: 168px; }
#adm-agenda-unidades .aga-nav {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--glass-brd); border-radius: 10px; background: var(--glass); padding: 2px;
}
#adm-agenda-unidades .aga-nav button {
  width: 32px; min-height: 32px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; color: var(--ink); font-size: 15px; line-height: 1;
}
#adm-agenda-unidades .aga-nav button:hover { background: rgba(92,111,58,.14); }

/* ── faixa de números ──────────────────────────────────────────────────── */
#adm-agenda-unidades .aga-kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--aga-3); margin-bottom: var(--aga-5);
}
#adm-agenda-unidades .aga-kpi {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 14px;
  padding: var(--aga-4); display: flex; flex-direction: column; gap: var(--aga-2);
}
#adm-agenda-unidades .aga-kpi .rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft);
}
#adm-agenda-unidades .aga-kpi .val {
  font-size: 24px; font-weight: 750; letter-spacing: -.03em; line-height: 1;
}
#adm-agenda-unidades .aga-kpi .val em {
  font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-left: 4px;
}
#adm-agenda-unidades .aga-kpi .barra {
  height: 6px; border-radius: 6px; background: rgba(77,90,54,.14); overflow: hidden; margin-top: var(--aga-1);
}
#adm-agenda-unidades .aga-kpi .barra i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand), #7c974d);
}

/* ── barra de ações ────────────────────────────────────────────────────── */
#adm-agenda-unidades .aga-acoes {
  display: flex; align-items: center; gap: var(--aga-2); flex-wrap: wrap; margin-bottom: var(--aga-5);
}
/* duas barras seguidas (ações + filtro de especialidade) ficam mais próximas */
#adm-agenda-unidades .aga-acoes + .aga-acoes { margin-top: calc(var(--aga-3) * -1); }

/* ── corpo: calendário | dia ───────────────────────────────────────────── */
#adm-agenda-unidades .aga-corpo {
  display: grid; grid-template-columns: minmax(380px, 0.85fr) minmax(0, 1fr);
  gap: var(--aga-4); align-items: start;
}
@media (max-width: 1280px) {
  #adm-agenda-unidades .aga-corpo { grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  #adm-agenda-unidades .aga-corpo { grid-template-columns: 1fr; }
  #adm-agenda-unidades .aga-kpis { grid-template-columns: 1fr; gap: var(--aga-2); }
  #adm-agenda-unidades .aga-head { margin-bottom: var(--aga-4); }
  #adm-agenda-unidades .aga-item { grid-template-columns: 60px minmax(0, 1fr); row-gap: var(--aga-2); }
  #adm-agenda-unidades .aga-acoes-item { grid-column: 1 / -1; justify-content: flex-end; }
}

#adm-agenda-unidades .aga-card {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 16px;
  overflow: hidden;
}
#adm-agenda-unidades .aga-card > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--aga-3);
  padding: var(--aga-3) var(--aga-4); border-bottom: 1px solid var(--line); min-height: 54px;
}
#adm-agenda-unidades .aga-card > header h3 {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
}
#adm-agenda-unidades .aga-card > header .sub {
  display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px;
}

/* calendário */
#adm-agenda-unidades .aga-semana,
#adm-agenda-unidades .aga-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
#adm-agenda-unidades .aga-semana { padding: var(--aga-4) var(--aga-4) var(--aga-1); }
#adm-agenda-unidades .aga-semana span {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); padding-bottom: 2px;
}
#adm-agenda-unidades .aga-dias { padding: 0 var(--aga-4) var(--aga-4); }
#adm-agenda-unidades .aga-dia {
  position: relative; min-height: 62px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; padding: 4px 2px; transition: background .15s, border-color .15s, transform .15s;
}
#adm-agenda-unidades .aga-dia .num { font-size: 15.5px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
#adm-agenda-unidades .aga-dia .qtd { font-size: 11px; font-weight: 650; color: var(--ink-soft); }
#adm-agenda-unidades .aga-dia.sel .num { font-size: 16px; }
#adm-agenda-unidades .aga-dia.vazio { cursor: default; opacity: .35; }
#adm-agenda-unidades .aga-dia.tem { background: rgba(92,111,58,.10); border-color: rgba(92,111,58,.20); }
#adm-agenda-unidades .aga-dia.tem:hover { transform: translateY(-1px); background: rgba(92,111,58,.16); }
#adm-agenda-unidades .aga-dia.hoje { box-shadow: inset 0 0 0 1.5px var(--brand); }
#adm-agenda-unidades .aga-dia.sel {
  background: linear-gradient(135deg, var(--brand), #64793f); border-color: transparent; color: #fff;
}
#adm-agenda-unidades .aga-dia.sel .qtd { color: rgba(255,255,255,.85); }
#adm-agenda-unidades .aga-legenda {
  display: flex; gap: var(--aga-4); flex-wrap: wrap;
  padding: var(--aga-3) var(--aga-4); border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-soft);
}
#adm-agenda-unidades .aga-legenda span { display: inline-flex; align-items: center; gap: 4px; }
#adm-agenda-unidades .aga-legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* lista do dia */
#adm-agenda-unidades .aga-lista { display: flex; flex-direction: column; }
#adm-agenda-unidades .aga-item {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: var(--aga-3); align-items: center;
  padding: var(--aga-3) var(--aga-4); border-bottom: 1px solid var(--line);
}
#adm-agenda-unidades .aga-item:last-child { border-bottom: 0; }
#adm-agenda-unidades .aga-item:hover { background: rgba(92,111,58,.05); }
#adm-agenda-unidades .aga-hora {
  font-size: 15px; font-weight: 750; letter-spacing: -.02em; text-align: center;
  background: rgba(92,111,58,.10); border-radius: 10px; padding: var(--aga-2) var(--aga-1);
}
#adm-agenda-unidades .aga-quem { min-width: 0; }
#adm-agenda-unidades .aga-quem strong {
  display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#adm-agenda-unidades .aga-meta {
  display: flex; align-items: center; gap: var(--aga-2); flex-wrap: wrap; margin-top: 5px;
  font-size: 11.5px; color: var(--ink-soft);
}
#adm-agenda-unidades .aga-esp {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand); background: rgba(92,111,58,.12); border-radius: 20px; padding: 2px 9px;
}
#adm-agenda-unidades .aga-ocup { display: flex; align-items: center; gap: 8px; }
#adm-agenda-unidades .aga-ocup .barra {
  width: 74px; height: 5px; border-radius: 5px; background: rgba(77,90,54,.14); overflow: hidden;
}
#adm-agenda-unidades .aga-ocup .barra i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--brand), #7c974d);
}
#adm-agenda-unidades .aga-ocup.cheio .barra i { background: linear-gradient(90deg, #e23a6d, #ff8a5e); }
#adm-agenda-unidades .aga-acoes-item { display: flex; flex-wrap: wrap; gap: var(--aga-2); }

/* vazio */
#adm-agenda-unidades .aga-vazio {
  padding: 40px var(--aga-5); text-align: center; color: var(--ink-soft);
  font-size: 13px; line-height: 1.7;
}
#adm-agenda-unidades .aga-vazio strong {
  display: block; color: var(--ink); font-size: 14.5px; font-weight: 700; margin-bottom: var(--aga-2);
}

/* importação do Kanban */
#adm-agenda-unidades .aga-import { margin-bottom: var(--aga-5); }
#adm-agenda-unidades .aga-import table { width: 100%; border-collapse: collapse; font-size: 13px; }
#adm-agenda-unidades .aga-import th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: var(--aga-3) var(--aga-4); border-bottom: 1px solid var(--line);
}
#adm-agenda-unidades .aga-import td { padding: var(--aga-3) var(--aga-4); border-bottom: 1px solid var(--line); }
#adm-agenda-unidades .aga-import tr:last-child td { border-bottom: 0; }
#adm-agenda-unidades .aga-import .rodape {
  display: flex; align-items: center; gap: var(--aga-3);
  padding: var(--aga-3) var(--aga-4); border-top: 1px solid var(--line);
}

/* tema escuro: os tokens já viram do tema; só o realce precisa de ajuste */
body.theme-dark #adm-agenda-unidades .aga-dia.tem { background: rgba(157,190,99,.14); border-color: rgba(157,190,99,.24); }
body.theme-dark #adm-agenda-unidades .aga-hora { background: rgba(157,190,99,.12); }
body.theme-dark #adm-agenda-unidades .aga-esp { color: #b8d47a; background: rgba(157,190,99,.14); }


/* ── criar vagas: gerador e linhas de horário ──────────────────────────── */
#reg-modal .aga-gerador {
  border: 1px dashed var(--glass-brd, rgba(0,0,0,.14)); border-radius: 12px;
  padding: 14px 16px; margin: 4px 0 16px;
}
#reg-modal .aga-gerador .rot {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .7; margin-bottom: 10px;
}
#reg-modal .aga-gerador .linha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px;
}
#reg-modal .aga-gerador label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
#reg-modal .aga-gerador input[type="time"] { width: 108px; }
#reg-modal .aga-gerador input[type="number"] { width: 74px; }

#reg-modal .aga-horas {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 260px; overflow: auto; padding: 2px 2px 2px 0;
}
#reg-modal .aga-hr {
  display: grid; grid-template-columns: 120px 92px 1fr auto; gap: 8px; align-items: center;
}
#reg-modal .aga-hr .un { font-size: 12px; opacity: .7; }
#reg-modal .aga-hr .rm { line-height: 1; padding: 4px 10px; font-size: 15px; }


/* restrição da vaga (idade/sexo) — âmbar, para distinguir da especialidade */
#adm-agenda-unidades .aga-restr {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #a86a12; background: rgba(199,122,18,.14); border-radius: 20px; padding: 2px 9px;
}
body.theme-dark #adm-agenda-unidades .aga-restr { color: #e8b45f; background: rgba(232,169,63,.16); }


/* ===========================================================================
   Espaçamento dentro do modal (Criar vagas / Editar horário).
   O formulário junta blocos de origens diferentes — grade do tema, chips, o
   gerador, as linhas de horário e a barra de botões — e cada um trazia o próprio
   respiro. Aqui todos passam a seguir a mesma escala da aba.
   =========================================================================== */
#reg-modal #aga-form,
#reg-modal .reg-modal-body > .au-sec {
  --aga-m-1: 6px; --aga-m-2: 12px; --aga-m-3: 16px; --aga-m-4: 20px;
  display: flex; flex-direction: column; gap: var(--aga-m-4);
}

/* blocos de campos: 2 colunas com respiro igual nos dois eixos */
#reg-modal #aga-form .au-form,
#reg-modal .reg-modal-body > .au-sec .au-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--aga-m-2) var(--aga-m-3); margin: 0;
}
@media (max-width: 640px) {
  #reg-modal #aga-form .au-form,
  #reg-modal .reg-modal-body > .au-sec .au-form { grid-template-columns: 1fr; }
}

/* campo: rótulo colado no controle, dica logo abaixo */
#reg-modal #aga-form .au-fld,
#reg-modal .reg-modal-body > .au-sec .au-fld { gap: var(--aga-m-1); margin: 0; }
#reg-modal #aga-form .au-fld > label,
#reg-modal .reg-modal-body > .au-sec .au-fld > label { margin: 0; line-height: 1.2; }
#reg-modal #aga-form .au-hint,
#reg-modal .reg-modal-body > .au-sec .au-hint { margin-top: 2px; line-height: 1.4; }
#reg-modal #aga-form input,
#reg-modal #aga-form select,
#reg-modal .reg-modal-body > .au-sec input,
#reg-modal .reg-modal-body > .au-sec select { min-height: 40px; }

/* seletor de modo: separado do que vem antes e depois */
#reg-modal #aga-modos { gap: var(--aga-m-1); margin: 0; }

/* a barra de botões fecha o formulário */
#reg-modal #aga-form > .au-toolbar,
#reg-modal .reg-modal-body > .au-sec > .au-toolbar {
  display: flex;
  flex-wrap: wrap; justify-content: flex-end; gap: var(--aga-m-2);
  padding-top: var(--aga-m-3); margin: 0; border-top: 1px solid var(--line, rgba(0,0,0,.1));
}

/* o corpo do modal em si */
#reg-modal .reg-modal-body { padding-top: 4px; }
#reg-modal .reg-modal-head { margin-bottom: 14px; }


/* ===========================================================================
   Cor dentro do modal. O formulário era chapado: campo, fundo e grupo tinham o
   mesmo tom, então nada guiava o olho. As cores abaixo saem todas do verde do
   tema (--brand); nenhuma paleta nova entra aqui.
   =========================================================================== */
#reg-modal .reg-modal-body {
  --aga-campo-fundo: #fff;
  --aga-campo-borda: rgba(92,111,58,.28);
  --aga-campo-borda-hover: rgba(92,111,58,.38);
  --aga-campo-foco: rgba(92,111,58,.18);
  --aga-grupo-fundo: rgba(92,111,58,.05);
}
body.theme-dark #reg-modal .reg-modal-body,
#reg-modal[data-theme="dark"] .reg-modal-body {
  --aga-campo-fundo: rgba(255,255,255,.09);
  --aga-campo-borda: rgba(157,190,99,.30);
  --aga-campo-borda-hover: rgba(157,190,99,.45);
  --aga-campo-foco: rgba(157,190,99,.22);
  --aga-grupo-fundo: rgba(157,190,99,.06);
}

/* o campo em si */
#reg-modal #aga-form input,
#reg-modal #aga-form select,
#reg-modal .reg-modal-body > .au-sec input,
#reg-modal .reg-modal-body > .au-sec select {
  background: var(--aga-campo-fundo);
  border: 1px solid var(--aga-campo-borda);
  border-radius: 10px; padding: 0 12px; color: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#reg-modal #aga-form input:hover:not(:focus),
#reg-modal #aga-form select:hover:not(:focus),
#reg-modal .reg-modal-body > .au-sec input:hover:not(:focus),
#reg-modal .reg-modal-body > .au-sec select:hover:not(:focus) {
  border-color: var(--aga-campo-borda-hover);
}
#reg-modal #aga-form input:focus,
#reg-modal #aga-form select:focus,
#reg-modal .reg-modal-body > .au-sec input:focus,
#reg-modal .reg-modal-body > .au-sec select:focus {
  outline: none; border-color: var(--brand, #5c6f3a);
  box-shadow: 0 0 0 3px var(--aga-campo-foco);
  background: var(--aga-campo-fundo);
}
#reg-modal #aga-form input::placeholder,
#reg-modal .reg-modal-body > .au-sec input::placeholder { opacity: .55; }

/* rótulo: peso e cor próprios, para não competir com o valor digitado */
#reg-modal #aga-form .au-fld > label,
#reg-modal .reg-modal-body > .au-sec .au-fld > label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft, #6b7355);
}

/* grupo da unidade executante: painel próprio, separado dos campos da vaga */
#reg-modal #aga-form .aga-so-exec {
  background: var(--aga-grupo-fundo);
  border: 1px solid var(--aga-campo-borda);
  border-radius: 12px; padding: 14px 16px;
}

/* o gerador conversa com o grupo, mas segue tracejado (é uma ferramenta, não um campo) */
#reg-modal .aga-gerador { background: var(--aga-grupo-fundo); }

/* linhas de horário: faixa alternada para não virar uma parede de inputs */
#reg-modal .aga-hr { padding: 4px 6px; border-radius: 10px; }
#reg-modal .aga-hr:nth-child(odd) { background: var(--aga-grupo-fundo); }
#reg-modal .aga-hr .rm { color: #c0483f; }
#reg-modal .aga-hr .rm:hover { background: rgba(192,72,63,.12); }

/* botão principal do modal com o verde cheio da marca */
#reg-modal #aga-form .btn.primary,
#reg-modal .reg-modal-body > .au-sec .btn.primary {
  background: linear-gradient(135deg, var(--brand, #5c6f3a), #64793f);
  border: none; color: #fff;
}