/* ==========================================================================
   MAGIVERCOL DESIGN SYSTEM V6 · CONTROLES NATIVOS PENDIENTES — v2 (2 ago 2026)

   ALCANCE ACOTADO A PROPÓSITO.

   Antes de escribir esto se midió el estado real en producción. Resultado:
   el primario (`.btn-primary`) y los campos (`.form-control`) YA están
   vestidos por `magivercol-paginas-v9.css` — radio 13px, borde V6, degradado
   iridiscente. Se comprobó en login, registro, contacto y en el botón
   "Iniciar Compra" del panel de carrito (460x46, radio 13px, degradado).

   Por eso este archivo NO vuelve a definir primario ni campos: solo cubre
   los cuatro controles que seguían nativos.

   Reglas de seguridad:
   - Ningún selector usa `.btn` a secas: esa clase también la llevan los
     controles que el tema esconde para lectores de pantalla dentro de
     `.mg-sr` (`.js-insta-variant.btn.btn-variant`). Se apunta siempre a
     clases específicas o dentro de un contenedor concreto.
   - No se tocan `display`, `pointer-events`, `position` ni nada que altere
     el comportamiento nativo, el envío de formularios o las validaciones.
   - `:disabled` conserva el bloqueo nativo; solo se atenúa visualmente.
   - Todos los controles conservan anillo de foco visible para teclado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · BOTÓN SECUNDARIO V6 — controles de cantidad (− y +)
   Medido antes: 16x23 px, sin borde, sin radio, color #1a1a1a.
   Aparecen en la ficha de producto y en el panel de carrito.
   `.form-quantity-icon` no existe dentro de `.mg-sr`.
   -------------------------------------------------------------------------- */
body.mg .form-quantity-icon{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--mg-line,#e4e4ea);
  border-radius:10px;
  background:#fff;
  color:var(--mg-ink,#1d1d1f);
  transition:border-color .2s ease,background .2s ease;
}
body.mg .form-quantity-icon:hover{
  border-color:#d3d3da;
  background:#fbfbfd;
}
body.mg .form-quantity-icon:focus-visible{
  outline:2px solid var(--mg-blue,#0071E3);
  outline-offset:2px;
}
body.mg .form-quantity-icon.disabled,
body.mg .form-quantity-icon:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* El campo numérico entre ambos, para que la pieza se lea como una unidad. */
body.mg .js-cart-quantity-input,
body.mg .js-quantity-input{
  border:1px solid var(--mg-line,#e4e4ea);
  border-radius:10px;
  min-height:32px;
  font-weight:600;
}

/* --------------------------------------------------------------------------
   2 · BOTÓN GHOST V6 — "Ver más productos" del panel de carrito
   Medido antes: azul nativo #0071E3 subrayado, sin radio.
   Se alinea con el iris del sistema, que es lo que ya usa
   "¿Cuál me conviene?" en la ficha (medido: rgb(91,52,184), ya correcto,
   por eso no se toca).
   -------------------------------------------------------------------------- */
body.mg #modal-cart .btn-link{
  color:var(--mg-iris,#5B34B8);
  font-weight:600;
  font-size:13.5px;
  border-radius:10px;
  padding:8px 12px;
  text-decoration:none;
  transition:color .2s ease,background .2s ease;
}
body.mg #modal-cart .btn-link:hover{
  color:#3f2489;
  background:rgba(91,52,184,.07);
}
body.mg #modal-cart .btn-link:focus-visible{
  outline:2px solid var(--mg-blue,#0071E3);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   3 · BOTÓN PELIGRO V6 — eliminar una línea del carrito
   Medido antes: negro plano, 24x20, sin radio ni estado.
   Acotado al contenedor de borrado para no alcanzar ningún otro `.btn`.
   -------------------------------------------------------------------------- */
body.mg .cart-item-delete .btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  color:#b3261e;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
body.mg .cart-item-delete .btn:hover{
  background:rgba(179,38,30,.08);
  border-color:rgba(179,38,30,.22);
  color:#8c1d18;
}
body.mg .cart-item-delete .btn:focus-visible{
  outline:2px solid #b3261e;
  outline-offset:2px;
}
body.mg .cart-item-delete .btn svg{fill:currentColor;stroke:none}

/* --------------------------------------------------------------------------
   4 · BOTÓN GHOST V6 DE ICONO — mostrar/ocultar contraseña en login y registro
   Medido antes: sin radio ni área de toque propia.
   -------------------------------------------------------------------------- */
body.mg .form-toggle-eye{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:36px;
  border-radius:10px;
  color:var(--mg-ink-2,#6e6e73);
  transition:color .2s ease,background .2s ease;
}
body.mg .form-toggle-eye:hover{
  color:var(--mg-ink,#1d1d1f);
  background:rgba(29,29,31,.05);
}
body.mg .form-toggle-eye:focus-visible{
  outline:2px solid var(--mg-blue,#0071E3);
  outline-offset:2px;
}