/* Buttons: action, appearance and size are independent axes. */
:root {
  /* Confirmación de éxito dentro del botón (.ds-btn.is-success). */
  --ds-btn-success-bg: var(--ds-status-success);
  /* Se oscurece con negro puro: --color-negro cambia con el tema y en oscuro es un tono claro. */
  --ds-btn-success-border: color-mix(in srgb, var(--ds-status-success) 70%, black);
  --ds-btn-success-color: var(--color-blanco);
  --ds-btn-success-duration: 500ms;
  --ds-btn-success-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--small);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.ds-btn--sm {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 0.85rem;
}

.ds-btn--lg {
  min-height: 52px;
  padding: 1rem 1.75rem;
  font-size: 1.35rem;
}

.ds-btn--full {
  width: 100%;
}

/* CTA de los heros (home, servicios): un escalón más grande y en negrita. */
.ds-btn--hero {
  min-height: 50px;
  padding: 12px 26px;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
}

.ds-btn--strong {
  font-weight: var(--font-weight-bold);
}

.ds-btn--primary {
  border-color: var(--ds-btn-primary-bg, var(--color-action-primary));
  background: var(--ds-btn-primary-bg, var(--color-action-primary));
  color: var(--ds-btn-primary-color, var(--color-blanco));
  box-shadow: var(--shadow-xs);
}

/* El hover oscurece el fondo: solo con la sombra no se notaba sobre fondos oscuros. */
.ds-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  --ds-btn-primary-bg-hover: color-mix(in srgb, var(--ds-btn-primary-bg, var(--color-action-primary)) 86%, #000);
  border-color: var(--ds-btn-primary-bg-hover);
  background: var(--ds-btn-primary-bg-hover);
  color: var(--ds-btn-primary-color, var(--color-blanco));
  box-shadow: var(--shadow-sm);
}

.ds-btn--secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xs);
}

.ds-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
}

.ds-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
}

.ds-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
}

.ds-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.ds-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.ds-btn--ghost:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.ds-btn:focus-visible {
  outline: 2px solid var(--ds-btn-focus, var(--color-focus));
  outline-offset: 3px;
}

/* Estado de éxito: la acción se confirmó. Un círculo del color de éxito nace en el centro
   y cubre el botón; después entra el contenido de .ds-btn__success (check + texto).
   Marcado: <span class="ds-btn__label">…</span><span class="ds-btn__success" aria-hidden="true">…</span>.
   El label sigue ocupando su lugar (invisible), así el botón no cambia de tamaño. */
.ds-btn__success {
  display: none;
}

/* Los selectores con :hover/:active igualan la especificidad de las variantes: en táctil el
   botón queda en :hover después del toque y su borde no debe pisar al del estado de éxito. */
.ds-btn.is-success,
.ds-btn.is-success:hover:not(:disabled):not([aria-disabled="true"]),
.ds-btn.is-success:active:not(:disabled):not([aria-disabled="true"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--ds-btn-success-border);
  color: var(--ds-btn-success-color);
  box-shadow: var(--shadow-xs);
  pointer-events: none;
}

.ds-btn.is-success::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--ds-btn-success-bg);
  transform: translate(-50%, -50%) scale(1.2);
}

.ds-btn.is-success .ds-btn__label {
  opacity: 0;
}

.ds-btn.is-success .ds-btn__success {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ds-btn__success svg {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
  .ds-btn.is-success::before {
    animation: ds-btn-success-ripple var(--ds-btn-success-duration) var(--ds-btn-success-ease) both;
  }

  .ds-btn.is-success {
    transition: border-color var(--ds-btn-success-duration) var(--ds-btn-success-ease);
  }

  .ds-btn.is-success .ds-btn__label {
    transition: opacity var(--transition-fast);
  }

  .ds-btn.is-success .ds-btn__success {
    animation: ds-btn-success-in calc(var(--ds-btn-success-duration) * 0.6) var(--ds-btn-success-ease)
      calc(var(--ds-btn-success-duration) * 0.55) both;
  }

  @keyframes ds-btn-success-ripple {
    from {
      transform: translate(-50%, -50%) scale(0);
    }
  }

  @keyframes ds-btn-success-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
  }
}

.ds-btn--circle {
  --ds-circle-size: 40px;
  width: var(--ds-circle-size);
  height: var(--ds-circle-size);
  min-width: var(--ds-circle-size);
  min-height: var(--ds-circle-size);
  padding: 0;
  flex: 0 0 var(--ds-circle-size);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-circle);
  overflow: hidden;
}

.ds-btn--circle.ds-btn--sm {
  --ds-circle-size: 38px;
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.58;
  pointer-events: none;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn {
    transition: none;
  }
}

/* Legacy segmented controls used by Admin/Empresas. */
.cir-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px;
  border: 1px solid var(--color-edge, #e3e8ee);
  border-radius: var(--radius-pill);
  background: var(--color-cloud, #ffffff);
  box-shadow:
    0 1px 1px rgba(14, 17, 22, 0.04),
    0 20px 40px -24px rgba(14, 17, 22, 0.18);
  font-family: var(--font-family-sans, system-ui, -apple-system, sans-serif);
}

.cir-tabs__t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--cir-tabs-button-height, 32px);
  padding: var(--cir-tabs-button-padding, 0 14px);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-mist, #5b6472);
  font: inherit;
  font-size: var(--cir-tabs-font-size, inherit);
  font-weight: var(--cir-tabs-font-weight, 500);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cir-tabs__t:hover {
  color: var(--color-ink, #0e1116);
}

.cir-tabs__t[aria-selected="true"] {
  background: var(--color-ink, #1d4ed8);
  color: var(--color-cloud, #ffffff);
  box-shadow:
    0 1px 1px rgba(14, 17, 22, 0.06),
    0 8px 18px -10px rgba(14, 17, 22, 0.5);
}

.cir-tabs__t:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(46, 125, 239, 0.32);
}

.cir-tabs--segmented {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--cir-tabs-border, var(--admin-border, var(--emp-border, #dfe3ea)));
  border-radius: var(--cir-tabs-radius, 12px);
  background: var(--cir-tabs-bg, var(--admin-surface-soft, var(--emp-surface-soft, #f4f5f8)));
  box-shadow: none;
}

.cir-tabs--segmented.cir-tabs--with-tooltips {
  overflow: visible;
}

.cir-tabs--segmented .cir-tabs__t {
  height: var(--cir-tabs-segment-height, 42px);
  padding: var(--cir-tabs-segment-padding, 0 18px);
  border-radius: 0;
  color: var(--cir-tabs-muted, var(--admin-text-secondary, var(--emp-muted, #646e87)));
  font-size: var(--cir-tabs-segment-font-size, var(--cir-tabs-font-size, inherit));
  font-weight: var(--cir-tabs-font-weight, 500);
  box-shadow: none;
}

.cir-tabs--segmented.cir-tabs--with-tooltips .cir-tabs__t:first-child {
  border-top-left-radius: calc(var(--cir-tabs-radius, 12px) - 1px);
  border-bottom-left-radius: calc(var(--cir-tabs-radius, 12px) - 1px);
}

.cir-tabs--segmented.cir-tabs--with-tooltips .cir-tabs__t:last-child {
  border-top-right-radius: calc(var(--cir-tabs-radius, 12px) - 1px);
  border-bottom-right-radius: calc(var(--cir-tabs-radius, 12px) - 1px);
}

.cir-tabs--segmented .cir-tabs__t + .cir-tabs__t {
  border-left: 1px solid var(--cir-tabs-border, var(--admin-border, var(--emp-border, #dfe3ea)));
}

.cir-tabs--segmented .cir-tabs__t:hover {
  background: var(--cir-tabs-hover-bg, var(--admin-surface-hover, var(--emp-surface-hover, #f4f5f8)));
  color: var(--cir-tabs-text, var(--admin-text, var(--emp-text, #1f2433)));
}

.cir-tabs--segmented .cir-tabs__t[aria-selected="true"] {
  background: var(--cir-tabs-active-bg, var(--admin-border-soft, var(--emp-border-soft, #eaecf1)));
  color: var(--cir-tabs-text, var(--admin-text, var(--emp-text, #1f2433)));
  box-shadow: none;
}

.cir-tabs--segmented .cir-tabs__t:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--cir-tabs-focus, var(--admin-primary-light, var(--emp-primary-light, #7c87f7)));
  outline-offset: -2px;
}

.cir-tabs--icon .cir-tabs__t,
.cir-tabs__t--icon {
  width: var(--cir-tabs-icon-button-size, var(--cir-tabs-segment-height, 42px));
  min-width: var(--cir-tabs-icon-button-size, var(--cir-tabs-segment-height, 42px));
  padding: 0;
}

.cir-tabs--icon .cir-tabs__t :where(svg, i),
.cir-tabs__t--icon :where(svg, i) {
  display: block;
  flex: 0 0 var(--cir-tabs-icon-size, 24px);
  width: var(--cir-tabs-icon-size, 24px);
  min-width: var(--cir-tabs-icon-size, 24px);
  max-width: none;
  height: var(--cir-tabs-icon-size, 24px);
  min-height: var(--cir-tabs-icon-size, 24px);
}

.cir-tabs__t--with-tooltip {
  position: relative;
}

.cir-tabs__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 220px;
  visibility: hidden;
  padding: 10px 12px;
  border-radius: 7px;
  background: #1f2937;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.cir-tabs__tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: #1f2937;
  content: "";
  transform: translateX(-50%);
}

.cir-tabs__t--with-tooltip:hover .cir-tabs__tooltip,
.cir-tabs__t--with-tooltip:focus-visible .cir-tabs__tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  animation: cir-tabs-tooltip-bounce 0.45s ease;
}

.cir-tabs--segmented .cir-tabs__t.is-selected {
  background: var(--cir-tabs-active-bg, var(--admin-border-soft, var(--emp-border-soft, #eaecf1)));
  color: var(--cir-tabs-text, var(--admin-text, var(--emp-text, #1f2433)));
  box-shadow: none;
}

.cir-tabs--segmented .cir-tabs__t--danger {
  color: var(--cir-tabs-danger, var(--admin-danger, var(--emp-danger, #e0687d)));
}

.cir-tabs--segmented .cir-tabs__t--danger:hover,
.cir-tabs--segmented .cir-tabs__t--danger:focus-visible {
  color: var(--cir-tabs-danger-strong, var(--admin-danger-strong, var(--emp-danger-strong, #c03a5a)));
}

@media (prefers-reduced-motion: reduce) {
  .cir-tabs__t {
    transition: none;
  }

  .cir-tabs__tooltip {
    transition: none;
  }

  .cir-tabs__t--with-tooltip:hover .cir-tabs__tooltip,
  .cir-tabs__t--with-tooltip:focus-visible .cir-tabs__tooltip {
    animation: none;
  }
}

@keyframes cir-tabs-tooltip-bounce {
  0%,
  100% {
    margin-bottom: 0;
  }

  50% {
    margin-bottom: 6px;
  }
}