/* 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: 7.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;
}

/* ========================================
   Toggle switch (usado en /documents/crear)
   PRUEBA: verde encendido / rojo apagado
   ======================================== */
.sig-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
}
.sig-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sig-toggle .sig-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: #fecaca;
  border: 1px solid #ef4444;
  border-radius: 9999px;
  transition: background-color .2s ease, border-color .2s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sig-toggle .sig-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 9999px;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sig-toggle input[type="checkbox"]:checked + .sig-slider {
  background-color: #22c55e;
  border-color: #16a34a;
}
.sig-toggle input[type="checkbox"]:checked + .sig-slider::before {
  transform: translateX(18px);
}
.sig-toggle input[type="checkbox"]:not(:checked) + .sig-slider {
  background-color: #fecaca;
  border-color: #ef4444;
}
.sig-toggle input[type="checkbox"]:not(:checked) + .sig-slider::before {
  transform: translateX(0);
}
.sig-toggle input[type="checkbox"]:disabled + .sig-slider {
  cursor: not-allowed;
  opacity: .9;
}

/* ========================================
   Utilidades responsive de grid que Soft UI
   no trae y se usan en /documents/crear
   ======================================== */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
}

/* Ajustes finos de spacing para panel de opciones de envío */
.send-options-panel { padding: 12px 14px; }
.send-options-grid { gap: 10px; }
.send-options-card { padding: 10px 12px; }
.send-options-copy-child { margin-top: 8px; }
.send-options-disabled { opacity: 0.55; }