/* =========================================================
   TASKBAR — fixed bottom bar, Start, tasks, tray + clock
   ========================================================= */
.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4.5rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem 0.7rem 0 0.9rem;
  background: var(--face);
  box-shadow: inset 0 1px var(--face-light), inset 0 2px var(--white);
}

.start-btn {
  width: 9.2rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.7rem 0 0.6rem;
  font-weight: bold;
  font-size: 1.8rem;
}
.start-btn .ico { width: 2.4rem; height: 2.4rem; }

.taskbar__divider { height: 3.4rem; margin: 0 0.6rem 0 0.4rem; }

.taskbar__tasks { display: flex; gap: 0.4rem; flex: 1; min-width: 0; }

.task-btn {
  width: 28.2rem;
  min-width: 0;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 0.8rem;
  font-size: 1.7rem;
  text-align: left;
}
.task-btn .ico { width: 2.4rem; height: 2.4rem; }
.task-btn__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-btn.is-pressed { background: var(--checker); }

.tray {
  width: 16.8rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.8rem 0 1.4rem;
  box-shadow: var(--sh-thin-in);
}
.tray .ico { width: 2.6rem; height: 2.6rem; }
.tray__clock { margin-left: auto; font-size: 1.8rem; white-space: nowrap; }

/* ---------- MOBILE (ver el bloque equivalente en window.css) ---------- */

/* Misma taskbar de Windows 98, fija abajo. Solo crece lo justo para el dedo y
   respeta la franja inferior del teléfono cuando existe (0 si no hay notch). */
[data-mobile] .taskbar {
  height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: calc(0.9rem + env(safe-area-inset-left, 0px));
  padding-right: calc(0.7rem + env(safe-area-inset-right, 0px));
}
[data-mobile] .start-btn { height: 3.8rem; }
[data-mobile] .task-btn { height: 3.8rem; }

/* Con varias apps abiertas los botones se reparten la caja de tareas, que en un
   teléfono mide 157,5 unidades: el resto de la barra se lo llevan START (92), el
   divisor (4), la bandeja (126,5) y los huecos.

   El mínimo no es un número fijo sino UN TERCIO JUSTO de la caja, acotado a las 5,4rem
   de antes. Con el teléfono DE PIE manda el tercio (51,2u < 54u):
     1 app  -> 157,5u, igual que antes
     2 apps -> 77,7u cada uno
     3 apps -> 51,2u cada uno y CABEN (antes el mínimo de 5,4rem desbordaba 11u)
     4 y 5  -> 51,2u cada uno, y como el mínimo es un tercio exacto siempre se ven
               TRES BOTONES ENTEROS: ninguno queda cortado contra la bandeja.
   Lo que no cabe se alcanza desplazando la caja por dentro —nunca el documento—,
   y el scroll-snap impide que el desplazamiento se detenga a mitad de un botón.
   El botón de la ventana activa lo trae a la vista Taskbar.js.

   Con el teléfono TUMBADO manda el tope de 5,4rem, que es el mínimo que ya había:
   allí la caja mide 646u y los cinco botones caben de sobra a 127u cada uno con su
   nombre entero. Sin el tope, el tercio (214u) los habría mandado al scroll — es
   decir, el tope existe para que en apaisado no cambie absolutamente nada.

   El cromo del botón baja de 47u a 36u (padding 8+8 -> 4+4, hueco icono/label
   7 -> 4) para que con tres botones quede label visible y no solo el icono. */
[data-mobile] .taskbar__tasks {
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
[data-mobile] .taskbar__tasks::-webkit-scrollbar { display: none; }
[data-mobile] .task-btn {
  flex: 1 1 auto;
  min-width: min(calc((100% - 0.4rem) / 3), 5.4rem);
  padding: 0 0.4rem;
  gap: 0.4rem;
  scroll-snap-align: start;
}

/* La bandeja fija de 16,8rem se come el 39 % de un teléfono. Aquí ocupa lo que
   necesitan el volumen y el reloj, que siguen siendo los mismos. */
[data-mobile] .tray { width: auto; padding: 0 1rem 0 1rem; gap: 0.8rem; }