/* ============================================================================
   Anime Studio - mobile.css
   TODA la capa responsive del editor: movil, tablet, puntero grueso y
   orientacion horizontal.

   Se carga DESPUES de tokens.css, main.css, editor.css, panels.css y
   timeline.css, asi que estas reglas mandan sobre la disposicion de escritorio
   sin necesidad de `!important` (salvo donde hay que ganarle a un estilo en
   linea escrito por JS: popovers y menus contextuales, marcados como tales).

   Contrato con ui/mobile.js (los escribe el, aqui solo se consumen):
     #app[data-layout]       desktop | tablet | mobile
     #app[data-orientation]  portrait | landscape
     #app[data-compact]      true = barra inferior + hojas + paneles ocultos
     #app[data-hand]         right | left (modo zurdo)
     #app[data-drawer]       open | closed
     #app[data-keyboard]     true mientras el teclado virtual esta desplegado
     #app[data-sheet]        id de la hoja abierta
     #app[data-ui-hidden]    true en modo "pantalla limpia" (lo pone runAction)
     --vvh                   alto del viewport VISUAL en px
     --kb-inset              alto que ocupa el teclado virtual en px

   Indice:
     1.  Tokens locales derivados
     2.  Base tactil (rebote, doble toque, alturas de 100dvh)
     3.  Disposicion compacta de #app
     4.  #mobile-bar
     5.  Capa de superposicion y velo
     6.  Hojas inferiores (bottom sheets)
     7.  Contenido de las hojas (paneles trasladados, menu, herramientas)
     8.  Cajon lateral (#toolbar) y su tirador
     9.  Tamano rapido
     10. Asidero de "pantalla limpia"
     11. Linea de tiempo compacta
     12. Dialogos a pantalla completa y popovers
     13. Modo zurdo
     14. Tablet
     15. Puntero grueso
     16. Orientacion horizontal
     17. Movimiento reducido y colores forzados
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS LOCALES DERIVADOS
   Todo sale de tokens.css. Lo unico que se declara aqui son valores que
   tokens.css no puede conocer (areas seguras del dispositivo y medidas del
   viewport visual, que escribe ui/mobile.js).
   ------------------------------------------------------------------------ */
:root {
  /* Muescas y barras del sistema (iPhone, Android con gestos). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Los reescribe ui/mobile.js en cada cambio del viewport visual. */
  --vvh: 100vh;
  --kb-inset: 0px;

  /* Alto real que ocupa la barra inferior, area segura incluida. */
  --bar-h-total: calc(var(--mobile-bar-h) + var(--safe-bottom));

  /* Geometria de las hojas inferiores.
     Se guarda la PROPORCION, no el alto ya calculado: `--vvh` lo reescribe
     ui/mobile.js sobre <html>, y un `calc()` que viviera en :root se resolveria
     con el valor de :root en lugar de con el actualizado. */
  --sheet-ratio: 0.92;
  --sheet-head-h: 46px;
  --sheet-grip-h: 22px;
  --sheet-radius: calc(var(--r-lg) * 2);

  /* Cajon lateral de herramientas. */
  --drawer-w: 76px;

  /* Duracion de las transiciones de hoja y cajon. Coincide a proposito con
     --t-med de tokens.css; se declara aparte porque hace falta el valor
     desnudo (sin curva) para retrasar `visibility`. */
  --t-drawer: 220ms;

  /* Velo de las superposiciones. Es el unico color propio de este fichero:
     tokens.css no tiene un token de scrim y no debe inventarse uno por regla. */
  --scrim: rgba(3, 6, 10, 0.55);

  /* Capas por encima de --z-overlay, por debajo de --z-dialog. */
  --z-sheet: calc(var(--z-overlay) + 1);
  --z-drawer: calc(var(--z-overlay) + 2);
  --z-handle: calc(var(--z-overlay) + 3);
}

/* `dvh` descuenta la barra de direcciones que aparece y desaparece al
   desplazarse; sin el, en iOS Safari la barra inferior queda medio tapada. */
@supports (height: 100dvh) {
  :root {
    --vvh: 100dvh;
  }
}

:root[data-theme="light"] {
  --scrim: rgba(16, 24, 40, 0.42);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --scrim: rgba(16, 24, 40, 0.42);
  }
}


/* ---------------------------------------------------------------------------
   2. BASE TACTIL
   ------------------------------------------------------------------------ */

/* Sin rebote elastico ni "tirar para recargar": el editor es una aplicacion,
   no un documento que se desplaza. */
html,
body {
  overscroll-behavior: none;
}

@media (pointer: coarse) {
  /* Mata el zoom por doble toque sin recurrir a user-scalable=no (que iOS
     ignora desde la version 10). Los descendientes que necesiten otra cosa
     -como #canvas-host, que pide `none`- lo declaran por su cuenta. */
  body {
    touch-action: manipulation;
  }

  /* Ningun arrastre del navegador sobre la interfaz. */
  .mobile-bar,
  .sheet,
  .mobile-layer {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* La barra movil solo existe en disposicion compacta. */
#mobile-bar {
  display: none;
}


/* ---------------------------------------------------------------------------
   3. DISPOSICION COMPACTA DE #app
   Una sola columna: barra de opciones fina arriba, lienzo ocupando todo lo que
   queda y barra de acciones abajo. Menu, estado, dock y linea de tiempo se
   retiran del flujo: se alcanzan como hojas.
   ------------------------------------------------------------------------ */
/* La rejilla de #app la define editor.css (menubar / topbar / workspace /
   tl-resizer / timeline / statusbar / mobilebar en una sola columna). Aqui NO
   se rehace: basta con retirar las areas que se convierten en hojas, y las
   filas `auto` se encogen solas.

   Lo unico que se le cambia es el relleno inferior: editor.css reserva ahi el
   area segura del dispositivo, pero en compacto esa franja debe pintarla la
   barra inferior (convencion de iOS: la superficie llega hasta el borde). */
#app[data-compact="true"] {
  padding-bottom: 0;
  height: 100vh;               /* respaldo si editor.css no llegara a cargar */
  height: 100dvh;
  overflow: hidden;
}

#app[data-compact="true"] > #menubar,
#app[data-compact="true"] > #statusbar,
#app[data-compact="true"] > #timeline-resizer,
#app[data-compact="true"] > #timeline {
  display: none;
}

/* Barra de opciones de la herramienta: una tira horizontal desplazable.
   Es lo unico del escritorio que se conserva arriba porque sin ella no se
   puede ni cambiar el tamano del pincel sin abrir una hoja. */
#app[data-compact="true"] > #topbar {
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#app[data-compact="true"] > #topbar::-webkit-scrollbar {
  display: none;
}

#app[data-compact="true"] #tool-options,
#app[data-compact="true"] #topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

#app[data-compact="true"] #topbar-right {
  margin-left: auto;
  padding-left: var(--sp-3);
}

/* El lienzo se queda con toda la fila `workspace`: al ocultar el dock y su
   tirador, y al sacar la columna de herramientas del flujo (cajon fijo), las
   columnas `auto` de #workspace colapsan a cero. #canvas-host conserva el
   `position: relative` de main.css (§20), del que dependen reglas y HUD. */
#app[data-compact="true"] #dock-resizer,
#app[data-compact="true"] > #workspace > #right-dock {
  display: none;
}


/* ---------------------------------------------------------------------------
   4. #mobile-bar
   ------------------------------------------------------------------------ */
#app[data-compact="true"] > #mobile-bar {
  position: relative;
  z-index: var(--z-dock);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-1);
  height: var(--bar-h-total);   /* incluye el area segura: la pinta la barra */
  padding: 0 var(--sp-2) var(--safe-bottom);
  background: var(--s-1);
  border-top: 1px solid var(--bd);
  box-shadow: 0 -1px 0 var(--bd-soft);

  /* Con el teclado desplegado la barra sube por encima de el en lugar de
     quedarse detras. Es un `transform`, asi que NO reajusta el lienzo. */
  transform: translate3d(0, calc(-1 * var(--kb-inset)), 0);
  transition: transform var(--t-med);
}

.mobile-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--touch-min);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-1);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-dim);
}

.mobile-btn:disabled,
.mobile-btn[aria-disabled="true"] {
  opacity: var(--op-disabled);
}

.mobile-btn[aria-expanded="true"],
.mobile-btn.is-active {
  background: var(--accent-soft);
  color: var(--fg);
}

/* Selector de dos clases a proposito: editor.css ya fija `.mobile-btn .icon`
   a 20px y hace falta la misma especificidad para subirlo. */
.mobile-btn .mobile-btn-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.mobile-btn-label {
  display: none;
  max-width: 100%;
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-btn-value {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--fg-mute);
}

/* Muestra de color principal, con damero debajo para los alfas bajos. */
.mobile-swatch {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  border: 1px solid var(--bd-strong);
  background-color: var(--swatch-color);
  background-image:
    linear-gradient(var(--swatch-color), var(--swatch-color)),
    conic-gradient(var(--checker-a) 0 25%, var(--checker-b) 0 50%,
                   var(--checker-a) 0 75%, var(--checker-b) 0);
  background-size: 100% 100%, 8px 8px;
  box-shadow: var(--sh-1);
}

/* En pantallas de 420px o mas caben los rotulos bajo cada icono. */
@media (min-width: 420px) {
  .mobile-btn-label {
    display: block;
  }
}


/* ---------------------------------------------------------------------------
   5. CAPA DE SUPERPOSICION Y VELO
   ------------------------------------------------------------------------ */
.mobile-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--kb-inset);       /* el teclado nunca tapa una hoja */
  z-index: var(--z-overlay);
  pointer-events: none;          /* solo los hijos reciben punteros */
}

.mobile-layer[hidden] {
  display: none;
}

/* El velo deja libre la barra inferior: cambiar de hoja (color -> capas ->
   tiempo) es una operacion constante y obligar a cerrar primero seria un toque
   de mas cada vez. */
.mobile-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--bar-h-total);
  pointer-events: auto;
  background: var(--scrim);
  animation: mobile-scrim-in 160ms var(--ease) both;
}

.mobile-scrim[hidden] {
  display: none;
}

@keyframes mobile-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ---------------------------------------------------------------------------
   6. HOJAS INFERIORES
   El desplazamiento lo lleva SIEMPRE `transform: translate3d()` desde
   ui/mobile.js: nunca se anima `top` ni `height` (obligarian a recalcular
   layout en cada fotograma del arrastre).
   ------------------------------------------------------------------------ */
/* La hoja se detiene sobre la barra inferior en vez de taparla: cambiar de
   panel es lo que mas se hace en movil y la barra tiene que seguir viva. */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--bar-h-total);
  height: calc(var(--vvh) * var(--sheet-ratio));
  max-height: calc(100% - var(--bar-h-total));
  display: flex;
  flex-direction: column;
  pointer-events: auto;

  background: var(--s-1);
  border: 1px solid var(--bd);
  border-bottom: 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: var(--sh-3);

  /* El area segura inferior la absorbe #mobile-bar, que queda por debajo. */
  transform: translate3d(0, 100%, 0);
  transition-property: transform;
  transition-timing-function: var(--ease-out);
  transition-duration: 0ms;      /* la fija ui/mobile.js segun la velocidad */
  will-change: transform;
  contain: layout paint;
}

.sheet[hidden] {
  display: none;
}

.sheet-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--sheet-head-h);
  padding: var(--sheet-grip-h) var(--sp-3) var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--bd-soft);
}

/* Franja superior de agarre. Cubre todo el ancho para que sea facil de coger
   con el pulgar, y va por debajo del boton de cerrar en el orden de pintado. */
.sheet-grip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sheet-grip-h);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}

.sheet-grip:active {
  cursor: grabbing;
}

.sheet-grip-bar {
  width: 44px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--s-hi);
}

.sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: none;            /* el titulo tambien arrastra la hoja */
  cursor: grab;
}

.sheet-close {
  flex: 0 0 auto;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding:
    var(--sp-4)
    calc(var(--sp-5) + var(--safe-right))
    var(--sp-6)
    calc(var(--sp-5) + var(--safe-left));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;  /* el desplazamiento no se propaga a la pagina */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* En la posicion completa la hoja se pega al borde superior y pierde el radio
   exterior, como una pantalla propia. `data-state` lo escribe ui/mobile.js.
   La posicion real la lleva SIEMPRE el transform en linea; el atributo solo
   sirve de gancho de estilo (y de estado para los lectores de pantalla). */
.sheet[data-state="full"] {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}


/* ---------------------------------------------------------------------------
   7. CONTENIDO DE LAS HOJAS
   ------------------------------------------------------------------------ */

/* Un panel trasladado pierde su cromo: dentro de la hoja ya hay cabecera. */
.sheet-body > .panel.in-sheet {
  flex: 0 0 auto;
  min-height: 0;
  border: 0;
  background: transparent;
}

.sheet-body > .panel.in-sheet > .panel-head {
  display: none;
}

.sheet-body > .panel.in-sheet > .panel-body {
  display: block;
  padding: 0;
  overflow: visible;
}

/* El panel de capas y la linea de tiempo si quieren todo el alto disponible. */
.sheet-body > #panel-layers.in-sheet,
.sheet-body > #timeline.in-sheet {
  flex: 1 1 auto;
  min-height: calc(var(--tl-row-h) * 5);
}

.sheet-body > #panel-layers.in-sheet > .panel-body {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Subtitulos y pies de las hojas generadas. */
.mobile-sheet-subtitle {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.mobile-sheet-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bd-soft);
}

.mobile-sheet-foot .btn {
  gap: var(--sp-3);
  justify-content: center;
  min-height: var(--touch-min);
}

/* --- Rejilla de herramientas --------------------------------------------- */
.mobile-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--sp-3);
}

.mobile-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 74px;
  padding: var(--sp-4) var(--sp-2);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  background: var(--s-2);
  color: var(--fg-dim);
  font: inherit;
  cursor: pointer;
}

.mobile-tool:active {
  background: var(--s-4);
}

.mobile-tool.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
}

.mobile-tool-label {
  max-width: 100%;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.mobile-preset-row > .chip {
  min-height: var(--ctrl-h-sm-cur);
}

.mobile-preset-row > .chip.is-active {
  background: var(--accent-soft-hover);
  border-color: var(--accent);
  color: var(--fg);
}

/* --- Hoja de menu --------------------------------------------------------- */
.mobile-menu-group {
  display: flex;
  flex-direction: column;
}

.mobile-menu-group + .mobile-menu-group {
  margin-top: var(--sp-5);
}

.mobile-menu-title {
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-menu-item:active {
  background: var(--s-3);
}

.mobile-menu-item:disabled,
.mobile-menu-item[aria-disabled="true"] {
  color: var(--fg-mute);
  opacity: var(--op-disabled);
  cursor: default;
}

.mobile-menu-item.is-nested {
  padding-left: var(--sp-7);
}

.mobile-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-check {
  flex: 0 0 auto;
  opacity: 0;
  color: var(--accent-ring);
}

.mobile-menu-item[aria-pressed="true"] .mobile-menu-check {
  opacity: 1;
}

.mobile-menu-sep {
  height: 1px;
  margin: var(--sp-2) var(--sp-4);
  background: var(--bd-soft);
}


/* ---------------------------------------------------------------------------
   8. CAJON LATERAL (#toolbar)
   Solo en movil: en tablet vertical cabe una columna fija y ui/toolbar.js no
   entra en modo cajon fuera de `mobile`.
   ------------------------------------------------------------------------ */
#app[data-layout="mobile"] > #workspace > #toolbar {
  position: fixed;
  top: 0;
  bottom: var(--bar-h-total);
  left: 0;
  z-index: var(--z-drawer);
  width: calc(var(--drawer-w) + var(--safe-left));
  min-width: 0;
  max-width: 80vw;

  padding-top: var(--safe-top);
  padding-left: var(--safe-left);

  background: var(--s-1);
  border: 0;
  border-right: 1px solid var(--bd);
  box-shadow: var(--sh-3);

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  visibility: hidden;
  transform: translate3d(-100%, 0, 0);
  transition-property: transform, visibility;
  transition-timing-function: var(--ease-out), linear;
  transition-duration: var(--t-drawer), 0s;
  transition-delay: 0s, var(--t-drawer);
  will-change: transform;
}

#app[data-layout="mobile"] > #workspace > #toolbar.is-open {
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s, 0s;
}

#app[data-layout="mobile"] #toolbar .toolbar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2) var(--sp-6);
}

#app[data-layout="mobile"] #toolbar .tool-btn {
  width: var(--touch-min);
  height: var(--touch-min);
}

#app[data-layout="mobile"] #toolbar .toolbar-close {
  align-self: flex-end;
}

/* Tirador del cajon: franja estrecha pegada a su borde interior. */
.mobile-drawer-grip {
  position: absolute;
  top: 0;
  bottom: var(--bar-h-total);
  left: calc(var(--drawer-w) + var(--safe-left));
  width: var(--sp-7);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.mobile-drawer-grip[hidden] {
  display: none;
}

.mobile-drawer-grip:active {
  cursor: grabbing;
}

.mobile-drawer-grip-bar {
  width: 4px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--s-hi);
  box-shadow: var(--sh-1);
}


/* ---------------------------------------------------------------------------
   9. TAMANO RAPIDO
   ------------------------------------------------------------------------ */
.mobile-quick {
  position: absolute;
  left: calc(var(--sp-5) + var(--safe-left));
  right: calc(var(--sp-5) + var(--safe-right));
  bottom: calc(var(--bar-h-total) + var(--sp-3));
  pointer-events: auto;

  padding: var(--sp-3) var(--sp-4);
  background: var(--s-2);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: mobile-quick-in 140ms var(--ease-out) both;
}

.mobile-quick[hidden] {
  display: none;
}

@keyframes mobile-quick-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.mobile-quick-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.mobile-quick-range {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-quick-value {
  flex: 0 0 auto;
  min-width: 62px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-dim);
}


/* ---------------------------------------------------------------------------
   10. ASIDERO DE "PANTALLA LIMPIA"
   Sobrevive a view.toggleUi (que oculta #menubar, #topbar, #toolbar,
   #right-dock, #timeline, #statusbar y #mobile-bar) porque no esta en esa
   lista: es el unico camino de vuelta cuando no hay teclado.
   ------------------------------------------------------------------------ */
.mobile-ui-handle {
  position: fixed;
  top: calc(var(--safe-top) + var(--sp-5));
  right: calc(var(--safe-right) + var(--sp-4));
  z-index: var(--z-handle);

  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;

  border: 1px solid var(--bd);
  border-radius: var(--r-full);
  background: var(--s-2);
  color: var(--fg-dim);
  box-shadow: var(--sh-2);
  opacity: 0.55;
  transition: opacity var(--t-fast);
}

#app[data-compact="true"] .mobile-ui-handle,
#app[data-ui-hidden="true"] .mobile-ui-handle {
  display: inline-flex;
}

#app[data-ui-hidden="true"] .mobile-ui-handle {
  opacity: 0.9;
}

.mobile-ui-handle:active {
  opacity: 1;
  background: var(--s-4);
}

.mobile-ui-handle.is-restore {
  color: var(--accent-ring);
  border-color: var(--accent);
}


/* ---------------------------------------------------------------------------
   11. LINEA DE TIEMPO COMPACTA
   timelineUI.js pone `.is-compact` (tira de miniaturas) y `.is-expanded`
   (tira desplegada). Aqui solo se le da sitio y objetivos tactiles.
   ------------------------------------------------------------------------ */
#timeline.in-sheet {
  height: 100%;
  border: 0;
  background: transparent;
}

#timeline.in-sheet > #timeline-toolbar {
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-3);
  border: 0;
}

#timeline.in-sheet > #playback-controls {
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--bd-soft);
}

#timeline.is-compact #timeline-tracks {
  touch-action: pan-x;          /* la tira de miniaturas solo va en horizontal */
}

#timeline.is-compact.is-expanded #timeline-tracks {
  touch-action: pan-x pan-y;
}

#app[data-compact="true"] #playback-controls .btn,
#app[data-compact="true"] #timeline-toolbar .btn {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

#app[data-compact="true"] #timeline-zoom-input {
  min-width: 96px;
}


/* ---------------------------------------------------------------------------
   12. DIALOGOS A PANTALLA COMPLETA Y POPOVERS
   ------------------------------------------------------------------------ */
@media (max-width: 699.98px) {
  .dialog-backdrop {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .dialog,
  .dialog-sm,
  .dialog-lg,
  .dialog-xl {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  /* Cabecera fija y pie fijo; solo desplaza el cuerpo. */
  .dialog-head {
    flex: 0 0 auto;
    min-height: calc(var(--touch-min) + var(--safe-top));
    padding-top: calc(var(--sp-4) + var(--safe-top));
  }

  .dialog-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-5);
  }

  .dialog-foot {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-bottom: calc(var(--sp-5) + var(--safe-bottom));
  }

  .dialog-foot .btn {
    flex: 1 1 auto;
    min-height: var(--touch-min);
  }

  /* Con el teclado desplegado el dialogo se encoge en vez de esconder sus
     campos bajo el: --kb-inset lo escribe ui/mobile.js. */
  #app[data-keyboard="true"] ~ #dialog-root .dialog,
  #app[data-keyboard="true"] ~ #dialog-root .dialog-backdrop {
    height: calc(100dvh - var(--kb-inset));
  }

  /* Popovers y menus contextuales como hoja inferior.
     `!important` es obligatorio: ui/toolbar.js y ui/contextmenu.js escriben
     `position/left/top/max-height` EN LINEA tras medir el ancla, y en una
     pantalla estrecha esa posicion no sirve. */
  .popover,
  #context-menu-root > .menu {
    left: var(--sp-4) !important;
    right: var(--sp-4) !important;
    top: auto !important;
    bottom: calc(var(--bar-h-total) + var(--sp-4)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(62vh, 520px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
  }

  #context-menu-root > .menu .menu-item {
    min-height: var(--touch-min);
  }

  .popover .preset-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* Los avisos no deben tapar la barra inferior. */
  #toast-root {
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--bar-h-total) + var(--sp-4));
    align-items: stretch;
  }

  #toast-root .toast {
    width: 100%;
    max-width: none;
  }
}


/* ---------------------------------------------------------------------------
   13. MODO ZURDO
   Invierte el lado del cajon, del tirador, del asidero y el orden de la barra.
   ------------------------------------------------------------------------ */
#app[data-hand="left"][data-layout="mobile"] > #workspace > #toolbar {
  left: auto;
  right: 0;
  padding-left: 0;
  padding-right: var(--safe-right);
  width: calc(var(--drawer-w) + var(--safe-right));
  border-right: 0;
  border-left: 1px solid var(--bd);
  transform: translate3d(100%, 0, 0);
}

#app[data-hand="left"][data-layout="mobile"] > #workspace > #toolbar.is-open {
  transform: translate3d(0, 0, 0);
}

#app[data-hand="left"] .mobile-drawer-grip {
  left: auto;
  right: calc(var(--drawer-w) + var(--safe-right));
  justify-content: flex-end;
}

#app[data-hand="left"] .mobile-ui-handle {
  right: auto;
  left: calc(var(--safe-left) + var(--sp-4));
}

#app[data-hand="left"][data-compact="true"] > #mobile-bar {
  flex-direction: row-reverse;
}

#app[data-hand="left"][data-compact="true"] #topbar-right {
  margin-left: 0;
  margin-right: auto;
  order: -1;
}


/* ---------------------------------------------------------------------------
   14. TABLET
   Vertical: se comporta como movil ampliado (data-compact="true"), pero con la
   columna de herramientas fija y hojas mas anchas.
   Horizontal: dock y linea de tiempo vuelven, mas estrechos que en escritorio.
   ------------------------------------------------------------------------ */
#app[data-layout="tablet"][data-compact="true"] > #workspace > #toolbar {
  position: static;
  flex: 0 0 auto;
  width: var(--toolbar-w);
  transform: none;
  visibility: visible;
  box-shadow: none;
}

/* El transform en linea que escribe ui/mobile.js solo mueve el eje Y, asi que
   en tablet la hoja se centra con margenes automaticos, nunca con translate. */
#app[data-layout="tablet"] .sheet {
  left: 0;
  right: 0;
  width: min(720px, 100%);
  margin: 0 auto;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
}

#app[data-layout="tablet"] .mobile-tool-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

#app[data-layout="tablet"][data-orientation="landscape"] {
  --dock-w: 240px;
  --timeline-h: 180px;
}

#app[data-layout="tablet"][data-orientation="landscape"] > #workspace > #right-dock {
  width: var(--dock-w);
}


/* ---------------------------------------------------------------------------
   15. PUNTERO GRUESO
   tokens.css ya sube --ctrl-h-cur a 44px y main.css aplica el minimo a los
   controles comunes. Aqui se cubre lo que es propio del editor.
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
  :root {
    --tl-cell-w: 28px;
    --tl-row-h: 36px;
    --tl-gutter: 132px;
    --sb-size: 12px;
  }

  .panel-row {
    min-height: var(--touch-min);
  }

  .panel-body {
    padding: var(--sp-5);
  }

  /* Separacion suficiente entre objetivos contiguos. */
  .toolbar-group,
  .panel-actions,
  .timeline-toolbar,
  .playback-controls {
    gap: var(--sp-3);
  }

  .swatch {
    min-width: 32px;
    min-height: 32px;
  }

  .tool-btn,
  .tool-options .btn,
  .seg-item {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  /* El valor numerico junto a un deslizador tiene que poder tocarse. */
  .slider-row > .slider-value {
    min-height: var(--ctrl-h-sm-cur);
  }
}


/* ---------------------------------------------------------------------------
   16. ORIENTACION HORIZONTAL
   En horizontal el alto es el recurso escaso: barra mas baja, sin rotulos y
   hojas que llegan casi al borde superior.
   ------------------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --sheet-ratio: 0.98;
    --mobile-bar-h: 48px;
  }

  #app[data-compact="true"] > #topbar {
    height: calc(var(--ctrl-h-cur) + var(--safe-top));
  }

  .mobile-btn-label {
    display: none;
  }

  .mobile-btn-icon {
    width: 20px;
    height: 20px;
  }

  .sheet-body {
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
  }

  .mobile-tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }

  .mobile-tool {
    min-height: 62px;
  }
}

/* Movil en horizontal: las areas seguras laterales pasan a importar mas que
   la superior (el notch queda a un lado). */
@media (orientation: landscape) and (pointer: coarse) {
  .mobile-quick {
    left: calc(var(--sp-7) + var(--safe-left));
    right: calc(var(--sp-7) + var(--safe-right));
  }

  #toast-root {
    left: calc(var(--sp-6) + var(--safe-left));
    right: calc(var(--sp-6) + var(--safe-right));
  }
}


/* ---------------------------------------------------------------------------
   17. MOVIMIENTO REDUCIDO Y COLORES FORZADOS
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sheet,
  #app[data-layout="mobile"] > #workspace > #toolbar,
  #app[data-compact="true"] > #mobile-bar {
    transition-duration: 0.001ms !important;
  }

  .mobile-scrim,
  .mobile-quick {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .sheet,
  .mobile-quick,
  .mobile-ui-handle,
  .mobile-tool {
    border: 1px solid ButtonBorder;
  }

  .mobile-scrim {
    background: transparent;
  }

  .mobile-btn[aria-expanded="true"],
  .mobile-btn.is-active,
  .mobile-tool.is-active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .sheet-grip-bar,
  .mobile-drawer-grip-bar {
    background: ButtonBorder;
  }
}