/* RN Icon Panel – estilos globales y estados (hover/focus) */
.rn-icon-panel {
  display: inline-flex;
  align-items: center;
  gap: var(--rn-gap, 10px);
  background: var(--rn-bg, #8baf31);
  color: var(--rn-color, #ffffff);
  border: var(--rn-border, 0px solid transparent);
  border-radius: var(--rn-rounded, 12px);
  box-shadow: var(--rn-shadow, 0 0 0 rgba(0,0,0,0));
  padding: var(--rn-padding, 14px) var(--rn-padding, 14px);
  text-decoration: none;
  line-height: 1.25;
  font-weight: 600;
  transition: transform .08s ease, box-shadow .20s ease, filter .12s ease;
  outline: none;
}

/* Mantener texto blanco en hover/focus */
.rn-icon-panel:hover,
.rn-icon-panel:focus,
.rn-icon-panel:active {
  color: var(--rn-color, #ffffff);
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.rn-icon-panel:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.rn-icon-panel__icon img {
  width: var(--rn-icon-size, 30px);
  height: var(--rn-icon-size, 30px);
  object-fit: contain;
  display: block;
}

.rn-icon-panel__text {
  display: inline-block;
}

/* SU dropcap mínimo */
.su-dropcap {
  font-weight: 700;
}