.ui-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted currentColor;
}

.ui-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  background-color: #1e293b;
  color: #f8fafc;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ui-tooltip:hover::after,
.ui-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Variação para posição inferior */
.ui-tooltip[data-position="bottom"]::after {
  bottom: auto;
  top: 125%;
  transform: translateX(-50%) translateY(-4px);
}

.ui-tooltip[data-position="bottom"]:hover::after,
.ui-tooltip[data-position="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
.ui-docs-container {
    --ui-bg-body: #ffffff;
    --ui-bg-surface: #f8fafc;
    --ui-bg-surface-hover: #f1f5f9;
    --ui-bg-card: #ffffff;
    --ui-bg-card-hover: #f8fafc;
    --ui-text-primary: #0f172a;
    --ui-text-secondary: #475569;
    --ui-text-muted: #94a3b8;
    --ui-border-color: #e2e8f0;
    --ui-border-hover: #cbd5e1;
    --ui-border-focus: #2563eb;
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-subtle: #eff6ff;
    background-color: var(--ui-bg-body);
    color: var(--ui-text-primary);
    padding: 1.5rem;
    border-radius: var(--ui-radius-xl, 12px);
  }

  .doc-section { 
    margin-bottom: 3.5rem; 
    padding-bottom: 2rem; 
    border-bottom: 1px solid var(--ui-border-color); 
  }

  .doc-title { 
    font-size: 1.5rem; 
    font-weight: 700; 
    margin-bottom: 0.5rem; 
    color: var(--ui-text-primary); 
  }

  .doc-desc { 
    color: var(--ui-text-secondary); 
    margin-bottom: 1.5rem; 
    font-size: 0.95rem; 
    line-height: 1.5; 
  }

  .doc-box { 
    background: var(--ui-bg-surface); 
    padding: 1.5rem; 
    border-radius: var(--ui-radius-lg, 8px); 
    border: 1px solid var(--ui-border-color); 
    margin-bottom: 1rem; 
  }

  .doc-label { 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 0.5px; 
    color: var(--ui-text-muted); 
    margin-bottom: 0.75rem; 
    display: block; 
  }

  .doc-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.5rem; 
  }

  .doc-code { 
    background: #f1f5f9; 
    color: #0f172a; 
    padding: 1rem; 
    border-radius: var(--ui-radius-md, 6px); 
    border: 1px solid #cbd5e1;
    font-family: var(--ui-font-mono, monospace); 
    font-size: 0.85rem; 
    overflow-x: auto; 
    margin-top: 0.75rem; 
    white-space: pre;
  }

  .doc-code code { 
    background: transparent; 
    color: inherit; 
    padding: 0; 
    font-family: inherit;
  }