/* Agenda PSI 4.0 — camada aditiva de fundação.
   Carregada após 2.0/runtime: não remove classes, IDs ou contratos legados. */
:root{
  --aps4-bg:var(--aps-bg,#fafafe);--aps4-surface:var(--aps-surface,#fff);--aps4-surface-subtle:var(--aps-surface-subtle,#f8f7ff);
  --aps4-text:var(--aps-text,#1a1a2e);--aps4-muted:var(--aps-text-secondary,#5c5c7a);--aps4-border:var(--aps-border,#eeedfe);
  --aps4-brand:var(--aps-cta,#534ab7);--aps4-brand-soft:var(--aps-accent-soft,rgba(127,119,221,.12));
  --aps4-space-1:4px;--aps4-space-2:8px;--aps4-space-3:12px;--aps4-space-4:16px;--aps4-space-5:24px;--aps4-space-6:32px;--aps4-space-7:48px;
  --aps4-radius-sm:8px;--aps4-radius-md:12px;--aps4-radius-lg:16px;--aps4-radius-xl:22px;
  --aps4-shadow:0 8px 28px rgba(36,31,90,.07);--aps4-focus:0 0 0 3px rgba(83,74,183,.28);
  --aps4-z-nav:70;--aps4-z-popover:9000;--aps4-z-modal:10000;--aps4-motion:160ms cubic-bezier(.2,.75,.25,1);
}

.aps4-shell{background:var(--aps4-bg)}
.aps4-shell :focus-visible{outline:0;box-shadow:var(--aps4-focus)}
.aps4-shell .dd-sidebar{border-right:1px solid rgba(255,255,255,.08)}
.aps4-shell .dd-topbar{border-bottom:1px solid var(--aps4-border)}
.aps4-shell .dd-content{max-width:none;padding-bottom:var(--aps4-space-7)}

/* Navegação de módulo: adicionada apenas onde há subárea real. */
.aps4-module-nav{display:flex;align-items:center;gap:4px;min-height:54px;padding:8px clamp(18px,3vw,38px);border-bottom:1px solid var(--aps4-border);background:rgba(255,255,255,.72);overflow-x:auto;scrollbar-width:none}
.aps4-module-nav::-webkit-scrollbar{display:none}
.aps4-module-nav__label{margin-right:8px;color:var(--aps4-muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.aps4-module-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 11px;border-radius:9px;color:var(--aps4-muted);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background var(--aps4-motion),color var(--aps4-motion)}
.aps4-module-nav a:hover{color:var(--aps4-brand);background:var(--aps4-brand-soft)}
.aps4-module-nav a[aria-current="page"]{color:var(--aps4-brand);background:var(--aps4-brand-soft)}
.aps4-module-nav a[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* Primitivos oficiais. Módulos futuros os adotam sem mudar a base legada. */
.aps4-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--aps4-space-4);padding:var(--aps4-space-5) 0}
.aps4-page-header__intro{min-width:0}.aps4-page-header h1{margin:0;color:var(--aps4-text);font:750 clamp(24px,2vw,32px)/1.16 var(--aps-font-display,inherit);letter-spacing:-.03em}
.aps4-page-header p{max-width:680px;margin:6px 0 0;color:var(--aps4-muted);font-size:14px}.aps4-page-header__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.aps4-toolbar{display:flex;align-items:center;gap:var(--aps4-space-2);padding:var(--aps4-space-3);border:1px solid var(--aps4-border);border-radius:var(--aps4-radius-md);background:var(--aps4-surface);box-shadow:0 1px 2px rgba(36,31,90,.03)}
.aps4-toolbar__search{flex:1;min-width:180px}.aps4-toolbar__filters,.aps4-toolbar__actions{display:flex;flex-wrap:wrap;gap:8px}
.aps4-card{border:1px solid var(--aps4-border);border-radius:var(--aps4-radius-lg);background:var(--aps4-surface);box-shadow:var(--aps4-shadow)}
.aps4-card--quiet{box-shadow:0 1px 2px rgba(36,31,90,.04)}
.aps4-status{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.aps4-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.aps4-status[data-tone="success"]{color:#047857;background:#d1fae5}.aps4-status[data-tone="warning"]{color:#a16207;background:#fef3c7}.aps4-status[data-tone="danger"]{color:#b91c1c;background:#fee2e2}.aps4-status[data-tone="neutral"]{color:#4f4b65;background:#f1f0f7}
.aps4-table-wrap{overflow:auto;border:1px solid var(--aps4-border);border-radius:var(--aps4-radius-lg);background:var(--aps4-surface)}
.aps4-table{width:100%;border-collapse:collapse;font-size:14px}.aps4-table th{padding:11px 14px;color:var(--aps4-muted);background:var(--aps4-surface-subtle);font-size:11px;letter-spacing:.05em;text-align:left;text-transform:uppercase}.aps4-table td{padding:14px;border-top:1px solid var(--aps4-border);vertical-align:middle}.aps4-table tbody tr:hover{background:#fcfbff}
.aps4-state{display:grid;place-items:center;min-height:180px;padding:var(--aps4-space-5);border:1px dashed var(--aps4-border);border-radius:var(--aps4-radius-lg);color:var(--aps4-muted);background:var(--aps4-surface-subtle);text-align:center}.aps4-state strong{color:var(--aps4-text)}.aps4-state[data-state="error"]{border-style:solid;border-color:#fecaca;background:#fffafa;color:#991b1b}
.aps4-drawer{z-index:var(--aps4-z-modal)}

@media (min-width:781px) and (max-width:1180px){.aps4-shell .dd-sidebar{width:216px}.aps4-shell .dd-content{padding-left:24px;padding-right:24px}}
@media (max-width:780px){.aps4-module-nav{min-height:50px;padding:7px 14px}.aps4-module-nav__label{display:none}.aps4-page-header{flex-direction:column;padding:20px 0 16px}.aps4-page-header__actions{justify-content:flex-start}.aps4-toolbar{align-items:stretch;flex-wrap:wrap}.aps4-toolbar__search{flex-basis:100%}.aps4-table[data-mobile-presentation="rows"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.aps4-table[data-mobile-presentation="rows"] tr,.aps4-table[data-mobile-presentation="rows"] td{display:block}.aps4-table[data-mobile-presentation="rows"] td{padding:7px 12px;border:0}.aps4-table[data-mobile-presentation="rows"] td:first-child{padding-top:13px}.aps4-table[data-mobile-presentation="rows"] td:last-child{padding-bottom:13px;border-bottom:1px solid var(--aps4-border)}}
@media (prefers-reduced-motion:reduce){.aps4-module-nav a{transition:none}}

/* ============================================================
   Rail 4.0 — sidebar compacta (piloto: pacientes.html)
   Ver docs/product/agenda-psi-4/NAVIGATION.md ("Rail compacta") e
   CURRENT_STATE.md ("Sidebar 4.0 — piloto em Pacientes"). Primitivo
   aditivo: reaproveita a mesma estrutura/IDs/handlers do .dd-sidebar
   legado (bindDdShell, perfil, ajuda) — só a apresentação muda quando a
   classe .aps4-rail é somada a .dd-sidebar numa tela específica.
   Seletores compostos (.dd-sidebar.aps4-rail) são de propósito: vencem
   dashboard-2.0.css por especificidade mesmo esse arquivo carregando
   DEPOIS de agenda-psi-4.css no <head> (ver comentário no <head> das
   telas). Nenhuma tela além do piloto ganha esta classe nesta fase —
   todas as outras continuam com .dd-sidebar largo, sem nenhuma mudança.
   ============================================================ */
:root{
  --aps4-rail-w:96px;
  --aps4-rail-icon:22px;
  --aps4-rail-gap:6px;
}

.dd-sidebar.aps4-rail{width:var(--aps4-rail-w);padding:0 8px 16px;overflow:visible}
/* A rail já é a forma mais compacta possível: não existe um segundo nível
   de "recolhido" (diferente do .dd-sidebar largo, que colapsa pra ícone
   com tooltip). Se o toggle de recolher não existir na tela (caso do
   piloto), esta regra nunca dispara — mantida só por defesa, caso um
   dia a rail conviva com o atributo data-sidebar por algum outro motivo. */
.dd-shell[data-sidebar="collapsed"] .dd-sidebar.aps4-rail{width:var(--aps4-rail-w);padding-left:8px;padding-right:8px}

/* Marca no canto superior esquerdo da rail (não solta dentro da busca do
   topbar, não vira espaço vazio acima do menu — 3ª tentativa: 1) só ícone
   dentro do menu, sr-only o resto → sumiu visualmente; 2) marca movida pro
   topbar → duplicou com o ícone que sobrou na rail; 3) ícone removido da
   rail sem nada no lugar → canto vazio. Agora a marca inteira (ícone +
   nome + tagline) ocupa o próprio canto, empilhada por causa da largura
   estreita da rail (96px não cabe tudo numa linha só). SEM border-bottom
   própria: o bloco (~102px) é mais alto que o .dd-topbar (64px) por causa
   do conteúdo empilhado, então uma borda aqui ficaria numa altura
   diferente da borda do topbar ao lado — duas linhas desencontradas
   pareceriam um degrau, pior que não ter linha nenhuma. Separação do menu
   feita só por espaçamento (margin-bottom). Não é clicável (pedido do
   Rodrigo: "a logomarca ela não precisa ser clicável... não deixe ser
   clicado") — vira `<div>`, não `<a>`; "Visão geral" no menu logo abaixo
   já é o caminho real pro Dashboard. */
.aps4-rail-brand{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding:16px 4px 14px;margin:0 -8px 6px;
}
.aps4-rail-brand .dd-brand-mark{width:32px;height:32px}
.aps4-rail-brand-text{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
.aps4-rail-brand .dd-brand-name{font-size:11.5px;line-height:1.15;white-space:nowrap}
.aps4-rail-brand-tagline{font-size:9px;font-weight:600;color:var(--dd-ink-mute);line-height:1.3;letter-spacing:.005em}

.aps4-rail .dd-nav{width:100%;gap:var(--aps4-rail-gap)}
.aps4-rail .dd-nav-label{display:none} /* rótulos de seção (Seu espaço/Gestão) não cabem no formato ícone+rótulo curto; ordem dos itens preservada */

.aps4-rail-item{position:relative;width:100%}
.aps4-rail-item__trigger{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:100%;min-height:60px;padding:8px 4px;margin:0;border:none;border-radius:var(--aps4-radius-md);
  background:transparent;color:var(--aps4-muted);cursor:pointer;font:inherit;text-decoration:none;box-sizing:border-box;
  transition:background var(--aps4-motion),color var(--aps4-motion);
}
.aps4-rail-item__trigger svg{width:var(--aps4-rail-icon);height:var(--aps4-rail-icon);flex:none}
.aps4-rail-item__label{font-size:10.5px;font-weight:700;line-height:1.15;text-align:center;max-width:100%;word-break:break-word}
.aps4-rail-item__trigger:hover{background:var(--aps4-brand-soft);color:var(--aps4-brand)}
.aps4-rail-item__trigger[aria-expanded="true"]{background:var(--aps4-brand-soft);color:var(--aps4-brand)}
.aps4-rail-item__trigger[aria-current="page"]{background:var(--aps4-brand);color:#fff}
.aps4-rail-item__trigger[aria-current="page"] svg{color:#fff}

/* Flyout: painel ancorado ao lado do ícone. Posição real (top/left) é
   calculada em JS (position:fixed) porque o ancestral .dd-nav tem
   overflow-x:hidden (rolagem vertical da lista de navegação) — um
   position:absolute aqui seria cortado. Ver aps4-rail.js. */
.aps4-rail-flyout{
  position:fixed;z-index:var(--aps4-z-popover);min-width:200px;padding:8px;
  border:1px solid var(--aps4-border);border-radius:var(--aps4-radius-md);
  background:var(--aps4-surface);box-shadow:var(--aps4-shadow);
}
.aps4-rail-flyout[hidden]{display:none}
.aps4-rail-flyout__title{margin:2px 8px 6px;color:var(--aps4-muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.aps4-rail-flyout a,.aps4-rail-flyout [role="menuitem"]{
  display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--aps4-radius-sm);
  color:var(--aps4-text);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background var(--aps4-motion),color var(--aps4-motion);
}
.aps4-rail-flyout a:hover,.aps4-rail-flyout a:focus-visible{background:var(--aps4-brand-soft);color:var(--aps4-brand)}
.aps4-rail-flyout a[aria-current="page"]{color:var(--aps4-brand);background:var(--aps4-brand-soft);font-weight:800}
.aps4-rail-flyout a[aria-disabled="true"]{color:var(--aps4-muted);opacity:.65;cursor:not-allowed}
.aps4-rail-flyout a[aria-disabled="true"]::after{content:"Em breve";margin-left:16px;padding-left:10px;font-size:10.5px;font-weight:700;color:var(--aps4-muted)}

/* Padrão "coluna com grupos titulados", pronto para telas densas futuras
   (Financeiro/Configurações — ver NAVIGATION.md) quando forem migradas
   para a rail. Não usado nesta fase (só Pacientes, que tem poucos
   sub-itens e usa o flyout simples acima). */
.aps4-rail-flyout--grouped{min-width:240px}
.aps4-rail-flyout__group+.aps4-rail-flyout__group{margin-top:6px;padding-top:6px;border-top:1px solid var(--aps4-border)}
.aps4-rail-flyout__group-title{margin:2px 10px 4px;color:var(--aps4-muted);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.aps4-rail__foot{display:flex;flex-direction:column;gap:var(--aps4-rail-gap);width:100%;margin-top:auto;padding-top:10px;border-top:1px solid var(--aps4-border)}
.aps4-rail__foot .aps4-rail-item__trigger{min-height:52px}

@media (min-width:781px) and (max-width:1180px){.aps4-shell .dd-sidebar.aps4-rail{width:var(--aps4-rail-w)}}
@media (max-width:780px){
  /* A rail só existe a partir de 781px. Abaixo disso, o padrão mobile já
     usado em todas as outras telas (dd-bottom-nav fixa embaixo) assume
     sozinho, sem nenhuma mudança de comportamento — dashboard-2.0.css já
     esconde .dd-sidebar neste breakpoint; esta regra é redundante de
     propósito (defesa/documentação), não corrige nenhum bug. */
  .dd-sidebar.aps4-rail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .aps4-rail-item__trigger{transition:none}
  .aps4-rail-flyout a{transition:none}
}
