/*
 * Nexo POS Admin — capa de tema (sistema de diseño "call-design-system", variante Tabler).
 * Se carga ULTIMA, despues de tabler.min.css y Font Awesome: aca vive todo el diseño.
 *
 * Foto del login: Pexels, Kampus Production, "Paying in a Counter Using a Bank Card"
 * https://www.pexels.com/photo/paying-in-a-counter-using-a-bank-card-8475161/
 * (licencia de Pexels: uso comercial sin atribucion obligatoria).
 */

/* ---------- Tokens ---------- */
:root {
  --nx-navy: #0a2a6b;
  --nx-navy-2: #123a8c;
  --nx-navy-3: #081f52;
  --nx-primary: #1e6bff;
  --nx-primary-dark: #1555d4;
  --nx-primary-subtle: #eaf1ff;
  --nx-accent: #2fd0f5;
  --nx-canvas: #f4f6fb;
  --nx-border: #e3e8f2;
  --nx-border-strong: #d7e2ee;
  --nx-text: #14213d;
  --nx-muted: #6b7690;
  --nx-success: #16a34a;
  --nx-warning: #f59e0b;
  --nx-danger: #dc2626;
  --nx-radius: 10px;
  --nx-fs: 13px;
  --nx-control-h: 36px;
  --nx-sidebar-w: 248px;
  --nx-sidebar-min: 76px;
  --nx-header-h: 56px;

  --tblr-primary: #1e6bff;
  --tblr-primary-rgb: 30, 107, 255;
  --tblr-body-bg: #f4f6fb;
  --tblr-body-color: #14213d;
  --tblr-border-color: #e3e8f2;
  --tblr-border-radius: 6px;
  --tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-font-size: 13px;
}

/* ---------- Base ---------- */
html { font-size: 13px; }
body.nx-app {
  min-height: 100vh;
  background: var(--nx-canvas);
  color: var(--nx-text);
  font-family: var(--tblr-font-sans-serif);
  font-size: var(--nx-fs);
}
a { color: var(--nx-primary); }
a:hover { color: var(--nx-primary-dark); }
.text-muted, .text-secondary { color: var(--nx-muted) !important; }

/* Alto unico de controles: 36 px. */
.nx-app .btn:not(.btn-icon-sm):not(.btn-link),
.nx-app .form-control:not(textarea),
.nx-app .form-select {
  min-height: var(--nx-control-h);
  height: var(--nx-control-h);
  font-size: var(--nx-fs);
}
.nx-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 600; border-radius: 6px; padding-top: 0; padding-bottom: 0; }
.nx-app .btn-primary { background: var(--nx-primary); border-color: var(--nx-primary); }
.nx-app .btn-primary:hover { background: var(--nx-primary-dark); border-color: var(--nx-primary-dark); }
.nx-app .btn-icon { width: var(--nx-control-h); padding: 0; }
.nx-app .form-label { font-weight: 600; font-size: 12.5px; margin-bottom: .3rem; color: var(--nx-text); }
.nx-app .form-control, .nx-app .form-select { border-color: var(--nx-border-strong); border-radius: 6px; }
.nx-app .form-control:focus, .nx-app .form-select:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 .2rem rgba(30, 107, 255, .15); }
.nx-required::after { content: " *"; color: var(--nx-danger); }

/* ---------- Layout ---------- */
.nx-layout { display: flex; min-height: 100vh; }
.nx-main { flex: 1; min-width: 0; margin-left: var(--nx-sidebar-w); transition: margin-left .2s ease; }
.nx-content { padding: 20px 30px 30px; }
.nx-content > * + * { margin-top: 1rem; }

/* ---------- Barra lateral ---------- */
.nx-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1030;
  width: var(--nx-sidebar-w);
  display: flex; flex-direction: column;
  background: var(--nx-navy); color: #fff;
  transition: width .2s ease, transform .2s ease;
}
.nx-sidebar__brand { height: var(--nx-header-h); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
.nx-sidebar__brand img { height: 32px; }
.nx-sidebar__brand .nx-brand-icon { display: none; height: 34px; }
.nx-sidebar__profile { margin: 14px 12px 4px; padding: 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--nx-radius); background: rgba(255, 255, 255, .06); display: flex; align-items: center; gap: .7rem; }
.nx-sidebar__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--nx-primary); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.nx-sidebar__profile div strong { display: block; font-size: 13px; }
.nx-sidebar__profile div span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .65); }
.nx-sidebar__nav { flex: 1; overflow-y: auto; padding: 8px 0 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.nx-sidebar__section { padding: 16px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.nx-sidebar__link { display: flex; align-items: center; gap: .75rem; padding: 8px 20px; color: rgba(255, 255, 255, .88); font-size: .95rem; text-decoration: none; white-space: nowrap; }
.nx-sidebar__link i { width: 18px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); }
.nx-sidebar__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nx-sidebar__link.is-active { background: var(--nx-primary); color: #fff; }
/* Tabler subraya todo <a> en :hover; los enlaces que funcionan como items o botones no lo llevan. */
.nx-sidebar a, .nx-sidebar a:hover, .nx-sidebar a:focus,
.nx-header__user, .nx-header__user:hover,
.nx-notification-item, .nx-notification-item:hover,
.nx-app .dropdown-item:hover, .nx-app a.btn:hover { text-decoration: none; }
.nx-sidebar__link.is-active i { color: #fff; }

/* Colapsada (solo iconos). */
body.nx-sidebar-collapsed .nx-sidebar { width: var(--nx-sidebar-min); }
body.nx-sidebar-collapsed .nx-main { margin-left: var(--nx-sidebar-min); }
body.nx-sidebar-collapsed .nx-sidebar__brand .nx-brand-logo,
body.nx-sidebar-collapsed .nx-sidebar__profile div,
body.nx-sidebar-collapsed .nx-sidebar__section,
body.nx-sidebar-collapsed .nx-sidebar__link span { display: none; }
body.nx-sidebar-collapsed .nx-sidebar__brand .nx-brand-icon { display: block; }
body.nx-sidebar-collapsed .nx-sidebar__profile { justify-content: center; padding: 8px; }
body.nx-sidebar-collapsed .nx-sidebar__link { justify-content: center; padding: 11px 0; }

/* ---------- Cabecera ---------- */
.nx-header {
  position: sticky; top: 0; z-index: 1020;
  height: var(--nx-header-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 30px;
  background: #fff; border-bottom: 1px solid var(--nx-border);
}
.nx-header__search { position: relative; width: min(420px, 100%); }
.nx-header__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--nx-muted); }
.nx-header__search .form-control { padding-left: 34px; border-radius: 8px; }
.nx-header__end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
/* Campana: solo icono, sin aspecto de boton (ni borde ni fondo en hover/foco). */
.nx-header__bell { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: #4a5672; cursor: pointer; }
.nx-header__bell i { font-size: 21px; }
.nx-header__bell:hover, .nx-header__bell[aria-expanded="true"] { color: var(--nx-primary); }
.nx-header__bell:focus { outline: none; }
.nx-header__bell:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; border-radius: 8px; }
.nx-header__badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--nx-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.nx-header__user { display: flex; align-items: center; gap: .55rem; padding: 4px 8px; border-radius: 8px; color: var(--nx-text); text-decoration: none; }
.nx-header__user:hover { background: var(--nx-canvas); color: var(--nx-text); }
.nx-header__user .nx-sidebar__avatar { width: 32px; height: 32px; font-size: 12px; color: #fff; }
.nx-notification-menu { width: 340px; padding: .5rem; }
.nx-notification-item { display: flex; gap: .65rem; padding: .6rem; border-radius: 8px; color: var(--nx-text); text-decoration: none; }
.nx-notification-item:hover { background: var(--nx-primary-subtle); color: var(--nx-text); }
.nx-notification-item.is-unread { background: #f5f8ff; }
.nx-notification-item i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--nx-primary-subtle); color: var(--nx-primary); flex-shrink: 0; }
.nx-notification-item small { display: block; color: var(--nx-muted); }

/* ---------- Heroe azul ---------- */
.nx-hero {
  position: relative; overflow: hidden;
  min-height: 112px;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: 22px 26px;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--nx-navy) 0%, var(--nx-navy-2) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(10, 42, 107, .18);
}
.nx-hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 208, 245, .22), transparent 65%); pointer-events: none; }
.nx-hero__main { display: flex; align-items: center; gap: 1rem; flex: 1 1 320px; min-width: 0; }
.nx-hero__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); font-size: 20px; }
.nx-hero__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.nx-hero__title { margin: 2px 0 2px; font-size: 21px; font-weight: 800; color: #fff; line-height: 1.2; }
.nx-hero__subtitle { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.nx-hero__facts { position: relative; z-index: 1; display: flex; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; overflow: hidden; }
.nx-hero__facts > div { min-width: 112px; padding: 10px 18px; text-align: center; }
.nx-hero__facts > div + div { border-left: 1px solid rgba(255, 255, 255, .22); }
.nx-hero__facts strong { display: block; font-size: 19px; font-weight: 800; }
.nx-hero__facts span { font-size: 11.5px; color: rgba(255, 255, 255, .8); }
.nx-hero__actions { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; }
.nx-hero__btn { border: 1px solid rgba(255, 255, 255, .45) !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.nx-hero__btn:hover { background: rgba(255, 255, 255, .18) !important; }

/* ---------- KPIs ---------- */
.nx-kpi {
  position: relative; height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--nx-kpi-color, var(--nx-primary));
  border-radius: var(--nx-radius);
  background: #fff;
}
.nx-kpi__label { padding-right: 52px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-kpi-color, var(--nx-primary)); }
.nx-kpi__value { margin-top: 6px; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--nx-text); }
.nx-kpi__sub { margin-top: 6px; font-size: 12.5px; color: var(--nx-muted); }
.nx-kpi__icon { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--nx-kpi-color, var(--nx-primary)); background: var(--nx-kpi-bg, var(--nx-primary-subtle)); }
.nx-kpi--blue { --nx-kpi-color: #1e6bff; --nx-kpi-bg: #eaf1ff; }
.nx-kpi--green { --nx-kpi-color: #15803d; --nx-kpi-bg: #e8f7ee; }
.nx-kpi--teal { --nx-kpi-color: #0f9488; --nx-kpi-bg: #e2f6f4; }
.nx-kpi--indigo { --nx-kpi-color: #4f46e5; --nx-kpi-bg: #eef0ff; }
.nx-kpi--purple { --nx-kpi-color: #7c3aed; --nx-kpi-bg: #f3edff; }
.nx-kpi--orange { --nx-kpi-color: #c2690a; --nx-kpi-bg: #fff4e2; }
.nx-kpi--red { --nx-kpi-color: #dc2626; --nx-kpi-bg: #fdecec; }
.nx-kpi--yellow { --nx-kpi-color: #a16207; --nx-kpi-bg: #fef8db; }

/* ---------- Tarjetas ---------- */
.nx-app .card { border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius); box-shadow: none; }
.nx-app .card-header { min-height: 52px; padding: .8rem 1.1rem; background: #fff; border-bottom: 1px solid var(--nx-border); }
.nx-app .card-title { font-size: 14px; font-weight: 700; margin: 0; }
.nx-app .card-subtitle { font-size: 12.5px; color: var(--nx-muted); margin: 2px 0 0; }
.nx-app .card-body { padding: 1.1rem 1.25rem; }
.nx-card-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; margin-right: .55rem; background: var(--nx-primary-subtle); color: var(--nx-primary); font-size: 13px; }

/* Graficos: mismo alto y estado vacio dentro de la tarjeta. */
.nx-chart { height: 290px; }
.nx-empty { height: 100%; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: var(--nx-muted); text-align: center; }
.nx-empty i { font-size: 22px; color: #b6c2d6; }

/* Listas resumen (clave / valor). */
.nx-summary-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--nx-border); }
.nx-summary-list > div:last-child { border-bottom: 0; }
.nx-summary-list span { color: var(--nx-muted); }
.nx-summary-list strong { font-weight: 700; }

/* ---------- Filtros y lista (formato CRUD) ---------- */
/* Campos de filtro del mismo ancho: un sexto (col-md-2) si la tarjeta es amplia, un cuarto (col-md-3) si no,
   descontando los 80 px de Filtrar/Limpiar para que queden en la linea del ultimo campo. Se decide por el
   ancho del formulario (container query), no de la ventana. */
.nx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; container-type: inline-size; }
.nx-filters > .nx-filter { flex: 0 0 auto; width: 100%; }
.nx-filters .nx-filter-actions { display: flex; gap: .35rem; width: 80px; }
@container (min-width: 420px) { .nx-filters > .nx-filter { width: calc((100% - 2 * .5rem - 80px) / 2); } }
@container (min-width: 640px) { .nx-filters > .nx-filter { width: calc((100% - 4 * .5rem - 80px) / 4); } }
@container (min-width: 1000px) { .nx-filters > .nx-filter { width: calc((100% - 6 * .5rem - 80px) / 6); } }
.nx-list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.nx-list-toolbar .form-select { width: auto; display: inline-block; }
.nx-list-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: .9rem; color: var(--nx-muted); }

/* ---------- Tablas ---------- */
.nx-table-wrap { border: 1px solid var(--nx-border); border-radius: 8px; overflow-x: auto; }
.nx-app .table { margin: 0; font-size: var(--nx-fs); color: var(--nx-text); }
.nx-app .table thead th { background: #f6f8fc; color: #4a5672; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .75rem 1rem; border-bottom: 1px solid var(--nx-border); white-space: nowrap; }
.nx-app .table td { padding: .7rem 1rem; vertical-align: middle; border-color: var(--nx-border); }
.nx-app .table tbody tr:hover td { background: #f9fbff; }
.nx-row-actions { display: flex; justify-content: flex-end; gap: .35rem; }
.nx-row-actions .btn { width: var(--nx-control-h); padding: 0; background: #fff; }
.nx-row-actions .btn-view { border-color: var(--nx-primary); color: var(--nx-primary); }
.nx-row-actions .btn-edit { border-color: var(--nx-warning); color: var(--nx-warning); }
.nx-row-actions .btn-delete { border-color: var(--nx-danger); color: var(--nx-danger); }
.nx-row-actions .btn-more { border-color: #c5cede; color: #4a5672; }
.nx-row-actions .btn:hover { filter: brightness(.95); background: #f6f8fc; }
.nx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #c0266d; }

/* ---------- Badges ---------- */
.nx-app .badge { font-size: 11px; font-weight: 700; padding: .35em .6em; border-radius: 5px; }
.nx-badge-success { background: #dcf5e7 !important; color: #15803d !important; }
.nx-badge-warning { background: #fff1d6 !important; color: #b45309 !important; }
.nx-badge-danger { background: #fde2e2 !important; color: #b91c1c !important; }
.nx-badge-info { background: var(--nx-primary-subtle) !important; color: var(--nx-primary-dark) !important; }
.nx-badge-muted { background: #eef1f6 !important; color: #4a5672 !important; }

/* ---------- Paginacion: 8 controles en recuadros ---------- */
.nx-pagination { display: flex; align-items: center; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.nx-pagination a, .nx-pagination span { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d0d7e2; border-radius: 6px; background: #fff; color: var(--nx-text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.nx-pagination i { font-size: 11px; }
.nx-pagination a:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
.nx-pagination .is-active span { background: var(--nx-primary); border-color: var(--nx-primary); color: #fff; }
.nx-pagination .is-disabled span { opacity: .45; }
.nx-pagination .nx-ellipsis { border: 0; background: transparent; width: auto; }

/* ---------- Alertas tintadas ---------- */
.nx-app .alert { border-radius: var(--nx-radius); border: 1px solid; font-size: var(--nx-fs); }
.nx-app .alert-info { background: #eef4ff; border-color: #c8dafe; color: #1d3f86; }
.nx-app .alert-warning { background: #fff8e8; border-color: #f8dca0; color: #7c4a03; }
.nx-app .alert-danger { background: #fdeeee; border-color: #f5c2c2; color: #8f1d1d; }
.nx-app .alert-success { background: #ecf9f1; border-color: #bfe9cf; color: #14532d; }

/* ---------- Menus desplegables ---------- */
.nx-app .dropdown-menu { border: 1px solid var(--nx-border); border-radius: 8px; box-shadow: 0 12px 28px rgba(20, 33, 61, .12); font-size: var(--nx-fs); min-width: 150px; }
.nx-app .dropdown-item { padding: .5rem .85rem; }

/* ---------- Modales CRUD (detalle y formularios): se ajustan al contenido hasta un alto maximo ---------- */
.nx-modal .modal-content { max-height: min(720px, 100vh - 3.5rem); border: 1px solid var(--nx-border); border-radius: 12px; }
.nx-modal .modal-dialog-scrollable { height: auto; }
/* El <form> que envuelve encabezado + cuerpo queda entre .modal-content y .modal-body: sin ser columna flexible el cuerpo
   nunca se achica y el scroll de .modal-dialog-scrollable no aparece (el contenido se corta al llegar al alto maximo). */
.nx-modal .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Bloques de un formulario largo en modal: titulo con pastilla de icono y linea divisoria. */
.nx-form-block + .nx-form-block { margin-top: 1.5rem; }
.nx-form-section { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--nx-border); font-size: 14px; font-weight: 700; }
.nx-form-section__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #eef4ff; color: var(--nx-primary); font-size: 12px; }
.nx-form-section__hint { flex-basis: 100%; font-size: 12px; font-weight: 400; color: #6b7690; }
@media (min-width: 992px) { .nx-form-section__hint { flex-basis: auto; margin-left: auto; } }
/* Areas de modulos (planes): una columna por area con sus checks apilados. */
.nx-module-area { height: 100%; padding: .75rem; border: 1px solid var(--nx-border); border-radius: 8px; background: #f8fafd; }
.nx-module-area__title { margin-bottom: .5rem; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7690; }
.nx-modal .modal-header { padding: 16px 22px; border-bottom: 1px solid var(--nx-border); }
.nx-modal .modal-title { font-size: 17px; font-weight: 800; margin: 0; }
.nx-modal__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-primary); }
.nx-modal .modal-body { padding: 20px 22px; }
/* Botonera del formulario: queda fija al pie del modal aunque el cuerpo haga scroll. */
.nx-form-actions { position: sticky; bottom: -20px; z-index: 2; display: flex; justify-content: flex-end; gap: .5rem; margin: 1.25rem -22px -20px; padding: 14px 22px; background: #fff; border-top: 1px solid var(--nx-border); border-radius: 0 0 12px 12px; }

/* Detalle de solo lectura: tabla con bordes, nunca <dl>. */
.nx-detail-table { margin: 0; }
.nx-detail-table td { padding: .65rem .85rem !important; vertical-align: top; }
.nx-detail-table td:first-child { width: 34%; font-weight: 600; background: #f6f8fc; color: #4a5672; }
.nx-detail-list { margin: 0; padding-left: 1.1rem; }

/* Formularios en pagina: una tarjeta por bloque. */
.nx-form-card .card-header .card-title { display: flex; align-items: center; }
.nx-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; }
/* Tarjeta de cada check: check con aire parejo, nombre en negrita, descripcion gris (small o segundo span) y la elegida
   en azul. Todas del mismo ancho (columna de la grilla). */
.nx-check-grid .form-check { display: flex; align-items: flex-start; gap: .65rem; width: 100%; min-height: 0; margin: 0; padding: .7rem .85rem; border: 1px solid var(--nx-border-strong); border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.nx-check-grid .form-check:hover { border-color: #9db8ec; box-shadow: 0 2px 8px rgba(20, 33, 61, .06); }
.nx-check-grid .form-check .form-check-input { float: none; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; cursor: pointer; }
.nx-check-grid .form-check-label { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1f2a44; line-height: 1.3; cursor: pointer; }
.nx-check-grid .form-check-label small,
.nx-check-grid .form-check-label > span + span { display: block; margin-top: .2rem; font-size: 12px; font-weight: 400; line-height: 1.35; color: #6b7690; }
.nx-check-grid .form-check:has(.form-check-input:checked) { border-color: var(--nx-primary); background: #f3f7ff; box-shadow: inset 0 0 0 1px var(--nx-primary); }
.nx-check-grid .form-check:has(.form-check-input:focus-visible) { outline: 2px solid #9db8ec; outline-offset: 2px; }
.nx-check-grid .form-check:has(.form-check-input:disabled) { cursor: not-allowed; opacity: .6; }
.nx-module-area .nx-check-grid--stack { grid-template-columns: minmax(0, 1fr); }

/* Confirmacion: modal chico, icono ambar en el titulo, texto en el cuerpo y botones al pie. */
.nx-confirm .modal-dialog { max-width: 400px; }
.nx-confirm .modal-header { padding: 14px 18px; border-bottom: 1px solid var(--nx-border); }
.nx-confirm .modal-title { display: flex; align-items: center; gap: .55rem; font-size: 16px; font-weight: 700; margin: 0; }
.nx-confirm .modal-body { padding: 18px; font-size: 13.5px; color: var(--nx-text); }
.nx-confirm .modal-footer { padding: 12px 18px; border-top: 1px solid var(--nx-border); }
.nx-confirm-icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--nx-warning); color: #fff; font-size: 12px; }

/* Avisos. */
.nx-toast { border: 1px solid var(--nx-border); border-left: 4px solid var(--nx-primary); box-shadow: 0 12px 28px rgba(20, 33, 61, .14); }
.nx-toast .toast-body { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.nx-toast--success { border-left-color: var(--nx-success); } .nx-toast--success i { color: var(--nx-success); }
.nx-toast--danger { border-left-color: var(--nx-danger); } .nx-toast--danger i { color: var(--nx-danger); }
.nx-toast--warning { border-left-color: var(--nx-warning); } .nx-toast--warning i { color: var(--nx-warning); }
.nx-toast--info i { color: var(--nx-primary); }

/* ---------- Responsive ---------- */
.nx-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .nx-sidebar { transform: translateX(-100%); }
  .nx-main { margin-left: 0 !important; }
  body.nx-sidebar-open .nx-sidebar { transform: none; }
  body.nx-sidebar-open .nx-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1025; background: rgba(8, 20, 50, .45); }
  .nx-content { padding: 16px; }
  .nx-header { padding: 0 16px; }
}
@media (max-width: 767.98px) {
  .nx-hero__facts { width: 100%; }
  .nx-hero__facts > div { flex: 1; min-width: 0; padding: 10px; }
  .nx-header__search { display: none; }
}

/* ---------- Login ---------- */
/* Medidas tomadas del login de facturador (auth.css), pasadas a px porque el panel usa 13 px de base. */
.nx-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) clamp(416px, 36%, 528px); background: #fff; font-size: var(--nx-fs); }
.nx-auth__story { position: relative; overflow: hidden; color: #fff; background: var(--nx-navy) var(--nx-photo) center / cover no-repeat; }
.nx-auth__story::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 42, 107, 0) 40%, rgba(10, 42, 107, .94) 100%), linear-gradient(135deg, rgba(10, 42, 107, .9) 0%, rgba(18, 58, 140, .5) 100%); }
.nx-auth__badge { position: absolute; top: 48px; left: 72px; display: inline-flex; align-items: center; gap: .55rem; padding: 7px 16px 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); font-weight: 600; }
.nx-auth__badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-accent); box-shadow: 0 0 0 4px rgba(47, 208, 245, .25); }
.nx-auth__caption { position: absolute; left: 72px; right: 72px; bottom: 64px; max-width: 576px; }
.nx-auth__caption small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-accent); }
.nx-auth__caption h2 { margin: .6rem 0 .8rem; font-size: 40px; font-weight: 800; line-height: 1.15; color: #fff; }
.nx-auth__caption p { margin: 0; max-width: 480px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.nx-auth__panel { display: flex; align-items: center; justify-content: center; padding: 32px 40px; background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%); }
.nx-auth__card { width: 100%; max-width: 400px; }
.nx-auth__card .nx-auth-logo { display: block; height: 52px; margin: 0 auto 36px; }
.nx-auth__title { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: var(--nx-navy); }
.nx-auth__subtitle { margin: 0 0 24px; font-size: 13.5px; color: var(--nx-muted); }
.nx-auth .form-floating { margin-bottom: 16px; }
.nx-auth .form-floating > .form-control { height: 56px !important; min-height: 56px !important; padding: 26px 14px 8px !important; border-color: var(--nx-border-strong); border-radius: 10px; font-size: 14px; }
.nx-auth .form-floating > label { padding: 16px 14px; color: var(--nx-muted); font-size: 13px; }
.nx-auth .form-floating > .form-control::placeholder { color: transparent; }
.nx-auth__submit { width: 100%; height: 48px !important; min-height: 48px !important; margin-top: 8px; border: 0; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; background: var(--nx-primary); box-shadow: 0 8px 18px rgba(30, 107, 255, .25); }
.nx-auth__submit:hover, .nx-auth__submit:focus { color: #fff; background: var(--nx-primary-dark); }
.nx-auth__foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--nx-border); font-size: 12px; color: var(--nx-muted); text-align: center; }
.nx-auth__foot p { margin: 0 0 6px; }
@media (max-width: 899.98px) {
  .nx-auth { grid-template-columns: 1fr; }
  .nx-auth__story { display: none; }
}

/* Pestañas píldora de Configuracion: sobre el lienzo, la activa con borde y texto azules. */
.nx-tabs { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; margin-bottom: 0; padding: 0; list-style: none; }
.nx-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 1rem; border: 1px solid var(--nx-border); border-radius: 999px; background: #fff; color: #4a5672; font-weight: 600; text-decoration: none; }
.nx-tabs .nav-link:hover { color: var(--nx-primary); }
.nx-tabs .nav-link.active { border-color: var(--nx-primary); color: var(--nx-primary); }
/* Guardar suelto bajo las tarjetas, a la derecha, sin tarjeta ni Cancelar. */
.nx-settings-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* Acceso de soporte del owner: franja ambar fija bajo la cabecera del comercio, con la salida a un clic. */
.nx-support-banner { position: sticky; top: var(--nx-header-h); z-index: 1019; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 30px; background: #fff4d6; border-bottom: 1px solid #f2d27a; color: #6b4a00; }
.nx-support-banner__text { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.nx-support-banner__text i { margin-top: .15rem; color: #b7791f; }
.nx-support-banner form { flex-shrink: 0; }
@media (max-width: 767.98px) { .nx-support-banner { flex-direction: column; align-items: stretch; padding: .6rem 16px; } }
.nx-row-actions .btn-support { border-color: #8b5cf6; color: #8b5cf6; }

/* Cascaron (API del panel + Blade estatico): mismo espaciado entre bloques que .nx-content. */
.nx-shell > * + * { margin-top: 1rem; }
/* Mientras carga, la tabla se atenua (sin overlay que tape ni salto de altura). */
.nx-shell.is-loading .nx-table-wrap { opacity: .55; transition: opacity .15s; pointer-events: none; }
/* Encabezados que ordenan: cursor, y flecha segun el sentido actual. */
.nx-shell th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.nx-shell th[data-sort]::after { content: '\f0dc'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: .35rem; font-size: 10px; color: #b6c2d6; }
.nx-shell th[data-sort][data-order="asc"]::after { content: '\f0de'; color: var(--nx-primary); }
.nx-shell th[data-sort][data-order="desc"]::after { content: '\f0dd'; color: var(--nx-primary); }
.nx-shell th[data-sort].is-sorted { color: var(--nx-primary); }