/* ==========================================================================
   Tique Gourmet — identidad del portal

   Paleta tomada del logotipo: turquesa para "Tique", oro degradado para
   "Gourmet". El turquesa es CLARO: sirve como color de marca y de fondo, pero
   no como texto sobre blanco. Para eso está el tono profundo.
   ========================================================================== */

:root {
    /* Marca */
    --turquesa:        #6CC3D2;
    --turquesa-claro:  #E4F4F7;
    --turquesa-hondo:  #2F7C8C;
    --oro:             #C9A227;
    --oro-claro:       #E3C765;
    --oro-hondo:       #7E5F14;

    /* Superficies. Neutros con una pizca de turquesa para que no se sientan grises de fábrica. */
    --fondo:      #F4F8F9;
    --panel:      #FFFFFF;
    --panel-2:    #EAF1F3;
    --borde:      #D3E0E4;
    --texto:      #17282C;
    --texto-tenue:#5C7076;

    /* Semánticos: separados del acento a propósito. */
    --alerta:       #A0521C;
    --alerta-suave: #FBEEE2;
    --error:        #94241C;
    --error-suave:  #FAE7E4;
    --exito:        #1F7A5C;

    --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
    --sombra: 0 1px 2px rgba(23, 40, 44, .06), 0 4px 12px rgba(23, 40, 44, .05);

    --alto-tactil: 44px;

    /* Pasteles del panel de venta. Su único trabajo es que el ojo distinga una
       tarjeta de la de al lado sin leerla; por eso son ocho tonos apenas teñidos
       y de la misma claridad entre sí. Si alguno pesara más que los demás, el
       panel dejaría de leerse como una rejilla y ese producto parecería
       destacado a propósito. */
    --pastel-1: #E6EFE4;  /* verde salvia */
    --pastel-2: #FBE7E7;  /* rosa */
    --pastel-3: #EDE8F6;  /* lila */
    --pastel-4: #FCE8EF;  /* rosa mexicano muy diluido */
    --pastel-5: #FBF2DC;  /* amarillo mantequilla */
    --pastel-6: #FDE9DC;  /* durazno */
    --pastel-7: #E2EDF7;  /* azul claro */
    --pastel-8: #E2F1EC;  /* menta */
    --pastel-borde: rgba(23, 40, 44, .10);

    /* Plataformas de reparto. Un tono por plataforma para reconocerla de un vistazo
       en la ventana de Nueva venta, en la pastilla de Ventas y en el corte, sin
       logotipos. El fuerte es texto y borde (contraste AA sobre su suave); el
       suave es el fondo. */
    --didi:        #A04A0C;
    --didi-suave:  #FDEEE2;
    --uber:        #1E2A2D;
    --uber-suave:  #E7ECEE;
    --rappi:       #B3321C;
    --rappi-suave: #FCE8E3;
}

/* El tema oscuro se define UNA sola vez, colgado del atributo data-tema que el
   script del <head> estampa en <html> antes del primer pintado. Ese script
   resuelve la opción "sistema" con matchMedia, así que aquí no hace falta un
   segundo bloque @media con la paleta repetida: dos copias de los mismos colores
   se desincronizan en cuanto alguien ajusta uno y olvida el otro. */
:root[data-tema="oscuro"] {
    --turquesa:        #6CC3D2;
    --turquesa-claro:  #16333A;
    --turquesa-hondo:  #8FD4E0;
    --oro:             #D9B644;
    --oro-claro:       #E3C765;
    --oro-hondo:       #C9A227;

    --fondo:      #101819;
    --panel:      #172124;
    --panel-2:    #1E2B2E;
    --borde:      #2A3A3E;
    --texto:      #E2EBED;
    --texto-tenue:#94A8AD;

    --alerta:       #DE9455;
    --alerta-suave: #2C2117;
    --error:        #E67A6E;
    --error-suave:  #301C1A;
    --exito:        #4FBF9B;

    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);

    /* Los mismos ocho matices, ahora como tintes oscuros. Un pastel del tema claro
       sobre fondo oscuro deslumbra y obliga a invertir el color del texto tarjeta
       por tarjeta; así el texto sigue siendo --texto en los dos temas. */
    --pastel-1: #1E2B23;
    --pastel-2: #2D2022;
    --pastel-3: #24212F;
    --pastel-4: #2D2028;
    --pastel-5: #2B261A;
    --pastel-6: #2C241D;
    --pastel-7: #1C2631;
    --pastel-8: #1C2B27;
    --pastel-borde: rgba(226, 235, 237, .12);

    --didi:        #F2A262;
    --didi-suave:  #33241A;
    --uber:        #E2EBED;
    --uber-suave:  #262E30;
    --rappi:       #F28A74;
    --rappi-suave: #35201C;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    /* Respeta el notch y la barra inferior del iPhone. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

h1 { font-size: 1.55rem; margin: 0 0 .3rem; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; font-weight: 600; }
p.sub { color: var(--texto-tenue); margin: 0 0 1.4rem; max-width: 70ch; }

/* ---------- estructura ---------- */
.marco { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.nav-lateral {
    background: var(--panel);
    border-right: 1px solid var(--borde);
    padding: 1.1rem 0 1.4rem;
    display: flex; flex-direction: column; gap: .1rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.nav-lateral .marca {
    padding: 0 1.1rem 1rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: .7rem;
}
.nav-lateral .marca img { display: block; width: 132px; height: auto; }
.nav-lateral .marca small {
    display: block; margin-top: .35rem;
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--texto-tenue);
}

.nav-lateral a {
    display: flex; align-items: center;
    min-height: var(--alto-tactil);
    padding: .35rem 1.1rem;
    color: var(--texto-tenue); text-decoration: none; font-size: .94rem;
    border-left: 3px solid transparent;
}
.nav-lateral a:hover { color: var(--texto); background: var(--panel-2); }
.nav-lateral a.active {
    color: var(--turquesa-hondo); font-weight: 500;
    border-left-color: var(--turquesa);
    background: var(--turquesa-claro);
}
.nav-lateral .grupo {
    font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--texto-tenue);
    padding: 1rem 1.1rem .25rem;
}
.nav-lateral .pie {
    margin-top: auto; padding: 1rem 1.1rem 0;
    border-top: 1px solid var(--borde); font-size: .82rem; color: var(--texto-tenue);
}
.nav-lateral .tema {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .8rem; font-size: .82rem;
}
.nav-lateral .tema select { flex: 1; min-height: var(--alto-tactil); }

main { padding: 1.6rem 1.9rem 4rem; min-width: 0; }

/* Barra superior: solo existe en móvil. */
.barra-movil { display: none; }
.menu-alterna { display: none; }

/* ---------- controles ---------- */
input, select, textarea {
    background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
    padding: .5rem .65rem; border-radius: 6px; font-family: inherit;
    /* 16px evita que iOS haga zoom al enfocar un campo. */
    font-size: 16px;
    min-height: var(--alto-tactil);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--turquesa); outline-offset: 1px; border-color: var(--turquesa);
}
input[type="number"] { font-family: var(--mono); text-align: right; }
input[type="checkbox"] { min-height: auto; width: 20px; height: 20px; accent-color: var(--turquesa-hondo); }

button {
    background: var(--panel); color: var(--texto); border: 1px solid var(--borde);
    padding: .5rem .9rem; border-radius: 6px; cursor: pointer;
    font-size: .93rem; font-family: inherit; min-height: var(--alto-tactil);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
button:hover:not(:disabled) { border-color: var(--turquesa); color: var(--turquesa-hondo); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.primario {
    background: var(--turquesa-hondo); border-color: var(--turquesa-hondo);
    color: #fff; font-weight: 500;
}
button.primario:hover:not(:disabled) { background: var(--turquesa); border-color: var(--turquesa); color: #06282F; }
button.oro { background: var(--oro); border-color: var(--oro); color: #2A2005; font-weight: 500; }
button.oro:hover:not(:disabled) { background: var(--oro-claro); border-color: var(--oro-claro); color: #2A2005; }
button.peligro { border-color: var(--error); color: var(--error); }
button.chico { min-height: 34px; padding: .25rem .6rem; font-size: .84rem; }

.barra-herramientas { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }

/* ---------- tablas ---------- */
.tabla-marco {
    border: 1px solid var(--borde); border-radius: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--panel); box-shadow: var(--sombra);
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
    text-align: left; padding: .6rem .8rem; background: var(--panel-2);
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto-tenue); font-weight: 600; border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}
td { padding: .5rem .8rem; border-bottom: 1px solid var(--borde); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.negativo { color: var(--error); }
.tenue { color: var(--texto-tenue); }

/* ---------- tarjetas ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: .7rem; margin-bottom: 1.4rem; }
.kpi {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
    padding: .85rem 1rem; box-shadow: var(--sombra);
}
.kpi .etiqueta { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.kpi .valor { font-family: var(--mono); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi.destacado { border-color: var(--turquesa); background: var(--turquesa-claro); }
.kpi.destacado .valor { color: var(--turquesa-hondo); }
/* Lo que falta por cobrar: alerta y no error, porque no es un fallo sino el estado
   normal del cobro mientras se captura lo recibido. */
.kpi.falta { border-color: var(--alerta); background: var(--alerta-suave); }
.kpi.falta .valor { color: var(--alerta); }

/* ---------- panel de productos en tarjetas ----------
   Sustituye a la tabla del catálogo en la pantalla de venta. Una tabla se lee
   renglón por renglón; aquí lo que se busca es tocar el producto de un vistazo,
   así que cada uno es un blanco grande, con su color y su precio en grande. */
.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: .7rem;
    align-content: start;
    max-height: 56vh;
    overflow-y: auto;
    /* Sin este respiro, la sombra y el anillo de foco se cortan contra el borde
       del área que se desplaza. */
    padding: .2rem;
}

.tarjeta-producto {
    display: flex; flex-direction: column; gap: .3rem;
    min-height: 118px;
    padding: .8rem .75rem .7rem;
    border: 1px solid var(--pastel-borde);
    border-radius: 10px;
    color: var(--texto);
    text-align: center;
    cursor: pointer;
    box-shadow: var(--sombra);
    transition: transform .12s ease, box-shadow .12s ease;
}

.tarjeta-producto.tono-1 { background: var(--pastel-1); }
.tarjeta-producto.tono-2 { background: var(--pastel-2); }
.tarjeta-producto.tono-3 { background: var(--pastel-3); }
.tarjeta-producto.tono-4 { background: var(--pastel-4); }
.tarjeta-producto.tono-5 { background: var(--pastel-5); }
.tarjeta-producto.tono-6 { background: var(--pastel-6); }
.tarjeta-producto.tono-7 { background: var(--pastel-7); }
.tarjeta-producto.tono-8 { background: var(--pastel-8); }

/* El botón genérico tiñe su texto de turquesa al pasar el ratón, que sobre un
   pastel se lee mal. Aquí el color se queda quieto y lo que responde es el relieve. */
.tarjeta-producto:hover:not(:disabled) {
    color: var(--texto);
    border-color: var(--pastel-borde);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(23, 40, 44, .16);
}
.tarjeta-producto:active:not(:disabled) { transform: translateY(0); box-shadow: var(--sombra); }
.tarjeta-producto:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

/* Ya está en la venta. Es la única señal de estado que lleva la tarjeta: el
   contador vive en el carrito, que es donde se cuentan las piezas. */
.tarjeta-producto.en-venta {
    border-color: var(--turquesa-hondo);
    box-shadow: 0 0 0 2px var(--turquesa-hondo) inset, var(--sombra);
}

.tarjeta-producto .nombre {
    flex: 1;
    font-size: .82rem; font-weight: 600; line-height: 1.28;
    letter-spacing: .03em; text-transform: uppercase;
    /* Nombres como "OAX Pipián con Chilacayote" no caben en un renglón, y dejar
       que estiren la tarjeta rompe la rejilla. Tres renglones y puntos suspensivos. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Filete punteado con un punto al centro, para separar el nombre del precio. */
.tarjeta-producto .regla {
    display: flex; align-items: center; gap: .35rem;
    color: var(--texto-tenue); opacity: .45;
}
.tarjeta-producto .regla::before,
.tarjeta-producto .regla::after { content: ""; flex: 1; border-top: 1px dashed currentColor; }
.tarjeta-producto .regla i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.tarjeta-producto .precio {
    font-family: var(--mono); font-size: 1.02rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tarjeta-producto .existencia {
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto-tenue);
}
.tarjeta-producto .existencia.agotandose { color: var(--alerta); font-weight: 600; }

/* ----------------------------------------------------------------------------
   La franja incómoda: laptop angosta con la captura ya partida en dos columnas.

   Entre los 980px —donde .venta-columnas se parte— y los 1200, a la columna del
   panel le quedan unos 400px, y con un mínimo de tarjeta de 148px solo caben
   dos: una laptop de 1024 terminaba viendo menos producto que una tablet de
   768, que a esa altura todavía va en una sola columna y muestra cinco. Con un
   mínimo menor entran tres, del mismo ancho que ya tienen en la tablet.

   El carrito, en esos 295px, se apila con las reglas de abajo.
   ---------------------------------------------------------------------------- */
@media (min-width: 981px) and (max-width: 1200px) {
    .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }

    /* En los 295px del carrito, la etiqueta de 155px del campo deja 140 para
       escribir: se alcanzan a ver cuatro palabras del comentario. Etiqueta
       arriba, como en el teléfono. Solo dentro del panel: los campos del modal
       de cobro viven fuera, y ahí sí hay ancho. */
    .panel-venta .campo { grid-template-columns: 1fr; gap: .25rem; }
    .panel-venta .campo label { font-size: .82rem; }
}

/* ----------------------------------------------------------------------------
   El carrito de la venta, apilado. Vale para las dos anchuras donde el renglón
   de cuatro columnas no cabe: el celular, y la franja de laptop angosta de
   arriba, donde el carrito va acotado a 300px.

   Con las cuatro columnas en 375px al nombre le quedan 90px y "OAX Mole Negro
   Guajolote" se parte en tres renglones al lado de unos botones de 36px. Aquí
   cada renglón se reacomoda en dos: arriba el producto y su tacha, abajo el
   contador y el importe. No se usa la ficha genérica de .tabla-fichas porque
   ahí cada dato se lleva un renglón con su etiqueta, y un carrito de seis
   productos se vuelve una lista de veinticuatro.
   ---------------------------------------------------------------------------- */
@media (max-width: 860px), (min-width: 981px) and (max-width: 1200px) {
    .tabla-carrito thead { display: none; }
    .tabla-carrito, .tabla-carrito tbody, .tabla-carrito tr, .tabla-carrito td { display: block; width: 100%; }

    .tabla-carrito tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem .7rem;
        align-items: center;
        padding: .7rem .8rem;
        border-bottom: 1px solid var(--borde);
    }
    .tabla-carrito tr:last-child { border-bottom: none; }
    .tabla-carrito td { border: none; padding: 0; }

    .tabla-carrito td:nth-child(1) { grid-area: 1 / 1; }                    /* producto */
    .tabla-carrito td:nth-child(4) { grid-area: 1 / 2; justify-self: end; } /* la tacha */
    .tabla-carrito td:nth-child(2) { grid-area: 2 / 1; }                    /* contador */
    .tabla-carrito td:nth-child(3) { grid-area: 2 / 2; text-align: right; font-size: 1rem; }

    /* Pegado a la izquierda, debajo del nombre: en el pulgar es un blanco más
       predecible que flotando a la derecha de la celda. */
    .tabla-carrito .contador { justify-content: flex-start; }
    .tabla-carrito .contador button { min-width: 46px; }
    .tabla-carrito .contador .cifra { min-width: 3ch; font-size: 1.05rem; }
}

/* ---------- controles − / + del carrito ---------- */
.contador { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.contador .cifra {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    min-width: 2ch; text-align: center;
}
.contador button {
    min-height: 32px; min-width: 32px; padding: 0;
    font-size: 1.05rem; line-height: 1; border-radius: 6px;
}

/* La tacha de quitar el renglón queda en 29px de ancho con el relleno de
   .chico, que para un solo carácter es un blanco incómodo hasta con ratón. */
.tabla-carrito td:last-child button { min-width: 34px; }

/* ---------- canal de la venta ---------- */
.canal {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
    padding: 1.1rem 1.2rem; box-shadow: var(--sombra); margin-bottom: 1.4rem;
    max-width: 640px;
}
.canal h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.canal .opciones { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .9rem; }
.canal .opciones button { flex: 1 1 200px; min-height: 62px; flex-direction: column; gap: .1rem; }
.canal .opciones button strong { font-size: .98rem; font-weight: 600; }
.canal .opciones button span { font-size: .76rem; color: var(--texto-tenue); }
.canal .opciones button:hover:not(:disabled) span { color: inherit; }

/* Ya elegido: se encoge a un renglón con el canal y la liga para cambiarlo. */
.canal-elegido {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: var(--turquesa-claro); border: 1px solid var(--turquesa);
    border-radius: 8px; padding: .45rem .8rem; margin-bottom: 1.2rem;
    font-size: .9rem;
}
.canal-elegido .etiqueta {
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto-tenue);
}

/* ---------- plataformas: DiDi, Uber, Rappi ----------
   Cada clase solo fija --tono y --tono-suave; la ventana, la pastilla y el corte
   los consumen. Así el color de cada plataforma se define una vez. */
.mostrador      { --tono: var(--turquesa-hondo); --tono-suave: var(--turquesa-claro); }
.didi           { --tono: var(--didi);  --tono-suave: var(--didi-suave); }
.uber           { --tono: var(--uber);  --tono-suave: var(--uber-suave); }
.rappi          { --tono: var(--rappi); --tono-suave: var(--rappi-suave); }
.sin-plataforma { --tono: var(--alerta); --tono-suave: var(--alerta-suave); }

.modal.modal-plataforma { width: 560px; }
.plataformas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }

/* El botón genérico se tiñe de turquesa al pasar el ratón; aquí el tono de la
   plataforma se queda quieto y lo que responde es el relieve. Por eso el hover va
   con el mismo peso que el estado normal. */
.plataforma,
.plataforma:hover:not(:disabled) {
    min-height: 112px;
    font-size: 1.45rem; font-weight: 700; letter-spacing: .01em;
    color: var(--tono); background: var(--tono-suave);
    border: 2px solid var(--tono); border-radius: 12px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.plataforma:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(23, 40, 44, .16); }
.plataforma:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.plataforma:focus-visible { outline: 3px solid var(--tono); outline-offset: 2px; }
/* La que ya estaba elegida, al volver con «Cambiar»: doble filo. */
.plataforma.elegida { box-shadow: 0 0 0 3px var(--tono-suave), 0 0 0 5px var(--tono); }

.pastilla.de-canal { color: var(--tono); background: var(--tono-suave); border-color: var(--tono); }
.pastilla.de-canal.mostrador { color: var(--texto-tenue); background: transparent; border-color: currentColor; }
.pastilla.de-canal.didi, .pastilla.de-canal.uber, .pastilla.de-canal.rappi { font-weight: 600; }
.pastilla.de-canal.sin-plataforma { border-style: dashed; }
.canal-elegido .pastilla.de-canal { font-size: .8rem; }

/* Desglose del corte por canal, debajo de los KPI del corte. */
.desglose-canal {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: .7rem; margin: -.6rem 0 1.4rem;
}
.desglose-canal .kpi { border-left: 4px solid var(--tono); padding: .6rem .9rem; }
.desglose-canal .kpi .etiqueta { color: var(--tono); font-weight: 600; }
.desglose-canal .kpi .valor { font-size: 1.1rem; }
.desglose-canal .kpi .cuenta { font-size: .78rem; color: var(--texto-tenue); }

/* ---------- avisos ---------- */
.aviso { padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; font-size: .92rem; border-left: 3px solid; }
.aviso.ok { background: var(--turquesa-claro); border-left-color: var(--turquesa); }
.aviso.alerta { background: var(--alerta-suave); border-left-color: var(--alerta); }
.aviso.error { background: var(--error-suave); border-left-color: var(--error); }

/* ---------- modal ---------- */
.velo {
    position: fixed; inset: 0; background: rgba(10, 24, 27, .6);
    display: flex; align-items: center; justify-content: center; z-index: 40;
    padding: 1rem;
}
.modal {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
    padding: 1.4rem; width: 480px; max-width: 100%;
    max-height: calc(100vh - 2rem); overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.modal.ancho { width: 660px; }
.modal h2 { margin-top: 0; }
.campo { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: .6rem; align-items: center; margin-bottom: .65rem; }
.campo label { color: var(--texto-tenue); font-size: .9rem; }
.campo input, .campo select { width: 100%; }
.acciones { display: flex; gap: .55rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }

/* ---------- captura en dos columnas (venta, producción, merma) ---------- */
/* El carrito va DESPUÉS del catálogo en el marcado, así que al apilarse en celular
   queda abajo: buscar, agregar, revisar, confirmar. */
/* minmax(0, …) en ambas: sin él, `1fr` respeta el ancho mínimo del contenido y
   una tabla ancha en cualquiera de las dos columnas se lleva el espacio de la
   otra en vez de desplazarse dentro de su propio marco. */
.venta-columnas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 980px) {
    .venta-columnas { grid-template-columns: 1fr; }
}

/* El carrito de la venta no crece con la pantalla: sus renglones son tres datos
   cortos, y a partir de cierto ancho lo único que hace el espacio de más es
   estirar el nombre del producto. El panel sí lo aprovecha, porque cada 160px
   que gana son otra tarjeta a la vista. De ahí que aquí pese 1.7 contra 1, en
   vez del 1.35 de las capturas de producción y merma, donde las dos columnas
   son tablas y se reparten parejo.

   Este bloque va después del @media anterior a propósito: tiene su misma
   especificidad, así que declararlo antes dejaría la captura en dos columnas
   también en el teléfono. */
@media (min-width: 1201px) {
    .panel-venta { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* Bloque de una operación administrativa suelta: su campo y su botón. */
.marco-accion {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
    padding: 1rem 1.1rem; box-shadow: var(--sombra); max-width: 520px;
}
.marco-accion button { margin-top: .8rem; min-height: var(--alto-tactil); }

/* Lo que ofrece el bot de WhatsApp, arriba de Existencias: sabores de atole con
   su interruptor y la frase tal como la va a leer el cliente. */
.menu-whatsapp {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
    padding: 1rem 1.2rem; box-shadow: var(--sombra); margin-bottom: 1.4rem;
}
.menu-whatsapp h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.menu-whatsapp .sabores { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .9rem 0; }
.menu-whatsapp .sabor {
    display: inline-flex; align-items: center;
    border: 1px solid var(--borde); border-radius: 999px; padding-left: .75rem;
    background: var(--panel-2); color: var(--texto-tenue);
}
.menu-whatsapp .sabor.prendido { background: var(--turquesa-claro); border-color: var(--turquesa); color: var(--turquesa-hondo); }
.menu-whatsapp .sabor label { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--alto-tactil); cursor: pointer; }
.menu-whatsapp .sabor button {
    border: none; background: transparent; color: inherit;
    min-height: var(--alto-tactil); padding: 0 .7rem 0 .6rem; font-size: 1.1rem; border-radius: 999px;
}
.menu-whatsapp .agregar { display: inline-flex; gap: .4rem; }
.menu-whatsapp .agregar input { width: 170px; }
.menu-whatsapp .vista-previa {
    background: var(--fondo); border-left: 3px solid var(--turquesa); border-radius: 6px;
    padding: .6rem .9rem; font-size: .92rem;
}
/* pre-line: el texto del bot trae un salto de línea por categoría. */
.menu-whatsapp .vista-previa p { margin: 0; white-space: pre-line; }
.menu-whatsapp .etiqueta {
    display: block; margin-bottom: .25rem;
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue);
}

/* ---------- etiquetas de estado ---------- */
.pastilla {
    display: inline-block; font-size: .7rem; letter-spacing: .05em;
    padding: .18em .55em; border-radius: 999px; border: 1px solid currentColor;
    white-space: nowrap;
}
.pastilla.si { color: var(--exito); }
.pastilla.no { color: var(--texto-tenue); }
.pastilla.mal { color: var(--error); }

/* ---------- login ---------- */
.centro { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.2rem; }
.login {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
    padding: 2rem 1.8rem; width: 380px; max-width: 100%; box-shadow: var(--sombra);
}
.login img.marca { display: block; width: 168px; height: auto; margin: 0 auto 1.4rem; }
.login input { width: 100%; margin-bottom: .7rem; text-align: left; }
.login button { width: 100%; }

/* ==========================================================================
   Móvil. El objetivo concreto es el iPhone en 375x812.
   ========================================================================== */
@media (max-width: 860px) {
    .marco { grid-template-columns: 1fr; }

    .barra-movil {
        display: flex; align-items: center; gap: .7rem;
        position: sticky; top: 0; z-index: 30;
        background: var(--panel); border-bottom: 1px solid var(--borde);
        padding: .5rem .9rem;
        padding-top: calc(.5rem + env(safe-area-inset-top));
    }
    .barra-movil img { height: 34px; width: auto; }

    .hamburguesa {
        min-height: var(--alto-tactil); min-width: var(--alto-tactil);
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--borde); border-radius: 6px; background: var(--panel);
        cursor: pointer;
    }
    .hamburguesa span {
        display: block; width: 18px; height: 2px; background: var(--texto);
        position: relative;
    }
    .hamburguesa span::before, .hamburguesa span::after {
        content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--texto);
    }
    .hamburguesa span::before { top: -6px; }
    .hamburguesa span::after { top: 6px; }

    /* Cajón lateral con la casilla oculta como interruptor: funciona sin JS,
       así que no depende de que el circuito interactivo esté conectado. */
    .nav-lateral {
        position: fixed; inset: 0 auto 0 0; z-index: 50;
        width: min(280px, 84vw); height: 100dvh;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.3);
        padding-top: calc(1.1rem + env(safe-area-inset-top));
    }
    .menu-alterna:checked ~ .marco .nav-lateral { transform: translateX(0); }
    .menu-alterna:checked ~ .velo-nav { display: block; }

    .velo-nav {
        display: none; position: fixed; inset: 0; z-index: 45;
        background: rgba(10, 24, 27, .5);
    }

    main { padding: 1.1rem 1rem 4rem; }

    h1 { font-size: 1.35rem; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .55rem; }
    .kpi .valor { font-size: 1.2rem; }

    /* En pantalla angosta, etiqueta arriba y campo abajo. */
    .campo { grid-template-columns: 1fr; gap: .25rem; margin-bottom: .85rem; }
    .campo label { font-size: .82rem; }

    .modal { padding: 1.1rem; border-radius: 10px; max-height: calc(100dvh - 1.5rem); }
    .velo { padding: .75rem; align-items: flex-start; padding-top: 1.5rem; }

    .acciones { justify-content: stretch; }
    .acciones button { flex: 1; }

    /* En 375px caben dos columnas cómodas. Con minmax(148px) se colarían tres
       apretadas y el nombre se partiría en cuatro renglones. */
    .rejilla-productos {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        gap: .55rem;
        max-height: none;
    }
    .tarjeta-producto { min-height: 108px; }

    .canal .opciones button { flex: 1 1 100%; }

    /* En el teléfono, uno debajo de otro y a todo lo ancho: tres blancos de 76px
       caben sin desplazar y ninguno queda al filo de la pantalla. */
    .plataformas { grid-template-columns: 1fr; gap: .6rem; }
    .plataforma, .plataforma:hover:not(:disabled) { min-height: 76px; font-size: 1.35rem; }
    .desglose-canal { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .55rem; }

    .barra-herramientas { gap: .45rem; }
    .barra-herramientas input[type="text"],
    .barra-herramientas input[type="search"] { flex: 1 1 100%; min-width: 0; }

    table { font-size: .85rem; }
    th, td { padding: .5rem .6rem; }

    /* .chico existe para densidad en escritorio. En el teléfono, 34px es un blanco
       demasiado chico para el pulgar, así que sube aunque cueste densidad. */
    button.chico { min-height: 40px; padding: .35rem .7rem; }

    /* ----------------------------------------------------------------------
       Tabla en fichas.

       Una tabla con acciones no cabe en 375px: o se corta la columna de
       botones, o hay que desplazar de lado para tocarlos, que es justo lo que
       nadie hace. Con .tabla-fichas cada fila se convierte en una tarjeta y la
       etiqueta de columna viaja en data-etiqueta.
       ---------------------------------------------------------------------- */
    .tabla-fichas thead { display: none; }
    .tabla-fichas, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td { display: block; width: 100%; }

    .tabla-fichas tr {
        border-bottom: 1px solid var(--borde);
        padding: .7rem .8rem;
    }
    .tabla-fichas tr:last-child { border-bottom: none; }

    .tabla-fichas td {
        border: none;
        padding: .18rem 0;
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: .6rem;
        align-items: center;
        text-align: left;
    }
    .tabla-fichas td::before {
        content: attr(data-etiqueta);
        font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
        color: var(--texto-tenue);
    }
    .tabla-fichas td.num { font-family: inherit; text-align: left; }

    /* Sin esto la pastilla ocupa toda la celda del grid y parece un campo de
       captura en lugar de una etiqueta de estado. */
    .tabla-fichas td .pastilla { justify-self: start; }

    .tabla-fichas td.acciones-fila {
        grid-template-columns: 1fr;
        gap: .4rem;
        margin-top: .5rem;
    }
    .tabla-fichas td.acciones-fila::before { display: none; }
    .tabla-fichas td.acciones-fila button { width: 100%; margin: .12rem 0; }


    /* El KPI de terminal no cambia nunca y en celular empuja el total a un
       segundo renglón, justo cuando el total es lo único que se consulta a media
       captura. La serie sigue a la vista en el folio de la venta registrada. */
    .solo-escritorio { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-lateral { transition: none; }
}

/* ==========================================================================
   Pedidos. Captura en /pedido, agenda en /pedidos y detalle en /pedidos/{id}.
   ========================================================================== */

/* Cada bloque de la captura (cliente, entrega, pago) es un marco con su título
   chico; no son pasos de un asistente, están todos a la vista. */
.bloque-pedido {
    background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
    padding: 1rem 1.1rem; box-shadow: var(--sombra); margin-bottom: 1rem;
}
.bloque-pedido > h2 { margin: 0 0 .7rem; font-size: 1rem; }
.bloque-pedido .campo:last-child { margin-bottom: 0; }

/* Dos opciones grandes (tienda o domicilio, un pago o anticipo). Misma pinta
   que el selector de canal de Nueva venta, pero se queda a la vista. */
.opciones-2 { display: flex; gap: .6rem; flex-wrap: wrap; }
.opciones-2 button { flex: 1 1 180px; min-height: 58px; flex-direction: column; gap: .1rem; text-align: center; }
.opciones-2 button strong { font-size: .95rem; font-weight: 600; }
.opciones-2 button span { font-size: .76rem; color: var(--texto-tenue); }
.opciones-2 button.elegida {
    border-color: var(--turquesa-hondo); background: var(--turquesa-claro); color: var(--turquesa-hondo);
    box-shadow: 0 0 0 1px var(--turquesa-hondo) inset;
}
.opciones-2 button.elegida span { color: inherit; }

/* Búsqueda de cliente con lista desplegable debajo del cuadro. */
.buscador { position: relative; }
.buscador .resultados {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: 260px; overflow-y: auto;
}
.buscador .resultados button {
    display: flex; justify-content: space-between; gap: .8rem; width: 100%;
    border: none; border-bottom: 1px solid var(--borde); border-radius: 0;
    text-align: left; padding: .55rem .8rem; background: transparent;
}
.buscador .resultados button:last-child { border-bottom: none; }
.buscador .resultados button:hover { background: var(--panel-2); }
.buscador .resultados .tenue { font-size: .82rem; }

/* El cliente ya elegido: un renglón con el nombre, el teléfono y la liga para cambiar. */
.cliente-elegido {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    background: var(--turquesa-claro); border: 1px solid var(--turquesa);
    border-radius: 8px; padding: .5rem .8rem;
}
.cliente-elegido strong { font-size: 1rem; }

/* Renglones del pedido: cantidad libre y observación por partida. */
.tabla-pedido td input[type="number"] { width: 5.2rem; min-height: 38px; padding: .3rem .4rem; }
.tabla-pedido td input.obs { width: 100%; min-height: 36px; padding: .3rem .5rem; font-size: .88rem; margin-top: .35rem; }
.tabla-pedido .nombre-renglon { font-weight: 500; }
.tabla-pedido .a-pedido {
    display: inline-block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
    background: var(--alerta-suave); color: var(--alerta); border-radius: 3px; padding: .05em .4em; margin-left: .4rem;
}

/* Atajos de porcentaje del anticipo. */
.atajos { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }

/* Agenda de pedidos: encabezados por día y tarjetas de un vistazo. */
.agenda-dia {
    display: flex; align-items: baseline; gap: .6rem;
    margin: 1.4rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--borde);
}
.agenda-dia h2 { margin: 0; font-size: 1rem; }
.agenda-dia .tenue { font-size: .82rem; }
.agenda-dia.vencido h2 { color: var(--error); }

.pedido-tarjeta {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
    padding: .75rem 1rem; margin-bottom: .55rem; box-shadow: var(--sombra);
    color: inherit; text-decoration: none;
}
.pedido-tarjeta:hover { border-color: var(--turquesa); }
.pedido-tarjeta .hora {
    font-family: var(--mono); font-size: 1.15rem; font-variant-numeric: tabular-nums;
    color: var(--turquesa-hondo); min-width: 3.4rem;
}
.pedido-tarjeta .hora small { display: block; font-size: .68rem; color: var(--texto-tenue); font-family: inherit; }
.pedido-tarjeta .quien { font-weight: 600; }
.pedido-tarjeta .que { color: var(--texto-tenue); font-size: .85rem; }
.pedido-tarjeta .cuanto { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pedido-tarjeta .cuanto small { display: block; font-size: .72rem; color: var(--texto-tenue); font-family: inherit; }
.pedido-tarjeta .cuanto .saldo { color: var(--alerta); font-weight: 600; }

/* Detalle del pedido: dos columnas en escritorio, una en el teléfono. */
.detalle-pedido { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* A 1024 la columna derecha queda en unos 300px y la tabla de pagos, con sus cuatro
   columnas, tiene que desplazarse de lado. Se apila antes que las capturas. */
@media (max-width: 1100px) { .detalle-pedido { grid-template-columns: 1fr; } }
.ficha dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: .3rem .8rem; margin: 0; }
.ficha dt { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); padding-top: .2rem; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
/* Sin esto, el correo y el pin salen en el azul del navegador, ilegible en tema oscuro. */
.ficha a { color: var(--turquesa-hondo); }
.obs-renglon { font-size: .82rem; color: var(--turquesa-hondo); padding-left: .5rem; border-left: 2px solid var(--turquesa); margin-top: .15rem; }

/* Versiones del pedido: qué cambió respecto a la anterior, como sale en el formato. */
.cambios-version { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.cambios-version li { display: flex; gap: .5rem; align-items: baseline; }
.cambios-version .signo { width: 1rem; flex: none; text-align: center; font-weight: 700; color: var(--alerta); }
.cambios-version .agregado .signo { color: var(--exito); }
.cambios-version .quitado { color: var(--texto-tenue); text-decoration: line-through; }
.cambios-version .quitado .signo { color: var(--error); text-decoration: none; }

/* Un pago cuyo ticket se canceló: se ve, pero ya no cuenta. */
.pago-cancelado td { color: var(--texto-tenue); }
.pago-cancelado td.num { text-decoration: line-through; }

/* Cotizador web: lo que llegó de tique.mx/tamales y lo que hay que revisar. */
.etiqueta-web {
    display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: var(--alerta-suave); color: var(--alerta); border-radius: 3px; padding: .05em .4em; margin-left: .4rem;
    vertical-align: middle;
}
.revision-web { border-color: var(--alerta); background: var(--alerta-suave); }
.revision-web ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.revision-web ul.emparejados { font-size: .82rem; color: var(--texto-tenue); }
.solicitud-web {
    margin: .6rem 0 0; padding: .7rem .8rem; border-radius: 6px; background: var(--fondo); border: 1px solid var(--borde);
    font-family: var(--mono); font-size: .8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
details > summary { cursor: pointer; }

/* Casilla con su explicación al lado (IVA del pedido). */
.casilla { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.casilla input { margin-top: .15rem; flex: none; }
.casilla > span { display: flex; flex-direction: column; gap: .1rem; }
.casilla .tenue { font-size: .82rem; }

@media (max-width: 860px) {
    .pedido-tarjeta { grid-template-columns: auto minmax(0, 1fr); }
    .pedido-tarjeta .cuanto { grid-column: 1 / -1; text-align: left; display: flex; gap: .8rem; }
    .pedido-tarjeta .cuanto small { display: inline; }
    .ficha dl { grid-template-columns: 1fr; gap: .1rem; }
    .ficha dd { margin-bottom: .5rem; }
}

/* ==========================================================================
   WhatsApp pendientes, en /whatsapp. Ver docs/avisos-whatsapp.md.
   ========================================================================== */

/* Contador de chats sin responder en el menú. */
.insignia {
    margin-left: auto; min-width: 1.5rem; padding: .05rem .45rem;
    border-radius: 999px; background: var(--alerta); color: #fff;
    font-size: .74rem; font-weight: 600; text-align: center;
    font-variant-numeric: tabular-nums;
}

.salud-wa { font-size: .84rem; margin: 0 0 1rem; }
.salud-wa .pastilla { margin-right: .35rem; }

.wa-tarjeta {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
    padding: .75rem 1rem; margin-bottom: .55rem; box-shadow: var(--sombra);
}
.wa-tarjeta .espera {
    font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums;
    color: var(--turquesa-hondo); min-width: 4.6rem; white-space: nowrap;
}
.wa-tarjeta .espera small { display: block; font-size: .68rem; color: var(--texto-tenue); font-family: inherit; }
.wa-tarjeta.tardado { border-left: 3px solid var(--alerta); }
.wa-tarjeta.tardado .espera { color: var(--alerta); font-weight: 600; }
.wa-tarjeta .quien { font-weight: 600; }
.wa-tarjeta .texto {
    font-size: .88rem; margin: .1rem 0 .15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-tarjeta .botones { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.wa-tarjeta .botones a { text-decoration: none; }

td.texto-corto { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 860px) {
    .wa-tarjeta { grid-template-columns: auto minmax(0, 1fr); }
    .wa-tarjeta .botones { grid-column: 1 / -1; justify-content: stretch; }
    .wa-tarjeta .botones a, .wa-tarjeta .botones > button { flex: 1; }
    .wa-tarjeta .botones a button { width: 100%; }
    .wa-tarjeta .texto { white-space: normal; }
    td.texto-corto { max-width: none; white-space: normal; }
}

/* ==========================================================================
   Ticket de venta (TicketVenta.razor): el papel de la térmica de 58 mm, con
   imprimir, guardar imagen, compartir y cerrar. Lo abren Ventas y corte y
   Nueva venta.
   ========================================================================== */

/* El modal es una columna: el papel se desplaza por dentro y los botones se quedan
   a la vista, aunque el ticket traiga veinte renglones. */
/* 500px: lo justo para que Imprimir, Guardar imagen, Compartir y Cerrar vayan en
   un solo renglón en escritorio. */
.modal.modal-ticket { width: 500px; display: flex; flex-direction: column; }
.encabezado-ticket { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.encabezado-ticket h2 { margin: 0; }

.mesa-ticket {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    background: var(--panel-2); border-radius: 8px;
    padding: 1rem .75rem;
}

/* El papel. Colores fijos a propósito, fuera de los tokens del tema: es la vista
   previa de lo que sale impreso y de la imagen que recibe el cliente, que son
   blancos con letra negra aunque el portal esté en oscuro. */
.papel-ticket {
    width: 300px; max-width: 100%; margin: 0 auto;
    background: #FFFFFF; color: #111111;
    font-family: var(--mono); font-size: 13px; line-height: 1.45;
    font-variant-numeric: tabular-nums;
    padding: 1.1rem .95rem 1.2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .10);
}
.papel-ticket hr { border: none; border-top: 1px dashed #9A9A9A; margin: .6rem 0; }
.papel-ticket .t-centro { text-align: center; }
.papel-ticket .t-logo { display: block; width: 116px; height: auto; margin: 0 auto .35rem; }
.papel-ticket .t-tenue { color: #5A5A5A; }
.papel-ticket .t-chico { font-size: 11px; line-height: 1.35; }
.papel-ticket .t-renglones { white-space: pre-line; }
.papel-ticket .t-par { display: flex; justify-content: space-between; gap: .8rem; }
.papel-ticket .t-par > :last-child { text-align: right; }
.papel-ticket .t-renglon + .t-renglon { margin-top: .35rem; }
.papel-ticket .t-desc { font-weight: 600; }
.papel-ticket .t-total { font-size: 17px; font-weight: 700; margin-top: .15rem; }
.papel-ticket .t-nota { margin-top: .5rem; font-size: 12px; color: #5A5A5A; }
.papel-ticket .t-gracias { margin-top: .35rem; font-weight: 600; }

/* Igual que en la imagen: la plataforma en negativo, arriba de los datos. */
.papel-ticket .t-plataforma {
    background: #111111; color: #FFFFFF; text-align: center;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .3rem 0; margin-bottom: .5rem;
}
.papel-ticket .t-cancelada {
    border: 2px solid #111111; text-align: center; font-weight: 700;
    letter-spacing: .1em; padding: .25rem 0; margin-top: .5rem;
}
.papel-ticket .t-cancelada small { display: block; font-weight: 400; letter-spacing: 0; font-size: 11px; }

.ticket-estado { min-height: 1.2rem; margin-top: .6rem; font-size: .85rem; color: var(--texto-tenue); }
.ticket-estado.error { color: var(--error); }
.ticket-estado:empty { min-height: 0; margin-top: 0; }

.acciones-ticket { margin-top: .8rem; }
/* Compartir nace con hidden (ticket.js lo muestra donde se puede), y el inline-flex
   de los botones le gana al hidden del navegador. */
.acciones-ticket button[hidden] { display: none; }

.ajuste-impresion { margin-top: .8rem; font-size: .85rem; }
.ajuste-impresion summary { cursor: pointer; color: var(--texto-tenue); min-height: 32px; display: flex; align-items: center; }
.ajuste-impresion label { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.ajuste-impresion select { flex: 1; }
.ajuste-impresion p { margin: .3rem 0 0; font-size: .8rem; }

/* Ventas y corte: el renglón entero abre el ticket. */
tr.abre-ticket { cursor: pointer; }
tr.abre-ticket:hover td { background: var(--panel-2); }
td.acciones-venta { white-space: nowrap; }
td.acciones-venta button { padding: .15rem .5rem; min-height: 34px; }
td.acciones-venta button + button { margin-left: .35rem; }

@media (max-width: 860px) {
    .modal.modal-ticket { width: 100%; }
    .mesa-ticket { padding: .75rem .5rem; }
    /* En 375px no caben en fila: Imprimir y Cerrar van solos en su renglón. */
    .acciones-ticket button { flex: 1 1 100%; }
    /* Guardar imagen y Compartir comparten renglón; sin Compartir, Guardar ocupa todo. */
    .acciones-ticket .boton-imagen { flex: 1 1 40%; }
}