/* ============================================================
   erp-niceeat.css — Interfaz ERP Niceeat
   Sistema de clases reutilizables · Dark/Light mode · Rem
   ============================================================ */


/* ── 1. VARIABLES GLOBALES ───────────────────────────────── */
:root {
    /* Layout */
    --sidebar-closed: 6.8rem;
    --sidebar-open: 26rem;
    --header-h: 5.6rem;
    --nav-speed: .28s;
    --ease: .18s ease;

    /* Border radius */
    --r-xs: .4rem;
    --r-sm: .6rem;
    --r-md: .8rem;
    --r-lg: 1.2rem;
    --r-xl: 1.6rem;
    --r-full: 10rem;

    /* Brand */
    --violet: #6900CC;
    --strawberry: #F60076;
    --yellow: #FFCB03;
    --orange: #FF5F00;
    --purple: #A700CC;
    --green: #22C55E;
    --red: #EF4444;
    --white: #FFFFFF;

    /* Fonts */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Z-index layers */
    --z-content: 1;
    --z-header: 100;
    --z-nav: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* Dark theme (default) */
:root,
[data-theme="dark"] {
    --bg-base: #151224;
    --bg-nav: #1C1830;
    --bg-nav-sub: rgba(0, 0, 0, .18);
    --bg-header: #1C1830;
    --bg-surface: #231F3A;
    --bg-surface-2: rgba(255, 255, 255, .03);
    --bg-hover: rgba(255, 255, 255, .06);
    --bg-active: rgba(246, 0, 118, .12);
    --bg-input: rgba(255, 255, 255, .06);
    --bg-content: #141126;

    --border: rgba(255, 255, 255, .08);
    --border-focus: rgba(105, 0, 204, .50);

    --txt-primary: var(--white);
    --txt-secondary: rgba(255, 255, 255, .60);
    --txt-muted: rgba(255, 255, 255, .30);
    --txt-nav: rgba(255, 255, 255, .62);
    --txt-nav-hover: var(--white);
    --txt-content: #F3EFFB;
    --txt-content-2: rgba(243, 239, 251, .68);

    --shadow-nav: 4px 0 32px rgba(0, 0, 0, .45);
    --shadow-header: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 12px rgba(0, 0, 0, .30);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .20);
    --shadow-btn: 0 2px 8px rgba(0, 0, 0, .20);
    --module-surface: #1B1730;
    --module-border: rgba(255, 255, 255, .08);
    --module-shadow: none;
    --module-title: var(--white);

    --scroll-track: transparent;
    --scroll-thumb: rgb(28 24 48 / 49%);
    --scroll-hover: rgb(0 0 0 / 12%);
}

/* Light theme */
[data-theme="light"] {
    --bg-base: #F0EEF8;
    --bg-nav: var(--white);
    --bg-nav-sub: rgba(105, 0, 204, .04);
    --bg-header: var(--white);
    --bg-surface: #F8F6FF;
    --bg-surface-2: rgba(0, 0, 0, .02);
    --bg-hover: rgba(105, 0, 204, .05);
    --bg-active: rgba(246, 0, 118, .08);
    --bg-input: rgba(0, 0, 0, .04);
    --bg-content: #F5F3FF;

    --border: rgba(0, 0, 0, .09);
    --border-focus: rgba(105, 0, 204, .40);

    --txt-primary: #151224;
    --txt-secondary: rgba(21, 18, 36, .65);
    --txt-muted: rgba(21, 18, 36, .50);
    --txt-nav: rgba(21, 18, 36, .68);
    --txt-nav-hover: #151224;
    --txt-content: #151224;
    --txt-content-2: rgba(21, 18, 36, .90);

    --shadow-nav: 1px 0 0 var(--border), 4px 0 16px rgba(0, 0, 0, .07);
    --shadow-header: 0 1px 0 var(--border), 0 2px 8px rgba(0, 0, 0, .05);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .06);
    --shadow-btn: 0 2px 6px rgba(0, 0, 0, .10);
    --module-surface: var(--white);
    --module-border: rgba(21, 18, 36, .10);
    --module-shadow: 0 10px 24px rgba(21, 18, 36, .07);
    --module-title: #151224;

    --scroll-track: transparent;
    --scroll-thumb: rgba(0, 0, 0, .10);
    --scroll-hover: rgba(0, 0, 0, .20);
}


/* ── 2. BASE ─────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

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

body {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: var(--fw-regular);
    line-height: 1.5;
    background: var(--bg-base);
    color: var(--txt-primary);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    /* evita scroll en body, el scroll va en moduleContainer-content */
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin: 0;
}

/* Scrollbar global */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: var(--r-full);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover);
}

/* ── Orders Sidebar (migrado de app.css y company.css) ─────────────────── */
.close-deliverySidebar {
    background: transparent;
    color: #dadada;
    font-size: 3rem;
}

.orderResume {
    font-family: var(--font-body);
    color: #dadada;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    right: -44rem;
    width: 100%;
    max-width: 44rem;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, .6);
    background-color: #1c1830;
    overflow-x: hidden;
    transition: .3s;
    padding-bottom: 2.4rem;
    overflow-y: overlay;
}

.orderResume::-webkit-scrollbar {
    display: none;
}

.app_posCart .orderResume__header {
    display: none;
}

.orderResume__header {
    padding: 2.4rem 2.4rem 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orderResume__header-logo h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
}

.orderDivider {
    border-bottom: .1rem solid rgba(255, 255, 255, .15);
}

.order_optionTitle {
    padding: 1.2rem 2.4rem;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(255, 255, 255, .04);
    margin-bottom: 1.6rem;
}

.order-option {
    padding: 0 2.4rem 1.6rem;
    display: grid;
    grid-gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(.5rem, 1fr));
    align-items: center;
}

.order-optionButton {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
    line-height: 1.2em;
    padding: 1rem 1rem !important;
    width: 100%;
    display: flex !important;
    gap: .8rem !important;
    flex-direction: column;
}

.order-optionButton:hover {
    background-color: rgba(255, 255, 255, .10);
}

.order__timeAmount {
    padding: 0 2.4rem 1.6rem;
}

.order-userInfo,
.order-items,
.order_totalContainer,
.order_promoCode,
.order_fidelityQty {
    padding: 0 2.4rem;
}

.order-continue {
    padding: 1.6rem 2.4rem;
}

.order__userdata {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: 1.4rem;
    line-height: 1.4em;
}

.order__iconU {
    height: 3.6rem;
    width: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order__iconU i {
    font-size: 2.2rem;
}

.order__addressContainer {
    width: 30rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order_niceeatButton {
    padding: 0 2.4rem;
}

.order-account {
    background: linear-gradient(90deg, #f31197 18.06%, #a755d6 60.19%, #7437bc 100%);
    padding: 1rem;
    font-size: 1.6rem;
    font-weight: 500;
    border-radius: 3.2rem;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.order-account img {
    width: 3.2rem;
    margin-right: .6rem;
}

.order__Items-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.order__Items-list .order-item {
    padding: 1rem 0 1.6rem;
}

.order-items,
.order_promoCode,
.order_fidelityQty,
.order__Items-list,
.order__Items-list .order-item,
.orderAddons,
.order_table_pricing,
.order_table_total,
.order-continue,
.order-userInfo,
.order_optionTitle,
.order__userdata,
.order_itemDescription h3,
.order_itemPrice {
    font-family: var(--font-body);
}

.order__Items-list .orderItemDetails {
    display: flex;
    justify-content: space-between;
}

.order__Items-list .orderItemDetails .order_itemAmount {
    font-weight: 600;
    margin-right: 1rem;
}

.order__Items-list .orderItemDetails .order_itemDescription {
    width: 100%;
    max-width: 30rem;
}

.order__Items-list .orderItemDetails .order_itemDescription h3 {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3em;
    display: grid;
    grid-template-columns: auto 1fr;
}

.order__Items-list .orderItemDetails .order_itemPrice {
    text-align: right;
    width: 10rem;
}

.orderAddons {
    display: flex;
    justify-content: space-between;
}

.orderAddons .order_addonsDescription {
    width: 100%;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.45;
}

.orderAddons .order_addonsPrice {
    width: 10rem;
    text-align: right;
    font-size: 1.3rem;
}

.order__buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, auto));
    grid-gap: 1.6rem;
    justify-content: flex-start;
    align-items: center;
}


.order__buttonsEdit a,
.order__buttonsDelete a {
    background-color: var(--violet);
    border-radius: .5rem;
    color: #fff;
    display: inline-block;
    padding: .8rem 1rem;
    text-decoration: none;
    line-height: 1em;
    font-size: 1.4rem;
}

.order__buttonsDelete a {
    background: transparent;
    font-size: 2rem;
    padding: 0;
}

.order_infoContainer {
    border: 0;
    padding: .4rem 1.6rem;
}

.order-noitems i {
    font-size: 7.2rem;
    padding: 0;
}

.order-conditions {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .60);
    padding: 0 2.4rem;
    margin-top: 1.6rem;
}

table.order_table_pricing,
table.order_table_total {
    width: 100%;
}

table.order_table_pricing td,
table.order_table_total td {
    padding: .8rem;
}

.tableTextRight {
    text-align: right;
}

.nice__coins {
    background: #2c2154;
    color: #fff;
    margin: 2.4rem;
    border-radius: 2.4rem;
}

#promoapplied {
    padding: 1rem 0 0;
    display: inline-block;
    color: #22c55e;
}

.order_promoCode a {
    color: #ef4444;
    font-weight: 500;
    margin: 0 1rem;
    text-decoration: underline;
}

.order_detailsContainer {
    padding: 0 2.4rem;
}

/* POS sidebar version */
.app__orders-cart {
    background-color: #1c1830;
    color: #dadada;
    height: calc(100vh - 12rem);
    margin-top: -1px;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    position: relative;
    overflow: auto;
    white-space: normal;
}

.app_posCart {
    position: relative;
    right: 0;
    width: 100%;
    height: 100%;
    box-shadow: none;
    z-index: 98;
    background-color: #1c1830;
    color: #dadada;
}

.orderResumePos {
    font-family: var(--font-body);
    height: 100%;
    position: relative;
    z-index: 100;
    right: 0;
    width: 100%;
    max-width: 44rem;
    overflow-x: hidden;
    transition: .3s;
    padding-bottom: 2.4rem;
    overflow-y: overlay;
    background-color: #1c1830 !important;
    color: #dadada !important;
}

.app_posCart .order-items {
    padding: 0 2.4rem;
}

.order-noitems {
    padding: 3.2rem 2.4rem;
}

.app_posCart .order_promoCode,
.app_posCart .order-userInfo {
    padding: 1rem 2.4rem;
}

.delivery_price_container {
    padding: 0 .8rem .8rem;
}

.app_posCart .delivery_price_container input,
.app_posCart .discount_price_container input {
    max-width: 14rem;
    display: flex;
    justify-self: flex-end;
}

.hdn-pos {
    display: none !important;
}

.app__orders-cart .order_totalfinalContainer {
    background: transparent;
    color: #fff;
    padding: .3rem 2.5rem;
    margin-bottom: 2.4rem;
}

.order_table_pricing .form-control[disabled],
.order_table_pricing .form-control[readonly],
fieldset[disabled] .form-control {
    background-color: rgb(35 32 49) !important;
    color: #e0e0e0 !important;
}

@media (max-width: 800px) {
    .orderResume {
        width: 100%;
    }

    .order_promoCode button {
        font-size: 1.6rem;
    }

    .order_optionTitle {
        font-size: 1.6rem;
    }

    .orderAddons {
        font-size: 1.3rem;
    }

    .app__orders-cart {
        position: fixed;
        right: -60rem;
        top: 0;
        height: 100%;
        overflow-x: hidden;
        transition: .3s;
        z-index: 2000;
    }

    .orderResume__header {
        display: flex !important;
        padding-top: 2.4rem;
    }

    .app_posCart {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        right: -80rem;
        z-index: 100;
        padding-top: 0;
        padding-bottom: 8rem;
        bottom: 0;
        overflow-y: overlay;
    }
}

/* Keep both order sidebars visually fixed (theme toggle should not recolor controls) */
:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) {
    background-color: #1c1830 !important;
    color: #dadada;
}

/* POS body must switch with theme, while sidebars remain dark */
[data-theme="dark"] .app__container-bodyPos,
body.dark .app__container-bodyPos {
    background: #151224 !important;
}

[data-theme="light"] .app__container-bodyPos,
body:not(.dark) .app__container-bodyPos {
    background: #f3f4f8;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    textarea,
    select,
    .form-control,
    select.form-control,
    textarea.form-control) {
    background: #2a2540 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #f2efff !important;
    -webkit-text-fill-color: #f2efff;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(input, textarea, select, .form-control)::placeholder {
    color: rgba(242, 239, 255, .66) !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(select, select.form-control):not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E9E5FF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(select option, select optgroup) {
    background: #2a2540;
    color: #f2efff !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(input:disabled,
    textarea:disabled,
    select:disabled,
    .form-control[disabled],
    .form-control[readonly]) {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .20) !important;
    color: rgba(242, 239, 255, .82) !important;
    -webkit-text-fill-color: rgba(242, 239, 255, .82);
    opacity: 1;
}

/* Sidebar buttons: same base style even outside .appnice_main */
:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .n-btn {
    min-height: 4rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #fff !important;
    padding: 0 1.2rem;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .n-btn i {
    font-size: 1.8rem;
    line-height: 1;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .n-btn:hover {
    border-color: rgba(255, 255, 255, .22) !important;
    background: rgba(255, 255, 255, .08) !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(.btn-nice, .btn-niceOrders, .bg-nice, .bg-nice2) {
    background: var(--violet) !important;
    border-color: var(--violet) !important;
    color: #fff !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .btn-fw {
    width: 100%;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(.n-btn, .btn-nice, button.order-optionButton) {
    color: #fff !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .order-optionButton {
    background-color: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .order-optionButton:hover {
    background-color: rgba(255, 255, 255, .10) !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) .btn-nice:hover {
    filter: brightness(1.05);
}

/* Hard lock: sidebar text stays light in both dark/light app themes */
:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart),
:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) * {
    color: #dadada !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(.n-btn,
    .btn-nice,
    .order-optionButton,
    .order_optionTitle i,
    .order__iconU i,
    .close-deliverySidebar) {
    color: #fff !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(#promoapplied, #fidelityQtyApplied) {
    color: #22c55e !important;
}

:where(.orderResume, .orderResumePos, .app_posCart, .app__orders-cart) :is(.order_promoCode a, #removeFidelityQty) {
    color: #ef4444 !important;
}


/* ── 3. HEADER ───────────────────────────────────────────── */
.appnice_header {
    position: fixed;
    top: 0;
    left: var(--sidebar-closed);
    right: 0;
    height: var(--header-h);
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: var(--bg-header);
    box-shadow: var(--shadow-header);
    transition: left var(--nav-speed) cubic-bezier(.4, 0, .2, 1);
}

/* When sidebar is expanded (hover), header left margin shifts */
html.appnav-expanded .appnice_header {
    left: var(--sidebar-open);
}

/* When sidebar is pinned open, header shifts too */
html.appnav-pinned .appnice_header {
    left: var(--sidebar-open);
}

.header-start {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.header-end {
    display: flex;
    align-items: center;
    gap: .4rem;
}

body.logged .appnice_layout {
    grid-template-columns: 0 minmax(0, 1fr);
}

.appnice_layout .nice__appContainer-nav {
    min-width: 0;
    width: 0;
}

/* Icon buttons in header */
.header-icon-btn {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt-secondary);
    font-size: 1.8rem;
    transition: background var(--ease), color var(--ease);
}

.header-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--txt-primary);
}

/* User avatar */
.header-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--violet), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    color: var(--white);
    margin-left: .4rem;
    transition: opacity var(--ease);
}

.header-avatar:hover {
    opacity: .85;
}

.header-avatar-btn {
    margin-left: .4rem;
    border: none;
    padding: 0;
    transition: opacity var(--ease), transform var(--ease), box-shadow var(--ease);
}

.header-avatar-btn:hover,
.header-avatar-btn[aria-expanded="true"] {
    opacity: 1;
    transform: translateY(-.1rem);
    box-shadow: 0 0 0 .2rem var(--bg-hover);
}

/* Avatar con imagen */
.header-avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--r-full);
    object-fit: cover;
}


/* ── 4. SIDEBAR / NAVBAR ─────────────────────────────────── */
.appnice_navbar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-closed);
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    background: var(--bg-nav);
    box-shadow: var(--shadow-nav);
    overflow: hidden;
    transition: width var(--nav-speed) cubic-bezier(.4, 0, .2, 1);
}

/* Expandido por hover */
.appnice_navbar:hover {
    width: var(--sidebar-open);
}

/* Fijado abierto */
.appnice_navbar.is-pinned {
    width: var(--sidebar-open);
}

/* Textos y elementos ocultos en colapsado */
.nav-label,
.nav-chevron,
.navbar-name,
.navbar-pin-btn {
    opacity: 0;
    white-space: nowrap;
    transition: opacity .15s ease;
    pointer-events: none;
}

.appnice_navbar:hover .nav-label,
.appnice_navbar:hover .nav-chevron,
.appnice_navbar:hover .navbar-name,
.appnice_navbar:hover .navbar-pin-btn,
.appnice_navbar.is-pinned .nav-label,
.appnice_navbar.is-pinned .nav-chevron,
.appnice_navbar.is-pinned .navbar-name,
.appnice_navbar.is-pinned .navbar-pin-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Overlay mobile para cerrar el nav al hacer click fuera */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    background: rgba(0, 0, 0, .50);
    backdrop-filter: blur(.2rem);
}

/* ── Navbar brand ── */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0 1.2rem;
    height: var(--header-h);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* Logo — div con background-image */
.navbar-logo {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    border-radius: var(--r-md);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Cuando el logo es un <img> */
.navbar-logo img {
    width: 100%;
    height: 100%;
    border-radius: var(--r-md);
    object-fit: cover;
}

.navbar-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Botón pin (fijar / liberar sidebar) ── */
.navbar-pin-btn {
    width: 2.8rem;
    height: 2.8rem;
    min-width: 2.8rem;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center !important;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: rgba(255, 255, 255, .60) !important;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: background var(--ease), color var(--ease), opacity .15s ease;
}

.navbar-pin-btn:hover {
    background: rgba(105, 0, 204, .18);
    color: var(--violet);
    border-color: rgba(105, 0, 204, .35);
}

/* Estado fijado */
.appnice_navbar.is-pinned .navbar-pin-btn {
    background: var(--violet);
    color: var(--white);
    border-color: var(--violet);
    opacity: 1;
}

/* ── Navbar scroll area ── */
.navbar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .8rem 0;
}

/* ── Nav items ── */
.nav-item {
    margin: .2rem .6rem;
}

/* Nav link base */
.nav-link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem .8rem;
    border-radius: var(--r-md);
    color: var(--txt-nav);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    width: 100%;
    transition: background var(--ease), color var(--ease);
    position: relative;
    min-height: 4.2rem;
}

/* Cuando está expandido (hover o pinned), alinear a la izquierda */
.appnice_navbar:hover .nav-link,
.appnice_navbar.is-pinned .nav-link {
    justify-content: flex-start;
    padding: 1rem 1.2rem;
}

.nav-link:hover {
    background: var(--bg-hover);
    color: var(--txt-nav-hover);
}

/* Nav item activo */
.nav-item.is-active>.nav-link,
.nav-link.is-active {
    background: var(--strawberry);
    color: var(--white);
    font-weight: var(--fw-semibold);
}

.nav-item.is-active>.nav-link .nav-icon,
.nav-link.is-active .nav-icon {
    color: var(--white);
}

/* Nav icon */
.nav-icon {
    width: 3.6rem;
    height: 3.6rem;
    min-width: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    color: var(--txt-secondary);
    transition: color var(--ease);
}

.nav-link:hover .nav-icon {
    color: var(--txt-primary);
}

/* Chevron del submenú */
.nav-chevron {
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--txt-muted);
    transition: transform var(--ease), opacity .15s ease;
    flex-shrink: 0;
}

.nav-item.is-open>.nav-link .nav-chevron {
    transform: rotate(180deg);
}

/* ── Submenú ── */
.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s cubic-bezier(.4, 0, .2, 1);
    padding: 0 0 0 4.4rem;
}

.nav-item.is-open .nav-submenu {
    max-height: 60rem;
}

/* Submenú items */
.nav-sublink {
    display: block;
    padding: .8rem 1.2rem;
    border-radius: var(--r-sm);
    font-size: 1.35rem;
    color: var(--txt-nav);
    transition: background var(--ease), color var(--ease);
    margin-bottom: .1rem;
    white-space: nowrap;
}

.nav-sublink:hover {
    background: var(--bg-hover);
    color: var(--txt-nav-hover);
}

.nav-sublink.is-active {
    background: var(--bg-active);
    color: var(--strawberry);
    font-weight: var(--fw-semibold);
}

/* Indicador del módulo activo (punto en collapsed) */
.nav-item.is-active>.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .3rem;
    height: 2.4rem;
    border-radius: 0 var(--r-full) var(--r-full) 0;
    background: var(--strawberry);
}

/* ── Navbar section label (separador) ── */
.nav-section-label {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-muted);
    padding: 1.6rem 2rem .6rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s ease;
}

.appnice_navbar:hover .nav-section-label {
    opacity: 1;
}

/* Separador horizontal */
.nav-divider {
    height: 1px;
    background: var(--border);
    margin: .8rem 1.2rem;
}

/* ── Navbar footer ── */
.navbar-footer {
    flex-shrink: 0;
    padding: .8rem;
    border-top: 1px solid var(--border);
}

.nav-logout {
    background: linear-gradient(135deg, var(--violet), var(--purple));
    color: var(--white) !important;
}

.nav-logout:hover {
    background: linear-gradient(135deg, var(--purple), var(--violet));
    opacity: .90;
}

.nav-logout .nav-icon {
    color: var(--white) !important;
}

/* Header + navbar fijos en dark, incluso cuando el contenido va en light */
[data-theme="light"] body.logged .appnice_header {
    background: #1C1830;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 12px rgba(0, 0, 0, .30);
}

[data-theme="light"] body.logged .appnice_header .header-icon-btn {
    color: rgba(255, 255, 255, .72);
}

[data-theme="light"] body.logged .appnice_header .header-icon-btn:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--white);
}

[data-theme="light"] body.logged .appnice_navbar {
    background: #1C1830;
    box-shadow: 4px 0 32px rgba(0, 0, 0, .45);
}

[data-theme="light"] body.logged .appnice_navbar .navbar-brand {
    border-bottom-color: rgba(255, 255, 255, .08);
}

[data-theme="light"] body.logged .appnice_navbar .navbar-name {
    color: var(--white);
}

[data-theme="light"] body.logged .appnice_navbar .nav-link {
    color: rgba(255, 255, 255, .65);
}

[data-theme="light"] body.logged .appnice_navbar .nav-icon {
    color: rgba(255, 255, 255, .62);
}

[data-theme="light"] body.logged .appnice_navbar .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--white);
}

[data-theme="light"] body.logged .appnice_navbar .nav-link:hover .nav-icon {
    color: var(--white);
}

[data-theme="light"] body.logged .appnice_navbar .nav-sublink {
    color: rgba(255, 255, 255, .64);
}

[data-theme="light"] body.logged .appnice_navbar .nav-sublink:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--white);
}

[data-theme="light"] body.logged .appnice_navbar .nav-sublink.is-active {
    background: rgba(246, 0, 118, .12);
    color: #FF4CA6;
}

[data-theme="light"] body.logged .appnice_navbar .nav-chevron,
[data-theme="light"] body.logged .appnice_navbar .nav-section-label {
    color: rgba(255, 255, 255, .40);
}

[data-theme="light"] body.logged .appnice_navbar .nav-divider {
    background: rgba(255, 255, 255, .08);
}


/* ── 5. MAIN Y MÓDULO ────────────────────────────────────── */
.appnice_main {
    margin-left: var(--sidebar-closed);
    margin-top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden;
    /* scroll vertical habilitado */
    display: flex;
    flex-direction: column;
    background: var(--bg-content);
    color: var(--txt-content);
    transition: margin-left var(--nav-speed) cubic-bezier(.4, 0, .2, 1);
}

/* COPYRIGHT */
.nice__copyright {
    font-size: 1.3rem;
    font-weight: 500;
    align-items: center;
    display: grid;
    justify-content: flex-start;
    gap: 1rem;
}

.nice__copyright a {
    display: inline-block;
}

/* El navbar ERP es fijo y se superpone; el main no reserva gutter lateral */
html.appnav-pinned .appnice_main,
html.appnav-expanded .appnice_main {
    margin-left: var(--sidebar-open);
}

/* En sitios públicos sin sesión, no desplazar contenido por sidebar ERP */
body.master-sites.not-logged .appnice_main {
    margin-left: 0;
    height: 100vh;
    margin-top: 0 !important;
}

.app_nice-moduleContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* NO overflow:hidden aquí — dejar que moduleContainer-content scrollee */
}

/* Barra título del módulo */
.appnice_moduleContainer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 0 2rem;
    height: 5.6rem;
    flex-shrink: 0;
    background: var(--bg-content);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    flex-wrap: wrap;
}

[data-theme="dark"] .appnice_moduleContainer-title {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.module-heading {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    color: var(--txt-content);
    white-space: nowrap;
}

.module-actions {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}

/* Área de contenido del módulo */
.appnice_moduleContainer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1.2rem 1.2rem;
}


/* ── 5.1 BASE MÓDULOS LEGACY (REUTILIZABLE) ─────────────── */
.appnice_main .app-container {
    padding: 0;
    background: var(--module-surface);
    border-radius: var(--r-lg);
}

.appnice_main .app-container>.module {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.appnice_main .app__container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.6rem 2.4rem;
    border-bottom: 0;
    background: var(--module-surface);
    color: var(--module-title);
}

.appnice_main .app__module-header {
    color: var(--module-title);
}

.appnice_main .app__container-header-title h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    color: var(--module-title);
    letter-spacing: -.01em;
    margin: 0;
}

.appnice_main .app__container-header-navbar {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.appnice_main .app__container-header-navbar>a,
.appnice_main .app__container-header-navbar>button {
    display: inline-flex;
    align-items: center;
}

.n-btn {
    min-height: 4rem;
    border-radius: var(--r-md);
    border: 1px solid var(--module-border);
    background: var(--bg-surface);
    color: var(--module-title);
    padding: 0 1.2rem;
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
    display: inline-flex;
    gap: 0.8rem;
    align-items: center;
}

.n-btn i {
    font-size: 2rem;
    line-height: 1em;
    height: 2rem;
    width: 2rem;
}

.btn-nice {
    color: var(--white) !important;
    background: var(--violet) !important;
}

.appnice_main .app__container-header-navbar .n-btn i,
.appnice_main .app__container-header-navbar .n-btn .btn__icon {
    color: currentColor;
    fill: currentColor;
}

.order__detailLink,
.action__detailLink {
    text-decoration: none;
}

.order__detailLink button,
.action__detailLink button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-purple-light);
    border-radius: 1.2rem;
    padding: 1rem;
    color: var(--violet);
    height: 4rem;
}

[data-theme="dark"] .appnice_main .app__container-header-navbar .n-btn {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .14);
    color: #FFFFFF;
}

[data-theme="light"] .appnice_main .app__container-header-navbar .n-btn {
    background: #FFFFFF;
    border-color: rgba(21, 18, 36, .14);
    color: #151224;
}

.appnice_main .app__container-header-navbar .n-btn:hover {
    background: var(--bg-hover);
    border-color: rgba(105, 0, 204, .30);
    transform: translateY(-1px);
}

.appnice_main .nice__breadcrumbs {
    margin-bottom: .8rem;
    color: var(--txt-content-2);
    font-size: 1.25rem;
}

.appnice_main .app__containerSmalltitle {
    color: var(--txt-content);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2em;
    margin-bottom: 2.4rem;
}

.appnice_main .app__containerBilling-filter {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
}

.appnice_main .app__container-title {
    display: flex;
    align-items: center;
    font-weight: var(--fw-medium);
    color: var(--txt-content-2);
}

.appnice_main .app__container-header-meses {
    min-width: 13rem;
}

.appnice_main .app__container-header-meses .form-control {
    min-width: 13rem;
}

/* ERP form controls */
.appnice_main .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

.appnice_main .select2-selection--multiple:not([class*=bg-]):not([class*=border-]),
.appnice_main .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
    font-size: 1.4rem;
    border-radius: var(--r-md);
    box-shadow: none;
}

.appnice_main .select2-selection--multiple:not([class*=bg-]):not([class*=border-]) {
    min-height: 4rem;
    background: var(--module-surface);
}

.appnice_main .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
    background: var(--module-surface);
}

.appnice_main .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(105, 0, 204, .12);
    color: var(--txt-content);
    border-radius: var(--r-full);
    cursor: default;
    float: left;
    margin: .5rem;
    padding: .7rem 1.5rem;
    font-weight: var(--fw-medium);
    font-size: 1.4rem;
}

.select2-container--open .select2-results__options {
    font-family: var(--font-body);
}

.appnice_main input[type="text"],
.appnice_main input[type="password"],
.appnice_main input[type="search"],
.appnice_main input[type="email"],
.appnice_main input[type="number"],
.appnice_main input[type="datetime"],
.appnice_main input[type="datetime-local"],
.appnice_main input[type="date"],
.appnice_main input[type="month"],
.appnice_main input[type="time"],
.appnice_main input[type="week"],
.appnice_main input[type="url"],
.appnice_main input[type="tel"],
.appnice_main textarea,
.appnice_main select,
.appnice_main select.form-control,
.appnice_main textarea.form-control {
    font-size: 1.4rem;
    border-radius: var(--r-md);
    box-shadow: none;
    padding: .8rem 1.6rem;
    display: block;
    width: 100%;
}

.appnice_main input[type="text"],
.appnice_main input[type="password"],
.appnice_main input[type="search"],
.appnice_main input[type="email"],
.appnice_main input[type="number"],
.appnice_main input[type="datetime"],
.appnice_main input[type="datetime-local"],
.appnice_main input[type="date"],
.appnice_main input[type="month"],
.appnice_main input[type="time"],
.appnice_main input[type="week"],
.appnice_main input[type="url"],
.appnice_main input[type="tel"],
.appnice_main select,
.appnice_main select.form-control {
    height: 4rem;
}

.appnice_main textarea,
.appnice_main textarea.form-control {
    min-height: 12rem;
    height: 12rem;
}

.appnice_main .picker__header select {
    display: inline !important;
    padding: 0 0 0 .5rem;
    width: 36%;
}

.appnice_main select#order_tipOption {
    padding: .8rem;
}

[data-theme="dark"] .appnice_main input[type="text"],
[data-theme="dark"] .appnice_main input[type="password"],
[data-theme="dark"] .appnice_main input[type="search"],
[data-theme="dark"] .appnice_main input[type="email"],
[data-theme="dark"] .appnice_main input[type="number"],
[data-theme="dark"] .appnice_main input[type="datetime"],
[data-theme="dark"] .appnice_main input[type="datetime-local"],
[data-theme="dark"] .appnice_main input[type="date"],
[data-theme="dark"] .appnice_main input[type="month"],
[data-theme="dark"] .appnice_main input[type="time"],
[data-theme="dark"] .appnice_main input[type="week"],
[data-theme="dark"] .appnice_main input[type="url"],
[data-theme="dark"] .appnice_main input[type="tel"],
[data-theme="dark"] .appnice_main textarea,
[data-theme="dark"] .appnice_main select,
[data-theme="dark"] .appnice_main select.form-control,
[data-theme="dark"] .appnice_main textarea.form-control,
[data-theme="dark"] .appnice_main .select2-selection--multiple:not([class*=bg-]):not([class*=border-]),
[data-theme="dark"] .appnice_main .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
    border: 1px solid rgba(255, 255, 255, .14);
    background: var(--bg-input);
    color: var(--txt-content);
}

[data-theme="dark"] .appnice_main select,
[data-theme="dark"] .appnice_main select.form-control {
    background-color: var(--bg-input) !important;
    color: var(--txt-content) !important;
    -webkit-text-fill-color: var(--txt-content);
}

[data-theme="dark"] .appnice_main select option,
[data-theme="dark"] .appnice_main select optgroup {
    background-color: #262140;
    color: var(--txt-content);
}

[data-theme="light"] .appnice_main input[type="text"],
[data-theme="light"] .appnice_main input[type="password"],
[data-theme="light"] .appnice_main input[type="search"],
[data-theme="light"] .appnice_main input[type="email"],
[data-theme="light"] .appnice_main input[type="number"],
[data-theme="light"] .appnice_main input[type="datetime"],
[data-theme="light"] .appnice_main input[type="datetime-local"],
[data-theme="light"] .appnice_main input[type="date"],
[data-theme="light"] .appnice_main input[type="month"],
[data-theme="light"] .appnice_main input[type="time"],
[data-theme="light"] .appnice_main input[type="week"],
[data-theme="light"] .appnice_main input[type="url"],
[data-theme="light"] .appnice_main input[type="tel"],
[data-theme="light"] .appnice_main textarea,
[data-theme="light"] .appnice_main select,
[data-theme="light"] .appnice_main select.form-control,
[data-theme="light"] .appnice_main textarea.form-control,
[data-theme="light"] .appnice_main .select2-selection--multiple:not([class*=bg-]):not([class*=border-]),
[data-theme="light"] .appnice_main .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
    border: 1px solid rgba(21, 18, 36, .14);
    background: var(--white);
    color: #151224;
}

.appnice_main select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat !important;
    background-position: right 1.2rem center !important;
    background-size: 1.2rem .8rem !important;
    padding-right: 3.6rem !important;
}

[data-theme="dark"] .appnice_main select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E9E5FF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .appnice_main select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B91B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.appnice_main input[type="text"]:focus,
.appnice_main input[type="password"]:focus,
.appnice_main input[type="search"]:focus,
.appnice_main input[type="email"]:focus,
.appnice_main input[type="number"]:focus,
.appnice_main input[type="datetime"]:focus,
.appnice_main input[type="datetime-local"]:focus,
.appnice_main input[type="date"]:focus,
.appnice_main input[type="month"]:focus,
.appnice_main input[type="time"]:focus,
.appnice_main input[type="week"]:focus,
.appnice_main input[type="url"]:focus,
.appnice_main input[type="tel"]:focus,
.appnice_main textarea:focus,
.appnice_main select:focus,
.appnice_main .form-control:focus,
.appnice_main .dataTables_filter label input:focus {
    transition: opacity 150ms cubic-bezier(.4, 0, .2, 1);
    outline: none;
    border-color: rgba(105, 0, 204, .55);
    box-shadow: 0 0 0 .2rem rgba(105, 0, 204, .16);
}

.appnice_main .input-group-addon:not(:first-child):not(:last-child),
.appnice_main .input-group-btn:not(:first-child):not(:last-child),
.appnice_main .input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0 1rem 1rem 0;
}

[data-theme="dark"] .appnice_main .input-group-text {
    background-color: var(--violet);
    border: 2px solid var(--violet);
    color: var(--white);
}

.appnice_main input::placeholder,
.appnice_main textarea::placeholder,
.appnice_main select::placeholder,
.appnice_main .form-control::placeholder {
    color: var(--txt-content-2) !important;
    opacity: 1;
}

[data-theme="dark"] .appnice_main input:disabled,
[data-theme="dark"] .appnice_main textarea:disabled,
[data-theme="dark"] .appnice_main select:disabled,
[data-theme="dark"] .appnice_main .form-control[disabled],
[data-theme="dark"] .appnice_main .form-control[readonly],
[data-theme="dark"] .appnice_main fieldset[disabled] .form-control {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .82);
    opacity: 1;
}

[data-theme="light"] .appnice_main input:disabled,
[data-theme="light"] .appnice_main textarea:disabled,
[data-theme="light"] .appnice_main select:disabled,
[data-theme="light"] .appnice_main .form-control[disabled],
[data-theme="light"] .appnice_main .form-control[readonly],
[data-theme="light"] .appnice_main fieldset[disabled] .form-control {
    background: #F5F2FF !important;
    border-color: rgba(21, 18, 36, .12) !important;
    color: rgba(21, 18, 36, .82) !important;
    -webkit-text-fill-color: rgba(21, 18, 36, .82);
    opacity: 1;
}

.appnice_main .app__container-body-table {
    background: var(--module-surface);
    border-radius: 0;
}

/* Widget summary cards */
.appnice_main .app__container-body-widget {
    padding: 1.4rem 2.4rem 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    grid-gap: 1.2rem;
}

.appnice_main .order-widget {
    padding: 0 0 2.4rem;
    grid-gap: 0.8rem;
}

.appnice_main .app__container-body-widget .widget,
.appnice_main .stockvalue .widget {
    color: var(--txt-content);
    padding: 1.6rem;
    border-radius: var(--r-md);
    display: grid;
    align-items: center;
    position: relative;
    border: 1px solid var(--border);
    background: var(--module-surface);
    box-shadow: var(--module-shadow);
}

.appnice_main .app__container-body-widget .widget h3,
.appnice_main .stockvalue .widget h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
    font-weight: var(--fw-medium);
    font-family: var(--font-display);
    color: var(--txt-content-2);
}

.appnice_main .app__container-body-widget .widget span,
.appnice_main .stockvalue .widget span {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 2.2rem;
    padding: 0.8rem 0 0;
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--txt-content);
}

.appnice_main .widget__content i {
    font-size: 2.4rem;
    background: var(--violet);
    color: var(--white);
    padding: 1rem;
    border-radius: var(--r-sm);
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.appnice_main .widget__content>.d-flex {
    align-items: center;
}

.appnice_main .widget__content .widgetinfo {
    min-width: 0;
}

.appnice_main .light-widget {
    background: var(--white) !important;
    color: #151224 !important;
}

.appnice_main .bt-line-primary {
    border-top: 5px solid var(--strawberry);
}

.appnice_main .bt-line-orange {
    border-top: 5px solid var(--orange);
}

.appnice_main .bt-line-yellow {
    border-top: 5px solid var(--yellow);
}

.appnice_main .bt-line-green {
    border-top: 5px solid var(--green);
}

.appnice_main .bt-line-blue {
    border-top: 5px solid #3B82F6;
}

.appnice_main .bt-line-grey {
    border-top: 5px solid rgba(127, 127, 127, .7);
}

/* Widget icon colors by state/line */
.appnice_main .widget.bt-line-primary .widget__content i {
    background: var(--strawberry);
}

.appnice_main .widget.bt-line-orange .widget__content i {
    background: var(--orange);
}

.appnice_main .widget.bt-line-yellow .widget__content i {
    background: var(--yellow);
    color: #151224;
}

.appnice_main .widget.bt-line-green .widget__content i {
    background: var(--green);
}

.appnice_main .widget.bt-line-blue .widget__content i {
    background: #3B82F6;
}

.appnice_main .widget.bt-line-grey .widget__content i {
    background: rgba(127, 127, 127, .9);
}

/* Active orders header controls */
.appnice_main .activeOrders_header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2rem 2.4rem;
    align-items: center;
    padding: 1.2rem 2.4rem 0;
}

.appnice_main .activeOrders_header .message__inApp {
    min-width: 0;
}

.appnice_main .summary-view-toggle {
    padding: .8rem 1.2rem;
    border-radius: var(--r-full);
    border: 1px solid var(--module-border);
    background: var(--module-surface);
    color: var(--txt-content-2);
    width: max-content;
    transition: border-color var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}

.appnice_main .summary-view-toggle>span {
    white-space: nowrap;
    font-size: 1.3rem;
}

.appnice_main .summary-view-toggle.active {
    border-color: rgba(34, 197, 94, .35);
    color: var(--txt-content);
}

[data-theme="dark"] .appnice_main .summary-view-toggle.active {
    background: rgba(34, 197, 94, .15);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .2) inset;
}

[data-theme="light"] .appnice_main .summary-view-toggle.active {
    background: #ECFDF3;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .16) inset;
}

.appnice_main .online-orderService {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .8rem 1.4rem;
    justify-content: center;
    border-radius: var(--r-full);
    min-width: 28rem;
    border: 1px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.appnice_main .online-orderService span {
    font-weight: var(--fw-semibold);
    font-size: 1.4rem;
}

.appnice_main .online-orderService.open-store {
    border-color: rgba(34, 197, 94, .30);
}

[data-theme="dark"] .appnice_main .online-orderService.open-store {
    background: rgba(34, 197, 94, .14);
    color: #9DF4BF;
}

[data-theme="light"] .appnice_main .online-orderService.open-store {
    background: #ECFDF3;
    color: #166534;
}

.appnice_main .online-orderService.close-store {
    border-color: rgba(239, 68, 68, .25);
}

[data-theme="dark"] .appnice_main .online-orderService.close-store {
    background: rgba(239, 68, 68, .14);
    color: #FCA5A5;
}

[data-theme="light"] .appnice_main .online-orderService.close-store {
    background: #FEF2F2;
    color: #991B1B;
}

/* Switch control */
.appnice_main .switch-btn {
    position: relative;
    display: inline-block;
    width: 5.6rem;
    height: 3.2rem;
    margin-bottom: 0;
}

.appnice_main .switch-btn input {
    opacity: 0;
    width: 0;
    height: 0;
}

.appnice_main .slider-btn {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 3.2rem;
    border: 1px solid var(--border);
    transition: all .24s ease;
}

[data-theme="dark"] .appnice_main .slider-btn {
    background-color: rgba(255, 255, 255, .14);
}

[data-theme="light"] .appnice_main .slider-btn {
    background-color: rgba(21, 18, 36, .14);
}

.appnice_main .slider-btn:before {
    position: absolute;
    content: "";
    height: 2.4rem;
    width: 2.4rem;
    left: .3rem;
    bottom: .3rem;
    background-color: var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    transition: transform .24s ease;
}

.appnice_main .switch-btn input:checked+.slider-btn {
    background-color: var(--green);
    border-color: var(--green);
}

.appnice_main .switch-btn input:focus+.slider-btn {
    box-shadow: 0 0 0 .25rem rgba(34, 197, 94, .22);
}

.appnice_main .switch-btn input:checked+.slider-btn:before {
    transform: translateX(2.4rem);
}

.appnice_main .slider-btn.round,
.appnice_main .slider-btn.round:before {
    border-radius: 3.2rem;
}

[data-theme="dark"] .appnice_main .app__container-body-widget .widget,
[data-theme="dark"] .appnice_main .stockvalue .widget {
    background: #262140;
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .appnice_main .app__container-body-widget .widget h3 {
    color: rgba(218, 218, 218, .72);
}

[data-theme="dark"] .appnice_main .app__container-body-widget .widget span {
    color: rgb(218 218 218);
}

[data-theme="light"] .appnice_main .app__container-body-widget .widget,
[data-theme="light"] .appnice_main .stockvalue .widget {
    background: var(--white);
    border-color: rgba(21, 18, 36, .10);
    box-shadow: 0 8px 20px rgba(21, 18, 36, .06);
}

[data-theme="light"] .appnice_main .app__container-body-widget .widget h3 {
    color: rgba(21, 18, 36, .65);
}

[data-theme="light"] .appnice_main .app__container-body-widget .widget span {
    color: #151224;
}

/* ERP UPDATE */
.app__updates {
    height: calc(100vh - 24.6rem);
    overflow-x: hidden;
    overflow-y: auto;
}

.app__updates h3 {
    font-family: var(--font-titles);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--color-eerie-black);
    font-weight: 600;
    background: var(--color-purple-light);
    padding: 0.8rem 1.6rem;
    display: inline-flex;
    border-radius: 0.5rem;
    gap: 1rem;
}

.app__updates .updt-icon {
    fill: var(--color-eerie-black);
    height: 2.4rem;
    width: 2.4rem;
}

.app__updates h4 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    color: var(--color-strawberry);
    font-weight: 500;
    font-family: var(--font-titles);
    margin-top: 1rem;
}

.app__updates ul {
    list-style-type: circle;
    padding-left: 1.9rem;
    margin-bottom: 1.6rem;
}

.app__updates ul>li {
    font-size: 1.4rem;
    padding: 0 1rem 1.2rem 0;
    font-family: var(--font-body);
    line-height: 1.8em;
}

.app__updates span {
    color: var(--color-strawberry);
}

/* ERP Tabs */
.appnice_main .tab {
    overflow: hidden;
    border-bottom: 1px solid var(--module-border);
}

.appnice_main .tab button {
    background-color: transparent;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1.6rem 2rem;
    transition: color var(--ease), background var(--ease);
    font-size: 1.6rem;
    font-weight: var(--fw-medium);
    color: var(--txt-content-2);
    position: relative;
}

.appnice_main .tab button:hover {
    color: var(--txt-content);
}

.appnice_main .tab button.active {
    color: var(--txt-content);
}

.appnice_main .tab button:after {
    transition: all 0.3s cubic-bezier(1, 0, 0, 1);
    will-change: transform, box-shadow, opacity;
    position: absolute;
    content: "";
    height: 3px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 3px 3px 0 0;
    background: var(--strawberry);
    opacity: 0;
    transform: scale(0, 1);
}

[data-theme="dark"] .appnice_main .tab button:after {
    box-shadow: 0 4px 10px 3px rgba(246, 0, 118, .24);
}

[data-theme="light"] .appnice_main .tab button:after {
    box-shadow: 0 4px 10px 3px rgba(246, 0, 118, .16);
}

.appnice_main .tab button.active:after {
    opacity: 1;
    transform: scale(1, 1);
}

.appnice_main .tabcontent {
    display: none;
    padding: 3.2rem 0 0;
    border: 0;
}

.appnice_main .app__welcomeTabs {
    grid-template-columns: auto 1fr;
}

.appnice_main .tabVertical button {
    display: block;
    background-color: transparent;
    color: var(--txt-content);
    padding: 1.6rem;
    width: 100%;
    border: none;
    border-radius: var(--r-sm);
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--fw-medium);
    margin-bottom: 0.8rem;
}

[data-theme="dark"] .appnice_main .tabVertical button:hover {
    background-color: rgba(255, 255, 255, .08);
}

[data-theme="light"] .appnice_main .tabVertical button:hover {
    background-color: rgba(105, 0, 204, .08);
}

[data-theme="dark"] .appnice_main .tabVertical button.active {
    background-color: var(--white);
    color: #151224;
}

[data-theme="light"] .appnice_main .tabVertical button.active {
    background-color: #151224;
    color: var(--white);
}

.appnice_main .tabcontentVertical {
    overflow: auto;
}

.appnice_main .tabcontentVertical h4 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-semibold);
    color: var(--txt-content);
}

.appnice_main .tabcontentVertical p {
    font-size: 1.4rem;
    line-height: 1.6em;
    color: var(--txt-content-2);
}

.appnice_main .tabcontentVertical ul {
    font-size: 1.4rem;
    line-height: 2.4em;
    list-style: disc;
    padding-left: 2rem;
    color: var(--txt-content-2);
}


.appnice_main .n-card {
    border-radius: 2rem;
    background: var(--module-surface);
    border: 1px solid var(--module-border);
    color: var(--txt-content);
    box-shadow: var(--module-shadow);
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}

[data-theme="dark"] .appnice_main .n-card {
    background: rgb(38 33 64);
    border-color: rgba(255, 255, 255, .12);
    color: rgb(218 218 218);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

[data-theme="light"] .appnice_main .n-card {
    background: var(--white);
    border-color: rgba(21, 18, 36, .10);
    color: #151224;
    box-shadow: 0 10px 24px rgba(21, 18, 36, .07);
}


/* jQuery UI Datepicker */
.ui-datepicker {
    display: none;
    padding: 2.4rem;
    border-radius: 2rem;
    box-shadow: 0 3px 9px 1px rgba(51, 48, 60, 0.03), 0 9px 8px rgba(51, 48, 60, 0.02), 0 1px 6px 4px rgba(51, 48, 60, 0.01);
    border: 1px solid var(--border);
}

.ui-datepicker-header {
    display: grid;
    grid-template-columns: auto 13rem auto;
    grid-template-areas: 'prev month next';
    text-align: center;
    margin-bottom: 1.6rem;
    grid-gap: 0.8rem;
    align-items: center;
}

.ui-datepicker-header span {
    font-weight: var(--fw-medium);
}

.ui-datepicker-header a {
    cursor: pointer;
    height: 3.2rem;
    border-radius: 3rem;
    width: 3.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
    color: var(--txt-content);
    background: transparent;
}

.ui-datepicker-header a:hover {
    background: var(--bg-hover);
}

.ui-datepicker-prev {
    grid-area: prev;
}

.ui-datepicker-next {
    grid-area: next;
}

.ui-datepicker-title {
    grid-area: month;
    color: var(--txt-content);
}

.ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker-calendar thead {
    background-color: transparent;
}

.ui-datepicker-calendar thead tr th {
    height: 3.2rem;
}

.ui-datepicker-calendar thead tr th span {
    font-weight: var(--fw-medium);
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--txt-content-2);
}

.ui-datepicker-calendar tbody tr td {
    width: 3.2rem;
    height: 3.2rem;
}

.ui-state-disabled span.ui-state-default {
    color: var(--txt-muted);
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.ui-datepicker-calendar a.ui-state-default {
    color: var(--txt-content);
    border-radius: 3rem;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.ui-datepicker-calendar a.ui-state-default:hover {
    background-color: var(--bg-hover);
}

.ui-datepicker-calendar a.ui-state-active {
    background-color: var(--strawberry);
    color: var(--white);
}

[data-theme="dark"] .ui-datepicker {
    background-color: #262140;
}

[data-theme="dark"] .ui-datepicker-header a {
    border-color: rgba(255, 255, 255, .14);
    color: var(--white);
}

[data-theme="dark"] .ui-datepicker-calendar a.ui-state-default {
    color: rgb(218 218 218);
}

/* ── Ops tables compact cards + geometric shape ───────────────────────── */
.appnice_main .nice__tableCard {
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 96px;
    transition: transform .12s, box-shadow .12s;
    user-select: none;
}

.appnice_main .nice__tableCard.free {
    background: #e8f5e9;
    border: 2px solid #a5d6a7;
}

.appnice_main .nice__tableCard.full {
    background: #ede7f6;
    border: 2px solid #b39ddb;
}

.appnice_main .nice__tableCard.locked {
    background: #fff8e1;
    border: 2px dashed #ffd54f;
}

.appnice_main .nice__tableCard[onclick],
.appnice_main .nice__tableCard-link .nice__tableCard {
    cursor: pointer;
}

.appnice_main .nice__tableCard[onclick]:hover,
.appnice_main .nice__tableCard-link:hover .nice__tableCard {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

.appnice_main .nice__tableCard-link {
    text-decoration: none;
    display: block;
}

.appnice_main .nice__tableCard-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.2;
}

.appnice_main .nice__tableCard.free .nice__tableCard-name {
    color: #2e7d32;
}

.appnice_main .nice__tableCard.full .nice__tableCard-name {
    color: #4527a0;
}

.appnice_main .nice__tableCard.locked .nice__tableCard-name {
    color: #e65100;
}

.appnice_main .nice__tableCard-row {
    display: flex;
    gap: 10px;
    font-size: 1.4rem;
    color: #555;
    align-items: center;
}

.appnice_main .nice__tableCard-seats {
    white-space: nowrap;
}

.appnice_main .nice__tableCard-ordernum {
    font-weight: 600;
    color: #333;
}

.appnice_main .nice__tableCard-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
}

.appnice_main .nice__tableCard-elapsed {
    font-size: 1.4rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 3px;
}

.appnice_main .nice__tableCard-badge {
    font-size: 1.4rem;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 2px;
}

.appnice_main .locked-badge {
    background: #ffd54f;
    color: #7c5c00;
    font-weight: 600;
}

.appnice_main .floorplan-ops-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.appnice_main .nice__tableCard.circle_small,
.appnice_main .nice__tableCard.square_small {
    width: 150px;
    min-height: 150px;
    margin: 0 auto;
}

.appnice_main .nice__tableCard.circle_large,
.appnice_main .nice__tableCard.square_large {
    width: 180px;
    min-height: 180px;
    margin: 0 auto;
}

.appnice_main .nice__tableCard.rectangle_vertical {
    width: 150px;
    min-height: 190px;
    margin: 0 auto;
}

.appnice_main .nice__tableCard.rectangle_horizontal {
    width: 190px;
    min-height: 150px;
    margin: 0 auto;
}

.appnice_main .nice__tableCard.circle_small,
.appnice_main .nice__tableCard.circle_large {
    border-radius: 999px;
}

.appnice_main .nice__tableCard.square_small,
.appnice_main .nice__tableCard.square_large,
.appnice_main .nice__tableCard.rectangle_vertical,
.appnice_main .nice__tableCard.rectangle_horizontal {
    border-radius: 14px;
}

[data-theme="dark"] .ui-datepicker-calendar a.ui-state-default:hover {
    background: rgba(255, 255, 255, .08);
}

[data-theme="light"] .ui-datepicker {
    background-color: var(--white);
}

[data-theme="light"] .ui-datepicker-header a {
    border-color: rgba(21, 18, 36, .14);
    color: #151224;
}

[data-theme="light"] .ui-datepicker-calendar a.ui-state-default {
    color: #151224;
}

[data-theme="light"] .ui-datepicker-calendar a.ui-state-default:hover {
    background: rgba(105, 0, 204, .08);
}


/* Modal */
.modal-backdrop.in {
    opacity: .7 !important;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.fade.in {
    overflow: auto;
}

.modal-app {
    display: flex;
    font-family: var(--font-body);
    justify-content: center;
    margin: 1rem auto;
    color: var(--txt-content);
}

.modal-dialog {
    width: initial;
    max-width: 90rem;
    margin: 2.4rem auto;
}

.modal-dialog-xs,
.modal-md {
    width: initial;
    max-width: 60rem;
    margin: 2.4rem auto;
}

#formModalOrderitem .modal-dialog {
    width: initial;
    max-width: 55rem;
    margin: 2.4rem auto;
}

.modal-lg {
    width: 100%;
    max-width: 90rem;
    margin: 2.4rem auto;
}

.modal.fade .modal-md {
    transform: translate(0, -25%);
    transition: transform 0.3s ease-out;
}

.modal.in .modal-md {
    transform: translate(0, 0);
}

.modal.fade .modal-lg {
    transform: translateX(50%);
    transition: transform 0.3s ease-out;
}

.modal.in .modal-lg {
    transform: translate(0, 0);
}

.modal-content {
    border-radius: 1.6rem;
    max-width: 90rem;
    border: 1px solid var(--border);
    background: var(--module-surface);
    color: var(--txt-content);
}

.modal-header {
    position: relative;
    padding: 0;
}

.modal-content__title {
    padding: 2rem 2.4rem 1.5rem;
}

.modal-content__title h4 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: 1.9rem;
    color: var(--txt-content);
    line-height: 1em;
    min-width: 35rem;
    text-align: left;
}

.close-nice {
    background-color: var(--bg-surface);
    width: 2.8rem;
    height: 2.8rem;
    position: absolute;
    top: 1.6rem;
    right: 2rem;
    display: flex;
    border-radius: 2rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 2.4rem;
    line-height: 1rem;
    border: 1px solid var(--border);
}

.close-nice i,
.close-nice .btn__icon {
    color: var(--txt-content);
    fill: var(--txt-content);
}

.modal-body {
    position: relative;
    padding: 1rem 2.5rem 2.5rem;
    font-family: var(--font-body);
    color: var(--txt-content);
}

.modal-body fieldset legend {
    font-size: 1.4rem;
    color: var(--txt-content);
}

.modal-app .modal-body label {
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
    color: var(--txt-content);
    margin-top: .5rem;
}

.modal-app .modal-body .control-label {
    margin-bottom: 1rem;
}

.modal-app .modal-body .validation-error-label,
.modal .modal-body .validation-error-label {
    color: var(--red);
    font-size: 1.3rem;
    text-transform: none;
    padding-left: 0;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.modal-footer {
    padding: 2rem;
    text-align: right;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.modal-footer #btn-draft {
    margin-right: 1rem;
}

.modal-footer .btn {
    margin-bottom: 0 !important;
}

.modal-order-detail {
    overflow: auto;
    max-height: calc(100vh - 22rem);
    padding: 0;
}

.modal-order-detail::-webkit-scrollbar {
    width: .8rem;
}

.modal-order-detail::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

.modal-order-detail::-webkit-scrollbar-thumb {
    background: var(--strawberry);
    border-radius: .5rem;
}

[data-theme="dark"] .modal-content {
    background: #262140;
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .close-nice {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15);
}

[data-theme="light"] .modal-content {
    background: var(--white);
    border-color: rgba(21, 18, 36, .12);
}

[data-theme="light"] .close-nice {
    background: var(--white);
    border-color: rgba(21, 18, 36, .14);
}

/* App modals */
.modal.fade-r .modal-dialog {
    transform: translateX(0, -25%);
    transition: transform 0.3s ease-out;
}

.app-modalRight .modal-dialog {
    position: fixed;
    right: 0;
    height: 100vh;
    margin: 0;
}

.app-modalRight .modal-content {
    box-shadow: none;
}

.app-modalRight .modal-body {
    height: calc(100vh - 6rem);
    padding-bottom: 9rem;
    overflow-y: auto;
}

.app-modalRight .modal-body .tabcontent {
    height: calc(100vh - 13rem);
    overflow: auto;
    padding: 2.4rem 1.6rem 3.2rem 0;
}

.app-modalRight .modal-footer {
    display: block;
    border-top: 0;
    position: absolute;
    width: 100%;
    z-index: 99;
    background: var(--module-surface);
    bottom: 0;
    border-top-left-radius: 2.4rem;
    border-top-right-radius: 2.4rem;
    box-shadow: 0 0 1.5rem rgb(0 0 0 / 15%);
}

.app-modalRight .modal-footer .btn-mFooter {
    font-size: 1.8rem;
    width: 50%;
    padding: 1.6rem 2.4rem;
    cursor: pointer;
    font-weight: var(--fw-medium);
    border: 2px solid var(--strawberry);
    border-radius: 1rem;
    text-align: center;
    transition: all ease 0.25s;
    font-family: var(--font-display);
    background: var(--module-surface);
    color: var(--strawberry);
}

.app-modalRight .modal-footer .btn-mFooter:hover {
    filter: brightness(1.1);
}

.modal .modal-footer button[type="submit"],
.modal .modal-footer input[type="submit"] {
    background: var(--violet) !important;
    color: var(--white) !important;
    border-color: var(--violet) !important;
}

.modal .modal-footer button[type="submit"]:hover,
.modal .modal-footer button[type="submit"]:focus,
.modal .modal-footer input[type="submit"]:hover,
.modal .modal-footer input[type="submit"]:focus {
    background: var(--violet) !important;
    color: var(--white) !important;
    border-color: var(--violet) !important;
}

.app-modalRight .validation-error-label,
.app-modalCenter .validation-error-label {
    color: var(--strawberry);
    display: block;
    margin-top: .8rem;
    font-size: 1.3rem;
    text-transform: none;
    position: absolute;
    right: 0;
    top: 0;
}

.n-inputBg {
    background: var(--bg-surface);
    padding: 1.6rem;
    border-radius: .8rem;
}

.privacyText {
    font-size: 1.2rem;
    line-height: 1.4em;
}

.modal-body h3 {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    font-weight: var(--fw-semibold);
    border-bottom: 0;
    display: flex;
    padding-bottom: .4rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    color: var(--txt-content);
}

.ft-title {
    background: var(--bg-nav);
    padding: .8rem 1.6rem !important;
    border-radius: .8rem;
    font-weight: var(--fw-medium) !important;
    color: var(--txt-content);
}

input[type="color"] {
    width: 50%;
    height: 5rem;
}

/* In-app message modal */
#modalInAppMessageDialog {
    display: flex;
    align-items: center;
}

#modalInAppMessageDialog .modal-dialog {
    max-width: 60rem;
}

#modalInAppMessageDialog .modal-body {
    padding: 0 0 2.4rem;
}

.inappmsg-img {
    width: 100%;
    max-width: 90rem;
    margin-bottom: 1.6rem;
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
}

.inappmsg-video {
    margin-bottom: 1.6rem;
}

.modal-body h2.inappmsg-title {
    font-size: 1.8rem;
    line-height: 1.4em;
    margin-bottom: 1rem;
    font-weight: var(--fw-semibold);
    display: inline-block;
    text-align: center;
    font-family: var(--font-display);
    width: 100%;
    padding: 0 2.4rem;
    color: var(--txt-content);
}

.modal-body p.inappmsg-desc {
    font-size: 1.4rem;
    line-height: 1.4em;
    margin-bottom: 1.8rem;
    font-weight: var(--fw-regular);
    display: inline-block;
    text-align: center;
    font-family: var(--font-display);
    width: 100%;
    padding: 0 2.4rem;
    color: var(--txt-content-2);
}

.modal-body .inappmsg-btn {
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
    font-family: var(--font-display);
    display: inline-block;
    text-align: center;
    padding: 1rem 2rem;
    border-radius: .4rem;
    min-height: 4rem;
}

.modal-body .inappmsg-cta {
    padding: 0 2.4rem;
}

[data-theme="dark"] .app-modalRight .modal-footer {
    background: #262140;
}

[data-theme="light"] .app-modalRight .modal-footer {
    background: var(--white);
}


/* Collapsible */
.appnice_main .collapsible {
    background-color: var(--bg-surface);
    color: var(--txt-content);
    cursor: pointer;
    padding: 2rem 2.4rem;
    width: 100%;
    border: 1px solid var(--border);
    text-align: left;
    outline: none;
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    display: block;
    margin-bottom: 0.8rem;
    border-radius: var(--r-md);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.appnice_main .active-collapsible,
.appnice_main .collapsible:hover {
    background-color: var(--bg-hover);
    border-color: rgba(105, 0, 204, .30);
}

.appnice_main .collapsible-purple {
    background-color: var(--bg-hover) !important;
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding: 1.6rem;
    grid-gap: 1.6rem;
}

.appnice_main .collapsible-purple i,
.appnice_main .order-detail-type i {
    font-size: 1.6rem;
    padding: 0.4rem;
    background: var(--violet);
    color: var(--white);
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appnice_main .collapsible:after {
    content: '\002B';
    color: var(--txt-content);
    font-weight: var(--fw-bold);
    float: right;
    margin-left: .5rem;
}

.appnice_main .active-collapsible:after {
    content: "\2212";
}

.appnice_main .content {
    padding: 0 1.8rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: transparent;
}

.appnice_main .contentboxcollapsible {
    padding: 2rem 0;
}

.appnice_main #plato .collapsible,
.appnice_main #combo .collapsible {
    user-select: none;
}

.appnice_main #plato .content,
.appnice_main #combo .content {
    display: none;
    max-height: none;
    overflow: hidden;
}

.appnice_main #plato .content.is-open,
.appnice_main #combo .content.is-open {
    overflow: visible;
}

/* Collapsible Product */
.appnice_main .collapsible-product {
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    display: block;
    margin-bottom: 0.8rem;
    border-radius: var(--r-md);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    padding: 0.8rem 2.6rem 0.8rem 1.2rem;
    border: 1px solid transparent;
    position: relative;
}

.appnice_main .active-collapsible-product,
.appnice_main .collapsible-product:hover {
    border-color: rgba(105, 0, 204, .28);
}

.appnice_main .content-product {
    padding: 0 2.4rem;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    background-color: transparent;
    overflow: hidden;
    width: 100%;
}

.appnice_main .contentboxcollapsible-product {
    padding: 0.8rem 0;
}

[data-theme="dark"] .appnice_main .collapsible {
    background-color: rgba(255, 255, 255, .03);
    color: rgb(218 218 218);
    border-color: rgba(255, 255, 255, .10);
}

[data-theme="dark"] .appnice_main .active-collapsible,
[data-theme="dark"] .appnice_main .collapsible:hover {
    background-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .appnice_main .collapsible:after {
    color: rgb(218 218 218);
}

[data-theme="dark"] .appnice_main .collapsible-product {
    background: rgba(255, 255, 255, .06);
    color: rgb(218 218 218);
}

[data-theme="dark"] .appnice_main .active-collapsible-product,
[data-theme="dark"] .appnice_main .collapsible-product:hover {
    background: rgba(255, 255, 255, .09);
}

[data-theme="light"] .appnice_main .collapsible {
    background-color: var(--white);
    color: #151224;
    border-color: rgba(21, 18, 36, .12);
}

[data-theme="light"] .appnice_main .active-collapsible,
[data-theme="light"] .appnice_main .collapsible:hover {
    background-color: rgba(105, 0, 204, .06);
}

[data-theme="light"] .appnice_main .collapsible:after {
    color: #151224;
}

[data-theme="light"] .appnice_main .collapsible-product {
    background: rgba(21, 18, 36, .04);
    color: #151224;
}

[data-theme="light"] .appnice_main .active-collapsible-product,
[data-theme="light"] .appnice_main .collapsible-product:hover {
    background: rgba(105, 0, 204, .08);
}

.n-card-item {
    padding: 2.4rem;
}

.n-card-header {
    padding: 2.4rem;
    font-size: 1.8rem;
}

.n-card-header h6 {
    font-size: 1.8rem;
    font-weight: 500;
}

.n-card-text {
    padding: 0 2.4rem 2.4rem;
    font-size: 1.4rem;
}

/* ── 6. BOTONES ──────────────────────────────────────────── */

/* Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: var(--fw-bold);
    height: 3.6rem;
    padding: 0 1.6rem;
    transition: all var(--ease);
    white-space: nowrap;
    box-shadow: var(--shadow-btn);
}

.btn:hover {
    transform: translateY(-.1rem);
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(0);
    filter: brightness(.96);
}

/* Variantes de color */
.btn-primary {
    background: var(--violet);
    color: var(--white);
}

/* Booking views: table vs agenda */
.booking-view-switcher {
    display: flex;
    gap: .8rem;
    margin: 1.6rem 0 1.2rem;
}

.booking-view-btn.is-active {
    background: var(--violet);
    color: var(--white);
}

.booking-view-panel {
    width: 100%;
}

.booking-agenda-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1.2rem;
}

.booking-agenda-toolbar-left {
    display: flex;
    gap: .8rem;
    align-items: center;
}

#booking-agenda-date {
    min-width: 18rem;
}

.booking-agenda-empty-day {
    padding: 1rem 1.2rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    color: var(--txt-content-2);
}

.booking-agenda-grid-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.booking-agenda-grid {
    width: 100%;
    min-width: 84rem;
    border-collapse: collapse;
}

.booking-agenda-grid th,
.booking-agenda-grid td {
    border: 1px solid var(--border);
    vertical-align: top;
}

.booking-agenda-grid th {
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 2;
    font-size: 1.2rem;
    padding: .8rem;
    color: var(--txt-content);
}

.booking-agenda-time-col,
.booking-agenda-time-cell {
    width: 7.2rem;
    min-width: 7.2rem;
    text-align: center;
    font-weight: var(--fw-semibold);
}

.booking-agenda-time-cell {
    background: var(--bg-surface-2);
    font-size: 1.2rem;
    color: var(--txt-content-2);
    padding: .8rem .4rem;
}

.booking-agenda-cell {
    min-width: 18rem;
    padding: .4rem;
    background: var(--bg-surface);
}

.booking-agenda-empty-slot {
    font-size: 1.15rem;
    color: var(--txt-muted);
    text-align: center;
    padding: 1rem .4rem;
}

.booking-agenda-item {
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .6rem;
    margin-bottom: .5rem;
    background: var(--bg-content);
}

.booking-agenda-item:last-child {
    margin-bottom: 0;
}

.booking-agenda-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .4rem;
}

.booking-agenda-status {
    font-size: 1.05rem;
    color: #fff;
    padding: .2rem .5rem;
    border-radius: 99rem;
    line-height: 1.2;
}

.booking-agenda-item-body {
    font-size: 1.15rem;
    color: var(--txt-content);
}

.booking-agenda-item-actions {
    margin-top: .5rem;
    font-size: 1.15rem;
}

.booking-agenda-item-actions a {
    color: var(--violet);
    font-weight: var(--fw-semibold);
}

.nice-timepicker {
    position: relative;
}

.nice-timepicker-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #7d8795;
    padding: 4px;
    line-height: 1;
}

.nice-timepicker-panel {
    position: absolute;
    z-index: 1065;
    left: 0;
    right: 0;
    margin-top: 6px;
    border: 1px solid #d7dbe3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.nice-timepicker-title {
    font-size: 12px;
    font-weight: 600;
    color: #586277;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #edf0f5;
}

.nice-timepicker-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #edf0f5;
}

.nice-timepicker-tab {
    border: 1px solid #d7dbe3;
    background: #fff;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #4c586c;
}

.nice-timepicker-tab.is-active {
    background: #2f80ed;
    color: #fff;
    border-color: #2f80ed;
}

.nice-timepicker-options {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.nice-timepicker-option {
    border: 1px solid #d7dbe3;
    background: #fff;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #4c586c;
}

.nice-timepicker-option:hover {
    background: #f1f7ff;
    border-color: #95b9ef;
}

.nice-timepicker-option.is-active {
    background: #2f80ed;
    color: #fff;
    border-color: #2f80ed;
}

.nice-timepicker-option.is-hidden {
    display: none;
}

.nice-timepicker-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid #edf0f5;
}

.nice-timepicker-quick button {
    border: 1px solid #d7dbe3;
    background: #fff;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #4c586c;
}

.nice-timepicker-quick button:hover {
    background: #f1f7ff;
    border-color: #95b9ef;
}

/* Booking agenda v2: zone tabs + tables on Y axis + hours on X axis */
.booking-view-btn.is-active {
    background: var(--violet) !important;
    color: var(--white) !important;
}

.booking-agenda-zone-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1rem;
}

.booking-agenda-zone-tab {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--txt-content);
    border-radius: var(--r-md);
    font-size: 1.3rem;
    font-weight: var(--fw-semibold);
    padding: .7rem 1.2rem;
}

.booking-agenda-zone-tab.is-active {
    background: var(--violet);
    color: var(--white);
    border-color: var(--violet);
}

.booking-agenda-timeline-table {
    width: 100%;
    min-width: 148rem;
    border-collapse: collapse;
}

.booking-agenda-timeline-table th,
.booking-agenda-timeline-table td {
    border: 1px solid var(--border);
}

.booking-agenda-table-col,
.booking-agenda-table-name {
    width: 20rem;
    min-width: 20rem;
}

.booking-agenda-table-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-surface);
    padding: .8rem;
}

.booking-agenda-table-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-surface-2);
    padding: .8rem;
    font-size: 1.2rem;
    color: var(--txt-content);
    font-weight: var(--fw-semibold);
}

.booking-agenda-hours-col {
    min-width: 126rem;
    background: var(--bg-surface);
}

.booking-agenda-hours-scale {
    display: grid;
    grid-template-columns: repeat(24, minmax(5.2rem, 1fr));
    font-size: 1.2rem;
    color: var(--txt-content-2);
}

.booking-agenda-hours-scale span {
    text-align: left;
    padding: .6rem .35rem;
    border-right: 1px solid var(--border);
}

.booking-agenda-hours-scale span:last-child {
    border-right: 0;
}

.booking-agenda-timeline-cell {
    background: var(--bg-surface);
    padding: .5rem;
}

.booking-agenda-timeline-track {
    --booking-track-base-height: 84px;
    --booking-stack-offset: 66px;
    --booking-item-top-padding: 10px;
    --booking-item-bottom-padding: 10px;
    position: relative;
    height: calc(var(--booking-track-base-height) + ((var(--booking-stack-count, 1) - 1) * var(--booking-stack-offset)));
    border-radius: .6rem;
    overflow: hidden;
    background: linear-gradient(to right, rgba(255, 255, 255, .02), rgba(255, 255, 255, .04));
}

.booking-agenda-hour-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.booking-agenda-timeline-track .booking-agenda-empty-slot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--txt-muted);
}

.booking-agenda-timeline-track .booking-agenda-item {
    position: absolute;
    top: calc(var(--booking-item-top-padding) + (var(--booking-stack-index, 0) * var(--booking-stack-offset)));
    height: calc(var(--booking-track-base-height) - var(--booking-item-top-padding) - var(--booking-item-bottom-padding));
    min-width: 11rem;
    overflow: hidden;
    margin: 0;
    padding: .5rem .65rem;
    border-radius: .6rem;
    border: 1px solid var(--border);
    background: var(--bg-content);
    cursor: pointer;
}

.booking-agenda-timeline-track .booking-agenda-item-top {
    margin-bottom: .35rem;
}

.booking-agenda-timeline-track .booking-agenda-item-top strong {
    font-size: 1.15rem;
}

.booking-agenda-timeline-track .booking-agenda-item-body {
    font-size: 1.1rem;
    line-height: 1.2;
}

.booking-agenda-timeline-track .booking-agenda-item-actions {
    margin-top: .35rem;
    font-size: 1.05rem;
}

@media (max-width: 991px) {
    .booking-agenda-grid-wrap {
        scroll-snap-type: x mandatory;
    }

    .booking-agenda-timeline-table {
        min-width: 110rem;
    }

    .booking-agenda-table-col,
    .booking-agenda-table-name {
        width: 14rem;
        min-width: 14rem;
    }

    .booking-agenda-table-col,
    .booking-agenda-table-name,
    .booking-agenda-timeline-cell {
        padding: .5rem;
    }

    .booking-agenda-hours-col {
        min-width: 90rem;
    }

    .booking-agenda-hours-scale {
        grid-template-columns: repeat(24, minmax(3.7rem, 1fr));
        font-size: 1.05rem;
    }

    .booking-agenda-hours-scale span {
        padding: .45rem .2rem;
    }

    .booking-agenda-timeline-track {
        --booking-track-base-height: 62px;
        --booking-stack-offset: 48px;
        --booking-item-top-padding: 6px;
        --booking-item-bottom-padding: 6px;
    }

    .booking-agenda-timeline-track .booking-agenda-item {
        min-width: 8rem;
        padding: .35rem .45rem;
    }

    .booking-agenda-timeline-track .booking-agenda-item-top strong {
        font-size: 1.05rem;
    }

    .booking-agenda-timeline-track .booking-agenda-item-body,
    .booking-agenda-timeline-track .booking-agenda-item-actions {
        font-size: 1rem;
    }
}

#booking_hour {
    padding-right: 34px;
    cursor: pointer;
}

.nice__tablesContainer.floorplan-ops {
    display: grid;
    gap: 8px;
    background: #f4f4f4;
    border-radius: 10px;
    padding: 8px;
    overflow-x: auto;
}

.floorplan-ops-cell {
    min-height: 0;
}

.floorplan-ops-empty {
    height: 100%;
    border: 2px dashed #e8e8e8;
    border-radius: 8px;
    background: #fafafa;
}

/* ── Table card ──────────────────────────────────────────── */
.nice__tableCard {
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 90px;
    transition: transform .12s, box-shadow .12s;
    user-select: none;
}

.nice__tableCard.free {
    background: #e8f5e9;
    border: 2px solid #a5d6a7;
}

.nice__tableCard.full {
    background: #ede7f6;
    border: 2px solid #b39ddb;
}

.nice__tableCard.locked {
    background: #fff8e1;
    border: 2px dashed #ffd54f;
}

.nice__tableCard[onclick],
.nice__tableCard-link .nice__tableCard {
    cursor: pointer;
}

.nice__tableCard[onclick]:hover,
.nice__tableCard-link:hover .nice__tableCard {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

.nice__tableCard-link {
    text-decoration: none;
    display: block;
}

.nice__tableCard-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.2;
}

.nice__tableCard.free .nice__tableCard-name {
    color: #2e7d32;
}

.nice__tableCard.full .nice__tableCard-name {
    color: #4527a0;
}

.nice__tableCard.locked .nice__tableCard-name {
    color: #e65100;
}

.nice__tableCard-row {
    display: flex;
    gap: 10px;
    font-size: 1.4rem;
    color: #555;
    align-items: center;
}

.nice__tableCard-seats {
    white-space: nowrap;
}

.nice__tableCard-ordernum {
    font-weight: 600;
    color: #333;
}

.nice__tableCard-total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
}

.nice__tableCard-elapsed {
    font-size: 1.4rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 3px;
}

.nice__tableCard-badge {
    font-size: 1.4rem;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 2px;
}

.locked-badge {
    background: #ffd54f;
    color: #7c5c00;
    font-weight: 600;
}

/* ── Floor plan editor ─────────────────────────────────── */
.floorplan-zone-editor {
    padding: 16px;
}

.floorplan-zone-title {
    margin-bottom: 12px;
}

.floorplan-zone-title h3 {
    margin: 0 0 4px;
}

.floorplan-tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    min-height: 52px;
    margin-bottom: 16px;
    background: #fafafa;
    transition: background .15s, border-color .15s;
}

.floorplan-tray.drag-over {
    background: #fff9e6;
    border-color: #ffc107;
}

.floorplan-tray-label {
    font-size: 12px;
    color: #999;
    margin-right: 4px;
}

.floorplan-table-chip {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    transition: opacity .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.floorplan-table-chip.dragging {
    opacity: .4;
}

.floorplan-table-chip.placed {
    background: #e3f2fd;
    border-color: #1e88e5;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding: 4px 6px;
    justify-content: center;
    box-sizing: border-box;
}

.floorplan-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.floorplan-chip-remove:hover {
    color: #e53935;
}

.floorplan-grid {
    display: grid;
    gap: 5px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px;
    overflow-x: auto;
}

.floorplan-cell {
    background: #fff;
    border: 2px dashed #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    transition: background .15s, border-color .15s;
}

.floorplan-cell.drag-over {
    background: #e8f5e9;
    border-color: #43a047;
    border-style: solid;
}

.floorplan-cell.occupied {
    border-style: solid;
    border-color: #90caf9;
}

.btn-secondary {
    background: var(--bg-surface);
    color: var(--txt-primary);
    border: 1px solid var(--border);
}

.btn-action {
    background: var(--strawberry);
    color: var(--white);
}

.btn-success {
    background: var(--green);
    color: var(--white);
}

.btn-warning {
    background: var(--yellow);
    color: var(--bg-base);
}

.btn-danger {
    background: var(--red);
    color: var(--white);
}

.btn-ghost {
    background: transparent;
    color: var(--txt-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--txt-primary);
}

/* Botón icono cuadrado */
.btn-icon {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border-radius: var(--r-full);
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* Variantes de icono */
.btn-icon-violet {
    background: var(--violet);
    color: var(--white);
}

.btn-icon-green {
    background: var(--green);
    color: var(--white);
}

.btn-icon-orange {
    background: var(--orange);
    color: var(--white);
}

.btn-icon-yellow {
    background: var(--yellow);
    color: var(--bg-base);
}

.btn-icon-ghost {
    background: var(--bg-hover);
    color: var(--txt-secondary);
    border: 1px solid var(--border);
}

/* Tamaños */
.btn-sm {
    height: 3rem;
    padding: 0 1.2rem;
    font-size: 1.25rem;
}

.btn-lg {
    height: 4.4rem;
    padding: 0 2.4rem;
    font-size: 1.5rem;
}

.btn-xl {
    height: 5.2rem;
    padding: 0 3.2rem;
    font-size: 1.6rem;
}

.btn-full {
    width: 100%;
}


/* ── 7. BADGE / CHIP ─────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .8rem;
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
    white-space: nowrap;
}

.badge-violet {
    background: rgba(105, 0, 204, .15);
    color: #C9A0FF;
    border: 1px solid rgba(105, 0, 204, .25);
}

.badge-pink {
    background: rgba(246, 0, 118, .12);
    color: var(--strawberry);
    border: 1px solid rgba(246, 0, 118, .22);
}

.badge-green {
    background: rgba(34, 197, 94, .12);
    color: var(--green);
    border: 1px solid rgba(34, 197, 94, .22);
}

.badge-yellow {
    background: rgba(255, 203, 3, .12);
    color: #D4A500;
    border: 1px solid rgba(255, 203, 3, .22);
}

.badge-orange {
    background: rgba(255, 95, 0, .12);
    color: var(--orange);
    border: 1px solid rgba(255, 95, 0, .22);
}

.badge-red {
    background: rgba(239, 68, 68, .12);
    color: var(--red);
    border: 1px solid rgba(239, 68, 68, .22);
}

.badge-gray {
    background: var(--bg-surface-2);
    color: var(--txt-muted);
    border: 1px solid var(--border);
}


/* ── 8. CARD ─────────────────────────────────────────────── */
.card {
    background: var(--bg-nav);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
}

[data-theme="light"] .card {
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid var(--border);
    gap: 1.2rem;
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--txt-content);
}

.card-body {
    padding: 2rem;
}

.card-footer {
    padding: 1.4rem 2rem;
    border-top: 1px solid var(--border);
}


/* ── 9. TABLE ────────────────────────────────────────────── */
.nice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

.nice-table thead th {
    padding: 1rem 1.4rem;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--txt-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.nice-table tbody td {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--border);
    color: var(--txt-content);
    vertical-align: middle;
}

.nice-table tbody tr:last-child td {
    border-bottom: none;
}

.nice-table tbody tr:hover td {
    background: var(--bg-hover);
}

.nice-table tbody tr:hover td:first-child {
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.nice-table tbody tr:hover td:last-child {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}


/* ── 9.1 DATATABLES (LEGACY MODULES) ────────────────────── */

/* Container */
.appnice_main .app__container-body-table .dataTables_wrapper {
    background: var(--module-surface);
    padding: 2.4rem;
    border-radius: var(--r-lg);
}

.appnice_main .app__container-body-table .apptable thead {
    font-size: 1.4rem;
    text-transform: uppercase;
    text-align: left;
}

.appnice_main .app__container-body-table {
    padding: 2.4rem;
    font-size: 1.4rem;
    min-height: 47rem;
}

/* Generic table overrides for ERP */
.appnice_main table h4 {
    font-weight: var(--fw-semibold);
    font-size: 1.4rem;
    color: var(--txt-content);
}

.appnice_main thead {
    font-size: 1.3rem;
    color: var(--txt-content);
    background-color: var(--bg-surface);
}

.appnice_main tbody {
    font-size: 1.4rem;
    color: var(--txt-content);
}

.appnice_main tbody .label {
    font-size: 1.3rem;
}

.appnice_main .table>tbody>tr:hover {
    background-color: var(--bg-hover);
}

.appnice_main .table>tbody>tr>td {
    vertical-align: top !important;
}

.appnice_main .table>thead>tr>th,
.appnice_main .table>tbody>tr>th,
.appnice_main .table>tfoot>tr>th,
.appnice_main .table>thead>tr>td,
.appnice_main .table>tbody>tr>td,
.appnice_main .table>tfoot>tr>td {
    padding: 1.5rem;
    border-top: 1px solid var(--border);
}

.appnice_main .table thead th {
    padding: 1rem;
    font-weight: var(--fw-semibold);
}

.appnice_main .table>thead>tr>th {
    border-bottom: 1px solid var(--border);
}

.appnice_main .table thead th:first-child {
    padding-left: 1.5rem;
}

.appnice_main .bg-odd {
    background-color: var(--bg-surface-2);
}

.appnice_main tfoot td {
    font-weight: var(--fw-medium);
    font-size: 1.4rem;
    color: var(--txt-content);
}

.appnice_main .app-table-coupon img {
    max-width: 20rem;
}

/* Datatable header controls */
.appnice_main .datatable-header {
    padding: 0 0 1.6rem;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: [filter-start] max-content [filter-end space-start] 1fr [space-end buttons-start] max-content [buttons-end lenght-start] max-content [lenght-end];
    grid-gap: 1rem;
    align-items: center;
}

.appnice_main .table__headerIcon {
    fill: var(--violet);
    width: 2rem;
    height: 2rem;
}

.appnice_main .dataTables_filter label {
    display: grid;
    align-items: center;
    grid-gap: 2rem;
    grid-template-columns: 5rem 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 0;
    font-size: 1.6rem;
    color: var(--txt-content-2);
}

.appnice_main .dataTables_length label {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, auto);
    align-items: center;
    font-size: 1.6rem;
    margin: 0;
    font-weight: var(--fw-medium);
    color: var(--txt-content-2);
}

.appnice_main .dataTables_info {
    font-size: 1.4rem;
    color: var(--txt-content-2);
}

.appnice_main .datatable-header .dt-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

.appnice_main .n-trTitle_mobile {
    display: none;
}

/* Datatable footer / pagination */
.appnice_main .datatable-footer {
    padding: 3rem 2rem 2rem;
    text-align: center;
    border-top: 1px solid var(--border);
}

.appnice_main .datatable-footer .dataTables_paginate span a {
    cursor: pointer;
    background: var(--bg-surface);
    border-radius: var(--r-xs);
    color: var(--txt-content);
}

.appnice_main .datatable-footer .dataTables_paginate span a:hover {
    opacity: 0.7;
}

.appnice_main .datatable-footer .dataTables_paginate span .current {
    background-color: var(--violet);
    color: var(--white);
}

.appnice_main .datatable-footer .dataTables_paginate .paginate_button {
    cursor: pointer;
    padding: 0.8rem 1.5rem;
    margin: 1rem;
    display: inline-block;
    color: var(--txt-content-2);
}

/* Datatable action buttons */
.appnice_main .btn-table {
    background-color: transparent;
    border: 0;
}

.appnice_main .btn-table__icon {
    font-size: 2.4rem;
    color: var(--strawberry);
}

.appnice_main .btn-table__closeIcon {
    height: 2rem;
    width: 1.5rem;
    fill: var(--txt-content);
}

.appnice_main .dt-buttons .dt-button {
    position: relative;
    background-color: var(--strawberry);
    color: var(--white);
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    white-space: nowrap;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    height: 3.6rem;
    line-height: 1.4em;
    padding: 0 1.6rem;
    transition: all var(--ease);
    font-family: var(--font-body);
}

.appnice_main .dt-buttons .dt-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.appnice_main .dt-buttons .dt-button span {
    font-weight: var(--fw-medium);
}

/* dataTable base */
.appnice_main .dataTable tbody td {
    padding: 1rem;
    vertical-align: middle;
    color: var(--txt-content);
}

.appnice_main .dataTable {
    margin: 0;
    max-width: none;
    border-collapse: separate;
    color: var(--txt-content);
}

.appnice_main .dataTable thead th,
.appnice_main .dataTable thead td {
    outline: 0;
    position: relative;
}

.appnice_main .dataTable thead .sorting_asc,
.appnice_main .dataTable thead .sorting_desc,
.appnice_main .dataTable thead .sorting {
    cursor: pointer;
}

.appnice_main .dataTable thead .sorting,
.appnice_main .dataTable thead .sorting_asc,
.appnice_main .dataTable thead .sorting_desc,
.appnice_main .dataTable thead .sorting_asc_disabled,
.appnice_main .dataTable thead .sorting_desc_disabled {
    padding-right: 2.5rem;
}

.appnice_main .dataTable thead .sorting:before,
.appnice_main .dataTable thead .sorting:after,
.appnice_main .dataTable thead .sorting_asc:after,
.appnice_main .dataTable thead .sorting_desc:after,
.appnice_main .dataTable thead .sorting_asc_disabled:after,
.appnice_main .dataTable thead .sorting_desc_disabled:after {
    content: '';
    font-family: 'icomoon';
    position: absolute;
    top: 50%;
    right: 10px;
    font-size: 12px;
    margin-top: -6px;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.appnice_main .dataTable thead .sorting:before {
    content: '\e9c1';
    margin-top: -2px;
    color: var(--txt-muted);
}

.appnice_main .dataTable thead .sorting:after {
    content: '\e9c2';
    margin-top: -10px;
    color: var(--txt-muted);
}

.appnice_main .dataTable thead .sorting_asc:after {
    content: '\e9c2';
}

.appnice_main .dataTable thead .sorting_desc:after {
    content: '\e9c1';
}

.appnice_main .dataTable thead .sorting_asc_disabled:after {
    content: '\e9c2';
    color: var(--border);
}

.appnice_main .dataTable thead .sorting_desc_disabled:after {
    content: '\e9c1';
    color: var(--border);
}

.appnice_main .dataTable tbody>tr:first-child>th,
.appnice_main .dataTable tbody>tr:first-child>td {
    border-top: 0;
}

.appnice_main .dataTable tbody>tr:hover {
    background-color: var(--bg-hover);
}

.appnice_main .dataTable tbody+thead>tr:first-child>th,
.appnice_main .dataTable tbody+tfoot+thead>tr:first-child>th,
.appnice_main .dataTable tbody+thead>tr:first-child>td,
.appnice_main .dataTable tbody+tfoot+thead>tr:first-child>td {
    border-top: 0;
}

.appnice_main .dataTable tbody>tr strong {
    font-weight: var(--fw-medium);
}

.appnice_main .dataTable.table-bordered {
    border-collapse: collapse;
}

/* dataTables scroll */
.appnice_main .dataTables_scroll {
    clear: both;
}

.appnice_main .dataTables_scroll .dataTables_scrollHead table {
    border-bottom: 0;
}

.appnice_main .dataTables_scroll .dataTables_scrollHead th,
.appnice_main .dataTables_scroll .dataTables_scrollHead td {
    white-space: nowrap;
}

.appnice_main .dataTables_scroll .dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
}

.appnice_main .dataTables_scroll .dataTables_scrollBody table {
    border-bottom: 0;
}

.appnice_main .dataTables_scroll .dataTables_scrollBody table thead th[class*=sorting]:before,
.appnice_main .dataTables_scroll .dataTables_scrollBody table thead th[class*=sorting]:after {
    content: none;
}

.appnice_main .dataTables_scroll .dataTables_scrollBody table tbody tr:first-child>td {
    border-top: 0;
}

.appnice_main .dataTables_scroll .dataTables_scrollBody th,
.appnice_main .dataTables_scroll .dataTables_scrollBody td {
    white-space: nowrap;
}

.appnice_main .dataTables_scroll .dataTables_scrollBody th>.dataTables_sizing,
.appnice_main .dataTables_scroll .dataTables_scrollBody td>.dataTables_sizing {
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Panel + dataTables integration */
.appnice_main .panel-body+.dataTables_wrapper,
.appnice_main .panel-body+*>.dataTables_wrapper {
    border-top: 1px solid var(--border);
}

.appnice_main .panel-body>.dataTables_wrapper .datatable-footer {
    border-top: 0;
}

.appnice_main .panel-body>.dataTables_wrapper .datatable-footer .dataTables_length,
.appnice_main .panel-body>.dataTables_wrapper .datatable-footer .dataTables_filter,
.appnice_main .panel-body>.dataTables_wrapper .datatable-footer .dataTables_info,
.appnice_main .panel-body>.dataTables_wrapper .datatable-footer .dataTables_paginate {
    margin-bottom: 0;
}

.appnice_main .panel-flat>.panel-heading+.dataTables_wrapper>.datatable-header {
    padding-top: 0;
}

.appnice_main .panel>.dataTables_wrapper .table-bordered {
    border: 0;
}

.appnice_main .panel>.dataTables_wrapper .table-bordered>thead>tr>td:first-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tbody>tr>td:first-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tfoot>tr>td:first-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>thead>tr>th:first-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tbody>tr>th:first-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tfoot>tr>th:first-child {
    border-left: 0;
}

.appnice_main .panel>.dataTables_wrapper .table-bordered>thead>tr>td:last-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tbody>tr>td:last-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tfoot>tr>td:last-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>thead>tr>th:last-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tbody>tr>th:last-child,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tfoot>tr>th:last-child {
    border-right: 0;
}

.appnice_main .panel>.dataTables_wrapper .table-bordered>tbody>tr:last-child>th,
.appnice_main .panel>.dataTables_wrapper .table-bordered>tbody>tr:last-child>td {
    border-bottom: 0;
}

/* Scroll wrappers */
.appnice_main .datatable-scroll-lg,
.appnice_main .datatable-scroll,
.appnice_main .datatable-scroll-sm {
    min-height: .01%;
}

.appnice_main .datatable-scroll-wrap {
    width: 100%;
    min-height: .01%;
    overflow-x: auto;
}

.appnice_main .panel-heading h6 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-medium);
    color: var(--txt-content);
    margin-bottom: 1.6rem;
}

/* Row reorder */
.appnice_main .dt-rowReorder-float {
    position: absolute !important;
    table-layout: static;
    outline: 1px dashed var(--border);
    outline-offset: -1px;
    background-color: var(--module-surface);
    z-index: 1030;
    cursor: move;
    opacity: .9;
}

.appnice_main .dt-rowReorder-moving {
    outline: 1px solid var(--border);
    outline-offset: -1px;
}

.appnice_main .dt-rowReorder-noOverflow {
    overflow-x: hidden;
}

.appnice_main .dataTable td.reorder {
    text-align: center;
    cursor: move;
}

/* ── Dark theme overrides */
[data-theme="dark"] .appnice_main thead {
    background-color: rgba(255, 255, 255, .04);
    color: var(--txt-content);
}

[data-theme="dark"] .appnice_main .app__container-body-table .dataTables_wrapper {
    background: var(--module-surface);
}

[data-theme="dark"] .appnice_main .dataTable {
    color: var(--txt-content);
}

[data-theme="dark"] .appnice_main .dataTable tbody>tr:hover {
    background-color: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .appnice_main .bg-odd {
    background-color: rgba(255, 255, 255, .025);
}

[data-theme="dark"] .appnice_main .dataTables_filter label,
[data-theme="dark"] .appnice_main .dataTables_length label,
[data-theme="dark"] .appnice_main .dataTables_info {
    color: rgba(255, 255, 255, .55);
}

[data-theme="dark"] .appnice_main .datatable-footer .dataTables_paginate span .current {
    background: var(--violet);
    color: var(--white);
}

[data-theme="dark"] .appnice_main .btn-table__closeIcon {
    fill: rgba(255, 255, 255, .75);
}

/* ── Light theme overrides */
[data-theme="light"] .appnice_main thead {
    background-color: rgba(21, 18, 36, .03);
    color: var(--txt-content);
}

[data-theme="light"] .appnice_main .app__container-body-table .dataTables_wrapper {
    background: var(--white);
}

[data-theme="light"] .appnice_main .dataTable {
    color: #151224;
}

[data-theme="light"] .appnice_main .dataTable tbody>tr:hover {
    background-color: rgba(105, 0, 204, .05);
}

[data-theme="light"] .appnice_main .bg-odd {
    background-color: rgba(0, 0, 0, .02);
}

[data-theme="light"] .appnice_main .dataTables_filter label,
[data-theme="light"] .appnice_main .dataTables_length label,
[data-theme="light"] .appnice_main .dataTables_info {
    color: rgba(21, 18, 36, .65);
}

[data-theme="light"] .appnice_main .datatable-footer .dataTables_paginate span .current {
    background: #151224;
    color: var(--white);
}

/* ── Datatable responsive */
@media screen and (max-width: 57.5em) {
    .appnice_main .datatable-header .dataTables_filter {
        justify-self: center;
    }

    .appnice_main .datatable-header .dataTables_length {
        justify-self: center;
    }

    .appnice_main .datatable-header {
        grid-template-rows: repeat(3, auto);
        grid-template-columns: auto;
        justify-content: center;
        grid-gap: 2rem 0;
        padding: 1rem;
    }

    .appnice_main .datatable-header .dt-buttons {
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .appnice_main .datatable-scroll-sm {
        width: 100%;
        overflow-x: scroll;
    }

    .appnice_main .datatable-scroll-sm th,
    .appnice_main .datatable-scroll-sm td {
        white-space: nowrap;
    }

    .appnice_main .dataTables_info,
    .appnice_main .dataTables_paginate,
    .appnice_main .dataTables_length,
    .appnice_main .dataTables_filter,
    .appnice_main .DTTT_container,
    .appnice_main .ColVis {
        float: none !important;
        text-align: center;
        margin-left: 0;
    }

    .appnice_main .dataTables_info,
    .appnice_main .dataTables_paginate {
        margin-top: 0;
    }

    .appnice_main .datatable-header {
        text-align: center;
    }

    .appnice_main .n-trTitle_mobile {
        display: block;
    }

    .app__container-header {
        border-bottom: var(--line);
        height: initial;
        display: block;
        align-items: center;
        padding: 1.6rem;
        flex-direction: column;
    }

    .app__container-header-title {
        padding: 0 0 1.6rem;
        justify-content: center;
    }

    .app__container-header-title h1 {
        font-size: 2rem;
        font-weight: 500;
    }

    .appnice_main .activeOrders_header {
        grid-template-columns: 1fr;
        justify-content: center;
    }

    .appnice_main .summary-view-toggle,
    .appnice_main .summary-view-toggle.active {
        justify-content: center;
        width: 100%;
        display: flex;
    }
}

@media (max-width: 1024px) {
    .appnice_main .datatable-scroll {
        width: 100%;
        overflow-x: scroll;
    }

    .appnice_main .datatable-scroll th,
    .appnice_main .datatable-scroll td {
        white-space: nowrap;
    }
}

@media (max-width: 1199px) {
    .appnice_main .datatable-scroll-lg {
        width: 100%;
        overflow-x: scroll;
    }

    .appnice_main .datatable-scroll-lg th,
    .appnice_main .datatable-scroll-lg td {
        white-space: nowrap;
    }
}


/* ── 9.2 NICE TABLE LIST (non-datatable, sortable) ───────── */

/* Outer wrapper */
.appnice_main .nice_table {
    width: 100%;
}

/* UL list container */
.appnice_main .nice_tableList {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each row / item */
.appnice_main .nice__tablelistItem {
    display: grid;
    grid-gap: 1.6rem;
    background: var(--module-surface);
    border: 1px solid var(--module-border);
    color: var(--txt-content);
    font-size: 1.4rem;
    line-height: 1.5em;
    transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
    margin-bottom: .5rem;
    border-radius: 1.2rem;
    padding: 1.6rem 2.4rem;
    align-items: center;
}

.appnice_main .nice__tablelistItem:hover {
    background: var(--bg-hover);
    border-color: rgba(105, 0, 204, .22);
    box-shadow: 0 4px 12px rgba(105, 0, 204, .06);
}

/* Category table row columns */
.appnice_main .nice__tableMenuCat {
    grid-template-columns: repeat(3, 1fr) minmax(16rem, 25rem) auto;
    align-items: flex-start;
}

/* Booking cards (table view) */
.appnice_main .nice__tableBooking.booking-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    align-items: stretch;
    padding: 1.6rem;
    border-radius: 1.4rem;
}

.appnice_main .booking-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.appnice_main .booking-card__name {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: .3rem;
    color: var(--txt-content);
}

.appnice_main .booking-card__id {
    margin: 0;
    font-size: 1.2rem;
    color: var(--txt-muted);
    font-weight: var(--fw-medium);
}

.appnice_main .booking-card__status .btn-status {
    min-height: 3.2rem;
    border-radius: 99rem;
}

.appnice_main .booking-card__highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.appnice_main .booking-chip {
    border: 1px solid var(--module-border);
    border-radius: 1rem;
    background: var(--bg-surface-2);
    padding: .75rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.appnice_main .booking-chip span {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--txt-muted);
    font-weight: var(--fw-semibold);
}

.appnice_main .booking-chip strong {
    font-size: 1.35rem;
    color: var(--txt-content);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
}

.appnice_main .booking-chip--wide {
    grid-column: span 2;
}

.appnice_main .booking-card__contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.appnice_main .booking-contact-item {
    border: 1px solid var(--module-border);
    border-radius: 1rem;
    padding: .7rem .95rem;
    background: var(--bg-surface-2);
    min-width: 0;
}

.appnice_main .booking-contact-label {
    display: block;
    font-size: 1.15rem;
    color: var(--txt-muted);
    margin-bottom: .15rem;
}

.appnice_main .booking-contact-item strong {
    display: block;
    font-size: 1.35rem;
    color: var(--txt-content);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appnice_main .booking-card__note {
    border-left: .3rem solid var(--violet);
    border-radius: .8rem;
    padding: .8rem 1rem;
    background: rgba(105, 0, 204, .08);
}

.appnice_main .booking-card__note strong {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .2rem;
    color: var(--txt-muted);
}

.appnice_main .booking-card__note p {
    margin: 0;
    font-size: 1.35rem;
    color: var(--txt-content);
    line-height: 1.45;
}

.appnice_main .booking-card__actions {
    padding-top: .9rem !important;
    margin-top: .2rem;
    justify-content: flex-start;
}

[data-theme="light"] .appnice_main .booking-card__note {
    background: rgba(105, 0, 204, .05);
}

/* Cat menu image */
.appnice_main .nice__catMenuImage img {
    max-width: 25rem;
    width: 100%;
    border-radius: var(--r-md);
}

/* Drag/reorder handle */
.appnice_main .reorder_plateTable {
    display: flex;
    align-items: center;
}

.appnice_main .reorder_plateTable .btn-table__icon {
    fill: var(--strawberry);
    margin-right: 1.6rem;
    width: 2.4rem;
    cursor: grab;
    opacity: .55;
    transition: opacity var(--ease);
}

.appnice_main #sortable-list-basic .nice__tablelistItem:hover .reorder_plateTable .btn-table__icon,
.appnice_main .reorder_plateTable:hover .btn-table__icon {
    opacity: 1;
}

.upgrade__messageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 26.3rem);
}

.upgrade__submessageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.2rem;
}

.upgrade__messageImage {
    max-width: 15rem;
    margin-bottom: 2.4rem;
    display: inline-block;
}

.upgrade__title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.upgrade__messageContent p {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
}

.upgrade__messageContent a {
    display: inline-block;
}

/* Row titles */
.appnice_main h3.nice__plateTable-title,
.appnice_main .nice__catMenuname span {
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
    color: var(--txt-content);
}

/* Action buttons area at end of row */
.appnice_main .nice__cataddonActions,
.appnice_main .nice__moduleActions,
.appnice_main .nice__moduleActions {
    display: flex;
    gap: .8rem;
    padding: 0 !important;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* Link wrapper reset */
.appnice_main .order__detailLink,
.appnice_main .action__detailLink {
    text-decoration: none;
}

/* Table action buttons — unified with ERP button system */
.appnice_main .order__detailLink .n-btn,
.appnice_main .action__detailLink .n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    min-height: 4rem;
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: var(--fw-medium);
    border-radius: var(--r-md);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--ease);
    border: 1px solid transparent;
    width: 100% !important;
    background: var(--bg-surface);
    color: var(--txt-content);
    border-color: var(--module-border);
}

.appnice_main .order__detailLink .n-btn:hover,
.appnice_main .action__detailLink .n-btn:hover,
.appnice_main .modal-footer .n-btn:hover {
    transform: translateY(-.1rem);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
}

.appnice_main .order__detailLink .n-btn.bg-nice:hover,
.appnice_main .action__detailLink .n-btn.bg-nice:hover {
    filter: brightness(1.1);
}

/* Delete variant (n-text-space-opera = strawberry ghost) */
.appnice_main .n-text-space-opera {
    color: var(--strawberry) !important;
}

.appnice_main .order__detailLink .n-btn.n-text-space-opera,
.appnice_main .action__detailLink .n-btn.n-text-space-opera {
    background: rgba(246, 0, 118, .07);
    color: var(--strawberry) !important;
    border-color: rgba(246, 0, 118, .22);
}

.appnice_main .order__detailLink .n-btn.n-text-space-opera:hover,
.appnice_main .action__detailLink .n-btn.n-text-space-opera:hover {
    background: rgba(246, 0, 118, .14);
    border-color: rgba(246, 0, 118, .40);
}

/* ── Dark theme */
[data-theme="dark"] .appnice_main .nice__tablelistItem {
    background: rgb(38 33 64);
    border-color: rgba(255, 255, 255, .10);
    color: rgb(218 218 218);
}

[data-theme="dark"] .appnice_main .nice__tablelistItem:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(105, 0, 204, .38);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .20);
}

[data-theme="dark"] .appnice_main .order__detailLink .n-btn,
[data-theme="dark"] .appnice_main .action__detailLink .n-btn,
[data-theme="dark"] .appnice_main .modal-footer .n-btn {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .88);
}

[data-theme="dark"] .appnice_main .order__detailLink .n-btn:hover,
[data-theme="dark"] .appnice_main .action__detailLink .n-btn:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .24);
}

/* ── Light theme */
[data-theme="light"] .appnice_main .nice__tablelistItem {
    background: var(--white);
    border-color: rgba(21, 18, 36, .09);
    color: #151224;
}

[data-theme="light"] .appnice_main .nice__tablelistItem:hover {
    background: rgba(105, 0, 204, .04);
    border-color: rgba(105, 0, 204, .20);
    box-shadow: 0 4px 12px rgba(105, 0, 204, .06);
}

[data-theme="light"] .appnice_main .order__detailLink .n-btn,
[data-theme="light"] .appnice_main .action__detailLink .n-btn,
[data-theme="light"] .appnice_main .modal-footer .n-btn {
    background: var(--white);
    border-color: rgba(21, 18, 36, .14);
    color: #151224;
}

[data-theme="light"] .appnice_main .order__detailLink .n-btn:hover,
[data-theme="light"] .appnice_main .action__detailLink .n-btn:hover,
[data-theme="light"] .appnice_main .modal-footer .n-btn:hover {
    background: rgba(105, 0, 204, .06);
    border-color: rgba(105, 0, 204, .28);
}

/* ── Mobile */
@media (max-width: 768px) {
    .appnice_main .nice__tableMenuCat {
        grid-template-columns: 1fr !important;
        gap: 1.2rem;
    }

    .appnice_main .nice__tablelistItem {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        font-size: 1.3rem;
        padding: 1.4rem 1.8rem;
    }

    .appnice_main .nice__catMenuImage img {
        max-width: 100%;
    }

    .appnice_main .nice__moduleActions,
    .appnice_main .nice__cataddonActions,
    .appnice_main .nice__addonActions {
        justify-content: flex-start;
    }

    .appnice_main .booking-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .appnice_main .booking-card__highlights,
    .appnice_main .booking-card__contact {
        grid-template-columns: 1fr;
    }

    .appnice_main .booking-chip--wide {
        grid-column: span 1;
    }

    .appnice_main .booking-contact-item strong {
        white-space: normal;
        word-break: break-word;
    }
}


/* ── 10. FORM ELEMENTS ───────────────────────────────────── */
.form-group {
    margin-bottom: 2.4rem;
    position: relative;
    font-family: var(--font-body);
    width: -webkit-fill-available;
}

.inputIcon-right {
    padding: 1rem 1.2rem;
    height: 4rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.inputIcon-right i {
    font-size: 2rem;
}

.form-field {
    margin-bottom: 1.6rem;
}

.form-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--txt-muted);
    margin-bottom: .6rem;
}

.form-control {
    width: 100%;
    height: 3.8rem;
    padding: 0 1.2rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: 1.4rem;
    color: var(--txt-content);
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
    appearance: none;
    -webkit-appearance: none;
}

.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 .3rem rgba(105, 0, 204, .10);
}

.form-control::placeholder {
    color: var(--txt-muted);
    font-weight: 500;
}

textarea.form-control {
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    resize: vertical;
    min-height: 9.6rem;
    line-height: 1.6;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B91B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 1.2rem center !important;
    background-size: 1.2rem .8rem !important;
    padding-right: 3.6rem !important;
    cursor: pointer;
}

.form-hint {
    font-size: 1.2rem;
    color: var(--txt-muted);
    margin-top: .5rem;
    line-height: 1.4;
}

.form-row {
    display: grid;
    gap: 1.6rem;
}

.form-row-2 {
    grid-template-columns: 1fr 1fr;
}

.form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}


/* ── 11. STAT CARDS ──────────────────────────────────────── */
.stat-card {
    background: var(--bg-nav);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--ease);
}

[data-theme="light"] .stat-card {
    background: var(--white);
    box-shadow: var(--shadow-card);
}

.stat-card:hover {
    border-color: rgba(105, 0, 204, .30);
}

.stat-label {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--txt-muted);
    margin-bottom: .8rem;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: var(--fw-extrabold);
    color: var(--txt-content);
    line-height: 1;
    margin-bottom: .6rem;
}

.stat-change {
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.stat-change.up {
    color: var(--green);
}

.stat-change.down {
    color: var(--red);
}

.stat-change.flat {
    color: var(--txt-muted);
}

/* Grid de stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}


/* ── 12. EMPTY STATE ─────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6.4rem 2rem;
    gap: 1.2rem;
}

.empty-icon {
    font-size: 4.8rem;
    opacity: .35;
    margin-bottom: .8rem;
}

.empty-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    color: var(--txt-content);
}

.empty-desc {
    font-size: 1.4rem;
    color: var(--txt-content-2);
    max-width: 36rem;
    line-height: 1.65;
}


/* ── 13. TOAST NOTIFICATION ──────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 2.4rem;
    right: 2.4rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--r-lg);
    min-width: 28rem;
    max-width: 36rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .20);
    animation: toastIn .25s ease;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-success {
    background: #0F3D20;
    border: 1px solid rgba(34, 197, 94, .30);
}

.toast-error {
    background: #3D0F1A;
    border: 1px solid rgba(246, 0, 118, .30);
}

.toast-info {
    background: #1A0F3D;
    border: 1px solid rgba(105, 0, 204, .30);
}

.toast-warning {
    background: #3D2F0F;
    border: 1px solid rgba(255, 203, 3, .30);
}

.toast-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.toast-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    margin-bottom: .3rem;
    color: var(--white);
}

.toast-message {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .70);
    line-height: 1.5;
}

[data-theme="light"] .toast-success {
    background: #F0FFF4;
}

[data-theme="light"] .toast-error {
    background: #FFF0F5;
}

[data-theme="light"] .toast-info {
    background: #F5F0FF;
}

[data-theme="light"] .toast-warning {
    background: #FFFBF0;
}

[data-theme="light"] .toast-title {
    color: #151224;
}

[data-theme="light"] .toast-message {
    color: rgba(21, 18, 36, .65);
}


/* ── 14. LOADER ──────────────────────────────────────────── */
.loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(21, 18, 36, .50);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    backdrop-filter: blur(.4rem);
}

.loader-spinner {
    width: 3.2rem;
    height: 3.2rem;
    border: .3rem solid rgba(255, 255, 255, .15);
    border-top-color: var(--violet);
    border-radius: var(--r-full);
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ── 15. UTILIDADES ──────────────────────────────────────── */

/* Display */
.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-block {
    display: block;
}

.d-none {
    display: none;
}

.d-inline {
    display: inline;
}

/* Flex */
.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.gap-xs {
    gap: .8rem;
}

.gap-sm {
    gap: 1.2rem;
}

.gap-md {
    gap: 1.6rem;
}

.gap-lg {
    gap: 2.4rem;
}

/* Texto */
.text-primary {
    color: var(--txt-primary);
}

.text-secondary {
    color: var(--txt-secondary);
}

.text-muted {
    color: var(--txt-muted);
}

.text-violet {
    color: var(--violet);
}

.text-green {
    color: var(--green);
}

.text-pink {
    color: var(--strawberry);
}

.text-orange {
    color: var(--orange);
}

.text-yellow {
    color: var(--yellow);
}

.text-sm {
    font-size: 1.3rem;
}

.text-xs {
    font-size: 1.2rem;
}

.text-lg {
    font-size: 1.8rem;
}

.text-xl {
    font-size: 2rem;
}

.text-bold {
    font-weight: var(--fw-bold);
}

.text-semi {
    font-weight: var(--fw-semibold);
}

.text-upper {
    text-transform: uppercase;
    letter-spacing: .06em;
}

.text-nowrap {
    white-space: nowrap;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* Spacing */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: .8rem;
}

.mt-2 {
    margin-top: 1.6rem;
}

.mt-3 {
    margin-top: 2.4rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: .8rem;
}

.mb-2 {
    margin-bottom: 1.6rem;
}

.mb-3 {
    margin-bottom: 2.4rem;
}

/* Misc */
.help-block {
    font-size: 1.24rem;
    color: var(--txt-muted);
    margin-top: .4rem;
}

.w-full {
    width: 100%;
}

.overflow-hidden {
    overflow: hidden;
}

.rounded {
    border-radius: var(--r-md);
}

.rounded-lg {
    border-radius: var(--r-lg);
}

.rounded-full {
    border-radius: var(--r-full);
}

.border {
    border: 1px solid var(--border);
}

.shadow {
    box-shadow: var(--shadow-card);
}


/* ── 16. SUBSCRIPTION ALERT ─────────────────────────────── */
.header-alerts {
    display: flex;
    align-items: center;
}

.subscription-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem 1.4rem;
    border-radius: var(--r-full);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: var(--fw-semibold);
}

.subscription-alert.is-suspended {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25);
    color: var(--red);
}

.subscription-alert.is-overdue {
    background: rgba(255, 203, 3, .10);
    border: 1px solid rgba(255, 203, 3, .22);
    color: #A07800;
}

[data-theme="dark"] .subscription-alert.is-overdue {
    color: var(--yellow);
}

.subscription-alert a {
    font-weight: var(--fw-bold);
    text-decoration: underline;
    color: inherit;
    margin-left: .4rem;
}

.subscription-alert a:hover {
    opacity: .80;
}


/* ── 17. HEADER DROPDOWNS ────────────────────────────────── */

/* Wrapper relativo para cada botón con dropdown */
.header-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

/* Panel desplegable base */
.header-dropdown-panel {
    position: absolute;
    top: calc(100% + .8rem);
    right: 0;
    min-width: 28rem;
    background: var(--bg-nav);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.8rem);
    transition: opacity .18s ease, transform .18s ease;
    overflow: hidden;
}

[data-theme="light"] .header-dropdown-panel {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.header-dropdown.is-open .header-dropdown-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Encabezado del panel */
.hdp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.6rem 1rem;
    border-bottom: 1px solid var(--border);
}

.hdp-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    color: var(--txt-primary);
}

.hdp-link {
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    color: var(--violet);
    transition: color var(--ease);
}

.hdp-link:hover {
    color: var(--purple);
}

/* Lista de notificaciones */
.notif-list {
    max-height: 32rem;
    overflow-y: auto;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.4rem 1.6rem;
    gap: .8rem;
    color: var(--txt-muted);
    font-size: 1.3rem;
}

.notif-empty img {
    width: 4rem;
    opacity: .45;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--ease);
    text-decoration: none;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: var(--bg-hover);
}

.notif-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--r-full);
    object-fit: cover;
    flex-shrink: 0;
}

.notif-message {
    flex: 1;
    font-size: 1.3rem;
    color: var(--txt-secondary);
    line-height: 1.5;
}

.notif-date {
    font-size: 1.15rem;
    color: var(--txt-muted);
    margin-top: .4rem;
}

/* Badge de notificaciones sin leer */
.notif-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: .8rem;
    height: .8rem;
    border-radius: var(--r-full);
    background: var(--strawberry);
    border: 2px solid var(--bg-header);
    pointer-events: none;
}

/* Menú de usuario */
.user-menu-list {
    padding: .6rem 0;
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.6rem;
    font-size: 1.4rem;
    color: var(--txt-secondary);
    transition: background var(--ease), color var(--ease);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.user-menu-item:hover {
    background: var(--bg-hover);
    color: var(--txt-primary);
}

.user-menu-item i {
    width: 2rem;
    font-size: 1.6rem;
    color: var(--txt-muted);
    flex-shrink: 0;
}

.user-menu-item:hover i {
    color: var(--txt-primary);
}

.user-menu-item.is-info {
    padding-bottom: .4rem;
    font-size: 1.25rem;
    color: var(--txt-muted);
    cursor: default;
}

.user-menu-item.is-info:hover {
    background: none;
    color: var(--txt-muted);
}

.user-menu-item.is-info i {
    color: var(--txt-muted);
}

.user-menu-divider {
    height: 1px;
    background: var(--border);
    margin: .4rem 0;
}

/* BOOKING */
.nice-timepicker {
    position: relative;
}

.nice-timepicker-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #7d8795;
    padding: 4px;
    line-height: 1;
}

.nice-timepicker-panel {
    position: absolute;
    z-index: 1065;
    left: 0;
    right: 0;
    margin-top: 6px;
    border: 1px solid #d7dbe3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.nice-timepicker-title {
    font-size: 12px;
    font-weight: 600;
    color: #586277;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #edf0f5;
}

.nice-timepicker-options {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.nice-timepicker-option {
    border: 1px solid #d7dbe3;
    background: #fff;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #4c586c;
}

.nice-timepicker-option:hover {
    background: #f1f7ff;
    border-color: #95b9ef;
}

.nice-timepicker-option.is-active {
    background: #2f80ed;
    color: #fff;
    border-color: #2f80ed;
}

#booking_hour {
    padding-right: 34px;
    cursor: pointer;
}

/*LOYALTY*/
/*------REWARDS-------*/
.nice__rewardFilters {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.nice__rewardFilterBtn {
    border: 1px solid var(--color-grey-e0);
    background: var(--color-white);
    color: var(--color-eerie-black);
    border-radius: 1rem;
    padding: 0.8rem 1.6rem;
    font-weight: 500;
    cursor: pointer;
}

.nice__rewardFilterBtn.active {
    background: var(--color-nice-violet);
    border-color: var(--color-nice-violet);
    color: var(--color-white);
}

.nice__rewardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, auto));
    gap: 1.8rem;
}

.nice__rewardCard {
    border: 1px solid var(--color-grey-e0);
    border-radius: 1.2rem;
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-height: 22rem;
}

.nice__rewardCardIcon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: rgb(241 229 251);
    color: var(--color-nice-violet);
    font-size: 2.2rem;
}

.nice__rewardCardTitle {
    font-size: 2rem;
    font-family: var(--font-titles);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.nice__rewardCardDesc {
    color: var(--color-grey-7a);
}

.nice__rewardCardFooter {
    margin-top: auto;
    border-top: 1px solid var(--color-grey-e0);
    padding-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
}

.nice__rewardMetricLabel {
    color: var(--color-grey-7a);
    font-size: 1.3rem;
}

.nice__rewardMetricValue {
    font-size: 2rem;
    font-family: var(--font-titles);
    font-weight: 600;
}

.nice__rewardTag {
    margin-left: auto;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    font-weight: 600;
}

.nice__rewardTag.unavailable {
    background: #ffe8e8;
    color: #d64a4a;
}

.nice__rewardTop {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}


/* ── 18. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row-3 {
        grid-template-columns: 1fr 1fr;
    }

    .appnice_main .app__container-body-widget {
        grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
    }

    .appnice_main .app__container-body-widget .widget h3 {
        font-size: 1.3rem;
    }

    .appnice_main .app__container-body-widget .widget span {
        font-size: 1.8rem;
    }
}

/* ── Botón hamburguesa (solo mobile) ── */
.header-nav-toggle {
    display: none;
}

.add-to-cart {
    display: block !important;
}

@media (max-width: 768px) {

    .modal-content__title {
        padding: 2rem 2rem 1.5rem;
    }

    .modal-content__title h4 {
        font-size: 1.8rem;
    }

    .modal-dialog-detail {
        display: flex;
        align-items: flex-end;
        height: 96vh;
        margin: 0 auto;
    }

    .modal-dialog-detail .modal-content {
        border-top-left-radius: 2.4rem;
        border-top-right-radius: 2.4rem;
        border: 0 !important;
        width: 100%;
    }

    .add-to-cart {
        display: block !important;
        position: fixed;
        background: var(--module-surface);
        width: 100%;
        bottom: 5rem;
        left: 0;
        right: 0;
        border-radius: 2.4rem;
    }

    .modal-footer,
    .app-modalRight .modal-footer {
        display: flex;
        justify-content: center;
    }

    .app-modalRight .modal-dialog {
        width: 100%;
    }

    .app-modalRight .modal-footer {
        gap: 0;
    }

    .app-modalRight .modal-footer .btn-mFooter {
        font-size: 1.6rem;
    }

    #formModalOrderitem .modal-dialog {
        margin: 0 auto;
        width: 100%;
        position: absolute;
        top: 3rem;
        bottom: 0;
        align-items: initial;
    }

    #formModalOrderitem .modal-content {
        margin-bottom: 5rem;
    }

    .appnice_main .app__containerBilling-filter {
        display: grid;
        grid-template-columns: 1fr;
    }

    .appnice_main .app__container-body-widget {
        grid-gap: 1rem;
    }

    .appnice_main .order-widget {
        display: flex;
        gap: 2rem;
        overflow: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 0 0 1.6rem;
    }

    .appnice_main .app__container-body-widget .widget {
        min-width: 16rem;
    }

    .appnice_main .app__container-body-widget .widget h3 {
        font-size: 1.4rem;
    }

    .appnice_main .app__container-body-widget .widget span {
        font-size: 1.8rem;
        padding: 0;
    }

    .appnice_main .app__container-header-meses,
    .appnice_main .app__container-header-meses .form-control {
        width: 100%
    }

    /* El hamburguesa aparece en mobile */
    .header-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        border-radius: var(--r-md);
        font-size: 2rem;
        color: rgba(255, 255, 255, .60);
        background: none;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
    }

    .header-nav-toggle:hover {
        background: var(--bg-hover);
        color: var(--txt-primary);
    }

    .appnice_main .app__welcomeTabs {
        grid-template-columns: 1fr;
    }

    .appnice_main .tabVertical {
        width: 100%;
        height: initial;
    }

    .appnice_main .tabVertical button {
        padding: 1rem 1.6rem;
        width: 100%;
        font-size: 1.2rem;
    }

    .appnice_main .tabcontentVertical {
        float: left;
        padding: 2.4rem 0.8rem;
        width: 100%;
        height: initial;
    }

    .appnice_main .tabcontentVertical p,
    .appnice_main .tabcontentVertical ul {
        font-size: 1.2rem;
    }

    /* Header siempre a la izquierda completa */
    .appnice_header,
    .appnice_navbar:hover~.appnice_header,
    .appnice_navbar.is-pinned~.appnice_header {
        left: 0 !important;
    }

    /* Main sin margen */
    .appnice_main,
    .appnice_navbar.is-pinned~.appnice_main {
        margin-left: 0 !important;
    }

    /* Navbar fuera de pantalla por defecto */
    .appnice_navbar,
    .appnice_navbar:hover {
        width: 26rem !important;
        transform: translateX(-100%);
        transition: transform var(--nav-speed) cubic-bezier(.4, 0, .2, 1),
            width 0s;
    }

    /* Navbar abierto en mobile */
    .appnice_navbar.is-open,
    .appnice_navbar.is-pinned {
        transform: translateX(0) !important;
    }

    /* Textos visibles cuando el nav está abierto en mobile */
    .appnice_navbar.is-open .nav-label,
    .appnice_navbar.is-open .nav-chevron,
    .appnice_navbar.is-open .navbar-name,
    .appnice_navbar.is-open .navbar-pin-btn,
    .appnice_navbar.is-open .nav-link {
        opacity: 1;
        pointer-events: auto;
        justify-content: flex-start;
        padding: 1rem 1.2rem;
    }

    /* Overlay visible cuando nav está abierto */
    .appnice_navbar.is-open~.nav-overlay,
    .appnice_navbar.is-pinned~.nav-overlay {
        display: block;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .appnice_main .widget__content i {
        display: none;
    }
}

/*APP LINKS*/
.n-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--n-border);
    border-radius: 8px;
    box-sizing: border-box;
}

/* --- Configuración del Perfil --- */
.profile-upload {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.logo-placeholder {
    width: 100px;
    height: 100px;
    background: #eee;
    border: 2px dashed #ccc;
    display: flex;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
}

.profile-fields {
    flex: 1;
}

/* --- Lista de Links Reordenables --- */
.n-link-item {
    display: grid;
    align-items: end;
    background: white;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--n-border);
    grid-template-columns: 3rem 1fr auto;
    grid-gap: 1rem;
}

.link-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.drag-handle {
    cursor: grab;
    margin-right: 15px;
    color: #999;
}

.link-info {
    flex: 1;
}

.link-info strong {
    display: block;
}

.link-info span {
    font-size: 13px;
    color: #777;
}

/* --- PREVISUALIZADOR MÓVIL --- */
.preview-panel {
    position: sticky;
    top: 40px;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
}

.mobile-mockup {
    width: 100%;
    height: auto;
    background: #000;
    border-radius: 40px;
    padding: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 8px solid #333;
    max-height: 85rem;
}

.mobile-screen {
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
    position: relative;
}

/* Estilos internos del preview */
.preview-listing-note {
    position: absolute;
    top: 0;
    padding: 1rem;
    margin-bottom: 3rem;
}

.preview-logo {
    width: fit-content;
    max-height: 10rem;
    margin: 0 auto 3rem;
    max-width: 17rem;
}

.preview-header {
    padding: 1rem 2.4rem;
    position: relative;
    margin-top: 3rem;
}

.preview-title {
    font-size: 18px;
    margin: 0;
}

.preview-desc {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.preview-socials a i {
    font-size: 1.6rem;
}

.preview-links-list {
    width: 100%;
}

.preview-link-button {
    width: 100%;
    background: #f0f0f0;
    padding: 1.6rem 2.4rem;
    text-align: center;
    border-radius: 5rem;
    font-weight: 500;
    border: 1px solid #ddd;
    line-height: 1.2em;
    display: block;
}

.mobile-screen::-webkit-scrollbar {
    width: 4px;
}

.mobile-screen::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.link-image img {
    max-width: 20rem;
    width: 100%;
    height: auto;
    max-height: 20rem;
    border-radius: 1rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.link-info i {
    font-size: 2rem;
    line-height: 1em;
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .n-link-item {
        grid-template-columns: 1fr;
    }
}