/* ============================================================================
   QPos — la operación del punto de venta.

   TODOS los estilos de QPos van en este archivo. Nunca en un <style>, ni en un
   atributo style=, ni asignando elemento.style desde JavaScript: para eso se
   alterna una clase.

   Táctil primero: ningún objetivo de toque mide menos de 56 px, los botones de
   producto no bajan de 120 × 90, y nada importante depende de pasar el ratón.

   Los colores de la carta son del cliente y van en atributos de SVG. Los de aquí
   son los de la casa. Los de ESTADO (mesa libre, ocupada, por enviar; línea en
   cocina, quitada) no son del cliente: significan lo mismo en todos los hoteles.
   ============================================================================ */

:root {
    --qp-tinta: #1b2a41;
    --qp-papel: #f4f6f9;
    --qp-blanco: #ffffff;
    --qp-borde: #d5dbe4;
    --qp-tenue: #66728a;
    --qp-acento: #2c63b5;
    --qp-peligro: #b02a37;

    --qp-libre: #e6f4ea;
    --qp-libre-borde: #2e7d4f;
    --qp-ocupada: #dbe7fb;
    --qp-ocupada-borde: #2c63b5;
    --qp-por-enviar: #fff0cc;
    --qp-por-enviar-borde: #c98a00;
    --qp-precuenta: #f3ddf7;
    --qp-precuenta-borde: #7b2d91;

    --qp-toque: 56px;
    --qp-radio: 12px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    color: var(--qp-tinta);
    background: var(--qp-papel);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; margin: 0; }
p { margin: 0 0 .75rem; }

.oculto { display: none !important; }
.qp-tenue { color: var(--qp-tenue); font-size: .9rem; }
.qp-vacio { padding: 1.5rem; text-align: center; }

/* ----------------------------------------------------------------- la barra */
.qp-barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--qp-toque);
    padding: 0 1rem;
    color: var(--qp-blanco);
    background: var(--qp-tinta);
}

.qp-barra-marca { font-weight: 700; letter-spacing: .04em; }
.qp-barra-lugar { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-barra-quien { display: flex; align-items: center; gap: .75rem; }
.qp-barra-quien form { margin: 0; }

.qp-cuerpo { flex: 1; min-height: 0; padding: 1rem; overflow: auto; }

/* --------------------------------------------------------------- los botones */
.qp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--qp-toque);
    padding: 0 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--qp-tinta);
    text-decoration: none;
    background: var(--qp-blanco);
    border: 1px solid var(--qp-borde);
    border-radius: var(--qp-radio);
    cursor: pointer;
}

.qp-btn:disabled { opacity: .45; cursor: default; }
.qp-btn-principal { color: var(--qp-blanco); background: var(--qp-acento); border-color: var(--qp-acento); }
.qp-btn-peligro { color: var(--qp-blanco); background: var(--qp-peligro); border-color: var(--qp-peligro); }
.qp-btn-suave { background: transparent; }
.qp-btn-barra { min-height: 40px; color: var(--qp-blanco); background: transparent; border-color: rgba(255, 255, 255, .4); }
.qp-btn-ancho { width: 100%; margin-top: 1rem; }
.qp-btn-opcion { width: 100%; min-height: 72px; justify-content: flex-start; font-size: 1.15rem; }
.qp-btn-contador { width: var(--qp-toque); padding: 0; font-size: 1.5rem; }

.qp-enlace { display: block; margin-top: 1rem; text-align: center; color: var(--qp-acento); }

/* ------------------------------------------------- las pantallas de una tarjeta */
.qp-centrada .qp-cuerpo { display: flex; align-items: flex-start; justify-content: center; }

.qp-tarjeta {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem;
    background: var(--qp-blanco);
    border: 1px solid var(--qp-borde);
    border-radius: var(--qp-radio);
}

.qp-aviso { padding: .75rem 1rem; background: #eef3fb; border-radius: var(--qp-radio); }
.qp-error { padding: .75rem 1rem; color: var(--qp-peligro); background: #fbe9eb; border-radius: var(--qp-radio); }

.qp-rotulo { display: block; margin: 1rem 0 .35rem; font-weight: 600; }

.qp-campo {
    width: 100%;
    min-height: var(--qp-toque);
    padding: 0 .9rem;
    font: inherit;
    color: var(--qp-tinta);
    background: var(--qp-blanco);
    border: 1px solid var(--qp-borde);
    border-radius: var(--qp-radio);
}

.qp-campo-codigo { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; letter-spacing: .15em; text-align: center; text-transform: uppercase; }
.qp-campo-numero { width: 6rem; text-align: center; font-size: 1.4rem; }

.qp-contador { display: flex; align-items: center; gap: .5rem; }
.qp-casilla { display: flex; align-items: center; gap: .6rem; min-height: var(--qp-toque); margin-top: .5rem; }
.qp-casilla input { width: 1.6rem; height: 1.6rem; }

.qp-opciones { display: grid; gap: .75rem; }
.qp-opciones form { margin: 0; }
.qp-muestra { width: 1.2rem; height: 1.2rem; }

/* ----------------------------------------------------------------- el teclado */
.qp-pin-puntos { min-height: 2.5rem; margin: .5rem 0; font-size: 2rem; letter-spacing: .4em; text-align: center; }
.qp-pin-puntos.vacio::before { content: "· · · ·"; color: var(--qp-borde); }

.qp-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }

.qp-tecla {
    min-height: 68px;
    font: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--qp-tinta);
    background: var(--qp-papel);
    border: 1px solid var(--qp-borde);
    border-radius: var(--qp-radio);
    cursor: pointer;
}

.qp-tecla:active { background: var(--qp-borde); }
.qp-tecla-accion { font-size: 1rem; }
.qp-tecla-entrar { font-size: 1.1rem; color: var(--qp-blanco); background: var(--qp-acento); border-color: var(--qp-acento); }

/* ------------------------------------------------------------------- el salón */
.qp-pestanas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }

.qp-pestana {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--qp-toque);
    padding: 0 1.25rem;
    font-weight: 600;
    color: var(--qp-tinta);
    text-decoration: none;
    background: var(--qp-blanco);
    border: 1px solid var(--qp-borde);
    border-radius: var(--qp-radio);
}

.qp-pestana.activa { color: var(--qp-blanco); background: var(--qp-tinta); border-color: var(--qp-tinta); }
.qp-pestana-accion { margin-left: auto; }
.qp-cuenta-de { padding: 0 .5rem; font-size: .85rem; color: var(--qp-blanco); background: var(--qp-acento); border-radius: 1rem; }

.qp-plano {
    display: block;
    width: 100%;
    max-height: 68vh;
    background: var(--qp-blanco);
    border: 1px solid var(--qp-borde);
    border-radius: var(--qp-radio);
}

.qp-mesa rect, .qp-mesa ellipse { stroke-width: 3; }
.qp-mesa-codigo { font-size: 20px; font-weight: 700; fill: var(--qp-tinta); pointer-events: none; }
.qp-mesa-dato { font-size: 14px; fill: var(--qp-tinta); pointer-events: none; }

.qp-mesa-libre rect, .qp-mesa-libre ellipse { fill: var(--qp-libre); stroke: var(--qp-libre-borde); }
.qp-mesa-ocupada rect, .qp-mesa-ocupada ellipse { fill: var(--qp-ocupada); stroke: var(--qp-ocupada-borde); }
.qp-mesa-por-enviar rect, .qp-mesa-por-enviar ellipse { fill: var(--qp-por-enviar); stroke: var(--qp-por-enviar-borde); }
.qp-mesa-precuenta rect, .qp-mesa-precuenta ellipse { fill: var(--qp-precuenta); stroke: var(--qp-precuenta-borde); }

.qp-rejilla-mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin-top: 1rem; }

.qp-mesa-boton {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 90px;
    padding: .75rem;
    color: var(--qp-tinta);
    text-decoration: none;
    border: 2px solid var(--qp-borde);
    border-radius: var(--qp-radio);
}

.qp-mesa-boton strong { font-size: 1.25rem; }
.qp-mesa-boton span { font-size: .85rem; }
.qp-mesa-boton.qp-mesa-libre, .qp-punto.qp-mesa-libre { background: var(--qp-libre); border-color: var(--qp-libre-borde); }
.qp-mesa-boton.qp-mesa-ocupada, .qp-punto.qp-mesa-ocupada { background: var(--qp-ocupada); border-color: var(--qp-ocupada-borde); }
.qp-mesa-boton.qp-mesa-por-enviar, .qp-punto.qp-mesa-por-enviar { background: var(--qp-por-enviar); border-color: var(--qp-por-enviar-borde); }
.qp-mesa-boton.qp-mesa-precuenta, .qp-punto.qp-mesa-precuenta { background: var(--qp-precuenta); border-color: var(--qp-precuenta-borde); }

.qp-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: 1rem; font-size: .85rem; color: var(--qp-tenue); }
.qp-punto { display: inline-block; width: .9rem; height: .9rem; border: 2px solid; border-radius: 50%; }
.qp-subtitulo { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ el pedido */
.qp-pantalla-pedido .qp-cuerpo { padding: 0; overflow: hidden; }

.qp-pedido {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 22rem;
    height: 100%;
}

.qp-pedido.ocupado .qp-productos { opacity: .55; pointer-events: none; }

.qp-col-carta, .qp-col-productos, .qp-col-cuenta { min-height: 0; overflow-y: auto; padding: .75rem; }
.qp-col-carta { background: var(--qp-blanco); border-right: 1px solid var(--qp-borde); }
.qp-col-cuenta { display: flex; flex-direction: column; gap: .6rem; background: var(--qp-blanco); border-left: 1px solid var(--qp-borde); }

.qp-pestanas-grupo, .qp-agrupaciones { display: grid; gap: .5rem; }
.qp-agrupaciones { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--qp-borde); }

.qp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.qp-col-carta .qp-chips { margin-top: .75rem; }

.qp-chip {
    min-height: 44px;
    min-width: 44px;
    padding: 0 .9rem;
    font: inherit;
    font-size: .95rem;
    color: var(--qp-tinta);
    background: var(--qp-papel);
    border: 1px solid var(--qp-borde);
    border-radius: 2rem;
    cursor: pointer;
}

.qp-chip.activo { color: var(--qp-blanco); background: var(--qp-tinta); border-color: var(--qp-tinta); }

.qp-buscar { margin-bottom: .5rem; }
.qp-miga { min-height: 1.4rem; margin-bottom: .5rem; font-size: .9rem; color: var(--qp-tenue); }
.qp-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }

/* El botón de la carta: un SVG dentro de un botón. El color es del cliente. */
.qp-boton {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 3px solid transparent;
    border-radius: 14px;
    cursor: pointer;
}

.qp-boton svg { display: block; width: 100%; height: auto; }
.qp-boton.activo { border-color: var(--qp-tinta); }
.qp-boton:active { transform: scale(.97); }
.qp-boton-producto { min-width: 120px; }
.qp-boton-producto svg { min-height: 90px; }
.qp-boton-fondo { stroke: rgba(0, 0, 0, .15); stroke-width: 1; }
.qp-boton-nombre { font-size: 15px; font-weight: 600; }
.qp-boton-pie { font-size: 13px; opacity: .85; }
.qp-boton.agotado svg { opacity: .4; }
.qp-boton-marca { position: absolute; top: .4rem; left: .6rem; font-size: .7rem; font-weight: 700; color: var(--qp-peligro); }

/* -------------------------------------------------------------------- la cuenta */
.qp-cuenta-cabeza { display: flex; align-items: center; gap: .75rem; }
.qp-cuenta-cabeza div { display: flex; flex-direction: column; min-width: 0; }
.qp-silla { display: flex; align-items: center; gap: .6rem; }

.qp-aviso-red { padding: .6rem .8rem; background: var(--qp-por-enviar); border-radius: var(--qp-radio); }

.qp-lineas { flex: 1; min-height: 6rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid var(--qp-borde); }

.qp-linea { padding: .6rem .25rem; border-bottom: 1px solid var(--qp-borde); }
.qp-linea.tocable { cursor: pointer; }
.qp-linea-cabeza { display: flex; gap: .5rem; align-items: baseline; }
.qp-linea-cantidad { min-width: 2.6rem; font-weight: 700; }
.qp-linea-nombre { flex: 1; }
.qp-linea-total { font-variant-numeric: tabular-nums; }
.qp-linea-detalle { margin-left: 3.1rem; font-size: .85rem; color: var(--qp-tenue); }
.qp-linea-estado { margin-left: 3.1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qp-linea-hija { padding-top: 0; }
.qp-linea-hija .qp-linea-cabeza { font-size: .9rem; color: var(--qp-tenue); }
.qp-linea-cargada .qp-linea-estado { color: var(--qp-por-enviar-borde); }
.qp-linea-comandada .qp-linea-estado { color: var(--qp-libre-borde); }
.qp-linea-revertida { opacity: .55; }
.qp-linea-revertida .qp-linea-nombre, .qp-linea-revertida .qp-linea-total { text-decoration: line-through; }
.qp-linea-revertida .qp-linea-estado { color: var(--qp-peligro); }

.qp-totales { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: 0; }
.qp-totales dt, .qp-totales dd { margin: 0; }
.qp-totales dd { text-align: right; font-variant-numeric: tabular-nums; }
.qp-total { font-size: 1.5rem; font-weight: 700; }

.qp-btn-enviar { min-height: 72px; font-size: 1.2rem; }
.qp-btn-fuertes { background: var(--qp-por-enviar); border-color: var(--qp-por-enviar-borde); }

/* ------------------------------------------------------------------ los paneles */
.qp-dialogo {
    width: min(34rem, 94vw);
    max-height: 92vh;
    padding: 0;
    color: var(--qp-tinta);
    border: none;
    border-radius: var(--qp-radio);
}

.qp-dialogo::backdrop { background: rgba(27, 42, 65, .55); }
.qp-dialogo-cuerpo { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; }
.qp-dialogo-cuerpo header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.qp-dialogo-cuerpo footer { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }

.qp-opciones-mod { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }

.qp-opcion-mod {
    min-height: 72px;
    padding: .5rem .75rem;
    font: inherit;
    font-weight: 600;
    color: var(--qp-tinta);
    white-space: pre-wrap;
    background: var(--qp-papel);
    border: 2px solid var(--qp-borde);
    border-radius: var(--qp-radio);
    cursor: pointer;
}

.qp-opcion-mod.activo { color: var(--qp-blanco); background: var(--qp-acento); border-color: var(--qp-acento); }

.qp-numero-valor { min-height: 3.5rem; padding: 0 1rem; font-size: 2.4rem; font-weight: 700; text-align: right; background: var(--qp-papel); border-radius: var(--qp-radio); }

/* -------------------------------------------------------------------- el cobro */
.qp-pantalla-cobro .qp-cuerpo { padding: 0; overflow: hidden; }

.qp-cobro {
    display: grid;
    grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
    height: 100%;
}

.qp-cobro-papel, .qp-cobro-acciones { min-height: 0; overflow-y: auto; padding: 1rem; }
.qp-cobro-papel { background: #e9edf3; border-right: 1px solid var(--qp-borde); }
.qp-cobro-acciones { display: flex; flex-direction: column; gap: .9rem; background: var(--qp-blanco); }

/* El papel: la precuenta o el recibo, con la letra de ancho fijo de la impresora. */
.qp-papel {
    margin: 0 auto;
    padding: 1rem .75rem;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .82rem;
    line-height: 1.35;
    color: #111;
    background: var(--qp-blanco);
    border: 1px solid var(--qp-borde);
    box-shadow: 0 2px 6px rgba(27, 42, 65, .12);
}

.qp-cobro .qp-tarjeta, .qp-mover .qp-tarjeta { max-width: none; padding: 1rem; }
.qp-cobro .qp-rotulo, .qp-mover .qp-rotulo { margin-top: 0; }
.qp-cobro .qp-btn-ancho { margin-top: 0; }
.qp-aviso .qp-enlace, .qp-tabla .qp-enlace { display: inline; margin: 0; }

/* Campos y botones en una fila que se parte sola cuando no caben. */
.qp-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0; }
.qp-fila > .qp-campo:not(.qp-campo-numero):not(.qp-campo-codigo) { flex: 1; min-width: 12rem; width: auto; }
.qp-fila > div { min-width: 0; }
.qp-fila .qp-campo-codigo { width: 9rem; font-size: 1.2rem; }
.qp-fila .qp-casilla { margin-top: 0; }

.qp-pagar { display: flex; flex-direction: column; gap: .9rem; }
.qp-pagar .qp-campo-numero { width: 8.5rem; }

/* Las formas de pago: un botón grande por cada una, que es en realidad una opción. */
.qp-formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.qp-forma { position: relative; display: block; }
.qp-forma input { position: absolute; opacity: 0; pointer-events: none; }

.qp-forma span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: .5rem .75rem;
    font-weight: 600;
    text-align: center;
    background: var(--qp-blanco);
    border: 2px solid var(--qp-borde);
    border-radius: var(--qp-radio);
    cursor: pointer;
}

.qp-forma input:checked + span { color: var(--qp-blanco); background: var(--qp-acento); border-color: var(--qp-acento); }
.qp-forma input:focus-visible + span { outline: 3px solid var(--qp-tinta); outline-offset: 2px; }
.qp-forma-apagada span { opacity: .45; cursor: default; }

/* El cargo a habitación: los huéspedes en casa, uno por renglón, filtrados al escribir. */
.qp-lista-habitaciones { display: grid; gap: .4rem; max-height: 16rem; margin-top: .6rem; overflow-y: auto; }
.qp-habitacion { position: relative; display: block; }
.qp-habitacion input { position: absolute; opacity: 0; pointer-events: none; }

.qp-habitacion > span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    min-height: var(--qp-toque);
    padding: .6rem .9rem;
    background: var(--qp-blanco);
    border: 2px solid var(--qp-borde);
    border-radius: var(--qp-radio);
    cursor: pointer;
}

.qp-habitacion strong { min-width: 3.5rem; font-size: 1.2rem; }
.qp-habitacion input:checked + span { background: var(--qp-ocupada); border-color: var(--qp-acento); }
.qp-habitacion input:focus-visible + span { outline: 3px solid var(--qp-tinta); outline-offset: 2px; }

.qp-pagos { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--qp-borde); }
.qp-pago { padding: .6rem .25rem; border-bottom: 1px solid var(--qp-borde); }
.qp-pago-cabeza { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.qp-pago-anulado { opacity: .6; }
.qp-pago-anulado strong, .qp-pago-anulado .qp-pago-cabeza span { text-decoration: line-through; }

/* Lo que se hace pocas veces va plegado: no estorba y no se toca por error. */
.qp-plegable { margin-top: .4rem; }
.qp-plegable summary { min-height: 44px; padding: .6rem 0; color: var(--qp-acento); cursor: pointer; }
.qp-plegable[open] summary { margin-bottom: .5rem; }

/* ------------------------------------------- mover, la caja y las cuentas cerradas */
.qp-mover { display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; margin: 0 auto; }
.qp-mover .qp-tarjeta { display: flex; flex-direction: column; gap: .75rem; }
.qp-mover .qp-tarjeta h2, .qp-mover .qp-tarjeta p { margin: 0; }
.qp-lineas-mover { flex: none; min-height: 0; overflow: visible; }
.qp-lineas-mover .qp-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .25rem 1rem; }
.qp-lineas-mover .qp-linea-detalle { grid-column: 1; }
.qp-lineas-mover .qp-rotulo { margin: 0; }
.qp-lineas-mover .qp-casilla { grid-column: 2 / 4; justify-self: end; }
.qp-gaveta { justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--qp-borde); }

.qp-tabla { width: 100%; border-collapse: collapse; }
.qp-tabla th, .qp-tabla td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--qp-borde); }
.qp-tabla th { font-size: .85rem; color: var(--qp-tenue); }
.qp-tabla .qp-num { text-align: right; font-variant-numeric: tabular-nums; }
.qp-tabla .qp-campo-numero { width: 8.5rem; text-align: right; }
.qp-diferencia { font-weight: 700; color: var(--qp-peligro); }

.qp-cuenta-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ------------------------------- tablet vertical y teléfono: una sola columna */
@media (max-width: 900px) {
    .qp-pantalla-cobro .qp-cuerpo { overflow: auto; }
    .qp-cobro { display: block; height: auto; }
    .qp-cobro-papel, .qp-cobro-acciones { overflow: visible; border: none; }
    .qp-lineas-mover .qp-linea { grid-template-columns: minmax(0, 1fr) auto; }
    .qp-pantalla-pedido .qp-cuerpo { overflow: auto; }
    .qp-pedido { display: block; height: auto; }
    .qp-col-carta, .qp-col-productos, .qp-col-cuenta { overflow: visible; border: none; border-bottom: 1px solid var(--qp-borde); }
    .qp-pestanas-grupo, .qp-agrupaciones { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .qp-lineas { max-height: none; }
}