/*
 * Componentes no estilo shadcn/ui, recriados em CSS puro.
 * Base: registro @shadcn (React + Tailwind + Radix), adaptado para HTML sem build.
 * Comportamentos (abas, diálogos, carrossel, toasts) ficam em ui.js.
 *
 * Os nomes das variáveis seguem os tokens do shadcn (--primary, --border, --ring...)
 * com prefixo --ui- para não colidir com as variáveis das páginas.
 */

:root {
  --ui-background: #0B0B0B;
  --ui-foreground: #F2F2F2;
  --ui-card: #131313;
  --ui-popover: #161616;
  --ui-muted: #1A1A1A;
  --ui-muted-foreground: #A6A6A6;
  --ui-primary: #F96D00;
  --ui-primary-hover: #FF8424;
  --ui-primary-foreground: #0B0B0B;
  --ui-secondary: #1F1F1F;
  --ui-secondary-hover: #2A2A2A;
  --ui-secondary-foreground: #F2F2F2;
  --ui-accent: rgba(255, 255, 255, .08);
  --ui-accent-foreground: #F2F2F2;
  --ui-destructive: #E5484D;
  --ui-destructive-hover: #D93A40;
  --ui-destructive-ring: rgba(229, 72, 77, .35);
  --ui-success: #3DD68C;
  --ui-border: rgba(255, 255, 255, .12);
  --ui-input: rgba(255, 255, 255, .16);
  --ui-ring: rgba(249, 109, 0, .5);
  --ui-scrollbar: rgba(255, 255, 255, .18);
  --ui-scrollbar-hover: rgba(255, 255, 255, .32);
  --ui-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .35);
  --ui-radius: 8px;
  --ui-font: "Inter", system-ui, sans-serif;
}

/* Permite animar altura até "auto" (acordeão) onde o navegador suporta */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* ---------------------------------------------------------------------------
 * Button
 * <button class="ui-button" data-variant="outline" data-size="sm">Texto</button>
 * Variantes: default (sem atributo), secondary, outline, ghost, destructive, link
 * Tamanhos:  default (sem atributo), sm, lg, icon, icon-sm, icon-lg
 * ------------------------------------------------------------------------- */

.ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; white-space: nowrap;
  height: 36px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: var(--ui-radius);
  background: var(--ui-primary); color: var(--ui-primary-foreground);
  font: 500 .875rem/1 var(--ui-font); text-decoration: none; cursor: pointer;
  outline: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ui-button:hover { background: var(--ui-primary-hover); }
.ui-button:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-button:disabled,
.ui-button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ui-button svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.ui-button:has(> svg) { padding-inline: 12px; }

.ui-button[data-variant="secondary"] { background: var(--ui-secondary); color: var(--ui-secondary-foreground); }
.ui-button[data-variant="secondary"]:hover { background: var(--ui-secondary-hover); }

.ui-button[data-variant="outline"] {
  background: rgba(255, 255, 255, .03); color: var(--ui-foreground);
  border-color: var(--ui-input); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.ui-button[data-variant="outline"]:hover { background: var(--ui-accent); color: var(--ui-accent-foreground); }
.ui-button[data-variant="outline"]:focus-visible { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-ring); }

.ui-button[data-variant="ghost"] { background: transparent; color: var(--ui-foreground); }
.ui-button[data-variant="ghost"]:hover { background: var(--ui-accent); color: var(--ui-accent-foreground); }

.ui-button[data-variant="destructive"] { background: var(--ui-destructive); color: #FFF; }
.ui-button[data-variant="destructive"]:hover { background: var(--ui-destructive-hover); }
.ui-button[data-variant="destructive"]:focus-visible { box-shadow: 0 0 0 3px var(--ui-destructive-ring); }

.ui-button[data-variant="link"] { background: transparent; color: var(--ui-primary); text-underline-offset: 4px; }
.ui-button[data-variant="link"]:hover { text-decoration: underline; }

.ui-button[data-size="sm"] { height: 32px; padding: 0 12px; gap: 6px; }
.ui-button[data-size="sm"]:has(> svg) { padding-inline: 10px; }
.ui-button[data-size="lg"] { height: 40px; padding: 0 24px; }
.ui-button[data-size="lg"]:has(> svg) { padding-inline: 16px; }
.ui-button[data-size="icon"] { width: 36px; height: 36px; padding: 0; }
.ui-button[data-size="icon-sm"] { width: 32px; height: 32px; padding: 0; }
.ui-button[data-size="icon-lg"] { width: 40px; height: 40px; padding: 0; }

/* ---------------------------------------------------------------------------
 * Colorful Button — <a class="ui-button-colorful" href="…">Texto <svg …></a>
 * Base: "Colorful Button" do 21st.dev (@Shatlyk1011 / emerald-ui, MIT).
 * O gradiente ciano/roxo virou laranja da marca e ganhou movimento contínuo,
 * brilho externo e seta que desliza no hover.
 * ------------------------------------------------------------------------- */

.ui-button-colorful {
  --grad: linear-gradient(90deg, #F96D00, #FFB347, #FF4D00, #F96D00);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; overflow: hidden;
  border: 0; border-radius: var(--ui-radius);
  background: #2A1400; color: #FFF;
  font: 600 .9375rem/1 var(--ui-font); letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); /* legibilidade do branco sobre o laranja claro */
  text-decoration: none; white-space: nowrap; cursor: pointer; outline: none;
  transition: transform .2s ease, box-shadow .3s ease;
  box-shadow: 0 6px 20px -8px rgba(249, 109, 0, .55);
}
/* Camada de gradiente borrado, em movimento contínuo */
.ui-button-colorful::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--grad); background-size: 300% 100%;
  filter: blur(6px); opacity: .85;
  animation: ui-colorful-flow 4s linear infinite;
  transition: opacity .5s ease;
}
/* Faixa de brilho que atravessa o botão no hover */
.ui-button-colorful::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
}
.ui-button-colorful svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .25s ease; }

.ui-button-colorful:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(249, 109, 0, .8); }
.ui-button-colorful:hover::before { opacity: 1; animation-duration: 2s; }
.ui-button-colorful:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.ui-button-colorful:hover svg:last-child { transform: translateX(3px); }
.ui-button-colorful:active { transform: translateY(0) scale(.97); }
.ui-button-colorful:disabled,
.ui-button-colorful[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.ui-button-colorful:focus-visible { box-shadow: 0 0 0 3px var(--ui-background), 0 0 0 5px var(--ui-primary); }

.ui-button-colorful[data-size="lg"] { height: 40px; padding: 0 20px; font-size: .875rem; }
.ui-button-colorful[data-size="xl"] { height: 48px; padding: 0 28px; font-size: 1rem; }
.ui-button-colorful[data-size="xl"] svg { width: 18px; height: 18px; }

@keyframes ui-colorful-flow { to { background-position: 300% 0; } }

/* ---------------------------------------------------------------------------
 * Shine Button — <a class="ui-button-shine" href="…">Texto <svg …></a>
 * Irmão cinza do Colorful: uma luz percorre a borda o tempo todo; no hover o
 * brilho atravessa o botão e a seta sai pela direita e volta pela esquerda.
 * Para disparar o hover a partir de um bloco inteiro (ex.: um card), coloque
 * a classe "ui-shine-trigger" no elemento pai.
 * ------------------------------------------------------------------------- */

@property --ui-shine-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.ui-button-shine {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; overflow: hidden;
  border: 0; border-radius: var(--ui-radius); background: transparent;
  color: #CFCFCF; font: 500 .875rem/1 var(--ui-font);
  text-decoration: none; white-space: nowrap; cursor: pointer; outline: none;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Borda: cinza fixo + um feixe de luz girando (conic-gradient) */
.ui-button-shine::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background:
    conic-gradient(from var(--ui-shine-angle), transparent 0 72%, rgba(255, 255, 255, .55) 88%, transparent 100%),
    rgba(255, 255, 255, .14);
  animation: ui-shine-orbit 3.5s linear infinite;
}
/* Miolo cinza com a faixa de brilho, que só se move no hover */
.ui-button-shine::after {
  content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--ui-radius) - 1px);
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .14) 50%, transparent 58%) no-repeat,
    #1C1C1C;
  background-size: 250% 100%, auto;
  background-position: 120% 0, 0 0;
}
.ui-button-shine svg { width: 16px; height: 16px; flex-shrink: 0; }

.ui-button-shine:hover,
.ui-shine-trigger:hover .ui-button-shine { color: #FFF; transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(255, 255, 255, .25); }
.ui-button-shine:hover::before,
.ui-shine-trigger:hover .ui-button-shine::before { animation-duration: 1.2s; }
.ui-button-shine:hover::after,
.ui-shine-trigger:hover .ui-button-shine::after { background-position: -20% 0, 0 0; transition: background-position .8s ease; }
.ui-button-shine:hover svg:last-child,
.ui-shine-trigger:hover .ui-button-shine svg:last-child { animation: ui-shine-arrow .6s ease; }
.ui-button-shine:active { transform: translateY(0) scale(.97); }
.ui-button-shine:focus-visible { box-shadow: 0 0 0 3px var(--ui-background), 0 0 0 5px var(--ui-primary); }

.ui-button-shine[data-size="lg"] { height: 40px; padding: 0 20px; }
.ui-button-shine[data-size="xl"] { height: 48px; padding: 0 28px; font-size: 1rem; font-weight: 600; }
.ui-button-shine[data-size="xl"] svg { width: 18px; height: 18px; }

/* Seta vertical (links que rolam a página para baixo) */
.ui-button-shine[data-arrow="down"]:hover svg:last-child,
.ui-shine-trigger:hover .ui-button-shine[data-arrow="down"] svg:last-child { animation-name: ui-shine-arrow-down; }

@keyframes ui-shine-arrow-down {
  45% { transform: translateY(14px); opacity: 0; }
  46% { transform: translateY(-14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes ui-shine-orbit { to { --ui-shine-angle: 360deg; } }
@keyframes ui-shine-arrow {
  45% { transform: translateX(14px); opacity: 0; }
  46% { transform: translateX(-14px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Spinner — <svg class="ui-spinner" ...> (ícone Loader2 girando)
 * ------------------------------------------------------------------------- */

.ui-spinner { width: 16px; height: 16px; animation: ui-spin 1s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
 * Badge — <span class="ui-badge" data-variant="outline">Texto</span>
 * Variantes: default, secondary, outline, destructive
 * ------------------------------------------------------------------------- */

.ui-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: fit-content; flex-shrink: 0; white-space: nowrap; overflow: hidden;
  padding: 3px 8px; border: 1px solid transparent; border-radius: 6px;
  background: var(--ui-primary); color: var(--ui-primary-foreground);
  font: 500 .75rem/1.3 var(--ui-font);
}
.ui-badge svg { width: 12px; height: 12px; }
.ui-badge[data-variant="secondary"] { background: var(--ui-secondary); color: var(--ui-secondary-foreground); }
.ui-badge[data-variant="outline"] { background: transparent; color: var(--ui-foreground); border-color: var(--ui-border); }
.ui-badge[data-variant="destructive"] { background: var(--ui-destructive); color: #FFF; }

/* ---------------------------------------------------------------------------
 * Separator — <hr class="ui-separator">
 * ------------------------------------------------------------------------- */

.ui-separator { height: 1px; margin: 0; border: 0; background: var(--ui-border); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
 * Avatar — <span class="ui-avatar"><img ...> ou iniciais</span>
 * ------------------------------------------------------------------------- */

.ui-avatar {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; overflow: hidden; border-radius: 50%;
  background: var(--ui-muted); color: var(--ui-muted-foreground);
  font: 500 .875rem/1 var(--ui-font);
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
 * Alert
 * <div class="ui-alert" role="alert" data-variant="destructive">
 *   <svg>…</svg><p class="ui-alert-title">…</p><p class="ui-alert-description">…</p>
 * </div>
 * ------------------------------------------------------------------------- */

.ui-alert {
  display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 2px 12px;
  padding: 12px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-card); color: var(--ui-foreground);
  font: 400 .875rem/1.5 var(--ui-font);
}
.ui-alert > svg { width: 16px; height: 16px; margin-top: 2px; color: currentColor; }
.ui-alert-title { grid-column: 2; margin: 0; font-weight: 500; }
.ui-alert-description { grid-column: 2; margin: 0; color: var(--ui-muted-foreground); }
.ui-alert[data-variant="destructive"] { color: var(--ui-destructive); border-color: rgba(229, 72, 77, .4); }
.ui-alert[data-variant="destructive"] .ui-alert-description { color: rgba(229, 72, 77, .85); }
.ui-alert[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * Tooltip
 * <span class="ui-tooltip">
 *   <button aria-describedby="t1">…</button>
 *   <span class="ui-tooltip-content" role="tooltip" id="t1">Texto</span>
 * </span>
 * Lado: data-side="top" (padrão), "bottom", "left" ou "right" no .ui-tooltip
 * ------------------------------------------------------------------------- */

.ui-tooltip { position: relative; display: inline-flex; }
.ui-tooltip-content {
  position: absolute; z-index: 70; left: 50%; bottom: calc(100% + 8px);
  width: max-content; max-width: 240px; padding: 6px 12px; border-radius: 6px;
  background: var(--ui-foreground); color: var(--ui-background);
  font: 500 .75rem/1.4 var(--ui-font); text-align: center; white-space: normal;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 4px) scale(.96);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.ui-tooltip[data-side="bottom"] .ui-tooltip-content { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px) scale(.96); }
.ui-tooltip[data-side="left"] .ui-tooltip-content { left: auto; right: calc(100% + 10px); bottom: 50%; transform: translate(4px, 50%) scale(.96); }
.ui-tooltip[data-side="right"] .ui-tooltip-content { left: calc(100% + 10px); bottom: 50%; transform: translate(-4px, 50%) scale(.96); }

@media (hover: hover) {
  .ui-tooltip:hover .ui-tooltip-content { transition-delay: .3s, .3s, .3s; }
  .ui-tooltip:hover .ui-tooltip-content { opacity: 1; visibility: visible; }
}
.ui-tooltip:is(:focus-visible, :has(:focus-visible)) .ui-tooltip-content { opacity: 1; visibility: visible; transition-delay: 0s; }
.ui-tooltip:is(:hover, :focus-visible, :has(:focus-visible)) .ui-tooltip-content { transform: translate(-50%, 0) scale(1); }
.ui-tooltip[data-side="left"]:is(:hover, :focus-visible, :has(:focus-visible)) .ui-tooltip-content,
.ui-tooltip[data-side="right"]:is(:hover, :focus-visible, :has(:focus-visible)) .ui-tooltip-content { transform: translate(0, 50%) scale(1); }

/* ---------------------------------------------------------------------------
 * Progress
 * <div class="ui-progress" role="progressbar" aria-valuenow="40" style="--ui-progress-value: 40">
 *   <div class="ui-progress-indicator"></div>
 * </div>
 * ------------------------------------------------------------------------- */

.ui-progress {
  position: relative; width: 100%; height: 8px; overflow: hidden;
  border-radius: 999px; background: rgba(249, 109, 0, .2);
}
.ui-progress-indicator {
  width: 100%; height: 100%; background: var(--ui-primary);
  transform: translateX(calc((var(--ui-progress-value, 0) - 100) * 1%));
  transition: transform .2s ease-out;
}

/* ---------------------------------------------------------------------------
 * Label, Input, Textarea, Native Select e Field
 * Altura dos controles ajustável por --ui-control-height (padrão shadcn: 36px)
 * ------------------------------------------------------------------------- */

.ui-label {
  display: flex; align-items: center; gap: 8px;
  font: 500 .875rem/1 var(--ui-font); color: var(--ui-foreground); user-select: none;
}
.ui-label small { font-weight: 400; color: var(--ui-muted-foreground); }

.ui-input,
.ui-textarea,
.ui-native-select {
  width: 100%; min-width: 0;
  border: 1px solid var(--ui-input); border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .03); color: var(--ui-foreground);
  font: 400 1rem/1.4 var(--ui-font);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 768px) {
  .ui-input, .ui-textarea, .ui-native-select { font-size: .875rem; }
}
.ui-input { height: var(--ui-control-height, 36px); padding: 4px 12px; }
.ui-textarea { min-height: 64px; padding: 8px 12px; resize: vertical; field-sizing: content; }
.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--ui-muted-foreground); opacity: .7; }
.ui-input:focus-visible,
.ui-textarea:focus-visible,
.ui-native-select:focus-visible { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-input[aria-invalid="true"],
.ui-textarea[aria-invalid="true"],
.ui-native-select[aria-invalid="true"] { border-color: var(--ui-destructive); box-shadow: 0 0 0 3px var(--ui-destructive-ring); }
.ui-input:disabled,
.ui-textarea:disabled,
.ui-native-select:disabled { opacity: .5; cursor: not-allowed; }

.ui-native-select {
  height: var(--ui-control-height, 36px); padding: 4px 36px 4px 12px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A6A6' 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; background-size: 16px;
}
.ui-native-select option { background: var(--ui-popover); color: var(--ui-foreground); }

.ui-field { display: grid; gap: 8px; min-width: 0; }
.ui-field-description { margin: 0; color: var(--ui-muted-foreground); font: 400 .875rem/1.5 var(--ui-font); }
.ui-field-error { margin: 0; color: var(--ui-destructive); font: 400 .875rem/1.5 var(--ui-font); }
.ui-field-error:empty { display: none; }

/* ---------------------------------------------------------------------------
 * Toggle / Toggle Group (com checkbox por dentro, para funcionar em formulários)
 * <div class="ui-toggle-group" role="group" aria-label="…">
 *   <label class="ui-toggle" data-variant="outline"><input type="checkbox" name="x" value="a">A</label>
 * </div>
 * ------------------------------------------------------------------------- */

.ui-toggle-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; min-width: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--ui-radius);
  color: var(--ui-foreground); font: 500 .875rem/1 var(--ui-font); white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ui-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ui-toggle:hover { background: var(--ui-muted); color: var(--ui-muted-foreground); }
.ui-toggle:has(:focus-visible) { box-shadow: 0 0 0 3px var(--ui-ring); border-color: var(--ui-primary); }
.ui-toggle[data-variant="outline"] { border-color: var(--ui-input); background: rgba(255, 255, 255, .03); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ui-toggle[data-variant="outline"]:hover { background: var(--ui-accent); color: var(--ui-foreground); }
.ui-toggle:has(:checked) { background: rgba(249, 109, 0, .14); border-color: rgba(249, 109, 0, .6); color: var(--ui-foreground); }
.ui-toggle svg { width: 16px; height: 16px; }
.ui-toggle .ui-toggle-check { display: none; color: var(--ui-primary); }
.ui-toggle:has(:checked) .ui-toggle-check { display: block; }

/* ---------------------------------------------------------------------------
 * Tabs (comportamento em ui.js)
 * <div class="ui-tabs" data-ui="tabs">
 *   <div class="ui-tabs-list" role="tablist">
 *     <button class="ui-tabs-trigger" role="tab" aria-selected="true" aria-controls="p1">A</button>
 *   </div>
 *   <div class="ui-tabs-content" role="tabpanel" id="p1">…</div>
 * </div>
 * ------------------------------------------------------------------------- */

.ui-tabs { display: flex; flex-direction: column; gap: 8px; }
.ui-tabs-list {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
  padding: 3px; border-radius: 10px; background: var(--ui-muted);
  overflow-x: auto; scrollbar-width: none;
}
.ui-tabs-list::-webkit-scrollbar { display: none; }
.ui-tabs-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto;
  height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ui-muted-foreground);
  font: 500 .875rem/1 var(--ui-font); white-space: nowrap; cursor: pointer; outline: none;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.ui-tabs-trigger:hover { color: var(--ui-foreground); }
.ui-tabs-trigger:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-tabs-trigger[aria-selected="true"] {
  background: var(--ui-input); border-color: var(--ui-input); color: var(--ui-foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.ui-tabs-content { outline: none; }
.ui-tabs-content:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); border-radius: var(--ui-radius); }
.ui-tabs-content[hidden] { display: none; }
.ui-tabs-content:not([hidden]) { animation: ui-fade-in .25s ease; }
@keyframes ui-fade-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------------------------------------------------------------------------
 * Accordion (nativo com <details>; name="…" igual = só um aberto por vez)
 * <div class="ui-accordion">
 *   <details class="ui-accordion-item" name="faq">
 *     <summary class="ui-accordion-trigger">Pergunta <svg class="ui-accordion-chevron">…</svg></summary>
 *     <div class="ui-accordion-content">Resposta</div>
 *   </details>
 * </div>
 * ------------------------------------------------------------------------- */

.ui-accordion-item { border-bottom: 1px solid var(--ui-border); }
.ui-accordion-trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-radius: 6px; cursor: pointer; list-style: none;
  font: 500 .875rem/1.5 var(--ui-font); outline: none;
  transition: box-shadow .15s ease;
}
.ui-accordion-trigger::-webkit-details-marker { display: none; }
.ui-accordion-trigger:hover { text-decoration: underline; text-underline-offset: 4px; }
.ui-accordion-trigger:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-accordion-chevron {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: .2em;
  color: var(--ui-muted-foreground); transition: transform .2s ease;
}
.ui-accordion-item[open] .ui-accordion-chevron { transform: rotate(180deg); }
.ui-accordion-content { padding-bottom: 16px; color: var(--ui-muted-foreground); font-size: .875rem; }
.ui-accordion-item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.ui-accordion-item[open]::details-content { block-size: auto; }

/* ---------------------------------------------------------------------------
 * Carousel (rolagem nativa com encaixe; setas em ui.js)
 * <div class="ui-carousel" data-ui="carousel">
 *   <div class="ui-carousel-viewport ui-scroll-area" data-orientation="horizontal" tabindex="0">
 *     <div class="ui-carousel-track"><div class="ui-carousel-item">…</div></div>
 *   </div>
 *   <button data-ui-carousel="prev">…</button> <button data-ui-carousel="next">…</button>
 * </div>
 * Largura de cada item: --ui-carousel-basis (padrão 100%)
 * ------------------------------------------------------------------------- */

.ui-carousel { position: relative; }
.ui-carousel-viewport { scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; }
.ui-carousel-track { display: flex; gap: var(--ui-carousel-gap, 16px); }
.ui-carousel-item { flex: 0 0 var(--ui-carousel-basis, 100%); min-width: 0; scroll-snap-align: start; }
.ui-carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ui-carousel-controls .ui-button { border-radius: 50%; }

/* ---------------------------------------------------------------------------
 * Dialog e Sheet (nativos com <dialog>; abrir/fechar em ui.js)
 * <button data-ui-open="d1">Abrir</button>
 * <dialog class="ui-dialog" id="d1" aria-labelledby="d1-t"> … <button data-ui-close>Fechar</button></dialog>
 * Sheet: <dialog class="ui-sheet" data-side="right"> (right ou left)
 * ------------------------------------------------------------------------- */

html:has(dialog[open]:modal) { overflow: hidden; }

.ui-dialog,
.ui-sheet {
  border: 1px solid var(--ui-border); background: var(--ui-background); color: var(--ui-foreground);
  box-shadow: var(--ui-shadow-lg); font-family: var(--ui-font);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete;
}
.ui-dialog::backdrop,
.ui-sheet::backdrop {
  background: rgba(0, 0, 0, 0);
  transition: background-color .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete;
}
.ui-dialog[open]::backdrop,
.ui-sheet[open]::backdrop { background: rgba(0, 0, 0, .6); }
@starting-style {
  .ui-dialog[open]::backdrop,
  .ui-sheet[open]::backdrop { background: rgba(0, 0, 0, 0); }
}

.ui-dialog {
  width: min(100% - 32px, 512px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 24px; border-radius: 12px;
  transform: scale(.95);
}
.ui-dialog[open] { opacity: 1; transform: scale(1); }
@starting-style { .ui-dialog[open] { opacity: 0; transform: scale(.95); } }

.ui-sheet {
  margin: 0 0 0 auto; width: min(75%, 384px); height: 100dvh; max-height: 100dvh;
  padding: 24px; border-width: 0 0 0 1px; border-radius: 0; overflow: auto;
  transform: translateX(100%);
}
.ui-sheet[data-side="left"] { margin: 0 auto 0 0; border-width: 0 1px 0 0; transform: translateX(-100%); }
.ui-sheet[open] { opacity: 1; transform: none; }
@starting-style {
  .ui-sheet[open] { opacity: 0; transform: translateX(100%); }
  .ui-sheet[data-side="left"][open] { transform: translateX(-100%); }
}

.ui-dialog-header { display: grid; gap: 8px; margin-bottom: 20px; padding-right: 24px; }
.ui-dialog-title { margin: 0; font: 600 1.125rem/1.3 var(--ui-font); letter-spacing: -.01em; }
.ui-dialog-description { margin: 0; color: var(--ui-muted-foreground); font: 400 .875rem/1.5 var(--ui-font); }
.ui-dialog-footer { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.ui-dialog-close { position: absolute; top: 12px; right: 12px; opacity: .7; }
.ui-dialog-close:hover { opacity: 1; }
@media (max-width: 480px) {
  .ui-dialog-footer .ui-button { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
 * Toast / Sonner (criado por ui.toast() em ui.js)
 * ------------------------------------------------------------------------- */

.ui-toaster {
  position: fixed; z-index: 100; right: 24px; bottom: var(--ui-toaster-offset, 24px);
  display: flex; flex-direction: column; gap: 8px;
  width: min(356px, 100% - 32px); pointer-events: none;
}
.ui-toast {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 2px 10px;
  padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
  background: var(--ui-popover); color: var(--ui-foreground); box-shadow: var(--ui-shadow-lg);
  font: 400 .875rem/1.45 var(--ui-font); pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease;
}
@starting-style { .ui-toast { opacity: 0; transform: translateY(16px); } }
.ui-toast[data-leaving] { opacity: 0; transform: translateY(8px) scale(.98); }
.ui-toast-icon { width: 18px; height: 18px; margin-top: 1px; }
.ui-toast[data-variant="success"] .ui-toast-icon { color: var(--ui-success); }
.ui-toast[data-variant="error"] .ui-toast-icon { color: var(--ui-destructive); }
.ui-toast-title { margin: 0; font-weight: 500; grid-column: 2; }
.ui-toast-description { margin: 0; color: var(--ui-muted-foreground); grid-column: 2; }
.ui-toast-close { grid-column: 3; grid-row: 1; margin: -6px -6px 0 0; }
@media (max-width: 480px) {
  .ui-toaster { right: 16px; left: 16px; width: auto; }
}

/* ---------------------------------------------------------------------------
 * Scroll Area
 * <div class="ui-scroll-area" tabindex="0" style="height: 288px">...</div>
 * Rolagem nativa com a barra fina do shadcn. Horizontal: data-orientation="horizontal".
 * ------------------------------------------------------------------------- */

.ui-scroll-area {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: inherit;
  outline: none;
  transition: box-shadow .15s ease;
  /* Firefox e Chrome 121+ */
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar) transparent;
}
.ui-scroll-area:hover { scrollbar-color: var(--ui-scrollbar-hover) transparent; }
.ui-scroll-area:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-scroll-area[data-orientation="horizontal"] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; }

/* Safari (ignorado pelos navegadores que já aplicaram scrollbar-color) */
.ui-scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
.ui-scroll-area::-webkit-scrollbar-track { background: transparent; }
.ui-scroll-area::-webkit-scrollbar-thumb {
  background: var(--ui-scrollbar); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px;
}
.ui-scroll-area::-webkit-scrollbar-thumb:hover { background-color: var(--ui-scrollbar-hover); }
.ui-scroll-area::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------------------------
 * Navigation Menu (submenu do cabeçalho; abrir/fechar em ui.js)
 * Abre ao passar o mouse, no clique/toque e pelo teclado (Enter, Espaço ou seta
 * para baixo). Esc fecha e devolve o foco ao gatilho.
 * <div class="ui-navigation-menu" data-ui="navigation-menu">
 *   <button class="ui-navigation-menu-trigger" type="button" aria-controls="m1">Serviços <svg class="ui-navigation-menu-chevron">…</svg></button>
 *   <div class="ui-navigation-menu-content" id="m1">
 *     <ul class="ui-navigation-menu-list">
 *       <li><a class="ui-navigation-menu-link" href="…"><img …><span><strong>Título</strong><small>Descrição</small></span></a></li>
 *     </ul>
 *   </div>
 * </div>
 * Alinhamento: data-align="center" (padrão) ou "start" no .ui-navigation-menu
 * ------------------------------------------------------------------------- */

.ui-navigation-menu { position: relative; }
.ui-navigation-menu-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.ui-navigation-menu-chevron { width: 14px; height: 14px; margin-top: 1px; transition: transform .2s ease; }
.ui-navigation-menu[data-state="open"] .ui-navigation-menu-chevron { transform: rotate(180deg); }

.ui-navigation-menu-content {
  position: absolute; z-index: 60; top: calc(100% + 18px); left: 50%;
  width: max-content; max-width: min(640px, calc(100vw - 32px));
  padding: 8px; border: 1px solid var(--ui-border); border-radius: 14px;
  background: var(--ui-popover); color: var(--ui-foreground); box-shadow: var(--ui-shadow-lg);
  font-family: var(--ui-font);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px) scale(.98); transform-origin: top center;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.ui-navigation-menu[data-align="start"] .ui-navigation-menu-content { left: -16px; transform: translate(0, -6px) scale(.98); transform-origin: top left; }
/* Faixa invisível que cobre o vão entre o gatilho e o painel, para o mouse não "cair" no caminho */
.ui-navigation-menu-content::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; }
.ui-navigation-menu[data-state="open"] .ui-navigation-menu-content {
  opacity: 1; visibility: visible; transition-delay: 0s;
  transform: translate(-50%, 0) scale(1);
}
.ui-navigation-menu[data-align="start"][data-state="open"] .ui-navigation-menu-content { transform: none; }

.ui-navigation-menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 272px)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-navigation-menu-link {
  display: flex; align-items: flex-start; gap: 12px; height: 100%;
  padding: 12px; border-radius: 10px; color: inherit; text-decoration: none; outline: none;
  transition: background-color .15s ease;
}
.ui-navigation-menu-link:hover, .ui-navigation-menu-link:focus-visible { background: var(--ui-accent); }
.ui-navigation-menu-link:focus-visible { box-shadow: 0 0 0 3px var(--ui-ring); }
.ui-navigation-menu-link[aria-current="page"] { background: rgba(249, 109, 0, .1); }
.ui-navigation-menu-link img, .ui-navigation-menu-link > svg { flex: none; width: 36px; height: 36px; }
.ui-navigation-menu-link strong { display: block; font: 600 .9rem/1.3 var(--ui-font); color: var(--ui-foreground); }
.ui-navigation-menu-link small { display: block; margin-top: 3px; font: 400 .8rem/1.45 var(--ui-font); color: var(--ui-muted-foreground); }
.ui-navigation-menu-link[aria-current="page"] strong { color: var(--ui-primary); }
.ui-navigation-menu-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(249, 109, 0, .12); color: var(--ui-primary); border: 1px solid rgba(249, 109, 0, .25);
}
.ui-navigation-menu-icon svg { width: 18px; height: 18px; }
.ui-navigation-menu-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin-top: 8px; padding: 12px 12px 6px; border-top: 1px solid var(--ui-border);
  font: 400 .8rem/1.4 var(--ui-font); color: var(--ui-muted-foreground);
}
.ui-navigation-menu-footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-foreground); font-weight: 500; text-decoration: none; border-radius: 4px; }
.ui-navigation-menu-footer a:hover { color: var(--ui-primary); }
.ui-navigation-menu-footer svg { width: 14px; height: 14px; color: var(--ui-primary); }

@media (prefers-reduced-motion: reduce) {
  .ui-button, .ui-scroll-area, .ui-toggle, .ui-tabs-trigger, .ui-tooltip-content,
  .ui-accordion-chevron, .ui-progress-indicator, .ui-dialog, .ui-sheet, .ui-toast,
  .ui-navigation-menu-chevron, .ui-navigation-menu-content, .ui-navigation-menu-link { transition: none; }
  .ui-accordion-item::details-content { transition: none; }
  .ui-tabs-content:not([hidden]) { animation: none; }
  .ui-carousel-viewport { scroll-behavior: auto; }
  .ui-spinner { animation-duration: 2s; }
  .ui-button-colorful, .ui-button-colorful svg { transition: none; }
  .ui-button-colorful::before { animation: none; }
  .ui-button-colorful::after { display: none; }
  .ui-button-shine, .ui-button-shine::after { transition: none; }
  .ui-button-shine::before, .ui-button-shine svg { animation: none !important; }
}

/* --------------------------------------------------------------------------
 * Alvos de toque: em tela de toque, todo botão e link tem pelo menos 44 x 44 px.
 * Onde o desenho permite, uma moldura invisível (::after) aumenta só a área que
 * responde ao dedo. Os botões com efeito já usam ::before e ::after, então neles
 * a altura dos tamanhos menores sobe para 44 px. Com mouse nada muda.
 * Vale também para links do site que usam esta folha (rodapé, trilha, chips).
 * -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  :where(.ui-button, .ui-toggle, .work-link, .prob-links a, .chips a, .crumbs a,
         .footer-grid ul a, .footer-bottom a, .menu-sheet nav a) { position: relative; }
  :is(.ui-button, .ui-toggle, .work-link, .prob-links a, .chips a, .crumbs a,
      .footer-grid ul a, .footer-bottom a, .menu-sheet nav a)::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%;
  }
  .ui-button-shine, .ui-button-shine[data-size="lg"], .ui-button-colorful[data-size="lg"] { height: 44px; }
}