/* ElectroPC · "Agregar al carrito" que responde en el lugar (agregar.js).
   La forma azul es una capa adentro del botón: el botón conserva su ancho y
   nada alrededor se mueve mientras ella se cierra en un círculo. */
.eph-ag{position:relative;isolation:isolate}
.eph-ag .eph-ag-forma{position:absolute;top:0;bottom:0;left:50%;width:100%;
  transform:translateX(-50%);border-radius:999px;z-index:-1;pointer-events:none}
.eph-ag .eph-ag-texto{display:inline-flex;align-items:center;justify-content:center;gap:inherit}
.eph-ag .eph-ag-ico{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.eph-ag .eph-ag-ico:empty{display:none}
.eph-ag .eph-ag-ico svg{display:block;color:#fff}
/* Mientras trabaja, el fondo lo pone la forma. */
.eph-ag.eph-ag-activo,
.eph-ag.eph-ag-activo:hover{background:transparent!important;border-color:transparent!important;filter:none!important;cursor:default}
.eph-ag:not(.eph-ag-activo) .eph-ag-forma{display:none}

.eph-ag-vuelo{position:fixed;z-index:100000;pointer-events:none;will-change:transform}
.eph-ag-punto{border-radius:50%;will-change:transform}

/* El error no estrena color: va en tinta (DESIGN.md, "El error grave no estrena color"). */
.eph-ag-error{flex-basis:100%;margin:.5rem 0 0;font-size:.875rem;font-weight:600;line-height:1.4;
  color:var(--pr-tinta,var(--epa-tinta,currentColor))}

.eph-ag-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .eph-ag-vuelo{display:none}
}