/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   NUNIO · PANEL LATERAL · el componente único para las ventanas flotantes (Pablo, 13/10)
   ──────────────────────────────────────────────────────────────────────────────────────────────────
   QUÉ ES: las nueve ventanas flotantes del CRM —embudo, producto, agente, cita, venta, documento
   de conocimiento, los dos asistentes y la vista previa de sugerencias— dejan de abrirse centradas
   sobre la pantalla y pasan a abrirse como un panel pegado al borde DERECHO, de alto completo.

   🔴 NO ES UN COMPONENTE NUEVO: ES EL MISMO. Las nueve ya compartían exactamente la misma
      estructura —`.modal-overlay` > `.modal` > `.modal-header` / `.modal-body` / `.modal-footer`,
      definida en `style.css:315-323`—. Así que el panel no se construyó de cero ni se copió el
      contenido a otra caja: se le agrega la clase `panel-lateral` al fondo y ESTE archivo cambia
      cómo se coloca esa misma caja. Por eso el guardado, los campos, las pestañas internas y los
      botones son los de antes, línea por línea: no se los tocó.

   ⚠️ POR QUÉ CON `!important`. Las cajas traen el ancho escrito en el atributo `style` del propio
      elemento (`style="max-width:740px;width:95%"`), y tres de ellas también el alto del cuerpo
      (`style="max-height:70vh"`). Un estilo en línea le gana a cualquier hoja, sin importar el
      orden ni la especificidad: la única forma de recolocarlas sin editar las nueve etiquetas a
      mano es `!important`. Está acotado a las cuatro propiedades que chocan —ancho, alto, radio y
      el tope del cuerpo—, y SOLO dentro de `.modal-overlay.panel-lateral`.

   ⚠️ TODOS LOS SELECTORES SON DE HIJO DIRECTO (`>`). En el catálogo hay otra tarjeta que reusa la
      clase `.modal-body` sin ser una ventana flotante (`.masivo-panel .modal-body`, la barra de
      edición masiva). Con `>` y el `.panel-lateral` por delante, nada de esto la alcanza.

   LAS DECISIONES DE DISEÑO, Y POR QUÉ
   · ANCHO `min(860px, 96vw)`. «Amplio» pero no a pantalla completa: a 1366 quedan ~500 px de la
     lista visibles a la izquierda, así que se sigue viendo QUÉ fila se está editando. Y nunca es
     más angosto que antes —las cajas eran `min(740px, 95vw)`—, que es lo que garantiza que las
     seis pestañas del embudo y las siete del producto sigan entrando sin recortarse.
   · RADIO SOLO EN LAS DOS ESQUINAS IZQUIERDAS. El panel está pegado al borde de la ventana; un
     radio a la derecha lo haría parecer una tarjeta flotante mal puesta, no un panel.
   · UNA SOLA ANIMACIÓN, y responde a una acción: entra deslizándose desde la derecha cuando se
     abre. Nada más se mueve. Con `prefers-reduced-motion` aparece sin desplazarse.
   · NI UN COLOR NUEVO, NI UN TAMAÑO DE LETRA NUEVO, NI UN RELLENO NUEVO. Superficie `--ui-panel`,
     separadores `--ui-linea2`, radio `--radio`: los del sistema. La densidad no se toca.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · EL FONDO: deja de centrar, empuja al borde derecho ────────────────────────────────────── */
.modal-overlay.panel-lateral {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

/* ── 2 · LA CAJA: columna de alto completo pegada a la derecha ─────────────────────────────────── */
.modal-overlay.panel-lateral > .modal {
  width: min(860px, 96vw) !important;
  max-width: none !important;
  max-height: none !important;
  height: 100%;
  min-height: 0;
  border-radius: var(--radio, 8px) 0 0 var(--radio, 8px) !important;
  /* La sombra sale hacia la izquierda, que es el único lado donde hay pantalla detrás. */
  box-shadow: -14px 0 36px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}

/* `.open` es la clase que YA usaban las nueve pantallas para mostrar la ventana: el panel se
   engancha a ella, así que ningún JavaScript cambió. */
.modal-overlay.panel-lateral.open > .modal {
  transform: translateX(0);
}

/* ── 3 · EL CUERPO: es lo único que se desplaza ────────────────────────────────────────────────── */
.modal-overlay.panel-lateral > .modal > .modal-body {
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ── 4 · CABECERA Y PIE: quietos, arriba y abajo ───────────────────────────────────────────────── */
/* `.modal-header` y `.modal-footer` ya traen `flex-shrink:0` de `style.css`; dentro de una columna
   de alto completo eso solo alcanza para fijarlos. Acá se les deja el fondo explícito para que el
   contenido que se desplaza por detrás no se transparente en ningún tema. */
.modal-overlay.panel-lateral > .modal > .modal-header,
.modal-overlay.panel-lateral > .modal > .modal-footer {
  background: var(--ui-panel, #fff);
}

/* ── 5 · EN EL CELULAR, TODO EL ANCHO ──────────────────────────────────────────────────────────── */
/* Por debajo de 640 px no queda pantalla detrás que valga la pena mostrar, así que el panel la
   ocupa entera y pierde el radio: a pantalla completa, una esquina redondeada es un hueco. */
@media (max-width: 640px) {
  .modal-overlay.panel-lateral > .modal {
    width: 100% !important;
    border-radius: 0 !important;
  }
}

/* ── 6 · QUIEN PIDIÓ MENOS MOVIMIENTO, NO VE MOVIMIENTO ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.panel-lateral > .modal {
    transition: none;
    transform: translateX(0);
  }
}