/* ============================================================================
   agenda.css — a tela de Agenda (calendario + comanda + lista + configuracao).

   Porte de D2PdvSmart\Web\wwwroot\src\css\pages\agenda.css (FullCalendar) +
   o que a agenda.html resolvia com Tailwind inline. Aqui o CSS e proprio porque
   o runtime monta a marcacao; o formulario de Configuracao usa o prefixo `kcad`
   (modals/cadastro.css), como nas telas de Produto/Contas a Pagar.

   Quem liga/desliga .hidden nos paineis e o runtime, por patch.
   ============================================================================ */

.ag-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---- barra de abas internas ------------------------------------------- */
.ag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  padding: .35rem .5rem 0;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-2, rgba(127, 127, 127, .06));
}
.ag-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ag-tab:hover { color: var(--text); }
.ag-tab--on {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.ag-tab.is-todo { opacity: .5; cursor: not-allowed; }

.ag-card-body { padding: 0; }

.ag-pane { min-height: 0; }
.ag-pane.hidden { display: none; }

/* O calendario ocupa TODA a altura util ate o rodape.
   O FullCalendar grava height:100% inline no container; sem uma cadeia de
   alturas definida, sobrava o min-height e a grade ficava no meio da tela.
   As regras :has() isolam o ajuste na Agenda — as outras telas do shell nao
   mudam. O height:auto !important vence o inline. */
main.page-content:has(#tab-pane-agenda.active) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
main.page-content:has(#tab-pane-agenda.active) > #tab-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Sem .active vale o .tab-pane { display:none } de tabs.css — NAO forcamos
   display aqui, senao a Agenda fica visivel junto da aba realmente ativa. */
#tab-content:has(#tab-pane-agenda.active) > #tab-pane-agenda {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tab-pane-agenda.active > .ag-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ag-card > .ag-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ag-card-body > .ag-pane:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#agenda-calendario,
.ag-calendario {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  width: 100%;
}

/* ---- placeholder das abas ainda nao migradas -------------------------- */
.ag-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 3rem 1rem;
  text-align: center;
}
.ag-placeholder i { font-size: 2.2rem; color: var(--primary); }
.ag-placeholder strong { font-size: 1rem; color: var(--text); }
.ag-placeholder span { font-size: .8rem; color: var(--text-muted); }

/* ---- filtros da lista (Financeiro) ------------------------------------ */
.ag-fin { padding: 1rem; }
.ag-filtros {
  display: flex;
  align-items: stretch;
  margin-bottom: .6rem;
}
.ag-busca { position: relative; flex: 1 1 auto; min-width: 0; }
.ag-busca i {
  position: absolute;
  top: 50%; left: .8rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .82rem;
  pointer-events: none;
}
.ag-busca input {
  width: 100%;
  padding: .55rem .7rem .55rem 2.2rem;
  border: 1px solid var(--input-border, var(--card-border));
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  outline: none;
}
.ag-periodo { margin-bottom: .5rem; }

.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.ag-btn:hover { border-color: var(--primary); }
.ag-btn--primario {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}
.ag-btn--primario:hover { background: var(--primary-hover); }
.ag-btn.ag-novo {
  flex: 0 0 auto;
  width: 2.75rem;
  padding: 0;
  font-size: .95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-left: -1px;
}

.ag-info-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .76rem;
}
.ag-info { color: var(--text-muted); }
.ag-status { flex: 1; color: var(--warning, #b45309); font-weight: 600; }
.ag-status.erro { color: var(--danger, #b91c1c); }

/* ---- lista de comandas ------------------------------------------------ */
.ag-lista { display: flex; flex-direction: column; gap: .5rem; }
.ag-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.ag-item-main { flex: 1; min-width: 0; }
.ag-item-cliente {
  margin-bottom: .3rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ag-item-sub { font-weight: 400; color: var(--text-muted); }
.ag-item-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.ag-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface-2, rgba(127, 127, 127, .1));
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
}
.ag-tag--ok { border-color: rgba(21,128,61,.35); background: rgba(21,128,61,.12); color: var(--success, #15803d); }
.ag-tag--erro { border-color: rgba(185,28,28,.35); background: rgba(185,28,28,.12); color: var(--danger, #b91c1c); }
.ag-tag--aviso { border-color: rgba(180,83,9,.35); background: rgba(180,83,9,.12); color: var(--warning, #b45309); }
.ag-item-total { margin-top: .25rem; font-size: .88rem; font-weight: 700; color: var(--primary); }
.ag-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .2rem;
  font-size: .68rem;
  color: var(--text-muted);
}
.ag-item-acoes { display: flex; gap: .25rem; }
.ag-item-acoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.ag-item-acoes button:hover { border-color: var(--primary); color: var(--primary); }

.ag-pager { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.ag-pager button {
  padding: .3rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.ag-pager button:hover { border-color: var(--primary); }
.ag-pager-info { flex: 1; text-align: right; font-size: .74rem; color: var(--text-muted); }
.ag-totalizador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--card-border);
  font-size: .76rem;
  color: var(--text-muted);
}
.ag-totalizador strong { color: var(--text); font-size: .95rem; }

/* ---- comanda ---------------------------------------------------------- */
.ag-comanda { padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.ag-bloco {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ag-bloco-titulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  font-size: .74rem;
  font-weight: 800;
  color: var(--text);
}
.ag-bloco-titulo i { color: var(--primary); }
.ag-bloco-titulo--acao { justify-content: space-between; }
.ag-bloco-body, .ag-bloco-campo, .ag-bloco-grid { padding: .9rem; }
.ag-bloco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.ag-campo { min-width: 0; }

.ag-tabela { display: flex; flex-direction: column; }
.ag-linha {
  display: grid;
  grid-template-columns: 2.2rem 6rem 1fr 6rem 4rem 6rem 4.5rem;
  align-items: center;
  gap: .3rem;
  padding: .4rem .8rem;
  border-top: 1px solid var(--card-border);
  font-size: .78rem;
}
.ag-linha--cab {
  border-top: 0;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2, rgba(127,127,127,.05));
}
.ag-col-num, .ag-col-qtd, .ag-col-item { text-align: right; }
.ag-col-acoes { display: flex; gap: .2rem; justify-content: flex-end; }
.ag-col-acoes button {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  width: 1.7rem; height: 1.7rem;
  cursor: pointer;
}
.ag-col-acoes button:hover { border-color: var(--primary); color: var(--primary); }

.ag-totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  padding: .9rem;
}
.ag-total-campo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.7rem;
  padding: .55rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.ag-total-campo > span {
  position: absolute;
  top: 0;
  left: .65rem;
  transform: translateY(-50%);
  padding: 0 .35rem;
  background: var(--card-bg);
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.ag-total-campo strong { font-size: 1rem; color: var(--text); }
.ag-total-campo--desc { padding: 0 0 0 .7rem; }
.ag-total-desc {
  flex: 1;
  min-width: 0;
  min-height: 2.7rem;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: .5rem;
}
.ag-total-desc strong {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-btn-pct {
  flex-shrink: 0;
  padding: 0 1rem;
  border: 0;
  border-left: 1px solid var(--card-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.ag-btn-pct:hover { background: var(--primary-hover); }
.ag-obs {
  width: 100%;
  border: 1px solid var(--input-border, var(--card-border));
  border-radius: var(--radius);
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  padding: .5rem;
  font: inherit;
  font-size: .82rem;
  resize: vertical;
}
.ag-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-top: .3rem;
}
.ag-acoes .ag-status { flex: 1; }

/* ---- configuracao ----------------------------------------------------- */
.ag-config { padding: 1rem; }
.ag-config-acoes {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--card-border);
}

/* Accordion do original (Horário / Formas de Pagamento / Contato / Local) */
.cfg-acc {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
}
.cfg-item + .cfg-item { border-top: 1px solid var(--card-border); }
.cfg-sum {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.cfg-sum::-webkit-details-marker { display: none; }
.cfg-sum:hover { background: var(--primary-soft); }
.cfg-chevron {
  margin-left: auto;
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform .25s ease;
}
.cfg-item[open] .cfg-chevron { transform: rotate(180deg); }
.cfg-body {
  padding: .5rem 1rem 1rem;
  border-top: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--app-bg) 60%, var(--card-bg));
}

.cfg-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.cfg-field label,
.cfg-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
}
.cfg-select {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  outline: none;
}
.cfg-select:focus { border-color: var(--primary); }

.cfg-block { margin-bottom: 1rem; }
.cfg-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cfg-pill:hover { border-color: var(--primary); }
.cfg-pill input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--primary);
  pointer-events: none;
}
.cfg-pill:has(input:checked) {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}
.cfg-pill:has(input:checked) input { accent-color: #fff; }

.cfg-acoes2 {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--card-border);
}

.cfg-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.cfg-card {
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.cfg-card i { font-size: 1.4rem; }
.cfg-card p { margin: .5rem 0 0; font-size: .82rem; font-weight: 600; color: var(--text); }

.cfg-info { display: flex; flex-direction: column; gap: .75rem; }
.cfg-info-item {
  padding: .75rem;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.cfg-info-item strong { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text); }
.cfg-info-item p { margin: .35rem 0 0; font-size: .82rem; color: var(--text-muted); }

@media (max-width: 640px) {
  .cfg-grid3 { grid-template-columns: 1fr; }
  .cfg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
   FullCalendar — o mesmo ajuste do original, com os tokens do tema do app.
   ============================================================================ */
#agenda-calendario .fc,
.ag-calendario .fc { font-size: .82rem; }

.fc-resource-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  /* Preenche a celula inteira: o background-color (cor do funcionario) tem de
     cobrir todo o quadrado do cabecalho, nao so o retangulo do conteudo. */
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.fc-resource-header img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .3);
}
.fc-resource-header span { font-weight: 600; font-size: 12px; }

/* O conteudo do cabecalho de recurso nasce inline-block e encolhe para o
   tamanho do avatar; aqui ele passa a preencher a celula, para a cor do
   funcionario cobrir o quadrado inteiro (nao so o retangulo do conteudo). */
.fc-col-header-cell.fc-resource .fc-scrollgrid-sync-inner { height: 100%; }
.fc-col-header-cell.fc-resource .fc-col-header-cell-cushion {
  display: block;
  width: 100% !important;
  height: 100%;
  padding: 0;
}

/* Fonte dos horarios: o monospace do original alinha os digitos e impede
   que horas "minor" (11:00 x 11:30) saiam com corpo diferente. */
.fc .fc-timegrid-slot-label-cushion {
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace !important;
  color: var(--text-muted);
  text-align: right;
  padding: 0 6px;
  white-space: nowrap;
  display: block;
  overflow: visible;
  min-width: 50px;
  -webkit-font-smoothing: antialiased;
}
.fc .fc-timeline-slot-cushion { color: var(--text-muted); font-size: 11px; }

/* Remove a linha "all-day" da view timegrid (o original tambem a escondia). */
.fc-timegrid-all-day,
.fc-timegrid-axis-cushion,
.fc-timegrid-divider.fc-cell-shaded,
tr:has(.fc-timegrid-axis-cushion) { display: none; }

.fc-event { cursor: pointer; }
.fc-timeline-event { border-radius: 8px; }
.fc-timeline-event .fc-event-main-frame { display: flex; flex-direction: column; padding: 4px; }
.fc-event-time { font-weight: 700; font-size: 11px; }
.fc-event-title { font-size: 11px; }

.fc-theme-standard td,
.fc-theme-standard th { border-color: var(--card-border); }
.fc-day-today { background-color: transparent !important; }

@media (max-width: 768px) {
  .ag-linha { grid-template-columns: 1.8rem 3.5rem 1fr 3.5rem 4.5rem; }
  .ag-col-num:nth-child(4), .ag-col-item { display: none; }
  .ag-bloco-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Porte do projeto antigo da Agenda
   ----------------------------------------------------------------------------
   Vem de D2PdvSmart (Linux)\Web\wwwroot\src\assets\css\pages\sistema\agenda\
   (agenda.css, compcalendar.css) + pages/demo.css. As regras de shell
   (header, side-menu, sidebar) NAO entram: quem desenha isso e o runtime.
   Os tokens sao os do tema atual (--primary, --card-border, ...), nao os do
   projeto antigo (--bg-primary, --color-primary-600), para acompanhar o tema.
   ============================================================================ */

/* ---- Modal de Agendamento (mag-*) ------------------------------------- */
/* Profissional e pesquisa de cliente dividem a linha logo abaixo de
   Data/horarios; o 1.15rem e o gap vertical da grade .kcad-form. */
.mag-linha-prof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-items: start;
  margin-top: 1.15rem;
}
.mag-linha-prof .kcad-form { display: block; }
.mag-status { margin-top: 1.15rem; }
@media (max-width: 576px) {
  .mag-linha-prof { grid-template-columns: 1fr; gap: 1.15rem; }
}

.mag-linha-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .85rem;
}
.mag-btn-wa,
.mag-btn-comanda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.mag-btn-wa { background: #25d366; }
.mag-btn-wa:hover { background: #1ebe5b; transform: translateY(-1px); }
.mag-btn-comanda { background: var(--primary); }
.mag-btn-comanda:hover { background: var(--primary-hover); transform: translateY(-1px); }

.mag-recorrencia {
  align-self: center;
  margin-right: auto;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.mag-recorrencia:hover { color: var(--primary-hover); text-decoration: underline; }
.mag-gravar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 95px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #111;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease;
}
.mag-gravar:hover { background: var(--primary-hover); }

/* ---- Status atendimento: pills coloridas ------------------------------ */
/* O TPdvForm gera o grupo como .kcad-radio; aqui ele volta a ser a "pill"
   colorida do original, com a cor de cada status. O dialogo alarga para os
   48rem (max-w-3xl) do original e o status ocupa a linha inteira. */
#mag-overlay .mexp-dialog { max-width: 48rem; }
#mag-overlay [id$="-status-cel"] { grid-column: 1 / -1; }
#mag-overlay .kcad-radio-lbl {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
#mag-overlay .kcad-radiogrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
#mag-overlay .kcad-radio {
  justify-content: center;
  padding: .45rem .6rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 20px;
  color: #fff;
  font-size: .74rem;
  font-weight: 500;
  text-align: center;
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
#mag-overlay .kcad-radio:hover { opacity: .9; transform: scale(1.02); }
#mag-overlay .kcad-radio .kcad-radio-dot { display: none; }
#mag-overlay .kcad-radio--on {
  opacity: 1;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
#mag-overlay .kcad-radio--on .kcad-radio-lbl::before { content: "\2713\00a0"; }

#mag-overlay [id$="-status-op0-card"] { background: #047694; }
#mag-overlay [id$="-status-op1-card"] { background: #01a4c6; }
#mag-overlay [id$="-status-op2-card"] { background: #1984ee; }
#mag-overlay [id$="-status-op3-card"] { background: #00aa00; }
#mag-overlay [id$="-status-op4-card"] { background: #4035c6; }
#mag-overlay [id$="-status-op5-card"] { background: #ca232b; }
#mag-overlay [id$="-status-op6-card"] { background: #939591; }
#mag-overlay [id$="-status-op7-card"] { background: #ff8000; }

@media (max-width: 576px) {
  #mag-overlay .kcad-radiogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
  #mag-overlay .kcad-radio { font-size: .7rem; padding: .4rem .5rem; }
}

/* ---- Pills de status reutilizaveis (porte de demo.css) ---------------- */
.status-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}
.status-wrap .pill-check { margin: 0; padding: 0; width: 100%; }
.status-wrap .pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  opacity: .7;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.status-wrap .pill:hover { opacity: .9; transform: scale(1.02); }
.status-wrap .pill-check-input { display: none; }
.status-wrap label:has(input:checked) { opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.status-wrap .pill-check-input:checked ~ span { font-weight: 600; }
.status-wrap .pill-check-input:checked ~ span::before { content: "\2713\00a0"; }

/* ---- Recorrencia (porte de agenda.css / compcalendar.css) ------------- */
.radio-btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.radio-btn-custom.btn-nao { background: #333; border-color: #333; color: #fff; }
.radio-btn-custom.btn-sim { background: #5cb85c; border-color: #5cb85c; color: #fff; }
.input-group-recorrencia { display: flex; gap: 8px; align-items: center; }
.input-group-recorrencia input,
.input-group-recorrencia select { max-width: 150px; }
.termino-options { display: flex; gap: 20px; margin-top: 8px; }
.termino-option { display: flex; align-items: center; gap: 8px; }
#semanaGroup .controls { display: flex; flex-wrap: wrap; }
#semanaGroup .controls label.control-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* ---- Configuracao: dias da semana e visualizacao ---------------------- */
.dias-semana { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dias-semana label,
.visualizacao-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
}
.dias-semana label:hover,
.visualizacao-options label:hover { border-color: var(--primary); }
.dias-semana label:has(input:checked),
.visualizacao-options label:has(input:checked) {
  background: var(--primary);
  border-color: var(--primary);
  color: #111;
}
.dias-semana input[type="checkbox"],
.visualizacao-options input[type="radio"] { display: none; }
.visualizacao-options { display: flex; flex-wrap: wrap; gap: 10px; }