/* Carrito de compras (usa la paleta y tipografías de styles.css) */

/* Botón del encabezado */
.btn-carrito {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  font: inherit; font-size: 16px; font-weight: bold; cursor: pointer;
  background: var(--negro); color: #fff;
  border: 2px solid var(--negro); border-radius: 6px;
  transition: background .15s;
}
.btn-carrito:hover { background: #000; }
.btn-carrito:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.carrito-contador {
  min-width: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--amarillo); color: var(--negro);
  font-size: 14px; line-height: 24px; text-align: center;
}

/* Tarjetas de producto */
.card-carrito { display: grid; gap: 6px; margin-top: 16px; }
.card-carrito label { font-size: 14px; font-weight: bold; }
.card-carrito select {
  font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--negro);
}
.card-carrito select:focus { outline: 2px solid var(--negro); outline-offset: 1px; }
.card-carrito select[aria-invalid="true"] { border-color: var(--rojo); }
.card-carrito .btn-full { margin-top: 0; }
.btn-agregar {
  border: 2px solid var(--negro); cursor: pointer; font-family: inherit;
  background: var(--negro); color: #fff;
}
.btn-agregar:hover { background: #000; }
.btn-agregar:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.card-carrito + .btn-full { margin-top: 8px; }
.card-mensaje { min-height: 1.5em; font-size: 14px; color: var(--negro); }
.card-mensaje.error { color: var(--rojo); font-weight: bold; }

/* Ventana del carrito: panel a la derecha */
.carrito {
  margin: 0 0 0 auto; padding: 0;
  width: min(420px, 100%); max-width: 100%;
  height: 100dvh; max-height: 100dvh;
  border: 0; color: var(--negro); background: #fff;
  box-shadow: -10px 0 30px rgba(0,0,0,.2);
}
.carrito[open] { display: flex; flex-direction: column; }
.carrito::backdrop { background: rgba(0,0,0,.5); }
.carrito-encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--negro); color: #fff; padding: 8px 8px 8px 20px;
}
.carrito-encabezado h2 { font-size: 20px; }
.carrito-cerrar {
  min-width: 44px; min-height: 44px;
  background: none; border: 0; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.carrito-cerrar:focus-visible { outline: 3px solid var(--amarillo); outline-offset: -3px; }
.carrito-aviso {
  margin: 16px 20px 0; padding: 10px 12px; border-radius: 6px; font-size: 15px;
  background: var(--gris-claro); border-left: 4px solid var(--negro);
}
.carrito-aviso.error { border-left-color: var(--rojo); }
.carrito-contenido { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.carrito-contenido[aria-busy="true"] { opacity: .6; }
.carrito-vacio { margin-top: 16px; color: var(--gris); }

.carrito-lista { list-style: none; }
.carrito-linea {
  display: grid; gap: 10px; padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}
.carrito-info { display: grid; gap: 2px; }
.carrito-info strong { font-size: 16px; }
.carrito-tamano, .carrito-precio { font-size: 14px; color: var(--gris); }
.carrito-controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carrito-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 6px; }
.carrito-cantidad button {
  min-width: 44px; min-height: 44px;
  font: inherit; font-size: 20px; font-weight: bold; cursor: pointer;
  background: none; border: 0; color: var(--negro);
}
.carrito-cantidad button:hover:not(:disabled) { background: var(--gris-claro); }
.carrito-cantidad button:disabled { color: var(--borde); cursor: default; }
.carrito-cantidad span { min-width: 32px; text-align: center; font-weight: bold; font-variant-numeric: tabular-nums; }
.carrito-controles .link-auth { min-height: 44px; }

.carrito-resumen { margin-top: 20px; display: grid; gap: 8px; }
.carrito-resumen p { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.carrito-anticipo { font-size: 19px; }
.carrito-anticipo strong { color: var(--rojo); }
.carrito-resumen p.carrito-nota { display: block; font-size: 14px; color: var(--gris); }
.carrito-resumen .btn { border: 0; cursor: pointer; font-family: inherit; }
.carrito-resumen .btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 479px) {
  .btn-carrito { padding: 8px 12px; font-size: 14px; }
}