/* =========================================================
   NexusPrimePOS - estilos estilo CoreUI (sidebar oscuro,
   topbar, dashboard) construidos sobre Bootstrap 5.
   ========================================================= */

:root {
    --np-sidebar-width: 260px;
    --np-sidebar-bg: #1e2330;
    --np-sidebar-bg-active: #2a3148;
    --np-sidebar-color: #c2c7d0;
    --np-sidebar-color-active: #ffffff;
    --np-topbar-height: 56px;
    --np-accent: #321fdb;
}

html, body {
    height: 100%;
    background-color: #ebedef;
}

/* ---------- Layout shell ---------- */
.np-wrapper {
    display: flex;
    min-height: 100vh;
}

.np-sidebar {
    width: var(--np-sidebar-width);
    min-width: var(--np-sidebar-width);
    background-color: var(--np-sidebar-bg);
    color: var(--np-sidebar-color);
    transition: margin-left .25s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1030;
}

.np-sidebar.collapsed {
    margin-left: calc(var(--np-sidebar-width) * -1);
}

.np-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.np-sidebar-brand:hover {
    color: #fff;
}

.np-fecha-auditoria {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem 1rem .6rem;
    font-size: .75rem;
    color: var(--np-sidebar-color);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.np-fecha-auditoria .btn-link {
    color: var(--np-sidebar-color);
    line-height: 1;
}

.np-fecha-auditoria .btn-link:hover {
    color: #fff;
}

.np-nav {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
}

.np-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    color: var(--np-sidebar-color);
    text-decoration: none;
    border-radius: 4px;
    margin: 0 .5rem;
    transition: background-color .15s, color .15s;
    cursor: pointer;
}

.np-nav-link:hover,
.np-nav-link.active {
    background-color: var(--np-sidebar-bg-active);
    color: var(--np-sidebar-color-active);
}

.np-nav-link .icon {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.np-nav-group-toggle::after {
    content: "\f137";
    font-family: "CoreUI Icons Free", sans-serif;
    margin-left: auto;
    transition: transform .2s ease-in-out;
    font-size: .7rem;
}

.np-nav-group.open > .np-nav-link.np-nav-group-toggle::after {
    transform: rotate(90deg);
}

.np-nav-group-items {
    list-style: none;
    padding-left: 1.25rem;
    margin: 0;
    overflow: hidden;
}

.np-nav-group-items.collapse-hidden {
    display: none;
}

/* ---------- Topbar ---------- */
.np-topbar {
    height: var(--np-topbar-height);
    background-color: #fff;
    border-bottom: 1px solid #d8dbe0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.np-topbar .btn-toggle {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    color: #4f5d73;
}

.np-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------- Icon bar ---------- */
.np-icon-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    background-color: #f4f5f7;
    border-bottom: 1px solid #d8dbe0;
    padding: 1.25rem 1.5rem;
}

.np-icon-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-width: 130px;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background-color: #ffffff;
    border: 1px solid #e4e7eb;
    color: #4f5d73;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}

.np-icon-bar-item .icon {
    font-size: 2.75rem;
    line-height: 1;
}

.np-icon-bar-item:hover {
    color: #321fdb;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(50, 31, 219, .15);
    border-color: #c4c9f4;
}

.np-icon-bar-item.active {
    color: #321fdb;
    border-color: #321fdb;
    box-shadow: 0 6px 14px rgba(50, 31, 219, .18);
}

.np-icon-bar-item-primary .icon { color: #321fdb; }
.np-icon-bar-item-info .icon { color: #39a8d8; }
.np-icon-bar-item-warning .icon { color: #f9b115; }
.np-icon-bar-item-success .icon { color: #2eb85c; }
.np-icon-bar-item-danger .icon { color: #e55353; }

.np-main {
    padding: 1.25rem;
    flex: 1;
}

/* ---------- Mesas ---------- */
.np-mesa-leyenda {
    font-size: .9rem;
    font-weight: 600;
    color: #4f5d73;
    flex-wrap: wrap;
}

.np-mesa-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: middle;
}

.np-mesa-dot-libre { background-color: #2eb85c; }
.np-mesa-dot-ocupada { background-color: #e55353; }
.np-mesa-dot-reservada { background-color: #f9b115; }
.np-mesa-dot-mantenimiento { background-color: #8a93a2; }

.np-mesa-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.np-mesa-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 160px;
    padding: 1.25rem 1rem;
    border-radius: 16px;
    border: 2px solid #e4e7eb;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.np-mesa-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

.np-mesa-svg {
    width: 80px;
    height: 80px;
}

.np-mesa-top {
    stroke-width: 3;
}

.np-mesa-chair {
    stroke-width: 2;
}

.np-mesa-numero {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3038;
    margin-top: .25rem;
}

.np-mesa-estado {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.np-mesa-consumo {
    font-size: 1.05rem;
    font-weight: 700;
    padding: .15rem .6rem;
    border-radius: 6px;
    margin-top: .15rem;
}

/* ---------- Mesas en la app del mesero: tarjetas al 50% ---------- */
.np-mesero-mesas {
    gap: .6rem;
}
.np-mesero-mesas .np-mesa-card {
    width: 80px;
    padding: .6rem .5rem;
    border-radius: 8px;
    border-width: 1px;
    gap: .15rem;
}
.np-mesero-mesas .np-mesa-svg {
    width: 40px;
    height: 40px;
}
.np-mesero-mesas .np-mesa-numero {
    font-size: .55rem;
    margin-top: .1rem;
}
.np-mesero-mesas .np-mesa-estado {
    font-size: .4rem;
}
.np-mesero-mesas .np-mesa-consumo {
    font-size: .55rem;
    padding: .05rem .3rem;
    border-radius: 4px;
    margin-top: .05rem;
}

.np-mesa-card-libre {
    border-color: #c9ecd6;
    background-color: #f3fcf6;
}
.np-mesa-card-libre .np-mesa-top { fill: #d4f3e0; stroke: #2eb85c; }
.np-mesa-card-libre .np-mesa-chair { fill: #e8f8ee; stroke: #2eb85c; }
.np-mesa-card-libre .np-mesa-estado { color: #2eb85c; }

.np-mesa-card-ocupada {
    border-color: #f8d4d4;
    background-color: #fdf4f4;
}
.np-mesa-card-ocupada .np-mesa-top { fill: #fbdada; stroke: #e55353; }
.np-mesa-card-ocupada .np-mesa-chair { fill: #fdecec; stroke: #e55353; }
.np-mesa-card-ocupada .np-mesa-estado { color: #e55353; }
.np-mesa-card-ocupada .np-mesa-consumo {
    color: #fff;
    background-color: #e55353;
}

.np-mesa-card-atendida {
    border-color: #ffc98a;
    background-color: #fff4e5;
}
.np-mesa-card-atendida .np-mesa-top { fill: #ffe4bd; stroke: #f9820a; }
.np-mesa-card-atendida .np-mesa-chair { fill: #fff1de; stroke: #f9820a; }
.np-mesa-card-atendida .np-mesa-estado { color: #d9670a; font-weight: 700; }
.np-mesa-card-atendida .np-mesa-consumo {
    color: #fff;
    background-color: #f9820a;
}

.np-mesa-card-reservada {
    border-color: #fbe8c2;
    background-color: #fdf9ef;
}
.np-mesa-card-reservada .np-mesa-top { fill: #fcefd2; stroke: #f9b115; }
.np-mesa-card-reservada .np-mesa-chair { fill: #fdf6e6; stroke: #f9b115; }
.np-mesa-card-reservada .np-mesa-estado { color: #cc8a05; }

.np-mesa-card-mantenimiento {
    border-color: #d8dde3;
    background-color: #f4f5f7;
    opacity: .65;
    cursor: not-allowed;
}
.np-mesa-card-mantenimiento .np-mesa-top { fill: #e9ebee; stroke: #8a93a2; }
.np-mesa-card-mantenimiento .np-mesa-chair { fill: #eef0f3; stroke: #8a93a2; }
.np-mesa-card-mantenimiento .np-mesa-estado { color: #8a93a2; }

/* ---------- Cards / Dashboard ---------- */
.np-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.06);
    border: none;
}

.np-card-header {
    border-bottom: 1px solid #ebedef;
    font-weight: 600;
    padding: .75rem 1.25rem;
}

/* ---------- Login / Register ---------- */
.np-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #321fdb 0%, #1e2330 100%);
}

.np-auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.2);
}

/* ---------- Touch friendly ---------- */
.btn, .form-control, .form-select {
    min-height: 2.6rem;
}

@media (max-width: 768px) {
    .np-sidebar {
        position: fixed;
        left: 0;
        height: 100vh;
    }

    .np-sidebar.collapsed {
        margin-left: calc(var(--np-sidebar-width) * -1);
    }

    .np-sidebar:not(.collapsed) {
        margin-left: 0;
    }
}

.np-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1025;
}

/* ---------- Ítem enviado a cocina ---------- */
.np-item-enviado {
    background-color: #eafbf1;
    border-left: 3px solid #2eb85c;
    transition: background-color .2s ease;
}

.np-item-enviado:hover {
    background-color: #ddf7e8;
}

.np-item-listo {
    background-color: #c8f3d9;
    border-left: 3px solid #1b9e4b;
    transition: background-color .2s ease;
}

.np-item-listo:hover {
    background-color: #b6eecb;
}

/* ---------- Aviso "listo para recoger" en Mesas ---------- */
.np-listo-recoger-badge {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    z-index: 15;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2eb85c, #1b9e4b);
    box-shadow: 0 2px 8px rgba(27, 158, 75, .5);
    white-space: nowrap;
    animation: np-pulse-recoger 1.4s ease-in-out infinite;
}

.np-listo-recoger-badge:hover {
    filter: brightness(1.08);
}

.np-listo-recoger-badge-mini {
    bottom: -8px;
    padding: 2px 6px;
    font-size: .6rem;
}

@keyframes np-pulse-recoger {
    0%, 100% { box-shadow: 0 2px 8px rgba(27, 158, 75, .5); transform: translateX(-50%) scale(1); }
    50%      { box-shadow: 0 2px 14px rgba(27, 158, 75, .85); transform: translateX(-50%) scale(1.05); }
}