/* Hojas modales que entran desde abajo (js/ui-sheet.js).

   Cerrada, la hoja queda `visibility: hidden` y no `display: none`: visibility
   se anima junto con el transform, y —a diferencia de display— HEREDA, así que
   sus contenidos quedan fuera del orden de foco y un test puede afirmar sobre
   un descendiente. Con display, getComputedStyle(descendiente).display sigue
   devolviendo "block" aunque el ancestro esté oculto, que es el agujero que ya
   mordió a este proyecto más de una vez.

   `position: fixed` sobrevive a estar dentro de un contenedor con
   `overflow: auto` — solo un ancestro con transform/filter/contain lo
   reanclaría. De ahí la prohibición que ya rige para `.section` y que ahora
   también rige para el área scrolleable de la configuración. */

.sheet-veil {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 30;
}

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(100%, 640px);
  max-height: 82%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  transform: translate(-50%, 100%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.sheet.is-open {
  transform: translate(-50%, 0);
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition-duration: 0.01s; }
}

/* El asa es la ÚNICA superficie de arrastre: el cuerpo scrollea, y un gesto
   que a veces cierra y a veces scrollea según dónde caiga el dedo es peor que
   no tener el gesto. touch-action: none o el navegador se queda el gesto
   antes de que lleguen los pointermove. */
.sheet__grip {
  flex: none;
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0 var(--space-1);
  touch-action: none;
  cursor: grab;
}

.sheet__handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
}

.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-2);
}

.sheet__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-head);
  font-weight: 600;
}

.sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Que el rebote del scroll interno no se propague al documento. */
  overscroll-behavior: contain;
  padding: 0 var(--space-3);
  /* El inset del home indicator le toca a la hoja, que es lo más abajo de la
     pantalla mientras está abierta. */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

/* ---- Contenido de las hojas ---------------------------------------------- */

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Alineados a la izquierda y de ancho completo: son una lista de acciones que
   se leen en columna, no una botonera. */
.sheet-action {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
}

.sheet-action--danger { color: var(--color-danger); }

.sheet-subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sheet-note {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-hint);
  line-height: 1.4;
}

/* ---- Panel de marcadores ------------------------------------------------- */

.markers-panel__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.markers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.markers-row__code,
.markers-row__alt {
  flex: none;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--fs-meta);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.4);
}

.markers-row__alt {
  color: var(--color-text-muted);
  /* La forma explícita es la salida de emergencia, no la principal: va
     después del texto y en segundo plano. */
  order: 3;
  font-size: var(--fs-hint);
}

.markers-row__what {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: var(--fs-hint);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.markers-panel__note {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-hint);
  line-height: 1.45;
}

/* Acá vivía `.markers-panel__colors`, la COSTURA del bloque de colores con la
   tabla de sintaxis: un borde superior que no describía el bloque sino que tenía
   un hermano arriba del que separarse. Se fue con el bloque, que desde la 2.11.0
   se monta en #ajustes y no en esta hoja — allá abre su propia tarjeta, con el
   rótulo arriba y el gap de `.card` separando, así que su costura de allá no
   necesita ninguna regla. Que el hermano lo elija la superficie que monta es
   justamente lo que hace que la regla se vaya con la mudanza en vez de quedarse
   de recuerdo: ver la cabecera de css/fmt-colors.css. */

/* ---- Escritorio ---------------------------------------------------------- */

/* A partir de 1024px el panel de marcadores deja de ser hoja: vuelve al flujo,
   donde ya está en el DOM (dentro de `.setup-body`, después de la lista de
   slides — era «el paso «Texto»» hasta que la 2.11.0 demolió el riel), y se
   pone la piel de una tarjeta. `position: fixed` → `static` es todo lo que hace
   falta: ni una línea de JS, ni un nodo movido entre padres, ni una copia.

   Y ES EL CONTRAEJEMPLO de la otra mudanza de escritorio, la de #ajustes, que
   sí mueve un nodo con JS: lo que hace que acá alcance con CSS es que este panel
   vive DENTRO de #view-setup y no se oculta nunca por su cuenta, así que sus dos
   presentaciones son la misma caja en otra posición. #ajustes es una RUTA y su
   nodo vive en una .view que está `hidden` cuando la ruta es otra; ahí no hay
   media query que valga. Citar este caso al derecho invita a escribir JS para
   algo que el CSS ya hace solo, y citarlo al revés invita a lo contrario.

   VA EN ESTE ARCHIVO y no en setup.css: `[data-sheet="markers"]` y `.sheet`
   tienen la misma especificidad, así que decide el orden de fuente, y
   sheet.css se carga después. Puesto en setup.css la regla no se aplicaba y el
   panel seguía siendo una hoja invisible. */
@media (min-width: 1024px) {
  [data-sheet="markers"] {
    position: static;
    transform: none;
    visibility: visible;
    width: auto;
    max-height: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    z-index: auto;
    transition: none;
  }

  [data-sheet="markers"] .sheet__grip,
  [data-sheet="markers"] .sheet__close { display: none; }
  [data-sheet="markers"] .sheet__body { overflow: visible; padding-bottom: var(--space-3); }
}