/* ==========================================================================
   DIVISORES DE PANEL
   ==========================================================================
   El armazón declara tres pistas —`--ancho-carpetas`, `--ancho-lista` y lo
   que sobra para la lectura— y hasta ahora esas medidas eran del producto,
   no de quien lo usa. Un divisor por frontera las pone en su mano: se
   arrastra, se empuja con las flechas y se restablece con doble clic.

   El valor se escribe INLINE en `#app`, que es lo único que gana sobre las
   hojas por vista: `view-contactos` pide 34rem de lista, `view-panel` 21rem
   y `view-busqueda` 42rem, y todas deben ceder ante una medida elegida a
   mano. Por lo mismo el inline se RETIRA en tableta y teléfono, donde el
   armazón se repliega solo (§ app.css, 68rem y 50rem) y una medida de
   escritorio dejaría el rail estirado encima de la lista.

   El divisor no se tiñe de azul ni en foco: en este producto el azul dice
   «sin leer» y nada más. Se marca con `--regla-fuerte`, que es la misma
   familia de la regla que ya separa los paneles, sólo que más presente.
   ========================================================================== */

.app { position: relative; }

.divisor {
  position: absolute;
  top: var(--altura-barra);
  bottom: 0;
  inline-size: 11px;              /* zona de agarre: el dedo y el ratón */
  margin-inline-start: -5px;      /* centrada sobre la línea de la rejilla */
  z-index: 20;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;             /* el arrastre es nuestro, no del scroll */
}

/* La línea que se ve. Sólo 1px, y sólo cuando se la busca: en reposo el
   divisor es invisible y la frontera sigue siendo la regla del panel. */
.divisor::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 5px;
  inline-size: 1px;
  background: transparent;
  transition: background-color 120ms ease, inline-size 120ms ease;
}

.divisor:hover::after,
.divisor:focus-visible::after,
.divisor[data-arrastrando]::after {
  background: var(--regla-fuerte);
  inline-size: 2px;
  inset-inline-start: 4.5px;
}

.divisor:focus-visible {
  outline: var(--foco-anillo) solid var(--foco);
  outline-offset: calc(var(--foco-separacion) * -1);
}

@media (prefers-reduced-motion: reduce) {
  .divisor::after { transition: none; }
}

/* Mientras se arrastra, toda la ventana lleva el cursor y nada se selecciona:
   sin esto, cruzar el registro con el botón apretado pinta sesenta renglones
   de azul de selección y el cursor parpadea entre flecha y barra de texto. */
body.redimensionando,
body.redimensionando * {
  cursor: col-resize !important;
  user-select: none;
}

/* -- Dónde se para cada uno ------------------------------------------------
   Sobre la línea de la rejilla, calculada con los mismos tokens que la
   dibujan. Si el token cambia —una vista con otra lista, el repliegue de
   tableta—, el divisor lo sigue sin que nadie lo mueva. */
.divisor--carpetas { inset-inline-start: var(--ancho-carpetas); }
.divisor--lista    { inset-inline-start: calc(var(--ancho-carpetas) + var(--ancho-lista)); }

/* -- Cuándo no está --------------------------------------------------------
   Sin mensaje abierto la lectura vale 0 y la lista se lleva el ancho entero
   (app.css §3): ahí `--ancho-lista` no manda ninguna pista y arrastrar no
   movería nada. El de carpetas se va en tableta, donde el rail ya está
   plegado a 4rem por el media query y estirarlo lo rompería. Y los dos se van
   en teléfono, que enseña un panel a la vez. */
.app:has(> .app__lectura.panel--lectura-cerrada) .divisor--lista { display: none; }

@media (max-width: 68rem) {
  .divisor--carpetas { display: none; }
}

@media (max-width: 50rem) {
  .divisor { display: none; }
}