body.app-body {
    min-width: 320px;
    background: var(--gaira-bg, #f4f7f9);
    color: var(--gaira-text, #1f2933);
}

.app-navbar {
    background: linear-gradient(115deg, #005b7f 0%, #0076a3 58%, #036b8f 100%);
    box-shadow: 0 .25rem .75rem rgba(0, 42, 59, .18);
}

.app-navbar .navbar-brand { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.app-navbar .nav-link {
    border-radius: .375rem;
    color: rgba(255, 255, 255, .9);
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.show { color: #062f3e; background: var(--gaira-teal, #04cfcf); }
.app-navbar .navbar-toggler {
    min-width: 3rem;
    min-height: 3rem;
    border-radius: .7rem;
    touch-action: manipulation;
}
.app-navbar .nav-link,
.app-navbar .dropdown-item {
    display: flex;
    min-height: 3rem;
    align-items: center;
    touch-action: manipulation;
}
.app-navbar .nav-link { padding-top: .75rem; padding-bottom: .75rem; }
.app-navbar .dropdown-item { white-space: normal; }
.app-navbar .dropdown-menu { border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); }
.app-navbar .dropdown-item { font-size: .8125rem; font-weight: 600; text-transform: uppercase; }

.app-mobile-quick-links { margin: .75rem 0 1rem; }
.app-mobile-quick-links__title {
    margin-bottom: .5rem;
    color: rgba(255, 255, 255, .72);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.app-mobile-quick-link {
    min-height: 3.25rem;
    justify-content: flex-start;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-align: left;
    touch-action: manipulation;
}
.app-mobile-quick-link:hover,
.app-mobile-quick-link:focus { border-color: #fff; background: rgba(255, 255, 255, .16); color: #fff; }

.app-brand-mark {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--gaira-teal, #04cfcf);
    color: #063b4c;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: -.05em;
}
.app-brand-mark--large { width: 3.5rem; height: 3.5rem; border-radius: 1rem; font-size: 1rem; }
.app-user-meta { display: flex; flex-direction: column; color: rgba(255, 255, 255, .8); font-size: .75rem; line-height: 1.35; text-align: right; }
.app-user-name { color: #fff; font-weight: 700; }
.app-main { min-height: calc(100vh - 4.5rem); padding: 1.5rem 0 3rem; }
.app-container { max-width: 1600px; margin: 0 auto; }

.app-card { border: 1px solid var(--gaira-border, #d9e2e8); border-radius: .875rem; box-shadow: 0 .5rem 1.25rem rgba(31, 41, 51, .08); }
.app-card-header { background: linear-gradient(135deg, var(--gaira-blue, #0076a3), #005b7f); color: #fff; }
.app-login-card { overflow: hidden; }
.app-login-card .form-label { font-weight: 600; }
.app-login-card .btn-primary { background-color: var(--gaira-blue, #0076a3); border-color: var(--gaira-blue, #0076a3); }
.app-login-card .btn-primary:hover,
.app-login-card .btn-primary:focus { background-color: #005b7f; border-color: #005b7f; }
.app-body--login .app-main { min-height: 100vh; padding: 0; }
.app-body--login { background: radial-gradient(circle at top right, rgba(4, 207, 207, .12), transparent 40%), var(--gaira-bg, #f4f7f9); }

@media (max-width: 991.98px) {
    .app-user-meta { margin: .75rem 0 .25rem; text-align: left; }
    .app-navbar .nav-link { padding-left: .75rem; padding-right: .75rem; }
    .app-navbar .navbar-collapse { max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
    .app-navbar .app-nav-item--quick { display: none; }
    /* Fallback del componente collapse/dropdown si Bootstrap no pudo cargar
     * desde CDN; las clases son compatibles con Bootstrap 5.3. */
    .app-navbar .navbar-collapse:not(.show) { display: none; }
    .app-navbar .navbar-collapse.show { display: block; }
    .app-navbar .dropdown-menu:not(.show) { display: none; }
    .app-navbar .dropdown-menu.show { display: block; }
}

@media (min-width: 992px) {
    /* Evita que el menú largo desborde el viewport en escritorio. */
    .app-navbar .navbar-collapse { min-width: 0; }
    .app-navbar .navbar-nav { flex-wrap: wrap; row-gap: .2rem; }
}

/* Tablero de mesas: los estados y sus colores siguen la especificación POS. */
.mesa-board { max-width: 100%; }
.mesa-board__eyebrow {
    color: var(--gaira-blue, #0076a3);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.mesa-board__title { color: #17202a; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; text-transform: uppercase; }
.mesa-board__add { min-height: 3rem; background: var(--gaira-blue, #0076a3); border-color: var(--gaira-blue, #0076a3); font-weight: 700; touch-action: manipulation; }
.mesa-board__nav-action { min-height: 3rem; touch-action: manipulation; }
.mesa-board__add:hover, .mesa-board__add:focus { background: #005b7f; border-color: #005b7f; }
.mesa-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.mesa-legend__item { display: inline-flex; align-items: center; gap: .4rem; color: #52606d; font-size: .8125rem; font-weight: 600; }
.mesa-legend__swatch { width: .75rem; height: .75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.mesa-grid > [class*="col-"] { min-width: 0; }
.mesa {
    display: flex;
    min-height: 190px;
    overflow: hidden;
    border: 0;
    border-radius: 1.25rem;
    color: #fff;
    box-shadow: 0 .5rem 1rem rgba(31, 41, 51, .15);
    transition: transform .2s ease, box-shadow .2s ease;
}
.mesa:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.35rem rgba(31, 41, 51, .2); }
.mesa-card__body { display: flex; width: 100%; flex-direction: column; padding: 1.1rem; }
.mesa-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 2px solid currentColor; border-radius: 50%; font-size: 1rem; }
.mesa-card__state { padding: .35rem .6rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.mesa-card__title { margin: 1rem 0 .25rem; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.mesa-card__category { align-self: flex-start; margin-bottom: .45rem; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .2); color: inherit; font-size: .7rem; letter-spacing: .04em; }
.mesa-card__detail { margin: 0; font-size: .77rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mesa-card__description { margin: .65rem 0 0; min-height: 1.25rem; font-size: .9rem; line-height: 1.35; opacity: .92; overflow-wrap: anywhere; }
.mesa-card__capacity { margin: .7rem 0 0; font-size: .82rem; font-weight: 600; opacity: .95; }
.mesa-card__waiter { margin: .65rem 0 0; font-size: .8rem; font-weight: 700; line-height: 1.3; opacity: .95; overflow-wrap: anywhere; }
.mesa-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.mesa-action { min-height: 3rem; border-radius: .7rem; font-size: .82rem; font-weight: 700; touch-action: manipulation; }
.mesa-action--primary { flex: 1; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .96); color: #17202a; }
.mesa-action--primary:hover, .mesa-action--primary:focus { border-color: #fff; background: #fff; color: #005b7f; }
.mesa-action--secondary { display: inline-flex; width: 3rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .75); color: inherit; }
.mesa-action--secondary:hover, .mesa-action--secondary:focus { border-color: #fff; background: rgba(255, 255, 255, .18); color: inherit; }
.mesa-state-action { display: flex; flex: 1 1 10rem; min-width: 0; }
.mesa-card__actions .mesa-action--secondary { flex: 0 0 3rem; }
.mesa-action--workflow { width: 100%; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .16); color: inherit; white-space: normal; }
.mesa-action--workflow:hover, .mesa-action--workflow:focus { border-color: #fff; background: rgba(255, 255, 255, .28); color: inherit; }
.mesa-action--return { border-color: rgba(254, 243, 199, .95); background: rgba(120, 53, 15, .18); }
.mesa-action--return:hover, .mesa-action--return:focus { border-color: #fef3c7; background: rgba(120, 53, 15, .3); color: inherit; }
.mesa-disponible { background: #16A34A; }
.mesa-pedido { background: #F59E0B; color: #1f2933; }
.mesa-despachado { background: #7C3AED; }
.mesa-entregado { background: #0284C7; }
.mesa-cuenta { background: #DC2626; }
.mesa-pedido .mesa-card__state, .mesa-pedido .mesa-action--secondary { border-color: rgba(31, 41, 51, .4); }
.mesa-pedido .mesa-action--primary { color: #92400e; }
.mesa-filters .form-label { color: #334e68; }
.mesa-filter-control { min-height: 3rem; touch-action: manipulation; }

/* Línea de pedido anulada: permanece visible, tachada y fuera del cobro. */
.pmesa-linea--anulada { opacity: .72; text-decoration-thickness: .12rem; }
.pmesa-linea--anulada td { background-color: #fff1f2 !important; color: #6b7280; }
.pmesa-linea--anulada .badge { text-decoration: none; }

/* POS de pedidos: controles táctiles y respuesta parcial HTMX. */
.pmesa-page { max-width: 1500px; }
.pmesa-product-card .card-body { background: #f8fafc; }
.pmesa-product-card .form-label,
.pmesa-payment-card .form-label { font-weight: 700; color: #334e68; }
.pmesa-product-card .form-control-lg,
.pmesa-product-submit { min-height: 3rem; }
.pmesa-product-submit { font-weight: 700; touch-action: manipulation; }
.pmesa-payment-card .form-control,
.pmesa-payment-card .form-select { min-height: 3rem; }
.pmesa-payment-card .pmesa-payment-icon-action,
.pmesa-payment-card .pmesa-payment-apply { min-width: 3rem; min-height: 3rem; touch-action: manipulation; }
.pmesa-payment-card #pagar { border-color: #86efac; background-color: #f0fdf4; color: #14532d; }
.pmesa-order-card .card-header { background: linear-gradient(135deg, #0076a3, #005b7f); color: #fff; }
.pmesa-state-form { margin: 0; }
.pmesa-state-form .btn { white-space: nowrap; }
.pmesa-quantity-control { max-width: 24rem; }
.pmesa-quantity-btn {
    min-width: 3.25rem;
    min-height: 3rem;
    padding-right: 1rem;
    padding-left: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    touch-action: manipulation;
}
.pmesa-quantity-control .form-control { min-height: 3rem; font-weight: 700; }
.pmesa-action-bar .btn { min-height: 3rem; touch-action: manipulation; }
.pmesa-payment-actions .btn { font-weight: 700; }
.pmesa-table-wrap { overflow-x: auto; }
.pmesa-table { --bs-table-bg: transparent; }
.pmesa-table thead th { white-space: nowrap; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: #52606d; }
.pmesa-table .pmesa-linea td { vertical-align: middle; }
.pmesa-table .pmesa-fecha { white-space: nowrap; font-size: .78rem; }
.pmesa-action { min-width: 3rem; min-height: 3rem; touch-action: manipulation; }
.pmesa-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.pmesa-autocomplete { position: relative; z-index: 20; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 .5rem 1rem rgba(31, 41, 51, .12); }
.pmesa-autocomplete:empty { display: none; }
.pmesa-product-option { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .65rem .75rem; font-size: .95rem; text-align: left; }
.pmesa-summary-row td { background: #f8fafc; font-size: .9rem; }
.pmesa-tip-row input { max-width: 12rem; }
.pago-parcial-card .card-header { background: linear-gradient(135deg, #0b7285, #075985); color: #fff; }
.pago-parcial-lines { max-height: 28rem; overflow-y: auto; }
.pago-parcial-line { border-left: .25rem solid transparent; }
.pago-parcial-line:has(.pago-linea-check:checked) { border-left-color: #198754; background-color: #f0fdf4; }
.pago-parcial-line .form-check-input { width: 1.35rem; height: 1.35rem; }
.pago-parcial-monto { font-variant-numeric: tabular-nums; }
#pmesa-feedback:empty { display: none; }

@media (max-width: 767.98px) {
    .mesa-board__toolbar { margin-bottom: 1.25rem !important; }
    .mesa-board__actions { width: 100%; }
    .mesa-board__actions .mesa-board__nav-action,
    .mesa-board__actions .mesa-board__add { flex: 1 1 100%; }
    .mesa-filter-hint { line-height: 1.35; }
    .mesa-filters .card-body { padding: .85rem; }
    .mesa-filter-control { min-height: 3.25rem; font-size: 1rem; }
    .mesa-card__actions { gap: .6rem; margin-top: .85rem; }
    .mesa-action { min-height: 3.25rem; font-size: .86rem; }
    .mesa-action--secondary,
    .mesa-card__actions .mesa-action--secondary { width: 3.25rem; min-width: 3.25rem; flex-basis: 3.25rem; }
    .mesa-action--workflow { min-height: 3.25rem; }
    .pmesa-page { padding-bottom: 1rem; }
    /* En móvil se mantienen los campos y estados, pero se retiran textos
       explicativos secundarios para que el formulario sea más compacto. */
    .pmesa-mobile-helper { display: none !important; }
    .pmesa-payment-card .card-body { padding: 1rem .85rem; }
    .pmesa-payment-card .row { --bs-gutter-y: .8rem; }
    .pmesa-payment-card .form-label { margin-bottom: .3rem; font-size: .92rem; }
    .pmesa-payment-card .form-control,
    .pmesa-payment-card .form-select { min-height: 3.25rem; font-size: 1rem; }
    .pmesa-payment-card .pmesa-payment-icon-action,
    .pmesa-payment-card .pmesa-payment-apply { min-width: 3.25rem; min-height: 3.25rem; }
    .pmesa-payment-actions { gap: .6rem !important; }
    .pmesa-payment-actions .btn { min-height: 3.25rem; }
    .pmesa-product-card { position: relative; }
    .pmesa-product-card .card-body { padding: .85rem; }
    .pmesa-product-card .form-label { margin-bottom: .35rem; font-size: .95rem; }
    .pmesa-product-card .form-control-lg,
    .pmesa-product-submit { min-height: 3.25rem; }
    .pmesa-product-submit { font-size: 1rem; }
    .pmesa-state-form { width: 100%; }
    .pmesa-state-form .btn { width: 100%; }
    .pmesa-product-card .form-control-lg { min-height: 3.25rem; }
    .pmesa-quantity-control { max-width: none; }
    .pmesa-quantity-btn { min-width: 3.5rem; min-height: 3.25rem; font-size: 1.5rem; }
    .pmesa-quantity-control .form-control { min-height: 3.25rem; }
    .pmesa-action-bar {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin-right: -.75rem;
        margin-left: -.75rem;
        padding: .75rem;
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -.35rem .9rem rgba(31, 41, 51, .12);
        backdrop-filter: blur(8px);
    }
    .pmesa-action-bar .btn-primary,
    .pmesa-action-bar .btn-outline-primary { flex: 1 1 calc(50% - .5rem); }
    .pmesa-action-bar .btn-outline-danger { flex-basis: 100%; }
    .pmesa-table-wrap { overflow: visible; }
    .pmesa-table,
    .pmesa-table tbody,
    .pmesa-table tfoot,
    .pmesa-table tr,
    .pmesa-table td { display: block; width: 100%; }
    .pmesa-table thead { display: none; }
    .pmesa-table tbody { padding: .25rem 0; }
    .pmesa-table .pmesa-linea {
        margin: .75rem;
        padding: .7rem .85rem;
        border: 1px solid #d9e2ec;
        border-radius: .85rem;
        background: #fff;
        box-shadow: 0 .2rem .65rem rgba(31, 41, 51, .08);
    }
    .pmesa-table .pmesa-linea td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem 0;
        border: 0;
        text-align: right;
    }
    .pmesa-table .pmesa-linea td::before {
        flex: 0 0 auto;
        color: #627d98;
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }
    .pmesa-table .pmesa-linea td[data-label="Producto"] { align-items: flex-start; }
    .pmesa-table .pmesa-linea td[data-label="Producto"]::after { content: none; }
    .pmesa-table .pmesa-linea td[data-label="Acciones"] {
        align-items: center;
        justify-content: flex-end;
        margin-top: .35rem;
        padding-top: .6rem;
        border-top: 1px solid #e5e7eb;
    }
    .pmesa-table .pmesa-linea td[data-label="Acciones"]::before { content: "Acciones"; margin-right: auto; }
    .pmesa-table .pmesa-linea td[data-label="Producto"] { font-size: 1rem; font-weight: 600; }
    .pmesa-table .pmesa-linea td[data-label="Cantidad"],
    .pmesa-table .pmesa-linea td[data-label="Total"] { font-size: 1rem; }
    .pmesa-table .pmesa-linea td[data-label="Acciones"] { gap: .5rem; }
    .pmesa-table .pmesa-linea .pmesa-actions { width: 100%; gap: .5rem; }
    .pmesa-table .pmesa-linea .pmesa-action { min-width: 3.25rem; min-height: 3.25rem; font-size: 1.1rem; }
    .pmesa-table .pmesa-summary-row { margin: .75rem; border: 0; }
    .pmesa-table tfoot .pmesa-summary-row td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .65rem .85rem;
        border: 0;
        text-align: right;
    }
    .pmesa-table tfoot .pmesa-summary-row td::before { content: attr(data-label); font-weight: 700; color: #52606d; text-align: left; }
    .pmesa-table tfoot .pmesa-summary-row td:first-child::before { content: none; }
    .pmesa-table tfoot .pmesa-summary-row td { font-size: 1rem; font-weight: 600; }
    .pmesa-table tfoot .pmesa-tip-row td:first-child::before { content: "Propina"; }
    .pmesa-table tfoot .pmesa-tip-row td:first-child { display: none; }
    .pmesa-table tfoot .pmesa-tip-row td:last-child { display: flex; }
    .pmesa-table tfoot .pmesa-tip-row td:last-child::before { content: "Propina"; }
    .pmesa-tip-row input { max-width: 10rem; }
    .pmesa-payment-card { margin-bottom: 1rem; }
    .pago-parcial-lines { max-height: none; overflow: visible; }
    .pago-parcial-line .input-group { min-width: 8rem; }
}

@media (max-width: 575.98px) {
    .mesa { min-height: 175px; }
    .mesa-card__body { padding: 1rem; }
    .mesa-card__state { font-size: .63rem; }
}