<!DOCTYPE html>
<html lang="es" data-theme="industrial">
<head>
  <script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Configuración — Nexus Autoparts POS</title>
  <link rel="stylesheet" href="/pos/static/css/tokens.css" />

  <style>
    /* =========================================================================
       BASE RESET & SHELL
       ========================================================================= */

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

    html, body {
      height: 100%;
    }

    body {
      font-family: var(--font-body);
      font-size: var(--text-body-sm);
      color: var(--color-text-primary);
      background-color: var(--color-bg-base);
      transition: background-color var(--duration-normal) var(--ease-in-out),
                  color var(--duration-normal) var(--ease-in-out);
      overflow: hidden;
    }

    [data-theme="modern"] body {
      background-color: var(--color-bg-base);
      background-image: radial-gradient(
        circle,
        var(--dot-grid-color) 1px,
        transparent 1px
      );
      background-size: var(--dot-grid-size) var(--dot-grid-size);
    }

    /* =========================================================================
       THEME SWITCHER BAR
       ========================================================================= */

    .theme-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--z-toast);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--space-5);
      background: var(--color-bg-overlay);
      border-bottom: 1px solid var(--color-border);
      backdrop-filter: blur(10px);
      height: 36px;
    }

    [data-theme="industrial"] .theme-bar {
      background: rgba(13, 13, 13, 0.95);
      border-bottom-color: var(--color-primary-muted);
    }

    .theme-bar__left {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .theme-bar__store {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-primary);
      font-size: 0.75rem;
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-text-accent);
    }

    .theme-bar__dot {
      width: 6px;
      height: 6px;
      background: var(--color-success);
      border-radius: var(--radius-full);
      box-shadow: 0 0 6px var(--color-success);
      animation: blink 2.5s ease-in-out infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.35; }
    }

    .theme-bar__sep {
      width: 1px;
      height: 16px;
      background: var(--color-border);
    }

    .theme-bar__label {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }

    .theme-bar__right {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .theme-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      padding: 2px var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-full);
      background: transparent;
      color: var(--color-text-secondary);
      font-family: var(--font-body);
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
      transition: var(--transition-fast);
      letter-spacing: var(--tracking-wide);
    }

    .theme-btn:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .theme-btn.is-active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-inverse);
    }

    .theme-btn__swatch {
      width: 8px;
      height: 8px;
      border-radius: var(--radius-full);
    }

    .theme-btn--industrial .theme-btn__swatch { background: #F5A623; }
    .theme-btn--modern    .theme-btn__swatch  { background: #FF6B35; }

    /* =========================================================================
       APP LAYOUT
       ========================================================================= */

    .app-shell {
      display: flex;
      height: 100vh;
      padding-top: 36px;
    }

    /* =========================================================================
       SIDEBAR
       ========================================================================= */

    .sidebar {
      width: 260px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      background: var(--color-bg-elevated);
      border-right: 1px solid var(--color-border);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }

    .sidebar::-webkit-scrollbar       { width: 4px; }
    .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); }
    .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

    .sidebar__brand {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4) var(--space-4) var(--space-3);
      border-bottom: 1px solid var(--color-border);
      flex-shrink: 0;
    }

    .brand-logo {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-primary);
      color: var(--color-text-inverse);
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-primary);
      font-size: 1.125rem;
      letter-spacing: -0.04em;
      flex-shrink: 0;
    }

    [data-theme="industrial"] .brand-logo {
      clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
    }

    [data-theme="modern"] .brand-logo {
      border-radius: var(--radius-md);
    }

    .brand-name__primary {
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-primary);
      font-size: 0.9375rem;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--color-text-primary);
      line-height: 1;
    }

    .brand-name__sub {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      margin-top: 2px;
    }

    .sidebar__nav {
      flex: 1;
      padding: var(--space-3) 0;
    }

    .nav-section-label {
      padding: var(--space-3) var(--space-4) var(--space-1);
      font-size: 0.6875rem;
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-2) var(--space-4);
      color: var(--color-text-secondary);
      text-decoration: none;
      font-size: var(--text-body-sm);
      font-weight: var(--font-weight-regular);
      border-left: 3px solid transparent;
      transition: var(--transition-fast);
      cursor: pointer;
    }

    .nav-item:hover {
      background: var(--color-surface-2);
      color: var(--color-text-primary);
    }

    .nav-item.is-active {
      background: var(--color-primary-muted);
      color: var(--color-primary);
      border-left-color: var(--color-primary);
      font-weight: var(--font-weight-semibold);
    }

    .nav-item__icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      opacity: 0.7;
    }

    .nav-item.is-active .nav-item__icon {
      opacity: 1;
    }

    .sidebar__footer {
      padding: var(--space-3) var(--space-4);
      border-top: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .sidebar__user-avatar {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-full);
      background: var(--color-primary);
      color: var(--color-text-inverse);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-caption);
      font-weight: var(--font-weight-bold);
      flex-shrink: 0;
    }

    .sidebar__user-info { flex: 1; overflow: hidden; }

    .sidebar__user-name {
      font-size: var(--text-body-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar__user-role {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
    }

    /* =========================================================================
       MAIN CONTENT
       ========================================================================= */

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 0;
    }

    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-4) var(--space-6);
      background: var(--color-bg-elevated);
      border-bottom: 1px solid var(--color-border);
      flex-shrink: 0;
    }

    [data-theme="industrial"] .page-header {
      background: var(--color-surface-1);
    }

    .page-header__title-group { display: flex; flex-direction: column; gap: 2px; }

    .page-header__eyebrow {
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .page-header__title {
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-primary);
      font-size: var(--text-h4);
      letter-spacing: var(--heading-tracking-h4);
      color: var(--color-text-primary);
      line-height: 1.2;
    }

    [data-theme="industrial"] .page-header__title {
      text-transform: uppercase;
    }

    .page-header__actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* =========================================================================
       SCROLLABLE CONTENT
       ========================================================================= */

    .content-scroll {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-5) var(--space-6);
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }

    .content-scroll::-webkit-scrollbar       { width: 6px; }
    .content-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); }
    .content-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

    /* =========================================================================
       SETTINGS SECTIONS
       ========================================================================= */

    .settings-section {
      margin-bottom: var(--space-8);
    }

    .settings-section__header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 1px solid var(--color-border);
    }

    .settings-section__icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      background: var(--color-primary-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .settings-section__icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--color-primary);
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .settings-section__title {
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-secondary);
      font-size: var(--text-h5);
      color: var(--color-text-primary);
      letter-spacing: var(--heading-tracking-h5);
    }

    [data-theme="industrial"] .settings-section__title {
      text-transform: uppercase;
    }

    .settings-section__desc {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      margin-top: 2px;
    }

    /* =========================================================================
       SETTINGS CARD
       ========================================================================= */

    .settings-card {
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      box-shadow: var(--shadow-sm);
      margin-bottom: var(--space-4);
    }

    [data-theme="modern"] .settings-card {
      background: var(--color-bg-overlay);
    }

    .settings-card__title {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin-bottom: var(--space-4);
      font-size: var(--text-body);
    }

    /* =========================================================================
       FORM ELEMENTS
       ========================================================================= */

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
    }

    .form-group--full {
      grid-column: 1 / -1;
    }

    .form-label {
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .form-input {
      height: 38px;
      padding: 0 var(--space-3);
      background: var(--color-bg-base);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      color: var(--color-text-primary);
      font-family: var(--font-body);
      font-size: var(--text-body-sm);
      transition: var(--transition-fast);
      outline: none;
    }

    [data-theme="modern"] .form-input {
      background: var(--color-bg-base);
    }

    .form-input:focus {
      border-color: var(--color-border-focus);
      box-shadow: var(--shadow-accent);
    }

    .form-input::placeholder {
      color: var(--color-text-muted);
    }

    .form-select {
      height: 38px;
      padding: 0 var(--space-3);
      background: var(--color-bg-base);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      color: var(--color-text-primary);
      font-family: var(--font-body);
      font-size: var(--text-body-sm);
      cursor: pointer;
      outline: none;
      transition: var(--transition-fast);
    }

    .form-select:focus {
      border-color: var(--color-border-focus);
      box-shadow: var(--shadow-accent);
    }

    .form-textarea {
      padding: var(--space-3);
      background: var(--color-bg-base);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      color: var(--color-text-primary);
      font-family: var(--font-body);
      font-size: var(--text-body-sm);
      resize: vertical;
      min-height: 80px;
      outline: none;
      transition: var(--transition-fast);
    }

    .form-textarea:focus {
      border-color: var(--color-border-focus);
      box-shadow: var(--shadow-accent);
    }

    .form-hint {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      margin-top: 2px;
    }

    /* =========================================================================
       TOGGLE SWITCH
       ========================================================================= */

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--color-border);
    }

    .toggle-row:last-child {
      border-bottom: none;
    }

    .toggle-row__info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .toggle-row__label {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      font-size: var(--text-body-sm);
    }

    .toggle-row__desc {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
    }

    .toggle {
      position: relative;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }

    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle__slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: var(--color-border-strong);
      border-radius: var(--radius-full);
      transition: var(--transition-normal);
    }

    .toggle__slider::before {
      content: '';
      position: absolute;
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background: white;
      border-radius: var(--radius-full);
      transition: var(--transition-normal);
      box-shadow: var(--shadow-sm);
    }

    .toggle input:checked + .toggle__slider {
      background: var(--color-primary);
    }

    .toggle input:checked + .toggle__slider::before {
      transform: translateX(20px);
    }

    .toggle input:focus + .toggle__slider {
      box-shadow: var(--shadow-focus);
    }

    /* =========================================================================
       THEME SELECTOR (in-app)
       ========================================================================= */

    .theme-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }

    .theme-option {
      background: var(--color-bg-base);
      border: 2px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      cursor: pointer;
      transition: var(--transition-normal);
      position: relative;
    }

    .theme-option:hover {
      border-color: var(--color-border-strong);
    }

    .theme-option.is-selected {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-accent);
    }

    .theme-option__check {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
      width: 22px;
      height: 22px;
      border-radius: var(--radius-full);
      background: var(--color-primary);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .theme-option.is-selected .theme-option__check {
      display: flex;
    }

    .theme-option__check svg {
      width: 14px;
      height: 14px;
      stroke: var(--color-text-inverse);
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .theme-option__preview {
      height: 100px;
      border-radius: var(--radius-md);
      margin-bottom: var(--space-3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      position: relative;
      overflow: hidden;
    }

    .theme-option__preview--dark {
      background: #0d0d0d;
      border: 1px solid #333;
    }

    .theme-option__preview--light {
      background: #FFFFFF;
      border: 1px solid #e2e4f0;
      background-image: radial-gradient(circle, rgba(26,26,46,0.07) 1px, transparent 1px);
      background-size: 12px 12px;
    }

    .theme-option__preview-logo {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-primary);
      font-size: 0.875rem;
    }

    .theme-option__preview-logo--dark {
      background: #F5A623;
      color: #000;
      clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    }

    .theme-option__preview-logo--light {
      background: #FF6B35;
      color: #fff;
      border-radius: var(--radius-sm);
    }

    .theme-option__preview-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .theme-option__preview-bar {
      height: 4px;
      border-radius: 2px;
    }

    .theme-option__preview--dark .theme-option__preview-bar:nth-child(1) { width: 60px; background: #fff; }
    .theme-option__preview--dark .theme-option__preview-bar:nth-child(2) { width: 40px; background: #888; }
    .theme-option__preview--dark .theme-option__preview-bar:nth-child(3) { width: 50px; background: #F5A623; }

    .theme-option__preview--light .theme-option__preview-bar:nth-child(1) { width: 60px; background: #1a1a2e; }
    .theme-option__preview--light .theme-option__preview-bar:nth-child(2) { width: 40px; background: #8080a0; }
    .theme-option__preview--light .theme-option__preview-bar:nth-child(3) { width: 50px; background: #FF6B35; }

    .theme-option__name {
      font-family: var(--font-heading);
      font-weight: var(--heading-weight-secondary);
      font-size: var(--text-body);
      color: var(--color-text-primary);
      margin-bottom: 2px;
    }

    .theme-option__desc {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
    }

    .theme-option__colors {
      display: flex;
      gap: var(--space-2);
      margin-top: var(--space-3);
    }

    .theme-option__swatch {
      width: 20px;
      height: 20px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-border);
    }

    /* =========================================================================
       BUTTONS
       ========================================================================= */

    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0 var(--space-4);
      height: 36px;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: var(--text-body-sm);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-wide);
      cursor: pointer;
      border: 1px solid transparent;
      transition: var(--transition-fast);
      text-decoration: none;
      white-space: nowrap;
    }

    .btn svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .btn--primary {
      background: var(--btn-primary-bg);
      color: var(--btn-primary-text);
      border-color: var(--btn-primary-border);
    }

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

    .btn--secondary {
      background: var(--btn-secondary-bg);
      color: var(--btn-secondary-text);
      border-color: var(--btn-secondary-border);
    }

    .btn--secondary:hover {
      background: var(--btn-secondary-bg-hover);
    }

    .btn--ghost {
      background: var(--btn-ghost-bg);
      color: var(--btn-ghost-text);
      border-color: var(--btn-ghost-border);
    }

    .btn--ghost:hover {
      background: var(--color-surface-2);
      border-color: var(--color-border-strong);
      color: var(--color-text-primary);
    }

    .btn--danger {
      background: var(--btn-danger-bg);
      color: var(--btn-danger-text);
    }

    .btn--sm {
      height: 28px;
      padding: 0 var(--space-3);
      font-size: var(--text-caption);
    }

    .btn-group {
      display: flex;
      gap: var(--space-3);
      margin-top: var(--space-5);
    }

    /* =========================================================================
       DATA TABLE
       ========================================================================= */

    .table-wrapper {
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    [data-theme="modern"] .table-wrapper {
      background: var(--color-bg-overlay);
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-body-sm);
    }

    .data-table thead {
      background: var(--color-surface-2);
      border-bottom: 1px solid var(--color-border);
    }

    [data-theme="industrial"] .data-table thead {
      background: var(--color-surface-3);
    }

    .data-table th {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;
      color: var(--color-text-muted);
      white-space: nowrap;
    }

    .data-table th:first-child { padding-left: var(--space-5); }
    .data-table th:last-child  { padding-right: var(--space-5); }

    .data-table tbody tr {
      border-bottom: 1px solid var(--color-border);
      transition: background var(--duration-fast) var(--ease-in-out);
    }

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

    .data-table tbody tr:hover {
      background: var(--color-surface-2);
    }

    .data-table td {
      padding: var(--space-3) var(--space-4);
      color: var(--color-text-secondary);
      vertical-align: middle;
    }

    .data-table td:first-child { padding-left: var(--space-5); }
    .data-table td:last-child  { padding-right: var(--space-5); }

    .data-table .td--primary {
      color: var(--color-text-primary);
      font-weight: var(--font-weight-semibold);
    }

    /* =========================================================================
       BADGES
       ========================================================================= */

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px var(--space-2);
      border-radius: var(--radius-full);
      font-size: 0.6875rem;
      font-weight: var(--font-weight-bold);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .badge::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: var(--radius-full);
      background: currentColor;
      flex-shrink: 0;
    }

    .badge--ok {
      background: rgba(34, 197, 94, 0.15);
      color: var(--color-success);
    }

    .badge--pending {
      background: var(--color-primary-muted);
      color: var(--color-primary);
    }

    .badge--inactive {
      background: rgba(115, 115, 115, 0.15);
      color: var(--color-text-muted);
    }

    .badge--admin {
      background: rgba(99, 102, 241, 0.15);
      color: #818cf8;
    }

    /* =========================================================================
       USER AVATAR (table)
       ========================================================================= */

    .user-cell {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .user-cell__avatar {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-full);
      background: var(--color-primary-muted);
      color: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-caption);
      font-weight: var(--font-weight-bold);
      flex-shrink: 0;
    }

    .user-cell__name {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
    }

    /* =========================================================================
       PRINTER/DEVICE CARDS
       ========================================================================= */

    .device-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: var(--space-4);
    }

    .device-card {
      background: var(--color-bg-elevated);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-4) var(--space-5);
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      box-shadow: var(--shadow-sm);
      transition: var(--transition-normal);
    }

    [data-theme="modern"] .device-card {
      background: var(--color-bg-overlay);
    }

    .device-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--color-border-strong);
    }

    .device-card__icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-md);
      background: var(--color-primary-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .device-card__icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--color-primary);
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .device-card__body { flex: 1; }

    .device-card__name {
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin-bottom: 2px;
    }

    .device-card__detail {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    .device-card__detail + .device-card__detail {
      margin-top: 2px;
    }

    .device-card__actions {
      margin-top: var(--space-3);
      display: flex;
      gap: var(--space-2);
    }

    /* =========================================================================
       RESPONSIVE
       ========================================================================= */

    @media (max-width: 1024px) {
      .sidebar { width: 60px; }
      .brand-name__primary,
      .brand-name__sub,
      .nav-section-label,
      .sidebar__user-info { display: none; }
      .sidebar__brand { justify-content: center; padding: var(--space-3); }
      .nav-item { justify-content: center; padding: var(--space-2); border-left: none; border-bottom: 3px solid transparent; }
      .nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); }
      .sidebar__footer { justify-content: center; }
      .form-grid { grid-template-columns: 1fr; }
      .theme-selector { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .device-grid { grid-template-columns: 1fr; }
    }

  </style>
</head>

<body>

  <!-- =========================================================================
       THEME SWITCHER BAR
       ========================================================================= -->

  <div class="theme-bar">
    <div class="theme-bar__left">
      <div class="theme-bar__store">
        <span class="theme-bar__dot"></span>
        Nexus Autoparts
      </div>
      <div class="theme-bar__sep"></div>
      <span class="theme-bar__label">Design System Preview</span>
    </div>
    <div class="theme-bar__right">
      <button class="theme-btn theme-btn--industrial is-active" data-theme-target="industrial" onclick="setTheme('industrial')">
        <span class="theme-btn__swatch"></span> Industrial
      </button>
      <button class="theme-btn theme-btn--modern" data-theme-target="modern" onclick="setTheme('modern')">
        <span class="theme-btn__swatch"></span> Moderno
      </button>
      <div class="theme-bar__sep"></div>
      <span class="theme-bar__label" id="live-clock">--:--</span>
    </div>
  </div>

  <!-- =========================================================================
       APP SHELL
       ========================================================================= -->

  <div class="app-shell">

    <!-- SIDEBAR -->
    <aside class="sidebar">
      <div class="sidebar__brand">
        <div class="brand-logo">N</div>
        <div>
          <div class="brand-name__primary">Nexus</div>
          <div class="brand-name__sub">Autoparts</div>
        </div>
      </div>

      <nav class="sidebar__nav">
        <div class="nav-section-label">Principal</div>
        <a class="nav-item" href="/pos/dashboard">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
          Dashboard
        </a>
        <a class="nav-item" href="/pos/sale">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="2" y1="20" x2="22" y2="20"/></svg>
          Punto de Venta
        </a>
        <a class="nav-item" href="/pos/catalog">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
          Catálogo
        </a>

        <div class="nav-section-label">Operaciones</div>
        <a class="nav-item" href="/pos/inventory">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
          Inventario
        </a>
        <a class="nav-item" href="/pos/customers">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          Clientes
        </a>

        <div class="nav-section-label">Finanzas</div>
        <a class="nav-item" href="/pos/invoicing">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
          Facturación
        </a>
        <a class="nav-item" href="/pos/accounting">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          Contabilidad
        </a>

        <div class="nav-section-label">Sistema</div>
        <a class="nav-item" href="/pos/reports">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
          Reportes
        </a>
        <a class="nav-item is-active" href="/pos/config">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          Configuración
        </a>
      </nav>

      <div class="sidebar__footer">
        <div class="sidebar__user-avatar">AM</div>
        <div class="sidebar__user-info">
          <div class="sidebar__user-name">Admin</div>
          <div class="sidebar__user-role">Administrador</div>
        </div>
      </div>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="main">

      <!-- Page Header -->
      <header class="page-header">
        <div class="page-header__title-group">
          <span class="page-header__eyebrow">Sistema</span>
          <h1 class="page-header__title">Configuración</h1>
        </div>
        <div class="page-header__actions">
          <button class="btn btn--primary">
            <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Guardar Cambios
          </button>
        </div>
      </header>

      <!-- Scrollable Content -->
      <div class="content-scroll">

        <!-- ===============================================================
             SECTION 1: APARIENCIA / TEMA
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Apariencia</div>
              <div class="settings-section__desc">Selecciona el tema visual del sistema</div>
            </div>
          </div>

          <div class="theme-selector">
            <div class="theme-option is-selected" onclick="selectThemeOption('industrial')">
              <div class="theme-option__check">
                <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div class="theme-option__preview theme-option__preview--dark">
                <div class="theme-option__preview-logo theme-option__preview-logo--dark">N</div>
                <div class="theme-option__preview-text">
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                </div>
              </div>
              <div class="theme-option__name">Tema A — Industrial Robusto</div>
              <div class="theme-option__desc">Fondo oscuro, acentos ámbar, tipografía Barlow Condensed</div>
              <div class="theme-option__colors">
                <div class="theme-option__swatch" style="background: #0d0d0d;"></div>
                <div class="theme-option__swatch" style="background: #1a1a1a;"></div>
                <div class="theme-option__swatch" style="background: #F5A623;"></div>
                <div class="theme-option__swatch" style="background: #333333;"></div>
                <div class="theme-option__swatch" style="background: #FFFFFF;"></div>
              </div>
            </div>

            <div class="theme-option" onclick="selectThemeOption('modern')">
              <div class="theme-option__check">
                <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div class="theme-option__preview theme-option__preview--light">
                <div class="theme-option__preview-logo theme-option__preview-logo--light">N</div>
                <div class="theme-option__preview-text">
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                </div>
              </div>
              <div class="theme-option__name">Tema B — Técnico Moderno</div>
              <div class="theme-option__desc">Fondo claro, acentos naranja, tipografía Poppins</div>
              <div class="theme-option__colors">
                <div class="theme-option__swatch" style="background: #FFFFFF;"></div>
                <div class="theme-option__swatch" style="background: #F8F9FF;"></div>
                <div class="theme-option__swatch" style="background: #FF6B35;"></div>
                <div class="theme-option__swatch" style="background: #1a1a2e;"></div>
                <div class="theme-option__swatch" style="background: #e2e4f0;"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 2: DATOS DE LA EMPRESA
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Datos de la Empresa</div>
              <div class="settings-section__desc">Información fiscal y comercial</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Razón Social</label>
                <input class="form-input" type="text" value="Nexus Autoparts S.A. de C.V." />
              </div>
              <div class="form-group">
                <label class="form-label">Nombre Comercial</label>
                <input class="form-input" type="text" value="Nexus Autoparts" />
              </div>
              <div class="form-group">
                <label class="form-label">RFC</label>
                <input class="form-input" type="text" value="NAU260101ABC" />
              </div>
              <div class="form-group">
                <label class="form-label">Régimen Fiscal</label>
                <select class="form-select">
                  <option selected>601 - General de Ley Personas Morales</option>
                  <option>603 - Personas Morales con Fines no Lucrativos</option>
                  <option>612 - Personas Físicas con Actividades Empresariales</option>
                </select>
              </div>
              <div class="form-group form-group--full">
                <label class="form-label">Dirección Fiscal</label>
                <input class="form-input" type="text" value="Av. Insurgentes Sur 1234, Col. Del Valle, Benito Juárez, CDMX, C.P. 03100" />
              </div>
              <div class="form-group">
                <label class="form-label">Teléfono</label>
                <input class="form-input" type="tel" value="(55) 1234-5678" />
              </div>
              <div class="form-group">
                <label class="form-label">Email</label>
                <input class="form-input" type="email" value="contacto@nexusautoparts.mx" />
              </div>
            </div>
            <div class="btn-group">
              <button class="btn btn--primary btn--sm">Guardar</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 3: USUARIOS Y PERMISOS
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Usuarios y Permisos</div>
              <div class="settings-section__desc">Gestiona quién accede al sistema y qué puede hacer</div>
            </div>
          </div>

          <div class="settings-card" style="padding: 0;">
            <div style="padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border);">
              <span style="font-weight: var(--font-weight-semibold); color: var(--color-text-primary);">5 usuarios activos</span>
              <button class="btn btn--primary btn--sm">
                <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Nuevo Usuario
              </button>
            </div>
            <div class="table-wrapper" style="border: none; border-radius: 0; box-shadow: none;">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>Usuario</th>
                    <th>Email</th>
                    <th>Rol</th>
                    <th>Sucursal</th>
                    <th>Estado</th>
                    <th>Último Acceso</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="user-cell">
                        <div class="user-cell__avatar">AM</div>
                        <span class="user-cell__name">Adrián Morales</span>
                      </div>
                    </td>
                    <td>admin@nexusautoparts.mx</td>
                    <td><span class="badge badge--admin">Admin</span></td>
                    <td>Todas</td>
                    <td><span class="badge badge--ok">Activo</span></td>
                    <td>Hoy, 14:32</td>
                    <td><button class="btn btn--ghost btn--sm">Editar</button></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="user-cell">
                        <div class="user-cell__avatar">CM</div>
                        <span class="user-cell__name">Carlos Mendoza</span>
                      </div>
                    </td>
                    <td>carlos@nexusautoparts.mx</td>
                    <td><span class="badge badge--pending">Contador</span></td>
                    <td>Matriz</td>
                    <td><span class="badge badge--ok">Activo</span></td>
                    <td>Hoy, 12:15</td>
                    <td><button class="btn btn--ghost btn--sm">Editar</button></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="user-cell">
                        <div class="user-cell__avatar">LR</div>
                        <span class="user-cell__name">Laura Ríos</span>
                      </div>
                    </td>
                    <td>laura@nexusautoparts.mx</td>
                    <td><span class="badge badge--ok">Vendedor</span></td>
                    <td>Matriz</td>
                    <td><span class="badge badge--ok">Activo</span></td>
                    <td>Hoy, 15:48</td>
                    <td><button class="btn btn--ghost btn--sm">Editar</button></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="user-cell">
                        <div class="user-cell__avatar">JP</div>
                        <span class="user-cell__name">Jorge Pérez</span>
                      </div>
                    </td>
                    <td>jorge@nexusautoparts.mx</td>
                    <td><span class="badge badge--ok">Vendedor</span></td>
                    <td>Sucursal Norte</td>
                    <td><span class="badge badge--ok">Activo</span></td>
                    <td>Ayer, 18:20</td>
                    <td><button class="btn btn--ghost btn--sm">Editar</button></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="user-cell">
                        <div class="user-cell__avatar">RG</div>
                        <span class="user-cell__name">Roberto García</span>
                      </div>
                    </td>
                    <td>roberto@nexusautoparts.mx</td>
                    <td><span class="badge badge--ok">Bodega</span></td>
                    <td>Matriz</td>
                    <td><span class="badge badge--ok">Activo</span></td>
                    <td>Hoy, 09:30</td>
                    <td><button class="btn btn--ghost btn--sm">Editar</button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 4: IMPRESORAS
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Impresoras</div>
              <div class="settings-section__desc">Configura impresoras de tickets y etiquetas</div>
            </div>
          </div>

          <div class="device-grid">
            <div class="device-card">
              <div class="device-card__icon">
                <svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
              </div>
              <div class="device-card__body">
                <div class="device-card__name">Epson TM-T88VI</div>
                <div class="device-card__detail">
                  <span class="badge badge--ok" style="padding: 0 4px; font-size: 0.625rem;">En línea</span>
                  Tickets de venta
                </div>
                <div class="device-card__detail">USB · 192.168.10.50</div>
                <div class="device-card__detail">Predeterminada para POS</div>
                <div class="device-card__actions">
                  <button class="btn btn--ghost btn--sm">Configurar</button>
                  <button class="btn btn--ghost btn--sm">Test</button>
                </div>
              </div>
            </div>

            <div class="device-card">
              <div class="device-card__icon">
                <svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
              </div>
              <div class="device-card__body">
                <div class="device-card__name">Zebra GK420d</div>
                <div class="device-card__detail">
                  <span class="badge badge--ok" style="padding: 0 4px; font-size: 0.625rem;">En línea</span>
                  Etiquetas de código de barras
                </div>
                <div class="device-card__detail">USB · 192.168.10.51</div>
                <div class="device-card__detail">Predeterminada para inventario</div>
                <div class="device-card__actions">
                  <button class="btn btn--ghost btn--sm">Configurar</button>
                  <button class="btn btn--ghost btn--sm">Test</button>
                </div>
              </div>
            </div>

            <div class="device-card">
              <div class="device-card__icon" style="background: rgba(115,115,115,.12);">
                <svg viewBox="0 0 24 24" style="stroke: var(--color-text-muted);"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
              </div>
              <div class="device-card__body">
                <div class="device-card__name">HP LaserJet Pro M404</div>
                <div class="device-card__detail">
                  <span class="badge badge--inactive" style="padding: 0 4px; font-size: 0.625rem;">Fuera de línea</span>
                  Facturas y reportes
                </div>
                <div class="device-card__detail">Red · 192.168.10.52</div>
                <div class="device-card__actions">
                  <button class="btn btn--ghost btn--sm">Configurar</button>
                  <button class="btn btn--ghost btn--sm">Reintentar</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 5: SUCURSALES
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Sucursales</div>
              <div class="settings-section__desc">Gestiona las ubicaciones de tu negocio</div>
            </div>
          </div>

          <div class="device-grid">
            <div class="device-card">
              <div class="device-card__icon">
                <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              </div>
              <div class="device-card__body">
                <div class="device-card__name">Matriz — Centro</div>
                <div class="device-card__detail">
                  <span class="badge badge--ok" style="padding: 0 4px; font-size: 0.625rem;">Principal</span>
                </div>
                <div class="device-card__detail">Av. Insurgentes Sur 1234, Col. Del Valle</div>
                <div class="device-card__detail">3 empleados · 2 terminales POS</div>
                <div class="device-card__actions">
                  <button class="btn btn--ghost btn--sm">Editar</button>
                </div>
              </div>
            </div>

            <div class="device-card">
              <div class="device-card__icon">
                <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              </div>
              <div class="device-card__body">
                <div class="device-card__name">Sucursal Norte</div>
                <div class="device-card__detail">
                  <span class="badge badge--ok" style="padding: 0 4px; font-size: 0.625rem;">Activa</span>
                </div>
                <div class="device-card__detail">Blvd. Ávila Camacho 456, Naucalpan</div>
                <div class="device-card__detail">2 empleados · 1 terminal POS</div>
                <div class="device-card__actions">
                  <button class="btn btn--ghost btn--sm">Editar</button>
                </div>
              </div>
            </div>

            <div class="device-card" style="border-style: dashed; cursor: pointer;">
              <div class="device-card__icon" style="background: transparent; border: 2px dashed var(--color-border);">
                <svg viewBox="0 0 24 24" style="stroke: var(--color-text-muted);"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
              </div>
              <div class="device-card__body">
                <div class="device-card__name" style="color: var(--color-text-muted);">Agregar Sucursal</div>
                <div class="device-card__detail">Configura una nueva ubicación</div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 6: PARÁMETROS FISCALES
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Parámetros Fiscales</div>
              <div class="settings-section__desc">Configuración de facturación electrónica CFDI</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Certificados y Sellos Digitales</div>
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Certificado (.cer)</label>
                <div style="display: flex; align-items: center; gap: var(--space-2);">
                  <input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.cer" readonly style="flex:1; opacity: 0.7;" />
                  <button class="btn btn--ghost btn--sm">Cambiar</button>
                </div>
                <span class="form-hint">Vigente hasta: 15/01/2029</span>
              </div>
              <div class="form-group">
                <label class="form-label">Llave Privada (.key)</label>
                <div style="display: flex; align-items: center; gap: var(--space-2);">
                  <input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.key" readonly style="flex:1; opacity: 0.7;" />
                  <button class="btn btn--ghost btn--sm">Cambiar</button>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">Contraseña del CSD</label>
                <input class="form-input" type="password" value="••••••••" />
              </div>
              <div class="form-group">
                <label class="form-label">PAC (Proveedor de Certificación)</label>
                <select class="form-select">
                  <option selected>Finkok</option>
                  <option>Diverza</option>
                  <option>Edicom</option>
                  <option>SW Sapien</option>
                </select>
              </div>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Configuración de Facturación</div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Facturación automática</span>
                <span class="toggle-row__desc">Generar CFDI automáticamente al cerrar una venta</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Envío automático por email</span>
                <span class="toggle-row__desc">Enviar PDF y XML al correo del cliente</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Factura global diaria</span>
                <span class="toggle-row__desc">Generar CFDI global para ventas sin RFC</span>
              </div>
              <label class="toggle">
                <input type="checkbox" />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Complemento de pago</span>
                <span class="toggle-row__desc">Generar complemento de pago para cobros parciales</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Parámetros de Impuestos</div>
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Tasa IVA (%)</label>
                <input class="form-input" type="number" value="16" />
              </div>
              <div class="form-group">
                <label class="form-label">Tasa IEPS (%)</label>
                <input class="form-input" type="number" value="0" />
                <span class="form-hint">Dejar en 0 si no aplica</span>
              </div>
              <div class="form-group">
                <label class="form-label">Serie de Facturación</label>
                <input class="form-input" type="text" value="FA" />
              </div>
              <div class="form-group">
                <label class="form-label">Folio Actual</label>
                <input class="form-input" type="number" value="893" />
              </div>
              <div class="form-group">
                <label class="form-label">Moneda Predeterminada</label>
                <select class="form-select">
                  <option selected>MXN — Peso Mexicano</option>
                  <option>USD — Dólar Americano</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Forma de Pago Default</label>
                <select class="form-select">
                  <option selected>01 — Efectivo</option>
                  <option>03 — Transferencia Electrónica</option>
                  <option>04 — Tarjeta de Crédito</option>
                  <option>28 — Tarjeta de Débito</option>
                  <option>99 — Por Definir</option>
                </select>
              </div>
            </div>
            <div class="btn-group">
              <button class="btn btn--primary btn--sm">Guardar Parámetros</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 7: PREFERENCIAS DEL SISTEMA
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Preferencias del Sistema</div>
              <div class="settings-section__desc">Ajustes generales de operación</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Notificaciones de stock bajo</span>
                <span class="toggle-row__desc">Alertar cuando un producto baje del mínimo configurado</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Sonidos de notificación</span>
                <span class="toggle-row__desc">Reproducir sonido al completar una venta o recibir alerta</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Cierre de caja obligatorio</span>
                <span class="toggle-row__desc">Requerir cierre de caja al finalizar el turno</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Modo offline</span>
                <span class="toggle-row__desc">Permitir ventas sin conexión a internet (sincroniza al reconectar)</span>
              </div>
              <label class="toggle">
                <input type="checkbox" />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Autocompletado de búsqueda</span>
                <span class="toggle-row__desc">Sugerir productos mientras se escribe en la barra de búsqueda</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
          </div>
        </div>

      </div><!-- /content-scroll -->
    </main>
  </div><!-- /app-shell -->

  <script src="/pos/static/js/app-init.js"></script>
  <script src="/pos/static/js/sidebar.js"></script>
  <script src="/pos/static/js/config.js"></script>

</body>
</html>
