/* ==========================================================================
   MENU DE UN NEGOCIO DE COMIDA
   Solo se carga en tiendas de comida. Renglones del menu, el paso de
   cantidades, "Tu pedido" y la pagina de un pedido. El letrero de abierto o
   cerrado vive en catalogo-paginas.css (tambien la usan las tiendas).
   Usa los tokens y las capas de catalogo.css.
   ========================================================================== */

@layer paginas {

  .cat-carta__avisos { display: grid; gap: 10px; margin-bottom: 14px; }
  .cat-carta__avisos:not(:has(> :not([hidden]))) { display: none; }

  .cat-cerrado {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 18px;
    background: #fff5f5;
    color: #7f1d1d;
    font-size: 14.5px;
  }
  .cat-cerrado__icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: #fee2e2;
    color: #b91c1c;
  }
  .cat-cerrado__titulo { color: #991b1b; font-weight: 800; }

  .cat-ultimo-pedido {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--cat-line);
    border-radius: 16px;
    background: var(--cat-surface);
    color: var(--cat-ink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--cat-sh-sm);
  }
  .cat-ultimo-pedido > span { flex: 1; }
  .cat-ultimo-pedido i:first-child { color: var(--cat-main-ink); }

  /* ---------- Secciones del menu ---------- */
  .cat-carta__nav { align-items: center; }
  .cat-carta__chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--cat-line);
    border-radius: 999px;
    background: var(--cat-surface);
    color: var(--cat-ink-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color var(--cat-rapido), border-color var(--cat-rapido), color var(--cat-rapido);
  }
  .cat-carta__chip:hover { border-color: color-mix(in oklab, var(--cat-main) 50%, var(--cat-line)); color: var(--cat-ink); }
  .cat-carta__chip[aria-current="true"] { background: var(--cat-ink); border-color: var(--cat-ink); color: #fff; }

  .cat-carta__grupos { display: grid; gap: clamp(28px, 4vw, 44px); }
  /* Debajo del encabezado y de la barra de busqueda, que van pegados arriba. */
  .cat-carta__grupo { scroll-margin-top: calc(var(--cat-cabecera-h) + 84px); }
  /* Una seccion sin renglones a la vista (por la busqueda) se esconde. */
  .cat-carta__grupo:not(:has(.producto-item:not([style*="display: none"]))) { display: none; }
  .cat-carta__titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: clamp(19px, 2.2vw, 23px);
    font-weight: 800;
    letter-spacing: -.02em;
  }
  .cat-carta__titulo::after { content: ""; flex: 1; height: 1px; background: var(--cat-line); }
  .cat-carta__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 12px;
  }

  /* ---------- Un platillo ---------- */
  .cat-platillo {
    position: relative;
    display: flex;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgb(23 23 43 / .06);
    border-radius: 20px;
    background: var(--cat-surface);
    box-shadow: var(--cat-sh-sm);
    transition: box-shadow .25s var(--cat-ease), transform .25s var(--cat-ease);
  }
  .cat-platillo:hover { box-shadow: var(--cat-sh); }
  .cat-platillo__texto { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
  .cat-platillo__nombre { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .cat-platillo__nombre a { color: var(--cat-ink); text-decoration: none; }
  .cat-platillo__nombre a:hover { color: var(--cat-main-ink); }
  .cat-platillo__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--cat-muted);
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .cat-platillo__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 4px; }
  .cat-platillo__precio { color: var(--cat-main-ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .cat-platillo__consultar { display: inline-flex; align-items: center; gap: 7px; color: var(--cat-wsp); font-size: 13.5px; font-weight: 700; text-decoration: none; }
  .cat-platillo__foto {
    position: relative;
    width: 104px;
    height: 104px;
    flex: none;
    overflow: hidden;
    border-radius: 16px;
    background: var(--cat-surface-2);
  }
  .cat-platillo__foto img { width: 100%; height: 100%; object-fit: cover; }
  .cat-platillo__foto img.is-rota { display: none; }
  /* La foto y, si es de muestra, su etiqueta debajo ("Foto ilustrativa"). */
  .cat-platillo__media { display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; max-width: 104px; }
  .cat-foto-muestra--platillo { font-size: 11.5px; text-align: center; }

  /* Agotado (comida): se queda en su lugar, en gris y sin "Agregar". El gris
     del texto va un poco mas oscuro que --cat-muted: sobre el fondo de agotado
     de Vitrina, --cat-muted solo da 3.8:1. Sin color-mix, el de --cat-ink-2. */
  .cat-platillo.is-agotado { background: var(--cat-surface-2); box-shadow: none; }
  .cat-platillo.is-agotado:hover { box-shadow: none; }
  .cat-platillo.is-agotado .cat-platillo__nombre a,
  .cat-platillo.is-agotado .cat-platillo__precio,
  .cat-platillo.is-agotado .cat-foto-muestra {
    color: var(--cat-ink-2);
    color: color-mix(in srgb, var(--cat-muted) 70%, var(--cat-ink-2));
  }
  .cat-platillo.is-agotado .cat-platillo__foto img { filter: grayscale(1); opacity: .6; }
  .cat-platillo__agotado {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--cat-line);
    border-radius: 999px;
    background: var(--cat-surface);
    color: var(--cat-muted);
    font-size: 13px;
    font-weight: 700;
  }

  @media (max-width: 480px) {
    .cat-platillo { gap: 12px; padding: 12px; border-radius: 18px; }
    .cat-platillo__foto { width: 88px; height: 88px; border-radius: 14px; }
    .cat-platillo__media { max-width: 88px; }
  }

  /* ---------- Agregar / − n + ---------- */
  .cat-paso { display: inline-flex; }
  .cat-paso__agregar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--cat-main-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: transform var(--cat-rapido) var(--cat-ease), background-color var(--cat-rapido);
  }
  .cat-paso__agregar:hover { background: color-mix(in oklab, var(--cat-main-ink) 86%, #000); }
  .cat-paso__agregar:active { transform: scale(.96); }
  .cat-paso__control {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 3px;
    border-radius: 12px;
    background: var(--cat-tint);
  }
  .cat-paso__control[hidden] { display: none; }
  .cat-paso__btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: var(--cat-surface);
    color: var(--cat-main-ink);
    font-size: 13px;
    box-shadow: var(--cat-sh-sm);
  }
  .cat-paso__btn:active { transform: scale(.94); }
  .cat-paso__n { min-width: 30px; color: var(--cat-ink); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

  /* ---------- Tu pedido (panel) ---------- */
  .cat-pedido__cuerpo { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .cat-pedido__cerrado {
    display: flex;
    gap: 10px;
    margin: 0 20px 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff5f5;
    color: #991b1b;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .cat-pedido__cerrado i { margin-top: 3px; }
  .cat-pedido__lista { padding: 0 20px; }
  .cat-pedido__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cat-line);
  }
  .cat-pedido__item-texto { display: grid; gap: 2px; min-width: 0; }
  .cat-pedido__item-nombre { overflow-wrap: anywhere; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
  .cat-pedido__item-precio { color: var(--cat-muted); font-size: 12.5px; }
  .cat-pedido__item-importe { grid-column: 2; justify-self: end; color: var(--cat-main-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
  .cat-pedido__item .cat-paso__control { grid-column: 1; grid-row: 2; justify-self: start; height: 36px; }
  .cat-pedido__item .cat-paso__btn { width: 30px; height: 30px; }

  .cat-pedido__form { display: grid; gap: 12px; margin-top: auto; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cat-line); background: var(--cat-surface); }
  /* Cupon: plegado por defecto, el descuento aparece arriba del total. */
  /* Cupon en "Tu pedido": un boleto siempre a la vista (antes iba plegado y casi
     no se veia). data-estado lo pone catalogo-pedido.js: vacio, pendiente
     (espera productos) o aplicado (verde, con lo que ahorra). */
  .cat-cupon {
    display: grid;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border: 1.5px dashed color-mix(in oklab, var(--cat-main-ink) 45%, #fff);
    border-radius: 16px;
    background: var(--cat-tint);
  }
  .cat-cupon__cabeza { display: flex; align-items: center; gap: 10px; }
  .cat-cupon__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cat-main-ink);
    color: #fff;
    font-size: 14px;
    rotate: -12deg;
  }
  .cat-cupon__titulo { color: var(--cat-ink); font-size: 14.5px; font-weight: 800; }
  .cat-cupon__fila { display: flex; gap: 8px; }
  .cat-cupon__input { flex: 1; min-width: 0; background: var(--cat-surface); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
  .cat-cupon__input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }
  .cat-cupon__fila .cat-btn { flex: none; min-height: 44px; padding-inline: 18px; }
  .cat-cupon__nota { color: var(--cat-main-ink); font-size: 13px; font-weight: 700; line-height: 1.4; }
  .cat-cupon__error { color: #b91c1c; font-size: 13px; font-weight: 600; }
  .cat-cupon__aplicado { display: flex; align-items: center; gap: 10px; color: #047857; }
  .cat-cupon__aplicado[hidden] { display: none; }
  .cat-cupon__ok { flex: none; font-size: 22px; }
  .cat-cupon__texto { display: grid; flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  .cat-cupon__texto b { letter-spacing: .06em; }
  .cat-cupon__texto small { color: #065f46; font-size: 12.5px; font-weight: 500; }
  .cat-cupon__texto small:empty { display: none; }
  .cat-cupon__ahorro { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
  .cat-cupon__quitar { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
  .cat-cupon__quitar:hover { background: rgba(4, 120, 87, .12); }
  .cat-cupon__quitar:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
  /* Aplicado: el boleto pasa a verde y el campo se esconde. */
  .cat-cupon[data-estado="aplicado"] { border-color: #34d399; border-style: solid; background: #ecfdf5; }
  .cat-cupon[data-estado="aplicado"] :is(.cat-cupon__cabeza, .cat-cupon__fila, .cat-cupon__nota) { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .cat-cupon.is-recien { animation: cat-cupon-rebote .24s var(--cat-ease); }
    .cat-cupon__fila.is-error { animation: cat-cupon-sacude .32s ease-in-out; }
  }
  @keyframes cat-cupon-rebote { from { transform: scale(.96); } }
  @keyframes cat-cupon-sacude { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
  .cat-pedido__total { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 700; }
  .cat-pedido__total strong { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .cat-campo { display: grid; gap: 5px; }
  .cat-campo__etiqueta { color: var(--cat-ink-2); font-size: 13px; font-weight: 700; }
  .cat-campo__etiqueta small { color: var(--cat-muted); font-weight: 500; }
  .cat-campo__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--cat-line);
    border-radius: 12px;
    background: var(--cat-surface);
    color: var(--cat-ink);
    font: 500 16px/1.4 var(--cat-font);
    resize: vertical;
    transition: border-color var(--cat-rapido), box-shadow var(--cat-rapido);
  }
  .cat-campo__input:focus { outline: none; border-color: var(--cat-main); box-shadow: 0 0 0 4px var(--cat-ring); }
  .cat-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  /* Telefono con pais: lada a la izquierda, numero a la derecha. */
  .cat-telefono { display: flex; gap: 8px; }
  .cat-telefono > select { flex: 0 0 auto; max-width: 46%; }
  .cat-telefono > input { flex: 1 1 auto; min-width: 0; }
  .cat-pedido__error { padding: 10px 12px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 13.5px; font-weight: 600; }
  .cat-pedido__form .cat-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
  .cat-pedido__privacidad { color: var(--cat-muted); font-size: 12px; line-height: 1.45; text-align: center; }

  /* ---------- La pagina de un pedido ---------- */
  .cat-estado {
    display: grid;
    gap: 22px;
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid rgb(23 23 43 / .06);
    border-radius: 28px;
    background: var(--cat-surface);
    box-shadow: var(--cat-sh-lg);
  }
  .cat-estado__cabeza { display: grid; justify-items: center; gap: 8px; text-align: center; }
  .cat-estado__icono { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; font-size: 32px; }
  [data-pedido-estado="pendiente"] .cat-estado__icono { background: #fef3c7; color: #b45309; }
  [data-pedido-estado="aceptado"] .cat-estado__icono { background: #ffedd5; color: #c2410c; }
  [data-pedido-estado="listo"] .cat-estado__icono { background: #dcfce7; color: #15803d; }
  [data-pedido-estado="entregado"] .cat-estado__icono { background: #e0e7ff; color: #3730a3; }
  [data-pedido-estado="rechazado"] .cat-estado__icono { background: #fee2e2; color: #b91c1c; }
  [data-pedido-estado="cerrado"] .cat-estado__icono { background: #f3f4f6; color: #4b5563; }
  .cat-estado__icono > span { display: none; }
  [data-pedido-estado="pendiente"] .cat-estado__si-pendiente,
  [data-pedido-estado="aceptado"] .cat-estado__si-aceptado,
  [data-pedido-estado="listo"] .cat-estado__si-listo,
  [data-pedido-estado="entregado"] .cat-estado__si-entregado,
  [data-pedido-estado="rechazado"] .cat-estado__si-rechazado,
  [data-pedido-estado="cerrado"] .cat-estado__si-cerrado { display: inline-block; }
  [data-terminal="1"] .cat-estado__pago { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    [data-pedido-estado="pendiente"] .cat-estado__si-pendiente { animation: cat-reloj 2.4s ease-in-out infinite; }
    [data-pedido-estado="listo"] .cat-estado__si-listo { animation: cat-campana 1.6s ease-in-out 3; }
  }
  @keyframes cat-campana { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 12deg; } 60% { rotate: -8deg; } 80% { rotate: 6deg; } }
  .cat-estado__titulo { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: anywhere; }
  .cat-estado__texto { max-width: 46ch; color: var(--cat-ink-2); font-size: 15px; line-height: 1.55; }

  .cat-estado__resumen { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--cat-canvas); }
  .cat-estado__items { display: grid; gap: 8px; }
  .cat-estado__items li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; font-size: 14.5px; }
  .cat-estado__cant { font-weight: 800; }
  .cat-estado__nombre { overflow-wrap: anywhere; }
  .cat-estado__importe { font-weight: 700; font-variant-numeric: tabular-nums; }
  .cat-estado__descuento { display: flex; justify-content: space-between; gap: 8px; color: #047857; font-size: 14px; font-weight: 600; }
  .cat-estado__descuento strong { font-variant-numeric: tabular-nums; }
  .cat-estado__total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--cat-line); font-weight: 700; }
  .cat-estado__total strong { font-size: 19px; font-variant-numeric: tabular-nums; }
  .cat-estado__nota { display: flex; gap: 8px; color: var(--cat-ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
  .cat-estado__pago { color: var(--cat-muted); font-size: 12.5px; }
  .cat-estado__acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

  /* ---------- Combos: tarjeta y hoja para elegir ---------- */
  .cat-combos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
  .cat-combo {
    position: relative;
    display: flex;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in oklab, var(--cat-main) 22%, transparent);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--cat-tint), var(--cat-surface) 70%);
    box-shadow: var(--cat-sh-sm);
    transition: box-shadow .25s var(--cat-ease), transform .25s var(--cat-ease);
  }
  .cat-combo:hover { box-shadow: var(--cat-sh); transform: translateY(-1px); }
  .cat-combo__foto { width: 96px; height: 96px; flex: none; border-radius: 16px; object-fit: cover; }
  .cat-combo__icono { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--cat-surface); color: var(--cat-main-ink); font-size: 24px; box-shadow: var(--cat-sh-sm); }
  .cat-combo__texto { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
  .cat-combo__sello { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--cat-main-ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .cat-combo__nombre { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .cat-combo__resumen { color: var(--cat-ink); font-size: 14px; font-weight: 600; }
  .cat-combo__boton { margin-left: auto; }
  .cat-pedido__item-detalle { color: var(--cat-muted); font-size: 12.5px; line-height: 1.35; }

  .cat-combo-dialogo {
    width: min(560px, 100%);
    max-width: 100%;
    max-height: min(92dvh, 760px);
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--cat-surface);
    color: var(--cat-ink);
    box-shadow: var(--cat-sh-lg);
  }
  .cat-combo-dialogo::backdrop { background: rgb(23 23 43 / .45); backdrop-filter: blur(2px); }
  .cat-combo-dialogo[open] { animation: cat-combo-sube .28s var(--cat-ease); }
  @keyframes cat-combo-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (min-width: 640px) { .cat-combo-dialogo { margin: auto; border-radius: 24px; } }
  .cat-combo-dialogo__hoja { display: flex; flex-direction: column; max-height: inherit; }
  .cat-combo-dialogo__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--cat-line); }
  .cat-combo-dialogo__sello { margin: 0; color: var(--cat-main-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .cat-combo-dialogo__nombre { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
  .cat-combo-dialogo__precio { margin: 4px 0 0; font-size: 16px; font-weight: 700; }
  .cat-combo-dialogo__cerrar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--cat-canvas); color: var(--cat-ink); font-size: 18px; cursor: pointer; }
  .cat-combo-dialogo__cuerpo { display: grid; gap: 18px; padding: 16px 20px; overflow-y: auto; overscroll-behavior: contain; }
  .cat-combo-dialogo__pie { display: grid; gap: 8px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cat-line); background: var(--cat-surface); }
  .cat-combo-dialogo__falta { margin: 0; color: var(--cat-muted); font-size: 13px; text-align: center; }
  .cat-combo-dialogo__agregar { width: 100%; justify-content: center; }
  .cat-combo-dialogo__agregar:disabled { opacity: .45; cursor: not-allowed; }
  .cat-combo-grupo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .cat-combo-grupo__titulo { margin: 0; font-size: 16px; font-weight: 800; }
  .cat-combo-grupo__estado { padding: 3px 10px; border-radius: 999px; background: #fff4e5; color: #9a5b00; font-size: 12px; font-weight: 800; }
  .cat-combo-grupo__estado.is-listo { background: #e8f7ee; color: #0d6b38; }
  .cat-combo-grupo__ayuda { margin: 4px 0 8px; color: var(--cat-muted); font-size: 13px; }
  .cat-combo-opciones { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .cat-combo-opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--cat-line); border-radius: 14px; transition: border-color var(--cat-rapido), background-color var(--cat-rapido); }
  .cat-combo-opcion.is-elegida { border-color: color-mix(in oklab, var(--cat-main) 40%, transparent); background: var(--cat-tint); }
  .cat-combo-opcion__nombre { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
  .cat-combo-opcion .cat-paso__btn:disabled { opacity: .35; cursor: not-allowed; }
  .cat-combo-incluye { margin: 6px 0 0; padding-left: 18px; color: var(--cat-ink); }
  @media (prefers-reduced-motion: reduce) { .cat-combo-dialogo[open] { animation: none; } .cat-combo:hover { transform: none; } }


  /* ======================= Lista de espera =======================
     La hoja para anotarse reusa la del combo; aqui solo lo propio. La pagina
     de una anotacion reusa .cat-estado. */
  .cat-espera__explica { margin: 6px 0 0; color: var(--cat-ink-2); font-size: 14px; line-height: 1.45; }
  /* Mismo color que el boton de la tarjeta: ambar (apartado) o indigo (sobre pedido). */
  .cat-espera[data-tipo="apartado"] [data-espera-enviar] { background: #b45309; }
  .cat-espera[data-tipo="sobre_pedido"] [data-espera-enviar] { background: #4338ca; }
  .cat-espera[data-tipo="apartado"] .cat-combo-dialogo__sello { color: #b45309; }
  .cat-espera[data-tipo="sobre_pedido"] .cat-combo-dialogo__sello { color: #4338ca; }
  .cat-espera__cantidad select { max-width: 120px; }
  .cat-espera__listo { justify-items: center; text-align: center; }
  .cat-espera__titulo { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
  .cat-espera__texto { margin: 0; max-width: 40ch; color: var(--cat-ink-2); font-size: 14.5px; line-height: 1.5; }
  .cat-espera-lugar {
    display: grid;
    place-items: center;
    min-width: 72px;
    height: 72px;
    padding: 0 14px;
    border-radius: 24px;
    background: #fef3c7;
    color: #92400e;
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
  }
  .cat-espera-lugar:empty { display: none; }
  [data-espera-estado="apartado"] .cat-estado__icono { background: #dcfce7; color: #15803d; }
  [data-espera-estado="atendido"] .cat-estado__icono { background: #e0e7ff; color: #3730a3; }
  [data-espera-estado="vencido"] .cat-estado__icono,
  [data-espera-estado="cancelado"] .cat-estado__icono { background: #f3f4f6; color: #4b5563; }
  .cat-espera-producto {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 18px;
    background: var(--cat-canvas);
    color: var(--cat-ink);
    text-decoration: none;
  }
  .cat-espera-producto__foto { position: relative; width: 56px; height: 56px; border-radius: 12px; background: var(--cat-surface-2); }
  .cat-espera-producto__datos { display: grid; gap: 2px; min-width: 0; }
  .cat-espera-producto__datos strong { overflow-wrap: anywhere; }
  .cat-espera-producto__datos small { color: var(--cat-muted); font-size: 13px; overflow-wrap: anywhere; }

}