/* Carrito de chiphead.com.ar — panel deslizante, franja de ingreso del
   comprador y aviso al agregar.

   Portado de imprimirya.com/assets/css/carrito.css. Dos diferencias con el
   original, además de la paleta:
    (1) La PESTAÑA flotante está SIEMPRE a la vista (imprimirya sólo la muestra
        cuando hay algo adentro): desde el 2026-08-26 chiphead no tiene barra
        de arriba, así que es el único acceso al carrito.
    (2) Radio CERO en todo (--radio de tokens.css: el wordmark es de píxeles,
        nada redondeado) — no existe un "--radio-chico" acá como en
        imprimirya, así que donde ese archivo usaba una esquina chica, éste
        usa var(--radio) igual que el resto del sitio.

   Todo el markup lo crea panel-carrito.js/checkout.js: acá sólo viven los
   estilos. Reusa .boton/.semaforo de componentes.css para no inventar un
   segundo idioma visual. Lo propio lleva prefijo `carrito-`/`pago`.

   Capas (z-index del sitio, ver componentes.css): la marca flotante usa 45 y
   el panel de zona (.panel, zona-panel.js) usa 80. El carrito abre POR ENCIMA
   de los dos: 100 la caja, 105 la pestaña —tiene que verse sobre el velo del
   propio panel, que es de donde sale— y 110 el aviso flotante. */

/* ---------- Pestaña flotante ----------
   Clavada al medio del costado derecho, del mismo lado por el que entra el
   panel, y siempre en el mismo lugar: no se mueve con el scroll ni se
   esconde cuando el carrito está vacío (pedido de Antero 2026-08-26).
   Abierta VIAJA hasta el borde del panel, con el mismo reloj y la misma
   curva que la caja: abren y cierran como una sola pieza, la pestaña
   montada en su borde. */
.carrito-pestana {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 105;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 9px 16px;
  background: var(--amarillo);
  color: var(--negro);
  border: 0;
  border-radius: var(--radio);
  cursor: pointer;
  box-shadow: -6px 0 20px rgba(10, 10, 10, 0.5);
  transition: right var(--dur-media) var(--ease-suave),
              padding-right var(--dur-rapida) var(--ease-suave);
}
.carrito-pestana:hover { padding-right: 15px; }
.carrito-pestana:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.carrito-pestana--abierta { right: min(420px, 100vw); }

.carrito-pestana__icono { width: 21px; height: 21px; }
.carrito-pestana__texto {
  writing-mode: vertical-rl;
  font-family: var(--fuente-mono);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* El contador tapa el hueco de la sonrisa: negro sobre amarillo, cuadrado. */
.carrito-pestana__contador {
  min-width: 22px;
  padding: 2px 4px;
  display: grid;
  place-items: center;
  background: var(--negro);
  color: var(--amarillo);
  font-family: var(--fuente-mono);
  font-size: var(--t-mini);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.carrito-pestana__contador[hidden] { display: none; }

/* Pantalla angosta: la misma pestaña, sin la palabra. El chango y el número
   alcanzan, y así la lengüeta se lleva 30 px en vez de 39 (base.css le reserva
   40 al contenido). */
@media (max-width: 1315px) {
  .carrito-pestana { padding: 12px 6px 14px; gap: 8px; }
  .carrito-pestana__icono { width: 19px; height: 19px; }
  .carrito-pestana__texto { display: none; }
  .carrito-pestana__contador { min-width: 18px; padding: 2px 3px; }
}

/* ---------- Panel ---------- */

.carrito-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: minmax(0, 1fr);
  visibility: hidden;
  transition: visibility 0s linear var(--dur-media);
}
.carrito-panel[data-abierto='true'] {
  visibility: visible;
  transition-delay: 0s;
}

.carrito-panel__fondo {
  background: rgba(10, 10, 10, 0.6);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
}
.carrito-panel[data-abierto='true'] .carrito-panel__fondo { opacity: 1; }

.carrito-panel__caja {
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100%;
  min-height: 0;
  background: var(--pagina);
  box-shadow: var(--sombra-abierta);
  transform: translateX(100%);
  transition: transform var(--dur-media) var(--ease-suave);
}
.carrito-panel[data-abierto='true'] .carrito-panel__caja { transform: none; }

body.carrito-abierto { overflow: hidden; }

.carrito-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--negro);
}

.carrito-panel__titulo { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--tinta); }

.carrito-panel__cerrar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--gris-suave);
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}
.carrito-panel__cerrar svg { width: 16px; height: 16px; }
.carrito-panel__cerrar:hover { background: var(--fondo-2); color: var(--tinta); }

.carrito-panel__cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--esp-3);
}

.carrito-panel__items { list-style: none; margin: 0; padding: 0; }

/* ---------- Franja de ingreso del comprador ---------- */

.carrito-cuenta {
  margin: calc(var(--esp-3) * -1) calc(var(--esp-3) * -1) var(--esp-3);
  padding: 0.7rem var(--esp-3);
  border-bottom: 1px solid var(--linea);
  background: var(--fondo-2);
  font-size: var(--t-chico);
}
.carrito-cuenta--abierta { padding-block: var(--esp-2); display: grid; gap: 0.8rem; }

.carrito-cuenta__hola {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin: 0;
  color: var(--tinta);
}

.carrito-cuenta__acciones { display: inline-flex; gap: var(--esp-2); }

.carrito-cuenta__enlace {
  color: var(--tinta);
  font-weight: 700;
  font-size: var(--t-chico);
  text-decoration: underline;
  text-decoration-color: var(--amarillo-oscuro);
  text-underline-offset: 3px;
  padding: 0;
}
.carrito-cuenta__enlace:hover { color: var(--amarillo-oscuro); }

.carrito-cuenta__proveedores {
  display: grid;
  gap: 0.5rem;
  justify-items: stretch;
  width: min(320px, 100%);
  margin-inline: auto;
}

.carrito-cuenta__facebook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background: #1877f2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--dur-rapida);
}
.carrito-cuenta__facebook:hover { background: #166fe5; }
.carrito-cuenta__facebook svg { width: 20px; height: 20px; flex-shrink: 0; }

.carrito-cuenta__separador {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  color: var(--gris-suave);
  font-size: var(--t-mini);
}
.carrito-cuenta__separador::before,
.carrito-cuenta__separador::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--linea);
}

.carrito-cuenta [data-cuenta-form] { display: grid; gap: 0.7rem; }
.carrito-campo label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--tinta);
}
.carrito-campo input, .carrito-campo select {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--pagina);
  color: var(--tinta);
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 11px;
}
.carrito-campo input:focus, .carrito-campo select:focus { outline: none; border-color: var(--amarillo-oscuro); }

.carrito-cuenta__error {
  margin: 0;
  color: #b91c1c;
  font-size: var(--t-mini);
}
.carrito-cuenta__error:empty { display: none; }

.carrito-cuenta__pie { display: flex; justify-content: space-between; gap: var(--esp-2); margin: 0; }

.carrito-cuenta__opcion {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--t-chico);
  color: var(--gris);
  cursor: pointer;
}
.carrito-cuenta__opcion input { width: auto; accent-color: var(--amarillo-oscuro); flex-shrink: 0; }

.carrito-cuenta__direcciones {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.carrito-cuenta__direccion {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linea);
  background: var(--pagina);
  font-size: var(--t-mini);
  color: var(--gris);
}
.carrito-cuenta__direccion--predeterminada {
  border-color: var(--amarillo-oscuro);
  background: var(--amarillo-tenue);
}
.carrito-cuenta__direccion--vacia { border-style: dashed; color: var(--gris-suave); }
.carrito-cuenta__direccion strong { display: block; color: var(--tinta); }
.carrito-cuenta__direccion em { font-style: normal; color: var(--amarillo-oscuro); }

/* ---------- Línea de producto ---------- */

.carrito-linea {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--esp-2);
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--linea);
}
.carrito-linea:first-child { padding-top: 0; }
.carrito-linea:last-child { border-bottom: 0; }

.carrito-linea__figura {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--fondo-2);
  overflow: hidden;
  color: var(--gris-suave);
}
.carrito-linea__figura img {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
}
.carrito-linea__figura svg.ico { width: 26px; height: 26px; }

.carrito-linea__datos { min-width: 0; }
.carrito-linea__marca {
  display: block;
  font-size: var(--t-mini);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-suave);
}
.carrito-linea__nombre { margin: 0; font-weight: 700; line-height: 1.25; font-size: 0.95rem; color: var(--tinta); }
.carrito-linea__nombre a { color: inherit; }
.carrito-linea__nombre a:hover { color: var(--amarillo-oscuro); }
.carrito-linea__sku {
  font-family: var(--fuente-mono);
  font-size: var(--t-mini);
  color: var(--gris-suave);
}
.carrito-linea__estado { margin-top: 0.35rem; }

.carrito-linea__aviso {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.6rem;
  background: rgba(245, 158, 11, 0.12);
  color: #8a5a00;
  font-size: var(--t-mini);
}
.carrito-linea__aviso--calma {
  background: var(--fondo-2);
  color: var(--gris-suave);
}

.carrito-linea__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.carrito-linea__precio { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); }
.carrito-linea__precio b { font-size: 1.05rem; font-weight: 850; }
.carrito-linea__precio small {
  display: block;
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--gris-suave);
}
.carrito-linea__precio--consultar { font-size: var(--t-mini); color: var(--gris-suave); font-style: italic; }

.carrito-linea__quitar {
  margin-top: 0.4rem;
  padding: 0;
  font-size: var(--t-mini);
  color: var(--gris-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.carrito-linea__quitar:hover { color: var(--peligro); }

.carrito-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea);
  overflow: hidden;
  background: var(--pagina);
}
.carrito-cantidad__boton {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  line-height: 1;
  color: var(--gris);
  transition: background-color var(--dur-rapida), color var(--dur-rapida);
}
.carrito-cantidad__boton:hover:not([disabled]) { background: var(--amarillo-tenue); color: var(--amarillo-oscuro); }
.carrito-cantidad__boton[disabled] { opacity: 0.3; cursor: default; }
.carrito-cantidad__valor {
  min-width: 30px;
  text-align: center;
  font-size: var(--t-chico);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

/* ---------- Vacío ---------- */

.carrito-panel__vacio {
  display: grid;
  gap: var(--esp-2);
  justify-items: center;
  padding-block: var(--esp-4);
  text-align: center;
  color: var(--gris);
}
.carrito-panel__vacio strong { font-size: 1.1rem; color: var(--tinta); }
.carrito-panel__vacio p { margin: 0; font-size: var(--t-chico); }

/* ---------- Pie ---------- */

.carrito-panel__pie {
  padding: var(--esp-2) var(--esp-3);
  border-top: 1px solid var(--negro);
  background: var(--fondo-2);
  display: grid;
  gap: 0.6rem;
}
.carrito-panel__pie:empty { display: none; }
.carrito-panel__pie[hidden] { display: none; }
.carrito-panel__pie .boton { width: 100%; }
.carrito-panel__pie .boton[disabled] { opacity: 0.45; cursor: not-allowed; }

.carrito-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  margin: 0;
}
.carrito-total dt { font-size: var(--t-chico); color: var(--gris); }
.carrito-total dt small { display: block; font-size: var(--t-mini); color: var(--gris-suave); }
.carrito-total dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.carrito-panel__plan {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--t-chico);
  color: var(--gris);
}
.carrito-panel__plan b { font-variant-numeric: tabular-nums; color: var(--tinta); }

.carrito-panel__nota {
  margin: 0;
  font-size: var(--t-mini);
  color: var(--gris-suave);
  text-align: center;
}
.carrito-panel__nota--alerta {
  padding: 0.4rem 0.6rem;
  background: rgba(245, 158, 11, 0.12);
  color: #8a5a00;
  text-align: left;
}

/* ---------- Aviso flotante al agregar ---------- */

.carrito-aviso {
  position: fixed;
  left: 50%;
  bottom: var(--esp-3);
  z-index: 110;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: min(92vw, 460px);
  padding: 0.7rem 1rem;
  background: var(--negro);
  color: #fff;
  font-size: var(--t-chico);
  box-shadow: var(--sombra-card);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-suave);
}
.carrito-aviso[data-visible='true'] { opacity: 1; transform: none; pointer-events: auto; }

.carrito-aviso__ver {
  flex-shrink: 0;
  padding: 0;
  color: var(--amarillo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Teléfono ---------- */

@media (max-width: 520px) {
  .carrito-panel__caja { width: 100vw; }
  .carrito-pestana--abierta { right: 100vw; }
  .carrito-panel__cuerpo, .carrito-panel__pie { padding-inline: var(--esp-2); }
  .carrito-cuenta { margin-inline: calc(var(--esp-2) * -1); padding-inline: var(--esp-2); }
}

/* ---------- Checkout dentro del panel (checkout.js) ---------- */

.pago { display: flex; flex-direction: column; gap: 0.9rem; }
.pago__volver {
  align-self: flex-start;
  padding: 0;
  font-size: var(--t-chico);
  font-weight: 700;
  color: var(--gris);
}
.pago__volver:hover { color: var(--amarillo-oscuro); }
.pago__titulo { margin: 0; font-size: 1.1rem; color: var(--tinta); }
.pago__aclaracion { margin: 0; font-size: var(--t-chico); color: var(--gris); }
.pago__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.pago-campo[data-campo="nombre"],
.pago-campo[data-campo="email"],
.pago-campo[data-campo="calle"] { grid-column: 1 / -1; }
.pago-campo label { display: block; font-size: var(--t-mini); font-weight: 600; margin-bottom: 0.2rem; color: var(--tinta); }
.pago-campo--malo input,
.pago-campo--malo select { border-color: var(--peligro); }
.pago-campo__error { margin: 0.2rem 0 0; font-size: var(--t-mini); color: var(--peligro); }

.pago__planes { border: 1px solid var(--linea); padding: 0.8rem; margin: 0; }
.pago__planes legend { font-size: var(--t-mini); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-suave); padding-inline: 0.3rem; }
.pago__plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0;
  font-size: var(--t-chico);
  color: var(--tinta);
  cursor: pointer;
}
.pago__plan + .pago__plan { border-top: 1px solid var(--linea); }
.pago__plan input { width: auto; accent-color: var(--amarillo-oscuro); }
.pago__plan em { font-style: normal; color: var(--gris-suave); }
.pago__plan b { white-space: nowrap; text-align: right; }
/* El envío que calculó el CRM con la dirección: va debajo de los planes,
   chico, porque ya está sumado en cada total. */
.pago__envio { margin: 0.6rem 0 0; font-size: var(--t-mini); color: var(--gris-suave); }
.pago__error { margin: 0; padding: 0.6rem 0.75rem; background: rgba(239, 68, 68, 0.08); color: #b91c1c; font-size: var(--t-chico); }
.pago__enviar { width: 100%; }
.pago__legal { margin: 0; font-size: var(--t-mini); color: var(--gris-suave); text-align: center; }

/* Tercera vista: el pedido esperando el pago. */
.pago-grupo {
  border: 1px solid var(--linea);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pago-grupo--pagado { border-color: var(--ok); background: rgba(16, 185, 129, 0.06); }
.pago-grupo--anulado { opacity: 0.7; }
.pago-grupo--anulado .pago-grupo__cabecera span { text-decoration: line-through; color: var(--gris-suave); }
.pago-grupo__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.pago-grupo__cabecera strong { font-size: var(--t-chico); color: var(--tinta); }
.pago-grupo__cabecera span { font-weight: 800; white-space: nowrap; color: var(--tinta); }
.pago-grupo__items { margin: 0; font-size: var(--t-mini); color: var(--gris); }
.pago-grupo__datos { margin: 0; display: grid; gap: 0.5rem; }
.pago-grupo__datos div { display: grid; gap: 0.1rem; }
.pago-grupo__datos dt { font-size: var(--t-mini); color: var(--gris-suave); }
.pago-grupo__datos dd { margin: 0; font-size: var(--t-chico); color: var(--tinta); }
.pago-grupo__datos dd strong { font-size: 1.05rem; }
.pago-grupo__datos dd span { display: block; font-size: var(--t-mini); color: var(--gris-suave); }
/* El importe a transferir es EL número de esta pantalla: fondo amarillo tenue
   con borde de marca, pero el número en --tinta (negro) porque el amarillo
   puro sobre amarillo tenue casi no se lee. */
.pago-grupo__monto { padding: 0.5rem 0.6rem; margin-inline: -0.15rem; border-left: 3px solid var(--amarillo); background: var(--amarillo-tenue); }
.pago-grupo__monto dt { color: var(--amarillo-oscuro); font-weight: 700; }
.pago-grupo__monto dd strong { font-size: 1.35rem; color: var(--tinta); }
.pago-grupo__monto dd span { color: var(--gris); }
.pago-grupo__accion .boton { width: 100%; }
.pago-grupo__tilde { margin: 0; font-weight: 800; color: var(--ok); text-align: center; }

.carrito-pendiente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--alerta);
  background: rgba(245, 158, 11, 0.10);
  font-size: var(--t-chico);
  color: var(--tinta);
}
.carrito-pendiente p { margin: 0; }

@media (max-width: 460px) {
  .pago__campos { grid-template-columns: 1fr; }
}