:root { --control-surface: #101622; --control-text: #E2E8F0; color-scheme: dark; }
    select { color-scheme: dark; }
    select option, select optgroup { background-color: var(--control-surface); color: var(--control-text); }
    body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Plus Jakarta Sans', sans-serif; background-color: #07090E; color: #E2E8F0; -webkit-font-smoothing: antialiased; }
    .ios-glass { background: rgba(15, 21, 34, 0.72) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: rgba(255, 255, 255, 0.08) !important; }
    .ios-glass-card { background: linear-gradient(135deg, rgba(22, 30, 48, 0.7) 0%, rgba(12, 17, 28, 0.7) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: border-color .2s; }
    .ios-glass-card:hover { border-color: rgba(245, 184, 0, 0.35); }
    .ios-segmented { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 3px; }
    .ios-segmented button { border-radius: 9999px; transition: background-color .2s, color .2s, box-shadow .2s; }
    .ios-segmented button.active, .ios-segmented [aria-selected="true"], .ios-segmented [aria-pressed="true"] { background: #F5B800 !important; color: #000 !important; font-weight: 800; box-shadow: 0 2px 8px rgba(245, 184, 0, 0.4); }
    .ios-segmented button:not(.active):not([aria-selected="true"]):not([aria-pressed="true"]) { background: transparent !important; border-color: transparent !important; }

    body .bg-\[\#141A26\].rounded-2xl, body .bg-\[\#141A26\].rounded-3xl, body .bg-\[\#121824\], body .bg-\[\#0F1420\], body .bg-\[\#131924\], body .bg-\[\#161F30\] {
      background: linear-gradient(135deg, rgba(22, 30, 48, 0.7) 0%, rgba(12, 17, 28, 0.7) 100%) !important;
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
      transition: border-color .2s;
    }
    body .bg-\[\#141A26\].rounded-2xl:hover, body .bg-\[\#141A26\].rounded-3xl:hover { border-color: rgba(245, 184, 0, 0.35) !important; }
    body .bg-\[\#141A26\]:not(.rounded-2xl):not(.rounded-3xl) { background: rgba(255, 255, 255, 0.045) !important; }
    body .bg-\[\#1A2234\], body .bg-\[\#1E283D\] { background: rgba(255, 255, 255, 0.07) !important; }
    body .bg-\[\#0A0D14\], body .bg-\[\#0D111A\], body .bg-\[\#0B0E15\] { background: rgba(0, 0, 0, 0.35) !important; }
    body .border-\[\#212B3E\], body .border-\[\#1C2536\], body .border-\[\#1E283D\], body .border-\[\#222C3E\], body .border-\[\#232D40\], body .border-\[\#1A2232\], body .border-\[\#263248\] { border-color: rgba(255, 255, 255, 0.08) !important; }
    body .bg-\[\#F5B800\] { box-shadow: 0 2px 10px rgba(245, 184, 0, 0.28); }
    main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.amount-input), main select, main textarea, #modalRoot input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #modalRoot select, #modalRoot textarea {
      background-color: rgba(0, 0, 0, 0.35) !important; border-color: rgba(255, 255, 255, 0.08) !important; border-radius: 12px;
    }
    main input:focus, main select:focus, main textarea:focus, #modalRoot input:focus, #modalRoot select:focus, #modalRoot textarea:focus { outline: none; border-color: #F5B800 !important; box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.18); }
    #modalRoot > div { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    th { letter-spacing: .04em; }
    .brand-font { font-family: 'Archivo', sans-serif; }
    .custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
    .custom-scroll::-webkit-scrollbar-track { background: #0A0D15; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #222B3D; border-radius: 4px; }
    .custom-scroll::-webkit-scrollbar-thumb:hover { background: #F5B800; }

    /* ===== Teléfono (iPhone) ===== */
    html, body { overscroll-behavior: none; }
    header { padding-top: max(0.625rem, env(safe-area-inset-top)) !important; }
    #mainContainer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
    #sidebarBackdrop { display: none; }
    @media (max-width: 767px) {
      body { height: 100dvh; }
      #appSidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 82vw !important; max-width: 320px; z-index: 55; transform: translateX(-105%); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); background: #0B0F18 !important; }
      #appSidebar.mobile-open { transform: translateX(0); }
      #appSidebar.sidebar-collapsed .nav-text, #appSidebar.sidebar-collapsed .nav-badge, #appSidebar.sidebar-collapsed .section-title { display: revert !important; }
      #appSidebar .nav-item { padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 0.95rem; }
      #sidebarBackdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 54; }
      #mainContainer { padding-left: max(0.75rem, env(safe-area-inset-left)) !important; padding-right: max(0.75rem, env(safe-area-inset-right)) !important; padding-top: 0.9rem !important; }
      input, select, textarea { font-size: 16px !important; }
      table { min-width: 560px; }
      #mainContainer .overflow-x-auto, #mainContainer div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      #modalRoot > div > div { max-width: 100vw !important; max-height: 92dvh; overflow-y: auto; margin: 0 !important; }
      #modalRoot > div { align-items: flex-end !important; padding: 0 !important; }
      #modalRoot > div > div { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; width: 100% !important; }
      #toastRoot { left: 0.75rem; right: 0.75rem; bottom: calc(1rem + env(safe-area-inset-bottom)) !important; align-items: stretch !important; }
      #userDropdownMenu { position: fixed !important; left: 0.75rem; right: 0.75rem; width: auto !important; top: calc(60px + env(safe-area-inset-top)); }
      button, a { touch-action: manipulation; }
    }
    .sidebar-collapsed { width: 72px !important; }
    .sidebar-collapsed .nav-text, .sidebar-collapsed .nav-badge, .sidebar-collapsed .section-title { display: none !important; }
    .sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
    .amount-input { background: transparent; border: 1px dashed transparent; border-radius: 8px; text-align: right; width: 5.5rem; padding: 2px 6px; font-family: ui-monospace, monospace; }
    .amount-input:hover { border-color: #F5B80066; background: #141A26; cursor: text; }
    .amount-input:focus { outline: none; border-style: solid; border-color: #F5B800; background: #141A26; }
    input[type=number]::-webkit-inner-spin-button { opacity: .4; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .toast-in { animation: toastIn .2s ease-out; }
    .ios-sheet:hover { border-color: rgba(255, 255, 255, 0.1); }
    .ios-sheet input:not([type=checkbox]):not([type=radio]):not([type=file]),
    .ios-sheet select, .ios-sheet textarea { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.1); border-radius: 1rem; }
    .ios-sheet select option { background: #101622; }
    .ios-sheet input:focus, .ios-sheet select:focus, .ios-sheet textarea:focus { border-color: #F5B800; }
    .ios-sheet label { color: #cbd5e1; }
    .ios-sheet button[type=submit] { border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4); }
  .aff-card { background: radial-gradient(120% 140% at 100% 0%, rgba(245, 184, 0, 0.16), transparent 55%), linear-gradient(160deg, #11151F, #07090D); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
 .aff-card::after { content: ""; position: absolute; left: -10%; right: -10%; top: 38%; height: 2px; background: linear-gradient(90deg, transparent, rgba(245, 184, 0, 0.35), transparent); transform: rotate(-6deg); pointer-events: none; }
    /* ===== REDISEÑO: sistema visual unificado =====
       Base grafito (se lee bien en taller y de noche), ámbar de marca para acciones,
       y un color por área del negocio que se repite en menú, barra superior y celular. */
    :root {
      --bg: #0A0D12; --surface: #111720; --surface-2: #171E29; --surface-3: #1E2733;
      --line: #252E3C; --line-soft: #1C2430; --text: #E8ECF2; --muted: #98A4B6;
      --amber: #F5B800; --radius: 14px;
      --control-surface: #0C1118;
    }
    html, body { background-color: var(--bg) !important; }
    body { font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif !important; color: var(--text); font-size: 16px; line-height: 1.45; letter-spacing: .005em; }
    .brand-font { font-family: 'Barlow Condensed', 'Barlow', sans-serif !important; font-weight: 700; letter-spacing: .01em; }
    /* Barlow es estrecha: se sube un punto el texto pequeño para que se lea a pleno sol */
    body .text-xs { font-size: .875rem; line-height: 1.3rem; }
    body .text-\[11px\] { font-size: 12px; }
    body .text-\[10px\] { font-size: 11.5px; }
    body .text-\[9px\] { font-size: 11px; }
    body .text-sm { font-size: 1rem; line-height: 1.45rem; }
    td, th, .font-mono, .font-black, input[type=number] { font-variant-numeric: tabular-nums; }
    :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
    main input:focus-visible, main select:focus-visible, main textarea:focus-visible { outline: none; }

    /* Superficies planas: sin vidrio ni degradados */
    .ios-glass { background: #0D1118 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: var(--line-soft) !important; }
    .ios-glass-card,
    body .bg-\[\#141A26\].rounded-2xl, body .bg-\[\#141A26\].rounded-3xl, body .bg-\[\#121824\], body .bg-\[\#0F1420\], body .bg-\[\#131924\], body .bg-\[\#161F30\] {
      background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
      border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: var(--radius);
    }
    .ios-glass-card:hover, body .bg-\[\#141A26\].rounded-2xl:hover, body .bg-\[\#141A26\].rounded-3xl:hover { border-color: #34404F !important; }
    body .bg-\[\#141A26\]:not(.rounded-2xl):not(.rounded-3xl) { background: var(--surface-2) !important; }
    body .bg-\[\#1A2234\], body .bg-\[\#1E283D\] { background: var(--surface-3) !important; }
    body .bg-\[\#0A0D14\], body .bg-\[\#0D111A\], body .bg-\[\#0B0E15\] { background: #0C1118 !important; }
    body .bg-\[\#F5B800\] { box-shadow: none; }
    body .bg-\[\#F5B800\]:hover { filter: brightness(1.06); }
    #modalRoot > div { backdrop-filter: none; background: rgba(4, 6, 10, .8) !important; }
    .ios-sheet { border-radius: 18px !important; }
    main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.amount-input), main select, main textarea,
    #modalRoot input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), #modalRoot select, #modalRoot textarea {
      background-color: #0C1118 !important; border-color: var(--line) !important; border-radius: 10px; min-height: 2.5rem;
    }
    main input:focus, main select:focus, main textarea:focus, #modalRoot input:focus, #modalRoot select:focus, #modalRoot textarea:focus {
      border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(245, 184, 0, .2) !important;
    }
    .ios-segmented { background: #0C1118; border-color: var(--line); }

    /* Menú lateral por áreas */
    #appSidebar { background: #0D1118 !important; }
    #sidebarNav { gap: 2px; padding: .75rem; }
    .nav-group { display: flex; align-items: center; gap: .5rem; padding: 1.1rem .75rem .35rem; font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
    .nav-group-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--area); flex: none; }
    .nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 10px; border: 0; background: transparent; color: #B8C2D2; font-size: .95rem; font-weight: 600; text-align: left; transition: background-color .15s, color .15s; }
    .nav-item:hover { background: var(--surface-2); color: var(--text); }
    .nav-item.is-active { background: var(--surface-3); color: #fff; }
    .nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--area); }
    .nav-icon { width: 1.25rem; text-align: center; font-size: .95rem; color: var(--area); opacity: .8; }
    .nav-item.is-active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
    .nav-count { font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--area); background: color-mix(in srgb, var(--area) 16%, transparent); }
    .sidebar-collapsed .nav-group { display: none !important; }
    .sidebar-collapsed .nav-item.is-active::before { top: 6px; bottom: 6px; }

    /* Barra de área: dónde estoy */
    .area-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .95rem; }
    .area-chip { display: inline-flex; align-items: center; gap: .4rem; padding: 3px 11px; border-radius: 999px; font-weight: 700; color: var(--area); background: color-mix(in srgb, var(--area) 14%, transparent); border: 1px solid color-mix(in srgb, var(--area) 35%, transparent); }
    .area-sep { color: #475266; }
    .area-name { color: var(--muted); font-weight: 600; }

    /* Barra inferior (celular) */
    .bottom-nav { display: none; }
    @media (max-width: 767px) {
      .bottom-nav:not(.hidden) { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #0D1118; border-top: 1px solid var(--line); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
      .bn-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem .1rem; border-radius: 10px; color: var(--muted); font-size: .72rem; font-weight: 700; min-height: 52px; justify-content: center; }
      .bn-item i { font-size: 1.15rem; }
      .bn-item.is-active { color: var(--area); background: color-mix(in srgb, var(--area) 13%, transparent); }
      #mainContainer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
      #toastRoot { bottom: calc(4.9rem + env(safe-area-inset-bottom)) !important; }
      body .text-xs { font-size: .9rem; }
      button, a, select { min-height: 40px; }
      .area-bar { font-size: .9rem; }
    }
    .auto-ic { font-size: .85em; width: 1.1em; text-align: center; opacity: .9; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }