.custom-btn {
  /* Variables Templates */
  --btn-border: transparent;
  --color-btn: transparent;
  --btn-hover-overlay: transparent;
  --btn-bg: transparent;
  --btn-icon: transparent;
  --btn-icon-hover: transparent;

  /* Variables Styles */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* gap-2 */
  white-space: nowrap;
  height: 2.25rem; /* h-9 */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs);
  z-index: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.custom-btn:checked + .custom-btn,
:not(.btn-check) + .custom-btn:active,
.custom-btn:first-child:active,
.custom-btn.active,
.custom-btn.show {
  color: inherit !important;
  background-color: inherit !important;
  border-color: inherit !important;
}

.custom-btn:disabled {
  pointer-events: none;
}

.custom-btn[aria-invalid="true"],
.custom-btn:invalid {
  border-color: var(--destructive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 3px color-mix(in oklab, var(--destructive), transparent 80%); /* ~/20 */
}

[data-bs-theme="dark"] .custom-btn:invalid,
[data-bs-theme="dark"] .custom-btn[aria-invalid="true"] {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 3px color-mix(in oklab, var(--destructive), transparent 60%); /* ~/40 */
}

.custom-btn:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 3px color-mix(in oklab, var(--ring), transparent 50%);
}

.custom-btn svg {
  pointer-events: none;
  flex-shrink: 0;
}
.custom-btn svg:not([class*="size-"]) {
  width: 1rem;
  height: 1rem; /* [&_svg:not([class*='size-'])]:size-4 */
}

/* Si el botón tiene un SVG hijo directo, reducir padding horizontal (has-[>svg]:px-3) */
.custom-btn:has(> svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem; /* px-3 */
}

/* icon wrapper */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-icon);
  transition: color 0.2s ease;
}

.btn-icon i {
  font-size: 1.25rem;
}

.outlined-zinc-btn {
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
  transition: all 0.2s ease;
}

/* Hover */
.outlined-zinc-btn:hover {
  --color-btn: transparent;
  --btn-hover-overlay: transparent;
  --btn-bg: transparent;
  --btn-border: transparent;
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
  border: 1px solid var(--border) !important;
}

.outlined-zinc-btn:checked + .outlined-zinc-btn,
:not(.btn-check) + .outlined-zinc-btn:active,
.outlined-zinc-btn:first-child:active,
.outlined-zinc-btn.active,
.outlined-zinc-btn.show {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
  border: 1px solid var(--border) !important;
}

/* Dark Mode */
[data-bs-theme="dark"] .outlined-zinc-btn {
  background-color: color-mix(
    in oklab,
    var(--input) 30%,
    transparent
  ) !important;
  border: 1px solid var(--input) !important;
}

[data-bs-theme="dark"] .outlined-zinc-btn:hover {
  background-color: color-mix(
    in oklab,
    var(--input) 50%,
    transparent
  ) !important;
}

/* Blue Button */
.blue-btn {
  color: var(--color-white);
  background-color: var(--color-blue-600);
  border: 1px solid transparent !important;
}
.blue-btn:hover {
  color: var(--color-white);
  background-color: var(--color-blue-700);
  border: 1px solid transparent !important;
}
.blue-btn:disabled {
  color: var(--color-white);
  background-color: var(--color-blue-600);
  border: 1px solid transparent !important;
  opacity: 0.5;
}
.blue-btn:focus-visible {
  border-color: var(--color-blue-400);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 3px color-mix(in oklab, var(--color-blue-400), transparent 50%);
}


/* Primary Button */
.primary-btn {
  color: var(--primary-foreground);
  background-color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
}
.primary-btn:hover {
  background-color: oklch(from var(--primary) l c h / 90%) !important;
  color: var(--primary-foreground) !important;
}

.primary-btn:checked + .primary-btn,
:not(.btn-check) + .primary-btn:active,
.primary-btn:first-child:active,
.primary-btn.active,
.primary-btn.show {
  background-color: oklch(from var(--primary) l c h / 90%) !important;
  color: var(--primary-foreground) !important;
}

.primary-btn:disabled {
  color: var(--primary-foreground) !important;
  background-color: var(--primary);
  opacity: 0.5;
}

/* Secondary Button */
.secondary-btn {
  color: var(--secondary-foreground);
  background-color: var(--secondary);
}
.secondary-btn:hover {
  background-color: oklch(from var(--secondary) l c h / 80%) !important;
  color: var(--secondary-foreground) !important;
}

.secondary-btn:checked + .secondary-btn,
:not(.btn-check) + .secondary-btn:active,
.secondary-btn:first-child:active,
.secondary-btn.active,
.secondary-btn.show {
  background-color: oklch(from var(--secondary) l c h / 80%) !important;
  color: var(--secondary-foreground) !important;
}
.secondary-btn:disabled {
  color: var(--secondary-foreground) !important;
  background-color: var(--secondary) !important;
  opacity: 0.5;
}

/* Destructive Button */
.destructive-btn {
  color: var(--color-white);
  background-color: var(--destructive);
  border: 1px solid transparent !important;
}

.destructive-btn:checked + .destructive-btn,
:not(.btn-check) + .destructive-btn:active,
.destructive-btn:first-child:active,
.destructive-btn.active,
.destructive-btn.show {
  background-color: oklch(from var(--destructive) l c h / 90%) !important;
  color: var(--color-white) !important;
}
/* Dark Mode */
[data-bs-theme="dark"] .destructive-btn {
  background-color: color-mix(
    in oklab,
    var(--destructive) 60%,
    transparent
  ) !important;
  border: 1px solid transparent !important;
}
.destructive-btn:hover {
  background-color: oklch(from var(--destructive) l c h / 90%) !important;
  color: var(--color-white);
}
.destructive-btn:disabled {
  color: var(--color-white);
  background-color: var(--destructive);
  border: 1px solid transparent !important;
  opacity: 0.5;
}
.destructive-btn:focus-visible {
  border-color: var(--destructive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 3px color-mix(in oklab, var(--destructive), transparent 50%);
}

/* Red Button */
.red-btn {
  color: var(--color-white);
  background-color: var(--destructive);
  border: 1px solid transparent !important;
}
/* Dark Mode */
[data-bs-theme="dark"] .red-btn {
  background-color: color-mix(
    in oklab,
    var(--destructive) 60%,
    transparent
  ) !important;
  border: 1px solid transparent !important;
}
.red-btn:hover {
  background-color: oklch(from var(--destructive) l c h / 90%) !important;
  color: var(--color-white);
}
.red-btn:disabled {
  color: var(--color-white);
  background-color: var(--destructive);
  border: 1px solid transparent !important;
  opacity: 0.5;
}
.red-btn:focus-visible {
  border-color: var(--destructive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 3px color-mix(in oklab, var(--destructive), transparent 50%);
}

.medhome-btn {
  color: var(--color-white);
  --color-btn: transparent;
  --btn-hover-overlay: transparent;
  --btn-bg: transparent;
  --btn-icon: transparent;
  --btn-icon-hover: transparent;
  border: 1px solid transparent !important;
  background: linear-gradient(
    to right,
    var(--color-indigo-600),
    var(--color-blue-600)
  );
  border-left: 1px solid var(--color-indigo-600) !important;
  border-right: 1px solid var(--color-blue-600) !important;
}

.medhome-btn:hover,
.medhome-btn:focus-visible,
.medhome-btn:focus {
  background: linear-gradient(
    to right,
    var(--color-indigo-700),
    var(--color-blue-700)
  );
  color: var(--color-white) !important;
  
}
.medhome-btn:checked + .medhome-btn,
:not(.btn-check) + .medhome-btn:active,
.medhome-btn:first-child:active,
.medhome-btn.active,
.medhome-btn.show {
  background: linear-gradient(
    to right,
    var(--color-indigo-700),
    var(--color-blue-700)
  );
  color: var(--color-white) !important;
 
}



.medhome-ai-btn {
  color: var(--color-white);
  --color-btn: var(--color-white);
  --btn-hover-overlay: transparent;
  --btn-bg: transparent;
  --btn-icon: transparent;
  --btn-icon-hover: transparent;
  background: linear-gradient(
    to left,
    var(--color-violet-600),
    var(--color-pink-600)
  );
  border-right: 1px solid var(--color-violet-600) !important;
  border-left: 1px solid var(--color-pink-600) !important;
}
.medhome-ai-btn:hover {
  background: linear-gradient(
    to left,
    var(--color-violet-700),
    var(--color-pink-700)
  );
  color: var(--color-white) !important;
  border-right: 1px solid var(--color-violet-700) !important;
  border-left: 1px solid var(--color-pink-700) !important;
}

.medhome-ai-btn:disabled {
  color: var(--color-white);
  --color-btn: var(--color-white);
  --btn-hover-overlay: transparent;
  --btn-bg: transparent;
  --btn-icon: transparent;
  --btn-icon-hover: transparent;
  background: linear-gradient(
    to left,
    var(--color-violet-600),
    var(--color-pink-600)
  );
  border: 1px solid transparent !important;
  opacity: 0.5 !important;
}


.btn-close {
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  background-color: var(--background) !important;
  padding: 0.75rem 0.75rem !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  --ct-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23171717'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .btn-close {
  --ct-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fafafa'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.btn-close:hover {
  color: var(--accent-foreground) !important;
  filter: none !important;
}

[data-bs-theme="dark"] .btn-close {
  filter: none !important;
  background-color: var(--background) !important;
}
[data-bs-theme="dark"] .btn-close:hover {
  background-color: var(--background) !important;
}
.modal-header,
.modal-footer {
  border-color: transparent !important;
}

.btn-icon-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.icon-copy {
  width: 1rem !important;
  height: 1rem !important;
}

.btn-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  background-color: var(--secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
  padding: 0 !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-icon:hover {
  background-color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-icon i {
  width: 16px !important;
  height: 16px !important;
  color: var(--muted-foreground) !important;
  transition: color 0.2s ease !important;
}

.btn-icon:focus,
.btn-icon:active {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
  outline: none !important;
}

.btn-close-success {
  color: var(--color-green-400) !important;
  border-radius: var(--radius-sm) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 1px solid transparent !important;
  position: absolute !important;
  top: 0.375rem !important;
  right: 0.375rem !important;
  z-index: 2;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234ade80'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn-close-success:hover {
  background-color: var(--color-green-100) !important;
}
[data-bs-theme="dark"] .btn-close-success:hover {
  background-color: oklch(from var(--color-green-500) l c h / 10%) !important;
}
.alert-success {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  background-color: var(--color-green-50) !important;
  color: var(--color-green-800) !important;
  border-radius: var(--radius-sm) !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .alert-success {
  background-color: oklch(from var(--color-green-500) l c h / 10%) !important;
  color: var(--color-green-200) !important;
  border: 1px solid oklch(from var(--color-green-500) l c h / 20%) !important;
}
.success-icon {
  color: var(--color-green-400) !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
}
/* Danger */
.btn-close-danger {
  color: var(--color-red-400) !important;
  border-radius: var(--radius-sm) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 1px solid transparent !important;
  position: absolute !important;
  top: 0.375rem !important;
  right: 0.375rem !important;
  z-index: 2;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ef5350'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn-close-danger:hover {
  background-color: var(--color-red-100) !important;
}
[data-bs-theme="dark"] .btn-close-danger:hover {
  background-color: oklch(from var(--color-red-500) l c h / 15%) !important;
}
.alert-danger {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  background-color: var(--color-red-50) !important;
  color: var(--color-red-800) !important;
  border-radius: 0.375rem !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .alert-danger {
  background-color: oklch(from var(--color-red-500) l c h / 15%) !important;
  color: var(--color-red-200) !important;
  border: 1px solid oklch(from var(--color-red-500) l c h / 25%) !important;
}
.danger-icon {
  color: var(--color-red-400) !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
}

/* Info */
.btn-close-info {
  color: var(--color-blue-400) !important;
  border-radius: var(--radius-md) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 1px solid transparent !important;
  position: absolute !important;
  top: 0.375rem !important;
  right: 0.375rem !important;
  z-index: 2;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2363b3ed'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn-close-info:hover {
  background-color: var(--color-blue-100) !important;
}
[data-bs-theme="dark"] .btn-close-info:hover {
  background-color: oklch(from var(--color-blue-500) l c h / 10%) !important;
}
.alert-info {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  background-color: var(--color-blue-50) !important;
  color: var(--color-blue-800) !important;
  border-radius: var(--radius-sm) !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .alert-info {
  background-color: oklch(from var(--color-blue-500) l c h / 10%) !important;
  color: var(--color-blue-300) !important;
  border: 1px solid oklch(from var(--color-blue-500) l c h / 20%) !important;
}
.info-icon {
  color: var(--color-blue-400) !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
}
/* Warning */
.btn-close-warning {
  color: var(--color-yellow-400) !important;
  border-radius: var(--radius-sm) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 1px solid transparent !important;
  position: absolute !important;
  top: 0.375rem !important;
  right: 0.375rem !important;
  z-index: 2;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23facc15'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn-close-warning:hover {
  background-color: var(--color-yellow-100) !important;
}
[data-bs-theme="dark"] .btn-close-warning:hover {
  background-color: oklch(from var(--color-yellow-500) l c h / 10%) !important;
}
.alert-warning {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  background-color: var(--color-yellow-50) !important;
  color: var(--color-yellow-700) !important;
  border-radius: var(--radius-sm) !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .alert-warning {
  background-color: oklch(from var(--color-yellow-500) l c h / 10%) !important;
  color: var(--color-yellow-100) !important;
  border: 1px solid oklch(from var(--color-yellow-500) l c h / 20%) !important;
}
.warning-icon {
  color: var(--color-yellow-400) !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
}

/* Delete Icon */

.delete-icon-wrapper {
  border-radius: 0.375rem !important;
  background-color: var(--color-red-50) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.delete-icon-wrapper:hover {
  background-color: var(--color-red-100) !important;
}
[data-bs-theme="dark"] .delete-icon-wrapper {
  color: var(--color-white) !important;
  background: oklch(from var(--destructive) l c h / 60%) !important;
}
[data-bs-theme="dark"] .delete-icon-wrapper:hover {
  color: var(--color-white) !important;
  background: oklch(from var(--destructive) l c h / 90%) !important;
}

/* Asegura que el SVG NO tenga fondo */
[data-bs-theme="dark"] .delete-icon-wrapper svg,
[data-bs-theme="dark"] .delete-icon-wrapper:hover svg,
[data-bs-theme="dark"] .edit-icon-wrapper svg,
[data-bs-theme="dark"] .edit-icon-wrapper:hover svg {
  background: transparent !important;
}
.delete-icon {
  width: 1rem !important;
  height: 1rem !important;
  color: var(--color-red-500) !important;
}

[data-bs-theme="dark"] .delete-icon,
[data-bs-theme="dark"] .delete-icon:hover {
  color: var(--color-white) !important;
}

.edit-icon-wrapper {
  border-radius: 0.375rem !important;
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* ⚠️ Casi todas las acciones de tabla son <a>, que no traen adorno propio. Sobre un <button>
     —el caso de las que abren un dialogo en vez de navegar— el navegador agrega su borde
     "outset 2px" y un padding, y el mismo icono se ve distinto al de la tabla de al lado. */
  border: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
.edit-icon-wrapper:hover {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

[data-bs-theme="dark"] .edit-icon-wrapper:hover {
  color: var(--primary-foreground) !important;
  background: var(--primary) !important;
}

.custom-badge {
  border: 1px solid var(--border) !important;
  color: var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.success-icon-wrapper {
  border-radius: var(--radius-sm) !important;
  background-color: var(--color-emerald-50) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.success-icon-wrapper:hover {
  background-color: var(--color-emerald-100) !important;
}
.success-icon {
  width: 1rem !important;
  height: 1rem !important;
  color: var(--color-emerald-500) !important;
}

/* ========================================
   Search Input con Clear Button (Lucide)
   ======================================== */

/* Ocultar la X nativa de webkit */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Contenedor del input con icono */
.search-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Espacio para el icono clear */
.search-input-wrapper input[type="search"] {
  padding-right: 2.5rem;
}

/* Botón clear personalizado */
.search-clear-btn {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  display: none;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
  border-radius: var(--radius-sm);
  z-index: 10;
}

.search-clear-btn:hover {
  color: var(--foreground);
  background-color: var(--accent);
}

.search-clear-btn:active {
  transform: scale(0.95);
  opacity: 0.7;
}

.search-clear-btn svg {
  width: 16px;
  height: 16px;
}

/* Mostrar solo cuando hay contenido */
.search-input-wrapper
  input[type="search"]:not(:placeholder-shown)
  ~ .search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   PLACEHOLDERS GLOBALES
   Aplica color muted-foreground a todos los placeholders
   para mantener consistencia visual y mejor UX
   Se carga después de app-saas.css para sobrescribir
   ======================================== */
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

.form-control::-moz-placeholder,
.form-select::-moz-placeholder,
textarea::-moz-placeholder,
input::-moz-placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

.form-control::-ms-input-placeholder,
.form-select::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input::-ms-input-placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

/* Excepción: placeholders en campos inválidos mantienen color rojo */
.form-control.is-invalid::-webkit-input-placeholder,
.form-control.is-invalid::-moz-placeholder,
.form-control.is-invalid:-ms-input-placeholder,
.form-control.is-invalid::-ms-input-placeholder,
.form-control.is-invalid::placeholder {
  color: var(--color-red-300) !important;
}

/* Excepción: placeholders en floating labels permanecen transparentes */
.form-floating > .form-control::-webkit-input-placeholder,
.form-floating > .form-control-plaintext::-webkit-input-placeholder {
  color: transparent !important;
}

.form-floating > .form-control::-moz-placeholder,
.form-floating > .form-control-plaintext::-moz-placeholder {
  color: transparent !important;
}

.form-floating > .form-control:-ms-input-placeholder,
.form-floating > .form-control-plaintext:-ms-input-placeholder {
  color: transparent !important;
}

.form-floating > .form-control::-ms-input-placeholder,
.form-floating > .form-control-plaintext::-ms-input-placeholder {
  color: transparent !important;
}

.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
  color: transparent !important;
}