/* Carrito como cotización y el formulario de «agregar» de la ficha. Cada línea lleva su flor
   (o su foto) sobre un fondo de color y el resumen explica el anticipo con un anillo. Usa los
   tokens y los componentes compartidos (.field, .btn, .aviso, .panel-card, .note). */

/* Ficha: cantidad y botón en una fila; en el celular, uno bajo el otro. */
.agregar { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); align-items: end; width: 100%; }
.agregar > .field { width: auto; }
.agregar .field input { width: 130px; }
html.js .agregar .field .cantidad input { width: 84px; }
.agregar .btn { flex: 1 1 220px; }

.carrito { padding-block: var(--e-6) var(--e-8); display: grid; gap: var(--e-4); }
.carrito h1 { font-size: clamp(40px, 5vw, 68px); }
.carrito-leyenda { color: var(--muted); font-size: 18px; max-width: 70ch; }
.carrito-vacio { display: grid; gap: var(--e-4); justify-items: start; background: var(--card); border-radius: var(--r-xl); padding: var(--e-6); box-shadow: var(--shadow); }

.carrito-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--e-7); align-items: start; }
.carrito-lineas { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-4); }

/* Arte, datos y total arriba; la cantidad abajo, para que el nombre no se estreche. */
.carrito-linea {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--e-3) var(--e-5); align-items: start;
  grid-template-areas: "foto info total" "foto cantidad cantidad";
  background: var(--card); border-radius: var(--r-lg); padding: var(--e-4); box-shadow: var(--shadow);
}
.carrito-linea.no-suma { background: var(--surface); box-shadow: none; border: 1.5px dashed var(--borde-campo); }
.cl-foto {
  grid-area: foto; position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  display: grid; place-items: center; background: var(--fondo-flor, var(--peonia-claro));
}
.cl-foto img { width: 76%; height: 76%; object-fit: contain; }
.cl-foto .cl-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-info { grid-area: info; display: grid; gap: var(--e-1); min-width: 0; }
.cl-info h3 { font-size: 26px; }
.cl-info h3 a { color: inherit; text-decoration: none; }
.cl-info h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cl-info p { font-size: 15px; }
.cl-precio del { color: var(--muted); margin-right: 6px; }
.cl-precio strong { color: var(--rose); font-weight: 600; font-size: 17px; }
.cl-promo, .cl-ahorro { color: var(--olivo-texto); font-weight: 500; }
.cl-cantidad { grid-area: cantidad; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: end; }
.cl-cantidad .field { width: 140px; }
.cl-cantidad .field input { min-height: var(--toque); }
.cl-total { grid-area: total; display: grid; gap: 2px; justify-items: end; text-align: right; min-width: 110px; }
.cl-total strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }

.carrito-resumen { display: grid; gap: var(--e-4); position: sticky; top: 110px; border-radius: var(--r-xl); padding: var(--e-6); }
.carrito-resumen h2 { font-size: clamp(28px, 3vw, 40px); }
.carrito-resumen dl { margin: 0; display: grid; gap: var(--e-2); }
.carrito-resumen dl div { display: flex; justify-content: space-between; gap: var(--e-3); font-size: 16px; }
.carrito-resumen dt { color: var(--muted); }
.carrito-resumen dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.cr-ahorro dd { color: var(--olivo-texto); }
.cr-total { border-top: 1.5px dashed var(--line); padding-top: var(--e-3); font-size: 20px; }
.carrito-resumen .cr-total dt { color: var(--ink); font-weight: 600; }
.carrito-resumen .cr-total dd { font-weight: 600; }
.cr-anticipo { background: var(--olivo-claro); border-radius: var(--r-md); padding: var(--e-3) var(--e-4); font-weight: 600; }
.carrito-resumen .cr-anticipo dt { color: var(--olivo-texto); }

/* Anillo del anticipo: la parte llena es lo que se paga hoy. */
.anticipo-visual { display: grid; grid-template-columns: 110px 1fr; gap: var(--e-4); align-items: center; color: var(--muted); font-size: 15px; }
.anillo { width: 110px; height: 110px; }
.anillo circle { fill: none; stroke-width: 14; }
.anillo .resto { stroke: var(--kraft-hondo); }
.anillo .mitad { stroke: var(--accent); stroke-dasharray: 314; transform: rotate(-90deg); transform-origin: center; }
.anillo text { font-family: var(--f-display); font-size: 24px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }

@media (max-width: 1000px) {
  .carrito-grid { grid-template-columns: minmax(0, 1fr); }
  .carrito-resumen { position: static; }
}
@media (max-width: 640px) {
  .carrito-linea { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "foto info" "cantidad cantidad" "total total"; }
  .cl-info h3 { font-size: 22px; }
  .cl-total { justify-items: start; text-align: left; }
  .carrito-resumen { padding: var(--e-5); }
}