/* ============================================================
   app.css — componentes de Pasta Party
   Mobile-first. Los breakpoints suben: 600 / 900 / 1024.
   ============================================================ */

/* ---------- Primitivas reutilizables ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: var(--outline);
  border-radius: var(--radius-pill);
  background: var(--ptg-white);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ptg-black);
  box-shadow: var(--shadow-pop-sm);
  transition: background var(--dur), box-shadow var(--dur), transform var(--dur);
}
/* El hover mueve la sombra, no escala: no empuja el layout. */
.btn:hover { background: var(--ptg-yellow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ptg-black); }

.btn--primary { background: var(--ptg-yellow); box-shadow: var(--shadow-pop); }
.btn--primary:hover { background: var(--ptg-yellow-deep); }
.btn--lg { min-height: 56px; font-size: 18px; padding: 0 var(--sp-6); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; box-shadow: none; border-color: var(--ptg-ink-30); }
.btn--ghost:hover { background: var(--ptg-ink-12); }

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.icon { width: 20px; height: 20px; flex: none; stroke-width: 2.4; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: var(--outline-thin);
  border-radius: var(--radius-pill);
  background: var(--ptg-white);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--hot { background: var(--ptg-red); color: var(--ptg-white); border-color: var(--ptg-black); }
.badge--veg { background: var(--ptg-green-soft); color: var(--ptg-green); }
.badge--free { background: var(--ptg-yellow); }

.card {
  border: var(--outline);
  border-radius: var(--radius-card);
  background: var(--ptg-white);
  box-shadow: var(--shadow-pop);
}

/* ============================================================
   HOME
   ============================================================ */

.home {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ptg-black);
  color: var(--ptg-cream);
}

.home__bar {
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
}
.home__logo { width: 52px; height: auto; }

.home__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-7);
}

.home__eyebrow {
  font-family: var(--font-accent);
  font-size: clamp(20px, 5vw, 26px);
  color: var(--ptg-yellow);
}

.home__headline {
  font-size: clamp(52px, 15vw, 120px);
  /* Anton es muy alto de caja: por debajo de .95 las dos lineas se tocan. */
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ptg-yellow);
}

.home__tagline {
  max-width: 24ch;
  font-size: clamp(16px, 4vw, 19px);
  color: #fffcf2cc;
}

/* Tarjeta de precio */
.price {
  width: 100%;
  max-width: 300px;
  padding: var(--sp-4) var(--sp-5);
  border: var(--outline);
  border-radius: var(--radius-card);
  background: var(--ptg-yellow);
  box-shadow: var(--shadow-pop);
  color: var(--ptg-black);
  text-align: center;
}
.price__now { font-family: var(--font-display); font-size: clamp(40px, 11vw, 56px); line-height: 1; }
.price__was { margin-top: var(--sp-1); font-size: 14px; text-decoration: line-through; color: #0a0a0aad; }
.price__save {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--ptg-red);
  color: var(--ptg-white);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .03em;
}

.benefits { display: grid; gap: var(--sp-2); text-align: left; }
.benefits li { display: flex; align-items: center; gap: var(--sp-3); font-size: 16px; }
.benefits .icon { color: var(--ptg-yellow); }

.home__note { font-size: 14px; color: #fffcf2a8; max-width: 34ch; }

/* Cinta roja */
.ticker {
  border-top: var(--outline);
  background: var(--ptg-red);
  color: var(--ptg-white);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: .04em;
}
.ticker b { color: var(--ptg-yellow); font-weight: inherit; }

@media (min-width: 900px) {
  /* En escritorio el hero deja de ser una columna angosta perdida en el centro. */
  .home__hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: var(--sp-8);
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    padding: var(--sp-7) var(--sp-6) var(--sp-8);
  }
  .home__copy { display: grid; gap: var(--sp-4); justify-items: start; }
  .home__tagline { max-width: 30ch; }
  .home__aside { display: grid; gap: var(--sp-5); justify-items: stretch; }
  .price { max-width: none; }
}

/* ============================================================
   BUILDER — cascaron
   ============================================================ */

.builder { min-height: 100dvh; display: flex; flex-direction: column; }

/* --- Barra superior --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--h-topbar);
  padding: 0 var(--sp-3);
  background: var(--ptg-black);
  color: var(--ptg-cream);
}
.topbar__back {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  transition: background var(--dur);
}
.topbar__back:hover { background: #ffffff1f; }
.topbar__logo { width: 40px; height: auto; }
.topbar__title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--ptg-yellow);
}

/* --- Pasos --- */
.steps {
  position: sticky;
  top: var(--h-topbar);
  z-index: var(--z-sticky);
  background: var(--ptg-cream);
  border-bottom: 2px solid var(--ptg-ink-12);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.steps__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.steps__now { font-family: var(--font-display); font-size: 16px; letter-spacing: .04em; }
.steps__count { font-size: 13px; color: var(--ptg-ink-60); white-space: nowrap; }

/* Barra segmentada: 4 tramos, el activo en amarillo. */
.steps__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.steps__seg {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ptg-ink-12);
  transition: background var(--dur);
}
.steps__seg--done { background: var(--ptg-black); }
.steps__seg--now  { background: var(--ptg-yellow); box-shadow: inset 0 0 0 2px var(--ptg-black); }

/* En escritorio los 4 pasos se nombran y son clicables hacia atras. */
.steps__tabs { display: none; }

@media (min-width: 900px) {
  .steps { padding: 0 var(--sp-6); }
  .steps__head, .steps__bar { display: none; }
  .steps__tabs { display: flex; gap: var(--sp-5); }
  .steps__tab {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: 52px; padding: 0;
    border: 0; background: none;
    font-family: var(--font-display); font-size: 14px; letter-spacing: .05em;
    color: var(--ptg-ink-60);
    border-bottom: 3px solid transparent;
    transition: color var(--dur), border-color var(--dur);
  }
  .steps__tab[aria-current="step"] { color: var(--ptg-black); border-bottom-color: var(--ptg-red); }
  .steps__tab:disabled { opacity: .45; cursor: not-allowed; }
  .steps__tab:not(:disabled):hover { color: var(--ptg-black); }
  .steps__num {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border: var(--outline-thin); border-radius: var(--radius-pill);
    font-size: 12px;
  }
  .steps__tab[aria-current="step"] .steps__num { background: var(--ptg-yellow); }
  .steps__tab--done .steps__num { background: var(--ptg-black); color: var(--ptg-yellow); }
  /* El check de "paso hecho" es SVG, no el glifo ✓. */
  .steps__num .icon { width: 13px; height: 13px; stroke-width: 3.4; }
}

/* --- Cuerpo --- */
.builder__body {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
  /* Espacio para que la barra de accion no tape el ultimo item. */
  padding-bottom: calc(var(--h-actionbar) + var(--sp-6));
}

@media (min-width: 1024px) {
  /* Dos columnas y dos filas: la bandeja ocupa arriba de la columna derecha,
     el resumen justo debajo, y el contenido corre por la izquierda. */
  .builder__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
    gap: var(--sp-4) var(--sp-6);
    align-items: start;
    padding: var(--sp-6);
    padding-bottom: var(--sp-8);
  }
  .builder__body > main { grid-column: 1; grid-row: 1 / -1; }
  .builder__body > .tray { grid-column: 2; grid-row: 1; }
  .builder__body > .rail { grid-column: 2; grid-row: 2; }
}

.step-title { font-size: clamp(26px, 6.5vw, 36px); }
.step-sub { margin-top: var(--sp-2); color: var(--ptg-ink-60); }

/* ============================================================
   BANDEJA DE SLOTS — siempre visible
   ============================================================ */

/* Movil: tira horizontal pegada bajo los pasos.
   --h-topbar y --h-steps las mide app.js en runtime: con texto mas grande
   o en otro idioma, las barras cambian de alto y un valor fijo se desalinea. */
.tray {
  position: sticky;
  top: calc(var(--h-topbar) + var(--h-steps));
  z-index: var(--z-sticky);
  margin: 0 calc(var(--sp-4) * -1) var(--sp-4);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  background: var(--ptg-cream);
  border-bottom: 2px solid var(--ptg-ink-12);
}
/* En movil el conteo ya vive en la barra de accion: aqui sobra y roba altura. */
.tray__head { display: none; }
.tray__hint { display: none; }
.tray__label { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; }
.tray__count { font-family: var(--font-display); line-height: 1; }
.tray__count b { font-size: 24px; font-weight: 400; }
.tray__of { font-size: 14px; color: var(--ptg-ink-60); }
.tray--done .tray__count b { color: var(--ptg-red); }

.tray__hint {
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--ptg-ink-60);
}
.tray--done .tray__hint { color: var(--ptg-black); font-weight: 700; }
.tray__hint .icon { width: 16px; height: 16px; }

/* Acuse de recibo al llenar un puesto. Una sola vez, y nunca si el sistema
   pide menos movimiento (lo cubre el bloque prefers-reduced-motion global). */
@keyframes slot-pop {
  0%   { transform: scale(.86); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.slot--pop { animation: slot-pop 320ms var(--ease-pop); }

.tray__slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }

.slot {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 46px;
  padding: var(--sp-1);
  border: 2px dashed var(--ptg-ink-30);
  border-radius: 10px;
  background: transparent;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  color: var(--ptg-ink-60);
  overflow: hidden;
  transition: border-color var(--dur), background var(--dur);
}
.slot--filled {
  border: var(--outline-thin);
  border-style: solid;
  background: var(--ptg-white);
  color: var(--ptg-black);
}
.slot--free { border-color: var(--ptg-black); background: var(--ptg-yellow); color: var(--ptg-black); }
.slot--next { border-color: var(--ptg-red); border-style: solid; }

.slot__n {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--ptg-black); color: var(--ptg-yellow);
  font-family: var(--font-display); font-size: 10px;
}
.slot--free .slot__n { background: var(--ptg-black); color: var(--ptg-yellow); }
/* El nombre solo cabe legible en el rail de escritorio. */
.slot__name { display: none; }
.slot__art { width: 30px; height: 26px; }

/* La "x" es una marca visible siempre, no un hover: el slot entero es el boton. */
.slot__x {
  position: absolute; top: 1px; right: 1px;
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ptg-black); color: var(--ptg-cream);
}
.slot__x .icon { width: 10px; height: 10px; stroke-width: 3.5; }
.slot--filled:hover { background: var(--ptg-red-soft); }

/* Escritorio: la bandeja se muda de verdad a la columna derecha, en vertical,
   con nombres completos — y SIGUE pegada al hacer scroll. */
@media (min-width: 1024px) {
  .tray {
    position: sticky;
    top: calc(var(--h-topbar) + var(--h-steps) + var(--sp-5));
    margin: 0;
    padding: var(--sp-4);
    border: var(--outline);
    border-radius: var(--radius-card);
    background: var(--ptg-white);
    box-shadow: var(--shadow-pop);
  }
  .tray__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
  .tray__hint { display: flex; }
  .tray--done { border-color: var(--ptg-black); background: var(--ptg-yellow); }
  .tray--done .slot--filled { background: var(--ptg-white); }
  .tray__slots { grid-template-columns: 1fr; gap: var(--sp-2); }
  .slot {
    grid-template-columns: auto auto 1fr auto;
    place-items: center start;
    gap: var(--sp-3);
    min-height: 48px;
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    font-size: 14px;
  }
  /* Aqui si hay ancho para leer el nombre. Sin max-width: que use la columna
     1fr entera y solo recorte si de verdad no cabe. min-width:0 es lo que
     permite a un item de grid encogerse y activar el ellipsis. */
  .slot__name {
    display: block; font-size: 13px; font-weight: 600;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .slot__art { width: 32px; height: 28px; }
  .slot__x {
    position: static; width: 26px; height: 26px; border-radius: 8px;
    background: transparent; color: var(--ptg-ink-60); justify-self: end;
  }
  .slot__x .icon { width: 15px; height: 15px; stroke-width: 2.6; }
  .slot--filled:hover { background: var(--ptg-red-soft); }
  .slot--filled:hover .slot__x { color: var(--ptg-red); }
}

/* ============================================================
   FILTROS
   ============================================================ */

.filters { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 14px; color: var(--ptg-ink-60); pointer-events: none; }
.search input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4) 0 44px;
  border: var(--outline);
  border-radius: var(--radius-pill);
  background: var(--ptg-white);
}
.search input::placeholder { color: var(--ptg-ink-60); }

/* Fila de chips que se desliza en movil sin romper el ancho. */
.chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: var(--outline-thin);
  border-radius: var(--radius-pill);
  background: var(--ptg-white);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background var(--dur), color var(--dur);
}
.chip:hover { background: var(--ptg-yellow); }
.chip[aria-pressed="true"] { background: var(--ptg-black); color: var(--ptg-cream); }
.chip__dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ptg-black); }

/* ============================================================
   GRID DE PLATOS
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-4); } }

.dish {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--outline);
  border-radius: var(--radius-card);
  background: var(--ptg-white);
  box-shadow: var(--shadow-pop-sm);
  overflow: hidden;
  transition: box-shadow var(--dur), transform var(--dur);
}
.dish--picked { box-shadow: var(--shadow-pop); border-color: var(--ptg-black); }
.dish--picked::after {
  content: "";
  position: absolute; inset: 0;
  border: 3px solid var(--ptg-yellow);
  border-radius: calc(var(--radius-card) - 2px);
  pointer-events: none;
}

/* Toda la parte de arriba es el boton de añadir: un solo toque. */
.dish__add {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.dish__add:hover .dish__thumb { filter: brightness(1.04); }

.dish__thumb {
  position: relative;
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  border-bottom: var(--outline-thin);
  transition: filter var(--dur);
}
.dish-art { width: 76%; height: auto; }

.dish__flags { position: absolute; top: var(--sp-2); left: var(--sp-2); display: flex; gap: 4px; flex-wrap: wrap; }

.dish__qty-tag {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  display: grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border: var(--outline-thin); border-radius: var(--radius-pill);
  background: var(--ptg-yellow);
  font-family: var(--font-display); font-size: 14px;
}

.dish__text { padding: var(--sp-3); display: grid; gap: 2px; }
.dish__name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.dish__meta { font-size: 13px; color: var(--ptg-ink-60); }

/* Pie: cambia entre "Añadir" y el stepper. */
.dish__foot { padding: 0 var(--sp-3) var(--sp-3); }
.dish__cta {
  width: 100%; min-height: 44px;
  border: var(--outline-thin); border-radius: var(--radius-pill);
  background: var(--ptg-yellow);
  font-family: var(--font-display); font-size: 13px; letter-spacing: .05em;
  transition: background var(--dur);
}
.dish__cta:hover:not(:disabled) { background: var(--ptg-yellow-deep); }
/* .dish__cta no es .btn, asi que necesita su propio estado deshabilitado:
   si no, se ve amarillo y clicable pero no hace nada. */
.dish__cta:disabled {
  background: transparent;
  border-color: var(--ptg-ink-30);
  color: var(--ptg-ink-60);
  cursor: not-allowed;
}

.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--sp-1); }
/* Dentro de una fila de opcion: ancho fijo, no estira la fila. */
.stepper--inline { flex: none; width: 132px; }
.stepper button {
  min-height: 44px;
  border: var(--outline-thin); border-radius: var(--radius-pill);
  background: var(--ptg-white);
  font-family: var(--font-display); font-size: 18px; line-height: 1;
  transition: background var(--dur);
}
.stepper button:hover:not(:disabled) { background: var(--ptg-yellow); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper output { text-align: center; font-family: var(--font-display); font-size: 16px; }

/* Party llena y este plato no esta dentro: se apaga para que destaquen los
   que SI puedes tocar (los elegidos, que todavia dejan quitar). */
.dish--full { opacity: .55; box-shadow: none; }
.dish--full .dish__add { cursor: not-allowed; }

/* Estado vacio de la busqueda */
.empty {
  grid-column: 1 / -1;
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--ptg-ink-60);
}

/* Leyenda de salsas: hace legible el color que ya existia. */
.legend {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--ptg-ink-12);
  border-radius: var(--radius-card);
}
.legend summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .05em;
  min-height: 28px;
  display: flex; align-items: center;
}
.legend__items { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.legend__item { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; }
.legend__dot { width: 18px; height: 18px; border-radius: 50%; border: var(--outline-thin); }

/* ============================================================
   LISTA DE OPCIONES (refresco, postres, extras)
   ============================================================ */

.options { display: grid; gap: var(--sp-3); }
@media (min-width: 600px) { .options--2 { grid-template-columns: 1fr 1fr; } }

.option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4);
  border: var(--outline);
  border-radius: var(--radius-card);
  background: var(--ptg-white);
  box-shadow: var(--shadow-pop-sm);
  text-align: left;
  transition: background var(--dur), box-shadow var(--dur);
}
/* Solo los que son botones reaccionan al hover. */
button.option:hover { background: var(--ptg-yellow); }
/* Debe ir DESPUES de .option, si no la regla base lo pisa. */
.option[aria-pressed="true"], .option[aria-checked="true"], .option--on {
  background: var(--ptg-yellow);
  box-shadow: var(--shadow-pop);
}
.option__mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border: var(--outline-thin);
  border-radius: var(--radius-pill);
  background: var(--ptg-white);
}
.option[aria-pressed="true"] .option__mark,
.option[aria-checked="true"] .option__mark { background: var(--ptg-black); color: var(--ptg-yellow); }
.option__mark .icon { width: 15px; height: 15px; }
.option__body { flex: 1; display: grid; gap: 1px; }
.option__name { font-weight: 700; }
.option__note { font-size: 13px; color: var(--ptg-ink-60); }
.option__price { font-family: var(--font-display); font-size: 15px; white-space: nowrap; }

.section { margin-top: var(--sp-6); }
.section__title { font-size: 20px; margin-bottom: var(--sp-1); }
.section__sub { font-size: 14px; color: var(--ptg-ink-60); margin-bottom: var(--sp-3); }

/* Aviso de regalo / incentivo */
.gift {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: var(--outline-thin);
  border-radius: var(--radius-card);
  background: var(--ptg-yellow);
  font-size: 14px;
}
.gift .icon { flex: none; margin-top: 2px; }

/* ============================================================
   RESUMEN (rail en escritorio, seccion en Revisa)
   ============================================================ */

.summary { padding: var(--sp-4); }
.summary__title { font-size: 16px; margin-bottom: var(--sp-3); }
.summary__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--ptg-ink-12);
  font-size: 14px;
}
.summary__line:last-of-type { border-bottom: 0; }
.summary__name { flex: 1; }
.summary__amount { font-family: var(--font-display); white-space: nowrap; }
.summary__sub { display: block; font-size: 12px; color: var(--ptg-ink-60); }
.summary__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: var(--outline-thin);
  font-family: var(--font-display); font-size: 22px;
}
.summary__save { margin-top: var(--sp-2); font-size: 13px; color: var(--ptg-red); font-weight: 700; }

.rail { display: none; }
@media (min-width: 1024px) {
  .rail {
    display: block;
    position: sticky;
    /* Se pega justo debajo de la bandeja. --h-tray lo mide app.js; vale 0 en
       los pasos que no tienen bandeja, y entonces el rail sube solo. */
    top: calc(var(--h-topbar) + var(--h-steps) + var(--sp-5) + var(--h-tray, 0px) + var(--sp-4));
    /* Nunca mas alto que lo que queda de ventana: si crece, hace scroll solo. */
    max-height: calc(100dvh - var(--h-topbar) - var(--h-steps) - var(--h-tray, 0px) - var(--sp-8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ============================================================
   BARRA DE ACCION (movil)
   ============================================================ */

.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--ptg-cream);
  border-top: var(--outline);
}
.actionbar__info { flex: none; display: grid; gap: 0; }
.actionbar__count { font-family: var(--font-display); font-size: 17px; line-height: 1.1; }
.actionbar__hint { font-size: 12px; color: var(--ptg-ink-60); }
.actionbar .btn { flex: 1; }

@media (min-width: 1024px) { .actionbar { display: none; } }

/* ============================================================
   REVISA
   ============================================================ */

.review { display: grid; gap: var(--sp-4); }
.review__party { padding: var(--sp-4); }
.review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.review__list { display: grid; gap: var(--sp-2); }
.review__item { display: flex; align-items: center; gap: var(--sp-3); font-size: 15px; }
.review__art { width: 34px; height: 30px; flex: none; border: var(--outline-thin); border-radius: 8px; }
.review__actions { display: grid; gap: var(--sp-3); }
@media (min-width: 600px) { .review__actions { grid-template-columns: 1fr 1fr; } }
.review__actions .btn--block { grid-column: 1 / -1; }

/* Solo donde NO hay barra de accion fija (escritorio). */
.only-wide { display: none; }
@media (min-width: 1024px) { .only-wide { display: inline-flex; } }

.field { display: grid; gap: var(--sp-2); }
.field label { font-family: var(--font-display); font-size: 13px; letter-spacing: .05em; }
.field textarea, .field input {
  width: 100%;
  padding: var(--sp-3);
  border: var(--outline);
  border-radius: var(--radius-card);
  background: var(--ptg-white);
  resize: vertical;
}

/* Aviso de estado (copiado, etc.) */
.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--h-actionbar) + var(--sp-4));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  border: var(--outline);
  border-radius: var(--radius-pill);
  background: var(--ptg-black);
  color: var(--ptg-cream);
  font-size: 14px;
  box-shadow: var(--shadow-pop);
}
@media (min-width: 1024px) { .toast { bottom: var(--sp-5); } }