fix(pos): corregir enlaces de navegacion en todas las paginas

Reemplaza enlaces del design system (dashboard.html, pos.html, etc.)
con rutas reales del POS (/pos/dashboard, /pos/sale, etc.).
Limpia archivos backup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pos/static/css/login-design.css

@@ -1,834 +0,0 @@
-
-
-    /* =====================================================================
-       RESET & BASE
-       ===================================================================== */
-
-    *, *::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);
-      color: var(--color-text-primary);
-      background-color: var(--color-bg-base);
-      transition: background-color var(--duration-slow) var(--ease-in-out),
-                  color var(--duration-slow) var(--ease-in-out);
-      min-height: 100vh;
-    }
-
-    /* Modern theme dot-grid on body */
-    [data-theme="modern"] body,
-    [data-theme="modern"].theme-root {
-      background-image: radial-gradient(
-        circle,
-        var(--dot-grid-color) 1px,
-        transparent 1px
-      );
-      background-size: var(--dot-grid-size) var(--dot-grid-size);
-    }
-
-    button {
-      cursor: pointer;
-      border: none;
-      background: none;
-      font-family: inherit;
-    }
-
-    /* =====================================================================
-       THEME SWITCHER BAR (sticky top)
-       ===================================================================== */
-
-    .theme-bar {
-      position: sticky;
-      top: 0;
-      z-index: var(--z-sticky);
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: var(--space-2);
-      padding: var(--space-2) var(--space-6);
-      background-color: var(--color-bg-elevated);
-      border-bottom: 1px solid var(--color-border);
-      box-shadow: var(--shadow-sm);
-      transition: background-color var(--duration-slow) var(--ease-in-out),
-                  border-color var(--duration-slow) var(--ease-in-out);
-    }
-
-    .theme-bar__label {
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-widest);
-      text-transform: uppercase;
-      color: var(--color-text-muted);
-      margin-right: var(--space-2);
-    }
-
-    .theme-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-full);
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-secondary);
-      border: 1.5px solid var(--color-border);
-      background: transparent;
-      transition: var(--transition-normal);
-      letter-spacing: var(--tracking-wide);
-    }
-
-    .theme-btn:hover {
-      color: var(--color-primary);
-      border-color: var(--color-primary);
-      background: var(--color-primary-muted);
-    }
-
-    .theme-btn.active {
-      color: var(--color-text-inverse);
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-    }
-
-    [data-theme="industrial"] .theme-btn.active {
-      color: #000;
-    }
-
-    .theme-btn__dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: currentColor;
-      flex-shrink: 0;
-    }
-
-    .theme-btn[data-theme-target="industrial"] .theme-btn__dot {
-      background: #F5A623;
-    }
-
-    .theme-btn[data-theme-target="industrial"].active .theme-btn__dot {
-      background: #000;
-    }
-
-    .theme-btn[data-theme-target="modern"] .theme-btn__dot {
-      background: #FF6B35;
-    }
-
-    .theme-btn[data-theme-target="modern"].active .theme-btn__dot {
-      background: #fff;
-    }
-
-    /* =====================================================================
-       LAYOUT — centered login screen
-       ===================================================================== */
-
-    .login-screen {
-      min-height: calc(100vh - 49px); /* subtract theme bar height */
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--space-8) var(--space-4);
-    }
-
-    /* =====================================================================
-       LOGIN CARD
-       ===================================================================== */
-
-    .login-card {
-      width: 100%;
-      max-width: 480px;
-      background: var(--color-bg-elevated);
-      border: 1px solid var(--color-border);
-      box-shadow: var(--shadow-xl);
-      overflow: hidden;
-      transition: background-color var(--duration-slow) var(--ease-in-out),
-                  border-color var(--duration-slow) var(--ease-in-out),
-                  box-shadow var(--duration-slow) var(--ease-in-out);
-    }
-
-    /* Industrial theme: angular clip-path on the card */
-    [data-theme="industrial"] .login-card {
-      border-radius: 0;
-      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
-    }
-
-    /* Modern theme: smooth rounded corners */
-    [data-theme="modern"] .login-card {
-      border-radius: var(--radius-xl);
-    }
-
-    /* =====================================================================
-       CARD HEADER — brand / logo
-       ===================================================================== */
-
-    .card-header {
-      padding: var(--space-8) var(--space-8) var(--space-6);
-      text-align: center;
-      border-bottom: 1px solid var(--color-border);
-      position: relative;
-      overflow: hidden;
-    }
-
-    /* Industrial: amber accent bar at top of header */
-    [data-theme="industrial"] .card-header::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
-    }
-
-    /* Modern: subtle gradient wash */
-    [data-theme="modern"] .card-header {
-      background: linear-gradient(
-        135deg,
-        rgba(255, 107, 53, 0.04) 0%,
-        rgba(255, 107, 53, 0.01) 100%
-      );
-    }
-
-    .brand {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-4);
-    }
-
-    .brand-logo {
-      width: 52px;
-      height: 52px;
-      background: var(--color-primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--font-heading);
-      font-size: 1.75rem;
-      font-weight: var(--heading-weight-primary);
-      color: var(--color-text-inverse);
-      flex-shrink: 0;
-      transition: background var(--duration-normal) var(--ease-in-out);
-    }
-
-    [data-theme="industrial"] .brand-logo {
-      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
-      border-radius: 0;
-    }
-
-    [data-theme="modern"] .brand-logo {
-      border-radius: var(--radius-md);
-      box-shadow: var(--shadow-md);
-    }
-
-    [data-theme="industrial"] .brand-logo {
-      color: #000;
-    }
-
-    .brand-text {
-      text-align: left;
-    }
-
-    .brand-name {
-      font-family: var(--font-heading);
-      font-size: var(--text-h4);
-      font-weight: var(--heading-weight-primary);
-      color: var(--color-text-primary);
-      letter-spacing: var(--heading-tracking-h4);
-      line-height: var(--leading-h4);
-      text-transform: uppercase;
-    }
-
-    [data-theme="industrial"] .brand-name {
-      letter-spacing: var(--tracking-wider);
-    }
-
-    .brand-sub {
-      font-family: var(--font-body);
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-accent);
-      letter-spacing: var(--tracking-widest);
-      text-transform: uppercase;
-      margin-top: var(--space-1);
-    }
-
-    /* =====================================================================
-       CARD BODY
-       ===================================================================== */
-
-    .card-body {
-      padding: var(--space-6) var(--space-8);
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-6);
-    }
-
-    /* =====================================================================
-       SECTION LABEL
-       ===================================================================== */
-
-    .section-label {
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-widest);
-      text-transform: uppercase;
-      color: var(--color-text-muted);
-      margin-bottom: var(--space-3);
-    }
-
-    /* =====================================================================
-       USER SELECTION
-       ===================================================================== */
-
-    .users-section {}
-
-    .users-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-3);
-    }
-
-    .user-avatar-btn {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-3) var(--space-2);
-      background: var(--color-surface-1);
-      border: 1.5px solid var(--color-border);
-      cursor: pointer;
-      transition: var(--transition-normal);
-      position: relative;
-    }
-
-    [data-theme="industrial"] .user-avatar-btn {
-      border-radius: 0;
-      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
-    }
-
-    [data-theme="modern"] .user-avatar-btn {
-      border-radius: var(--radius-lg);
-    }
-
-    .user-avatar-btn:hover {
-      border-color: var(--color-primary);
-      background: var(--color-primary-muted);
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-md);
-    }
-
-    .user-avatar-btn.selected {
-      border-color: var(--color-primary);
-      background: var(--color-primary-muted);
-      box-shadow: var(--shadow-accent);
-    }
-
-    [data-theme="industrial"] .user-avatar-btn.selected {
-      background: rgba(245, 166, 35, 0.10);
-    }
-
-    .user-avatar-btn.selected .user-initials {
-      background: var(--color-primary);
-      color: var(--color-text-inverse);
-    }
-
-    [data-theme="industrial"] .user-avatar-btn.selected .user-initials {
-      color: #000;
-    }
-
-    /* Selected check indicator */
-    .user-avatar-btn.selected::after {
-      content: '✓';
-      position: absolute;
-      top: 4px;
-      right: 6px;
-      font-size: 10px;
-      font-weight: bold;
-      color: var(--color-primary);
-      line-height: 1;
-    }
-
-    .user-initials {
-      width: 44px;
-      height: 44px;
-      background: var(--color-surface-2);
-      border: 1.5px solid var(--color-border);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--font-heading);
-      font-size: 0.9rem;
-      font-weight: var(--heading-weight-primary);
-      color: var(--color-text-secondary);
-      letter-spacing: var(--tracking-wide);
-      transition: var(--transition-normal);
-      flex-shrink: 0;
-    }
-
-    [data-theme="industrial"] .user-initials {
-      border-radius: 0;
-      clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
-    }
-
-    [data-theme="modern"] .user-initials {
-      border-radius: var(--radius-full);
-    }
-
-    .user-name {
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-secondary);
-      text-align: center;
-      line-height: 1.3;
-      transition: color var(--duration-normal);
-    }
-
-    .user-avatar-btn.selected .user-name {
-      color: var(--color-text-accent);
-    }
-
-    .user-role {
-      font-size: 10px;
-      color: var(--color-text-muted);
-      text-align: center;
-      letter-spacing: var(--tracking-wide);
-    }
-
-    /* =====================================================================
-       PIN DISPLAY (dots)
-       ===================================================================== */
-
-    .pin-section {}
-
-    .pin-display {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-4);
-      padding: var(--space-4) var(--space-6);
-      background: var(--color-surface-2);
-      border: 1.5px solid var(--color-border);
-      margin-bottom: var(--space-4);
-      transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
-      min-height: 64px;
-    }
-
-    [data-theme="industrial"] .pin-display {
-      border-radius: 0;
-    }
-
-    [data-theme="modern"] .pin-display {
-      border-radius: var(--radius-lg);
-    }
-
-    .pin-display.has-digits {
-      border-color: var(--color-border-accent);
-    }
-
-    .pin-display.error {
-      border-color: var(--color-error);
-      animation: pin-shake 0.4s var(--ease-in-out);
-    }
-
-    @keyframes pin-shake {
-      0%, 100% { transform: translateX(0); }
-      20%       { transform: translateX(-8px); }
-      40%       { transform: translateX(8px); }
-      60%       { transform: translateX(-5px); }
-      80%       { transform: translateX(5px); }
-    }
-
-    .pin-dot {
-      width: 14px;
-      height: 14px;
-      border-radius: 50%;
-      border: 2px solid var(--color-border-strong);
-      background: transparent;
-      transition: all var(--duration-fast) var(--ease-out);
-      flex-shrink: 0;
-    }
-
-    .pin-dot.filled {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-      transform: scale(1.1);
-      box-shadow: 0 0 8px var(--color-primary);
-    }
-
-    /* PIN placeholder text when no user selected */
-    .pin-placeholder {
-      font-size: var(--text-body-sm);
-      color: var(--color-text-muted);
-      font-style: italic;
-    }
-
-    /* =====================================================================
-       PIN PAD
-       ===================================================================== */
-
-    .pin-pad {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-3);
-    }
-
-    .pin-key {
-      position: relative;
-      padding: 0;
-      height: 64px;
-      background: var(--color-surface-2);
-      border: 1.5px solid var(--color-border);
-      font-family: var(--font-heading);
-      font-size: 1.5rem;
-      font-weight: var(--heading-weight-primary);
-      color: var(--color-text-primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: var(--transition-fast);
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      overflow: hidden;
-    }
-
-    [data-theme="industrial"] .pin-key {
-      border-radius: 0;
-      letter-spacing: var(--tracking-normal);
-    }
-
-    [data-theme="modern"] .pin-key {
-      border-radius: var(--radius-md);
-      letter-spacing: var(--tracking-snug);
-    }
-
-    .pin-key:hover {
-      background: var(--color-surface-3);
-      border-color: var(--color-border-strong);
-      transform: translateY(-1px);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .pin-key:active {
-      transform: translateY(1px) scale(0.97);
-      box-shadow: none;
-      background: var(--color-primary-muted);
-      border-color: var(--color-primary);
-    }
-
-    /* Ripple effect */
-    .pin-key::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: var(--color-primary);
-      opacity: 0;
-      border-radius: inherit;
-      transform: scale(0);
-      transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
-    }
-
-    .pin-key.ripple::after {
-      transform: scale(2.5);
-      opacity: 0.12;
-    }
-
-    /* Backspace key */
-    .pin-key--backspace {
-      font-size: 1.1rem;
-      color: var(--color-text-muted);
-    }
-
-    .pin-key--backspace:hover {
-      color: var(--color-error);
-      border-color: var(--color-error);
-      background: rgba(239, 68, 68, 0.06);
-    }
-
-    .pin-key--backspace:active {
-      border-color: var(--color-error);
-      background: rgba(239, 68, 68, 0.12);
-    }
-
-    /* Enter key */
-    .pin-key--enter {
-      background: var(--color-primary-muted);
-      border-color: var(--color-primary);
-      color: var(--color-primary);
-      font-size: 1rem;
-      font-weight: var(--font-weight-bold);
-      letter-spacing: var(--tracking-wide);
-    }
-
-    .pin-key--enter:hover {
-      background: var(--color-primary);
-      color: var(--color-text-inverse);
-      transform: translateY(-1px);
-      box-shadow: var(--shadow-md);
-    }
-
-    [data-theme="industrial"] .pin-key--enter:hover {
-      color: #000;
-    }
-
-    .pin-key--enter:active {
-      background: var(--color-primary-active, var(--color-primary));
-      color: var(--color-text-inverse);
-      transform: translateY(1px) scale(0.97);
-    }
-
-    /* =====================================================================
-       SUBMIT BUTTON
-       ===================================================================== */
-
-    .btn-login {
-      width: 100%;
-      padding: var(--space-4) var(--space-6);
-      background: var(--btn-primary-bg);
-      color: var(--btn-primary-text);
-      border: 1.5px solid var(--btn-primary-border, transparent);
-      font-family: var(--font-heading);
-      font-size: var(--text-h5);
-      font-weight: var(--heading-weight-primary);
-      letter-spacing: var(--tracking-wider);
-      text-transform: uppercase;
-      cursor: pointer;
-      transition: var(--transition-normal);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-3);
-      position: relative;
-      overflow: hidden;
-    }
-
-    [data-theme="industrial"] .btn-login {
-      border-radius: 0;
-      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
-    }
-
-    [data-theme="modern"] .btn-login {
-      border-radius: var(--radius-lg);
-      box-shadow: var(--shadow-md);
-    }
-
-    .btn-login:hover:not(:disabled) {
-      background: var(--btn-primary-bg-hover);
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-lg);
-    }
-
-    .btn-login:active:not(:disabled) {
-      background: var(--btn-primary-bg-active);
-      transform: translateY(0);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .btn-login:disabled {
-      opacity: 0.45;
-      cursor: not-allowed;
-      transform: none;
-    }
-
-    .btn-login__icon {
-      font-size: 1.1rem;
-      line-height: 1;
-    }
-
-    /* =====================================================================
-       CARD FOOTER
-       ===================================================================== */
-
-    .card-footer {
-      padding: var(--space-4) var(--space-8);
-      border-top: 1px solid var(--color-border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--space-4);
-      background: var(--color-surface-1);
-      transition: background-color var(--duration-slow) var(--ease-in-out),
-                  border-color var(--duration-slow) var(--ease-in-out);
-    }
-
-    .footer-version {
-      font-size: var(--text-caption);
-      color: var(--color-text-muted);
-      letter-spacing: var(--tracking-wide);
-      font-family: var(--font-mono);
-    }
-
-    .footer-status {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      font-size: var(--text-caption);
-      color: var(--color-text-muted);
-    }
-
-    .status-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--color-success);
-      animation: status-pulse 2.5s infinite ease-in-out;
-      flex-shrink: 0;
-    }
-
-    @keyframes status-pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50%       { opacity: 0.5; transform: scale(0.85); }
-    }
-
-    /* =====================================================================
-       INDUSTRIAL THEME EXTRAS — accent border line on card
-       ===================================================================== */
-
-    [data-theme="industrial"] .login-card {
-      border-color: #2a2a2a;
-      position: relative;
-    }
-
-    [data-theme="industrial"] .login-card::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      /* Simulated angular highlight on top-left edge */
-      border-top: 1px solid rgba(245, 166, 35, 0.15);
-      border-left: 1px solid rgba(245, 166, 35, 0.08);
-      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
-      z-index: 1;
-    }
-
-    /* =====================================================================
-       NOTIFICATION / TOAST for error feedback
-       ===================================================================== */
-
-    .toast {
-      position: fixed;
-      bottom: var(--space-8);
-      left: 50%;
-      transform: translateX(-50%) translateY(120%);
-      background: var(--color-error);
-      color: #fff;
-      padding: var(--space-3) var(--space-6);
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-semibold);
-      border-radius: var(--radius-full);
-      box-shadow: var(--shadow-lg);
-      z-index: var(--z-toast);
-      transition: transform 0.3s var(--ease-out);
-      white-space: nowrap;
-      pointer-events: none;
-    }
-
-    .toast.show {
-      transform: translateX(-50%) translateY(0);
-    }
-
-    /* =====================================================================
-       RESPONSIVE
-       ===================================================================== */
-
-    @media (max-width: 640px) {
-      .theme-bar {
-        padding: var(--space-2) var(--space-4);
-      }
-
-      .theme-bar__label {
-        display: none;
-      }
-
-      .login-screen {
-        padding: var(--space-4) var(--space-3);
-        align-items: flex-start;
-        padding-top: var(--space-6);
-      }
-
-      .card-body {
-        padding: var(--space-5) var(--space-5);
-        gap: var(--space-5);
-      }
-
-      .card-header {
-        padding: var(--space-6) var(--space-5) var(--space-5);
-      }
-
-      .card-footer {
-        padding: var(--space-3) var(--space-5);
-      }
-
-      .brand-logo {
-        width: 44px;
-        height: 44px;
-        font-size: 1.4rem;
-      }
-
-      .brand-name {
-        font-size: 1.25rem;
-      }
-
-      .users-grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: var(--space-2);
-      }
-
-      .pin-key {
-        height: 56px;
-        font-size: 1.35rem;
-      }
-
-      .pin-dot {
-        width: 12px;
-        height: 12px;
-      }
-    }
-
-    @media (max-width: 360px) {
-      .users-grid {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      .user-initials {
-        width: 36px;
-        height: 36px;
-        font-size: 0.75rem;
-      }
-
-      .pin-key {
-        height: 50px;
-        font-size: 1.2rem;
-      }
-    }
-
-    /* =====================================================================
-       ACCESSIBILITY
-       ===================================================================== */
-
-    .pin-key:focus-visible,
-    .user-avatar-btn:focus-visible,
-    .theme-btn:focus-visible,
-    .btn-login:focus-visible {
-      outline: 2px solid var(--color-border-focus);
-      outline-offset: 3px;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      *, *::before, *::after {
-        transition-duration: 0.01ms !important;
-        animation-duration: 0.01ms !important;
-      }
-    }
-
-  

pos/templates/accounting.html

@@ -1300,45 +1300,45 @@
 
       <nav class="sidebar__nav">
         <div class="nav-section-label">Principal</div>
-        <a class="nav-item" href="dashboard.html">
+        <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.html">
+        <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="catalogo.html">
+        <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="inventario.html">
+        <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="clientes.html">
+        <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="facturacion.html">
+        <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 is-active" href="contabilidad.html">
+        <a class="nav-item is-active" 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="reportes.html">
+        <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" href="configuracion.html">
+        <a class="nav-item" 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>

pos/templates/config.html

@@ -1175,45 +1175,45 @@
 
       <nav class="sidebar__nav">
         <div class="nav-section-label">Principal</div>
-        <a class="nav-item" href="dashboard.html">
+        <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.html">
+        <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="catalogo.html">
+        <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="inventario.html">
+        <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="clientes.html">
+        <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="facturacion.html">
+        <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="contabilidad.html">
+        <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="reportes.html">
+        <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="configuracion.html">
+        <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>

pos/templates/customers.html

@@ -1658,7 +1658,7 @@
           </a>
         </li>
         <li class="nav-item">
-          <a href="clientes.html" class="nav-link active">
+          <a href="/pos/customers" class="nav-link active">
             <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="6" cy="5" r="3"/><path d="M1 14c0-2.76 2.24-5 5-5s5 2.24 5 5"/>
               <path d="M13 6l2 2-3.5 3.5"/>

pos/templates/dashboard.html

@@ -1286,7 +1286,7 @@
 
         <div class="sidebar__section-label">Principal</div>
 
-        <a href="dashboard.html" class="nav-link active">
+        <a href="/pos/dashboard" class="nav-link active">
           <span class="nav-link__icon">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
               <rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" opacity="0.9"/>
@@ -1298,7 +1298,7 @@
           Dashboard
         </a>
 
-        <a href="pos.html" class="nav-link">
+        <a href="/pos/sale" class="nav-link">
           <span class="nav-link__icon">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
               <rect x="1" y="2" width="14" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
@@ -1310,7 +1310,7 @@
           POS
         </a>
 
-        <a href="catalogo.html" class="nav-link">
+        <a href="/pos/catalog" class="nav-link">
           <span class="nav-link__icon">
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
               <path d="M3 2h7l3 3v9H3V2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>

pos/templates/inventory.html

@@ -1228,7 +1228,7 @@
       <nav class="sidebar__nav">
         <div class="nav-section-label">Principal</div>
 
-        <a class="nav-item" href="pos.html">
+        <a class="nav-item" href="/pos/sale">
           <!-- Dashboard icon -->
           <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"/>
@@ -1237,14 +1237,14 @@
           <span>Dashboard</span>
         </a>
 
-        <a class="nav-item" href="pos.html">
+        <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"/><path d="M8 21h8M12 17v4"/>
           </svg>
           <span>POS</span>
         </a>
 
-        <a class="nav-item" href="catalogo.html">
+        <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 6h16M4 10h16M4 14h16M4 18h16"/>
           </svg>

pos/templates/invoicing.html

@@ -1404,7 +1404,7 @@
 
         <div class="nav-section-label">Principal</div>
 
-        <a class="nav-item" href="dashboard.html">
+        <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"/>
@@ -1414,7 +1414,7 @@
           <span>Dashboard</span>
         </a>
 
-        <a class="nav-item" href="pos.html">
+        <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"/>
             <path d="M8 21h8M12 17v4"/>
@@ -1422,14 +1422,14 @@
           <span>POS</span>
         </a>
 
-        <a class="nav-item" href="catalogo.html">
+        <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 6h16M4 10h16M4 14h16M4 18h16"/>
           </svg>
           <span>Catálogo</span>
         </a>
 
-        <a class="nav-item" href="inventario.html">
+        <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"/>
             <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
@@ -1440,7 +1440,7 @@
 
         <div class="nav-section-label">Gestión</div>
 
-        <a class="nav-item" href="clientes.html">
+        <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"/>
@@ -1449,7 +1449,7 @@
           <span>Clientes</span>
         </a>
 
-        <a class="nav-item is-active" href="facturacion.html" aria-current="page">
+        <a class="nav-item is-active" href="/pos/invoicing" aria-current="page">
           <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"/>
@@ -1460,7 +1460,7 @@
           <span>Facturación</span>
         </a>
 
-        <a class="nav-item" href="contabilidad.html">
+        <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"/>
@@ -1468,7 +1468,7 @@
           <span>Contabilidad</span>
         </a>
 
-        <a class="nav-item" href="reportes.html">
+        <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"/>
@@ -1479,7 +1479,7 @@
 
         <div class="nav-section-label">Sistema</div>
 
-        <a class="nav-item" href="configuracion.html">
+        <a class="nav-item" 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.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>

pos/templates/reports.html

@@ -1590,7 +1590,7 @@
       <nav class="sidebar__nav">
         <div class="nav-section-label">Principal</div>
 
-        <a href="dashboard.html" class="nav-item">
+        <a href="/pos/dashboard" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <rect x="1" y="1" width="7" height="7" rx="1"/><rect x="10" y="1" width="7" height="7" rx="1"/>
             <rect x="1" y="10" width="7" height="7" rx="1"/><rect x="10" y="10" width="7" height="7" rx="1"/>
@@ -1598,7 +1598,7 @@
           <span>Dashboard</span>
         </a>
 
-        <a href="pos.html" class="nav-item">
+        <a href="/pos/sale" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <rect x="1" y="3" width="16" height="12" rx="1"/><line x1="1" y1="7" x2="17" y2="7"/>
             <line x1="6" y1="7" x2="6" y2="15"/>
@@ -1606,7 +1606,7 @@
           <span>POS</span>
         </a>
 
-        <a href="catalogo.html" class="nav-item">
+        <a href="/pos/catalog" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <rect x="2" y="2" width="14" height="14" rx="1"/><line x1="6" y1="6" x2="12" y2="6"/>
             <line x1="6" y1="9" x2="12" y2="9"/><line x1="6" y1="12" x2="10" y2="12"/>
@@ -1614,7 +1614,7 @@
           <span>Catálogo</span>
         </a>
 
-        <a href="inventario.html" class="nav-item">
+        <a href="/pos/inventory" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <rect x="1" y="5" width="16" height="11" rx="1"/><path d="M5 5V4a4 4 0 018 0v1"/>
             <line x1="9" y1="9" x2="9" y2="12"/>
@@ -1624,14 +1624,14 @@
 
         <div class="nav-section-label">Gestión</div>
 
-        <a href="clientes.html" class="nav-item">
+        <a href="/pos/customers" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <circle cx="9" cy="6" r="3"/><path d="M3 15c0-3.314 2.686-6 6-6s6 2.686 6 6"/>
           </svg>
           <span>Clientes</span>
         </a>
 
-        <a href="facturacion.html" class="nav-item">
+        <a href="/pos/invoicing" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <rect x="3" y="1" width="12" height="16" rx="1"/><line x1="6" y1="6" x2="12" y2="6"/>
             <line x1="6" y1="9" x2="12" y2="9"/><line x1="6" y1="12" x2="9" y2="12"/>
@@ -1639,14 +1639,14 @@
           <span>Facturación</span>
         </a>
 
-        <a href="contabilidad.html" class="nav-item">
+        <a href="/pos/accounting" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <path d="M9 2v14M2 9h14"/><circle cx="9" cy="9" r="7"/>
           </svg>
           <span>Contabilidad</span>
         </a>
 
-        <a href="reportes.html" class="nav-item is-active">
+        <a href="/pos/reports" class="nav-item is-active">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <rect x="1" y="1" width="16" height="16" rx="1"/>
             <line x1="5" y1="13" x2="5" y2="9"/><line x1="9" y1="13" x2="9" y2="6"/>
@@ -1657,7 +1657,7 @@
 
         <div class="nav-section-label">Sistema</div>
 
-        <a href="configuracion.html" class="nav-item">
+        <a href="/pos/config" class="nav-item">
           <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
             <circle cx="9" cy="9" r="2.5"/>
             <path d="M9 1v2M9 15v2M1 9h2M15 9h2M3.22 3.22l1.42 1.42M13.36 13.36l1.42 1.42M3.22 14.78l1.42-1.42M13.36 4.64l1.42-1.42"/>