/* Recuperado de Pages/Shared/_Header.cshtml (estilos inline extraídos en 7c1d379) */
  /* ── Botón de hamburger para toggle sidebar ── */
  .vt-sidebar-toggle-btn {
    display: none; /* oculto en desktop — el sidebar siempre visible */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--vt-border-base, #e5e7eb);
    background: transparent;
    color: var(--vt-text-muted, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 130ms, color 130ms;
    flex-shrink: 0;
  }
  .vt-sidebar-toggle-btn:hover {
    background: var(--vt-bg-surface-hover, #f3f4f6);
    color: var(--vt-text-primary, #111827);
  }
  /* Mostrar en tablet/móvil */
  @media (max-width: 1024px) {
    .vt-sidebar-toggle-btn { display: flex; }
  }

  /* ── Command Palette Trigger Button ── */
  .vt-cmd-trigger-btn {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .35rem .625rem !important;
    border: 1px solid var(--vt-border-base, #e5e7eb) !important;
    border-radius: 8px !important;
    background: var(--vt-bg-surface, #f9fafb) !important;
    color: var(--vt-text-muted, #6b7280) !important;
    font-size: .75rem;
    cursor: pointer;
    transition: background 130ms, border-color 130ms, color 130ms;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .vt-cmd-trigger-btn:hover {
    background: var(--vt-bg-surface-hover, #f3f4f6) !important;
    border-color: var(--vt-border-medium, #d1d5db) !important;
    color: var(--vt-text-primary, #111827) !important;
  }
  [data-vehitotal-theme="dark"] .vt-cmd-trigger-btn {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #9ca3af !important;
  }
  [data-vehitotal-theme="dark"] .vt-cmd-trigger-btn:hover {
    background: rgba(255,255,255,.1) !important;
    color: #f9fafb !important;
  }
  .vt-cmd-trigger-hint {
    display: flex;
    align-items: center;
    gap: .15rem;
  }
  .vt-cmd-trigger-hint kbd {
    font-size: .6rem;
    font-weight: 600;
    font-family: monospace;
    background: var(--vt-bg-elevated, #fff);
    border: 1px solid var(--vt-border-base, #e5e7eb);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: .1rem .35rem;
    color: var(--vt-text-muted, #9ca3af);
    line-height: 1.4;
  }
  [data-vehitotal-theme="dark"] .vt-cmd-trigger-hint kbd {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.15);
  }
  @media (max-width: 900px) {
    .vt-cmd-trigger-hint { display: none; }
    .vt-cmd-trigger-btn { padding: .375rem .5rem !important; }
  }
  @media (max-width: 600px) {
    .vt-cmd-trigger-btn { display: none; }
  }

  /* ════════════════════════════════════════════════════════════════════════
     USER DROPDOWN — Ultra Premium Redesign
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Dropdown container ── */
  .vt-user-dropdown.dropdown-menu {
    min-width: 280px;
    padding: .5rem;
    border-radius: 16px;
    border: 1px solid var(--vt-border-base, #e5e7eb);
    box-shadow:
      0 4px 6px -1px rgba(0,0,0,.07),
      0 20px 48px -8px rgba(0,0,0,.14),
      0 0 0 1px rgba(255,255,255,.6) inset;
    background: var(--vt-bg-elevated, #fff);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  [data-vehitotal-theme="dark"] .vt-user-dropdown.dropdown-menu {
    background: rgba(17,24,39,.92);
    border-color: rgba(255,255,255,.1);
    box-shadow:
      0 4px 6px -1px rgba(0,0,0,.3),
      0 20px 48px -8px rgba(0,0,0,.5),
      0 0 0 1px rgba(255,255,255,.06) inset;
  }

  /* ── Identity header ── */
  .vt-udh-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .875rem 1rem;
    border-bottom: 1px solid var(--vt-border-base, #e5e7eb);
    margin-bottom: .25rem;
  }
  [data-vehitotal-theme="dark"] .vt-udh-inner { border-color: rgba(255,255,255,.08); }

  .vt-udh-avatar img {
    width: 40px; height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--vt-border-base, #e5e7eb);
  }
  [data-vehitotal-theme="dark"] .vt-udh-avatar img { border-color: rgba(255,255,255,.12); }
  .vt-udh-name  { font-size: .875rem; font-weight: 700; color: var(--vt-text-primary, #111827); }
  .vt-udh-email { font-size: .75rem;  color: var(--vt-text-muted, #6b7280); margin-top: .1rem; }
  .vt-udh-zone  {
    font-size: .6875rem; color: #f8790c; margin-top: .25rem;
    display: flex; align-items: center; gap: .3rem; font-weight: 600;
  }
  .vt-udh-zone i { font-size: .55rem; }

  /* ── Theme switcher section ── */
  .vt-theme-switcher-li { padding: .25rem 0; list-style: none; }

  .vt-theme-switcher {
    margin: .25rem .375rem .375rem;
    padding: .7rem .875rem .75rem;
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(248,121,12,.04) 0%, rgba(99,102,241,.04) 100%);
    border: 1px solid var(--vt-border-base, #e5e7eb);
    position: relative;
    overflow: hidden;
  }
  .vt-theme-switcher::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(248,121,12,.06) 0%,
      transparent 50%,
      rgba(99,102,241,.06) 100%
    );
    pointer-events: none;
  }
  [data-vehitotal-theme="dark"] .vt-theme-switcher {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
  }
  [data-vehitotal-theme="dark"] .vt-theme-switcher::before {
    background: linear-gradient(135deg, rgba(251,146,60,.06), transparent 50%, rgba(129,140,248,.08) 100%);
  }

  .vt-theme-switcher__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
  }
  .vt-theme-switcher__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--vt-text-muted, #9ca3af);
  }
  .vt-theme-switcher__title i {
    font-size: .625rem;
    background: linear-gradient(135deg, #f8790c, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .vt-theme-badge {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .15rem .5rem;
    border-radius: 99px;
    background: var(--vt-bg-surface, #f3f4f6);
    color: var(--vt-text-secondary, #374151);
    border: 1px solid var(--vt-border-base, #e5e7eb);
    transition: all 300ms ease;
  }
  [data-vehitotal-theme="dark"] .vt-theme-badge {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #d1d5db;
  }

  /* ── 2-way Pill control: Claro / Oscuro ── */
  .vt-theme-pill {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--vt-bg-surface, #f3f4f6);
    border-radius: 10px;
    padding: 3px;
    gap: 0;
    border: 1px solid var(--vt-border-base, #e5e7eb);
    overflow: hidden;
  }
  [data-vehitotal-theme="dark"] .vt-theme-pill {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
  }

  /* Slider deslizante */
  .vt-theme-pill__track-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 2px);
    height: calc(100% - 6px);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
    transition:
      left 280ms cubic-bezier(.34,1.56,.64,1),
      background 300ms ease,
      box-shadow 300ms ease;
    pointer-events: none;
  }
  /* Posiciones del slider */
  .vt-theme-pill[data-active="light"] .vt-theme-pill__track-slider { left: 3px; }
  .vt-theme-pill[data-active="dark"]  .vt-theme-pill__track-slider { left: calc(50% + 1px); }

  /* Colores del slider según modo activo */
  .vt-theme-pill[data-active="light"] .vt-theme-pill__track-slider {
    background: linear-gradient(135deg, #fff9f0 0%, #fff 60%);
    box-shadow: 0 1px 3px rgba(248,121,12,.2), 0 4px 12px rgba(248,121,12,.12);
  }
  .vt-theme-pill[data-active="dark"] .vt-theme-pill__track-slider {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    box-shadow: 0 1px 3px rgba(99,102,241,.3), 0 4px 12px rgba(99,102,241,.2);
  }
  [data-vehitotal-theme="dark"] .vt-theme-pill[data-active="light"] .vt-theme-pill__track-slider {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    box-shadow: 0 1px 3px rgba(245,158,11,.3), 0 4px 12px rgba(245,158,11,.2);
  }

  /* Botones de opción — layout horizontal compacto */
  .vt-theme-pill__opt {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .25rem;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vt-text-muted, #9ca3af);
    transition: color 220ms ease, transform 180ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .vt-theme-pill__opt i {
    font-size: .875rem;
    transition: transform 350ms cubic-bezier(.34,1.56,.64,1), color 220ms ease;
    line-height: 1;
  }
  .vt-theme-pill__opt:hover { color: var(--vt-text-secondary, #374151); }
  [data-vehitotal-theme="dark"] .vt-theme-pill__opt:hover { color: #e5e7eb; }

  /* Estado activo */
  .vt-theme-pill__opt[aria-pressed="true"][data-vt-theme-opt="light"] { color: #c2501e; }
  .vt-theme-pill__opt[aria-pressed="true"][data-vt-theme-opt="light"] i {
    color: #f8790c;
    transform: rotate(20deg) scale(1.15);
    filter: drop-shadow(0 0 4px rgba(248,121,12,.5));
  }
  .vt-theme-pill__opt[aria-pressed="true"][data-vt-theme-opt="dark"] { color: #a5b4fc; }
  .vt-theme-pill__opt[aria-pressed="true"][data-vt-theme-opt="dark"] i {
    color: #818cf8;
    transform: rotate(-20deg) scale(1.15);
    filter: drop-shadow(0 0 5px rgba(129,140,248,.65));
  }
  [data-vehitotal-theme="dark"] .vt-theme-pill__opt[aria-pressed="true"][data-vt-theme-opt="light"] { color: #fcd34d; }
  [data-vehitotal-theme="dark"] .vt-theme-pill__opt[aria-pressed="true"][data-vt-theme-opt="light"] i { color: #fbbf24; }

  /* ── Dropdown items ── */
  .vt-udropdown-divider {
    margin: .375rem .375rem;
    border-color: var(--vt-border-base, #e5e7eb);
  }
  [data-vehitotal-theme="dark"] .vt-udropdown-divider { border-color: rgba(255,255,255,.08); }

  .vt-udropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vt-text-primary, #111827);
    text-decoration: none;
    transition: background 140ms, color 140ms;
    margin: 0 .375rem;
    cursor: pointer;
  }
  .vt-udropdown-item:hover {
    background: var(--vt-bg-surface, #f3f4f6);
    color: var(--vt-text-primary, #111827);
    text-decoration: none;
  }
  [data-vehitotal-theme="dark"] .vt-udropdown-item { color: #e5e7eb; }
  [data-vehitotal-theme="dark"] .vt-udropdown-item:hover { background: rgba(255,255,255,.07); color: #fff; }

  .vt-udropdown-item__icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
  }
  .vt-udropdown-item__icon--orange { background: rgba(248,121,12,.1);  color: #f8790c; }
  .vt-udropdown-item__icon--indigo { background: rgba(99,102,241,.1);   color: #6366f1; }
  .vt-udropdown-item__icon--red    { background: rgba(239, 68, 68,.1); color: #ef4444; }
  [data-vehitotal-theme="dark"] .vt-udropdown-item__icon--orange { background: rgba(248,121,12,.18); }
  [data-vehitotal-theme="dark"] .vt-udropdown-item__icon--indigo { background: rgba(99,102,241,.2); color: #a5b4fc; }
  [data-vehitotal-theme="dark"] .vt-udropdown-item__icon--red    { background: rgba(239,68,68,.18); }

  .vt-udropdown-item--danger { color: #ef4444 !important; }
  .vt-udropdown-item--danger:hover { background: rgba(239,68,68,.08) !important; }
  [data-vehitotal-theme="dark"] .vt-udropdown-item--danger { color: #fca5a5 !important; }
  [data-vehitotal-theme="dark"] .vt-udropdown-item--danger:hover { background: rgba(239,68,68,.15) !important; }

  /* ════════════════════════════════════════════════════════════════════════
     VIEW TRANSITIONS API — Efecto morfológico de círculo al cambiar tema
     ════════════════════════════════════════════════════════════════════════ */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 500ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(root) {
    animation-name: vt-theme-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: vt-theme-circle-in;
  }
  @keyframes vt-theme-circle-in {
    from { clip-path: circle(0% at var(--vt-tx, 50%) var(--vt-ty, 50%)); }
    to   { clip-path: circle(150% at var(--vt-tx, 50%) var(--vt-ty, 50%)); }
  }
  @keyframes vt-theme-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  /* Sin animación de transición para quienes prefieren reducir movimiento */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }