/* sg-datepicker — CSS portado 1:1 do <style> do card components/forms/date-picker.card.html (bundle 8cd72241),
 * mesmo movimento do P01 (CSS do card portado 1:1). Regras do widget byte a byte (calendário .cal*, os 10 estilos
 * .cal--* e o campo+popover .dp*); fora ficam só o cabeçalho/grade/legendas do card (.head, .grid, .scheme*,
 * .demo, .note) e o seletor de funcionalidade (.smc*). `.cal--cmp` vem do card, que não o aplica a nenhuma
 * funcionalidade; mantido para a paridade. Os acréscimos do P02 estão no fim do arquivo, comentados.
 * Escopo: as classes do card (.cal, .dp) não colidem com nada do app e ficam sem escopo. */
  /* ════════════ calendar ════════════ */
  .cal{ display:inline-block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:12px; }
  .cal--bare{ border:none; padding:0; background:transparent; }
  .cal__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; }
  .cal__nav{ width:28px; height:28px; display:grid; place-items:center; border:none; background:transparent; color:var(--text-muted); border-radius:var(--radius-md); cursor:pointer; flex:none; transition:background var(--sg-datepicker-t-120),color var(--sg-datepicker-t-120); }
  .cal__nav:hover{ background:var(--surface-hover); color:var(--text); } .cal__nav svg{ width:18px; height:18px; }
  .cal__titles{ flex:1; display:flex; justify-content:space-around; gap:18px; }
  .cal__mtitle{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text); letter-spacing:-.01em; text-align:center; }
  .cal__months{ display:flex; gap:22px; }
  .cal__month{ width:240px; }
  .cal--cmp .cal__month{ width:208px; }
  .cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); column-gap:0; row-gap:2px; }
  .cal__wd{ font-size:11px; color:var(--text-subtle); text-align:center; height:24px; display:grid; place-items:center; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  .cal__day{ position:relative; height:32px; display:grid; place-items:center; border:none; background:transparent; font-family:var(--font-sans); font-size:13px; font-variant-numeric:tabular-nums; color:var(--text); border-radius:var(--radius-md); cursor:pointer; transition:background var(--sg-datepicker-t-100),color var(--sg-datepicker-t-100); }
  .cal--cmp .cal__day{ height:28px; font-size:12px; }
  .cal__day:hover:not(:disabled):not(.sel){ background:var(--surface-hover); }
  .cal__day.out{ color:var(--text-disabled); }
  .cal__day.today{ font-weight:700; }
  .cal__day.today::after{ content:""; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--primary); }
  .cal__day.rng{ background:var(--primary-bg); color:var(--primary-text); border-radius:0; }
  .cal__day.sel{ background:var(--primary); color:var(--on-primary); font-weight:600; border-radius:var(--radius-md); }
  .cal__day.sel.today::after{ background:var(--on-primary); }
  .cal__day.start{ border-radius:var(--radius-md) 0 0 var(--radius-md); }
  .cal__day.end{ border-radius:0 var(--radius-md) var(--radius-md) 0; }
  .cal__day.start.end{ border-radius:var(--radius-md); }
  .cal__day:disabled{ color:var(--text-disabled); cursor:not-allowed; opacity:.42; }
  .cal__day .evt{ position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--warning); }
  .cal__day.sel .evt{ background:var(--on-primary); }
  .cal__foot{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); }
  .cal__preset{ font-family:var(--font-sans); font-size:12px; font-weight:500; color:var(--text-muted); background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px 10px; cursor:pointer; transition:background var(--sg-datepicker-t-120),color var(--sg-datepicker-t-120),border-color var(--sg-datepicker-t-120); }
  .cal__preset:hover{ background:var(--primary-bg); color:var(--primary-text); border-color:var(--primary-border); }

  /* ════════════ estilos visuais (1 classe por host) ════════════ */
  /* 02 Trilho — pílula 3D que salta do trilho rebaixado */
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ box-shadow:var(--shadow-sm), inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__grid{ row-gap:5px; } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day{ height:36px; border-radius:var(--radius-full); transition:background var(--sg-datepicker-t-120), color var(--sg-datepicker-t-120), transform var(--sg-datepicker-t-120) var(--ease-out), box-shadow var(--sg-datepicker-t-120) var(--ease-out); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day:hover:not(:disabled):not(.sel){ background:var(--surface-hover); transform:translateY(-1px); box-shadow:0 2px 4px -1px color-mix(in srgb,#000 14%,transparent); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{
    border-radius:var(--radius-full);
    background:linear-gradient(180deg, color-mix(in srgb,var(--primary) 78%,#fff) 0%, var(--primary) 52%, var(--primary-hover) 100%);
    box-shadow:
      0 2px 0 var(--primary-active),
      0 5px 10px -2px color-mix(in srgb,var(--primary) 55%,transparent),
      inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent);
    transform:translateY(-2px); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel:active{
    transform:translateY(0);
    box-shadow:0 1px 0 var(--primary-active), inset 0 2px 4px color-mix(in srgb,var(--primary-active) 60%,transparent); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.rng{ border-radius:0; box-shadow:inset 0 2px 3px -1px color-mix(in srgb,var(--primary) 26%,transparent), inset 0 -1px 0 color-mix(in srgb,var(--primary) 14%,transparent); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start{ border-radius:var(--radius-full) 0 0 var(--radius-full); } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.end{ border-radius:0 var(--radius-full) var(--radius-full) 0; } }
  @scope ([data-datepicker="track"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start.end{ border-radius:var(--radius-full); } }

  /* 03 Razão — malha de linhas + números mono (ar de planilha/contrato) */
  @scope ([data-datepicker="ledger"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ border-radius:var(--radius-sm); padding:12px 12px 0; } }
  @scope ([data-datepicker="ledger"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__grid{ row-gap:0; column-gap:0; border-top:1px solid var(--border); border-left:1px solid var(--border); overflow:hidden; } }
  @scope ([data-datepicker="ledger"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__wd{ border-right:1px solid var(--border); border-bottom:1px solid var(--border); font-family:var(--font-mono); height:26px; background:var(--surface-sunken); } }
  @scope ([data-datepicker="ledger"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day{ border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; font-family:var(--font-mono); font-size:12px; } }
  @scope ([data-datepicker="ledger"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel,.cal/*data-datepicker*/ .cal__day.start,.cal/*data-datepicker*/ .cal__day.end,.cal/*data-datepicker*/ .cal__day.start.end{ border-radius:0; } }
  @scope ([data-datepicker="ledger"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__mtitle{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px; } }

  /* 04 Agenda — calendário de parede: número no canto, células altas, faixa de evento */
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ padding:12px 12px 0; } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__grid{ row-gap:0; column-gap:0; } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__wd{ text-align:left; place-items:center start; padding-left:7px; } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day{ height:46px; place-items:start; padding:6px 0 0 8px; border-radius:0; border-top:1px solid var(--border-subtle); font-size:12px; color:var(--text-muted); } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.today{ color:var(--text); } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.today::after{ display:none; } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{ background:var(--primary-bg); color:var(--primary-text); box-shadow:inset 2.5px 0 0 var(--primary); border-radius:0; font-weight:600; } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.rng{ background:var(--primary-bg); } }
  @scope ([data-datepicker="agenda"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day .evt{ left:8px; bottom:8px; width:14px; height:3px; border-radius:var(--sg-datepicker-r-2); } }

  /* 05 Sólido (cabeçalho em barra) */
  @scope ([data-datepicker="solid"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ overflow:hidden; } }
  @scope ([data-datepicker="solid"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__head{ background:var(--primary); margin:-12px -12px 10px; padding:9px 10px; } }
  @scope ([data-datepicker="solid"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__mtitle{ color:var(--on-primary); } }
  @scope ([data-datepicker="solid"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__nav{ color:color-mix(in srgb,var(--on-primary) 78%,transparent); } }
  @scope ([data-datepicker="solid"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__nav:hover{ background:color-mix(in srgb,var(--on-primary) 18%,transparent); color:var(--on-primary); } }
  @scope ([data-datepicker="solid"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{ font-weight:700; } }

  /* 06 Minimal (sem moldura) */
  @scope ([data-datepicker="minimal"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ border:none; background:transparent; padding:2px; } }
  @scope ([data-datepicker="minimal"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__wd{ color:var(--text-subtle); font-weight:500; } }

  /* 07 Orbe — discos plenos + halo em volta do hoje */
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day{ border-radius:50%; } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.today{ font-weight:700; box-shadow:inset 0 0 0 1.5px var(--primary-border); } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.today::after{ display:none; } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{ border-radius:50%; box-shadow:0 0 0 3px var(--primary-bg); } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.rng{ border-radius:0; } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start{ border-radius:50% 0 0 50%; } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.end{ border-radius:0 50% 50% 0; } }
  @scope ([data-datepicker="orb"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start.end{ border-radius:50%; } }

  /* 08 Cápsula — superfície tingida, cantos amplos, dias claros */
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ background:var(--primary-bg); border-color:var(--primary-border); border-radius:var(--sg-datepicker-r-22); padding:14px; } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__mtitle,.cal/*data-datepicker*/ .cal__nav{ color:var(--primary-text); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__nav:hover{ background:var(--surface); color:var(--primary-text); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__wd{ color:var(--primary-text); opacity:.65; } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day{ border-radius:var(--radius-full); color:var(--primary-text); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.out{ color:color-mix(in srgb,var(--primary-text) 38%,transparent); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day:hover:not(:disabled):not(.sel){ background:var(--surface); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{ background:var(--primary); color:var(--on-primary); border-radius:var(--radius-full); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.rng{ background:color-mix(in srgb,var(--primary) 18%,transparent); color:var(--primary-text); border-radius:0; } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start{ border-radius:var(--radius-full) 0 0 var(--radius-full); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.end{ border-radius:0 var(--radius-full) var(--radius-full) 0; } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start.end{ border-radius:var(--radius-full); } }
  @scope ([data-datepicker="capsule"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__foot{ border-top-color:var(--primary-border); } }

  /* 09 Néon — contorno luminoso, brilha no escuro */
  @scope ([data-datepicker="neon"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{ background:transparent; color:var(--primary-text); border-radius:var(--radius-md); box-shadow:inset 0 0 0 1.5px var(--primary), 0 0 14px -3px var(--primary); } }
  @scope ([data-datepicker="neon"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel.today::after{ background:var(--primary); } }
  @scope ([data-datepicker="neon"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.rng{ background:color-mix(in srgb,var(--primary) 14%,transparent); } }
  @scope ([data-datepicker="neon"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.start,.cal/*data-datepicker*/ .cal__day.end{ box-shadow:inset 0 0 0 1.5px var(--primary), 0 0 14px -3px var(--primary); } }

  /* 10 Tipográfico — números display grandes, seleção sublinhada */
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/{ padding:16px 14px; } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__wd{ font-size:10px; letter-spacing:.12em; color:var(--text-subtle); } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__grid{ row-gap:4px; } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day{ height:40px; font-size:17px; font-weight:500; letter-spacing:-.02em; font-family:var(--font-display); } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel{ background:transparent; color:var(--text); font-weight:700; } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel::after{ content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:18px; height:2.5px; background:var(--primary); border-radius:var(--sg-datepicker-r-2); } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.sel.today::after{ background:var(--primary); } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__day.rng{ background:var(--primary-bg); } }
  @scope ([data-datepicker="typographic"]) to ([data-datepicker]) { .cal/*data-datepicker*/ .cal__mtitle{ font-size:16px; } }

  /* field + popover */
  .dp{ position:relative; }
  .dp__field{ display:inline-flex; align-items:center; gap:var(--control-gap); height:var(--control-h); padding:0 var(--control-pad-x); min-width:190px; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-md); font-family:var(--font-sans); font-size:var(--control-font); box-shadow:var(--shadow-inset); cursor:pointer; transition:border-color var(--sg-datepicker-t-120),box-shadow var(--sg-datepicker-t-120); }
  .dp__field:hover{ border-color:var(--gray-400); }
  .dp__field.open{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
  .dp__field svg{ width:16px; height:16px; color:var(--text-subtle); flex:none; }
  .dp__val{ flex:1; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:left; }
  .dp__val.ph{ color:var(--text-subtle); }
  .dp__pop{ position:absolute; top:calc(100% + 6px); left:0; z-index:20; box-shadow:var(--elevation-pop); border-radius:var(--radius-xl); }

/* ═══ Acréscimos do P02 — nada daqui vem do <style> do card ═══════════════════════════════════
 * (a) DatePicker.jsx (mesmo bundle): estados .is-error e .is-disabled do campo e a animação de entrada do popover.
 * (b) Campo editável (P02 §3, máscara dd/mm/aaaa sempre digitável): no card o campo é um <button>; aqui o texto
 *     vira <input class="dp__val"> com o MESMO aspecto de .dp__val, o ícone vira um botão (.dp__btn) e o anel de
 *     .dp__field.open vale também para :focus-within (JSX: .sg-dp__field:focus-visible). O anel do input some
 *     porque o campo já o mostra; o dos demais botões e dias vem do :focus-visible global do DS (base.css).
 * (c) Grid ARIA (decisão 3): linhas e células do role=grid não entram no layout (display:contents), então a
 *     grade CSS do card segue intacta; o dia focado sobe um nível para o anel não ficar sob o vizinho.
 * (d) Só POSICIONAM (ADR-015): nada estoura 375 px (meses quebram de linha, popover limitado à janela). O input
 *     usa flex-basis auto (largura do atributo size) para o campo de intervalo ter a largura do rótulo do card. */
.cal__row, .cal__cell{ display:contents; }
.cal__day:focus-visible{ z-index:1; }
.dp__btn{ display:flex; flex:none; padding:0; border:none; background:transparent; color:inherit; cursor:pointer; border-radius:var(--radius-md); }
.dp__chev{ display:flex; flex:none; cursor:pointer; }
input.dp__val{ flex:1 1 auto; min-width:0; padding:0; border:none; background:transparent; color:inherit; font-family:inherit; font-size:inherit; cursor:text; }
input.dp__val:focus-visible{ outline:none; }
input.dp__val::placeholder{ color:var(--text-subtle); opacity:1; }
.dp__field:focus-within{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
.dp__field.is-error{ border-color:var(--negative); }
.dp__field.is-disabled{ background:var(--surface-sunken); color:var(--text-disabled); cursor:not-allowed; box-shadow:none; }
.dp__field.is-disabled:hover{ border-color:var(--border-strong); }
.dp__field.is-disabled .dp__btn, .dp__field.is-disabled .dp__chev, .dp__field.is-disabled input.dp__val{ cursor:not-allowed; }
.dp__field{ max-width:100%; }
.dp__pop{ width:max-content; max-width:calc(100vw - var(--space-8)); animation:dp-rise var(--duration-base) var(--ease-out); }
.dp__pop--end{ left:auto; right:0; }
.cal{ max-width:100%; }
.cal__months{ flex-wrap:wrap; }
@keyframes dp-rise{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .dp__pop{ animation:none; } }