/* =========================================================
   LOOKBOOK — explorer, photo viewer, media player
   Reuses the approved Win98 primitives (.ie__band, .btn98, .scroll98, bevel tokens).
   Nothing here touches the desktop, the taskbar, SHOP or CREATE.
   ========================================================= */

/* ---------- Explorer ---------- */
.lb { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.lb__toolbar { height: 5rem; padding-left: 1rem; gap: 0.2rem; }
.lb-tool {
  height: 4.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  background: none;
  box-shadow: none;
  border: 0;
  font-size: 1.55rem;
}
.lb-tool:hover:not(:disabled) { box-shadow: var(--sh-thin-out); }
.lb-tool:active:not(:disabled),
.lb-tool.is-pressed { box-shadow: var(--sh-thin-in); }
.lb-tool:disabled { color: var(--shadow); text-shadow: 1px 1px var(--white); }
.lb-tool:disabled .lb-tool__glyph { opacity: 0.45; }
.lb-tool__glyph { display: flex; align-items: center; }
.lb-tool__glyph svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.lb-tool__glyph .ico { width: 2.2rem; height: 2.2rem; }
.lb__toolbar .etched-v { height: 3.8rem; margin: 0 0.5rem; }

.lb__address { height: 3rem; padding: 0 0.6rem 0 1.2rem; gap: 0.8rem; }
.lb__address-label { font-size: 1.6rem; }
.lb__address-field {
  flex: 1;
  min-width: 0;
  height: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
  background: var(--white);
  box-shadow: var(--sh-field);
}
.lb__address-field .ico { width: 1.9rem; height: 1.9rem; }
.lb__address-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1.6rem;
}

.lb__body { flex: 1; min-height: 0; display: flex; margin-top: 0.3rem; }
.lb__split { width: 0.5rem; flex: none; }

/* Folder pane: its own little title strip with a close X, as on the reference. */
.lb__pane {
  width: 23rem;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--sh-field);
}
.lb__pane-head {
  height: 2.8rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3rem 0 0.9rem;
  background: var(--face);
  box-shadow: var(--sh-thin-out);
  font-size: 1.55rem;
}
.lb__pane-close {
  width: 2.2rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
}
.lb__pane-close:hover { box-shadow: var(--sh-thin-out); }
.lb__pane-close:active { box-shadow: var(--sh-thin-in); }

.lb__tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.4rem 0;
  background: var(--white);
}
.lb-tree__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.8rem;
  padding-right: 0.6rem;
  font-size: 1.55rem;
  white-space: nowrap;
}
.lb-tree__knob {
  width: 1.4rem;
  flex: none;
  text-align: center;
  font-size: 1.3rem;
  color: #333;
}
.lb-tree__icon .ico { width: 2rem; height: 2rem; display: block; }
.lb-tree__label { padding: 0.1rem 0.4rem; }
.lb-tree__row.is-current .lb-tree__label { background: var(--navy); color: #fff; }

.lb__list {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--white);
  box-shadow: var(--sh-field);
  outline: none;
}

/* Icons view */
.lb__list--icons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.6rem; padding: 1rem; }
.lb__list--icons .lb-item {
  width: 11.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.3rem;
  text-align: center;
}
.lb__list--icons .lb-item__icon .ico { width: 3.6rem; height: 3.6rem; display: block; }
.lb__list--icons .lb-item__name { padding: 0.1rem 0.4rem; font-size: 1.5rem; word-break: break-all; }
.lb__list--icons .lb-item__col { display: none; }
.lb__list--icons .lb-item.is-selected .lb-item__name { background: var(--navy); color: #fff; }

/* Details view */
.lb__list--list { padding: 0 0 0.3rem; }
.lb__list--list .lb-item,
.lb-head {
  display: grid;
  grid-template-columns: 2.6rem 1fr 9rem 12rem 15rem;
  align-items: center;
  gap: 0.8rem;
  height: 2.9rem;
  padding: 0 0.8rem;
  font-size: 1.55rem;
}
.lb__list--icons .lb-head { display: none; }
.lb-head {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 2.9rem;
  padding: 0 0.8rem 0 0;
  background: var(--face);
}
.lb-head__cell {
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  background: var(--face);
  box-shadow: var(--sh-thin-out);
}
.lb__list--list .lb-item__icon .ico { width: 2.2rem; height: 2.2rem; display: block; }
.lb__list--list .lb-item__col { color: #333; }
.lb__list--list .lb-item.is-selected { background: var(--navy); color: #fff; }
.lb__list--list .lb-item.is-selected .lb-item__col { color: #dfe4ff; }

.lb__status {
  height: 2.2rem;
  flex: none;
  display: flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.lb__status-panel {
  box-shadow: var(--sh-thin-in);
  padding: 0 0.6rem;
  font-size: 1.45rem;
  line-height: 2.2rem;
  white-space: nowrap;
  overflow: hidden;
}
.lb__status-panel--count { width: 16rem; flex: none; }
.lb__status-panel--sel { flex: 1; }

/* ---------- Photo viewer ---------- */
.pv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pv__toolbar { height: 3.6rem; padding-left: 1rem; gap: 0.4rem; }
.pv__tool {
  min-width: 3.2rem;
  height: 2.8rem;
  padding: 0 0.6rem;
  font-size: 1.6rem;
  line-height: 1;
}
.pv__tool--wide { min-width: 4.6rem; font-size: 1.4rem; }
.pv__toolbar .etched-v { height: 2.6rem; margin: 0 0.3rem; }
.pv__name { margin-left: 0.4rem; font-size: 1.5rem; color: #333; }

.pv__frame { flex: 1; min-height: 0; display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.pv__canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 0.8rem;
  background: #2b2b2e;
  box-shadow: var(--sh-field);
}
.pv__img { display: block; image-rendering: auto; }
/* Fit mode is positioned rather than sized in percentages: a percentage height inside a
   scrolling auto-height box resolves against the content, which is the image itself. */
.pv__img.is-fit {
  position: absolute;
  inset: 0.8rem;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 1.6rem);
  max-height: calc(100% - 1.6rem);
}
.pv__missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: #b9b7b0;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
}
.pv__missing .ico { width: 4rem; height: 4rem; }

.pv__side {
  width: 19rem;
  flex: none;
  padding: 0.8rem;
  background: var(--face);
  box-shadow: var(--sh-thin-out);
  overflow: hidden;
}
.pv__side-title { font-size: 1.4rem; letter-spacing: 0.12rem; margin-bottom: 0.6rem; }
.pv__meta-row { font-size: 1.4rem; line-height: 1.9rem; word-break: break-word; }
.pv__meta-row span { margin-right: 0.4rem; color: #444; }
.pv__side-rule { margin: 0.7rem 0; }

.pv__status { height: 2.2rem; flex: none; display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.pv__status-panel {
  box-shadow: var(--sh-thin-in);
  padding: 0 0.6rem;
  font-size: 1.45rem;
  line-height: 2.2rem;
  white-space: nowrap;
  overflow: hidden;
}
.pv__status-panel--main { flex: 1; }
.pv__status-panel--zoom { width: 7rem; flex: none; }
.pv__status-panel--dim { width: 12rem; flex: none; }

/* ---------- Media player ---------- */
.mp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mp__screen { flex: 1; min-height: 0; display: flex; padding: 0.5rem; margin-top: 0.3rem; box-shadow: var(--sh-field); }
.mp__stage {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b0b0d;
}
.mp__video, .mp__poster { max-width: 100%; max-height: 100%; display: block; }
.mp__badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0.2rem 0.6rem;
  background: #1c1c20;
  color: #c9c6bd;
  font-size: 1.3rem;
  letter-spacing: 0.12rem;
  box-shadow: inset 0 0 0 1px #4a4a50;
}

.mp__controls { flex: none; padding: 0.6rem 0.8rem 0.4rem; }
.mp__seek { margin-bottom: 0.5rem; }
.mp__row { display: flex; align-items: center; gap: 0.5rem; }
.mp__key {
  width: 3.6rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
}
.mp__key svg { width: 1.4rem; height: 1.4rem; fill: #111; }
.mp__row .etched-v { height: 2.6rem; margin: 0 0.4rem; }
.mp__time { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.mp__spacer { flex: 1; }
.mp__vol-icon svg { width: 1.9rem; height: 1.7rem; display: block; }

.mp__range { appearance: none; height: 2.2rem; background: transparent; }
.mp__range--seek { width: 100%; }
.mp__range--vol { width: 9rem; }
.mp__range::-webkit-slider-runnable-track { height: 0.6rem; background: var(--face); box-shadow: var(--sh-thin-in); }
.mp__range::-webkit-slider-thumb {
  appearance: none;
  width: 1.2rem;
  height: 2rem;
  margin-top: -0.7rem;
  background: var(--face);
  box-shadow: var(--sh-raised);
}
.mp__range::-moz-range-track { height: 0.6rem; background: var(--face); box-shadow: var(--sh-thin-in); }
.mp__range::-moz-range-thumb {
  width: 1.2rem;
  height: 2rem;
  border: 0;
  border-radius: 0;
  background: var(--face);
  box-shadow: var(--sh-raised);
}

.mp__status { height: 2.2rem; flex: none; display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.mp__status-panel {
  box-shadow: var(--sh-thin-in);
  padding: 0 0.6rem;
  font-size: 1.45rem;
  line-height: 2.2rem;
  white-space: nowrap;
  overflow: hidden;
}
.mp__status-panel--state { width: 11rem; flex: none; }
.mp__status-panel--src { flex: 1; }

/* =========================================================
   MOBILE — LOOKBOOK (ver el bloque equivalente en window.css)

   Todo cuelga de <html data-mobile>, que scale.js solo escribe en un dispositivo de
   puntero grueso con el lado corto de teléfono. En escritorio no existe.

   Medido antes de tocar nada:
     vertical    el árbol se queda con 209 px de los 359 del cuerpo y a la lista de
                 archivos le sobran 146, donde cabe UN icono por fila. La toolbar se
                 sale además 17-24 px (el botón List).
     horizontal  a 844x390 los dos paneles caben —árbol 209 + lista 574— y no hay ni un
                 elemento fuera del marco. Ahí no se toca nada.
   ========================================================= */

@media (orientation: portrait) {

  /* El panel de carpetas deja de estar al lado y pasa a estar encima, como una barra de
     navegación de Explorer. Sigue siendo el mismo panel: su cabecera "Folders", su X
     para cerrarlo y su árbol con la misma indentación. */
  [data-mobile] .lb__body { flex-direction: column; }
  [data-mobile] .lb__pane {
    width: 100%;
    flex: 0 0 auto;
    /* Crece con el contenido hasta el tope. Desplegado son cinco filas de 38 px más la
       cabecera: 26rem es lo que hace falta para que LOOKBOOK, DROP_001, PHOTOS, VIDEOS y
       PROCESS se vean a la vez sin desplazar. Con 22rem PROCESS se quedaba fuera. */
    max-height: 26rem;
  }
  [data-mobile] .lb__split { width: auto; height: 0.5rem; }
  [data-mobile] .lb__list { flex: 1; min-height: 0; }

  /* Con el ancho completo entran tres columnas de iconos en cualquier teléfono, en vez
     de la única que cabía en los 146 px que le quedaban antes. */
  [data-mobile] .lb__list--icons { gap: 0.8rem; padding: 1rem 0.8rem; }

  /* La toolbar se sale por el ancho de sus botones. Apretando el relleno se recuperan
     unos 65 px, más de los 17-24 que faltaban, así que Back, Forward, Up, Icons y List
     conservan su etiqueta. El desplazamiento interno queda de red de seguridad. */
  [data-mobile] .lb__toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  [data-mobile] .lb__toolbar::-webkit-scrollbar { display: none; }
  [data-mobile] .lb-tool {
    flex: none;
    padding: 0 0.5rem;
    gap: 0.35rem;
  }
  [data-mobile] .lb__toolbar .etched-v { margin: 0 0.3rem; }
}

/* ---------- táctil, en las dos orientaciones ----------
   No es layout: es tamaño de dedo, y un dedo mide lo mismo de pie que tumbado. En
   píxeles y no en rem, porque el rem encoge con la escala y el dedo no. */

/* Las filas del árbol medían 21-28 px de alto según el teléfono. */
[data-mobile] .lb-tree__row { min-height: 38px; }
[data-mobile] .lb-tool { min-height: 38px; }

/* Las filas del modo List medían 26 px. */
[data-mobile] .lb__list--list .lb-item { min-height: 38px; }

/* La X que cierra el panel de carpetas medía 20 x 19 px. El dibujo se queda igual y el
   área táctil crece por fuera, sobre la cabecera, donde no hay nada más que tocar. */
[data-mobile] .lb__pane-head { min-height: 34px; }
[data-mobile] .lb__pane-close {
  position: relative;
  min-width: 28px;
  min-height: 26px;
}
[data-mobile] .lb__pane-close::after {
  content: "";
  position: absolute;
  inset: -6px -5px;   /* 38 x 38 px reales, sin salirse de su cabecera */
}

/* =========================================================
   MOBILE — los visores hijos (PhotoViewer y MediaPlayer)

   El tamaño de la ventana lo calcula openFile.js desde la proporción del contenido.
   Aquí se recorta lo que le robaba sitio a la imagen dentro de esa ventana: medido a
   390x844, PROPERTIES se llevaba 172 px de los 366 de ancho y el lienzo tenía 0,8rem
   de inset por cada lado.
   ========================================================= */

/* ---------- PhotoViewer ---------- */
[data-mobile] .pv__side {
  width: 13rem;
  padding: 0.5rem;
}
[data-mobile] .pv__side-title { margin-bottom: 0.4rem; }
/* El panel heredaba `word-break: break-word`, que parte a mitad de palabra: a 13rem
   salía "ASKR_00 / 1.JPG" y "PA / MPLONA". Así rompe por los espacios, y solo parte una
   palabra cuando de verdad no cabe sola. */
[data-mobile] .pv__meta-row {
  line-height: 1.7rem;
  word-break: normal;
  overflow-wrap: break-word;
}
[data-mobile] .pv__side-rule { margin: 0.5rem 0; }

/* El lienzo pega la imagen al marco: con la ventana ya cortada a la proporción de la
   foto, este inset era casi todo el negro que quedaba. */
[data-mobile] .pv__canvas { padding: 0.4rem; }
[data-mobile] .pv__img.is-fit {
  inset: 0.4rem;
  max-width: calc(100% - 0.8rem);
  max-height: calc(100% - 0.8rem);
}
[data-mobile] .pv__frame { gap: 0.4rem; }
[data-mobile] .pv__toolbar { gap: 0.3rem; }

/* ---------- MediaPlayer ---------- */
[data-mobile] .mp__screen { padding: 0.4rem; }
[data-mobile] .mp__controls { padding: 0.5rem 0.6rem 0.3rem; }
[data-mobile] .mp__seek { margin-bottom: 0.4rem; }

/* ---------- táctil, en las dos orientaciones ----------
   En píxeles y no en rem: el rem encoge con la escala y el dedo no. */
[data-mobile] .pv__tool { min-width: 34px; min-height: 34px; }
[data-mobile] .mp__key { min-width: 36px; min-height: 34px; }
[data-mobile] .mp__range { min-height: 30px; }

/* La fila de transporte no cabe de una pieza en un teléfono: siete teclas más el tiempo
   y el volumen piden 260-400 px y el cuerpo de la ventana da 199-329. Se parte en dos
   líneas —teclas arriba, tiempo y volumen debajo— en vez de salirse del marco. */
[data-mobile] .mp__row {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.5rem;
}
[data-mobile] .mp__spacer { display: none; }
[data-mobile] .mp__key { min-width: 30px; }
[data-mobile] .mp__range--vol { width: 7rem; }

/* El nombre del archivo empujaba la toolbar del visor hasta salirse. Ahora se recorta. */
[data-mobile] .pv__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El póster se salía de su escenario y quedaba RECORTADO cuando el alto apretaba —el
   `max-height: 100%` dentro de un grid no resuelve contra el alto real del área—. Con
   medidas explícitas y `contain` se ve entero siempre, con letterbox si hace falta. */
[data-mobile] .mp__stage { min-height: 0; }
[data-mobile] .mp__stage > .mp__video,
[data-mobile] .mp__stage > .mp__poster {
  /* Absoluto y no `height: 100%` a secas: el escenario es un grid que se dimensiona con
     su propio hijo, así que el porcentaje se volvía circular y el navegador lo trataba
     como `auto` — el póster salía a su tamaño natural y quedaba recortado. Contra la caja
     del escenario, en cambio, resuelve sin ambigüedad. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}