/* Portal de Restaurante — estilos del salón.
   Se opera de pie, con el equipo en la mano o montado en pared: todo lo tocable es grande
   y el estado de cada mesa se distingue por color, texto e icono a la vez. */

/* ── Login ───────────────────────────────────────────────────────────────── */

.resto-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
}

.resto-login__card {
    width: 100%;
    max-width: 400px;
    padding: 32px 28px;
    border-radius: 16px;
}

.resto-login__marca {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: #10b981;
}

.resto-login__sucursal {
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    border: 1.5px solid transparent;
}

.resto-login__sucursal:hover {
    border-color: #10b981;
}

.resto-login__sucursal:active {
    transform: scale(.99);
}

/* ── Salón ───────────────────────────────────────────────────────────────── */

.resto-main {
    background: #f8fafc;
    min-height: 100vh;
}

.resto-salon {
    padding: 16px;
    max-width: 1840px;
    margin: 0 auto;
}

.resto-salon__resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

/* ── Resumen del salón ───────────────────────────────────────────────────────
   Un solo grupo de contadores, como una píldora con divisiones: se lee de una vez y ocupa menos que
   tres cápsulas sueltas. */
.resto-salon__contadores {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-self: start;
    align-self: center;
    padding: 4px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -10px rgba(15, 23, 42, .18);
}

.resto-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
}

.resto-chip + .resto-chip { box-shadow: -1px 0 0 rgba(15, 23, 42, .07); }

.resto-chip__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--chip);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 18%, transparent);
}

.resto-chip__n {
    font-weight: 800;
    font-size: 1rem;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.resto-chip__txt {
    font-size: .8125rem;
    color: #64748b;
}

/* ── Pedidos sin mesa: express y para llevar ─────────────────────────────── */

/* Cada botón queda encima de su columna: misma grilla de dos que el panel. */
.resto-salon__acciones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-self: center;
}

/* Botón de «relleno suave»: se ve como acción principal sin gritar. */
.resto-canal-btn.mud-button-outlined {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    color: color-mix(in srgb, var(--canal) 85%, #000);
    border-color: color-mix(in srgb, var(--canal) 30%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--canal) 7%, #fff), color-mix(in srgb, var(--canal) 13%, #fff));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 18px -12px var(--canal);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    transition: transform var(--jfg-dur) var(--jfg-ease), box-shadow var(--jfg-dur) var(--jfg-ease);
}

.resto-canal-btn.mud-button-outlined:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--canal) 11%, #fff), color-mix(in srgb, var(--canal) 18%, #fff));
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 24px -12px var(--canal);
}

/* Dos filas y dos columnas: [contadores | botones] arriba, [salón | pedidos] abajo.
   · La columna del salón mide lo que mide el plano (max-content) y el panel se queda con el resto:
     sin hueco entre los dos. Si el plano no entra, se achica y se desplaza dentro de su caja.
   · El alto lo manda el plano: el panel se estira a esa fila pero su contenido va posicionado, así
     que no la agranda. Por muchos pedidos que haya, las mesas no se corren y cada columna scrollea. */
.resto-salon__cuerpo {
    display: grid;
    /* Sin plano (cuadrícula de mesas) las mesas llenan el ancho y el panel tiene ancho fijo. */
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 16px;
}

.resto-salon__cuerpo--plano {
    grid-template-columns: minmax(0, max-content) minmax(360px, 1fr);
}

.resto-salon__principal { min-width: 0; }

.resto-pedidos-panel {
    position: relative;
    min-height: 420px;
}

.resto-pedidos-panel__cols {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Cada columna es una bandeja: fondo apenas teñido del color del canal, bordes suaves. */
.resto-pedidos-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--jfg-r-lg, 20px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--canal) 7%, #fff) 0, #fdfdfc 160px);
    border: 1px solid color-mix(in srgb, var(--canal) 16%, rgba(15, 23, 42, .06));
    box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .3);
    overflow: hidden;
}

.resto-pedidos-col__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
}

.resto-pedidos-col__icono {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--canal) 80%, #fff), var(--canal));
    box-shadow: 0 6px 14px -6px var(--canal);
}

.resto-pedidos-col__titulo {
    font-weight: 750;
    font-size: 1rem;
    color: #1e293b;
    letter-spacing: -.01em;
}

.resto-pedidos-col__n {
    margin-left: auto;
    min-width: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--canal) 14%, #fff);
    color: color-mix(in srgb, var(--canal) 85%, #000);
    text-align: center;
    font-size: .8125rem;
    font-weight: 800;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
}

.resto-pedidos-col__lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 12px 12px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--canal) 30%, transparent) transparent;
    -webkit-overflow-scrolling: touch;
}

.resto-pedidos-col__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 28px;
    padding: 0 12px;
    text-align: center;
    color: #94a3b8;
    font-size: .875rem;
    font-weight: 600;
}

.resto-pedidos-col__vacio-icono {
    font-size: 2.4rem !important;
    color: color-mix(in srgb, var(--canal) 35%, #cbd5e1);
    margin-bottom: 4px;
}

.resto-pedidos-col__vacio-hint {
    font-size: .75rem;
    font-weight: 400;
    color: #a3adbb;
}

/* Tablet vertical y teléfono: no hay ancho para un panel al costado. Va arriba, cada canal en una
   fila que se desplaza de costado, y sólo si hay pedidos. Tampoco empuja las mesas más que una fila. */
@media (max-width: 1100px) {
    .resto-salon__cuerpo { grid-template-columns: minmax(0, 1fr); }

    /* Orden: contadores, botones, pedidos, salón. */
    .resto-salon__acciones { order: 1; }
    .resto-pedidos-panel   { order: 2; min-height: 0; }
    .resto-salon__principal { order: 3; }

    .resto-pedidos-panel__cols {
        position: static;
        grid-template-columns: minmax(0, 1fr);
    }

    .resto-salon__cuerpo--sin-pedidos .resto-pedidos-panel { display: none; }

    .resto-pedidos-col__lista {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .resto-pedidos-col__lista .resto-pedido { flex: 0 0 210px; }
    .resto-pedidos-col__vacio { margin: 8px auto; }
}

/* La tarjeta del pedido: número y espera arriba, el nombre grande, lo que falta y el total abajo. */
.resto-pedido {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 14px 12px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 18px -14px rgba(15, 23, 42, .35);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    overflow: hidden;
    transition: transform var(--jfg-dur) var(--jfg-ease), box-shadow var(--jfg-dur) var(--jfg-ease);
}

/* El acento del canal, como una cinta a la izquierda. */
.resto-pedido::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--canal);
}

.resto-pedido:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 28px -16px rgba(15, 23, 42, .4);
}

.resto-pedido:active { transform: scale(.985); }

.resto-pedido__arriba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.resto-pedido__num {
    font-size: .8125rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--canal) 85%, #000);
    font-variant-numeric: tabular-nums;
}

.resto-pedido__tiempo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.resto-pedido__tiempo .mud-icon-root { font-size: .9rem; }
.resto-pedido__tiempo--atento { background: #fef3c7; color: #b45309; }
.resto-pedido__tiempo--tarde  { background: #fee2e2; color: #b91c1c; }

.resto-pedido__nombre {
    font-weight: 750;
    font-size: 1.05rem;
    color: #0f172a;
    letter-spacing: -.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resto-pedido__pie {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    font-size: .8125rem;
}

.resto-pedido__total {
    margin-left: auto;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.resto-pedido__nota { color: #94a3b8; }
.resto-pedido__nota--alerta { color: #b45309; font-weight: 700; }

.resto-salon__zona {
    margin: 20px 0 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    font-weight: 700;
}

/* Rejilla fluida: las mesas se acomodan solas al ancho, sin media queries por dispositivo. */
.resto-salon__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

/* ── Mesa ────────────────────────────────────────────────────────────────── */

.resto-mesa {
    /* 104px de alto: objetivo cómodo para el dedo, incluso apurado. */
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 14px 12px 16px;
    border-radius: 16px;
    /* Misma idea que el plano: superficie serena, el estado como acento y un tinte apenas visible. */
    background: linear-gradient(160deg, #fff 40%, color-mix(in srgb, var(--estado) 6%, #fff));
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: inset 4px 0 0 var(--estado), 0 1px 2px rgba(15, 23, 42, .04),
                0 10px 22px -16px rgba(15, 23, 42, .35);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: box-shadow var(--jfg-dur) var(--jfg-ease), transform var(--jfg-dur) var(--jfg-ease);
}

.resto-mesa:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: inset 4px 0 0 var(--estado), 0 2px 4px rgba(15, 23, 42, .05),
                0 16px 28px -16px rgba(15, 23, 42, .4);
}

.resto-mesa:active:not(:disabled) {
    transform: scale(.98);
}

.resto-mesa:focus-visible {
    outline: 3px solid var(--estado);
    outline-offset: 2px;
}

.resto-mesa--off {
    opacity: .55;
    cursor: not-allowed;
    background: #f1f5f9;
}

.resto-mesa__estado {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--estado);
}

.resto-mesa__nombre {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.resto-mesa__cap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
    color: #64748b;
}

.resto-mesa__pie {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.resto-mesa__tiempo {
    font-size: .75rem;
    color: #64748b;
}

.resto-mesa__total {
    font-size: .9375rem;
    font-weight: 700;
    color: #0f172a;
}

/* ── Estados vacíos / error ──────────────────────────────────────────────── */

.resto-salon__centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
}

.resto-salon__aviso {
    max-width: 460px;
}

/* ── Login con Google ────────────────────────────────────────────────────── */

/* Separador "o" entre el ingreso con contraseña y el de Google. Se dibuja con
   pseudo-elementos y no con MudDivider dentro de un flex, que se desborda. */
.resto-login__sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: #94a3b8;
    font-size: .8125rem;
}

.resto-login__sep::before,
.resto-login__sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.resto-login__google {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* Cubre la pantalla mientras Google valida o el API provisiona la cuenta:
   el proceso puede tardar y no hay que dejar tocar el formulario mientras tanto. */
.resto-login__overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(15 23 42 / .92);
}

/* ── Administración ──────────────────────────────────────────────────────── */

.resto-admin__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.resto-admin__card {
    padding: 18px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: box-shadow .15s, transform .08s;
}

.resto-admin__card:hover {
    box-shadow: 0 4px 14px rgb(15 23 42 / .10);
}

.resto-admin__card:active {
    transform: scale(.99);
}

/* Módulo sin backend todavía: se ve, pero no invita a tocarlo. */
.resto-admin__card--pendiente {
    cursor: default;
    background: #f8fafc;
    opacity: .8;
}

.resto-admin__card--pendiente:hover {
    box-shadow: none;
}


/* ═══ Administración de salones y mesas (/admin/salones) ═══════════════════════
   Construida sobre los tokens del design system (jfg-ds.css): sin colores propios,
   así el día que cambie la paleta esta pantalla cambia con ella. */

.salones {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Resumen: lo que hay montado, de un vistazo ───────────────────────────── */

.salones__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.salones__stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r);
    box-shadow: var(--jfg-sh-xs);
}

.salones__stat-icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--jfg-r-sm);
    background: var(--jfg-accent-soft);
    color: var(--jfg-accent-strong);
}

.salones__stat-n {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--jfg-text);
}

.salones__stat-t {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--jfg-text-3);
}

/* ── Tarjeta de salón ─────────────────────────────────────────────────────── */

.salon {
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-lg);
    box-shadow: var(--jfg-sh-xs);
    overflow: hidden;
    transition: box-shadow var(--jfg-dur) var(--jfg-ease);
}

.salon:hover {
    box-shadow: var(--jfg-sh);
}

/* Salón fuera de servicio: sigue visible pero deja de pedir atención. */
.salon--off {
    background: var(--jfg-bg);
    border-style: dashed;
}

.salon__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.salon__id {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.salon__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--jfg-text);
}

.salon__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.salon__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--jfg-r-pill);
    background: var(--jfg-surface-2);
    color: var(--jfg-text-2);
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.salon__pill--alerta {
    background: rgb(245 158 11 / .12);
    color: #92400E;
}

.salon__pill--off {
    background: rgb(100 116 139 / .14);
    color: var(--jfg-text-2);
}

.salon__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ── Mesas: cuadrícula de fichas ──────────────────────────────────────────── */

.salon__mesas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

.salon__aviso {
    padding: 0 18px 18px;
}

.mesa-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1 / 1;
    padding: 8px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r);
    color: var(--jfg-text);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                box-shadow  var(--jfg-dur) var(--jfg-ease),
                transform   var(--jfg-dur) var(--jfg-ease);
}

.mesa-tile:hover {
    border-color: var(--jfg-accent);
    box-shadow: 0 0 0 4px var(--jfg-ring);
    transform: translateY(-2px);
}

.mesa-tile:active {
    transform: translateY(0) scale(.98);
}

.mesa-tile:focus-visible {
    outline: none;
    border-color: var(--jfg-accent);
    box-shadow: 0 0 0 4px var(--jfg-ring);
}

.mesa-tile__n {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mesa-tile__cap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .74rem;
    font-weight: 500;
    color: var(--jfg-text-3);
}

/* Fuera de servicio: rayada, para que se distinga de un vistazo sin leer nada. */
.mesa-tile--off {
    color: var(--jfg-text-4);
    border-style: dashed;
    background:
        repeating-linear-gradient(45deg,
            var(--jfg-surface-2) 0 7px,
            transparent 7px 14px);
}

.mesa-tile--off .mesa-tile__cap {
    color: var(--jfg-text-4);
}

/* La ficha de agregar: presente pero sin competir con las mesas reales. */
.mesa-tile--add {
    border-style: dashed;
    border-color: var(--jfg-border-2);
    background: transparent;
    color: var(--jfg-text-3);
}

.mesa-tile--add:hover {
    color: var(--jfg-accent-strong);
    background: var(--jfg-accent-soft);
}

/* ── Estado vacío ─────────────────────────────────────────────────────────── */

.salones__vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 56px 24px;
    background: var(--jfg-surface);
    border: 1px dashed var(--jfg-border-2);
    border-radius: var(--jfg-r-lg);
}

.salones__vacio-icono {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: var(--jfg-r-lg);
    background: var(--jfg-accent-soft);
    color: var(--jfg-accent-strong);
}

.salones__vacio-texto {
    max-width: 46ch;
    color: var(--jfg-text-3);
}

/* ── Diálogos ─────────────────────────────────────────────────────────────── */

.salones__form-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

@media (max-width: 600px) {
    .salon__head {
        align-items: flex-start;
    }

    .salon__acciones {
        width: 100%;
    }

    .salon__mesas {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 10px;
    }
}

/* ═══ Plano del salón ══════════════════════════════════════════════════════════
   Lo comparten el editor y el mapa del salonero: el local se ve igual acomodándolo
   que trabajándolo. El lienzo mide en unidades del plano y el zoom es sólo escala. */

.plano {
    /* Estilo por defecto: el «clásico». Los demás (más abajo) sólo cambian estas variables. */
    --piso-color: #e9dcc5;
    --piso-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='72'%3E%3Crect width='360' height='72' fill='%23e9dcc5'/%3E%3Crect y='0' width='360' height='24' fill='%23eadfc9'/%3E%3Crect y='24' width='360' height='24' fill='%23e6d7bd'/%3E%3Crect y='48' width='360' height='24' fill='%23ecdfc8'/%3E%3Cpath d='M0 23.5H360M0 47.5H360M0 71.5H360' stroke='%23cfbb98' stroke-width='1'/%3E%3Cpath d='M120.5 0V24M300.5 0V24M40.5 24V48M220.5 24V48M160.5 48V72M330.5 48V72' stroke='%23cdb892' stroke-width='1'/%3E%3Cpath d='M8 9C60 6 90 12 118 9M130 15C190 12 240 18 298 14M50 34C100 31 150 37 218 33M230 40C270 37 320 43 358 39M12 58C60 55 110 61 158 58M170 64C220 61 280 67 328 63' fill='none' stroke='%23d9c6a4' stroke-width='.8' opacity='.7'/%3E%3C/svg%3E");
    --piso-tam: 360px 72px;
    --piso-luz: radial-gradient(ellipse 75% 65% at 50% 38%, rgba(255, 250, 240, .55), transparent 72%);
    --pared: #4a423b;
    --sombra-int: rgba(74, 52, 30, .18);
    --grilla: rgba(74, 52, 30, .09);
    --rotulo: rgba(74, 52, 30, .55);

    --madera-a: #9a6a45;
    --madera-b: #6e4629;
    --madera-borde: #5a3820;
    --madera-brillo: rgba(255, 228, 190, .45);
    --veta: rgba(60, 34, 16, .12);
    --mesa-sombra: rgba(40, 24, 10, .5);

    --tapiz: #9c8a78;
    --tapiz-2: #b9a896;
    --respaldo: #4a3c31;
    --respaldo-2: #5a4a3d;

    --placa-bg: rgba(255, 251, 244, .93);
    --placa-texto: #2b1d12;
    --placa-sub: #8a7766;

    position: relative;
    transform-origin: top left;
    border-radius: 18px;
    /* El piso, una luz que cae del centro y alrededor la pared: se lee como un local, no como una hoja. */
    background-color: var(--piso-color);
    background-image: var(--piso-luz), var(--piso-img);
    background-size: 100% 100%, var(--piso-tam);
    border: 10px solid var(--pared);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .2),
        inset 0 0 50px var(--sombra-int),
        0 24px 50px -28px rgba(15, 23, 42, .45);
    flex: none;
    box-sizing: content-box;
    transition: background-color .3s ease, border-color .3s ease;
}

/* En el editor, una cuadrícula tenue encima del piso para acomodar; en el salón no hace falta. */
.plano--editor::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grilla) 1px, transparent 1px),
        linear-gradient(90deg, var(--grilla) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 8px;
    z-index: 0;
}

/* ── Mesas ─────────────────────────────────────────────────────────────────────
   La mesa es dos capas: las sillas tapizadas alrededor y encima el sobre de nogal con su veta. El
   nombre y el consumo van en una placa clara. El estado es un halo de color alrededor del sobre: lo
   libre queda sereno y la vista va sola a lo que pide atención —ocupadas y por cobrar—. */

.plano-mesa {
    position: absolute;
    overflow: visible;
    color: var(--jfg-text);
    text-align: center;
    --estado: #10B981;
    --halo: transparent;
    --anillo: rgba(255, 255, 255, .0);
    transition: transform var(--jfg-dur) var(--jfg-ease);
}

.plano-mesa__tabla {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 6px;
    border-radius: inherit;
    overflow: hidden;
    /* Sobre de nogal: brillo arriba a la izquierda, anillos de veta y el tono de la madera. */
    background:
        radial-gradient(circle at 30% 24%, var(--madera-brillo), transparent 55%),
        repeating-radial-gradient(circle at 55% 60%, transparent 0 7px, var(--veta) 7px 8px),
        linear-gradient(145deg, var(--madera-a), var(--madera-b));
    border: 2px solid var(--madera-borde);
    box-shadow:
        0 0 0 4px var(--anillo),
        0 0 0 10px var(--halo),
        0 3px 4px rgba(40, 24, 10, .25),
        0 14px 24px -10px var(--mesa-sombra),
        inset 0 2px 0 rgba(255, 255, 255, .25),
        inset 0 -3px 6px rgba(0, 0, 0, .18);
    transition: box-shadow var(--jfg-dur) var(--jfg-ease), transform var(--jfg-dur) var(--jfg-ease);
}

/* Las mesas cuadradas y rectangulares con la veta a lo largo, como una tabla. */
.plano-mesa--cuadrada .plano-mesa__tabla,
.plano-mesa--rect .plano-mesa__tabla {
    background:
        linear-gradient(160deg, var(--madera-brillo), transparent 50%),
        repeating-linear-gradient(90deg, transparent 0 9px, var(--veta) 9px 10px, transparent 10px 17px),
        linear-gradient(145deg, var(--madera-a), var(--madera-b));
}

.plano-mesa__placa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 100%;
    padding: 4px 9px 5px;
    border-radius: 10px;
    background: var(--placa-bg);
    box-shadow: 0 2px 6px rgba(40, 24, 10, .3), inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Silla tapizada vista desde arriba: el respaldo del lado de afuera y el asiento hacia la mesa. */
.plano-silla {
    position: absolute;
    z-index: 0;
    border-radius: 9px 9px 7px 7px;
    background:
        linear-gradient(180deg, var(--respaldo) 0, var(--respaldo-2) 30%, rgba(0, 0, 0, .25) 30%, transparent 36%),
        radial-gradient(ellipse at 50% 72%, var(--tapiz-2), var(--tapiz));
    box-shadow: 0 2px 3px rgba(30, 18, 8, .35), inset 0 0 0 1px rgba(60, 40, 25, .25);
    pointer-events: none;
    transition: background var(--jfg-dur) var(--jfg-ease);
}

.plano-mesa--redonda  { border-radius: 50%; }
.plano-mesa--cuadrada { border-radius: 12px; }
.plano-mesa--rect     { border-radius: 12px; }

.plano-mesa--libre     { --estado: #10B981; }
.plano-mesa--ocupada   { --estado: #F59E0B; --anillo: #F59E0B; --halo: rgba(245, 158, 11, .28); }
.plano-mesa--porcobrar { --estado: #3B82F6; --anillo: #3B82F6; --halo: rgba(59, 130, 246, .28); }

/* La placa lleva el color del estado en un punto, así lo libre también se distingue. */
.plano-mesa__nombre::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 5px 1px 0;
    border-radius: 50%;
    background: var(--estado);
    vertical-align: middle;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--estado) 22%, transparent);
}

/* En el mapa se puede tocar: la mesa se levanta un poco bajo el dedo o el mouse. */
.plano-mesa--unible { cursor: pointer; }
.plano-mesa--unible:hover .plano-mesa__tabla {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px var(--anillo),
        0 0 0 10px var(--halo),
        0 5px 8px rgba(40, 24, 10, .25),
        0 22px 32px -12px rgba(40, 24, 10, .55),
        inset 0 2px 0 rgba(255, 220, 180, .35),
        inset 0 -3px 6px rgba(0, 0, 0, .18);
}

/* Alguien está adentro de la mesa (otra pantalla anotando): violeta, con su nombre, y un halo que
   late para que se vea de lejos que no hay que entrar. */
.plano-mesa--en-uso { --estado: #7C3AED; --anillo: #7C3AED; --halo: rgba(124, 58, 237, .25); }
.plano-mesa--en-uso .plano-mesa__tabla { animation: mesa-en-uso 1.6s ease-in-out infinite; }
.plano-mesa__en-uso {
    display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 0 6px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; color: #fff; background: #7C3AED;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plano-mesa__en-uso .mud-icon-root { font-size: .85rem; }
.resto-mesa--en-uso { --estado: #7C3AED !important; animation: mesa-en-uso 1.6s ease-in-out infinite; }
@keyframes mesa-en-uso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}
@media (prefers-reduced-motion: reduce) { .plano-mesa--en-uso .plano-mesa__tabla, .resto-mesa--en-uso { animation: none; } }

/* Fuera de servicio: la madera apagada y las sillas grises. */
.plano-mesa--inactiva { --estado: #94a3b8; --tapiz: #a8a29e; --tapiz-2: #c4bfba; color: var(--jfg-text-4); }
.plano-mesa--inactiva .plano-mesa__tabla { filter: grayscale(.85) brightness(1.15); opacity: .8; }

.plano-mesa__nombre {
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--placa-texto);
}

.plano-mesa__cap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .66rem;
    color: var(--placa-sub);
}

.plano-mesa__cap .mud-icon-root { font-size: .78rem; }

/* Con gente sentada lo que importa es cuánto va y desde cuándo; la capacidad ya la dicen las sillas. */
.plano-mesa--ocupada .plano-mesa__cap,
.plano-mesa--porcobrar .plano-mesa__cap { display: none; }

.plano-mesa__pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    font-size: .66rem;
    color: var(--placa-sub);
}

.plano-mesa__total {
    font-size: .8rem;
    font-weight: 800;
    color: var(--placa-texto);
    font-variant-numeric: tabular-nums;
}

/* ── Objetos del local ─────────────────────────────────────────────────────────
   Cada objeto es una ilustración cenital (ObjetoSalonArte), sin caja alrededor: se apoya en el piso
   con su propia sombra. El rótulo, si lo tiene, va en una placa encima. */

.plano-objeto {
    position: absolute;
    display: grid;
    place-items: center;
    color: #5b4636;
    text-align: center;
    overflow: visible;
    z-index: 1;
    filter: drop-shadow(0 6px 8px rgba(40, 24, 10, .28));
}

.plano-arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.plano-objeto__icono { opacity: .8; }

.plano-objeto__etiqueta {
    position: relative;
    z-index: 1;
    align-self: end;
    margin-bottom: 5px;
    max-width: 92%;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 251, 244, .92);
    box-shadow: 0 1px 4px rgba(40, 24, 10, .25);
    font-size: .68rem;
    font-weight: 700;
    color: #4a3a2c;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rótulo suelto (un sector, «Terraza»): letras pintadas en el piso. */
.plano-objeto--texto { filter: none; }
.plano-objeto__texto {
    font-size: .85rem;
    font-weight: 800;
    color: var(--rotulo);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ═══ Estilos del plano ══════════════════════════════════════════════════════════
   Cada negocio elige el que se parece a su local (y cada salón el suyo: interior y terraza). Sólo
   cambian variables: piso, pared, madera de las mesas, tapiz de las sillas y la placa del nombre. */

/* Nocturno — lounge, bar, cena: pizarra oscura, luz cálida, mesas oscuras con filo dorado. */
.plano--estilo-nocturno {
    --piso-color: #2a2623;
    --piso-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Crect%20width='120'%20height='120'%20fill='%231d1a18'/%3E%3Crect%20x='1'%20y='1'%20width='58'%20height='58'%20fill='%232c2825'/%3E%3Crect%20x='61'%20y='1'%20width='58'%20height='58'%20fill='%23312c28'/%3E%3Crect%20x='1'%20y='61'%20width='58'%20height='58'%20fill='%232f2a27'/%3E%3Crect%20x='61'%20y='61'%20width='58'%20height='58'%20fill='%232a2623'/%3E%3Cpath%20d='M5%2020C20%2016%2035%2026%2055%2018M66%2040C80%2036%2096%2046%20114%2038M8%2090C24%2086%2038%2096%2054%2088M70%20104C84%20100%20100%20110%20116%20102'%20fill='none'%20stroke='%233a3531'%20stroke-width='1'%20opacity='.7'/%3E%3C/svg%3E");
    --piso-tam: 120px 120px;
    --piso-luz: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 170, 80, .16), transparent 70%);
    --pared: #0f0d0c;
    --sombra-int: rgba(0, 0, 0, .55);
    --grilla: rgba(255, 255, 255, .06);
    --rotulo: rgba(245, 225, 190, .4);
    --madera-a: #4a3324;
    --madera-b: #1f150e;
    --madera-borde: #c9a15a;
    --madera-brillo: rgba(255, 200, 140, .2);
    --veta: rgba(0, 0, 0, .28);
    --mesa-sombra: rgba(0, 0, 0, .75);
    --tapiz: #4a4440;
    --tapiz-2: #625a54;
    --respaldo: #1a1715;
    --respaldo-2: #26221f;
    --placa-bg: rgba(22, 18, 15, .88);
    --placa-texto: #f6e7c8;
    --placa-sub: #b8a585;
}

/* Mármol — fino, café de especialidad: piso de mármol, mesas de mármol con filo dorado, terciopelo salvia. */
.plano--estilo-marmol {
    --piso-color: #f3f0ec;
    --piso-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Crect%20width='160'%20height='160'%20fill='%23e4e0d9'/%3E%3Crect%20x='1'%20y='1'%20width='78'%20height='78'%20fill='%23f6f4f0'/%3E%3Crect%20x='81'%20y='1'%20width='78'%20height='78'%20fill='%23f2efea'/%3E%3Crect%20x='1'%20y='81'%20width='78'%20height='78'%20fill='%23f3f0ec'/%3E%3Crect%20x='81'%20y='81'%20width='78'%20height='78'%20fill='%23f7f5f1'/%3E%3Cpath%20d='M4%2030C20%2024%2030%2044%2050%2036S70%2018%2078%2022M84%2060C100%2050%20120%2070%20140%2058S156%2064%20158%2066M6%20120C24%20110%2040%20132%2060%20122M86%20140C104%20128%20124%20150%20156%20136'%20fill='none'%20stroke='%23cfc9bf'%20stroke-width='1.2'%20opacity='.8'/%3E%3Cpath%20d='M10%2050C30%2046%2044%2058%2070%2052M96%20100C112%2096%20130%20108%20150%20102'%20fill='none'%20stroke='%23ddd8cf'%20stroke-width='.8'/%3E%3C/svg%3E");
    --piso-tam: 160px 160px;
    --piso-luz: radial-gradient(ellipse 75% 65% at 50% 38%, rgba(255, 255, 255, .6), transparent 72%);
    --pared: #3a3632;
    --sombra-int: rgba(60, 50, 40, .1);
    --grilla: rgba(0, 0, 0, .06);
    --rotulo: rgba(80, 70, 60, .4);
    --madera-a: #fbfaf7;
    --madera-b: #e3ded4;
    --madera-borde: #c8a96a;
    --madera-brillo: rgba(255, 255, 255, .85);
    --veta: rgba(150, 140, 125, .1);
    --mesa-sombra: rgba(60, 50, 40, .35);
    --tapiz: #7f977f;
    --tapiz-2: #a3b8a1;
    --respaldo: #56695a;
    --respaldo-2: #647a67;
    --placa-bg: rgba(255, 255, 255, .92);
    --placa-texto: #2d2a26;
    --placa-sub: #8c857b;
}

/* Industrial — cervecería, hamburguesería: cemento pulido, mesas negras mate, cuero coñac. */
.plano--estilo-industrial {
    --piso-color: #a9a6a1;
    --piso-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Crect%20width='200'%20height='200'%20fill='%23a9a6a1'/%3E%3Ccircle%20cx='40'%20cy='50'%20r='46'%20fill='%23b4b1ac'%20opacity='.55'/%3E%3Ccircle%20cx='150'%20cy='140'%20r='60'%20fill='%239f9c97'%20opacity='.45'/%3E%3Ccircle%20cx='140'%20cy='30'%20r='28'%20fill='%23b8b5b0'%20opacity='.4'/%3E%3Ccircle%20cx='60'%20cy='160'%20r='34'%20fill='%23a19e99'%20opacity='.5'/%3E%3Cpath%20d='M0%20.5H200M.5%200V200'%20stroke='%238e8b86'%20stroke-width='1.2'/%3E%3C/svg%3E");
    --piso-tam: 200px 200px;
    --piso-luz: radial-gradient(ellipse 75% 65% at 50% 38%, rgba(255, 255, 255, .25), transparent 72%);
    --pared: #3b2f2a;
    --sombra-int: rgba(0, 0, 0, .22);
    --grilla: rgba(0, 0, 0, .08);
    --rotulo: rgba(40, 40, 40, .45);
    --madera-a: #3a3a3a;
    --madera-b: #1b1b1b;
    --madera-borde: #6f6f6f;
    --madera-brillo: rgba(255, 255, 255, .14);
    --veta: rgba(255, 255, 255, .03);
    --mesa-sombra: rgba(0, 0, 0, .55);
    --tapiz: #9a5a2c;
    --tapiz-2: #b87440;
    --respaldo: #5e3418;
    --respaldo-2: #6e3e1d;
    --placa-bg: rgba(250, 248, 245, .93);
    --placa-texto: #1f1f1f;
    --placa-sub: #6f6f6f;
}

/* Terraza — playa, jardín: deck de teca, seto verde alrededor, madera blanqueada y turquesa. */
.plano--estilo-terraza {
    --piso-color: #bb8f5e;
    --piso-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='40'%3E%3Crect%20width='300'%20height='40'%20fill='%236e4c2c'/%3E%3Crect%20y='0'%20width='300'%20height='18'%20fill='%23c49a69'/%3E%3Crect%20y='20'%20width='300'%20height='18'%20fill='%23bb8f5e'/%3E%3Cpath%20d='M180.5%200V18M60.5%2020V38'%20stroke='%236e4c2c'%20stroke-width='1.5'/%3E%3Cpath%20d='M6%208C60%205%20110%2011%20175%207M190%2012C230%209%20270%2014%20298%2011M10%2029C40%2026%2050%2032%2056%2029M70%2026C140%2023%20220%2031%20296%2027'%20fill='none'%20stroke='%23a97e50'%20stroke-width='.8'%20opacity='.8'/%3E%3Ccircle%20cx='10'%20cy='9'%20r='1'%20fill='%235a3d22'/%3E%3Ccircle%20cx='170'%20cy='9'%20r='1'%20fill='%235a3d22'/%3E%3Ccircle%20cx='70'%20cy='29'%20r='1'%20fill='%235a3d22'/%3E%3Ccircle%20cx='290'%20cy='29'%20r='1'%20fill='%235a3d22'/%3E%3C/svg%3E");
    --piso-tam: 300px 40px;
    --piso-luz: radial-gradient(ellipse 80% 70% at 40% 30%, rgba(255, 245, 210, .35), transparent 72%);
    --pared: #587a45;
    --sombra-int: rgba(40, 60, 20, .25);
    --grilla: rgba(60, 40, 20, .1);
    --rotulo: rgba(70, 45, 20, .55);
    --madera-a: #f1eadc;
    --madera-b: #d8cbb1;
    --madera-borde: #b8a27d;
    --madera-brillo: rgba(255, 255, 255, .6);
    --veta: rgba(120, 95, 60, .12);
    --mesa-sombra: rgba(60, 40, 20, .45);
    --tapiz: #3fa7a2;
    --tapiz-2: #6cc4bf;
    --respaldo: #2a7d79;
    --respaldo-2: #318f8a;
    --placa-bg: rgba(255, 255, 255, .93);
    --placa-texto: #2b2b2b;
    --placa-sub: #7d7466;
}

/* ── Editor: lo movible y lo seleccionado ──────────────────────────────────── */

.plano-mesa--movible,
.plano-objeto--movible {
    cursor: grab;
    /* Sin esto, arrastrar con el dedo hace scroll de la página en vez de mover la mesa. */
    touch-action: none;
    user-select: none;
}

.plano-mesa--movible:active,
.plano-objeto--movible:active {
    cursor: grabbing;
}

.plano-mesa--movible:hover,
.plano-objeto--movible:hover {
    box-shadow: 0 0 0 3px var(--jfg-ring);
}

.plano--sel {
    box-shadow: 0 0 0 3px var(--jfg-accent), var(--jfg-sh) !important;
    z-index: 5;
}

/* ── Pantalla del editor ───────────────────────────────────────────────────── */

.editor {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: start;
}

.editor__paleta {
    position: sticky;
    top: 12px;
    padding: 16px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-lg);
    box-shadow: var(--jfg-sh-xs);
}

.editor__paleta-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--jfg-text-3);
}

.editor__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--jfg-r-pill);
    background: var(--jfg-accent-soft-2);
    color: var(--jfg-accent-strong);
    font-size: .7rem;
}

/* Estilos del local: cada tarjeta muestra su piso, una mesa y dos sillas en miniatura. */
.editor__estilos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.editor__estilo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 6px 8px;
    border-radius: 12px;
    border: 1.5px solid var(--jfg-border);
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color var(--jfg-dur) var(--jfg-ease), box-shadow var(--jfg-dur) var(--jfg-ease),
                transform var(--jfg-dur) var(--jfg-ease);
}

.editor__estilo:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -10px rgba(15, 23, 42, .35); }

.editor__estilo--on {
    border-color: var(--jfg-accent);
    box-shadow: 0 0 0 3px var(--jfg-ring);
}

.editor__estilo-muestra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 44px;
    border-radius: 8px;
    background: var(--piso);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12);
    margin-bottom: 4px;
}

.editor__estilo-mesa {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .35), transparent 60%), var(--mesa);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 0 0 1.5px rgba(0, 0, 0, .15);
}

.editor__estilo-silla {
    width: 8px;
    height: 14px;
    border-radius: 3px;
    background: var(--silla);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.editor__estilo-nombre {
    font-size: .8rem;
    font-weight: 700;
    color: var(--jfg-text);
    padding: 0 2px;
}

.editor__estilo-para {
    font-size: .66rem;
    color: var(--jfg-text-3);
    line-height: 1.25;
    padding: 0 2px;
}

.editor__paleta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 6px;
}

.editor__chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    background: var(--jfg-surface);
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                background   var(--jfg-dur) var(--jfg-ease);
}

.editor__chip:hover {
    border-color: var(--jfg-accent);
    background: var(--jfg-accent-soft);
    color: var(--jfg-accent-strong);
}

.editor__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.editor__area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.editor__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r);
}

.editor__barra-grupo {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor__zoom {
    min-width: 44px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--jfg-text-2);
}

.editor__medida { width: 96px; }

/* El lienzo puede ser más grande que la pantalla: se recorre con scroll, como cualquier plano. */
.editor__lienzo {
    overflow: auto;
    padding: 16px;
    background: var(--jfg-bg);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-lg);
    max-height: calc(100vh - 240px);
    min-height: 420px;
}

@media (max-width: 900px) {
    .editor {
        grid-template-columns: 1fr;
    }

    .editor__paleta {
        position: static;
    }
}

/* ═══ Menú (/admin/menu) ═══════════════════════════════════════════════════════ */

.menu-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.menu-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.menu-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.menu-filtros__buscar { flex: 1 1 260px; }
.menu-filtros__cat    { flex: 0 1 220px; }

/* ── Fichas de plato y de estación ─────────────────────────────────────────── */

.menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r);
    color: var(--jfg-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                box-shadow   var(--jfg-dur) var(--jfg-ease);
}

.menu-item:hover {
    border-color: var(--jfg-accent);
    box-shadow: 0 0 0 3px var(--jfg-ring);
}

/* Producto que todavía no está en la carta: se ve, pero no compite con los que sí. */
.menu-item--fuera {
    background: var(--jfg-bg);
    border-style: dashed;
}

.menu-item__cuerpo { min-width: 0; }

.menu-item__nombre {
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: .78rem;
    color: var(--jfg-text-3);
}

.menu-item__precio {
    font-weight: 600;
    color: var(--jfg-text-2);
}

.menu-item__estado {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    color: var(--jfg-text-3);
}

/* ── Opciones de un grupo de modificadores ─────────────────────────────────── */

.menu-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 18px;
}

.menu-opcion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-pill);
    color: var(--jfg-text);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease);
}

.menu-opcion:hover { border-color: var(--jfg-accent); }

.menu-opcion--off {
    color: var(--jfg-text-4);
    border-style: dashed;
}

.menu-opcion--add {
    border-style: dashed;
    color: var(--jfg-text-3);
}

/* En la ficha del plato los modificadores se muestran, no se editan. */
.menu-opcion--chip { cursor: default; }
.menu-opcion--chip:hover { border-color: var(--jfg-border); }

/* El signo delante de la opción dice de un vistazo si suma, quita o sólo instruye. */
.menu-opcion__tipo {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tono) 15%, transparent);
    color: var(--tono);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1;
}

.menu-opcion__precio {
    font-weight: 600;
    color: var(--jfg-text-2);
}

/* ── Modificadores efectivos dentro de la ficha del plato ──────────────────── */

.menu-mod-efectivo {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--jfg-surface-2);
    border-radius: var(--jfg-r-sm);
}

.menu-mod-efectivo__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 600;
}

.menu-mod-efectivo__opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Selector de categorías ────────────────────────────────────────────────── */

.menu-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.menu-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                background   var(--jfg-dur) var(--jfg-ease);
}

.menu-cat:hover { border-color: var(--jfg-accent); }

.menu-cat--on {
    background: var(--jfg-accent-soft);
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
    font-weight: 600;
}

.menu-pill--cat {
    background: var(--jfg-accent-soft);
    color: var(--jfg-accent-strong);
}

.menu-tabs { margin-top: 4px; }

/* ── Cómo trabaja la cocina ────────────────────────────────────────────────── */

.menu-modo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 0 18px;
}

.menu-modo__op {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r);
    color: var(--jfg-text-2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                background   var(--jfg-dur) var(--jfg-ease);
}

.menu-modo__op:hover { border-color: var(--jfg-accent); }

.menu-modo__op--on {
    background: var(--jfg-accent-soft);
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

.menu-modo__t { font-weight: 700; }

.menu-modo__d {
    font-size: .78rem;
    color: var(--jfg-text-3);
}

.menu-modo__op--on .menu-modo__d { color: var(--jfg-accent-strong); }

.menu-servicio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px 18px;
}

/* Plantillas de grupo: los arranques típicos de un restaurante. */
.menu-plantillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

/* Secciones de la carta: se ven de un vistazo y se editan de un clic. */
.menu-secciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ═══ Carta por secciones ══════════════════════════════════════════════════════
   La carta se muestra como se lee: cada sección con su encabezado y sus platos
   dentro. Así la sección deja de ser un dato escondido y pasa a ser la estructura. */

.carta {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.carta__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.carta__buscar {
    flex: 1 1 280px;
    max-width: 420px;
}

.carta-sec {
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-lg);
    box-shadow: var(--jfg-sh-xs);
    overflow: hidden;
}

.carta-sec--off {
    background: var(--jfg-bg);
    border-style: dashed;
}

/* Los dos bloques del final no son secciones de la carta: se ven distintos a propósito. */
.carta-sec--aviso {
    border-color: var(--jfg-warning);
    background: rgb(245 158 11 / .04);
}

.carta-sec--fuera {
    background: var(--jfg-bg);
    box-shadow: none;
}

.carta-sec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
}

.carta-sec__id {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.carta-sec__nombre {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--jfg-text);
}

.carta-sec .menu-items {
    padding: 0 18px 18px;
}

.carta-sec__vacia {
    padding: 0 18px 18px;
    font-size: .85rem;
    color: var(--jfg-text-3);
}

/* ── Ficha del plato: compacta, sin aire de más ────────────────────────────── */

.ficha {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ficha__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

/* Los dos tipos en fila: es una elección, no un formulario. */
.ficha__tipo {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

/* El CABYS es una línea informativa: sólo se abre el buscador si hay que cambiarlo. */
.ficha__cabys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--jfg-surface-2);
    border-radius: var(--jfg-r-sm);
    font-size: .82rem;
    color: var(--jfg-text-2);
}

.ficha__mods {
    padding-top: 4px;
    border-top: 1px solid var(--jfg-border);
}

.ficha__mods-titulo {
    display: flex;
    gap: 6px;
    margin: 8px 0;
    font-size: .82rem;
    font-weight: 600;
}

/* Mesa pegada a otra: la cuenta la lleva la principal, acá sólo se indica con cuál va. */
.plano-mesa__unida {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .68rem;
    opacity: .85;
}

/* ── Comanda de cocina ─────────────────────────────────────────────────────────
   Se lee de lejos, con vapor y con prisa: nada de precios, todo grande. El papel base
   (.tkt) es el compartido de SharedAdmin. */

.tkt-cocina { font-size: 13px; }

.tkt-cocina__mesa {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
}

.tkt-cocina__alergias {
    margin-top: 8px;
    padding: 8px 10px;
    border: 2px solid #000;
    font-weight: 800;
    text-align: center;
}

.tkt-cocina__alergias-t { letter-spacing: .06em; }

.tkt-cocina__linea {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dotted #bbb;
}

.tkt-cocina__cant {
    min-width: 28px;
    font-size: 20px;
    font-weight: 800;
}

.tkt-cocina__plato {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.tkt-cocina__mod,
.tkt-cocina__nota {
    font-size: 13px;
    font-weight: 600;
}

.tkt-cocina__nota { font-style: italic; }

/* ── Cuántas personas se sientan ───────────────────────────────────────────────
   Botones grandes, no un campo numérico: se toca con el dedo y de una sola vez. */

.resto-personas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 8px;
}

.resto-personas__op {
    padding: 14px 0;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                background   var(--jfg-dur) var(--jfg-ease);
}

.resto-personas__op:hover { border-color: var(--jfg-accent); }

.resto-personas__op--on {
    background: var(--jfg-accent-soft);
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

/* ══ Comanda: donde el mesero toma el pedido ════════════════════════════════════

   Dos zonas fijas: la carta a la izquierda y el ticket a la derecha, sin scroll de página.
   El ticket no se mueve —el mesero mira ahí para cantar el pedido— y su pie con el total y la
   acción principal está siempre a la vista, incluso mientras se eligen líneas para cobrar. */

.comanda {
    display: grid;
    /* minmax(0, 1fr) y no 1fr: la columna de la carta no puede crecer al ancho de su contenido.
       La fila de secciones no envuelve (se desliza) y con muchas secciones estiraba la columna
       más allá de la pantalla: los platos quedaban en una sola fila y la cuenta, fuera de vista. */
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px);
    gap: 14px;
    height: calc(100vh - 72px);
    padding: 12px;
    overflow: hidden;
}

/* ── La carta ───────────────────────────────────────────────────────────────── */

.comanda__carta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 12px;
}

.comanda__barra {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comanda__volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text-2);
    cursor: pointer;
}

.comanda__volver:hover {
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

.comanda__buscar { flex: 1; }

/* Las secciones de la carta: una fila que se desliza, nunca dos renglones. */
.comanda__secciones {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.comanda__seccion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 16px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: 999px;
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--jfg-dur) var(--jfg-ease);
}

.comanda__seccion:hover { border-color: var(--jfg-accent); }

.comanda__seccion--on {
    background: var(--jfg-accent);
    border-color: var(--jfg-accent);
    color: #fff;
}

.comanda__seccion-n {
    padding: 1px 7px;
    background: rgba(0, 0, 0, .07);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
}

.comanda__seccion--on .comanda__seccion-n { background: rgba(255, 255, 255, .25); }

/* Salones como botones arriba: envuelven en varias filas si no caben, sin scroll horizontal. */
.resto-salon__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* Fichas grandes: se tocan con el dedo, cientos de veces por servicio. */
.comanda__platos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-content: start;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 4px 12px 2px;
}

.comanda-plato {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 104px;
    padding: 14px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-md);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--jfg-dur) var(--jfg-ease),
                box-shadow var(--jfg-dur) var(--jfg-ease),
                transform var(--jfg-dur) var(--jfg-ease);
}

/* Franja de color arriba: da con qué distinguir un plato de otro de un vistazo. */
.comanda-plato::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--acento, var(--jfg-accent));
    opacity: .85;
}

.comanda-plato:hover:not(:disabled) {
    border-color: var(--jfg-accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.comanda-plato:active:not(:disabled) { transform: translateY(0); }

.comanda-plato__nombre {
    font-size: .96rem;
    font-weight: 700;
    color: var(--jfg-text);
    line-height: 1.25;
}

.comanda-plato__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.comanda-plato__precio {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--jfg-text);
}

.comanda-plato__mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--jfg-accent-soft);
    border-radius: 50%;
    color: var(--jfg-accent-strong);
    font-size: .9rem;
    font-weight: 800;
}

.comanda-plato--off { opacity: .45; cursor: not-allowed; }

.comanda-plato__agotado {
    align-self: flex-start;
    padding: 2px 8px;
    background: #fee2e2;
    border-radius: 999px;
    color: #b91c1c;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Carta vacía: dice qué falta hacer, no se queda en blanco. */
.comanda__sin-platos {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--jfg-text-2);
    text-align: center;
}

/* ── El ticket ──────────────────────────────────────────────────────────────── */

.comanda__cuenta {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-md);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    overflow: hidden;
}

.comanda__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--jfg-border);
}

.comanda__mesa {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--jfg-text);
    line-height: 1.2;
}

.comanda__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 3px;
    font-size: .78rem;
    color: var(--jfg-text-2);
}

.comanda__meta-sep { opacity: .45; }

/* Encabezado de la cuenta en un solo renglón: «Mesa 1  #29 · 1 persona · 13 min». */
.comanda__head-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    min-width: 0;
}
.comanda__head-titulo .comanda__meta { margin-top: 0; }
.comanda__head { padding: 10px 14px 8px; }

.comanda__alergias {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 12px 0;
    padding: 9px 11px;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: var(--jfg-r-sm);
    color: #991b1b;
    font-size: .82rem;
    line-height: 1.35;
}

/* Las cuentas: con una sola, esta fila no se dibuja. */
.comanda__cuentas {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.comanda__cuenta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 12px;
    background: var(--jfg-surface-2);
    border: 1px solid var(--jfg-border);
    border-radius: 999px;
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.comanda__cuenta-chip:hover { border-color: var(--jfg-accent); }

.comanda__cuenta-chip--on {
    background: var(--jfg-accent-soft);
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

.comanda__cuenta-chip--pagada { opacity: .5; }

.comanda__cuenta-monto { font-weight: 800; }

/* Acciones sobre las líneas: con palabra, no sólo icono. */
.comanda__herramientas {
    display: flex;
    gap: 8px;
    padding: 10px 12px 0;
}

.comanda__lineas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 12px;
}

.comanda-linea {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 8px;
    border-radius: var(--jfg-r-sm);
    border-bottom: 1px solid var(--jfg-border);
    transition: background var(--jfg-dur) var(--jfg-ease);
}

.comanda-linea:last-child { border-bottom: 0; }

.comanda-linea--elegible { cursor: pointer; }
.comanda-linea--elegible:hover { background: var(--jfg-surface-2); }

.comanda-linea__check { padding-top: 2px; color: var(--jfg-accent); }

.comanda-linea__cant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--jfg-surface-2);
    border-radius: var(--jfg-r-sm);
    font-size: .9rem;
    font-weight: 800;
    color: var(--jfg-text);
}

/* Ajuste de cantidad con el dedo, antes de enviar a la cocina. */
.comanda-linea__stepper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    overflow: hidden;
    background: var(--jfg-surface);
}
.comanda-linea__paso {
    width: 32px;
    height: 32px;
    border: 0;
    background: var(--jfg-surface-2);
    color: var(--jfg-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.comanda-linea__paso:active { background: var(--jfg-accent); color: #fff; }
.comanda-linea__cant-n {
    min-width: 30px;
    text-align: center;
    font-size: .9rem;
    font-weight: 800;
    color: var(--jfg-text);
}

.comanda-linea__cuerpo { flex: 1; min-width: 0; }

.comanda-linea__nombre {
    font-size: .9rem;
    font-weight: 700;
    color: var(--jfg-text);
    line-height: 1.3;
}

.comanda-linea__mods,
.comanda-linea__nota {
    font-size: .77rem;
    color: var(--jfg-text-2);
    line-height: 1.35;
}

.comanda-linea__nota { font-style: italic; }

.comanda-linea__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.comanda-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--jfg-surface-2);
    color: var(--jfg-text-2);
}

.comanda-tag--pendiente { background: #fef3c7; color: #92400e; }
.comanda-tag--cocina { background: #dbeafe; color: #1e40af; }
.comanda-tag--lista { background: #dcfce7; color: #166534; }
.comanda-tag--servida { background: #f1f5f9; color: #475569; }
.comanda-tag--cobrada { background: #e0e7ff; color: #3730a3; }
.comanda-tag--cuenta { text-transform: none; letter-spacing: 0; }

.comanda-linea__monto {
    font-size: .92rem;
    font-weight: 800;
    color: var(--jfg-text);
    white-space: nowrap;
}

.comanda-linea--cobrada { opacity: .5; }

.comanda-linea--elegida {
    background: var(--jfg-accent-soft);
    border-bottom-color: transparent;
}

.comanda__vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 16px;
    color: var(--jfg-text-2);
    font-size: .85rem;
    text-align: center;
}

/* ── El pie: el total y la acción, siempre a la vista ───────────────────────── */

.comanda__pie {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--jfg-border);
    background: var(--jfg-surface);
}

.comanda__total-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .84rem;
    color: var(--jfg-text-2);
}

.comanda__total-fila--nota { font-style: italic; opacity: .85; }

.comanda__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 8px 0 12px;
    padding-top: 10px;
    border-top: 2px solid var(--jfg-text);
}

.comanda__total-lbl {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.comanda__total-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--jfg-text);
    line-height: 1;
}

.comanda__botones { display: flex; flex-direction: column; gap: 8px; }

/* «Enviar a cocina» y «Cobrar» en la misma fila; si hay uno solo, ocupa todo el ancho. */
.comanda__botones--par { flex-direction: row; }
.comanda__botones--par > * { flex: 1 1 0; min-width: 0; }
.comanda__botones--par .mud-button-root {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    padding-left: 10px;
    padding-right: 10px;
}
/* El texto puede partirse en dos renglones antes que cortarse: en tablet el panel es angosto. */
.comanda__botones--par .mud-button-label {
    white-space: normal;
    line-height: 1.15;
    text-align: left;
    gap: 6px;
}
.comanda__botones--par .mud-button-icon-start { margin-right: 6px; }
.comanda__btn-txt { min-width: 0; }
.comanda__btn-n {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: .8rem;
}

.comanda__alergias-txt { flex: 1 1 auto; min-width: 0; }
.comanda__alergias-quitar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: -3px -4px -3px 0;
    padding: 3px 8px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff;
    color: #b91c1c;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.comanda__alergias-quitar:hover { background: #fee2e2; }
.comanda__botones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Barra de selección: se apoya sobre el pie sin taparlo ni sacarle el total. */
.comanda__seleccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 12px;
    background: var(--jfg-accent-soft);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-accent-strong);
    font-size: .85rem;
    font-weight: 700;
}

/* ── Cobro ─────────────────────────────────────────────────────────────────── */

.comanda__cobro-total {
    padding: 14px;
    background: var(--jfg-surface-2);
    border-radius: var(--jfg-r-sm);
}

.comanda__cobro-total .comanda__total { margin-bottom: 0; }

.comanda__medios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.comanda__medio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 8px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--jfg-dur) var(--jfg-ease);
}

.comanda__medio:hover { border-color: var(--jfg-accent); }

.comanda__medio--on {
    background: var(--jfg-accent-soft);
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

/* El vuelto grande: es la cuenta que el cajero hace de cabeza con fila esperando. */
.comanda__vuelto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    background: var(--jfg-accent-soft);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-accent-strong);
}

.comanda__vuelto span { font-size: .78rem; font-weight: 600; }
.comanda__vuelto strong { font-size: 1.5rem; line-height: 1.1; }

/* ── Cliente para la FE ──────────────────────────────────────────────────────── */
.comanda__cliente--sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--jfg-accent-soft);
    border-radius: var(--jfg-r-sm);
}

.comanda__cliente-datos { display: flex; align-items: center; gap: 10px; }
.comanda__cliente-datos > div { display: flex; flex-direction: column; line-height: 1.2; }
.comanda__cliente-datos strong { font-size: .95rem; }
.comanda__cliente-datos span { font-size: .8rem; color: var(--jfg-text-3); }

.comanda__cliente-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 190px;
    overflow-y: auto;
}

.comanda__cliente-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.comanda__cliente-item:hover { background: var(--jfg-accent-soft); border-color: var(--jfg-accent); }
.comanda__cliente-item strong { font-size: .92rem; }
.comanda__cliente-item span { font-size: .8rem; color: var(--jfg-text-3); }

.comanda__cliente-acciones { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Diálogos ──────────────────────────────────────────────────────────────── */

.comanda-grupo { margin-bottom: 16px; }

.comanda-grupo__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .9rem;
    font-weight: 700;
}

.comanda-grupo__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.comanda__elegir {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.comanda__elegir .menu-cat { justify-content: space-between; }



/* ── Juntar mesas arrastrando ─────────────────────────────────────────────────
   Se toma una mesa y se suelta encima de otra, que es lo que se hace con las manos cuando
   llegan amigos y pegan dos mesas. La mesa sigue al dedo pero no se guarda en esa posición:
   lo que se guarda es la unión. */

.plano-mesa--unible { touch-action: none; }

.plano--arrastrando { cursor: grabbing; }

/* La mesa en la mano: levantada y traslúcida, para ver la que hay debajo. */
.plano-mesa--en-mano {
    z-index: 40;
    opacity: .85;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    cursor: grabbing;
    transition: none;
}

/* La mesa que va a recibir: se marca antes de soltar, no después. */
.plano-mesa--destino {
    outline: 3px dashed var(--jfg-accent, #10b981);
    outline-offset: 4px;
    animation: plano-destino .9s ease-in-out infinite;
}

@keyframes plano-destino {
    0%, 100% { outline-offset: 4px; }
    50%      { outline-offset: 8px; }
}

/* ── Mesas juntadas: el lazo ───────────────────────────────────────────────────
   Un contorno que envuelve a todas las mesas que atienden el mismo pedido. Es lo que hace
   evidente de un vistazo que comparten cuenta; sin él, dos mesas pegadas se ven como dos
   mesas cualesquiera y hay que entrar a una para enterarse. */

.plano-grupo {
    position: absolute;
    z-index: 1;
    border: 2px dashed var(--jfg-accent, #10b981);
    border-radius: 28px;
    background: color-mix(in srgb, var(--jfg-accent, #10b981) 7%, transparent);
    pointer-events: none;
}

.plano-grupo__etq {
    position: absolute;
    top: -12px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--jfg-accent, #10b981);
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.plano-grupo__etq .mud-icon-root { font-size: .85rem; }

/* Las mesas van por encima del lazo: es un fondo, no una tapa. */
.plano-mesa { z-index: 2; }

/* Sin plano dibujado no hay lazo: se dice con palabras en la ficha. */
.resto-mesa__unida {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
    opacity: .9;
}

/* ══ Pantalla táctil: nada escondido, nada chiquito ═════════════════════════════

   El salón se atiende con un monitor táctil y el dedo puesto. Todo lo que hace falta durante el
   servicio está a la vista —sin menús que haya que abrir— y ningún blanco de toque baja de 44 px,
   que es lo que hace falta para no errarle con prisa. */

/* Acotado a pantalla grande a propósito: sin el mínimo, esta regla pisaba el layout del
   teléfono y dejaba el ticket cortado contra el borde. */
@media (min-width: 901px) {
    .comanda {
        grid-template-columns: minmax(0, 1fr) clamp(400px, 32vw, 500px);
    }
}

/* Las acciones de la mesa: fichas, no un menú. */
.comanda__acciones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 12px 0;
}

/* Botón «Opciones» del encabezado: sólo en el teléfono; en pantalla grande las acciones van fijas. */
.comanda__opciones-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 13px;
    background: var(--jfg-surface-2);
    border: 1px solid var(--jfg-border);
    border-radius: 999px;
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.comanda__opciones-toggle:hover { border-color: var(--jfg-accent); }
.comanda__opciones-toggle .mud-icon-root { font-size: 1.1rem; }

/* En el teléfono (≤900px) las opciones se ocultan y se abren con el botón; al tocar una, se cierran. */
@media (max-width: 900px) {
    .comanda__acciones { display: none; }
    .comanda__acciones--abierto { display: grid; }
    .comanda__opciones-toggle { display: inline-flex; }
}

.comanda__accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 62px;
    padding: 8px 4px;
    background: var(--jfg-surface-2);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: all var(--jfg-dur) var(--jfg-ease);
}

.comanda__accion .mud-icon-root { font-size: 1.25rem; }

.comanda__accion:hover:not(:disabled) {
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

.comanda__accion:active:not(:disabled) { transform: scale(.96); }

.comanda__accion:disabled { opacity: .4; cursor: not-allowed; }

.comanda__accion--on {
    background: var(--jfg-accent);
    border-color: var(--jfg-accent);
    color: #fff;
}

.comanda__accion--on:hover { color: #fff; }

.comanda__accion--peligro { color: #b91c1c; }
.comanda__accion--peligro:hover:not(:disabled) { border-color: #dc2626; color: #b91c1c; }

/* Blancos de toque grandes en todo lo que se usa con el dedo. */
.comanda__btn-alto { min-height: 54px; font-size: 1rem; }

.comanda-linea { padding: 7px 8px; }

.comanda-linea__quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text-2);
    cursor: pointer;
}

.comanda-linea__quitar:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.comanda__servicio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.comanda__quitar-servicio {
    padding: 4px 10px;
    background: var(--jfg-surface-2);
    border: 1px solid var(--jfg-border);
    border-radius: 999px;
    color: var(--jfg-text-2);
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}

.comanda__quitar-servicio:hover { border-color: #dc2626; color: #b91c1c; }

/* Fichas de la carta más altas: se tocan cientos de veces por servicio. */
.comanda-plato { min-height: 118px; }

.comanda__seccion { padding: 12px 18px; font-size: .92rem; }

.comanda__cuenta-chip { padding: 10px 14px; font-size: .84rem; }

.comanda__volver { width: 48px; height: 48px; }

/* En pantallas de salón (táctiles, 1080p o más) hay aire de sobra: se aprovecha. */
@media (min-width: 1500px) {
    .comanda__platos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    .comanda-plato { min-height: 128px; }
    .comanda__accion { min-height: 68px; font-size: .76rem; }
}

/* ══ El salón en cada pantalla ══════════════════════════════════════════════════

   El plano tiene medidas fijas —se dibujó a 1200×800— y en un teléfono no entra: las mesas se
   salían por el costado y quedaba media pantalla en blanco. Se dibujan las dos vistas y manda
   el ancho: plano en el monitor del salón, fichas en el teléfono del mesero. */

.resto-salon__plano {
    /* Si el plano es más ancho que la ventana se desplaza dentro de su caja, no rompe la página. */
    max-width: 100%;
    overflow: auto;
    padding: 4px;
    border-radius: var(--jfg-r-lg, 16px);
    -webkit-overflow-scrolling: touch;
}

/* Con plano dibujado, la cuadrícula sólo aparece en pantallas chicas. */
.resto-salon__grid--compacta { display: none; }

@media (max-width: 900px) {
    .resto-salon__plano { display: none; }

    .resto-salon__grid--compacta { display: grid; }
}

/* Teléfono: dos columnas de fichas grandes, sin scroll horizontal. */
@media (max-width: 620px) {
    .resto-salon__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .resto-salon__resumen {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 400px) {
    .resto-salon__grid { grid-template-columns: 1fr; }
}

/* ══ La comanda en teléfono y tablet ════════════════════════════════════════════

   En un monitor caben la carta y el ticket lado a lado. En un teléfono no: partir 430 px en dos
   deja dos columnas inservibles y el ticket cortado contra el borde.

   Así que en pantalla chica sólo se ve la carta, con una barra fija abajo que dice cuánto va la
   mesa, y el pedido sube como hoja cuando se toca. Es un toque para verlo y otro para volver a
   pedir, que es exactamente cómo trabaja un mesero con el teléfono en una mano. */

.comanda__ver-pedido,
.comanda__cerrar-pedido,
.comanda__fondo { display: none; }

@media (max-width: 900px) {

    .comanda {
        display: block;
        height: auto;
        min-height: calc(100vh - 56px);
        padding: 8px 8px 84px;   /* el hueco de abajo lo ocupa la barra fija */
        overflow: visible;
    }

    /* ── La carta manda ─────────────────────────────────────────────────────── */

    .comanda__carta {
        gap: 10px;
    }

    .comanda__platos {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        overflow: visible;       /* scrollea la página, no una caja interna */
        padding-bottom: 4px;
    }

    .comanda-plato { min-height: 96px; }

    /* ── La barra de abajo: el total siempre a la vista ─────────────────────── */

    .comanda__ver-pedido {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 60px;
        padding: 10px 16px;
        background: var(--jfg-accent, #10b981);
        border: 0;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
        color: #fff;
        font: inherit;
        font-size: .95rem;
        font-weight: 700;
        cursor: pointer;
    }

    .comanda__ver-pedido:active { transform: scale(.99); }

    .comanda__ver-pedido-izq {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .comanda__ver-pedido-n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 7px;
        background: rgba(255, 255, 255, .25);
        border-radius: 999px;
        font-size: .82rem;
    }

    .comanda__ver-pedido-total { font-size: 1.1rem; }

    /* ── El pedido, como hoja que sube ──────────────────────────────────────── */

    .comanda__cuenta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1300;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
        transform: translateY(102%);
        transition: transform .22s cubic-bezier(.32, .72, 0, 1);
        will-change: transform;
    }

    .comanda--pedido-abierto .comanda__cuenta { transform: translateY(0); }

    /* Se apaga la carta detrás para que no compita con lo que se está mirando. */
    .comanda__fondo {
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: rgba(15, 23, 42, .45);
    }

    .comanda--pedido-abierto .comanda__ver-pedido { display: none; }

    .comanda__fondo { display: block; }

    /* El tirador de la hoja, arriba del encabezado. */
    .comanda__cerrar-pedido {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--jfg-border);
        color: var(--jfg-text-2);
        font: inherit;
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
    }

    .comanda__cerrar-pedido::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        background: var(--jfg-border-2, #cbd5e1);
        border-radius: 999px;
    }

    .comanda__cuenta { position: fixed; }   /* ancla del tirador */

    .comanda__lineas { max-height: 46vh; }

    /* Las acciones en dos filas de tres: entran sin apretarse. */
    .comanda__acciones { grid-template-columns: repeat(3, 1fr); }

    /* El diálogo de opciones ocupa la pantalla: elegir el término no es para una ventanita. */
    .comanda-grupo__opciones,
    .comanda__medios,
    .comanda__elegir {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* Teléfono angosto: una sola columna de platos y botones a lo ancho. */
@media (max-width: 480px) {
    .comanda__platos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

    .comanda__acciones { grid-template-columns: repeat(2, 1fr); }

    .comanda__botones-fila { grid-template-columns: 1fr; }

    .comanda__seccion { padding: 10px 14px; font-size: .86rem; }
}

/* ── Contador táctil ───────────────────────────────────────────────────────────
   Las flechitas de un campo numérico miden 12 px. En el celular del salonero, de pie y con la
   bandeja en la otra mano, son imposibles de acertar: acá los botones son de 52 px. */

.jfg-contador {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
}

.jfg-contador__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-sm);
    color: var(--jfg-text);
    cursor: pointer;
    transition: all var(--jfg-dur) var(--jfg-ease);
}

.jfg-contador__btn .mud-icon-root { font-size: 1.4rem; }

.jfg-contador__btn:hover:not(:disabled) {
    border-color: var(--jfg-accent);
    color: var(--jfg-accent-strong);
}

.jfg-contador__btn:active:not(:disabled) { transform: scale(.94); }

.jfg-contador__btn:disabled { opacity: .35; cursor: not-allowed; }

.jfg-contador__valor {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 4px 12px;
    background: var(--jfg-surface-2);
    border-radius: var(--jfg-r-sm);
}

.jfg-contador__n {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--jfg-text);
}

.jfg-contador__lbl {
    font-size: .74rem;
    color: var(--jfg-text-2);
}

/* ── Pedir un plato ──────────────────────────────────────────────────────────── */

.comanda-pedir__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.comanda-pedir__fila .jfg-contador { flex: 1; max-width: 260px; }

.comanda-pedir__bloque { margin-top: 14px; }

.comanda-pedir__lbl {
    font-size: .9rem;
    font-weight: 700;
    color: var(--jfg-text);
}

@media (max-width: 480px) {
    .comanda-pedir__fila { align-items: flex-start; flex-direction: column; }
    .comanda-pedir__fila .jfg-contador { max-width: none; width: 100%; }
}

/* El IVA no se suma: ya viene en el precio de la carta. Se dice para que nadie lo sume otra vez. */
.comanda__iva {
    margin: -6px 0 10px;
    font-size: .76rem;
    color: var(--jfg-text-2);
    text-align: right;
}

/* ══ Equipo central ═══════════════════════════════════════════════════════════
   El paso a paso para dejar el local imprimiendo solo. Se muestra arriba de las
   estaciones: configurar impresoras sin la computadora del local sería armar algo
   que todavía no puede funcionar. */

.equipo-central {
    background: var(--jfg-surface);
    border: 1px solid var(--jfg-border);
    border-radius: var(--jfg-r-lg);
    padding: 20px;
}

.equipo-central__pasos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.equipo-central__paso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* El número sí es información: son pasos en orden, no una lista de opciones. */
.equipo-central__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--jfg-accent-soft);
    color: var(--jfg-accent-strong);
    font-weight: 700;
    font-size: .82rem;
}

/* ── Servidor local ────────────────────────────────────────────────────────────
   Lo primero que se responde es dónde está corriendo la pantalla que se está mirando: es el
   dato que no se ve en ninguna otra parte y el que explica por qué el papel sale solo o no. */

.servidor__ahora {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.servidor__ahora .mud-icon-root { flex: 0 0 auto; }

/* ── Ficha del equipo del local ───────────────────────────────────────────────
   Los datos de la máquina conectada: es lo que se mira cuando algo dejó de funcionar y hay que
   saber si el problema está en esa computadora o en la red. */

.equipo-central__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.equipo-central__ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.equipo-central__dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--jfg-surface-2);
    border-radius: var(--jfg-r-sm);
}

.equipo-central__lbl {
    font-size: .72rem;
    color: var(--jfg-text-2);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.equipo-central__val {
    font-size: .9rem;
    font-weight: 600;
    color: var(--jfg-text);
    word-break: break-word;
}

/* ── El plato entró al pedido ──────────────────────────────────────────────────
   El mesero toca y sigue mirando la carta, así que la confirmación tiene que aparecer donde ya
   está mirando —encima del plato— y no en una esquina. Se va sola: un aviso que hay que cerrar
   es un toque más en una pantalla donde cada toque cuenta. */

.comanda-plato__ok {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--jfg-accent, #10b981) 92%, transparent);
    color: #fff;
    pointer-events: none;
    animation: comanda-ok .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.comanda-plato__ok .mud-icon-root {
    font-size: 2.6rem;
    animation: comanda-ok-check .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* El borde del plato acompaña el destello, para que se vea cuál fue aunque el check ya se haya ido. */
.comanda-plato--ok {
    border-color: var(--jfg-accent, #10b981);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jfg-accent, #10b981) 35%, transparent);
}

@keyframes comanda-ok {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes comanda-ok-check {
    0%   { transform: scale(.4); }
    35%  { transform: scale(1.12); }
    55%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* La línea recién agregada destella igual que la ficha del plato que se tocó. */
.comanda-linea { position: relative; }

.comanda-linea__ok {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--jfg-r-sm);
    background: color-mix(in srgb, var(--jfg-accent, #10b981) 88%, transparent);
    color: #fff;
    pointer-events: none;
    animation: comanda-ok .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.comanda-linea__ok .mud-icon-root {
    font-size: 1.9rem;
    animation: comanda-ok-check .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.comanda-linea--nueva {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jfg-accent, #10b981) 35%, transparent);
}

/* Las líneas por enviar se tocan para anotarlas. */
.comanda-linea--editable { cursor: pointer; }
.comanda-linea--editable:hover { background: var(--jfg-surface-2); }

.comanda-tag--nota {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: 1px dashed var(--jfg-border);
    color: var(--jfg-text-2);
    text-transform: none;
    letter-spacing: 0;
}

.comanda__fin-lineas { height: 1px; }

/* Quien pidió menos animación en el sistema ve el check igual, pero sin el rebote. */
@media (prefers-reduced-motion: reduce) {
    .comanda-linea__ok,
    .comanda-linea__ok .mud-icon-root,
    .comanda-plato__ok,
    .comanda-plato__ok .mud-icon-root {
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
}


/* ══ Cobro de la mesa ═════════════════════════════════════════════════════════════
   El total grande arriba (lo que se dice en voz alta), el pago a la izquierda y el comprobante a
   la derecha. Todo a un toque: billetes sugeridos, medios como fichas, cliente siempre visible. */

.cb-titulo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; }
.cb-titulo .mud-icon-root { color: var(--jfg-accent, #10b981); }

.cb-hero {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 18px 20px; border-radius: 16px; color: #fff; margin-bottom: 18px;
    background: linear-gradient(120deg, #0b3b4a 0%, #065f46 55%, #10b981 100%);
}
.cb-hero-lbl { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.cb-hero-total { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cb-hero-desglose { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .8rem; font-weight: 600; }
.cb-pill--suave { background: rgba(255,255,255,.08); opacity: .85; }

.cb-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 760px) { .cb-grid { grid-template-columns: minmax(0, 1fr); } }
.cb-col { min-width: 0; }
.cb-h { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--jfg-text-2); margin-bottom: 10px; }
.cb-ayuda { font-size: .78rem; color: var(--jfg-text-2); margin-top: 6px; }

.cb-segmento { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--jfg-surface-2); border: 1px solid var(--jfg-border); }
.cb-segmento button {
    border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .9rem; color: var(--jfg-text-2);
    padding: 8px 18px; border-radius: 9px; cursor: pointer; min-height: 40px;
}
.cb-segmento button.cb-seg--on { background: #fff; color: var(--jfg-text); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.cb-segmento button:disabled { opacity: .45; cursor: not-allowed; }

.cb-medios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
@media (max-width: 480px) { .cb-medios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-medio {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 72px; padding: 10px 6px; border-radius: 12px; cursor: pointer; font: inherit;
    font-size: .8rem; font-weight: 700; color: var(--jfg-text-2);
    background: var(--jfg-surface); border: 1.5px solid var(--jfg-border);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.cb-medio .mud-icon-root { font-size: 1.5rem; }
.cb-medio:hover { border-color: var(--jfg-accent, #10b981); }
.cb-medio--on {
    border-color: var(--jfg-accent, #10b981); color: #047857;
    background: color-mix(in srgb, var(--jfg-accent, #10b981) 10%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jfg-accent, #10b981) 18%, transparent);
}

/* Medio elegido → monto grande (lo que dice el cliente) → Enter. El tamaño es el de la pantalla
   de un datáfono: se lee de pie y a un metro. */
.cb-tecla {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 5px;
    font: 700 .66rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0;
    color: var(--jfg-text-3); background: var(--jfg-surface-2); border: 1px solid var(--jfg-border);
    vertical-align: middle; text-transform: none;
}
.cb-medio .cb-tecla { margin: 0; }
.cb-tecla--claro { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
@media (pointer: coarse) { .cb-tecla { display: none; } }

.cb-entrada { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.cb-moneda { display: inline-flex; flex-direction: column; padding: 3px; gap: 3px; border-radius: 12px; background: var(--jfg-surface-2); border: 1px solid var(--jfg-border); }
.cb-moneda button {
    flex: 1; min-width: 40px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
    font: inherit; font-weight: 800; font-size: 1rem; color: var(--jfg-text-2);
}
.cb-moneda button.cb-seg--on { background: #fff; color: var(--jfg-text); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.cb-descuento .cb-moneda { flex-direction: row; }
.cb-descuento .cb-moneda button { min-height: 36px; }

.cb-monto {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 6px;
    border-radius: 14px; border: 2px solid var(--jfg-border); background: var(--jfg-surface); cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.cb-monto:focus-within {
    border-color: var(--jfg-accent, #10b981);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--jfg-accent, #10b981) 16%, transparent);
}
.cb-monto-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--jfg-text-2); }
.cb-monto-campo { display: flex; align-items: baseline; gap: 6px; }
.cb-monto-simb { font-size: 1.6rem; font-weight: 800; color: var(--jfg-text-3); }
.cb-monto input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
    font: inherit; font-size: 2rem; font-weight: 800; letter-spacing: -.01em; color: var(--jfg-text);
    font-variant-numeric: tabular-nums;
}

.cb-ref { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cb-ref span { font-size: .74rem; font-weight: 700; color: var(--jfg-text-2); }
.cb-ref input, .cb-descuento input {
    min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--jfg-border);
    background: var(--jfg-surface); color: var(--jfg-text); font: inherit; font-size: 1rem; font-weight: 600; outline: 0;
}
.cb-ref input:focus, .cb-descuento input:focus { border-color: var(--jfg-accent, #10b981); }

.cb-entrada-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cb-entrada-pie .cb-ayuda { margin: 0; }

.cb-pagos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-pagos li {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 10px;
    background: var(--jfg-surface-2); border: 1px solid var(--jfg-border);
}
.cb-pagos li > .mud-icon-root { color: var(--jfg-text-2); }
.cb-pago-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cb-pago-txt strong { font-size: .9rem; }
.cb-pago-txt span, .cb-pago-monto span { font-size: .75rem; color: var(--jfg-text-3); }
.cb-pago-monto { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cb-pago-monto strong { font-size: 1rem; }
.cb-pago-quitar {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 0; border-radius: 8px; background: transparent; color: var(--jfg-text-3); cursor: pointer;
}
.cb-pago-quitar:hover { background: #fef2f2; color: #b91c1c; }

.cb-saldo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 12px; border-radius: 12px; overflow: hidden;
    background: color-mix(in srgb, var(--jfg-accent, #10b981) 22%, transparent);
}
.cb-saldo > div {
    display: flex; flex-direction: column; padding: 8px 14px;
    background: color-mix(in srgb, var(--jfg-accent, #10b981) 9%, var(--jfg-surface, #fff)); color: #047857;
}
.cb-saldo span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cb-saldo strong { font-size: 1.5rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cb-saldo > div:first-child { color: var(--jfg-text-2); }
.cb-saldo--falta { background: #fecaca; }
.cb-saldo--falta > div:last-child { background: #fef2f2; color: #b91c1c; }

.cb-descuento { display: flex; align-items: center; gap: 8px; }
.cb-descuento input { flex: 1; min-width: 0; }

/* El desglose va como en la factura: subtotal sin IVA, descuento, IVA y servicio. */
.cb-desglose {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, auto)); gap: 4px 16px; margin: 0;
    font-variant-numeric: tabular-nums;
}
.cb-desglose > div { display: flex; flex-direction: column; }
.cb-desglose dt { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.cb-desglose dd { margin: 0; font-size: 1rem; font-weight: 700; }
.cb-desglose-desc dd { color: #fde68a; }

.cb-cliente {
    padding: 10px 12px; border-radius: 12px;
    background: var(--jfg-accent-soft); border: 1px solid color-mix(in srgb, var(--jfg-accent, #10b981) 25%, transparent);
}
.cb-cliente-cab { display: flex; align-items: center; gap: 8px; }
.cb-cliente-cab strong { font-size: .98rem; line-height: 1.2; }
.cb-cliente-cab span { font-size: .85rem; color: var(--jfg-text-2); }
.cb-cliente-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 0; font-size: .85rem; }
.cb-cliente-datos > div { display: contents; }
.cb-cliente-datos dt { color: var(--jfg-text-3); }
.cb-cliente-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--jfg-text); }

.cb-doc {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; margin-bottom: 12px;
    background: var(--jfg-surface-2); border: 1px dashed var(--jfg-border); color: var(--jfg-text-2);
}
.cb-doc .mud-icon-root { font-size: 1.6rem; }
.cb-doc strong { display: block; color: var(--jfg-text); font-size: .95rem; }
.cb-doc span { font-size: .8rem; }
.cb-doc--factura { background: color-mix(in srgb, var(--jfg-accent, #10b981) 8%, #fff); border: 1px solid color-mix(in srgb, var(--jfg-accent, #10b981) 40%, transparent); }
.cb-doc--factura .mud-icon-root { color: var(--jfg-accent, #10b981); }

.cb-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; padding: 4px 8px 8px; }
.cb-confirmar {
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px;
    font: inherit; font-weight: 800; font-size: 1rem; color: #fff; cursor: pointer;
    background: linear-gradient(90deg, #047857, #10b981); box-shadow: 0 10px 22px rgba(5,150,105,.3);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.cb-confirmar:hover:not(:disabled) { transform: translateY(-1px); }

/* Con el foco (al completar el pago), el botón late: el cajero ve dónde está parado y que
   Enter o F10 cobran. */
.cb-confirmar:focus { outline: 3px solid #fbbf24; outline-offset: 3px; animation: cb-latido 1.1s ease-in-out infinite; }
@keyframes cb-latido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.65), 0 10px 22px rgba(5,150,105,.3); transform: scale(1); }
    50%      { box-shadow: 0 0 0 12px rgba(16,185,129,0),  0 10px 22px rgba(5,150,105,.3); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .cb-confirmar:focus { animation: none; } }
.cb-confirmar:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (max-width: 600px) {
    .cb-confirmar { flex: 1; justify-content: center; min-height: 50px; padding: 0 14px; font-size: .95rem; }
    .cb-acciones { padding: 4px 4px 6px; }
    .cb-acciones .mud-button-root { min-width: 0; padding-inline: 10px; }

    /* El cobro ocupa toda la pantalla: en una ventanita el botón quedaba partido en cuatro líneas. */
    .mud-dialog.cb-dialogo {
        width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
    }
    .mud-dialog.cb-dialogo .mud-dialog-content { flex: 1; overflow-y: auto; padding-inline: 14px; }
    .cb-hero { padding: 14px 16px; margin-bottom: 14px; }
    .cb-desglose { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .cb-monto input { font-size: 1.7rem; }
}


/* ══ Acciones de la mesa en una sola fila (pantalla grande) ═══════════════════════
   En dos filas se comían ~150 px del panel y, con muchos platos, la lista quedaba chica y el
   scroll era incómodo. Una fila compacta que se reparte entre las que haya (6, o 7 con «Separar
   mesa»). En el teléfono no aplica: ahí las acciones se abren con el botón «Opciones». */
@media (min-width: 901px) {
    .comanda__acciones {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 5px;
        padding: 8px 10px 0;
    }

    .comanda__accion {
        min-height: 54px;
        padding: 6px 2px;
        gap: 2px;
        font-size: .68rem;
    }

    .comanda__accion .mud-icon-root { font-size: 1.1rem; }
}

/* ── Nota para la cocina: especiales (entrada / para llevar) y notas rápidas ── */
.nota-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nota-dlg__titulo { min-width: 0; }
.nota-dlg__flags { display: flex; gap: 8px; flex-wrap: wrap; }
.nota-flag {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 6px 14px;
    border: 1.5px solid var(--jfg-border, #d0d5dd); border-radius: 12px;
    background: #fff; color: var(--jfg-text-2, #475467);
    font-size: .88rem; font-weight: 700; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.nota-flag:hover { border-color: #10b981; }
.nota-flag--on { background: #ecfdf5; border-color: #10b981; color: #047857; }
.nota-flag--llevar.nota-flag--on { background: #fff7ed; border-color: #f97316; color: #c2410c; }

.nota-rapidas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.nota-rapidas--editando { padding: 8px; border: 1px dashed var(--jfg-border, #d0d5dd); border-radius: 10px; }
.nota-rapidas__editar {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border: 0; border-radius: 999px;
    background: transparent; color: #047857; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.nota-rapidas__editar:hover { background: #ecfdf5; }
.nota-rapidas__form { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.nota-rapidas__form .mud-input-control { margin: 0; }

.comanda-tag--entrada { background: #ecfdf5; color: #047857; }
.comanda-tag--llevar  { background: #fff7ed; color: #c2410c; }

.tkt-cocina__bloque { margin: 6px 0 2px; text-align: center; font-weight: 800; letter-spacing: .06em; }
.nota-rapidas__acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.comanda__botones-fila--marcas .nota-flag { justify-content: center; width: 100%; }
.nota-flag:disabled { opacity: .45; cursor: default; }
/* Con un solo botón (sin «Separar unidades») la fila no deja media vacía. */
.comanda__botones-fila > :only-child { grid-column: 1 / -1; }

/* ── Diálogo de pedir un plato: botones que entran en el celular ── */
.comanda-pedir-dlg .mud-dialog-actions { gap: 8px; flex-wrap: nowrap; }
.comanda-pedir-dlg .mud-dialog-actions .mud-button-root { text-transform: none; letter-spacing: 0; }
.comanda-pedir-dlg .mud-dialog-actions .mud-button-label { white-space: nowrap; }
.comanda-pedir-dlg .mud-dialog-actions .comanda__btn-alto { font-weight: 700; }

@media (max-width: 480px) {
    .comanda-pedir-dlg .mud-dialog-actions { padding: 10px 12px; }
    .comanda-pedir-dlg .mud-dialog-actions .mud-button-root { min-width: 0; padding-left: 10px; padding-right: 10px; }
    /* El botón principal se lleva el ancho que sobra; «Cancelar» y «Atrás» quedan chicos. */
    .comanda-pedir-dlg .mud-dialog-actions .comanda__btn-alto { flex: 1 1 auto; min-height: 50px; font-size: .95rem; }
    .comanda-pedir-dlg .mud-dialog-actions > .mud-spacer { display: none; }
    .comanda-pedir-dlg .nota-flag { flex: 1 1 0; justify-content: center; padding: 6px 10px; }
    .comanda-pedir-dlg .nota-dlg__flags { width: 100%; }
}

/* ── Aviso de versión nueva (mismo que el POS Comercial) ── */
.jgf-pwa-update {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 16px;
    background: #0f172a;
    color: #f8fafc;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
    animation: jgf-pwa-update-in .25s ease-out;
}
.jgf-pwa-update__icon { color: #34d399; }
.jgf-pwa-update__text { font-size: .9rem; font-weight: 500; }
.jgf-pwa-update__btn  { flex: none; }

@keyframes jgf-pwa-update-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Título de un pedido express o para llevar: se toca para editar sus datos. */
.comanda__titulo-pedido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 8px 2px 4px;
    margin-left: -4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background var(--jfg-dur) var(--jfg-ease);
}

.comanda__titulo-pedido span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comanda__titulo-pedido:hover { background: rgba(15, 23, 42, .06); }
.comanda__titulo-lapiz { opacity: .45; }
.comanda__titulo-pedido:hover .comanda__titulo-lapiz { opacity: .9; }

/* Clientes que ya pidieron: sugerencias en «Datos del pedido». */
.comanda__previos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.comanda__previos-titulo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.comanda__previo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--jfg-dur) var(--jfg-ease), box-shadow var(--jfg-dur) var(--jfg-ease);
}

.comanda__previo:hover { border-color: var(--jfg-accent); box-shadow: 0 0 0 3px var(--jfg-ring); }
.comanda__previo-nombre { font-weight: 700; color: #0f172a; }
.comanda__previo-tel { margin-left: 8px; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
.comanda__previo-dir { font-size: .8125rem; color: #475569; }
.comanda__previo-meta { font-size: .72rem; color: #94a3b8; }

/* ═══ Menú del salón (igual al del POS comercial) ═══════════════════════════════
   Drawer que se abre sobre el contenido desde la hamburguesa de la barra: sucursal activa arriba,
   las pantallas con su tecla, y cambiar de sucursal para quien puede. */

.resto-menu-fondo {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.resto-menu-fondo--on { opacity: 1; pointer-events: auto; }

.resto-menu {
    position: fixed;
    top: var(--mud-appbar-height, 48px);
    left: 0;
    bottom: 0;
    z-index: 1300;
    width: 260px;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    color: #cbd5e1;
    /* Cerrado no proyecta sombra: con translateX(-100%) la sombra quedaba asomada en el borde. */
    box-shadow: none;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .22s, box-shadow .22s;
    overflow-y: auto;
}

.resto-menu--on {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 8px 0 24px rgba(15, 23, 42, .25);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s, box-shadow .22s;
}

.resto-menu__sucursal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 12px;
}

.resto-menu__etiqueta {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(203, 213, 225, .6);
}

.resto-menu__nombre { font-size: .95rem; font-weight: 700; color: #f1f5f9; }

.resto-menu__divisor { height: 1px; margin: 0 12px; background: rgba(255, 255, 255, .1); }

.resto-menu__items { display: flex; flex-direction: column; padding: 8px 0; }

.resto-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 16px;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    border-right: 2px solid transparent;
    transition: background .15s ease;
}

.resto-menu__item .mud-icon-root { color: #94a3b8; }
.resto-menu__item:hover { background: rgba(255, 255, 255, .05); }

.resto-menu__item--on {
    background: rgba(16, 185, 129, .15);
    color: #34d399;
    border-right-color: #10b981;
}

.resto-menu__item--on .mud-icon-root { color: #34d399; }

.resto-menu__texto { flex: 1; }

.resto-menu__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 6px;
    border-radius: 5px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

.resto-menu__cambiar { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }

.resto-menu__sucursal-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: transparent;
    color: #cbd5e1;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.resto-menu__sucursal-btn:hover { background: rgba(255, 255, 255, .06); }
.resto-menu__sucursal-btn .mud-icon-root { color: #94a3b8; }

/* ── Pantallas del POS compartidas (Caja) ─────────────────────────────────────
   Los botones de elección (moneda de apertura) son los del POS comercial: la clase vive en su
   app.css, que el restaurante no carga. Mismas reglas, con la paleta de MudBlazor de respaldo. */
.pos-choice-group {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   12px;
}
.pos-choice-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    min-height:      44px;
    padding:         12px 14px;
    border:          1.5px solid rgba(0,0,0,.10);
    border-radius:   14px;
    background:      var(--jgf-surface, #fff);
    color:           var(--jgf-text-primary, var(--mud-palette-text-primary));
    font:            inherit;
    font-weight:     600;
    cursor:          pointer;
    box-shadow:      0 1px 2px rgba(0,0,0,.04);
    transition:      border-color .15s, background .15s, color .15s, box-shadow .15s, transform .06s;
    -webkit-tap-highlight-color: transparent;
}
.pos-choice-btn:hover:not(:disabled):not(.active) {
    border-color: var(--jgf-primary, var(--mud-palette-primary));
}
.pos-choice-btn:active:not(:disabled) { transform: scale(.97); }
.pos-choice-btn.active,
.pos-choice-btn.active:hover {
    background:   var(--jgf-primary, var(--mud-palette-primary));
    border-color: var(--jgf-primary, var(--mud-palette-primary));
    color:        #fff;
}