/* RoviDev Herramientas — pulido UI 2026 v2 (rd-ui-polish-v2) */
.tool-content.glass,
#tool-widget.tool-content {
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(0, 255, 157, 0.18);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(11, 18, 32, 0.92));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.tool-content input[type="number"],
.tool-content input[type="text"],
.tool-content input[type="email"],
.tool-content input:not([type]),
.tool-content select,
.tool-content textarea {
  border-radius: 10px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-main, #e2e8f0);
  padding: 0.55rem 0.75rem;
  margin: 0.25rem 0;
  max-width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tool-content input:focus,
.tool-content select:focus,
.tool-content textarea:focus {
  outline: none;
  border-color: rgba(0, 255, 157, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.12);
}
.tool-content .btn.primary {
  margin-top: 0.75rem;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tool-content [id$="-out"],
.tool-content [id$="-out"] strong {
  color: #00ff9d;
}
.tool-content [id$="-out"] {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(0, 255, 157, 0.06);
  border: 1px solid rgba(0, 255, 157, 0.15);
}
.tool-result-out.rd-fade-in {
  animation: rdFadeIn 0.45s ease-out;
}
@keyframes rdFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rd-copy-res {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
}
[data-theme="light"] .tool-content.glass {
  background: linear-gradient(145deg, #fff, #f1f5f9);
  border-color: rgba(70, 97, 230, 0.2);
}
[data-theme="light"] .tool-content input,
[data-theme="light"] .tool-content select {
  background: #fff;
  color: #0b1220;
}
.tool-demo {
  border-color: rgba(0, 255, 157, 0.3) !important;
}
.herramientas-ad {
  border-radius: 12px;
  overflow: hidden;
}
.rd-sticky-ad {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(11, 18, 32, 0.97);
  border-top: 1px solid rgba(0, 255, 157, 0.2);
  padding: 0.35rem 0.5rem 0.5rem;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}
.rd-sticky-ad.is-visible {
  display: block;
  animation: rdSlideUp 0.3s ease-out;
}
@keyframes rdSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (min-width: 768px) {
  .rd-sticky-ad { display: none !important; }
}
.tools-cat .cat-icon { margin-right: 0.35rem; font-size: 1.1em; vertical-align: middle; }
.rd-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: rgba(0, 255, 157, 0.15); color: #00ff9d;
  font-size: 0.7rem; font-weight: 700; cursor: help; margin-left: 0.25rem;
  position: relative; vertical-align: middle;
}
.rd-tip:hover::after, .rd-tip:focus::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); min-width: 160px; max-width: 220px;
  padding: 0.45rem 0.6rem; border-radius: 8px; font-size: 0.75rem; font-weight: 400;
  background: #0f172a; color: #e2e8f0; border: 1px solid rgba(0, 255, 157, 0.25);
  z-index: 50; white-space: normal; line-height: 1.4;
}
.rd-invest-chart {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 255, 157, 0.12);
}
.rd-invest-donut {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}
.rd-skeleton {
  position: relative;
  min-height: 3rem;
  color: transparent !important;
}
.rd-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(0,255,157,0.12) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: rdShimmer 0.8s ease-in-out;
}
@keyframes rdShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.hub-infeed-ad { width: 100%; }
