/* ==========================================================
   SpaMaster 360 v23.0 — Design System
   Tipografía: General Sans + Manrope fallback stack
   ========================================================== */

:root{
    /* Typography */
    --sc-font-display:"General Sans","Satoshi","Outfit","Manrope","Inter","Segoe UI",system-ui,sans-serif;
    --sc-font-body:"Manrope","Nunito Sans","Inter","Segoe UI",system-ui,sans-serif;

    /* Type scale */
    --sc-text-2xs:11px;
    --sc-text-xs:12px;
    --sc-text-sm:13px;
    --sc-text-md:14px;
    --sc-text-lg:15px;
    --sc-text-xl:16px;
    --sc-text-2xl:18px;
    --sc-text-3xl:22px;
    --sc-text-4xl:30px;

    /* Weights */
    --sc-regular:400;
    --sc-medium:500;
    --sc-semibold:650;
    --sc-bold:760;
    --sc-black:860;

    /* Spaces */
    --sc-space-1:4px;
    --sc-space-2:8px;
    --sc-space-3:12px;
    --sc-space-4:16px;
    --sc-space-5:20px;
    --sc-space-6:24px;
    --sc-space-8:32px;
    --sc-space-10:40px;

    /* Radius */
    --sc-radius-input:12px;
    --sc-radius-btn:14px;
    --sc-radius-card:18px;
    --sc-radius-modal:22px;
    --sc-radius-pill:999px;

    /* Colors */
    --sc-primary:#6C4CF1;
    --sc-primary-2:#8B5CF6;
    --sc-primary-soft:rgba(108,76,241,.10);

    --sc-success:#16A34A;
    --sc-success-soft:rgba(22,163,74,.10);

    --sc-danger:#EF4444;
    --sc-danger-soft:rgba(239,68,68,.10);

    --sc-warning:#F59E0B;
    --sc-warning-soft:rgba(245,158,11,.13);

    --sc-info:#0EA5E9;
    --sc-info-soft:rgba(14,165,233,.10);

    --sc-bg:#F4F7FB;
    --sc-surface:#FFFFFF;
    --sc-surface-2:#F8FAFC;
    --sc-surface-hover:#F1F5F9;
    --sc-border:#DDE6F2;
    --sc-border-soft:rgba(148,163,184,.22);

    --sc-text:#0F172A;
    --sc-text-2:#334155;
    --sc-muted:#64748B;
    --sc-muted-2:#94A3B8;

    /* Shadows */
    --sc-shadow-xs:0 4px 12px rgba(15,23,42,.05);
    --sc-shadow-sm:0 8px 22px rgba(15,23,42,.07);
    --sc-shadow-md:0 16px 38px rgba(15,23,42,.10);
    --sc-shadow-xl:0 28px 70px rgba(15,23,42,.16);
}

/* Global typography */
html,
body{
    font-family:var(--sc-font-body)!important;
    font-size:var(--sc-text-md)!important;
    color:var(--sc-text)!important;
    background:var(--sc-bg)!important;
    -webkit-font-smoothing:antialiased!important;
    -moz-osx-font-smoothing:grayscale!important;
    text-rendering:geometricPrecision!important;
}

body,
input,
select,
textarea,
button,
table,
td,
th,
label,
p,
span{
    font-family:var(--sc-font-body)!important;
}

h1,h2,h3,h4,h5,h6,
.brand-text strong,
.app-logo,
.nav b,
.nav-link-direct b,
.btn,
button,
.kpi-card strong,
.report-metric strong,
.metric strong,
.card-title,
.panel-head h3,
.modal-title,
.sc-spa-card__name{
    font-family:var(--sc-font-display)!important;
    letter-spacing:-.018em!important;
}

h1{
    font-size:var(--sc-text-4xl)!important;
    font-weight:var(--sc-black)!important;
    line-height:1.05!important;
}

h2{
    font-size:var(--sc-text-3xl)!important;
    font-weight:var(--sc-bold)!important;
    line-height:1.12!important;
}

h3{
    font-size:var(--sc-text-2xl)!important;
    font-weight:var(--sc-bold)!important;
    line-height:1.16!important;
}

p,
.muted{
    font-size:var(--sc-text-md)!important;
    line-height:1.55!important;
    color:var(--sc-muted)!important;
}

/* Workspace */
.workspace{
    background:var(--sc-bg)!important;
}

/* Panels / cards */
.panel,
.card,
.stat-card,
.metric-card,
.report-metric,
.kpi-card,
.dashboard-card,
.pos-card,
.agenda-card,
.form-card{
    background:var(--sc-surface)!important;
    border:1px solid var(--sc-border-soft)!important;
    border-radius:var(--sc-radius-card)!important;
    box-shadow:var(--sc-shadow-sm)!important;
}

.panel-head{
    gap:var(--sc-space-4)!important;
}

.panel-head h3,
.panel h3{
    color:var(--sc-text)!important;
}

/* Buttons */
.btn,
button.btn,
button.primary,
.btn.primary,
.btn-primary,
.primary-btn{
    min-height:42px!important;
    border-radius:var(--sc-radius-btn)!important;
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-md)!important;
    font-weight:var(--sc-bold)!important;
    letter-spacing:-.01em!important;
    border:0!important;
    box-shadow:var(--sc-shadow-xs)!important;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease!important;
}

.btn:hover,
button.btn:hover{
    transform:translateY(-1px)!important;
    box-shadow:var(--sc-shadow-md)!important;
}

.btn.primary,
button.primary,
.primary-btn,
.btn-primary{
    background:linear-gradient(135deg,var(--sc-primary),var(--sc-primary-2))!important;
    color:#fff!important;
}

.btn.ghost,
.ghost-btn,
.btn.secondary{
    background:var(--sc-surface-2)!important;
    color:var(--sc-primary)!important;
    border:1px solid var(--sc-border-soft)!important;
}

.btn.danger,
.danger-btn,
.btn-danger{
    background:linear-gradient(135deg,#F87171,#DC2626)!important;
    color:#fff!important;
}

.btn.success,
.success-btn{
    background:linear-gradient(135deg,#22C55E,#16A34A)!important;
    color:#fff!important;
}

/* Inputs */
input,
select,
textarea,
.form-control{
    min-height:42px!important;
    border-radius:var(--sc-radius-input)!important;
    border:1px solid var(--sc-border)!important;
    background:#fff!important;
    color:var(--sc-text)!important;
    font-size:var(--sc-text-md)!important;
    font-weight:var(--sc-semibold)!important;
    outline:none!important;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease!important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus{
    border-color:var(--sc-primary)!important;
    box-shadow:0 0 0 4px var(--sc-primary-soft)!important;
}

textarea{
    line-height:1.45!important;
    padding-top:12px!important;
}

label,
.filter-block label,
.form-grid label{
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-2xs)!important;
    font-weight:var(--sc-black)!important;
    text-transform:uppercase!important;
    letter-spacing:.065em!important;
    color:var(--sc-muted)!important;
}

/* Tables */
table{
    font-family:var(--sc-font-body)!important;
    font-size:var(--sc-text-sm)!important;
    border-collapse:separate!important;
    border-spacing:0!important;
}

th{
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-xs)!important;
    font-weight:var(--sc-black)!important;
    color:var(--sc-muted)!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
    background:var(--sc-surface-2)!important;
}

td{
    font-size:var(--sc-text-sm)!important;
    color:var(--sc-text-2)!important;
    font-weight:var(--sc-medium)!important;
}

.table-wrap{
    border-radius:var(--sc-radius-card)!important;
    border:1px solid var(--sc-border-soft)!important;
    overflow:hidden!important;
    background:#fff!important;
}

/* Modals */
.modal,
.modal-content,
.sc-modal,
.agenda-modal,
.pos-modal{
    border-radius:var(--sc-radius-modal)!important;
    box-shadow:var(--sc-shadow-xl)!important;
    border:1px solid var(--sc-border-soft)!important;
}

.modal h2,
.modal h3,
.sc-modal h2,
.sc-modal h3{
    font-family:var(--sc-font-display)!important;
}

/* Badges */
.badge,
.status-badge,
.pill,
.tag{
    border-radius:var(--sc-radius-pill)!important;
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-xs)!important;
    font-weight:var(--sc-bold)!important;
}

/* Topbar */
.topbar{
    background:rgba(244,247,251,.78)!important;
    backdrop-filter:blur(16px)!important;
}

.breadcrumb{
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-xs)!important;
    font-weight:var(--sc-bold)!important;
    color:var(--sc-muted)!important;
}

/* Sidebar typography */
.side-nav,
#sideNav{
    font-family:var(--sc-font-display)!important;
}

.side-nav .nav,
#sideNav .nav,
.side-nav .nav-link-direct,
#sideNav .nav-link-direct{
    font-family:var(--sc-font-display)!important;
    font-weight:var(--sc-bold)!important;
}

.side-nav .nav-group p,
#sideNav .nav-group p{
    font-family:var(--sc-font-display)!important;
}

/* KPIs */
.report-metric span,
.kpi-card span,
.metric-card span{
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-xs)!important;
    font-weight:var(--sc-black)!important;
    color:var(--sc-muted)!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
}

.report-metric strong,
.kpi-card strong,
.metric-card strong{
    font-family:var(--sc-font-display)!important;
    font-size:var(--sc-text-3xl)!important;
    font-weight:var(--sc-black)!important;
    color:var(--sc-text)!important;
}

/* Agenda */
.agenda-pro-module-root,
.agenda-pro-module-root *{
    font-family:var(--sc-font-body)!important;
}

.agenda-pro-module-root h1,
.agenda-pro-module-root h2,
.agenda-pro-module-root h3,
.agenda-pro-module-root button,
.agenda-pro-module-root .sc-spa-card__name,
.agenda-pro-module-root .agenda-event-title{
    font-family:var(--sc-font-display)!important;
}

/* POS */
.pos-pro,
.pos-pro *,
#view-pos *{
    font-family:var(--sc-font-body)!important;
}

#view-pos h1,
#view-pos h2,
#view-pos h3,
#view-pos button,
#view-pos .btn,
#view-pos th,
#view-pos .report-metric strong{
    font-family:var(--sc-font-display)!important;
}

/* Payroll iframe inner page will also get this file if loaded independently? 
   The iframe keeps its own CSS, so we provide a compatible body class hook in nomina file separately if needed. */

/* Utility: consistent scrollbars */
*{
    scrollbar-width:thin;
    scrollbar-color:rgba(148,163,184,.45) transparent;
}

*::-webkit-scrollbar{
    width:8px;
    height:8px;
}

*::-webkit-scrollbar-track{
    background:transparent;
}

*::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.38);
    border-radius:999px;
}

*::-webkit-scrollbar-thumb:hover{
    background:rgba(108,76,241,.50);
}


/* ==========================================================
   SpaMaster 360 v23.0.1
   Caja POS estilo Agenda Master + tipografía forzada global
   ========================================================== */

/* Caja POS con el mismo lenguaje visual de Agenda Master, pero amarillo */
.side-nav .nav[data-view="pos"],
#sideNav .nav[data-view="pos"],
.side-nav .nav-pos-highlight,
#sideNav .nav-pos-highlight{
    background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 48%,#92400E 100%)!important;
    color:#111827!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:
        0 14px 30px rgba(245,158,11,.24),
        inset 0 1px 0 rgba(255,255,255,.22)!important;
    position:relative!important;
    overflow:hidden!important;
}

.side-nav .nav[data-view="pos"]::after,
#sideNav .nav[data-view="pos"]::after,
.side-nav .nav-pos-highlight::after,
#sideNav .nav-pos-highlight::after{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:999px 999px 0 0!important;
    background:linear-gradient(90deg,#FFF7AD,#F59E0B)!important;
    opacity:.95!important;
}

.side-nav .nav[data-view="pos"]:hover,
#sideNav .nav[data-view="pos"]:hover,
.side-nav .nav-pos-highlight:hover,
#sideNav .nav-pos-highlight:hover,
.side-nav .nav[data-view="pos"].active,
#sideNav .nav[data-view="pos"].active,
.side-nav .nav-pos-highlight.active,
#sideNav .nav-pos-highlight.active{
    transform:translateX(4px) translateY(-1px)!important;
    background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 48%,#B45309 100%)!important;
    color:#111827!important;
    border-color:rgba(251,191,36,.58)!important;
    box-shadow:
        0 18px 38px rgba(245,158,11,.32),
        0 0 0 3px rgba(245,158,11,.12),
        inset 0 1px 0 rgba(255,255,255,.24)!important;
}

.side-nav .nav[data-view="pos"] span,
#sideNav .nav[data-view="pos"] span,
.side-nav .nav-pos-highlight span,
#SideNav .nav-pos-highlight span{
    filter:drop-shadow(0 0 8px rgba(251,191,36,.55))!important;
}

/* Agenda y Caja usan exactamente el mismo comportamiento de hover */
.side-nav .nav[data-view="agenda"],
#sideNav .nav[data-view="agenda"],
.side-nav .nav[data-view="pos"],
#sideNav .nav[data-view="pos"]{
    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        border-color .16s ease!important;
}

/* Forzar Manrope / General Sans en absolutamente todo el sistema */
:root{
    --sc-font-display:"General Sans","Satoshi","Outfit","Manrope","Inter","Segoe UI",system-ui,sans-serif!important;
    --sc-font-body:"Manrope","Nunito Sans","Inter","Segoe UI",system-ui,sans-serif!important;
}

html,
body,
.app-shell,
.workspace,
main,
section,
article,
aside,
header,
footer,
div,
p,
span,
small,
strong,
b,
em,
label,
input,
select,
textarea,
button,
a,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
ul,
ol,
li,
form,
fieldset,
legend,
.panel,
.card,
.table-wrap,
.modal,
.modal *,
.pos-pro,
.pos-pro *,
#view-pos,
#view-pos *,
#view-report,
#view-report *,
#view-income,
#view-income *,
#view-transactions,
#view-transactions *,
#view-expense-analysis,
#view-expense-analysis *,
#view-cashflow,
#view-cashflow *,
#view-agenda,
#view-agenda *,
.agenda-pro-module-root,
.agenda-pro-module-root *,
#view-payroll-control,
#view-payroll-control *,
iframe,
.report-box,
.report-box *,
.report-metric,
.report-metric *,
.kpi-card,
.kpi-card *,
.metric-card,
.metric-card *,
.dashboard-grid,
.dashboard-grid *,
.pos-table,
.pos-table *,
.income-table,
.income-table *,
.expense-table,
.expense-table *,
.movements-table,
.movements-table *{
    font-family:var(--sc-font-body)!important;
}

/* Elementos que deben usar General Sans */
h1,h2,h3,h4,h5,h6,
.breadcrumb,
.brand-text,
.brand-text *,
.nav,
.nav *,
.nav-link-direct,
.nav-link-direct *,
.logout,
.logout *,
.btn,
button,
button *,
th,
.panel-head,
.panel-head *,
.card-title,
.metric-title,
.report-title,
.report-metric span,
.report-metric strong,
.kpi-card span,
.kpi-card strong,
.metric-card span,
.metric-card strong,
.status-badge,
.badge,
.pill,
.tag,
.sc-spa-card,
.sc-spa-card *,
.pos-header,
.pos-header *,
.agenda-toolbar,
.agenda-toolbar *,
.modal-title,
input[type="submit"],
input[type="button"]{
    font-family:var(--sc-font-display)!important;
}

/* Tablas y reportes: Manrope explícito */
table,
table *,
.table-wrap table,
.table-wrap td,
.table-wrap tbody,
#incomeTable,
#incomeTable *,
#expensesTable,
#expensesTable *,
#transactionsTable,
#transactionsTable *,
#reportExtraTable,
#reportExtraTable *,
#reportVendorTable,
#reportVendorTable *,
#posIncomeTable,
#posIncomeTable *,
#posExpensesTable,
#posExpensesTable *,
#posClosuresTable,
#posClosuresTable *{
    font-family:var(--sc-font-body)!important;
    letter-spacing:-.005em!important;
}

/* Encabezados de tabla mantienen General Sans */
table th,
.table-wrap th,
#incomeTable th,
#expensesTable th,
#transactionsTable th,
#reportExtraTable th,
#reportVendorTable th,
#posIncomeTable th,
#posExpensesTable th,
#posClosuresTable th{
    font-family:var(--sc-font-display)!important;
    font-weight:800!important;
}

/* Inputs, selects y formularios */
input,
select,
textarea,
option,
.form-grid *,
.filter-block *,
.form-control{
    font-family:var(--sc-font-body)!important;
}

/* Botones y navegación */
button,
.btn,
.nav,
.nav-link-direct,
.tabs button,
.tab,
.pill,
.badge{
    font-family:var(--sc-font-display)!important;
}

/* Evitar que algún estilo viejo imponga system-ui en reportes */
[class*="report"],
[class*="report"] *,
[class*="income"],
[class*="income"] *,
[class*="expense"],
[class*="expense"] *,
[class*="venta"],
[class*="venta"] *,
[class*="gasto"],
[class*="gasto"] *{
    font-family:var(--sc-font-body)!important;
}

[class*="report"] h1,
[class*="report"] h2,
[class*="report"] h3,
[class*="report"] button,
[class*="report"] th,
[class*="income"] h1,
[class*="income"] h2,
[class*="income"] h3,
[class*="income"] button,
[class*="income"] th,
[class*="expense"] h1,
[class*="expense"] h2,
[class*="expense"] h3,
[class*="expense"] button,
[class*="expense"] th{
    font-family:var(--sc-font-display)!important;
}


/* ==========================================================
   SpaMaster 360 v23.0.2
   Caja POS soft + tipografía limpia sin stack visible largo
   ========================================================== */

/* 
   Nota: se dejan solo 2 nombres principales.
   Si el navegador no tiene instaladas las fuentes, usará sans-serif.
   Para que en inspección aparezca realmente General Sans / Manrope,
   esas fuentes deben estar cargadas o instaladas.
*/
:root{
    --sc-font-display:"General Sans", sans-serif!important;
    --sc-font-body:"Manrope", sans-serif!important;
}

/* Texto general: Manrope */
html,
body,
.app-shell,
.workspace,
main,
section,
article,
aside,
header,
footer,
div,
p,
span,
small,
strong,
b,
em,
label,
input,
select,
textarea,
option,
a,
table,
thead,
tbody,
tfoot,
tr,
td,
ul,
ol,
li,
form,
fieldset,
legend,
.panel,
.card,
.table-wrap,
.modal,
.modal *,
.pos-pro,
.pos-pro *,
#view-pos,
#view-pos *,
#view-report,
#view-report *,
#view-income,
#view-income *,
#view-transactions,
#view-transactions *,
#view-expense-analysis,
#view-expense-analysis *,
#view-cashflow,
#view-cashflow *,
#view-agenda,
#view-agenda *,
.agenda-pro-module-root,
.agenda-pro-module-root *,
.report-box,
.report-box *,
.report-metric,
.report-metric *,
.kpi-card,
.kpi-card *,
.metric-card,
.metric-card *,
.dashboard-grid,
.dashboard-grid *,
[class*="report"],
[class*="report"] *,
[class*="income"],
[class*="income"] *,
[class*="expense"],
[class*="expense"] *,
[class*="venta"],
[class*="venta"] *,
[class*="gasto"],
[class*="gasto"] *{
    font-family:var(--sc-font-body)!important;
}

/* Elementos de display: General Sans */
h1,h2,h3,h4,h5,h6,
.breadcrumb,
.brand-text,
.brand-text *,
.nav,
.nav *,
.nav-link-direct,
.nav-link-direct *,
.logout,
.logout *,
button,
button *,
.btn,
.btn *,
th,
.panel-head,
.panel-head *,
.card-title,
.metric-title,
.report-title,
.report-metric span,
.report-metric strong,
.kpi-card span,
.kpi-card strong,
.metric-card span,
.metric-card strong,
.status-badge,
.badge,
.pill,
.tag,
.sc-spa-card,
.sc-spa-card *,
.modal-title,
.tabs button,
.tab,
input[type="submit"],
input[type="button"]{
    font-family:var(--sc-font-display)!important;
}

/* Tablas: cuerpo Manrope, encabezado General Sans */
table,
table *,
.table-wrap table,
.table-wrap td,
.table-wrap tbody,
#incomeTable,
#incomeTable *,
#expensesTable,
#expensesTable *,
#transactionsTable,
#transactionsTable *,
#reportExtraTable,
#reportExtraTable *,
#reportVendorTable,
#reportVendorTable *,
#posIncomeTable,
#posIncomeTable *,
#posExpensesTable,
#posExpensesTable *,
#posClosuresTable,
#posClosuresTable *{
    font-family:var(--sc-font-body)!important;
}

table th,
.table-wrap th,
#incomeTable th,
#expensesTable th,
#transactionsTable th,
#reportExtraTable th,
#reportVendorTable th,
#posIncomeTable th,
#posExpensesTable th,
#posClosuresTable th{
    font-family:var(--sc-font-display)!important;
}

/* Caja POS: mismo estilo de Agenda Master, pero más suave y menos cargado */
.side-nav .nav[data-view="pos"],
#sideNav .nav[data-view="pos"],
.side-nav .nav-pos-highlight,
#sideNav .nav-pos-highlight{
    background:
        linear-gradient(135deg, rgba(245,158,11,.24) 0%, rgba(251,191,36,.15) 52%, rgba(255,255,255,.05) 100%)!important;
    color:#FDE68A!important;
    border:1px solid rgba(251,191,36,.24)!important;
    box-shadow:
        0 12px 26px rgba(245,158,11,.10),
        inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Línea inferior amarilla, más elegante */
.side-nav .nav[data-view="pos"]::after,
#sideNav .nav[data-view="pos"]::after,
.side-nav .nav-pos-highlight::after,
#SideNav .nav-pos-highlight::after,
#sideNav .nav-pos-highlight::after{
    content:""!important;
    position:absolute!important;
    left:18px!important;
    right:18px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:999px 999px 0 0!important;
    background:linear-gradient(90deg, rgba(253,230,138,.96), rgba(245,158,11,.82))!important;
    opacity:.92!important;
}

/* Ícono/punto menos cargado */
.side-nav .nav[data-view="pos"] span,
#sideNav .nav[data-view="pos"] span,
.side-nav .nav-pos-highlight span,
#sideNav .nav-pos-highlight span{
    color:#FBBF24!important;
    filter:drop-shadow(0 0 6px rgba(251,191,36,.28))!important;
    opacity:.95!important;
}

/* Hover y activo: se ilumina sin verse metálico */
.side-nav .nav[data-view="pos"]:hover,
#sideNav .nav[data-view="pos"]:hover,
.side-nav .nav-pos-highlight:hover,
#sideNav .nav-pos-highlight:hover,
.side-nav .nav[data-view="pos"].active,
#sideNav .nav[data-view="pos"].active,
.side-nav .nav-pos-highlight.active,
#sideNav .nav-pos-highlight.active{
    transform:translateX(4px) translateY(-1px)!important;
    background:
        linear-gradient(135deg, rgba(245,158,11,.34) 0%, rgba(251,191,36,.22) 52%, rgba(255,255,255,.07) 100%)!important;
    color:#FFF7AD!important;
    border-color:rgba(251,191,36,.38)!important;
    box-shadow:
        0 18px 36px rgba(245,158,11,.18),
        0 0 0 3px rgba(245,158,11,.08),
        inset 0 1px 0 rgba(255,255,255,.12)!important;
}

/* Texto de Caja POS más limpio */
.side-nav .nav[data-view="pos"] b,
#sideNav .nav[data-view="pos"] b,
.side-nav .nav-pos-highlight b,
#sideNav .nav-pos-highlight b{
    color:inherit!important;
    font-weight:860!important;
}


/* ==========================================================
   SpaMaster 360 v23.1 — Enterprise Sidebar
   ========================================================== */
:root{
    --sc-sidebar-width:240px;
    --sc-sidebar-bg-1:#0C1324;
    --sc-sidebar-bg-2:#070D19;
    --sc-sidebar-border:rgba(148,163,184,.14);
    --sc-sidebar-text:#DDE7F7;
    --sc-sidebar-hover:rgba(255,255,255,.065);
    --sc-sidebar-hover-border:rgba(255,255,255,.10);
    --sc-sidebar-transition:160ms ease;
}

.sidebar,
.side-nav,
#sideNav,
aside.side-nav{
    width:var(--sc-sidebar-width)!important;
    min-width:var(--sc-sidebar-width)!important;
    max-width:var(--sc-sidebar-width)!important;
    background:
        radial-gradient(circle at 18% 0%, rgba(124,58,237,.13), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(14,165,233,.055), transparent 24%),
        linear-gradient(180deg,var(--sc-sidebar-bg-1) 0%,var(--sc-sidebar-bg-2) 58%,#050A14 100%)!important;
    border-right:1px solid var(--sc-sidebar-border)!important;
    box-shadow:12px 0 30px rgba(2,6,23,.20)!important;
    font-family:var(--sc-font-display)!important;
    padding:12px 10px 10px!important;
}

.app-shell,.app-layout,.main-layout{--sidebar-width:var(--sc-sidebar-width)!important;}

.side-nav .brand-block,#sideNav .brand-block,.sidebar .brand-block{
    padding:0 10px 12px!important;
    margin:0 0 8px!important;
    border-bottom:1px solid rgba(148,163,184,.105)!important;
    gap:10px!important;
}
.side-nav .brand-mark,#sideNav .brand-mark,.sidebar .brand-mark{
    width:38px!important;height:38px!important;min-width:38px!important;
    border-radius:12px!important;font-size:14px!important;font-weight:850!important;
    box-shadow:0 10px 22px rgba(124,58,237,.20)!important;
}
.side-nav .brand-text strong,#sideNav .brand-text strong,.sidebar .brand-text strong{
    font-size:14.5px!important;line-height:1.08!important;font-weight:760!important;
    letter-spacing:-.02em!important;color:#F8FAFC!important;
}
.side-nav .brand-text span,#sideNav .brand-text span,.sidebar .brand-text span{
    font-size:10.8px!important;line-height:1.1!important;color:#9AA8BE!important;
}

.side-nav .nav-group,#sideNav .nav-group,.sidebar .nav-group{margin:0 0 7px!important;padding:0!important;}
.side-nav .nav-group p,#sideNav .nav-group p,.sidebar .nav-group p{
    margin:12px 0 6px!important;padding:0 8px!important;
    font-size:9.8px!important;line-height:1!important;font-weight:760!important;
    letter-spacing:.14em!important;color:#8391AA!important;text-transform:uppercase!important;
}

.side-nav .nav,#sideNav .nav,.sidebar .nav,
.side-nav .nav-link-direct,#sideNav .nav-link-direct,.sidebar .nav-link-direct{
    width:100%!important;height:38px!important;min-height:38px!important;
    margin:2px 0!important;padding:0 12px!important;border-radius:12px!important;
    border:1px solid transparent!important;background:transparent!important;
    color:var(--sc-sidebar-text)!important;display:flex!important;align-items:center!important;
    gap:9px!important;font-family:var(--sc-font-display)!important;
    font-size:13.8px!important;line-height:1!important;font-weight:520!important;
    letter-spacing:-.008em!important;text-decoration:none!important;box-shadow:none!important;
    transition:transform var(--sc-sidebar-transition),background var(--sc-sidebar-transition),box-shadow var(--sc-sidebar-transition),border-color var(--sc-sidebar-transition),color var(--sc-sidebar-transition)!important;
}
.side-nav .nav span,#sideNav .nav span,.sidebar .nav span,
.side-nav .nav-link-direct span,#sideNav .nav-link-direct span,.sidebar .nav-link-direct span{
    width:18px!important;min-width:18px!important;height:18px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    font-size:13.2px!important;line-height:1!important;opacity:.92!important;filter:none!important;
}
.side-nav .nav b,#sideNav .nav b,.sidebar .nav b,
.side-nav .nav-link-direct b,#sideNav .nav-link-direct b,.sidebar .nav-link-direct b{
    font-weight:520!important;color:inherit!important;letter-spacing:-.008em!important;
}

.side-nav .nav[data-view="general"] b,#sideNav .nav[data-view="general"] b,
.side-nav .nav[data-view="agenda"] b,#sideNav .nav[data-view="agenda"] b,
.side-nav .nav[data-view="pos"] b,#sideNav .nav[data-view="pos"] b,
.side-nav .nav[data-view="report"] b,#sideNav .nav[data-view="report"] b,
.side-nav .nav[data-view="payroll-control"] b,#sideNav .nav[data-view="payroll-control"] b,
.side-nav .nav-nomina-integrated b,#sideNav .nav-nomina-integrated b{
    font-weight:660!important;
}

.side-nav .nav:not(.active):hover,#sideNav .nav:not(.active):hover,
.sidebar .nav:not(.active):hover,
.side-nav .nav-link-direct:not(.active):hover,#sideNav .nav-link-direct:not(.active):hover{
    transform:translateX(3px)!important;background:var(--sc-sidebar-hover)!important;
    border-color:var(--sc-sidebar-hover-border)!important;
    box-shadow:0 10px 22px rgba(0,0,0,.14)!important;color:#F8FAFC!important;
}

.side-nav .nav[data-view="general"].active,#sideNav .nav[data-view="general"].active{
    background:rgba(255,255,255,.085)!important;border-color:rgba(255,255,255,.12)!important;
    color:#fff!important;box-shadow:0 12px 26px rgba(0,0,0,.15)!important;
}

/* Agenda Master */
.side-nav .nav[data-view="agenda"],#sideNav .nav[data-view="agenda"],.side-nav .nav-agenda-pro,#sideNav .nav-agenda-pro{
    height:40px!important;min-height:40px!important;margin:3px 0!important;border-radius:13px!important;
    background:linear-gradient(135deg, rgba(124,58,237,.30) 0%, rgba(88,28,135,.20) 100%)!important;
    color:#F5F3FF!important;border:1px solid rgba(168,85,247,.26)!important;
    box-shadow:0 10px 24px rgba(124,58,237,.16), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.side-nav .nav[data-view="agenda"]::after,#sideNav .nav[data-view="agenda"]::after,.side-nav .nav-agenda-pro::after,#sideNav .nav-agenda-pro::after{
    content:""!important;position:absolute!important;left:16px!important;right:16px!important;bottom:0!important;
    height:3px!important;border-radius:999px 999px 0 0!important;background:linear-gradient(90deg,#8B5CF6,#C084FC)!important;opacity:.92!important;
}
.side-nav .nav[data-view="agenda"]:hover,#sideNav .nav[data-view="agenda"]:hover,
.side-nav .nav[data-view="agenda"].active,#sideNav .nav[data-view="agenda"].active{
    transform:translateX(3px) translateY(-1px)!important;
    background:linear-gradient(135deg, rgba(124,58,237,.38) 0%, rgba(168,85,247,.22) 100%)!important;
    border-color:rgba(192,132,252,.38)!important;
    box-shadow:0 14px 30px rgba(124,58,237,.22),0 0 0 3px rgba(168,85,247,.08),inset 0 1px 0 rgba(255,255,255,.11)!important;
}

/* Caja POS */
.side-nav .nav[data-view="pos"],#sideNav .nav[data-view="pos"],.side-nav .nav-pos-highlight,#sideNav .nav-pos-highlight{
    height:40px!important;min-height:40px!important;margin:3px 0!important;border-radius:13px!important;
    background:linear-gradient(135deg, rgba(245,158,11,.27) 0%, rgba(146,64,14,.17) 100%)!important;
    color:#FDE68A!important;border:1px solid rgba(251,191,36,.25)!important;
    box-shadow:0 10px 24px rgba(245,158,11,.12),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.side-nav .nav[data-view="pos"]::after,#sideNav .nav[data-view="pos"]::after,.side-nav .nav-pos-highlight::after,#sideNav .nav-pos-highlight::after{
    content:""!important;position:absolute!important;left:16px!important;right:16px!important;bottom:0!important;
    height:3px!important;border-radius:999px 999px 0 0!important;background:linear-gradient(90deg,#FDE68A,#F59E0B)!important;opacity:.92!important;
}
.side-nav .nav[data-view="pos"]:hover,#sideNav .nav[data-view="pos"]:hover,
.side-nav .nav[data-view="pos"].active,#sideNav .nav[data-view="pos"].active,
.side-nav .nav-pos-highlight:hover,#sideNav .nav-pos-highlight:hover,.side-nav .nav-pos-highlight.active,#sideNav .nav-pos-highlight.active{
    transform:translateX(3px) translateY(-1px)!important;
    background:linear-gradient(135deg, rgba(245,158,11,.35) 0%, rgba(251,191,36,.20) 100%)!important;
    border-color:rgba(251,191,36,.38)!important;
    box-shadow:0 14px 30px rgba(245,158,11,.18),0 0 0 3px rgba(245,158,11,.075),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Important modules no false active */
.side-nav .nav[data-view="report"]:not(.active),#sideNav .nav[data-view="report"]:not(.active),
.side-nav .nav[data-view="payroll-control"]:not(.active),#sideNav .nav[data-view="payroll-control"]:not(.active),
.side-nav .nav-nomina-integrated:not(.active),#sideNav .nav-nomina-integrated:not(.active){
    background:transparent!important;border-color:transparent!important;box-shadow:none!important;
}

.side-nav .nav.active:not([data-view="agenda"]):not([data-view="pos"]):not([data-view="general"]),
#sideNav .nav.active:not([data-view="agenda"]):not([data-view="pos"]):not([data-view="general"]){
    background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.12)!important;
    color:#fff!important;box-shadow:0 10px 24px rgba(0,0,0,.14)!important;
}

.side-nav .logout,#sideNav .logout,.sc-logout-pro{
    height:40px!important;min-height:40px!important;margin:12px 4px 4px!important;padding:0 13px!important;
    border-radius:13px!important;font-size:13.8px!important;font-weight:620!important;gap:10px!important;
    background:linear-gradient(135deg, rgba(248,113,113,.62), rgba(153,27,27,.54))!important;
    border:1px solid rgba(252,165,165,.25)!important;box-shadow:0 10px 24px rgba(185,28,28,.16)!important;
}
.sc-logout-icon{width:17px!important;height:17px!important;}

.side-nav,#sideNav,.sidebar{scrollbar-width:thin!important;scrollbar-color:rgba(148,163,184,.34) transparent!important;}
.side-nav::-webkit-scrollbar,#sideNav::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:6px!important;}
.side-nav::-webkit-scrollbar-track,#sideNav::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{background:transparent!important;}
.side-nav::-webkit-scrollbar-thumb,#sideNav::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.26)!important;border-radius:999px!important;border:1.5px solid var(--sc-sidebar-bg-2)!important;
}
.side-nav::-webkit-scrollbar-thumb:hover,#sideNav::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.50)!important;}


/* ==========================================================
   SpaMaster 360 v23.1.1 — Custom SVG icons for Spa Selector
   Icons uploaded by user:
   Todos -> diseno.svg
   Makai -> isla-con-palmeras.svg
   Sahara -> desierto.svg
   ========================================================== */

/* Mapear SVG personalizados */
.sc-spa-card--todos{
    --sc-spa-icon:url("../icons/spa-selector/all-spas-custom.svg")!important;
}

.sc-spa-card--makai{
    --sc-spa-icon:url("../icons/spa-selector/makai-custom.svg")!important;
}

.sc-spa-card--sahara{
    --sc-spa-icon:url("../icons/spa-selector/sahara-custom.svg")!important;
}

/* Forzar iconos blancos dentro del círculo usando máscara SVG */
.sc-spa-card__icon::before{
    width:34px!important;
    height:34px!important;
    background:#ffffff!important;
    color:#ffffff!important;
    mask:var(--sc-spa-icon) center / contain no-repeat!important;
    -webkit-mask:var(--sc-spa-icon) center / contain no-repeat!important;
}

/* Ajuste específico: si algún SVG tiene proporción ancha, mantenerlo centrado */
.sc-spa-card--makai .sc-spa-card__icon::before,
.sc-spa-card--sahara .sc-spa-card__icon::before,
.sc-spa-card--todos .sc-spa-card__icon::before{
    width:35px!important;
    height:35px!important;
}

/* Círculo del selector mantiene el color del spa para contraste */
.sc-spa-card__icon{
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.36), transparent 24%),
        linear-gradient(135deg, color-mix(in srgb, var(--sc-spa-color) 95%, #fff), color-mix(in srgb, var(--sc-spa-color) 76%, #000))!important;
}


/* ==========================================================
   SpaMaster 360 v23.2 — Lucide Icons
   Reemplaza emojis por iconos SVG profesionales.
   ========================================================== */

.sc-lucide-icon{
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:currentColor!important;
    opacity:.92!important;
    line-height:1!important;
}

.sc-lucide-icon svg{
    width:17px!important;
    height:17px!important;
    stroke:currentColor!important;
    color:currentColor!important;
    display:block!important;
}

.side-nav .nav span.sc-lucide-icon,
#sideNav .nav span.sc-lucide-icon,
.sidebar .nav span.sc-lucide-icon,
.side-nav .nav-link-direct span.sc-lucide-icon,
#sideNav .nav-link-direct span.sc-lucide-icon,
.sidebar .nav-link-direct span.sc-lucide-icon{
    width:18px!important;
    min-width:18px!important;
    height:18px!important;
    font-size:0!important;
    filter:none!important;
}

/* Colores sutiles por módulo principal */
.side-nav .nav[data-view="agenda"] .sc-lucide-icon,
#sideNav .nav[data-view="agenda"] .sc-lucide-icon{
    color:#EDE9FE!important;
}

.side-nav .nav[data-view="pos"] .sc-lucide-icon,
#sideNav .nav[data-view="pos"] .sc-lucide-icon{
    color:#FDE68A!important;
}

.side-nav .nav[data-view="report"] .sc-lucide-icon,
#sideNav .nav[data-view="report"] .sc-lucide-icon{
    color:#BFDBFE!important;
}

.side-nav .nav[data-view="payroll-control"] .sc-lucide-icon,
#sideNav .nav[data-view="payroll-control"] .sc-lucide-icon,
.side-nav .nav-nomina-integrated .sc-lucide-icon,
#sideNav .nav-nomina-integrated .sc-lucide-icon{
    color:#DDD6FE!important;
}

/* Hover: microanimación de icono */
.side-nav .nav:hover .sc-lucide-icon,
#sideNav .nav:hover .sc-lucide-icon,
.sidebar .nav:hover .sc-lucide-icon,
.side-nav .nav-link-direct:hover .sc-lucide-icon,
#sideNav .nav-link-direct:hover .sc-lucide-icon,
.sidebar .nav-link-direct:hover .sc-lucide-icon{
    transform:scale(1.06)!important;
    opacity:1!important;
}

.side-nav .nav .sc-lucide-icon,
#sideNav .nav .sc-lucide-icon,
.sidebar .nav .sc-lucide-icon,
.side-nav .nav-link-direct .sc-lucide-icon,
#sideNav .nav-link-direct .sc-lucide-icon,
.sidebar .nav-link-direct .sc-lucide-icon{
    transition:transform 160ms ease, opacity 160ms ease, color 160ms ease!important;
}

/* Logout con Lucide */
.sc-logout-pro .sc-lucide-icon,
.logout .sc-lucide-icon{
    color:#fff!important;
}

.sc-logout-pro .sc-lucide-icon svg,
.logout .sc-lucide-icon svg{
    width:18px!important;
    height:18px!important;
}

/* Ocultar cualquier emoji residual que quede en un span anterior vacío */
.side-nav .nav > span:not(.sc-lucide-icon):first-child,
#sideNav .nav > span:not(.sc-lucide-icon):first-child,
.sidebar .nav > span:not(.sc-lucide-icon):first-child{
    font-size:0!important;
}


/* ==========================================================
   SpaMaster 360 v23.2.3 — POS Recovery Safe
   Recupera Caja POS y evita que los KPI se rompan por JS.
   Solo ajustes visuales seguros, sin reestructurar DOM.
   ========================================================== */

/* Reset de daños de KPI previos si el navegador tenía cache */
#view-pos .sc-pos-kpi-card-force,
.pos-pro .sc-pos-kpi-card-force,
.sc-pos-kpi-card-force,
#view-pos .sc-pos-kpi-card,
.pos-pro .sc-pos-kpi-card,
.sc-pos-kpi-card{
    all:revert!important;
}

/* Ocultar cualquier icono inyectado por versiones 23.2.1 / 23.2.2 */
#view-pos .sc-pos-kpi-icon-force,
.pos-pro .sc-pos-kpi-icon-force,
.sc-pos-kpi-icon-force,
#view-pos .sc-pos-kpi-icon,
.pos-pro .sc-pos-kpi-icon,
.sc-pos-kpi-icon{
    display:none!important;
}

/* Quitar clases visuales dañinas si quedaron aplicadas */
#view-pos [class*="sc-pos-kpi-card"],
.pos-pro [class*="sc-pos-kpi-card"]{
    transform:none!important;
}

/* Ajuste visual seguro de las tarjetas/resúmenes POS sin alterar layout */
#view-pos .report-metric,
#view-pos .metric-card,
#view-pos .kpi-card,
#view-pos .stat-card,
.pos-pro .report-metric,
.pos-pro .metric-card,
.pos-pro .kpi-card,
.pos-pro .stat-card{
    border-radius:20px!important;
    border:1px solid rgba(148,163,184,.20)!important;
    background:#fff!important;
    box-shadow:0 12px 28px rgba(15,23,42,.065)!important;
}

/* Labels y valores más limpios */
#view-pos .report-metric span,
#view-pos .metric-card span,
#view-pos .kpi-card span,
#view-pos .stat-card span,
.pos-pro .report-metric span,
.pos-pro .metric-card span,
.pos-pro .kpi-card span,
.pos-pro .stat-card span{
    font-family:var(--sc-font-display)!important;
    font-size:12px!important;
    font-weight:800!important;
    color:#64748B!important;
    text-transform:uppercase!important;
    letter-spacing:.055em!important;
}

#view-pos .report-metric strong,
#view-pos .metric-card strong,
#view-pos .kpi-card strong,
#view-pos .stat-card strong,
.pos-pro .report-metric strong,
.pos-pro .metric-card strong,
.pos-pro .kpi-card strong,
.pos-pro .stat-card strong{
    font-family:var(--sc-font-display)!important;
    font-size:24px!important;
    font-weight:820!important;
    color:#0F172A!important;
    letter-spacing:-.025em!important;
}