/* ==========================================================================
   Dani Modas · Design System · Componentes
   Depende de tokens.css. Comportamentos (toast, diálogo, menus...) em ui.js.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte-texto); font-size: var(--texto-md); line-height: var(--altura-linha);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
svg { flex-shrink: 0; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); line-height: var(--altura-linha-titulo); margin: 0; letter-spacing: -0.025em; color: var(--cor-texto); }
p { margin: 0; }
a { color: var(--cor-primaria); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--cor-primaria-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; border-radius: var(--raio-xs); }
::selection { background: var(--marca-200); color: var(--marca-900); }
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular-conteudo { position: fixed; left: var(--esp-4); top: -100px; z-index: var(--z-tour); background: var(--cor-superficie); padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-sm); box-shadow: var(--sombra-3); }
.pular-conteudo:focus { top: var(--esp-4); }
[hidden] { display: none !important; }

/* ---------- Utilitários ---------- */
.pilha { display: flex; flex-direction: column; gap: var(--esp-4); }
.pilha--sm { gap: var(--esp-2); } .pilha--lg { gap: var(--esp-6); }
.linha { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.linha--entre { justify-content: space-between; }
.linha--fim { justify-content: flex-end; }
.texto-2 { color: var(--cor-texto-2); } .texto-3 { color: var(--cor-texto-3); }
.pequeno { font-size: var(--texto-sm); } .mini { font-size: var(--texto-xs); }
.num { font-variant-numeric: tabular-nums; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.forte { font-weight: var(--peso-forte); }
.icone { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone--sm { width: 16px; height: 16px; } .icone--lg { width: 22px; height: 22px; } .icone--xl { width: 28px; height: 28px; }
.sobretitulo { font-size: var(--texto-xs); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letras-caps); text-transform: uppercase; color: var(--cor-destaque); }
.separador { border: 0; border-top: var(--borda); margin: var(--esp-4) 0; }

/* ---------- Botão ---------- */
.btn {
  --btn-bg: var(--cor-superficie); --btn-cor: var(--cor-texto); --btn-borda: var(--cor-borda-controle);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  height: var(--controle-md); padding: 0 var(--esp-4); border-radius: var(--raio-md);
  background: var(--btn-bg); color: var(--btn-cor); border: 1px solid var(--btn-borda);
  font-weight: var(--peso-forte); font-size: var(--texto-sm); line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva), color var(--dur-rapida);
}
.btn:hover { --btn-bg: var(--cor-superficie-2); --btn-borda: var(--neutro-500); color: var(--btn-cor); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.btn--primario { --btn-bg: var(--cor-primaria); --btn-cor: var(--cor-sobre-primaria); --btn-borda: var(--cor-primaria); box-shadow: var(--sombra-1); }
.btn--primario:hover { --btn-bg: var(--cor-primaria-hover); --btn-borda: var(--cor-primaria-hover); }
.btn--primario:active { --btn-bg: var(--cor-primaria-ativa); }
.btn--secundario { --btn-bg: var(--cor-destaque-suave); --btn-cor: var(--marca-800); --btn-borda: transparent; }
.btn--secundario:hover { --btn-bg: var(--marca-200); --btn-borda: transparent; }
.btn--fantasma { --btn-bg: transparent; --btn-borda: transparent; }
.btn--fantasma:hover { --btn-bg: var(--cor-superficie-3); --btn-borda: transparent; }
.btn--perigo { --btn-bg: var(--erro-solido); --btn-cor: #fff; --btn-borda: var(--erro-solido); }
.btn--perigo:hover { --btn-bg: #941F18; --btn-borda: #941F18; color: #fff; }
.btn--perigo-suave { --btn-bg: transparent; --btn-cor: var(--erro-fg); --btn-borda: var(--erro-borda); }
.btn--perigo-suave:hover { --btn-bg: var(--erro-bg); --btn-borda: var(--erro-borda); color: var(--erro-fg); }
.btn--sm { height: var(--controle-sm); padding: 0 var(--esp-3); border-radius: var(--raio-sm); font-size: var(--texto-xs); }
.btn--lg { height: var(--controle-lg); padding: 0 var(--esp-6); font-size: var(--texto-md); }
.btn--bloco { width: 100%; }
.btn--icone { width: var(--controle-md); padding: 0; }
.btn--icone.btn--sm { width: var(--controle-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[data-carregando] { color: transparent !important; pointer-events: none; }
.btn[data-carregando] > * { visibility: hidden; }
.btn[data-carregando]::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--btn-cor); border-right-color: transparent; animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.grupo-btn { display: inline-flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }

/* ---------- Campos de formulário ---------- */
.campo { display: grid; gap: 6px; min-width: 0; align-content: start; }
.campo__rotulo { display: flex; align-items: center; gap: var(--esp-1); font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--cor-texto); }
.campo__opcional { font-weight: var(--peso-normal); color: var(--cor-texto-3); font-size: var(--texto-xs); }
.campo__obrigatorio { color: var(--erro-solido); }
.campo__ajuda { font-size: var(--texto-xs); color: var(--cor-texto-2); line-height: 1.45; }
.campo__msg { display: flex; align-items: flex-start; gap: 6px; font-size: var(--texto-xs); font-weight: var(--peso-medio); line-height: 1.4; }
.campo__msg .icone { width: 14px; height: 14px; margin-top: 1px; }
.campo__msg--erro { color: var(--erro-fg); }
.campo__msg--sucesso { color: var(--sucesso-fg); }
.campo__msg:empty { display: none; }

.input {
  display: block; width: 100%; min-height: var(--controle-md); padding: 9px 12px;
  background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda-controle); border-radius: var(--raio-md);
  font-size: var(--texto-md); line-height: 1.4; box-shadow: inset 0 1px 1px rgba(51, 38, 31, 0.04);
  transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida), background var(--dur-rapida);
  appearance: none; -webkit-appearance: none;
}
.input::placeholder { color: var(--cor-texto-3); opacity: 1; }
.input:hover { border-color: var(--neutro-600); }
.input:focus-visible, .input:focus { outline: none; border-color: var(--cor-foco); box-shadow: var(--anel-foco); }
.input:disabled, .input[readonly] { background: var(--cor-superficie-3); color: var(--cor-texto-2); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--erro-solido); }
.input[aria-invalid="true"]:focus { box-shadow: var(--anel-erro); }
.input[data-valido="true"] { border-color: var(--sucesso-solido); }
textarea.input { min-height: 96px; resize: vertical; }
select.input {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2365524A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input--sm { min-height: var(--controle-sm); padding: 5px 10px; font-size: var(--texto-sm); border-radius: var(--raio-sm); }
input[type="number"].input { -moz-appearance: textfield; }
input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; }
input[type="date"].input { min-height: var(--controle-md); }
input[type="date"].input::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; } /* sem JS ou data-nativo */

/* Entrada com prefixo/sufixo/ícone */
.entrada { position: relative; display: flex; align-items: stretch; }
.entrada > .input { flex: 1; min-width: 0; }
.entrada__prefixo, .entrada__sufixo {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: var(--cor-texto-2);
  font-size: var(--texto-sm); pointer-events: none;
}
.entrada__prefixo { left: 12px; } .entrada__sufixo { right: 12px; }
.entrada--prefixo > .input { padding-left: 38px; }
.entrada--prefixo-texto > .input { padding-left: 40px; }
.entrada--sufixo > .input { padding-right: 38px; }
.entrada__acao { position: absolute; right: 4px; top: 4px; bottom: 4px; }

/* Caixa de seleção, rádio e interruptor */
.escolha { display: flex; align-items: flex-start; gap: var(--esp-3); cursor: pointer; min-height: 24px; font-size: var(--texto-md); }
.escolha__texto { display: grid; gap: 2px; padding-top: 1px; }
.escolha__titulo { font-weight: var(--peso-medio); line-height: 1.35; }
.escolha__ajuda { font-size: var(--texto-xs); color: var(--cor-texto-2); }
.caixa, .radio {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1.5px solid var(--cor-borda-controle); background: var(--cor-superficie) center/14px no-repeat;
  cursor: pointer; transition: background-color var(--dur-rapida), border-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.caixa { border-radius: 5px; }
.radio { border-radius: 50%; }
.caixa:hover, .radio:hover { border-color: var(--neutro-700); }
.caixa:checked {
  background-color: var(--cor-primaria); border-color: var(--cor-primaria);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCF8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.radio:checked { border-color: var(--cor-primaria); border-width: 6px; }
.caixa:focus-visible, .radio:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.caixa:disabled, .radio:disabled { opacity: 0.5; cursor: not-allowed; }
.interruptor {
  appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 40px; height: 24px; margin: 0;
  border-radius: var(--raio-pilula); background: var(--neutro-300); cursor: pointer; transition: background var(--dur-media) var(--curva);
}
.interruptor::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(31, 22, 17, 0.3); transition: transform var(--dur-media) var(--curva);
}
.interruptor:checked { background: var(--sucesso-solido); }
.interruptor:checked::after { transform: translateX(16px); }
.interruptor:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.interruptor:disabled { opacity: 0.5; cursor: not-allowed; }
.grupo-escolhas { display: grid; gap: var(--esp-3); border: 0; padding: 0; margin: 0; }
.grupo-escolhas > legend { font-size: var(--texto-sm); font-weight: var(--peso-medio); margin-bottom: var(--esp-2); padding: 0; }

/* Contador (− 1 +) */
.contador { display: inline-flex; align-items: center; border: 1px solid var(--cor-borda-controle); border-radius: var(--raio-md); background: var(--cor-superficie); height: var(--controle-md); }
.contador button { width: 36px; height: 100%; border: 0; background: none; cursor: pointer; color: var(--cor-texto); font-size: 18px; border-radius: var(--raio-md); }
.contador button:hover:not(:disabled) { background: var(--cor-superficie-3); }
.contador button:disabled { color: var(--neutro-300); cursor: not-allowed; }
.contador input { width: 44px; border: 0; text-align: center; background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; }
.contador:focus-within { box-shadow: var(--anel-foco); border-color: var(--cor-foco); }

/* Combobox */
.combo { position: relative; }
.combo__lista {
  position: absolute; z-index: var(--z-menu); top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; overflow-y: auto;
  margin: 0; padding: var(--esp-1); list-style: none; background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-md); box-shadow: var(--sombra-3);
}
.combo__opcao { padding: 8px 10px; border-radius: var(--raio-sm); cursor: pointer; display: flex; justify-content: space-between; gap: var(--esp-3); font-size: var(--texto-sm); }
.combo__opcao small { color: var(--cor-texto-3); }
.combo__opcao[aria-selected="true"], .combo__opcao:hover { background: var(--cor-destaque-suave); }
.combo__vazio { padding: 8px 10px; color: var(--cor-texto-3); font-size: var(--texto-sm); }

/* Upload */
.upload {
  position: relative; display: grid; place-items: center; gap: var(--esp-2); text-align: center; padding: var(--esp-8) var(--esp-4);
  border: 1.5px dashed var(--cor-borda-controle); border-radius: var(--raio-lg); background: var(--cor-superficie-2); cursor: pointer;
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.upload:hover, .upload[data-arrastando] { border-color: var(--cor-destaque); background: var(--marca-50); }
.upload:focus-within { box-shadow: var(--anel-foco); border-color: var(--cor-foco); }
.upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload__icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-destaque-suave); color: var(--cor-destaque); }
.previas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--esp-3); }
.previas figure { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: var(--raio-md); overflow: hidden; background: var(--cor-superficie-3); }
.previas img { width: 100%; height: 100%; object-fit: cover; }
.previas figcaption { position: absolute; left: 4px; bottom: 4px; }

/* ---------- Selo (badge) ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--raio-pilula);
  font-size: var(--texto-xs); font-weight: var(--peso-forte); white-space: nowrap; line-height: 1;
  background: var(--cor-superficie-3); color: var(--neutro-700); border: 1px solid transparent;
}
.selo--marca { background: var(--cor-destaque-suave); color: var(--marca-800); }
.selo--sucesso { background: var(--sucesso-bg); color: var(--sucesso-fg); }
.selo--aviso { background: var(--aviso-bg); color: var(--aviso-fg); }
.selo--erro { background: var(--erro-bg); color: var(--erro-fg); }
.selo--info { background: var(--info-bg); color: var(--info-fg); }
.selo--contorno { background: transparent; border-color: var(--cor-borda-forte); }
.selo--ponto::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--sm { height: 20px; padding: 0 8px; font-size: var(--texto-2xs); }
.ponto-novo { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-destaque); box-shadow: 0 0 0 3px rgba(138, 90, 60, 0.18); flex-shrink: 0; }

/* ---------- Cartão ---------- */
.cartao { background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); min-width: 0; }
.cartao__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: var(--borda); }
.cartao__titulo { font-family: var(--fonte-texto); font-size: var(--texto-md); font-weight: var(--peso-forte); letter-spacing: 0; }
.cartao__descricao { font-size: var(--texto-sm); color: var(--cor-texto-2); margin-top: 2px; }
.cartao__corpo { padding: var(--esp-5); }
.cartao__rodape { padding: var(--esp-3) var(--esp-5); border-top: var(--borda); background: var(--cor-superficie-2); border-radius: 0 0 var(--raio-lg) var(--raio-lg); }
.cartao--interativo { transition: border-color var(--dur-rapida), box-shadow var(--dur-media), transform var(--dur-media) var(--curva); text-decoration: none; color: inherit; display: block; }
.cartao--interativo:hover { border-color: var(--cor-borda-forte); box-shadow: var(--sombra-2); color: inherit; }

/* ---------- Tabela ---------- */
.tabela-caixa { background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); overflow: hidden; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--texto-sm); }
.tabela th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap; padding: 10px var(--esp-4);
  background: var(--cor-superficie-2); color: var(--cor-texto-2); font-size: var(--texto-xs); font-weight: var(--peso-forte); border-bottom: var(--borda);
}
.tabela td { padding: 12px var(--esp-4); border-bottom: var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background var(--dur-rapida); }
.tabela tbody tr:hover { background: var(--marca-50); }
.tabela .num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .acoes { width: 1%; white-space: nowrap; text-align: right; }
.tabela__link { color: var(--cor-texto); font-weight: var(--peso-medio); text-decoration: none; }
.tabela__link:hover { color: var(--cor-primaria); text-decoration: underline; }
.miniatura { width: 44px; height: 55px; border-radius: var(--raio-sm); object-fit: cover; background: var(--cor-superficie-3); }
@media (max-width: 760px) {
  .tabela--empilhar thead { display: none; }
  .tabela--empilhar, .tabela--empilhar tbody, .tabela--empilhar tr, .tabela--empilhar td { display: block; width: 100%; }
  .tabela--empilhar tr { padding: var(--esp-3) var(--esp-4); border-bottom: var(--borda); display: grid; grid-template-columns: auto 1fr; gap: 4px var(--esp-3); }
  .tabela--empilhar tbody tr:last-child { border-bottom: 0; }
  .tabela--empilhar td { padding: 0; border: 0; grid-column: 2; display: flex; justify-content: space-between; gap: var(--esp-3); }
  .tabela--empilhar td[data-rotulo]::before { content: attr(data-rotulo); color: var(--cor-texto-2); font-size: var(--texto-xs); }
  .tabela--empilhar td.principal { font-size: var(--texto-md); }
  .tabela--empilhar td.midia { grid-column: 1; grid-row: span 4; }
  .tabela--empilhar td.acoes { width: auto; text-align: left; justify-content: flex-start; padding-top: var(--esp-2); }
  .tabela--empilhar .num { text-align: right; }
}

/* ---------- Abas ---------- */
.abas { display: flex; gap: var(--esp-1); border-bottom: var(--borda); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--esp-5); }
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: inline-flex; align-items: center; gap: var(--esp-2); padding: 10px var(--esp-3); margin-bottom: -1px;
  color: var(--cor-texto-2); text-decoration: none; font-weight: var(--peso-medio); font-size: var(--texto-sm); white-space: nowrap;
  border-bottom: 2px solid transparent; border-radius: var(--raio-sm) var(--raio-sm) 0 0; transition: color var(--dur-rapida), border-color var(--dur-rapida), background var(--dur-rapida);
}
.aba:hover { color: var(--cor-texto); background: var(--cor-superficie-3); }
.aba[aria-current="page"], .aba[aria-selected="true"] { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.aba .selo { height: 20px; padding: 0 7px; }

/* ---------- Alerta (inline e faixa) ---------- */
.alerta {
  --a-bg: var(--info-bg); --a-fg: var(--info-fg); --a-borda: var(--info-borda);
  display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3) var(--esp-4);
  background: var(--a-bg); color: var(--a-fg); border: 1px solid var(--a-borda); border-radius: var(--raio-md); font-size: var(--texto-sm);
}
.alerta > .icone { margin-top: 1px; }
.alerta__conteudo { flex: 1; display: grid; gap: 2px; min-width: 0; }
.alerta__titulo { font-weight: var(--peso-forte); }
.alerta__acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-top: var(--esp-2); }
.alerta a { color: inherit; font-weight: var(--peso-forte); }
.alerta--sucesso { --a-bg: var(--sucesso-bg); --a-fg: var(--sucesso-fg); --a-borda: var(--sucesso-borda); }
.alerta--aviso { --a-bg: var(--aviso-bg); --a-fg: var(--aviso-fg); --a-borda: var(--aviso-borda); }
.alerta--erro { --a-bg: var(--erro-bg); --a-fg: var(--erro-fg); --a-borda: var(--erro-borda); }
.alerta--marca { --a-bg: var(--marca-50); --a-fg: var(--marca-800); --a-borda: var(--marca-200); }
.alerta--faixa { border-radius: 0; border-width: 0 0 1px; justify-content: center; }

/* ---------- Toast ---------- */
.toasts {
  position: fixed; z-index: var(--z-toast); right: var(--esp-5); bottom: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-2);
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  --t-cor: var(--info-solido);
  pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: var(--esp-3); align-items: flex-start;
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4); background: var(--neutro-900); color: var(--neutro-50);
  border-radius: var(--raio-md); box-shadow: var(--sombra-3); font-size: var(--texto-sm);
  animation: toast-entra var(--dur-lenta) var(--curva);
}
.toast.saindo { animation: toast-sai var(--dur-media) var(--curva-saida) forwards; }
.toast > .icone { color: var(--t-cor); margin-top: 1px; }
.toast--sucesso { --t-cor: #7FD39B; } .toast--erro { --t-cor: #FF9C90; } .toast--aviso { --t-cor: #F5C46B; } .toast--info { --t-cor: #9EC2F2; } .toast--carregando { --t-cor: var(--marca-300); }
.toast__conteudo { flex: 1; display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.toast__titulo { font-weight: var(--peso-forte); color: #fff; }
.toast__acoes { display: flex; gap: var(--esp-3); margin-top: var(--esp-2); }
.toast__acao { background: none; border: 0; padding: 0; color: var(--marca-200); font-weight: var(--peso-forte); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.toast__fechar { background: none; border: 0; color: var(--neutro-300); cursor: pointer; padding: 4px; border-radius: var(--raio-sm); margin: -2px -2px 0 0; display: grid; place-items: center; width: 28px; height: 28px; }
.toast__fechar:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.toast__tempo { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--t-cor); opacity: 0.7; transform-origin: left; animation: toast-tempo linear forwards; }
.toast:hover .toast__tempo, .toast:focus-within .toast__tempo { animation-play-state: paused; }
.toast .girador { margin-top: 2px; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-sai { to { opacity: 0; transform: translateX(16px); } }
@keyframes toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.girador { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar 0.7s linear infinite; display: inline-block; flex-shrink: 0; }
@media (max-width: 640px) { .toasts { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--esp-4); } }

/* ---------- Diálogo e gaveta ---------- */
.dialogo {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--raio-xl);
  background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-4); overflow: hidden;
}
.dialogo[open] { display: flex; flex-direction: column; animation: dialogo-entra var(--dur-lenta) var(--curva); }
.dialogo::backdrop { background: var(--cor-sobreposicao); backdrop-filter: blur(2px); animation: fundo-entra var(--dur-media) ease; }
.dialogo__cabecalho { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-5) var(--esp-6) 0; }
.dialogo__icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--cor-destaque-suave); color: var(--cor-destaque); }
.dialogo__icone--perigo { background: var(--erro-bg); color: var(--erro-solido); }
.dialogo__icone--aviso { background: var(--aviso-bg); color: var(--aviso-solido); }
.dialogo__titulo { font-size: var(--texto-xl); }
.dialogo__corpo { padding: var(--esp-3) var(--esp-6) var(--esp-5); overflow-y: auto; color: var(--cor-texto-2); }
.dialogo__rodape { display: flex; justify-content: flex-end; gap: var(--esp-2); flex-wrap: wrap; padding: var(--esp-4) var(--esp-6); background: var(--cor-superficie-2); border-top: var(--borda); }
.dialogo__fechar { margin-left: auto; }
.dialogo--grande { width: min(760px, calc(100vw - 32px)); }
.gaveta {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(420px, 92vw); border-radius: 0; padding: 0; border: 0;
  background: var(--cor-superficie); box-shadow: var(--sombra-4);
}
.gaveta[open] { display: flex; flex-direction: column; animation: gaveta-entra var(--dur-lenta) var(--curva); }
.gaveta--esquerda { margin: 0 auto 0 0; }
.gaveta--esquerda[open] { animation-name: gaveta-entra-esq; }
.gaveta::backdrop { background: var(--cor-sobreposicao); animation: fundo-entra var(--dur-media) ease; }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes gaveta-entra { from { transform: translateX(100%); } }
@keyframes gaveta-entra-esq { from { transform: translateX(-100%); } }
@keyframes fundo-entra { from { opacity: 0; } }
body:has(dialog[open]) { overflow: hidden; }

/* ---------- Menu suspenso, popover e dica ---------- */
.menu { position: relative; display: inline-block; }
.menu__lista, .popover {
  position: absolute; z-index: var(--z-menu); min-width: 200px; padding: var(--esp-1); margin: 0; list-style: none;
  background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-md); box-shadow: var(--sombra-3);
  animation: menu-entra var(--dur-media) var(--curva); transform-origin: top right;
}
.menu__lista { right: 0; top: calc(100% + 6px); }
.menu__lista[data-lado="esquerda"] { right: auto; left: 0; transform-origin: top left; }
.menu__lista[data-lado="cima"] { top: auto; bottom: calc(100% + 6px); }
.menu__item {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; padding: 8px 10px; border: 0; border-radius: var(--raio-sm);
  background: none; color: var(--cor-texto); text-align: left; text-decoration: none; font-size: var(--texto-sm); cursor: pointer; white-space: nowrap;
}
.menu__item .icone { color: var(--cor-texto-2); }
.menu__item:hover, .menu__item:focus-visible { background: var(--cor-superficie-3); color: var(--cor-texto); outline: none; }
.menu__item--perigo, .menu__item--perigo .icone { color: var(--erro-fg); }
.menu__item--perigo:hover, .menu__item--perigo:focus-visible { background: var(--erro-bg); color: var(--erro-fg); }
.menu__item form { display: contents; }
.menu__separador { height: 1px; background: var(--cor-borda); margin: var(--esp-1) 0; }
.menu__titulo { padding: 6px 10px 4px; font-size: var(--texto-xs); color: var(--cor-texto-3); font-weight: var(--peso-forte); }
@keyframes menu-entra { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.popover { padding: var(--esp-4); width: 300px; }
.dica-bolha {
  position: fixed; z-index: var(--z-tour); max-width: 260px; padding: 6px 10px; border-radius: var(--raio-sm);
  background: var(--neutro-900); color: var(--neutro-50); font-size: var(--texto-xs); line-height: 1.45; pointer-events: none;
  box-shadow: var(--sombra-2); animation: fundo-entra var(--dur-rapida) ease;
}
.btn-ajuda {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  background: none; color: var(--cor-texto-3); cursor: help; vertical-align: middle;
}
.btn-ajuda:hover, .btn-ajuda:focus-visible { color: var(--cor-destaque); background: var(--cor-destaque-suave); }
.btn-ajuda .icone { width: 16px; height: 16px; }

/* ---------- Esqueleto (carregamento) ---------- */
.esqueleto {
  display: block; border-radius: var(--raio-sm); color: transparent !important;
  background: linear-gradient(90deg, var(--neutro-100) 0%, var(--neutro-50) 40%, var(--neutro-100) 80%) 0 0 / 300% 100%;
  animation: brilho 1.4s ease-in-out infinite;
}
.esqueleto--texto { height: 0.9em; margin: 0.3em 0; }
.esqueleto--circulo { border-radius: 50%; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.foto-moldura { position: relative; overflow: hidden; background: var(--cor-superficie-3); }
.foto-moldura::before { content: ''; position: absolute; inset: 0; background: inherit; }
.foto-moldura img { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-lenta) ease; }
.foto-moldura img.carregada, .foto-moldura img[data-pronta] { opacity: 1; }
.sem-js .foto-moldura img { opacity: 1; }

/* ---------- Estado vazio ---------- */
.vazio { display: grid; justify-items: center; text-align: center; gap: var(--esp-3); padding: var(--esp-12) var(--esp-6); }
.vazio__icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-destaque-suave); color: var(--cor-destaque); margin-bottom: var(--esp-1); }
.vazio__titulo { font-family: var(--fonte-titulo); font-size: var(--texto-xl); }
.vazio__texto { max-width: 46ch; color: var(--cor-texto-2); }
.vazio__acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--esp-2); }

/* ---------- Paginação ---------- */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; padding: var(--esp-3) var(--esp-4); border-top: var(--borda); font-size: var(--texto-sm); color: var(--cor-texto-2); }
.paginacao__paginas { display: flex; gap: var(--esp-1); align-items: center; }
.paginacao__pagina {
  min-width: 36px; height: 36px; padding: 0 var(--esp-2); display: inline-grid; place-items: center; border-radius: var(--raio-sm);
  color: var(--cor-texto); text-decoration: none; font-weight: var(--peso-medio); font-variant-numeric: tabular-nums;
}
.paginacao__pagina:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }
.paginacao__pagina[aria-current="page"] { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.paginacao__pagina[aria-disabled="true"] { color: var(--neutro-300); pointer-events: none; }
.paginacao__reticencias { padding: 0 4px; color: var(--cor-texto-3); }

/* ---------- Barra de progresso da navegação ---------- */
.barra-nav { position: fixed; z-index: var(--z-toast); top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.barra-nav::after {
  content: ''; position: absolute; inset: 0; background: var(--cor-destaque); transform-origin: left; transform: scaleX(0);
  transition: transform 8s cubic-bezier(0.1, 0.7, 0.1, 1);
}
.barra-nav[data-ativa]::after { transform: scaleX(0.92); }

/* ---------- Tour guiado ---------- */
.tour-mascara { position: fixed; inset: 0; z-index: var(--z-tour); pointer-events: auto; }
.tour-foco {
  position: fixed; z-index: var(--z-tour); border-radius: var(--raio-md); pointer-events: none;
  box-shadow: 0 0 0 4px rgba(242, 232, 222, 0.9), 0 0 0 9999px rgba(31, 22, 17, 0.55);
  transition: all var(--dur-lenta) var(--curva);
}
.tour-balao {
  position: fixed; z-index: calc(var(--z-tour) + 1); width: min(360px, calc(100vw - 24px)); padding: var(--esp-5);
  background: var(--cor-superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-4); color: var(--cor-texto);
  animation: dialogo-entra var(--dur-lenta) var(--curva); transition: top var(--dur-lenta) var(--curva), left var(--dur-lenta) var(--curva);
}
.tour-balao__passo { font-size: var(--texto-xs); color: var(--cor-texto-3); font-weight: var(--peso-forte); }
.tour-balao__titulo { font-size: var(--texto-xl); margin: 6px 0 var(--esp-2); }
.tour-balao__texto { color: var(--cor-texto-2); font-size: var(--texto-sm); }
.tour-balao__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-5); }
.tour-pontos { display: flex; gap: 5px; }
.tour-pontos span { width: 6px; height: 6px; border-radius: 50%; background: var(--neutro-200); transition: all var(--dur-media); }
.tour-pontos span[data-atual] { width: 18px; border-radius: 3px; background: var(--cor-destaque); }
.tour-pontos span[data-feito] { background: var(--marca-300); }
.tour-balao__fechar { position: absolute; top: var(--esp-2); right: var(--esp-2); }
.tour-convite {
  position: fixed; z-index: var(--z-toast); left: var(--esp-5); bottom: var(--esp-5); width: min(360px, calc(100vw - 32px));
  display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-4); box-shadow: var(--sombra-3);
  animation: toast-entra var(--dur-lenta) var(--curva);
}
@media (min-width: 1024px) { .painel .tour-convite { left: calc(var(--largura-barra-lateral) + var(--esp-5)); } }
@media (max-width: 640px) { .tour-convite { left: 50%; transform: translateX(-50%); bottom: var(--esp-4); } }

/* ---------- Seletor de data (input[type=date] melhorado pelo ui.js) ---------- */
.entrada--data { flex: 1 1 auto; min-width: 0; }
.entrada--data > .input { padding-right: 44px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.entrada--data > .entrada__acao { color: var(--cor-texto-2); }
.entrada--data > .entrada__acao[aria-expanded="true"] { background: var(--cor-superficie-3); color: var(--cor-primaria); }
.calendario {
  position: fixed; z-index: var(--z-menu); width: 312px; max-width: calc(100vw - 16px); padding: var(--esp-3) var(--esp-3) var(--esp-2);
  background: var(--cor-superficie); border: var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-3);
  animation: menu-entra var(--dur-media) var(--curva); transform-origin: top left;
}
.calendario[data-lado="cima"] { transform-origin: bottom left; }
.calendario__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.calendario__titulo {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; margin-left: -2px; border: 0; border-radius: var(--raio-sm);
  background: none; color: var(--cor-texto); font: inherit; font-size: var(--texto-md); font-weight: var(--peso-forte); letter-spacing: -0.01em; cursor: pointer;
}
.calendario__titulo .icone { color: var(--cor-texto-2); transition: transform var(--dur-rapida) var(--curva); }
.calendario__seta-cima { transform: rotate(180deg); }
.calendario__titulo:hover { background: var(--cor-superficie-3); }
.calendario__titulo:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.calendario__nav { display: flex; gap: 2px; }
.calendario__grade { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendario__grade th { padding: 4px 0 8px; font-size: var(--texto-2xs); font-weight: var(--peso-forte); letter-spacing: var(--espaco-letras-caps); color: var(--cor-texto-3); text-align: center; }
.calendario__grade td { padding: 1px 0; text-align: center; }
.calendario__grade td[data-periodo] { background: var(--cor-destaque-suave); }
.calendario__grade td[data-periodo="inicio"] { border-radius: var(--raio-pilula) 0 0 var(--raio-pilula); }
.calendario__grade td[data-periodo="fim"] { border-radius: 0 var(--raio-pilula) var(--raio-pilula) 0; }
.calendario__dia {
  position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--cor-texto); font: inherit; font-size: var(--texto-sm); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva);
}
.calendario__dia:hover { background: var(--cor-superficie-3); }
.calendario__dia:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.calendario__dia[data-fora] { color: var(--cor-texto-3); }
.calendario__dia[aria-current="date"] { color: var(--cor-primaria); font-weight: var(--peso-forte); }
.calendario__dia[aria-current="date"]::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.calendario__dia[aria-pressed="true"] { background: var(--cor-primaria); color: var(--cor-sobre-primaria); font-weight: var(--peso-forte); }
.calendario__dia[aria-pressed="true"]:hover { background: var(--cor-primaria-hover); }
.calendario__dia[aria-disabled="true"] { color: var(--neutro-300); background: none; cursor: not-allowed; text-decoration: line-through; }
.calendario__meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: var(--esp-2); }
.calendario__mes {
  height: 44px; border: var(--borda); border-color: transparent; border-radius: var(--raio-md); background: none;
  color: var(--cor-texto); font: inherit; font-size: var(--texto-sm); cursor: pointer;
}
.calendario__mes:hover { background: var(--cor-superficie-3); }
.calendario__mes:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.calendario__mes[aria-current="true"] { background: var(--cor-primaria); color: var(--cor-sobre-primaria); font-weight: var(--peso-forte); }
.calendario__mes[aria-disabled="true"] { color: var(--neutro-300); cursor: not-allowed; }
.calendario__rodape { display: flex; justify-content: space-between; align-items: center; margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: var(--borda); }
@media (pointer: coarse) { .calendario__dia { width: 40px; height: 40px; } }