/* NightPOS V10.13.24 — Modo Claro / Oscuro Global
   Capa global por variables. No modifica lógica operativa. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg:        #f4f6fb;
  --bg2:       #ffffff;
  --surface:   #ffffff;
  --surface2:  #f7f8fc;
  --surface3:  #eef1f8;
  --border:    #d7ddea;
  --border2:   #e4e8f2;

  --text:      #141827;
  --text2:     #334155;
  --muted:     #64748b;
  --muted2:    #475569;

  --shadow:    0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 18px 48px rgba(15,23,42,.14);
  --glow:      0 0 0 rgba(0,0,0,0);
}

html[data-theme="light"] body {
  background: linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
  color: var(--text);
}

/* Superficies globales */
html[data-theme="light"] .np-sidebar,
html[data-theme="light"] .np-topbar,
html[data-theme="light"] .card,
html[data-theme="light"] .np-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .checkout-card,
html[data-theme="light"] .cashbox-card,
html[data-theme="light"] .table-card,
html[data-theme="light"] .pos-card,
html[data-theme="light"] .receipt-wrap .screen-helper,
html[data-theme="light"] .screen-helper {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .np-main {
  background: transparent;
}

html[data-theme="light"] .np-nav-item,
html[data-theme="light"] .np-sidebar__user,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .kot-card,
html[data-theme="light"] .kanban-card,
html[data-theme="light"] .payment-method,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .action-secondary,
html[data-theme="light"] .input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #94a3b8; }

html[data-theme="light"] .np-nav-item:hover,
html[data-theme="light"] .np-nav-item.active {
  background: linear-gradient(135deg, rgba(232,53,109,.12), rgba(139,92,246,.10));
  color: var(--accent);
  border-color: rgba(232,53,109,.28);
}

html[data-theme="light"] .np-sidebar__logo-text,
html[data-theme="light"] .np-topbar__title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .title,
html[data-theme="light"] .section-title { color: var(--text); }

html[data-theme="light"] .muted,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .np-sidebar__user-role,
html[data-theme="light"] .small,
html[data-theme="light"] .label { color: var(--muted); }

/* Tablas y listados */
html[data-theme="light"] table,
html[data-theme="light"] .table,
html[data-theme="light"] .list-row,
html[data-theme="light"] .order-row {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="light"] th { color: var(--muted); background: #eef2f7; }
html[data-theme="light"] td { border-color: var(--border2); }

/* Mantener colores semánticos de estados */
html[data-theme="light"] .text-success,
html[data-theme="light"] .green,
html[data-theme="light"] .success { color: var(--green) !important; }
html[data-theme="light"] .text-danger,
html[data-theme="light"] .red,
html[data-theme="light"] .danger { color: var(--red) !important; }
html[data-theme="light"] .text-warning,
html[data-theme="light"] .gold,
html[data-theme="light"] .warning { color: var(--gold) !important; }

/* Botón global de tema */
.np-theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface2);
  color:var(--text2);
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.np-theme-toggle:active{transform:scale(.96)}
.np-theme-toggle:hover{border-color:var(--accent);color:var(--text)}
.np-theme-toggle .np-theme-label{font-size:12px;line-height:1;font-weight:900}
@media(max-width:560px){.np-theme-toggle{width:38px;height:38px;padding:0}.np-theme-toggle .np-theme-label{display:none}}

/* Login y pantallas externas */
html[data-theme="light"] .login-page { background: linear-gradient(180deg,#f8fafc,#eef2f7); }
html[data-theme="light"] .login-logo { box-shadow: 0 10px 30px rgba(232,53,109,.18); }

/* Cliente QR: variables propias */
html[data-theme="light"] .cl-hdr,
html[data-theme="light"] .name-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .cart-panel,
html[data-theme="light"] .order-card {
  background:#ffffff !important;
  color:#141827 !important;
  border-color:#d7ddea !important;
}
html[data-theme="light"] .cl-cbtn.sec,
html[data-theme="light"] .cl-search-inp,
html[data-theme="light"] .name-inp {
  background:#f7f8fc !important;
  color:#141827 !important;
  border-color:#d7ddea !important;
}

/* Recibo: conservar papel blanco premium; solo fondo exterior */
html[data-theme="light"] .receipt-wrap { color: var(--text); }
html[data-theme="light"] .ticket-card { box-shadow: 0 18px 45px rgba(15,23,42,.14); }

/* Compatibilidad con componentes con fondos hardcodeados comunes */
html[data-theme="light"] [style*="background:#15182a"],
html[data-theme="light"] [style*="background: #15182a"],
html[data-theme="light"] [style*="background:#161929"],
html[data-theme="light"] [style*="background: #161929"],
html[data-theme="light"] [style*="background:#1e2035"],
html[data-theme="light"] [style*="background: #1e2035"] {
  background: #ffffff !important;
  color: #141827 !important;
}

/* V10.13.25 theme hotfix */
.np-theme-toggle{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
html[data-theme='light'],html[data-theme='dark']{transition:background-color .18s ease,color .18s ease}

/* NightPOS V10.14.0 — Pulido SaaS profesional global
   Capa visual no invasiva: tema 100%, animaciones premium, modo tablet y consistencia UI. */
:root{
  --np-radius-sm: 12px;
  --np-radius: 18px;
  --np-radius-lg: 26px;
  --np-motion-fast: 140ms;
  --np-motion: 220ms;
  --np-motion-slow: 360ms;
  --np-focus: 0 0 0 3px rgba(232,53,109,.24);
}

html[data-theme="dark"]{
  --np-app-bg: radial-gradient(circle at top left, rgba(232,53,109,.12), transparent 34%), linear-gradient(180deg,#0f1020 0%,#111427 100%);
  --np-soft-card: rgba(255,255,255,.045);
  --np-soft-card-2: rgba(255,255,255,.07);
  --np-soft-border: rgba(255,255,255,.12);
}
html[data-theme="light"]{
  --np-app-bg: radial-gradient(circle at top left, rgba(232,53,109,.10), transparent 32%), linear-gradient(180deg,#f8fafc 0%,#edf2f7 100%);
  --np-soft-card: rgba(255,255,255,.82);
  --np-soft-card-2: #ffffff;
  --np-soft-border: rgba(15,23,42,.12);
}
body{background:var(--np-app-bg);}

/* Consistencia global de tarjetas y modales */
.card,.np-card,.panel,.modal-content,.modal-card,.checkout-card,.cashbox-card,.table-card,.pos-card,.kot-card,.kanban-card,.order-card,.stat-card,.metric-card,.summary-card{
  border-radius:var(--np-radius);
  transition:background var(--np-motion), border-color var(--np-motion), box-shadow var(--np-motion), transform var(--np-motion-fast), color var(--np-motion);
}
.card:hover,.np-card:hover,.table-card:hover,.metric-card:hover,.summary-card:hover{
  transform:translateY(-1px);
}

/* Botones premium consistentes */
button,.btn,.np-btn,.action-btn,.payment-method,.method-card,.quick-btn,.chip,.pill{
  transition:transform var(--np-motion-fast), filter var(--np-motion-fast), background var(--np-motion), border-color var(--np-motion), color var(--np-motion), box-shadow var(--np-motion);
  -webkit-tap-highlight-color:transparent;
}
button:active,.btn:active,.np-btn:active,.action-btn:active,.payment-method:active,.method-card:active,.quick-btn:active{transform:scale(.985)}
button:focus-visible,.btn:focus-visible,.np-btn:focus-visible,.action-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--np-focus)}

/* Animaciones premium reutilizables */
@keyframes npFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes npScaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes npSuccessPop{0%{transform:scale(.86);opacity:.2}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes npShimmer{0%{background-position:-220% 0}100%{background-position:220% 0}}
.np-animate-in,.modal-overlay.open .modal-card,.modal-overlay.open .modal-content{animation:npFadeUp var(--np-motion-slow) ease both}
.np-success-pop{animation:npSuccessPop 420ms cubic-bezier(.2,.9,.2,1) both}
.np-shimmer{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);background-size:220% 100%;animation:npShimmer 1.6s linear infinite}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* Barra superior y navegación más SaaS */
.np-topbar{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.np-sidebar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme="light"] .np-topbar,html[data-theme="light"] .np-sidebar{background:rgba(255,255,255,.86)!important}
html[data-theme="dark"] .np-topbar,html[data-theme="dark"] .np-sidebar{background:rgba(16,18,34,.86)!important}

/* Modal de cobro: resumen fijo profesional cuando exista */
.checkout-summary,.payment-summary,.np-checkout-summary,.payment-sticky-summary{
  position:sticky;top:0;z-index:5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] .checkout-summary,html[data-theme="light"] .payment-summary,html[data-theme="light"] .np-checkout-summary,html[data-theme="light"] .payment-sticky-summary{background:rgba(255,255,255,.92)!important}
html[data-theme="dark"] .checkout-summary,html[data-theme="dark"] .payment-summary,html[data-theme="dark"] .np-checkout-summary,html[data-theme="dark"] .payment-sticky-summary{background:rgba(27,30,50,.92)!important}

/* Modo tablet / iPad: botones más cómodos y menos fricción */
@media (min-width:760px) and (max-width:1180px){
  .np-main{padding:22px!important}
  .btn,.np-btn,.action-btn,.payment-method,.method-card{min-height:52px;font-size:16px}
  input,select,textarea{min-height:50px;font-size:16px}
  .table-card,.pos-card,.cashbox-card,.checkout-card{border-radius:24px}
  .modal-card,.modal-content{max-width:min(720px,92vw)}
  .grid,.cards-grid,.tables-grid{gap:18px!important}
}

/* Modo claro: cobertura extendida para módulos con clases variadas */
html[data-theme="light"] .box,
html[data-theme="light"] .module-card,
html[data-theme="light"] .setting-card,
html[data-theme="light"] .report-card,
html[data-theme="light"] .audit-card,
html[data-theme="light"] .drawer,
html[data-theme="light"] .bottom-sheet,
html[data-theme="light"] .sheet,
html[data-theme="light"] .tab-panel,
html[data-theme="light"] .form-card,
html[data-theme="light"] .receipt-actions,
html[data-theme="light"] .checkout-actions,
html[data-theme="light"] .cashbox-summary,
html[data-theme="light"] .cash-movement,
html[data-theme="light"] .history-item,
html[data-theme="light"] .payment-row,
html[data-theme="light"] .split-row{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:var(--shadow)
}
html[data-theme="light"] .subcard,
html[data-theme="light"] .inline-card,
html[data-theme="light"] .field-card,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .timeline-item,
html[data-theme="light"] .accordion,
html[data-theme="light"] .accordion-body,
html[data-theme="light"] .accordion-header{
  background:var(--surface2)!important;color:var(--text)!important;border-color:var(--border)!important
}
html[data-theme="light"] .badge:not(.success):not(.danger):not(.warning),
html[data-theme="light"] .pill:not(.success):not(.danger):not(.warning),
html[data-theme="light"] .chip:not(.success):not(.danger):not(.warning){background:#eef2f7;color:#334155;border-color:#d7ddea}

/* Dashboard en vivo: tarjetas listas para métricas operativas */
.np-live-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:14px 0 22px}
.np-live-card{padding:18px;border:1px solid var(--border);border-radius:var(--np-radius);background:var(--np-soft-card);box-shadow:var(--shadow)}
.np-live-card__label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:900}
.np-live-card__value{font-size:28px;font-weight:1000;color:var(--text);margin-top:6px}
.np-live-card__hint{font-size:12px;color:var(--muted);margin-top:4px}

/* Configuración visual: bloques de color y preview */
.np-brand-preview{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--np-radius);border:1px solid var(--border);background:var(--np-soft-card)}
.np-color-dot{width:34px;height:34px;border-radius:999px;border:2px solid rgba(255,255,255,.6);box-shadow:0 8px 24px rgba(0,0,0,.16)}

/* Toasts modernos */
.np-toast{border-radius:16px!important;box-shadow:0 18px 44px rgba(0,0,0,.22)!important;animation:npFadeUp 220ms ease both}
html[data-theme="light"] .np-toast{background:#ffffff!important;color:#141827!important;border:1px solid #d7ddea!important}

/* Estados se mantienen intactos pero mejoran legibilidad */
.success,.text-success,.green{font-weight:800}
.danger,.text-danger,.red{font-weight:800}
.warning,.text-warning,.gold{font-weight:800}

/* NightPOS V10.14.1 — Regla global de contraste en superficies oscuras */
html[data-theme="light"] .dark-card,
html[data-theme="light"] .black-card,
html[data-theme="light"] .bg-dark,
html[data-theme="light"] .is-dark,
html[data-theme="light"] [data-contrast="dark"],
html[data-theme="dark"] .dark-card,
html[data-theme="dark"] .black-card,
html[data-theme="dark"] .bg-dark,
html[data-theme="dark"] .is-dark,
html[data-theme="dark"] [data-contrast="dark"]{
  color:#f8fafc !important;
}
html[data-theme="light"] .dark-card *,
html[data-theme="light"] .black-card *,
html[data-theme="light"] .bg-dark *,
html[data-theme="light"] .is-dark *,
html[data-theme="light"] [data-contrast="dark"] *,
html[data-theme="dark"] .dark-card *,
html[data-theme="dark"] .black-card *,
html[data-theme="dark"] .bg-dark *,
html[data-theme="dark"] .is-dark *,
html[data-theme="dark"] [data-contrast="dark"] *{
  color:inherit;
}

/* No lavar tarjetas operativas que usan fondo oscuro intencional */
html[data-theme="light"] .npk-card,
html[data-theme="light"] .ticket-black,
html[data-theme="light"] .receipt-qr-box,
html[data-theme="light"] .receipt-dark-box{
  color:#f8fafc !important;
}