/* === APPLE DARK PRESET (solo valores) === */
html.dm-init {
   --bg: #000000;
   --ink: #F5F5F7;
   --muted: #A1A1A6;
   --card: #1C1C1E;
   --border: #2C2C2E;

   --sb-bg: #000000;
   --sb-ink: #F5F5F7;
   --sb-muted: #A1A1A6;
   --sb-border: #2C2C2E;
   --sb-hover-bg: rgba(255, 255, 255, .06);
   --sb-active-bg: rgba(10, 132, 255, .16);
   --sb-active-ink: #FFFFFF;

   color-scheme: dark;
}

html.dm-init body {
   transition: none !important;
}

:root {
   --auth-hero-url: url("../img/login-hero-default.jpg");

   --ao-burger-w: 30px;
   /* ancho botón */
   --ao-burger-h: 22px;
   /* alto botón */
   --ao-burger-bar: 3px;
   /* grosor líneas */
   --ao-burger-radius: 999px;

   --ao-burger-inset: 1px;
   /* “aire” lateral de las barras */
   --ao-burger-ms: 260ms;
   /* velocidad del icono */
   --ao-burger-ease: cubic-bezier(.22, .9, .22, 1);
}

.ao-minw-0 {
   min-width: 0;
}

.ao-rounded-sm {
   border-radius: var(--rad-sm);
}

#modalFrame {
   width: 100%;
   height: 70vh;
   border: 0;
}

.cmdk-dialog {
   max-width: 520px;
}

/* =========================================================
   Sidebar burger toggle (estado REAL vía body classes)
   - Desktop: X cuando NO está colapsada (body:not(.sb-collapsed))
   - Mobile:  X cuando está abierta (body.sb-open)
========================================================= */

#sidebarToggle.ao-burger {
   position: relative;
   width: var(--ao-burger-w);
   height: var(--ao-burger-h);
   background: transparent;
   border: 0;
   padding: 0;
   cursor: pointer;
   display: inline-block;
   flex: 0 0 auto;

   /* clave: barras heredan color y no dependes de “black/white” */
   color: var(--ink);
}

#sidebarToggle.ao-burger:focus-visible {
   outline: 2px solid var(--brand-2);
   outline-offset: 4px;
   border-radius: 12px;
}

#sidebarToggle.ao-burger .ao-burger__bar {
   display: block;
   position: absolute;

   /* “aire” lateral configurable */
   left: var(--ao-burger-inset);
   width: calc(100% - (var(--ao-burger-inset) * 2));

   height: var(--ao-burger-bar);
   background: currentColor;
   border-radius: var(--ao-burger-radius);
   opacity: 1;

   /* clave: X centrada (adiós a la “media cruz”) */
   transform-origin: 50% 50%;

   transition:
      transform var(--ao-burger-ms) var(--ao-burger-ease),
      top var(--ao-burger-ms) var(--ao-burger-ease),
      bottom var(--ao-burger-ms) var(--ao-burger-ease),
      width var(--ao-burger-ms) var(--ao-burger-ease),
      opacity var(--ao-burger-ms) var(--ao-burger-ease);
}

/* Estado ☰ */
#sidebarToggle.ao-burger .ao-burger__bar:nth-child(1) {
   top: 0;
}

#sidebarToggle.ao-burger .ao-burger__bar:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
}

#sidebarToggle.ao-burger .ao-burger__bar:nth-child(3) {
   top: auto;
   bottom: 0;
}

/* ========== Estado ✕ (Mobile abierto) ========== */
body.sb-open #sidebarToggle.ao-burger .ao-burger__bar:nth-child(1) {
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
}

body.sb-open #sidebarToggle.ao-burger .ao-burger__bar:nth-child(2) {
   width: 0;
   opacity: 0;
}

body.sb-open #sidebarToggle.ao-burger .ao-burger__bar:nth-child(3) {
   bottom: auto;
   top: 50%;
   transform: translateY(-50%) rotate(-45deg);
}

/* ========== Estado ✕ (Desktop expandida = NO colapsada) ========== */
@media (min-width: 992px) {
   body:not(.sb-collapsed) #sidebarToggle.ao-burger .ao-burger__bar:nth-child(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
   }

   body:not(.sb-collapsed) #sidebarToggle.ao-burger .ao-burger__bar:nth-child(2) {
      width: 0;
      opacity: 0;
   }

   body:not(.sb-collapsed) #sidebarToggle.ao-burger .ao-burger__bar:nth-child(3) {
      bottom: auto;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
   }
}

@media (prefers-reduced-motion: reduce) {
   #sidebarToggle.ao-burger .ao-burger__bar {
      transition: none;
   }
}