/* Soft UI Dashboard trae un Tailwind recortado: no incluye ring-* ni variantes focus:/focus-within:.
   Estas reglas imitan Tailwind v3 y usan las variables de tailwind.colors (paleta oficial). */

.focus\:ring-2:focus,
.focus-within\:ring-2:focus-within {
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-400:focus { --tw-ring-color: var(--blue-400); }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--blue-500); }
.focus-within\:ring-blue-500:focus-within { --tw-ring-color: var(--blue-500); }

.focus\:ring-fuchsia-200:focus { --tw-ring-color: var(--fuchsia-200); }

.focus\:ring-purple-500:focus { --tw-ring-color: var(--purple-500); }

.focus\:ring-\[\#486284\]:focus { --tw-ring-color: #486284; }

.focus\:border-fuchsia-300:focus { border-color: var(--fuchsia-300); }
.focus\:border-fuchsia-400:focus { border-color: var(--fuchsia-400); }
.focus\:border-transparent:focus { border-color: transparent; }
.focus-within\:border-blue-500:focus-within { border-color: var(--blue-500); }
.focus\:border-blue-500:focus { border-color: var(--blue-500); }

/* Mis plantillas: preview colapsable (el CSS soft-ui no incluye line-clamp-3, max-h-72, rotate-180). */
.user-template-desc-body--collapsed {
  max-height: 5.5rem;
  overflow: hidden;
}
.user-template-desc-body--expanded {
  max-height: 18rem;
  overflow-y: auto;
}

/* Font Awesome (webfont o SVG+JS): color explícito por si no hereda del botón */
.user-template-desc-toggle .user-template-desc-icon-left,
.user-template-desc-toggle .user-template-desc-icon-down {
  color: #64748b;
}
.user-template-desc-toggle:hover .user-template-desc-icon-left,
.user-template-desc-toggle:hover .user-template-desc-icon-down {
  color: #334155;
}
.user-template-desc-toggle .user-template-desc-icon-left svg,
.user-template-desc-toggle .user-template-desc-icon-down svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}