/* ==========================================================================
   ventanas.css — el aspecto de las ventanas que se agarran y se minimizan.

   La logica vive en app/ventanas.js (lee su cabecera: la causa y el diseno).
   Aqui solo hay estilo, y solo sobre lo que ese modulo marca:

     [data-ventana]        la caja es una ventana (el valor dice donde va su boton)
     [data-vent-asa]       lo que se agarra
     [data-vent-movida]    la caja tiene desplazamiento (--vent-x, --vent-y)
     [data-vent-min]       la caja esta minimizada
     [data-vent-queda]     hijo que se queda a la vista al minimizar
     .vent-raiz-min        el velo de una caja minimizada

   En (max-width: 900px) el modulo no marca nada, asi que nada de esto aplica.
   ========================================================================== */

[data-ventana] {
  /* Tamano del boton (el mismo que el × de cada caja) y su sitio cuando va
     absoluto. Cada caja ajusta lo suyo mas abajo. */
  --vent-t: 36px;
  --vent-top: var(--space-3);
  --vent-der: var(--space-3);
}

/* Una caja sin posicion no es el origen de sus hijos absolutos (el × del
   indice del tutorial caia en la esquina de la PANTALLA, no de su caja). */
[data-ventana][data-vent-rel] { position: relative; }

/* `translate`, no `transform`: se SUMA a la animacion de entrada del cajon y de
   la hoja (transform) y al left/top que pone el motor del tutorial. Solo cuando
   hay desplazamiento: `translate` distinto de `none` crea un contexto de apilado
   y no hace falta pagarlo en una caja que no se ha movido. */
[data-ventana][data-vent-movida] { translate: var(--vent-x, 0px) var(--vent-y, 0px); }

/* ------------------------------------------------------------------ asa --- */

[data-vent-asa] {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
[data-vent-asa] button { cursor: pointer; }
[data-vent-asa] :is(input, textarea, select) {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
[data-ventana][data-vent-arrastrando],
[data-ventana][data-vent-arrastrando] [data-vent-asa],
body.vent-arrastrando { cursor: grabbing; }
/* Mientras se arrastra, el texto de debajo no se selecciona. */
body.vent-arrastrando { user-select: none; -webkit-user-select: none; }

/* ----------------------------------------------------------------- boton -- */

.vent__min {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vent-t, 36px);
  height: var(--vent-t, 36px);
  padding: 0;
  border: 0;
  /* 8 px y no el token de pastilla: el dueno prohibio las pastillas. */
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.vent__min:hover { background: var(--surface-2); color: var(--text); }
.vent__min:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.vent__ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vent__ico--rest { display: none; }
.vent__min[aria-expanded="false"] .vent__ico--min { display: none; }
.vent__min[aria-expanded="false"] .vent__ico--rest { display: block; }

/* Dentro de la cabecera, junto al ×. Las cabeceras de la hoja, el cajon y el
   inicio reparten con `space-between`: sin el margen automatico el boton
   quedaba en medio, entre el titulo y el ×. */
.vent__min--flujo { margin-left: auto; margin-right: var(--space-1); }

/* Absoluto: a la izquierda del × (que tambien es absoluto) o en la esquina. */
.vent__min--abs {
  position: absolute;
  top: var(--vent-top);
  right: var(--vent-der);
  z-index: 1;
}

/* Lo que mide y donde va el boton en cada caja: lo mismo que su ×. */
.hoja__caja[data-ventana],
.cajon__caja[data-ventana] { --vent-t: 36px; }
.inicio__caja[data-ventana] { --vent-t: 44px; }

/* El × de estas es absoluto: el boton se pone a su izquierda. */
.tut-aviso[data-ventana] { --vent-t: 36px; --vent-top: 6px; --vent-der: 46px; }
.tut__tarjeta[data-ventana],
.tut-indice__caja[data-ventana] { --vent-t: 44px; --vent-top: 10px; --vent-der: 58px; }
/* El titulo no pasa por debajo del × ni del boton. */
.tut-aviso[data-ventana] [data-vent-asa] { padding-right: 88px; }
.tut__tarjeta[data-ventana] [data-vent-asa] { padding-right: 112px; }
.tut-indice__caja[data-ventana] [data-vent-asa] { padding-right: 112px; }

/* Sin ×: el boton va a la esquina y el titulo le deja el hueco. */
.dialogo__caja[data-ventana] { --vent-top: 14px; --vent-der: 14px; }
.arranque__caja[data-ventana] { --vent-top: 14px; --vent-der: 14px; }
.atajos-dialogo__caja[data-ventana] { --vent-top: 10px; --vent-der: 10px; }
.dialogo__caja[data-ventana] > [data-vent-asa],
.arranque__caja[data-ventana] [data-vent-asa],
.atajos-dialogo__caja[data-ventana] [data-vent-asa] { padding-right: 48px; }

/* Simular: el boton es el ultimo de la cabecera; los cuadros por segundo se
   quedan pegados al titulo sin empujarlo. */
.sim[data-ventana] { --vent-t: 28px; }
.sim__cabecera .vent__min { align-self: center; margin-left: auto; }

/* ------------------------------------------------------------ minimizada -- */

/* La caja se queda en su cabecera, en su sitio. `align-self` evita que el cajon
   y la hoja (hijos de un flex que estira) sigan ocupando todo el alto. */
[data-ventana][data-vent-min] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  align-self: flex-start;
  padding-block: var(--space-2);
}
[data-ventana][data-vent-min] > :not([data-vent-queda]) { display: none !important; }
[data-ventana][data-vent-min] > [data-vent-asa],
[data-ventana][data-vent-min] > [data-vent-queda] { margin-bottom: 0; }
/* Dentro de la cabecera de atajos solo queda el titulo, no el buscador. */
.atajos-dialogo__caja[data-vent-min] .atajos-dialogo__campo { display: none; }
/* La tarjeta del tutorial lleva su × dentro de la fila de acciones. */
.tut__tarjeta[data-vent-min] .tut__acciones > :not(.tut__cerrar):not(.vent__min) { display: none; }
.tut__tarjeta[data-vent-min] .tut__acciones { margin: 0; }
/* Las cajas que no tienen relleno propio (hoja, cajon) no lo ganan. */
.hoja__caja[data-vent-min],
.cajon__caja[data-vent-min] {
  padding-block: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* El velo de una caja minimizada no tapa ni bloquea: el lienzo responde. La
   caja misma si recibe el puntero. En el tutorial, ademas del contenedor, el
   velo oscuro con su agujero. */
.vent-raiz-min {
  background: transparent !important;
  pointer-events: none !important;
}
.vent-raiz-min > .tut__velo {
  background: transparent !important;
  pointer-events: none !important;
}
.vent-raiz-min > [data-ventana] { pointer-events: auto; }