:root {
    --bg: #fafafa;
    --surface: #ffffff;
    --border: #ececec;
    --border-soft: #f4f4f5;
    --text: #0a0a0a;
    --text-2: #525252;
    --text-3: #a3a3a3;
  }
  html { font-family: 'Inter', sans-serif; }
  body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings:"cv11","ss01","ss03"; transition: filter .2s ease; }

  /* Dark mode — pragmatic filter invert (excluye imágenes, mapas y charts) */
  body.dark { filter: invert(0.92) hue-rotate(180deg); background:#1a1a1a; }
  body.dark img,
  body.dark canvas,
  body.dark video,
  body.dark .leaflet-container,
  body.dark .no-invert { filter: invert(0.92) hue-rotate(180deg); }
  .font-display { font-family: 'Fraunces', serif; font-feature-settings: "ss01"; letter-spacing:-0.01em; }
  .tnum { font-variant-numeric: tabular-nums; }

  /* Scrollbar */
  .scrollbar::-webkit-scrollbar { width:8px; height:8px; }
  .scrollbar::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius:8px; }
  .scrollbar::-webkit-scrollbar-thumb:hover { background: #d4d4d4; }

  /* Card */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
  .card-hover:hover { border-color:#d4d4d4; }

  /* Sidebar nav */
  .nav-item { position:relative; color:#525252; }
  .nav-item:hover { color:#0a0a0a; background:#f5f5f5; }
  .nav-item.active { color:#0a0a0a; background:#f5f5f5; }
  .nav-item.active::before {
    content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:#0a0a0a; border-radius:2px;
  }
  .section-label { font-size:10px; letter-spacing:0.14em; color:#a3a3a3; text-transform:uppercase; font-weight:500; }

  /* Buttons */
  .btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; font-size:13px; font-weight:500; transition:all .15s; line-height:1; }
  .btn-primary { background:#0a0a0a; color:#fff; }
  .btn-primary:hover { background:#262626; }
  .btn-secondary { background:#fff; color:#0a0a0a; border:1px solid #e5e5e5; }
  .btn-secondary:hover { border-color:#a3a3a3; background:#fafafa; }
  .btn-ghost { color:#525252; }
  .btn-ghost:hover { color:#0a0a0a; background:#f5f5f5; }
  .btn-sm { padding:5px 9px; font-size:12px; }

  /* Inputs */
  .input { background:#fff; border:1px solid #e5e5e5; border-radius:8px; padding:7px 12px; font-size:13px; color:#0a0a0a; outline:none; transition:border-color .15s; }
  .input::placeholder { color:#a3a3a3; }
  .input:focus { border-color:#0a0a0a; }
  .input-soft { background:#f5f5f5; border-color:transparent; }
  .input-soft:focus { background:#fff; border-color:#0a0a0a; }

  /* Chips */
  .chip { padding:5px 11px; border-radius:9999px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid #e5e5e5; color:#525252; background:#fff; transition:all .15s; }
  .chip:hover { border-color:#a3a3a3; color:#0a0a0a; }
  .chip.active { background:#0a0a0a; color:#fff; border-color:#0a0a0a; }

  /* Badges */
  .badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:500; line-height:1.4; border:1px solid; }
  .badge::before { content:''; width:5px; height:5px; border-radius:50%; }
  .badge-ok      { color:#15803d; border-color:#bbf7d0; background:#f0fdf4; }
  .badge-ok::before    { background:#15803d; }
  .badge-warn    { color:#b45309; border-color:#fde68a; background:#fffbeb; }
  .badge-warn::before  { background:#b45309; }
  .badge-bad     { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
  .badge-bad::before   { background:#b91c1c; }
  .badge-info    { color:#1e3a8a; border-color:#bfdbfe; background:#eff6ff; }
  .badge-info::before  { background:#1e3a8a; }
  .badge-neutral { color:#525252; border-color:#e5e5e5; background:#fafafa; }
  .badge-neutral::before { background:#737373; }

  /* Table */
  .tbl { width:100%; font-size:13px; }
  .tbl thead th { text-align:left; font-weight:500; color:#a3a3a3; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid #ececec; }
  .tbl tbody td { padding:12px; border-bottom:1px solid #f4f4f5; }
  .tbl tbody tr:hover { background:#fafafa; }
  .tbl tbody tr:last-child td { border-bottom:none; }

  /* Subtle pulse */
  .pulse-dot { position:relative; }
  .pulse-dot::after { content:''; position:absolute; inset:-3px; border-radius:9999px; border:1.5px solid currentColor; opacity:.4; animation:pulseRing 1.8s ease-out infinite; }
  @keyframes pulseRing { 0% { opacity:.5; transform:scale(.6);} 100% { opacity:0; transform:scale(2);} }

  /* Map */
  .leaflet-container { background: #f5f5f5; }

  /* Seats */
  .seat { width:30px; height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; cursor:pointer; transition:all .12s; font-variant-numeric:tabular-nums; border:1px solid; }
  .seat.free     { background:#fff;    color:#0a0a0a; border-color:#d4d4d4; }
  .seat.sold     { background:#f5f5f5; color:#a3a3a3; border-color:#ececec; cursor:not-allowed; text-decoration:line-through; }
  .seat.reserved { background:#fffbeb; color:#b45309; border-color:#fde68a; }
  .seat.selected { background:#0a0a0a; color:#fff;    border-color:#0a0a0a; }
  .seat.free:hover { border-color:#0a0a0a; }

  /* Bubbles */
  .bubble { padding:9px 13px; border-radius:14px; max-width:80%; font-size:13px; line-height:1.45; }
  .bubble.in  { background:#f5f5f5; color:#0a0a0a; border-bottom-left-radius:4px; }
  .bubble.out { background:#0a0a0a; color:#fff;     border-bottom-right-radius:4px; }

  /* Modal */
  .modal-bg { background: rgba(10,10,10,0.4); backdrop-filter: blur(4px); }

  /* Mobile sidebar drawer */
  @media (max-width: 1023px) {
    aside.sidebar-main {
      position: fixed;
      left: 0; top: 0; bottom: 0;
      z-index: 9000;
      transform: translateX(-100%);
      transition: transform .25s ease;
      box-shadow: 0 0 30px rgba(0,0,0,0.15);
    }
    body.sidebar-open aside.sidebar-main { transform: translateX(0); }
    /* el div #sidebarBackdrop se hace visible vía JS (toggle .hidden) */
    #sidebarToggle { display: inline-flex !important; }
    main.main-content { width: 100%; }
    header.topbar { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
    header.topbar #companyBtn { display: none; }
    header.topbar > div.flex-1.max-w-md { max-width: 200px; }
    section#page { padding: 16px !important; }
    /* Stack KPIs y card grids en móvil */
    .grid.grid-cols-2 { grid-template-columns: 1fr 1fr; }
    .grid.md\:grid-cols-3, .grid.md\:grid-cols-4, .grid.md\:grid-cols-5 { grid-template-columns: 1fr 1fr; }
    .grid.lg\:grid-cols-3, .grid.lg\:grid-cols-2 { grid-template-columns: 1fr; }
    /* Tablas con scroll horizontal */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl { min-width: 600px; }
    /* Role switcher inferior */
    #roleSwitcher { left: 8px !important; right: 8px !important; transform: none !important; overflow-x: auto; }
    #roleSwitcher .role-pill { font-size: 10px !important; padding: 4px 8px !important; white-space: nowrap; }
  }
  #sidebarToggle { display: none; }

  /* Phone mock */
  .phone { width:280px; border:8px solid #18181b; border-radius:36px; background:#fff; overflow:hidden; box-shadow: 0 30px 60px rgba(0,0,0,.12); }

  .fade-in { animation: fadeIn .35s ease both; }
  @keyframes fadeIn { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }

  /* Subtle dot pattern for empty hero */
  .dotgrid { background-image: radial-gradient(#e5e5e5 1px, transparent 1px); background-size: 16px 16px; }

  /* Custom map tile (subtle grayscale) */
  .leaflet-tile { filter: grayscale(1) brightness(1.04) contrast(0.95); }

  /* Nav locked (no access for current role) */
  .nav-locked { opacity: 0.32; pointer-events: none; }
  .nav-locked .nav-lock-icon { display: inline-flex !important; }

  /* Telemetry view */
  .tlm-flash { animation: tlmFlash .6s ease; }
  @keyframes tlmFlash { 0% { color:#0a0a0a; transform:scale(1);} 30% { color:#15803d; transform:scale(1.08);} 100% { color:inherit; transform:scale(1);} }
  .tlm-event { animation: tlmSlide .35s ease; background:#fafafa; border-radius:0 6px 6px 0; }
  @keyframes tlmSlide { from { opacity:0; transform: translateX(-6px);} to { opacity:1; transform: translateX(0);} }
  .tlm-popup .leaflet-popup-content-wrapper { border-radius: 8px; padding: 4px; }
  .tlm-popup .leaflet-popup-content { margin: 8px 10px; font-family: 'Inter', sans-serif; }

  /* Demo role switcher pills */
  .role-pill { padding: 4px 11px; border-radius: 9999px; font-size: 11px; font-weight: 500; background: #f5f5f5; color: #525252; border: 1px solid #e5e5e5; transition: all .15s; cursor: pointer; white-space: nowrap; }
  .role-pill:hover { background: #ececec; color: #0a0a0a; }
  .role-pill.active { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }