/* tienda/css/carro.css — Carro lateral, botón del header y "Agregar al carro" (3-nov-2026).
   Usa los tokens de css/estilos.css (--rojo, --negro, --crema, fuentes). Verde de pago = el del
   checkout (#16884a, elegido por Sergio). Inputs ≥16px (iOS no hace zoom) y 100dvh en móvil. */

.fc [hidden], .fc[hidden] { display: none !important; }
html.fc-bloqueo { overflow: hidden; }

/* ---------- Botón del header ---------- */
.cabecera__carro {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: none; background: none; color: var(--blanco);
  cursor: pointer; border-radius: 50%; transition: color .15s ease, background .15s ease;
}
.cabecera__carro svg { width: 24px; height: 24px; }
.cabecera__carro:hover { color: var(--rojo); }
.cabecera__carro:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.cabecera__carro-num {
  position: absolute; top: 3px; right: 0; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--rojo); color: #fff; border: 2px solid var(--negro);
  font: 800 11px/15px var(--fuente-cuerpo); text-align: center;
}
.cabecera__carro-num[hidden] { display: none; }
.fc-salto { animation: fcSalto .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fcSalto { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* En escritorio el botón vive en la barra de acciones; en celular, junto a la lupa. */
.cabecera__movil .cabecera__carro { width: 40px; height: 40px; }
@media (max-width: 880px) { .cabecera__acciones .cabecera__carro { display: none; } }

/* ---------- Panel ---------- */
.fc { position: fixed; inset: 0; z-index: 1000; }
.fc__fondo {
  position: absolute; inset: 0; background: rgba(10, 10, 10, .55);
  opacity: 0; transition: opacity .28s ease;
}
.fc__panel {
  position: absolute; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(430px, 100vw);
  display: flex; flex-direction: column; background: #fff; color: #1c1c1c;
  box-shadow: -18px 0 50px rgba(0, 0, 0, .28);
  transform: translateX(104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  font-family: var(--fuente-cuerpo);
}
.fc--abierto .fc__fondo { opacity: 1; }
.fc--abierto .fc__panel { transform: none; }

.fc__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 14px 12px 22px; background: var(--negro); color: #fff; border-bottom: 3px solid var(--rojo);
  position: sticky; top: 0; z-index: 2;
}
.fc__cab h2 { margin: 0; font-family: var(--fuente-display); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 22px; }
.fc__cuenta { color: var(--gris-claro); font-size: 18px; }
.fc__x {
  width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .08);
  color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.fc__x svg { width: 20px; height: 20px; }
.fc__x:hover { background: var(--rojo); }
.fc__x:active { transform: scale(.92); }

/* Barra de envío gratis */
.fc__envio { padding: 12px 22px 13px; background: var(--crema); border-bottom: 1px solid var(--gris-borde); }
.fc__envio p { margin: 0 0 8px; font-size: 14px; line-height: 1.35; color: #333; }
.fc__envio b { color: #111; }
.fc__barra { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.fc__barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rojo); transition: width .45s cubic-bezier(.2, .8, .2, 1), background .3s ease; }
.fc__envio--listo .fc__barra span { background: #16884a; }
.fc__envio--listo b:first-child { color: #16884a; }

/* Aviso (errores amables): entra y sale con altura + opacidad */
.fc__aviso { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .25s ease; }
.fc__aviso > p { overflow: hidden; margin: 0; padding: 0 22px; font-size: 14px; line-height: 1.4; color: #8a1c13; background: #fdecea; }
.fc__aviso.visible { grid-template-rows: 1fr; opacity: 1; }
.fc__aviso.visible > p { padding: 10px 22px; }

.fc__cuerpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fc__lineas { list-style: none; margin: 0; padding: 4px 0; }

/* Línea */
.fc-linea {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: start;
  padding: 14px 22px; border-bottom: 1px solid #eee; position: relative;
}
.fc-linea--nueva { animation: fcNueva 1.6s ease; }
@keyframes fcNueva { 0%, 30% { background: #fff4d6; } 100% { background: transparent; } }
.fc-linea__img { display: block; width: 72px; height: 72px; border-radius: 10px; background: var(--crema); overflow: hidden; }
.fc-linea__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fc-linea__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fc-linea__nom { color: #111; font-weight: 700; font-size: 15px; line-height: 1.25; text-decoration: none; }
.fc-linea__nom:hover { color: var(--rojo); }
.fc-linea__sabor { font-size: 13px; color: var(--gris-texto); }
.fc-linea__unit { font-size: 13px; color: var(--gris-texto); }
.fc-linea__der { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 18px; align-self: stretch; }
.fc-linea__der strong { font-size: 16px; font-weight: 800; white-space: nowrap; }
.fc-linea__quitar {
  width: 36px; height: 36px; border: none; background: none; color: #9a9a92; border-radius: 50%;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: -8px;
  transition: color .15s ease, background .15s ease;
}
.fc-linea__quitar svg { width: 19px; height: 19px; }
.fc-linea__quitar:hover { color: var(--rojo); background: #fdecea; }

/* Selector de cantidad (carro y ficha) */
.fc-qty {
  display: inline-flex; align-items: center; margin-top: 8px; width: max-content;
  border: 1.5px solid var(--gris-borde); border-radius: 22px; background: #fff; overflow: hidden;
}
.fc-qty button {
  width: 36px; height: 34px; border: none; background: none; cursor: pointer;
  font: 700 19px/1 var(--fuente-cuerpo); color: #111; transition: background .15s ease, color .15s ease;
}
.fc-qty button:hover:not(:disabled) { background: var(--crema); color: var(--rojo); }
.fc-qty button:disabled { color: #c9c6bd; cursor: default; }
.fc-qty [data-cant] { min-width: 26px; text-align: center; font-weight: 800; font-size: 15px; }

.fc-cambio { animation: fcCambio .6s ease; }
@keyframes fcCambio { 0% { color: var(--rojo); } 100% { color: inherit; } }

/* Vacío */
.fc__vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 56px 28px; color: var(--gris-texto); }
.fc__vacio svg { width: 54px; height: 54px; color: #c9c6bd; margin-bottom: 4px; }
.fc__vacio strong { color: #111; font-family: var(--fuente-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: .03em; }
.fc__vacio .boton { margin-top: 12px; }

/* Pie */
.fc__pie { padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #e6e3da; background: #fff; box-shadow: 0 -10px 24px rgba(0, 0, 0, .05); }
.fc__sub { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.fc__sub strong { font-size: 22px; font-weight: 800; }
.fc__nota { margin: 2px 0 12px; font-size: 13px; color: var(--gris-texto); }
.fc__pagar {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 54px; padding: 12px 18px; border-radius: 10px; background: #16884a; color: #fff;
  font-family: var(--fuente-display); text-transform: uppercase; letter-spacing: .05em; font-size: 19px;
  text-decoration: none; white-space: nowrap; box-shadow: 0 10px 22px rgba(22, 136, 74, .28);
  transition: background .15s ease, transform .15s ease;
}
.fc__pagar svg { width: 19px; height: 19px; flex: none; margin-top: -2px; }
.fc__pagar:hover { background: #127541; }
.fc__pagar:active { transform: scale(.98); }
.fc__spin, .fc-agregar__btn .fc__spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: fcGira .7s linear infinite;
}
.cargando .fc__spin { display: inline-block; }
.fc__pagar.cargando svg { display: none; }
@keyframes fcGira { to { transform: rotate(360deg); } }
.fc__seguir {
  display: block; width: 100%; margin-top: 6px; padding: 10px; border: none; background: none; cursor: pointer;
  font: 700 14px var(--fuente-cuerpo); color: #333; text-decoration: underline; text-underline-offset: 3px;
}
.fc__seguir:hover { color: var(--rojo); }
.fc__mp { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: var(--gris-texto); }
.fc__mp img { flex: none; border-radius: 4px; }

/* ---------- "Agregar al carro" en la ficha ---------- */
.fc-agregar { margin: 0; }
.fc-agregar__fila { display: flex; gap: 10px; align-items: stretch; }
.fc-qty--ficha { margin-top: 0; border-radius: 6px; flex: none; }
.fc-qty--ficha button { width: 40px; height: 100%; min-height: 51px; }
.fc-qty--ficha input {
  width: 38px; border: none; text-align: center; font: 800 17px var(--fuente-cuerpo); color: #111;
  background: transparent; -moz-appearance: textfield; appearance: textfield; padding: 0;
}
.fc-qty--ficha input::-webkit-outer-spin-button, .fc-qty--ficha input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-agregar__btn { flex: 1 1 auto; position: relative; }
.fc-agregar__btn.cargando svg { display: none; }
.fc-agregar__btn.cargando { cursor: progress; }
.fc-agregar__btn.listo { background: #16884a; }
.fc-agregar__btn .fc__spin { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

/* Aviso de retracto junto al precio (ficha y carro; DS 52/2022 art. 6, texto en shopping/config.php) */
.aviso-retracto { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: #5c5c5c; }
.aviso-retracto a { color: inherit; text-decoration: underline; }
.fc__pie .aviso-retracto { margin: 2px 0 10px; font-size: 12.5px; }

/* Sabor agotado online (stock 0 en Bsale): botón gris sin destello + aviso bajo el botón */
.fc-agregar--agotado .fc-agregar__btn:disabled,
.fc-agregar--agotado .fc-agregar__btn:disabled:hover {
  background: #b9b9b3; border-color: #b9b9b3; color: #fff; box-shadow: none; transform: none; cursor: not-allowed;
}
.fc-agregar--agotado .fc-agregar__btn::after { display: none; }
.fc-agregar--agotado .fc-qty--ficha { opacity: .45; }
.fc-agregar__agotado {
  margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: #8a1b14; font-weight: 600;
  animation: fcAvisoEntra .25s ease-out;
}
@keyframes fcAvisoEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Tarjetas del catálogo/home: el mismo botón, sin selector de cantidad */
.tarjeta-producto .fc-agregar .boton { gap: 8px; }
.tarjeta-producto .fc-agregar .boton svg { width: 17px; height: 17px; flex: none; margin-top: -2px; }
.tarjeta-producto .fc-agregar__btn .fc__spin { width: 15px; height: 15px; }

/* Destello del CTA de la ficha (mismo tratamiento que tenía "Ver dónde comprar", marca.css) */
@media (prefers-reduced-motion: no-preference) {
  .detalle-producto__comprar--marca .fc-agregar__btn {
    isolation: isolate; overflow: hidden;
    animation: fnCtaEntrada .55s cubic-bezier(.2, .7, .2, 1) .35s backwards;
  }
  .detalle-producto__comprar--marca .fc-agregar__btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%) skewX(-18deg);
    animation: fnCtaBrillo 8s ease-in-out 1s infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fc__fondo, .fc__panel, .fc__barra span, .fc__aviso { transition: none; }
  .fc-agregar__agotado { animation: none; }
  .fc__spin { animation-duration: 1.6s; }
}

@media (max-width: 480px) {
  .fc__cab { padding-left: 16px; }
  .fc__envio, .fc-linea { padding-left: 16px; padding-right: 16px; }
  .fc__pie { padding-left: 16px; padding-right: 16px; }
  .fc-linea { grid-template-columns: 64px 1fr auto; gap: 12px; }
  .fc-linea__img { width: 64px; height: 64px; }
  .fc-qty--ficha button { width: 36px; }
}