/* ── SIDEBAR ── */
  .sidebar {
    width: 220px; background: var(--bg2); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100;
  }

  .logo-upload-area {
    padding: 20px 18px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  .logo-placeholder {
    width: 150px; height: 150px; border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bg3); overflow: hidden; position: relative;
  }
  .logo-placeholder img { width: 100%; height: 100%; object-fit: contain; }

  .sidebar-app-label { font-size: 11px; color: var(--text3); text-align: center; }
  .sidebar-app-label strong { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 1px; }

  .sidebar-nav { padding: 12px 8px; flex: 1; }
  .nav-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text2);
    font-size: 13px; transition: background 0.15s, color 0.15s; margin-bottom: 2px;
  }
  .nav-item:hover { background: var(--bg3); color: var(--text); }
  .nav-item.active { background: rgba(108,142,251,0.15); color: var(--accent); font-weight: 500; }
  .nav-item .icon { width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0; }
  .nav-item.active .icon { opacity: 1; }

  .sidebar-footer {
    padding: 12px 18px; border-top: 1px solid var(--border);
    text-align: center;
  }
  .sidebar-footer a {
    font-size: 10px; color: var(--text3); text-decoration: none;
    transition: color 0.15s; line-height: 1.4; display: block;
  }
  .sidebar-footer a:hover { color: var(--accent); }

  .sidebar-backdrop,
  .mobile-topbar {
    display: none;
  }

  .sidebar-backdrop {
    border: none;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: var(--bg2);
    color: var(--text);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .mobile-topbar-brand {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
  }
  .mobile-topbar-brand strong {
    font-size: 13px;
    color: var(--text);
    letter-spacing: 0.04em;
  }
  .mobile-topbar-brand span {
    font-size: 11px;
    color: var(--text2);
  }

  /* ── MAIN ── */
  .main { margin-left: 220px; flex: 1; padding: 28px 28px 60px; display: flex; flex-direction: column; min-height: 100vh; }
  .page { display: none; flex: 1; flex-direction: column; }
  .page.active { display: flex; flex-direction: column; }

  .page-header { margin-bottom: 24px; }
  .company-name {
    font-size: 22px; font-weight: 700; color: var(--text);
    outline: none; border: none; background: transparent; width: 100%;
    margin-bottom: 2px; cursor: text; caret-color: var(--accent);
    font-family: inherit;
  }
  .company-name:focus { color: var(--accent); }
  .company-name::placeholder { color: var(--text3); font-weight: 400; font-size: 20px; }
  .page-header h2 { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .page-header p { color: var(--text2); font-size: 13px; }
  .orc-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin: -8px 0 20px;
  }
  .orc-tab {
    border: none;
    background: transparent;
    color: var(--text2);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .orc-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
  .orc-tab.active { color: var(--bg); background: var(--accent); }

  .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
  .card-title { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }

  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── FOOTER ── */
  .main-footer {
    margin-top: auto; padding-top: 32px; text-align: center;
  }
  .main-footer a {
    font-size: 11px; color: var(--text3); text-decoration: none;
    transition: color 0.15s;
  }
  .main-footer a:hover { color: var(--accent); }

  .btn-inicio {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 32px 40px; border-radius: var(--radius); border: 1px solid var(--border2);
    background: var(--bg2); cursor: pointer; transition: all 0.2s;
    min-width: 200px; text-decoration: none;
  }
  .btn-inicio:hover { border-color: var(--accent); background: rgba(108,142,251,0.08); transform: translateY(-2px); }

/* ── LOGIN SCREEN ── */
  .login-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
  }
  .login-screen.hidden { display: none; }
  .login-box {
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 14px; padding: 40px 44px; width: 360px;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  }
  .login-logo {
    width: 80px; height: 80px; border-radius: var(--radius);
    overflow: hidden; background: var(--bg3); display: flex; align-items: center; justify-content: center;
  }
  .login-logo img { width: 100%; height: 100%; object-fit: contain; }
  .login-title { font-size: 18px; font-weight: 700; color: var(--text); text-align: center; }
  .login-subtitle { font-size: 13px; color: var(--text2); text-align: center; margin-top: -14px; }
  .login-fields { width: 100%; display: flex; flex-direction: column; gap: 12px; }
  .login-fields label { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
  .btn-login {
    width: 100%; padding: 10px; border-radius: var(--radius-sm); border: none;
    background: var(--accent2); color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
  }
  .btn-login:hover { background: var(--accent); }
  .login-error { font-size: 12px; color: var(--danger); text-align: center; display: none; }

  /* ── GEAR BUTTON IN SIDEBAR ── */
  .sidebar-gear,
  .sidebar-actions {
    padding: 8px 8px 4px;
    display: flex; justify-content: space-between;
  }
  .gear-btn {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: transparent; border: none; cursor: pointer;
    color: var(--text3); display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
  }
  .gear-btn:hover { color: var(--accent); background: var(--bg3); }
  .gear-btn.active { color: var(--accent); background: rgba(108,142,251,0.12); }

  @media (max-width: 960px) {
    body.mobile-nav-open {
      overflow: hidden;
    }
    .app {
      display: block;
      min-height: 100vh;
    }
    .sidebar-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 240;
      background: rgba(8, 10, 16, 0.72);
      transition: opacity 0.24s ease;
    }
    body.mobile-nav-open .sidebar-backdrop {
      opacity: 1;
      pointer-events: auto;
    }
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: min(82vw, 320px);
      height: 100vh;
      border-right: 1px solid var(--border);
      border-bottom: none;
      transform: translateX(-100%);
      transition: transform 0.24s ease;
      z-index: 260;
      box-shadow: 0 18px 48px rgba(0,0,0,0.35);
      overflow-y: auto;
    }
    body.mobile-nav-open .sidebar {
      transform: translateX(0);
    }
    .logo-upload-area {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 18px 18px 14px;
    }
    .logo-placeholder {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
    }
    .sidebar-app-label {
      text-align: left;
    }
    .sidebar-nav {
      display: block;
      gap: 0;
      overflow: visible;
      padding: 14px 12px;
      flex: 1;
    }
    .nav-item {
      margin-bottom: 6px;
      white-space: normal;
      flex-shrink: 1;
      min-height: 46px;
      padding: 12px 14px;
      font-size: 14px;
    }
    .sidebar-actions {
      justify-content: flex-start;
      gap: 10px;
      padding: 12px;
    }
    .gear-btn {
      width: 42px;
      height: 42px;
    }
    .main {
      margin-left: 0;
      min-height: 100vh;
      padding: 16px 16px 40px;
      width: 100%;
    }
    .mobile-topbar {
      display: flex;
      align-items: center;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 120;
      margin: -16px -16px 18px;
      padding: 12px 16px;
      background: rgba(15,17,23,0.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    body.mobile-nav-open .mobile-menu-toggle span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    body.mobile-nav-open .mobile-menu-toggle span:nth-child(2) {
      opacity: 0;
    }
    body.mobile-nav-open .mobile-menu-toggle span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }
    .card {
      padding: 18px;
    }
    .grid-3 {
      grid-template-columns: 1fr;
    }
    .orc-tabs,
    .settings-tabs {
      display: flex;
      overflow-x: auto;
      max-width: 100%;
      white-space: nowrap;
    }
    .btn-inicio {
      min-width: 0;
      width: 100%;
      padding: 18px;
    }
    .login-box {
      width: min(92vw, 360px);
      padding: 28px 22px;
    }
  }

  @media (max-width: 640px) {
    .mobile-topbar {
      margin-bottom: 16px;
      padding: 10px 14px;
    }
    .main {
      padding: 14px 12px 32px;
    }
    .page-header h2 {
      font-size: 16px;
    }
    .page-header p {
      font-size: 12px;
    }
    .card {
      padding: 16px;
    }
    .main-footer {
      padding-top: 22px;
    }
  }