@use "tokens" as *;

// Barra lateral derecha contextual de la web pública (AppRightSidebar.vue):
// cada vista la registra con useAppRightSidebar() y App.vue la monta una vez
// dentro de .site-main. SIEMPRE fija a la derecha, POR DEBAJO de la cabecera
// fija del cascarón: arranca en --app-right-sidebar-top (el cascarón la fija
// a la altura real de su cabecera por breakpoint; sin fijarla, el borde
// superior) y llega hasta abajo. Así ni scrollea con la página ni "se acaba"
// en el footer, y la cabecera queda siempre a la vista y usable. Cerrada
// queda fuera de pantalla (translateX) y solo asoma el asa.
//
// El cascarón decide el hueco: con `--docked` (desplegada en ancho) da
// padding-right a .site-content/.app-footer vía body:has() — la cabecera NO
// lo necesita: la barra ya no la tapa. En estrecho el componente añade telón
// (también bajo la cabecera) y la barra se superpone (drawer).

// Ancho compartido con el cascarón (el hueco del contenido lo usa).
:root {
  --app-right-sidebar-width: 320px;
}

.app-right-sidebar {
  position: fixed;
  top: var(--app-right-sidebar-top, 0px);
  right: 0;
  bottom: 0;
  z-index: 40; // por debajo de la cabecera fija del cascarón (50)
  // En viewports mínimos deja sitio al asa (el telón cubre el resto).
  // OJO: 100% y no 100vw — el ancho porcentual de un fixed resuelve contra
  // el viewport REAL (sin la barra de scroll del navegador); con 100vw la
  // scrollbar, cuando aparece, robaba su ancho y el asa/cierre quedaba
  // fuera de pantalla en el tamaño más estrecho.
  width: min(var(--app-right-sidebar-width), 100% - 36px);
  transform: translateX(100%);
  transition: transform 0.25s ease;

  &--open {
    transform: translateX(0);
  }

  // El panel de verdad (el aside deja overflow visible para el asa).
  &__panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: $surface;
    border-left: 1px solid $border;
    overflow: hidden;
  }

  &__header {
    display: flex;
    align-items: center;
    gap: $space-2;
    height: 48px;
    padding: 0 $space-4;
    border-bottom: 1px solid $border;
    flex-shrink: 0;
  }

  &__title {
    flex: 1;
    font-size: $fs-14;
    font-weight: $k-fw-semibold;
    color: $text-1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__body {
    flex: 1;
    overflow-y: auto;
    padding: $space-4;
  }

  // Asa de abrir/cerrar, anclada al costado izquierdo de la barra (como la
  // de la RightSidebar del admin): al viajar CON la barra nunca se desancla
  // de ella. Con la barra cerrada asoma pegada al borde del viewport. El top
  // es RELATIVO al techo de la barra (que ya arranca bajo la cabecera): por
  // defecto asoma justo bajo ella; el cascarón puede moverla con
  // --app-right-sidebar-handle-top.
  &__handle {
    position: absolute;
    top: var(--app-right-sidebar-handle-top, #{$space-4});
    right: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 48px;
    padding: 0;
    background: $surface;
    border: 1px solid $accent-500;
    border-right: none;
    border-radius: $radius-md 0 0 $radius-md;
    color: $accent-500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover {
      background: $surface-2;
      color: $accent-600;
    }
  }

  // El contenido registrado (selects de filtros…) se apila a una columna.
  #app-right-sidebar-target {
    display: grid;
    gap: $space-3;
  }

  // Modo drawer (por debajo del umbral del componente): superpuesta al
  // contenido, con telón y cierre por asa, click fuera o Escape.
  &--drawer.app-right-sidebar--open {
    box-shadow: $shadow-lg;
  }
}

// Telón del drawer: bajo la cabecera (que sigue visible y clicable) y bajo
// la barra (40).
.app-right-sidebar-overlay {
  position: fixed;
  top: var(--app-right-sidebar-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(0 0 0 / 40%);
  z-index: 35;
}