/* MP360 · Ayres de Cardales — Botón (componente reutilizable)
 *
 * Port del botón primario ORIGINAL de Advisora
 * (REFERENCIAS/advisora-navbar/original/src/styles/webflow.css `.button`,
 * `.button.is-primary`, `.button-text-wrap`, `.button-text`, `.button-shadow-*`,
 * `.button-icon` + components.css "Button is-primary — OSMO button-009").
 *
 * Se conservan: estructura (texto doble en un wrap con overflow clip, sombras
 * de borde, ícono derecho como hijo flex real, ícono izquierdo espejo en
 * ::before), overflow clip, gap, alto mínimo, padding, escala .975 en hover
 * (transform .3s), intercambio del ícono entre ambos lados, desplazamiento del
 * texto (ícono + gap), duraciones, delays y curva cubic-bezier(0.32, 0.72, 0, 1).
 *
 * Adaptaciones autorizadas:
 *   - Inter (rol interfaz, decisión 2026-09-15): peso 600 y tracking de Inter
 *     por tamaño; sin la compensación óptica vertical que necesitaba Josefin;
 *   - radio --radius-primary-cta en lugar de la píldora;
 *   - paleta del design system mediante variables;
 *   - ícono Núcleo por máscara (el mismo en ambos lados; toma el color del texto).
 * Adaptaciones de comportamiento (DESIGN.md §7/§9):
 *   - la escala de hover queda dentro de (hover: hover) and (pointer: fine):
 *     en táctil el :hover queda pegado;
 *   - :focus-visible reproduce el intercambio y agrega contorno visible;
 *   - estados deshabilitado y en espera.
 *
 * Markup mínimo (button o a):
 *   <button class="mp360-boton mp360-boton--primario" type="button">
 *     <span class="mp360-boton__textos">
 *       <span class="mp360-boton__texto">Rótulo</span>
 *       <span class="mp360-boton__texto is-segundo" aria-hidden="true">Rótulo</span>
 *       <span class="mp360-boton__sombra-arriba" aria-hidden="true"></span>
 *       <span class="mp360-boton__sombra-abajo" aria-hidden="true"></span>
 *     </span>
 *     <span class="mp360-boton__icono" aria-hidden="true"></span>
 *   </button>
 *
 * Variantes de color: --primario (fondo primario de marca, texto blanco) ·
 * --claro (fondo blanco, texto primario; para fondos oscuros o medios).
 * Otro ícono: declarar --mp360-boton-icono: url("../icons/nucleo/<nombre>.svg")
 * en una hoja de assets/css/ (la URL se resuelve contra la hoja).
 */

.mp360-boton {
  --mp360-boton-fondo: var(--brand-primary);
  --mp360-boton-texto: var(--white);
  --mp360-boton-foco: var(--secondary-400);
  --mp360-boton-icono-tam: 1.125rem;
  --mp360-boton-gap: 0.5rem;
  --mp360-boton-pad: 1.5rem;
  --mp360-boton-curva: cubic-bezier(0.32, 0.72, 0, 1);

  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--mp360-boton-gap);
  min-height: 3.25rem;
  margin: 0;
  padding: 0 var(--mp360-boton-pad);
  overflow: clip;
  border: 0;
  border-radius: var(--radius-primary-cta);
  background-color: var(--mp360-boton-fondo);
  color: var(--mp360-boton-texto);
  font-family: var(--mp360-font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--mp360-ui-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.mp360-boton__textos {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  overflow: clip;
  transition: translate 0.5s var(--mp360-boton-curva);
}

.mp360-boton__texto {
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.mp360-boton__texto.is-segundo {
  transform: translate(0, 50%);
}

.mp360-boton__sombra-arriba,
.mp360-boton__sombra-abajo {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  pointer-events: none;
}
.mp360-boton__sombra-arriba {
  top: 0;
  background-image: linear-gradient(180deg, var(--mp360-boton-fondo), transparent);
}
.mp360-boton__sombra-abajo {
  bottom: 0;
  background-image: linear-gradient(0deg, var(--mp360-boton-fondo), transparent);
}

/* Ícono: máscara del SVG Núcleo pintada con el color del texto. */
.mp360-boton__icono,
.mp360-boton--primario::before {
  -webkit-mask-image: var(--mp360-boton-icono, url("../icons/nucleo/arrow-right.svg"));
  mask-image: var(--mp360-boton-icono, url("../icons/nucleo/arrow-right.svg"));
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}

.mp360-boton__icono {
  display: block;
  flex: none;
  align-self: center;
  width: var(--mp360-boton-icono-tam);
  height: var(--mp360-boton-icono-tam);
  margin: 0;
}

/* ---------------- primario: intercambio del ícono ---------------- */

.mp360-boton--primario .mp360-boton__icono {
  transition: translate 0.5s var(--mp360-boton-curva), opacity 0.15s ease-out;
}

.mp360-boton--primario::before {
  content: "";
  position: absolute;
  left: var(--mp360-boton-pad);
  top: 50%;
  width: var(--mp360-boton-icono-tam);
  height: var(--mp360-boton-icono-tam);
  translate: -1.25em -50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: translate 0.5s var(--mp360-boton-curva), opacity 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .mp360-boton:hover { transform: scale(0.975); }

  .mp360-boton--primario:hover .mp360-boton__icono {
    translate: 1.5em 0;
    opacity: 0;
    transition: translate 0.5s 0.05s var(--mp360-boton-curva), opacity 0.15s 0.075s ease-out;
  }
  .mp360-boton--primario:hover::before {
    translate: 0 -50%;
    opacity: 1;
    transition: translate 0.5s 0.075s var(--mp360-boton-curva), opacity 0.15s 0.075s ease-out;
  }
  .mp360-boton--primario:hover .mp360-boton__textos {
    translate: calc(var(--mp360-boton-icono-tam) + var(--mp360-boton-gap)) 0;
    transition: translate 0.5s 0.075s var(--mp360-boton-curva);
  }
}

/* Teclado: mismo intercambio + contorno visible. */
.mp360-boton:focus { outline: none; }
.mp360-boton:focus-visible {
  outline: 2px solid var(--mp360-boton-foco);
  outline-offset: 3px;
}
.mp360-boton--primario:focus-visible .mp360-boton__icono {
  translate: 1.5em 0;
  opacity: 0;
  transition: translate 0.5s 0.05s var(--mp360-boton-curva), opacity 0.15s 0.075s ease-out;
}
.mp360-boton--primario:focus-visible::before {
  translate: 0 -50%;
  opacity: 1;
  transition: translate 0.5s 0.075s var(--mp360-boton-curva), opacity 0.15s 0.075s ease-out;
}
.mp360-boton--primario:focus-visible .mp360-boton__textos {
  translate: calc(var(--mp360-boton-icono-tam) + var(--mp360-boton-gap)) 0;
  transition: translate 0.5s 0.075s var(--mp360-boton-curva);
}

/* ---------------- variantes de color ---------------- */

.mp360-boton--claro {
  --mp360-boton-fondo: var(--white);
  --mp360-boton-texto: var(--primary-700);
  --mp360-boton-foco: var(--white);
}

/* Oscura (agente de navbar, 2026-09-15): fondo --neutral-950, texto e ícono
   blancos. Uso: "Volver a lotes" sobre el panorama. */
.mp360-boton--oscuro {
  --mp360-boton-fondo: var(--neutral-950);
  --mp360-boton-texto: var(--white);
  --mp360-boton-foco: var(--white);
}

/* Secundaria (tanda 4): fondo transparente, borde y texto claros. Sin
   intercambio de ícono ni escala en hover: cambio sobrio de fondo y borde, para
   no competir con la principal. Mismo alto, padding y tipografía. Colores
   ajustables por contexto con las variables --mp360-boton-borde* y
   --mp360-boton-fondo-hover (tokens de paleta). */
.mp360-boton--secundario {
  --mp360-boton-fondo: transparent;
  --mp360-boton-texto: var(--white);
  --mp360-boton-borde: var(--primary-200);
  --mp360-boton-borde-hover: var(--white);
  --mp360-boton-fondo-hover: var(--primary-600);
  --mp360-boton-foco: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--mp360-boton-borde);
  transition: transform 0.3s, background-color 0.25s ease-out, box-shadow 0.25s ease-out;
}
.mp360-boton--secundario .mp360-boton__sombra-arriba,
.mp360-boton--secundario .mp360-boton__sombra-abajo,
.mp360-boton--secundario .mp360-boton__texto.is-segundo { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mp360-boton--secundario:hover {
    transform: none;
    background-color: var(--mp360-boton-fondo-hover);
    box-shadow: inset 0 0 0 1.5px var(--mp360-boton-borde-hover);
  }
}
.mp360-boton--secundario:focus-visible {
  background-color: var(--mp360-boton-fondo-hover);
  box-shadow: inset 0 0 0 1.5px var(--mp360-boton-borde-hover);
}
.mp360-boton--secundario:active {
  transform: scale(0.985);
  background-color: var(--mp360-boton-fondo-hover);
  box-shadow: inset 0 0 0 1.5px var(--mp360-boton-borde-hover);
}

/* ---------------- estados ---------------- */

/* Deshabilitado: sin intercambio ni escala; sigue legible. */
.mp360-boton:disabled,
.mp360-boton[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.mp360-boton:disabled .mp360-boton__icono,
.mp360-boton[aria-disabled="true"] .mp360-boton__icono { translate: none; opacity: 1; }
.mp360-boton:disabled::before,
.mp360-boton[aria-disabled="true"]::before { opacity: 0; }
.mp360-boton:disabled .mp360-boton__textos,
.mp360-boton[aria-disabled="true"] .mp360-boton__textos { translate: none; }

/* En espera (la acción fue recibida y se completa sola): el control queda en
   su lugar, sin intercambio, y el ícono late apenas. */
.mp360-boton.is-waiting { cursor: progress; transform: none; }
.mp360-boton.is-waiting .mp360-boton__icono {
  translate: none;
  opacity: 1;
  animation: mp360-boton-espera 1.2s ease-in-out infinite alternate;
}
.mp360-boton.is-waiting::before { opacity: 0; translate: -1.25em -50%; }
.mp360-boton.is-waiting .mp360-boton__textos { translate: none; }

@keyframes mp360-boton-espera {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-boton,
  .mp360-boton__textos,
  .mp360-boton__icono,
  .mp360-boton--primario::before { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .mp360-boton.is-waiting .mp360-boton__icono { animation: none; }
}