/*
 * carta.css
 * ------------------------------------------------------------
 * Todo el estilo del sitio público: carta, asistente, pedido y confirmación.
 * Es autónomo: no carga base.css ni components.css, que son del panel,
 * para que pese lo mínimo cuando se abre desde un anuncio.
 *
 * Sigue la carta impresa del local: pizarra negra, títulos en ámbar,
 * precios dentro de una cápsula con borde naranjo y el logo fileteado.
 * El pedido, en cambio, es un papel claro sobre la pizarra: la comanda.
 * Para ajustar la marca se editan los tokens de :root.
 * ------------------------------------------------------------
 */

/* ==========================================================
   Tokens
   ========================================================== */
:root {
    --bg:        #1c1b1a;   /* pizarra */
    --bg-out:    #0f0e0e;   /* fuera de la columna, en pantallas anchas */
    --surface:   #272523;   /* tarjetas, campos, burbujas */
    --rule:      #3b3835;
    --dots:      #57524c;
    --text:      #f7f3eb;
    --muted:     #b9b2a7;

    --accent:    #fbb01a;   /* ámbar de los títulos: acción principal */
    --on-accent: #1c1b1a;
    --orange:    #f0782a;   /* borde de las cápsulas de precio */
    --danger:    #ff7a6b;
    --open:      #4fcf7f;

    --slip:      #f7f1e6;   /* papel de la comanda */
    --slip-ink:  #25221e;
    --slip-rule: #cbc2b0;
    --folio:     #c8201a;

    --wa:        #25d366;
    --wa-text:   #06351a;

    --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --page:   34rem;
    --gutter: 1rem;
    --bar-h:  4.6rem;
    --radius: 10px;
}

/* ==========================================================
   Base
   ========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    background: var(--bg-out);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: var(--page);
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
}

html.sheet-open { overflow: hidden; }

h1, h2, h3, p, ul, dl, dd, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================
   Cabecera con el logo
   ========================================================== */
.sign {
    padding: 1.1rem var(--gutter) 1rem;
    text-align: center;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(240, 120, 42, 0.16), transparent 70%),
        var(--bg);
}

.sign__logo {
    display: block;
    width: min(14.5rem, 70%);
    margin: 0 auto;
}
.sign__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.sign__name {
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.sign__title {
    margin-top: 0.7rem;
    font-weight: 800;
    font-size: clamp(1.55rem, 7.4vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.sign__title em {
    font-style: normal;
    color: var(--accent);
}

.sign__sub {
    max-width: 22rem;
    margin: 0.45rem auto 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.sign__status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
}

.sign__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--open);
    box-shadow: 0 0 0 3px rgba(79, 207, 127, 0.22);
}
.sign__dot--closed {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.22);
}

.sign--compact { padding: 0.9rem var(--gutter) 0.7rem; }
.sign--compact .sign__logo { width: 9.5rem; }

/* Datos que quitan dudas antes de pedir. */
.facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 0.9rem;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.facts li::before {
    content: "✓ ";
    color: var(--accent);
    font-weight: 600;
}

/* ==========================================================
   Secciones (chips fijos)
   ========================================================== */
.cats {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
}

.cats__track {
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}
.cats__track::-webkit-scrollbar { display: none; }

.cats__chip {
    flex: 0 0 auto;
    padding: 0.5rem 0.95rem;
    border: 1.5px solid var(--rule);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
}

.cats__chip[aria-current="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

/* ==========================================================
   Carta
   ========================================================== */
.carta { padding: 0 var(--gutter); }

.cat { scroll-margin-top: 3.9rem; }

.cat__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--accent);
}

.cat__title {
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--accent);
}

.cat__from {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

.cat__note {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
}

/* Marca ámbar al costado de lo que ya está en el pedido. */
.item:has(.line--on) {
    margin-left: calc(var(--gutter) * -1);
    padding-left: calc(var(--gutter) - 4px);
    border-left: 4px solid var(--accent);
    background: linear-gradient(to right, rgba(251, 176, 26, 0.08), transparent 60%);
}

.item--single {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.item__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.item__desc {
    margin-top: 0.2rem;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--muted);
}

.line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
}

.item__lines .line + .line { margin-top: 0.5rem; }
.item:not(.item--single) .item__lines { margin-top: 0.6rem; }

/* Producto de un solo precio: precio arriba, botones abajo, en una columna
   de ancho fijo para que el texto no se reacomode al agregar. */
.item--single .line {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

/* Puntos guía entre el tamaño y el precio. */
.line__label {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}
.line__label::after {
    content: "";
    flex: 1;
    border-bottom: 2px dotted var(--dots);
}

/* Cápsula de precio, como en la carta impresa. */
.line__price {
    padding: 0.12rem 0.65rem;
    border: 1.5px solid var(--orange);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

/* ==========================================================
   Botones de cantidad
   ========================================================== */
.stepper {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 7.5rem;   /* ancho ya abierto (− 1 +): evita saltos al agregar */
}

.stepper__btn {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    touch-action: manipulation;
}

.stepper__btn--plus {
    background: var(--accent);
    color: var(--on-accent);
}

.stepper__btn:active { transform: scale(0.92); }

.stepper__qty {
    min-width: 2rem;
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
}

.stepper--small { min-width: 0; }
.stepper--small .stepper__btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
}
.stepper--small .stepper__qty { min-width: 1.6rem; }

/* ==========================================================
   Avisos
   ========================================================== */
.notice {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface);
    font-size: 0.95rem;
}

.notice--error { border-left-color: var(--danger); }

/* ==========================================================
   Pie
   ========================================================== */
.foot {
    padding: 2rem var(--gutter) calc(var(--bar-h) + 2rem + env(safe-area-inset-bottom));
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
}

/* ==========================================================
   Barra fija: "Ver pedido" o, con el pedido vacío, el asistente
   ========================================================== */
.bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    max-width: var(--page);
    margin: 0 auto;
    padding: 1.5rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(28, 27, 26, 0), var(--bg) 45%);
    animation: bar-in 0.25s ease-out;
}

.bar__btn {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.6rem;
    padding: 0 1.1rem 0 0.8rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    text-decoration: none;
    box-shadow: 0 10px 28px -10px rgba(251, 176, 26, 0.65);
}

.bar__count {
    display: grid;
    place-items: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--on-accent);
    color: var(--accent);
    font-weight: 600;
}
.bar__count--bump { animation: bump 0.22s ease-out; }

.bar__label {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
}

.bar__total {
    font-weight: 800;
    font-size: 1.1rem;
}

.bar--help .bar__btn {
    grid-template-columns: 1fr auto;
    padding: 0 1.2rem;
    border: 1.5px solid var(--accent);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.9);
}
.bar--help .bar__label { font-size: 0.92rem; white-space: nowrap; }
.bar--help .bar__total { color: var(--accent); }

@keyframes bar-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes bump {
    50% { transform: scale(1.25); }
}

/* ==========================================================
   Hoja del pedido
   ========================================================== */
.sheet {
    width: 100%;
    max-width: var(--page);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sheet[open] { animation: sheet-in 0.28s ease-out; }
.sheet::backdrop { background: rgba(0, 0, 0, 0.7); }

@keyframes sheet-in {
    from { transform: translateY(6%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.sheet__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0.6rem var(--gutter);
    background: var(--bg);
    border-bottom: 2px solid var(--accent);
}

.sheet__title {
    font-weight: 800;
    font-size: 1.3rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--accent);
}

.sheet__close {
    min-height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.order { padding: 0 var(--gutter); }

.order__trap,
#order-form[hidden] input[name="website"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.order__send {
    position: sticky;
    bottom: 0;
    margin: 1.25rem calc(var(--gutter) * -1) 0;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--rule);
}

.order__hint {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--muted);
    text-align: center;
}

/* ==========================================================
   Comanda: papel claro sobre la pizarra
   ========================================================== */
.boleta {
    /* Dentro del papel, los botones usan tinta oscura. */
    --accent: var(--slip-ink);
    --on-accent: var(--slip);

    position: relative;
    margin: 1.1rem 0 1.4rem;
    padding: 1.1rem 1rem 0.9rem;
    background: var(--slip);
    color: var(--slip-ink);
}

/* Borde troquelado, arriba y abajo. */
.boleta::before,
.boleta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background-size: 12px 6px;
    background-repeat: repeat-x;
}
.boleta::before {
    top: 0;
    background-image: radial-gradient(circle at 6px 0, var(--bg) 4.5px, transparent 5px);
}
.boleta::after {
    bottom: 0;
    background-image: radial-gradient(circle at 6px 6px, var(--bg) 4.5px, transparent 5px);
}

.boleta__folio {
    margin-bottom: 0.4rem;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    color: var(--folio);
    text-align: right;
}

.boleta__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--slip-rule);
}

.boleta__item--edit { grid-template-columns: 1fr auto auto; }

.boleta__qty,
.boleta__amount {
    font-family: var(--font-mono);
    font-weight: 500;
    white-space: nowrap;
}

.boleta__name {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.25;
}

.boleta__item--edit .boleta__amount {
    min-width: 4.6rem;
    text-align: right;
}

.boleta__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.boleta__row--total {
    margin-top: 0.25rem;
    padding-top: 0.7rem;
    border-top: 2px solid var(--slip-ink);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.boleta__row--total .boleta__amount {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.boleta__data {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--slip-rule);
    font-size: 0.9rem;
}
.boleta__data > div {
    display: grid;
    grid-template-columns: 5.75rem 1fr;
    gap: 0.5rem;
    padding: 0.15rem 0;
}
.boleta__data dt { font-weight: 600; }
.boleta__data dd { overflow-wrap: anywhere; }

/* ==========================================================
   Campos del pedido
   ========================================================== */
.field,
.choice { margin-top: 1.1rem; }

.field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.field__optional {
    font-weight: 400;
    color: var(--muted);
}

.field__input {
    display: block;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1.5px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 1rem;   /* 16px: evita el zoom automático de iOS */
    line-height: 1.35;
}
.field__input:focus {
    outline: 3px solid rgba(251, 176, 26, 0.28);
    outline-offset: 0;
    border-color: var(--accent);
}
.field__input::placeholder { color: #8d867b; }

textarea.field__input { resize: vertical; }

.field__hint {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.choice__option {
    position: relative;
    flex: 1 1 auto;
}

.choice__option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.choice__option span {
    display: block;
    padding: 0.8rem 0.75rem;
    border: 1.5px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
}

.choice__option input:checked + span {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.choice__option input:focus-visible + span {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================
   Botón de envío por WhatsApp
   ========================================================== */
.send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.6rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--wa);
    color: var(--wa-text);
    font-size: 1.08rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 28px -12px rgba(37, 211, 102, 0.7);
}
.send:disabled { opacity: 0.65; }

/* ==========================================================
   Confirmación
   ========================================================== */
.done { padding: 1.25rem var(--gutter) 3rem; }

.done__step {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.done__title {
    margin-top: 0.35rem;
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.08;
    text-wrap: balance;
}

.done__text {
    margin: 0.6rem 0 1.1rem;
    color: var(--muted);
}

.done__back {
    display: block;
    min-height: 2.75rem;
    font-weight: 600;
    text-align: center;
    text-underline-offset: 3px;
}

/* ==========================================================
   Asistente (chat)
   ========================================================== */
.chat { padding: 0 var(--gutter); }

.chat__top {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0.55rem var(--gutter);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    font-size: 0.85rem;
}

.chat__who {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}
.chat__who::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--open);
}

/* Salida siempre a mano hacia la carta completa. */
.chat__carta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1rem 0 0.85rem;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    background: rgba(251, 176, 26, 0.12);
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.chat__carta:active { transform: scale(0.97); }

.chat__log {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 0 0.5rem;
}

.msg {
    max-width: 86%;
    padding: 0.65rem 0.9rem;
    border-radius: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.4;
    animation: msg-in 0.2s ease-out;
}

.msg--bot {
    border-bottom-left-radius: 0.3rem;
    background: var(--surface);
}

.msg--typing {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.85rem 0.9rem;
}
.msg__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--muted);
    animation: dot 1s infinite ease-in-out;
}
.msg__dot:nth-child(2) { animation-delay: 0.15s; }
.msg__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-3px); opacity: 1; }
}

.msg--user {
    align-self: flex-end;
    border-bottom-right-radius: 0.3rem;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
}

@keyframes msg-in {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.cards {
    display: grid;
    gap: 0.5rem;
    width: 100%;
    animation: msg-in 0.2s ease-out;
}

.card {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
}

.card__name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.card__desc {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.card__lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

/* Cada tamaño es una cápsula de precio que se toca para sumar. */
.card__add {
    min-height: 2.75rem;
    padding: 0.4rem 0.95rem;
    border: 1.5px solid var(--orange);
    border-radius: 999px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: pre;
    touch-action: manipulation;
}
.card__add:active { transform: scale(0.96); }
.card__add--on {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.boleta--chat {
    width: 100%;
    margin: 0.4rem 0;
    animation: msg-in 0.2s ease-out;
}

.chat .send { margin: 0.4rem 0; }

.chat__dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--rule);
}

.chat__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--slip);
    color: var(--slip-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.chat__strip-btn {
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--slip-ink);
    color: var(--slip);
    font-size: 0.88rem;
    font-weight: 600;
}

.chat__replies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.chat__replies:not(:empty) { margin-bottom: 0.6rem; }

.reply {
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 600;
    touch-action: manipulation;
}
.reply:active { transform: scale(0.96); }
.reply--primary {
    background: var(--accent);
    color: var(--on-accent);
}

.chat__form {
    display: flex;
    gap: 0.5rem;
}

.chat__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.chat__input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    font-size: 1rem;
}
.chat__input:focus {
    outline: 0;
    border-color: var(--accent);
}
.chat__input::placeholder { color: #8d867b; }

.chat__send {
    flex: 0 0 auto;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 1.3rem;
    font-weight: 600;
}

/* ==========================================================
   Movimiento reducido
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .bar,
    .sheet[open],
    .bar__count--bump,
    .msg,
    .msg__dot,
    .cards,
    .boleta--chat { animation: none; }
    .stepper__btn:active,
    .card__add:active,
    .reply:active { transform: none; }
}