/* Botón CTA */
.btn-cta{
  display: inline-flex; 
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #000;
  background: #000;
  color: #fff; 
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all .2s ease;
  justify-content: center;
}
.btn-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  color: #fff;
}
.btn-cta-outline{
  display: inline-flex; 
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #000;
  color: #000; 
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all .2s ease;
  justify-content: center;
}
.btn-cta-outline:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  color: #000;
}
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 48;
}

/* BOTON INICIAR CON GOOGLE */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid #ddd;
    color: #555;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-google:hover {
    background-color: #f1f1f1;
}

.google-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


/* BOTONES E INPUT DE CARRITOS */
/* CONTENEDOR PRINCIPAL (50% + 50%) */
.cantidad-block {
    width: 100%;
    display: flex;
    gap: 0;
}

/* IZQUIERDA: controles de cantidad */
.cantidad-controls {
    display: flex;
    width: 100%;
}

/* HACER QUE CADA ELEMENTO OCUPE LA MISMA PARTE */
.cantidad-controls button.btn-restar,
.cantidad-controls input,
.cantidad-controls button.btn-sumar {
    flex: 1,2,1; /* ¡Cada uno ocupa su parte! */
}

/* QUITAR ANCHOS FIJOS */
.cantidad-controls input {
    max-width: none !important;
}

/* BORDE IZQUIERDO REDONDEADO (SOLO EL DE RESTAR) */
.cantidad-controls button.btn-restar {
    border-top-left-radius: .4rem !important;
    border-bottom-left-radius: .4rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Quitar radios internos */
.cantidad-controls input{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;}

.cantidad-controls button.btn-sumar {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: .4rem !important;
    border-bottom-right-radius: .4rem !important;
}

/* DERECHA: botón eliminar */
.btn-eliminar-item-carrito {
    width: 50%;
    border-top-right-radius: .4rem !important;
    border-bottom-right-radius: .4rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* MISMO ALTO PARA TODO */
.cantidad-controls button,
.cantidad-controls input,
.btn-eliminar-item-carrito {
    height: 32px;
}


/* PARA LA ACTUALIZACION DEL CARRITO */
.cantidad-controls-update{
  width: 100%;
}
.cantidad-controls-update button.btn-restar {
    border-top-left-radius: .4rem !important;
    border-bottom-left-radius: .4rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.cantidad-controls-update button.btn-sumar {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: .4rem !important;
    border-bottom-right-radius: .4rem !important;
}
.btn-link-vk{
    color: var(--mi-danger);
}
.btn-link-vk:hover{
    color: var(--mi-dangerHover);
}