/*
 * Design system: base e primitivos.
 * Estiliza as classes do Bootstrap 3 e os primitivos legados do tema
 * (btn-main, pp_mat_input, tgl, pt_vdo_cstm_radio...) com os tokens.
 */

/* ---------- Base ---------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface) !important;
  color: var(--foreground);
  font-family: var(--font-sans) !important;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* O tema antigo fixa Lato/Roboto em vários elementos; ícones ficam de fora */
:where(h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea, select, label, li, div, td, th, b, strong, small):not(.fa):not([class*="fa-"]):not(.material-icons):not([class*="icon"]):not([class*="emojione"]) {
  font-family: var(--font-sans) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

code, kbd, pre, samp {
  font-family: var(--font-mono) !important;
}

a {
  color: var(--foreground);
  transition: color var(--duration) var(--ease);
}

a:hover,
a:focus {
  color: var(--foreground);
}

hr {
  border-top-color: var(--border);
}

::selection {
  background: color-mix(in oklch, var(--brand) 30%, transparent);
  color: inherit;
}

/* style.css zera todos os outlines; devolve o foco visível para teclado */
:focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible {
  outline: none !important;
}

img {
  max-width: 100%;
}

/* Ícones Lucide são só traço: impede que regras legadas de fill os preencham */
svg[stroke="currentColor"][fill="none"],
svg[stroke="currentColor"][fill="none"] * {
  fill: none !important;
}

/* Barras de rolagem discretas */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent) transparent;
}

/* Ícone inline (SVG Lucide gerado pelo PHP/JS no lugar do Font Awesome) */
.ds-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.ds-icon.verified {
  width: 0.95em;
  height: 0.95em;
}

/* Marcador redondo (item atual da playlist, indicador "digitando") */
.ds-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  vertical-align: middle;
}

.istyping .ds-dot {
  margin: 0 1px;
  animation: ds-typing 1.2s infinite ease-in-out;
}

.istyping .ds-dot:nth-child(2) { animation-delay: .15s; }
.istyping .ds-dot:nth-child(3) { animation-delay: .3s; }

@keyframes ds-typing {
  0%, 80%, 100% { opacity: .3; }
  40% { opacity: 1; }
}

/* Utilitários */
.ds-muted { color: var(--muted-foreground) !important; }
.ds-tabular { font-variant-numeric: tabular-nums; }
.ds-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ds-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Button ---------- */

.btn,
.btn-mat,
.matbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none !important;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), opacity var(--duration);
}

.btn svg,
.btn-mat svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus {
  outline: none;
}

.btn:focus-visible {
  box-shadow: var(--focus-ring);
}

.btn:active,
.btn.active {
  box-shadow: none;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: .5;
  box-shadow: none;
  pointer-events: none;
}

/* default = outline */
.btn-default,
.btn-mat {
  background-color: var(--background);
  color: var(--foreground);
  border-color: var(--input);
  box-shadow: var(--shadow-xs);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.btn-mat:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--input);
}

/* primary */
.btn-primary,
.btn-main,
.btn-success {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: transparent !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-main:hover,
.btn-main:focus,
.btn-main:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: color-mix(in oklch, var(--primary) 88%, var(--background)) !important;
  color: var(--primary-foreground) !important;
}

/* marca (uso pontual: CTA principal de compra/assinatura) */
.btn-brand {
  background-color: var(--brand) !important;
  color: var(--brand-foreground) !important;
  border-color: transparent !important;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: color-mix(in oklch, var(--brand) 88%, #000) !important;
  color: var(--brand-foreground) !important;
}

/* secondary */
.btn-secondary,
.btn-info,
.btn-warning {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: transparent;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:focus {
  background-color: color-mix(in oklch, var(--secondary) 80%, var(--foreground) 6%);
  color: var(--secondary-foreground);
}

/* ghost */
.btn-ghost,
.matbtn {
  background-color: transparent;
  color: var(--foreground);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover,
.btn-ghost:focus,
.matbtn:hover,
.matbtn:focus {
  background-color: var(--accent) !important;
  color: var(--accent-foreground);
}

/* destructive */
.btn-danger {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: color-mix(in oklch, var(--destructive) 88%, #000);
  color: var(--destructive-foreground);
}

/* link */
.btn-link {
  min-height: 0;
  padding: 0;
  color: var(--brand-text);
  box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* tamanhos */
.btn-xs {
  min-height: 28px;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
}

.btn-sm,
.btn-group-sm > .btn {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: 44px;
  padding: 0 var(--space-6);
  font-size: var(--text-md);
}

.btn-icon {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-pill {
  border-radius: var(--radius-full) !important;
}

.btn .fa-spinner,
.btn .fa-spin {
  margin: 0;
}

/* ---------- Input / Select / Textarea ---------- */

.form-control,
input[type="text"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="number"]:not([class]),
input[type="url"]:not([class]),
textarea:not([class]) {
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--input) !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  font-size: var(--text-base);
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

textarea.form-control,
textarea:not([class]) {
  height: auto;
  min-height: 88px;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

select.form-control {
  padding-right: var(--space-8);
  -webkit-appearance: none;
  appearance: none;
  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='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

select.form-control[multiple] {
  height: auto;
  background-image: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1;
}

.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent) !important;
  outline: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--muted) !important;
  opacity: .7;
}

.has-error .form-control {
  border-color: var(--destructive) !important;
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent) !important;
}

.has-success .form-control {
  border-color: var(--success) !important;
}

.form-group {
  margin-bottom: var(--space-5);
}

label,
.control-label {
  margin-bottom: var(--space-2);
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.help-block,
.helper-text {
  margin-top: var(--space-2);
  color: var(--muted-foreground) !important;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.has-error .help-block,
.has-error .control-label {
  color: var(--destructive) !important;
}

.input-group-addon {
  border-color: var(--input);
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

input[type="range"] {
  accent-color: var(--brand);
}

/* ---------- Input com rótulo flutuante (pp_mat_input) ---------- */

.pp_mat_input {
  margin-bottom: var(--space-5);
}

.pp_mat_input input,
.pp_mat_input textarea,
.pp_mat_input select {
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-md) !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  font-size: var(--text-md);
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.pp_mat_input input:focus,
.pp_mat_input textarea:focus,
.pp_mat_input select:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent) !important;
}

.pp_mat_input label {
  background-color: var(--card) !important;
  color: var(--muted-foreground) !important;
  font-weight: 500;
}

.pp_mat_input input:focus + label,
.pp_mat_input textarea:focus + label {
  color: var(--brand-text) !important;
}

.pp_mat_input input:placeholder-shown:not(:focus) + label {
  background-color: transparent !important;
  font-weight: 400;
}

/* ---------- Switch (tgl / tgl-ios / bootstrap-toggle) ---------- */

.tgl + .tgl-btn,
.tgl-ios + .tgl-btn {
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--input) !important;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background-color var(--duration) var(--ease);
}

.tgl + .tgl-btn:after,
.tgl-ios + .tgl-btn:after {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-full) !important;
  background: var(--background) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--duration) var(--ease) !important;
}

.tgl:checked + .tgl-btn,
.tgl-ios:checked + .tgl-btn {
  background: var(--primary) !important;
}

.tgl:checked + .tgl-btn:after,
.tgl-ios:checked + .tgl-btn:after {
  left: 2px !important;
  transform: translateX(16px);
}

.toggle.btn {
  min-height: 24px;
  border-radius: var(--radius-full) !important;
}

.toggle-on.btn {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.toggle-off.btn {
  background: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
}

.toggle-handle.btn {
  border-radius: var(--radius-full) !important;
  background: var(--background) !important;
  border: 1px solid var(--border) !important;
}

/* ---------- Radio em card (pt_vdo_cstm_radio) ---------- */

.pt_vdo_cstm_radio label {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-2) 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--foreground) !important;
  font-weight: 500;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.pt_vdo_cstm_radio label:hover {
  background: var(--accent);
}

.pt_vdo_cstm_radio label:before {
  border: 1.5px solid var(--input) !important;
  background: var(--background);
}

.pt_vdo_cstm_radio input:checked + label {
  border-color: var(--border);
  background-color: var(--muted);
  color: var(--foreground) !important;
  font-weight: 500;
}

.pt_vdo_cstm_radio input:checked + label:before {
  border-color: var(--primary) !important;
}

.pt_vdo_cstm_radio input:checked + label:after {
  background-color: var(--primary) !important;
}

.pt_vdo_cstm_radio input:focus-visible + label {
  box-shadow: var(--focus-ring);
}

/* ---------- Dropdown Menu ---------- */

.dropdown-menu {
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-1);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background-color: var(--popover) !important;
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg) !important;
}

.dropdown-menu > li > a,
.dropdown-menu > li > button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--popover-foreground) !important;
  font-size: var(--text-base);
  line-height: 1.4;
  white-space: nowrap;
}

.dropdown-menu > li > a svg,
.dropdown-menu > li > button svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.dropdown-menu .divider {
  margin: var(--space-1) calc(var(--space-1) * -1);
  background-color: var(--border);
}

.dropdown-header {
  padding: var(--space-2);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ---------- Dialog (Modal) ---------- */

.modal {
  z-index: var(--z-modal);
}

.modal-backdrop {
  background: #000;
}

.modal-backdrop.in {
  opacity: .6;
}

.modal-dialog {
  margin-top: 8vh;
}

.modal-content {
  overflow: hidden;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  background-color: var(--popover) !important;
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg) !important;
}

.modal-header {
  padding: var(--space-5) var(--space-6) var(--space-2);
  border-bottom: 0 !important;
}

.modal-body {
  padding: var(--space-4) var(--space-6);
  color: var(--foreground);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6) var(--space-5);
  border-top: 0 !important;
}

.modal-footer .btn + .btn {
  margin-left: 0;
}

.modal-title {
  color: var(--foreground);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.modal-header .close,
.modal .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -8px 0 0;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 22px;
  font-weight: 400;
  text-shadow: none;
  opacity: 1;
}

.modal .close:hover {
  background: var(--accent);
  color: var(--foreground);
}

/* ---------- Card (Panel / Well / list-group) ---------- */

.panel,
.well {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  color: var(--card-foreground);
  box-shadow: none;
}

.panel-default > .panel-heading,
.panel > .panel-heading {
  border-color: var(--border);
  background-color: transparent;
  color: var(--card-foreground);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  font-weight: 600;
}

.panel-footer {
  border-color: var(--border);
  background-color: transparent;
}

.list-group-item {
  border-color: var(--border);
  background-color: transparent;
  color: var(--foreground);
}

a.list-group-item,
button.list-group-item {
  color: var(--foreground);
}

a.list-group-item:hover,
a.list-group-item:focus {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  border-color: var(--border);
  background-color: var(--accent);
  color: var(--foreground);
  font-weight: 600;
}

/* ---------- Tabs ---------- */

.nav-tabs {
  border-bottom: 1px solid var(--border);
}

.nav-tabs > li > a {
  margin-right: var(--space-1);
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--muted-foreground);
  font-weight: 500;
}

.nav-tabs > li > a:hover {
  color: var(--foreground);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-bottom-color: var(--foreground) !important;
  color: var(--foreground);
}

.nav-pills > li > a {
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-weight: 500;
}

.nav-pills > li > a:hover {
  background: var(--accent);
  color: var(--foreground);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--secondary);
  color: var(--foreground);
}

/* ---------- Badge ---------- */

.badge,
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
}

.badge,
.label-default {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.label-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.label-success { background-color: color-mix(in oklch, var(--success) 15%, transparent); color: var(--success); }
.label-warning { background-color: color-mix(in oklch, var(--warning) 15%, transparent); color: var(--warning); }
.label-info { background-color: var(--brand-subtle); color: var(--brand-text); }
.label-danger { background-color: color-mix(in oklch, var(--destructive) 15%, transparent); color: var(--destructive); }

/* Selo de verificado: ícone azul da marca */
.verified,
svg.verified,
.verified-color {
  color: var(--brand) !important;
  fill: currentColor;
}

/* ---------- Alert ---------- */

.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
  font-size: var(--text-base);
  box-shadow: none !important;
}

.alert-success {
  border-color: color-mix(in oklch, var(--success) 35%, transparent) !important;
  background-color: color-mix(in oklch, var(--success) 8%, var(--card)) !important;
  color: var(--success) !important;
}

.alert-danger {
  border-color: color-mix(in oklch, var(--destructive) 35%, transparent) !important;
  background-color: color-mix(in oklch, var(--destructive) 8%, var(--card)) !important;
  color: var(--destructive) !important;
}

.alert-warning {
  border-color: color-mix(in oklch, var(--warning) 35%, transparent) !important;
  background-color: color-mix(in oklch, var(--warning) 8%, var(--card)) !important;
  color: var(--warning) !important;
}

.alert-info {
  border-color: color-mix(in oklch, var(--brand) 35%, transparent) !important;
  background-color: color-mix(in oklch, var(--brand) 8%, var(--card)) !important;
  color: var(--brand-text) !important;
}

.alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Table ---------- */

.table {
  color: var(--foreground);
  font-size: var(--text-base);
}

.table > thead > tr > th {
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th,
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
  border-color: var(--border) !important;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}

.table-hover > tbody > tr:hover {
  background-color: var(--muted);
}

/* ---------- Pagination ---------- */

.pagination > li > a,
.pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin: 0 2px;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  background-color: transparent !important;
  color: var(--foreground) !important;
  font-weight: 500;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: var(--accent) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  border-color: var(--input) !important;
  background-color: var(--background) !important;
  box-shadow: var(--shadow-xs);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--muted-foreground) !important;
  opacity: .5;
}

/* ---------- Tooltip / Popover ---------- */

.tooltip {
  z-index: var(--z-toast);
}

.tooltip-inner {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-xs);
  font-weight: 500;
}

.tooltip.in { opacity: 1; }
.tooltip.top .tooltip-arrow { border-top-color: var(--primary); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--primary); }
.tooltip.left .tooltip-arrow { border-left-color: var(--primary); }
.tooltip.right .tooltip-arrow { border-right-color: var(--primary); }

.popover {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
}

/* ---------- Avatar ---------- */

.img-circle,
.user-avatar img,
.avatar img,
.publisher-avatar img,
.author-img img,
img.avatar {
  border-radius: var(--radius-full) !important;
  object-fit: cover;
  background: var(--muted);
}

/* ---------- Progresso ---------- */

.progress {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--muted);
  box-shadow: none;
}

.progress-bar {
  background-color: var(--brand) !important;
  box-shadow: none;
}

/* ---------- Carregar mais ---------- */

.load-more,
.watch-video-show-more {
  display: flex;
  justify-content: center;
  margin: var(--space-6) auto;
}

.load-more .btn,
.load-more button,
button.watch-video-show-more,
.watch-video-show-more {
  width: auto;
  min-height: 36px;
  padding: 0 var(--space-5);
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-full) !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  box-shadow: var(--shadow-xs) !important;
  transition: background-color var(--duration) var(--ease);
}

.load-more .btn:hover,
.load-more button:hover,
.watch-video-show-more:hover {
  background: var(--accent) !important;
}

/* ---------- Skeleton ---------- */

.ds-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 60%, var(--background)) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
}

@keyframes ds-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- Empty state ---------- */

.empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-12) auto !important;
  color: var(--muted-foreground) !important;
  font-size: var(--text-base);
  font-weight: 400;
  text-align: center;
}

.empty_state svg {
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 var(--space-1) !important;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  box-shadow: none !important;
}

.empty_state svg.feather {
  padding: 14px !important;
  background-image: none !important;
}

.empty_state svg::before,
.empty_state svg::after {
  display: none;
}

.empty_state h3,
.empty_state p {
  margin: 0;
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 500;
}

/* Cabeçalhos de tabela (DataTables e legado) também em Geist */
table th,
table.dataTable thead th,
.table > thead > tr > th {
  font-family: var(--font-sans) !important;
}