/* ==========================================================================
   Vitta Agenda — Painel da clínica (admin/index.html)
   ========================================================================== */

/* ---------- Cabeçalho ---------- */
.admin-head__top { display: grid; gap: var(--space-5); margin-top: var(--space-3); }
@media (min-width: 1024px) {
  .admin-head__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.demo-seal {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: var(--radius-full);
  background: var(--amber-100); color: #6e470c; border: 1px solid #f3d9a8;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em;
}
.demo-seal + .page-head__title { margin-top: var(--space-3); }

.admin-toolbar { display: grid; gap: .75rem; }
.admin-toolbar__prof .select { background-color: var(--surface); font-weight: 600; box-shadow: var(--shadow-sm); }
.admin-toolbar__reset svg { color: var(--ink-3); }
@media (min-width: 640px) {
  .admin-toolbar { grid-template-columns: minmax(260px, 420px) auto; align-items: end; }
  .admin-toolbar__reset { min-height: 48px; }
}

/* ---------- Área principal ---------- */
.admin { padding-block: var(--space-5) var(--space-8); display: grid; gap: var(--space-5); }
.admin__grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1100px) {
  .admin__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Cards de resumo ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.stat {
  --tone: var(--petrol-700); --tone-bg: var(--petrol-50);
  position: relative; overflow: hidden; min-width: 0;
  display: grid; gap: .15rem; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat::after { /* brilho suave no canto, na cor do card */
  content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: var(--tone-bg); opacity: .7; z-index: 0;
}
.stat > * { position: relative; z-index: 1; }
.stat__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .5rem; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.stat__label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.stat__value { font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat__hint { font-size: .75rem; color: var(--ink-3); line-height: 1.4; }
.stat--blue  { --tone: #1d4e89; --tone-bg: #e5eefa; }
.stat--amber { --tone: #8a5a10; --tone-bg: var(--amber-100); }
.stat--red   { --tone: var(--red-700); --tone-bg: var(--red-100); }
.stat--green { --tone: var(--green-700); --tone-bg: var(--green-100); }
@media (min-width: 640px) { .stat { padding: 1.25rem; } }

/* ---------- Painéis (dia / semana) ---------- */
.panel { padding: 1.125rem; min-width: 0; }
@media (min-width: 640px) { .panel { padding: 1.5rem; } }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.panel__title { font-size: var(--fs-lg); }
.panel__sub { margin-top: .2rem; font-size: var(--fs-sm); font-weight: 600; color: var(--petrol-700); }
.panel__sub:focus { box-shadow: none; }
.panel__sub:focus-visible { box-shadow: var(--ring); }
.panel__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.panel__tools .btn svg { width: 18px; height: 18px; }

.daynav { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.daynav__today { min-height: 40px; }
.daynav__today:disabled { opacity: .45; }
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { background: var(--petrol-50); border-color: var(--petrol-200); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { border-radius: 50%; }

/* Legenda com contagens do dia */
.legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.legend__item i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.legend__item--livre i { background: var(--green-500); }
.legend__item--ocupado i { background: var(--petrol-600); }
.legend__item--bloqueado i { background: var(--amber-500); }

/* ---------- Linha do tempo do dia ---------- */
.timeline { display: grid; gap: .5rem; }
.tl {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .75rem; align-items: start;
  animation: tl-in .3s var(--ease) both;
}
@keyframes tl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tl__time { padding-top: .7rem; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.tl__body {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem;
  min-height: 48px; padding: .55rem .75rem .55rem .875rem;
  border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 12px; background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tl__body:hover { box-shadow: var(--shadow-sm); }
.tl__label { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.tl__label em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.tl__note { font-size: var(--fs-xs); color: var(--ink-3); }
.tl__actions { display: flex; flex-wrap: wrap; gap: .375rem; }
.tl__actions .btn { min-height: 36px; padding: .35rem .75rem; }
.tl__actions .btn svg { width: 16px; height: 16px; }
.tl__actions .btn--ghost { --btn-bd: var(--line); }

/* Estados */
.tl--livre .tl__body { border-left-color: var(--green-500); background: linear-gradient(90deg, var(--green-50), var(--surface) 60%); }
.tl--livre .tl__label { color: var(--green-700); }
.tl--bloqueado .tl__body {
  border-left-color: var(--amber-500);
  background: repeating-linear-gradient(-45deg, #fffaf1, #fffaf1 8px, #fdf3e2 8px, #fdf3e2 16px);
}
.tl--bloqueado .tl__label { color: #8a5a10; }
.tl--ocupado .tl__body { border-left-color: var(--petrol-500); flex-direction: column; align-items: stretch; }
.tl--confirmada .tl__body { border-left-color: var(--green-700); }
.tl--passado .tl__time { color: var(--ink-3); }
.tl--passado .tl__body { background: #f6f8f9; border-left-color: var(--line-2); }
.tl--passado .tl__label { color: var(--ink-3); font-weight: 500; }

.tl__patient { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.tl__who { min-width: 0; }
.tl__who strong { display: block; font-size: var(--fs-sm); line-height: 1.35; }
.tl__who span { display: block; font-size: .75rem; color: var(--ink-3); overflow-wrap: anywhere; }
.tl__code { font-weight: 600; white-space: nowrap; } /* código não quebra no hífen */
.tl__patient .badge { flex-shrink: 0; }
/* com espaço, paciente e ações ficam lado a lado; se não couber, as ações descem */
@media (min-width: 560px) {
  .tl--ocupado .tl__body { flex-direction: row; align-items: center; }
  .tl__patient { flex: 1 1 240px; min-width: 0; align-items: center; }
}

.tl-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2rem 1rem; text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }
.tl-empty strong { font-size: var(--fs-md); color: var(--ink); }

/* Canceladas do dia */
.cancelled { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.cancelled summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 36px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--red-700); border-radius: 8px;
}
.cancelled ul { display: grid; gap: .25rem; margin-top: .5rem; }
.cancelled li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: .75rem; font-size: var(--fs-sm); }
.cancelled__time { font-weight: 600; color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.cancelled__name { color: var(--ink-2); overflow-wrap: anywhere; }
.cancelled .btn { min-height: 34px; padding: .3rem .7rem; }

/* ---------- Semana ---------- */
.week { display: grid; gap: .5rem; margin-top: 1rem; }

/* Celular: cada dia é uma linha (cabeçalho à esquerda, consultas à direita) */
.wk {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .75rem; align-items: start;
  padding: .625rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.wk.is-past { background: #f8fafa; }
.wk.is-selected { border-color: var(--petrol-500); box-shadow: 0 0 0 1px var(--petrol-500), var(--shadow-sm); }

.wk__head {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: .4rem .25rem;
  border: 0; border-radius: 12px; background: var(--petrol-50); color: var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.wk__head:hover { background: var(--petrol-100); }
.wk__head:focus-visible { border-radius: 12px; }
.wk__dow { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.wk__num { font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wk__today { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-700); }
.wk.is-selected .wk__head { background: var(--petrol-700); color: #fff; }
.wk.is-selected .wk__dow, .wk.is-selected .wk__today { color: var(--petrol-200); }

.wk__body { min-width: 0; display: grid; gap: .375rem; align-content: start; }
.wk__list { display: flex; flex-wrap: wrap; gap: .3rem; }
.wk__off { font-size: var(--fs-xs); color: var(--ink-3); padding-top: .35rem; }
.wk__blocked { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .15rem .5rem; border-radius: 6px; background: var(--amber-100); color: #8a5a10; font-size: .75rem; font-weight: 600; }
.wk__meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .75rem; color: var(--ink-3); }
.wk__meta:empty { display: none; }
.wk__free { color: var(--green-700); font-weight: 600; }

.wk-chip {
  --c: var(--petrol-500); --c-bg: var(--petrol-50);
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-height: 32px; padding: .2rem .5rem .2rem .45rem;
  border: 0; border-left: 3px solid var(--c); border-radius: 8px; background: var(--c-bg);
  font-size: .75rem; line-height: 1.25; color: var(--ink); text-align: left;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.wk-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wk-chip:focus-visible { border-radius: 8px; }
.wk-chip__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.wk-chip--confirmada { --c: var(--green-700); --c-bg: var(--green-50); }
.wk-chip--concluida { --c: var(--line-2); --c-bg: #f1f4f5; }
.wk-chip--concluida .wk-chip__name { color: var(--ink-3); }

.week-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: 1rem; font-size: .75rem; color: var(--ink-3); }
.week-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.wk-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--petrol-500); }
.wk-dot--confirmada { background: var(--green-700); }
.wk-dot--concluida { background: var(--line-2); }
.wk-dot--bloq { background: var(--amber-500); }

/* Desktop: grade de 7 colunas */
@media (min-width: 1100px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .375rem; }
  .wk { grid-template-columns: 1fr; align-content: start; gap: .5rem; padding: .4rem; min-height: 260px; }
  .wk__head { flex-direction: row; justify-content: center; gap: .35rem; flex-wrap: wrap; padding: .45rem .25rem; }
  .wk__num { font-size: var(--fs-md); }
  .wk__today { width: 100%; text-align: center; }
  .wk__list { flex-direction: column; flex-wrap: nowrap; }
  .wk-chip { width: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: .3rem .4rem; }
  .wk-chip__name { width: 100%; }
  .wk__off, .wk__meta { text-align: center; justify-content: center; }
  .wk__blocked { justify-self: stretch; justify-content: center; }
}

/* ---------- Modal: dados do paciente e bloqueio ---------- */
.patient__status { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.patient__code { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; padding: .1rem .55rem; border: 1px dashed var(--line-2); border-radius: 6px; }
.patient { margin: 0 0 1rem; display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.patient > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: .75rem; padding: .65rem .875rem; font-size: var(--fs-sm); }
.patient > div + div { border-top: 1px solid var(--line); }
.patient > div:nth-child(odd) { background: var(--bg); }
.patient dt { color: var(--ink-3); }
.patient dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.patient__hint { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
@media (max-width: 400px) { .patient > div { grid-template-columns: 1fr; gap: 0; } }

.block-form { display: grid; gap: 1rem; }