/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden CRONOLOGICO: las reglas de abajo pisan a las de arriba. NO reordenar; por eso se indexa por tema.
 * Numero = linea de este archivo donde empieza el comentario de esa parte.
 *
 *   linea 59: [general/celular] arreglos de la version celular (cabecera del archivo)
 *   linea 85: [general] retoques puntuales (abre un grupo: lineas 29 a 75)
 *   linea 87: [#w-cal] Fecha y hora en celular
 *   linea 101: [#w-leeme] solapa Busqueda de la Ayuda oculta
 *   linea 106: [#w-bg] menus de Fondo
 *   linea 118: [#w-paint] lienzo blanco al maximizar
 *   linea 125: [Clippy] legibilidad en escritorio y celular
 *   linea 133: [#w-earth] leyenda en celulares
 *   linea 142: [#w-leeme] Ayuda inicial completa en escritorio y fondo
 *   linea 180: [todas] Escritorio: mismo plano, el scroll queda dentro de cada ventana
 *   linea 203: [general] ajustes puntuales
 *   linea 235: [#w-earth] mapa mas alto y leyenda compacta en celular
 *   linea 244: [SAP / Ejecutar] textos siempre en negro
 *   linea 260: [escritorio] pantallas bajas: iconos en mas columnas
 *   linea 275: [celular] escritorio fijo y ventanas adaptadas al viewport
 *   linea 308: [celular] conservar el scroll original de cada aplicacion
 *   linea 320: [celular] ventanas limitadas al escritorio visible
 *   linea 340: [celular] maximizar ocupa todo el area de escritorio
 *   linea 356: [celular] maximizar: termina antes de la barra de tareas
 *   linea 411: [#w-earth] mapa estirado dentro de la ventana maximizada
 *   linea 455: [celular] ventanas compactas centradas; Ayuda y Fondo completas
 *   linea 517: [celular] ventanas fijas recuperan tamano y se centran
 *   linea 553: [#w-bg / errores] Fondo fijo sin scroll; icono de error
 *   linea 576: [errores] circulo rojo con X
 *   linea 585: [#w-bg / #w-leeme] Propiedades de pantalla fija; LEEME en movil
 *   linea 620: [barra de tareas] compactar en celular con mas de cinco ventanas
 *   linea 643: [#w-bg] nunca muestra scroll
 *   linea 649: [#w-bg] mismo tamano al cambiar de solapa
 *   linea 679: [#w-bg] misma altura en todas las solapas
 *   linea 703: [#w-bg] respetar el atributo hidden
 *   linea 710: [#w-bg] celular/tablet: mismo tamano en las tres solapas
 *   linea 737: [#w-sap] tamano FIJO y un solo scroll por pantalla (sub-puntos 1 a 5: lineas 685, 693, 699, 704, 713)
 *   linea 781: [#w-dump] celular: arbol arriba y texto abajo
 *   linea 788: [#w-bg] protector de pantalla en celular/tablet
 *   linea 805: [menus] palabras de las barras de menu no se parten (celular)
 *   linea 813: [#w-calc] boton Retroceso
 *   linea 818: [#w-dbg] codigo fuente con su propia caja y scroll
 *   linea 823: [#w-dbg / #w-sap] con la ventana SAP maximizada el codigo usa el alto disponible
 *   linea 828: [#w-leeme] botones de la barra de titulo en celular (Minimizar)
 *   linea 835: [#w-leeme] achicar y cambiar de tamano (escritorio y celular)
 *   linea 844: [#w-leeme] celular: Restaurar deja una ventana centrada
 *
 * POR VENTANA (lineas donde se habla de cada una):
 *   #w-bg: 106, 553, 585, 643, 649, 679, 703, 710, 788
 *   #w-cal: 87
 *   #w-calc: 813
 *   #w-dbg: 818, 823
 *   #w-dump: 781
 *   #w-earth: 133, 235, 411
 *   #w-leeme: 101, 142, 585, 828, 835, 844
 *   #w-paint: 118
 *   #w-sap: 737, 823
 * ========================================================================= */
/* ==========================================================================
   arreglos de la versión celular
   1) MS-DOS (la ventana más larga) con alto máximo y scroll propio: no estira la página.
   2) BIOS: el texto arranca debajo de la estrella Energy Star (no se superponen).
   3) Logo de Windows 98: en pantallas angostas el logo y el texto van uno debajo del otro (se veía solo el "9").
   ========================================================================== */
@media (max-width: 1023px) {
  #w-exp:not(.is-max):not(.is-sized) .terminal {
    max-height: min(440px, 58vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  .bios__txt { top: calc(12vh + 100px); }
}

@media (max-width: 520px) {
  .w98splash__logo { flex-direction: column; gap: 10px; }
  .w98splash__img { width: min(190px, 52vw); }
  .w98splash__txt { align-items: flex-start; }
}


/* retoques puntuales solicitados, sin alterar la lógica de las aplicaciones. */

/* Fecha y hora: mejor aprovechamiento del ancho y controles cómodos en celular. */
@media (max-width: 520px) {
  #w-cal { width: min(100%, 450px); }
  #w-cal .cal98 .cal__body { padding: 6px; }
  #w-cal .cal98__row { gap: 6px; }
  #w-cal .cal98__date { flex: 1 1 100%; padding: 6px; }
  #w-cal .cal98__time { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  #w-cal .cal98__time legend { grid-column: 1 / -1; }
  #w-cal .cal98__clk { width: min(42vw, 150px); height: min(42vw, 150px); margin: 0 auto; }
  #w-cal .cal98__dig { justify-self: end; }
  #w-cal .cal98__grid td { padding: 5px 0; }
  #w-cal .cal98__btns { padding: 8px 2px 2px; }
}

/* La pestaña Búsqueda de Ayuda no funciona de forma fiable: ocultarla,
   manteniendo su markup interno para que el resto de la ayuda siga funcionando. */
#w-leeme [data-hp="srch"],
#w-leeme #hlp-srch { display: none !important; }

/* Los menús de fondo conservan el aspecto clásico y resaltan la opción activa. */
#w-bg .bg__list,
#w-bg .bg__pat {
  background: #fff;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px #404040, inset -1px -1px #fff;
}
#w-bg .bg__list button,
#w-bg .bg__pat button { min-height: 24px; padding: 4px 8px; }
#w-bg .bg__list button:focus-visible,
#w-bg .bg__pat button:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }

/* Paint: el lienzo blanco ocupa el área disponible al maximizar la ventana. */
#w-paint.is-max { overflow: hidden; }
#w-paint.is-max .paint { flex: 1 1 auto; min-height: 0; align-items: stretch; }
#w-paint.is-max .paint__tools { align-self: stretch; }
#w-paint.is-max .paint__area { flex: 1 1 auto; min-height: 0; padding: 4px; }
#w-paint.is-max .paint__canvas { width: 100%; max-width: none; height: 100%; margin: 0; background: #fff; }

/* Clippy también debe quedar cómodo de leer en escritorio y en celular. */
.clipt__b { line-height: 1.4; }
.clipt__b p { margin-bottom: 8px; }
@media (min-width: 1024px) {
  .clipt__b { max-width: 320px; padding: 10px 12px; font-size: 14px; }
  .clipt__c .clipr__img { width: 64px; height: 93px; }
}

/* Ajuste puntual de leyenda de Google Earth en celulares */
@media (max-width: 600px) {
  #w-earth .earth-legend, #w-earth .earth__legend, #w-earth [class*="legend"] {
    max-width: min(46vw, 190px); box-sizing: border-box; font-size: 11px; line-height: 1.2;
    overflow-wrap: anywhere; padding: 5px 7px;
  }
}


/* ventana de Ayuda inicial completa en escritorio y fondo que acompaña el contenido. */
@media (min-width: 1024px) {
  #w-leeme:not(.is-max) {
    width: min(860px, calc(100vw - 48px));
    height: min(650px, calc(100vh - 90px));
    min-height: min(520px, calc(100vh - 90px));   /* en pantallas bajas el mínimo ya no empuja la ventana por debajo de la barra de tareas */
  }
  #w-leeme .hlp {
    height: calc(100% - 30px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #d4d0c8;
  }
  #w-leeme .hlp__main {
    flex: 1 1 auto;
    min-height: 0;
    background: #d4d0c8;
  }
  #w-leeme .hlp__content,
  #w-leeme .hlp__page,
  #w-leeme .hlp__text {
    box-sizing: border-box;
    max-height: 100%;
    overflow-y: auto;
  }
}
#w-leeme .hlp { box-sizing: border-box; }
#w-leeme .hlp__main { box-sizing: border-box; }

@media (min-width: 1024px) {
  #w-leeme .hlp__page {
    min-height: 0;
    margin-bottom: 0;
  }
  #w-leeme .hlp__tabbody { min-height: 0; }
}

/* Escritorio: todas las ventanas comparten el mismo plano; el scroll queda dentro de cada ventana. */
@media (min-width: 1024px) {
  html, body { height: 100%; overflow: hidden; }
  .desktop { height: calc(100vh - var(--taskbar-h)); min-height: 0; overflow: hidden; }
  .workspace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    gap: 0;
    min-height: 0;
    height: calc(100vh - var(--taskbar-h) - 2 * var(--gap));
    overflow: hidden;
  }
  .workspace > .window:not([hidden]) {
    grid-area: 1 / 1 !important;
    justify-self: start;
    align-self: start;
    margin: 0 !important;
  }
}

/* ajustes puntuales solicitados sin cambiar el resto del escritorio. */
@media (min-width: 1024px) {
  /* Sobre mí vuelve a tener un ancho de ventana de aplicación, no de pantalla. */
  #w-about:not(.is-max):not(.is-sized) {
    width: min(520px, calc(100vw - 48px));
    max-width: min(520px, calc(100vw - 48px));
  }

  /* Cada ventana aparece en una posición ligeramente distinta, como un escritorio real.
     el margen solo vale mientras la ventana está en su sitio inicial; al maximizarla o arrastrarla (is-max / is-float)
     ya no se aplica (antes dejaba un hueco al maximizar y topes invisibles al mover la ventana). */
  #w-about:not([hidden]):not(.is-max):not(.is-float) { margin: 18px 0 0 18px !important; }
  #w-pc:not([hidden]):not(.is-max):not(.is-float) { margin: 52px 0 0 76px !important; }
  #w-exp:not([hidden]):not(.is-max):not(.is-float) { margin: 76px 0 0 142px !important; }
  #w-skills:not([hidden]):not(.is-max):not(.is-float) { margin: 112px 0 0 210px !important; }
  #w-cockpit:not([hidden]):not(.is-max):not(.is-float) { margin: 142px 0 0 96px !important; }
  #w-sap:not([hidden]):not(.is-max):not(.is-float) { margin: 34px 0 0 190px !important; }
  /* PA30/SE38/dump/debugger/PE02/calc ya no son ventanas: viven dentro de #w-sap (sap.js), no deben desplazarse. */
  #w-word:not([hidden]):not(.is-max):not(.is-float) { margin: 60px 0 0 110px !important; }
  #w-excel:not([hidden]):not(.is-max):not(.is-float) { margin: 80px 0 0 140px !important; }
  #w-mail:not([hidden]):not(.is-max):not(.is-float), #w-dial:not([hidden]):not(.is-max):not(.is-float) { margin: 104px 0 0 164px !important; }
  #w-lang:not([hidden]):not(.is-max):not(.is-float) { margin: 30px 0 0 260px !important; }   /* Inglés C2: un poco más a la derecha */

  /* El scroll de MS-DOS / SAP Experiencia pertenece al contenido de la ventana. */
  #w-exp:not(.is-max):not(.is-sized) .terminal {
    max-height: min(560px, calc(100vh - 190px));
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* Google Earth en celular: mapa más alto y leyenda compacta (no tapa el globo) */
@media (max-width: 600px) {
  #w-earth .earth__body { height: clamp(430px, 74vh, 580px); }
  #w-earth .earth__legend { max-width: min(36vw, 138px); padding: 1px; font-size: 9px; line-height: 1.2; }
  #w-earth .earth__legend b { margin-bottom: 1px; padding: 1px 4px; font-size: 9px; }
  #w-earth .earth__legend p { gap: 4px; padding: 1px 4px 2px; }
  #w-earth .earth__legend svg { width: 9px; height: 11px; }
}

/* textos de SAP y del cuadro Ejecutar siempre en negro (en algunos celulares salían blancos) */
.sx input, .sx select, .sx textarea, .sx__rec input, .sx__pn input, .sx__dir input, .sap__cmd,
.sx .dbg__f, .sx .pc__sum dd, .sx__code code, .sx__rec label span, .sx__hd b, .sx__hd span, .sx__gt {
  color: #000 !important; -webkit-text-fill-color: #000 !important; opacity: 1 !important; caret-color: #000;
}
/* el color negro forzado de arriba (-webkit-text-fill-color) se heredaba a las palabras clave <b> del codigo ABAP de SE38 y las dejaba negras:
   cada palabra clave toma otra vez su propio color (azul, definido en sap-3d.css) */
.sx__code code b { -webkit-text-fill-color: currentColor !important; }
.xd--run .run__combo { background-color: #fff !important; }
.xd--run .run__combo input, .xd--run #run-in {
  color: #000 !important; -webkit-text-fill-color: #000 !important; caret-color: #000; opacity: 1 !important;
  background-color: #fff !important; color-scheme: light;
}
.run__option { color: #000; -webkit-text-fill-color: #000; }
.run__option:hover, .run__option:focus { color: #fff; -webkit-text-fill-color: #fff; }

/* pantallas de escritorio bajas (notebooks): los íconos de abajo quedaban tapados por la barra de tareas.
   Si no entran en 3 columnas, se reparten en más columnas (la columna de íconos se ensancha y las ventanas se corren a la derecha). */
@media (min-width: 1024px) and (max-height: 640px) {
  .desktop { grid-template-columns: 326px minmax(0, 1fr); }
  .icons { grid-template-columns: repeat(4, 76px); }
}
@media (min-width: 1024px) and (max-height: 500px) {
  .desktop { grid-template-columns: 478px minmax(0, 1fr); }
  .icons { grid-template-columns: repeat(6, 76px); }
}
@media (min-width: 1024px) and (max-height: 360px) {
  .desktop { grid-template-columns: 630px minmax(0, 1fr); }
  .icons { grid-template-columns: repeat(8, 76px); }
}

/* móvil: escritorio fijo, ventanas adaptadas al viewport y contenido sin cortes. */
@media (max-width: 1023px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .desktop {
    position: relative;
    height: calc(100vh - var(--taskbar-h));
    height: calc(100dvh - var(--taskbar-h));
    min-height: 0;
    overflow: hidden;
    padding-bottom: var(--gap);
  }
  .icons { position: relative; z-index: 1; }
  .workspace {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    overscroll-behavior: none;
  }
  /* Las ventanas estaban quedando debajo de los iconos por la capa z-index. */
  .workspace > .window:not([hidden]) {
    position: relative;
    z-index: 2;
  }
}

/* conservar el scroll original de cada aplicación; solo corregir capas. */
@media (max-width: 1023px) {
  .workspace { z-index: 5; pointer-events: none; }
  .workspace > .window:not([hidden]) { pointer-events: auto; z-index: 6; }
  .icons { position: relative; z-index: 1; }
  .taskbar__desktop-button { display: inline-flex; }
  #w-leeme { max-width: calc(100vw - 12px); }
  #w-leeme .hlp__main { min-height: 0; }
  #w-leeme .hlp__page { min-height: 0; }
}


/* ventanas limitadas al escritorio visible sin agregar un segundo scroll. */
@media (max-width: 1023px) {
  .workspace > .window:not([hidden]) {
    box-sizing: border-box;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - var(--taskbar-h) - 16px) !important;
    min-width: 0;
  }
  /* Diálogo fijo de propiedades de pantalla: adaptar el ancho sin alterar su scroll interno. */
  #w-bg { width: min(450px, calc(100vw - 12px)) !important; max-width: calc(100vw - 12px) !important; }
  #w-bg .dun__body, #w-bg .bg__row { min-width: 0; max-width: 100%; }
  #w-bg .bg__row { flex-wrap: wrap; }
  #w-bg .bg__list { min-width: 0; max-width: 100%; }
  #w-leeme .hlp__main.is-hid .hlp__nav { display:none; }
  #w-leeme .hlp__main:not(.is-hid) { flex-direction:column; height:auto; }
  #w-leeme .hlp__main:not(.is-hid) .hlp__nav { flex: none; height: 215px; min-height: 0; }
  #w-leeme .hlp__main:not(.is-hid) .hlp__page { min-height: 180px; }
}


/* en celular, maximizar ocupa todo el ancho y alto del área de escritorio,
   sin los márgenes laterales que dejaban las ventanas en tamaño normal. */
@media (max-width: 1023px) {
  .workspace > .window.is-max:not([hidden]) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    justify-self: stretch;
    align-self: stretch;
  }
}

/* correcciones puntuales solicitadas para maximizar en celular.
   La ventana termina antes de la barra de tareas y Ayuda/Leeme extiende su fondo,
   no el margen gris de la ventana. */
@media (max-width: 1023px) {
  .workspace > .window.is-max:not([hidden]) {
    position: fixed !important;
    inset: 0 0 var(--taskbar-h) 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
  }

  #w-leeme.is-max {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #w-leeme.is-max .hlp {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto;
    background: #c0c0c0;
  }
  #w-leeme.is-max .hlp__main,
  #w-leeme.is-max .hlp__main:not(.is-hid) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
    min-height: 0;
    background: #c0c0c0;
  }
  #w-leeme.is-max .hlp__main:not(.is-hid) .hlp__nav {
    flex: 0 0 215px;
    height: 215px;
    min-height: 0;
  }
  #w-leeme.is-max .hlp__page {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
  }
  #w-leeme.is-max .hlp__tabbody,
  #w-leeme.is-max .hlp__content,
  #w-leeme.is-max .hlp__text {
    min-height: 0;
  }
}


/* en celular Google Earth estira el mapa dentro de la ventana maximizada,
   no su altura por fuera del contenido (que dejaba una franja gris inferior).
   Las ventanas fijas ocupan toda el área visible y siguen pudiéndose cerrar. */
@media (max-width: 1023px) {
  #w-earth.is-max > .win-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #w-earth.is-max > .win-scroll > .earth {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  #w-earth.is-max .earth__body {
    height: auto !important;
    min-height: 0;
    flex: 1 1 auto;
  }
  .workspace > .window.window--fixed:not([hidden]) {
    position: fixed !important;
    inset: 0 0 var(--taskbar-h) 0 !important;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 30;
  }
  .workspace > .window.window--fixed:not([hidden]) > .win-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

/* ventanas compactas centradas en celular; Ayuda y Fondo ocupan el área completa. */
@media (max-width: 1023px) {
  /* Buscaminas, calculadora y teléfono conservan un tamaño compacto y se centran
     tanto al abrirse como al volver desde la barra de tareas. */
  .workspace > #w-mines.window--fixed:not([hidden]),
  .workspace > #w-calc.window--fixed:not([hidden]),
  .workspace > #w-dial.window--fixed:not([hidden]) {
    inset: auto !important;
    left: 50% !important;
    top: calc((100dvh - var(--taskbar-h)) / 2) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--taskbar-h) - 16px) !important;
    margin: 0 !important;
    overflow: auto !important;
  }

  #w-mines > .win-scroll,
  #w-calc > .win-scroll,
  #w-dial > .win-scroll {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  /* Ayuda y Propiedades de pantalla sí rellenan toda el área útil, hasta la barra. */
  .workspace > #w-leeme:not([hidden]),
  .workspace > #w-bg:not([hidden]) {
    position: fixed !important;
    inset: 0 0 var(--taskbar-h) 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #w-bg > .win-scroll,
  #w-leeme > .win-scroll {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  #w-bg > .win-scroll > .dun,
  #w-leeme > .win-scroll > .hlp {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}


/* las ventanas fijas recuperan su tamaño de aplicación en celular y se centran
   en el escritorio; no se estiran a pantalla completa. Solo afecta a las ventanas
   solicitadas y deja intactas las reglas de maximización de las ventanas normales. */
@media (max-width: 1023px) {
  .workspace > :is(#w-mines, #w-calc, #w-bg, #w-lang, #w-cal, #w-pc).window--fixed:not([hidden]) {
    position: fixed !important;
    left: 50% !important;
    top: calc((100dvh - var(--taskbar-h)) / 2) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    box-sizing: border-box !important;
    width: max-content !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--taskbar-h) - 16px) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
  }
  #w-mines, #w-calc { width: max-content !important; }
  #w-bg { width: min(440px, calc(100vw - 16px)) !important; }
  #w-lang { width: min(380px, calc(100vw - 16px)) !important; }
  #w-cal { width: min(450px, calc(100vw - 16px)) !important; }
  #w-pc { width: min(380px, calc(100vw - 16px)) !important; }
  .workspace > :is(#w-mines, #w-calc, #w-bg, #w-lang, #w-cal, #w-pc).window--fixed:not([hidden]) > .win-scroll {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--taskbar-h) - 48px) !important;
    overflow: auto !important;
  }
}


/* correcciones puntuales solicitadas. Fondo fijo sin scroll; icono de error;
   las ventanas fijas permanecen centradas al restaurarse desde la barra de tareas. */
@media (max-width: 1023px) {
  #w-bg:not([hidden]) { overflow: hidden !important; }
  #w-bg > .win-scroll {
    overflow: hidden !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #w-bg > .win-scroll > .dun {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .workspace > :is(#w-mines, #w-calc, #w-bg, #w-lang, #w-cal, #w-pc, #w-dial).window--fixed:not([hidden]) {
    left: 50% !important;
    top: calc((100dvh - var(--taskbar-h)) / 2) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Error: círculo rojo con una X, diferenciado del triángulo de advertencia. */
.dialog__x--error {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; background: #d40000; color: #fff;
  border: 2px solid #a00000; box-shadow: inset 1px 1px 0 #ff7777;
  font: 700 23px/1 Arial, sans-serif;
}

/* corrección puntual: Propiedades de pantalla es fija y no debe tener scroll;
   LEEME abre maximizada en móvil y su contenido ocupa el área sin margen gris extra. */
@media (max-width: 1023px) {
  #w-bg.window--fixed:not([hidden]),
  #w-bg.window--fixed:not([hidden]) > .win-scroll,
  #w-bg.window--fixed:not([hidden]) > .win-scroll > .dun {
    overflow: hidden !important;
  }
  #w-bg.window--fixed:not([hidden]) > .win-scroll {
    max-height: none !important;
    flex: 1 1 auto !important;
  }
  #w-leeme:not([hidden]) {
    position: fixed !important;
    inset: 0 0 var(--taskbar-h) 0 !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #w-leeme:not([hidden]) .hlp,
  #w-leeme:not([hidden]) .hlp__main,
  #w-leeme:not([hidden]) .hlp__main:not(.is-hid) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    background: #d4d0c8 !important;
  }
}


/* compactar la barra de tareas en celular cuando hay más de cinco ventanas,
   como en Windows, para evitar que los últimos iconos se superpongan. */
@media (max-width: 1023px) {
  .taskbar.is-crowded .taskbar__tasks {
    gap: 2px;
    overflow: hidden;
  }
  .taskbar.is-crowded .task {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 1px;
    padding-right: 1px;
    gap: 0;
  }
  .taskbar.is-crowded .task img {
    width: 16px;
    height: 16px;
    max-width: 100%;
    object-fit: contain;
  }
}


/* Propiedades de pantalla es una ventana fija: nunca debe mostrar scroll. */
#w-bg { overflow: hidden !important; }
#w-bg, #w-bg > .win-scroll, #w-bg > .win-scroll > .dun { overflow: hidden !important; }
#w-bg > .win-scroll { max-height: none !important; }


/* Propiedades de pantalla mantiene exactamente el mismo tamaño al cambiar de solapa. */
html body #w-bg {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
html body #w-bg .dun {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html body #w-bg .dun__tabs,
html body #w-bg .dun__btns { flex: 0 0 auto !important; }
html body #w-bg .dun__body:not([hidden]) {
  box-sizing: border-box !important;
  flex: 0 0 360px !important;
  height: 360px !important;
  min-height: 360px !important;
  max-height: 360px !important;
  overflow: hidden !important;
}
@media (max-width: 520px) {
  html body #w-bg .dun__body:not([hidden]) {
    flex-basis: 300px !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}

/* Propiedades de pantalla conserva la misma altura en todas las solapas. */
html body #w-bg.window--fixed {
  display: flex !important;
  flex-direction: column !important;
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
  overflow: hidden !important;
}
html body #w-bg.window--fixed > .title-bar { flex: 0 0 auto !important; }
html body #w-bg.window--fixed > .dun,
html body #w-bg.window--fixed > .win-scroll > .dun {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
@media (max-width: 520px) {
  html body #w-bg.window--fixed {
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
  }
}

/* La ventana fija de Propiedades de pantalla debe respetar el atributo hidden.
   El display:flex del tamaño fijo no puede impedir que el botón Cerrar la oculte. */
html body #w-bg.window--fixed[hidden] {
  display: none !important;
}


/* Propiedades de pantalla en celular/tablet: MISMO tamano en las tres solapas.
   Antes el ancho se calculaba segun el contenido de cada solapa (width:auto + left:50%) y la ventana cambiaba al pasar de Fondo a Protector a Apariencia.
   Ahora ancho y alto son fijos y las solapas rellenan el espacio sobrante. */
@media (max-width: 1023px) {
  html body .workspace > #w-bg.window--fixed:not([hidden]) {
    position: fixed !important; inset: auto !important;
    left: 50% !important; top: calc((100dvh - var(--taskbar-h)) / 2) !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important; margin: 0 !important; box-sizing: border-box !important;
    width: min(440px, calc(100vw - 16px)) !important; min-width: 0 !important; max-width: calc(100vw - 16px) !important;
    height: min(480px, calc(100dvh - var(--taskbar-h) - 16px)) !important; min-height: 0 !important; max-height: calc(100dvh - var(--taskbar-h) - 16px) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  html body .workspace > #w-bg.window--fixed:not([hidden]) > .title-bar,
  html body .workspace > #w-bg.window--fixed:not([hidden]) > .status-bar { flex: 0 0 auto !important; }
  html body .workspace > #w-bg.window--fixed:not([hidden]) > :is(.dun, .win-scroll) {
    flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
  }
  html body .workspace > #w-bg.window--fixed:not([hidden]) .win-scroll > .dun { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
  html body .workspace > #w-bg.window--fixed:not([hidden]) .dun__body:not([hidden]) {
    flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important;
  }
}
@media (max-width: 520px) {
  html body .workspace > #w-bg.window--fixed:not([hidden]) { height: min(440px, calc(100dvh - var(--taskbar-h) - 16px)) !important; }
}

/* ventana SAP (#w-sap): tamaño FIJO y UN SOLO scroll por pantalla.
   Reemplaza a los bloques anteriores de celular y de escritorio, que se pisaban entre si y dejaban dos barras de scroll anidadas.
   Regla unica para todas las pantallas (Easy Access, PA30, SE38, dump, debugger, PE02, PC00_M29_CALC) y todos los modos
   (escritorio, maximizada, redimensionada a mano y celular):
     - La ventana no depende del contenido: escritorio 720x540 (se achica si la pantalla es chica); maximizada/redimensionada
       usa el tamaño elegido; celular/tablet va maximizada.
     - Barra de titulo, menu, barra de comandos, titulo y botonera quedan fijos; el mensaje de estado queda abajo, fijo.
     - Solo UNA zona scrollea (el cuerpo de la pantalla), en ambos ejes si hace falta. Nada dentro tiene scroll propio.
   Para revertir: borrar este bloque. */
/* 1) Tamaño de la ventana en escritorio (maximizada y redimensionada a mano mandan por su cuenta) */
@media (min-width: 1024px) {
  html body #w-sap:not([hidden]):not(.is-max):not(.is-sized) {
    box-sizing: border-box; width: min(720px, calc(100% - 190px)); min-width: 0; max-width: 100%;
    height: min(540px, max(320px, calc(100dvh - var(--taskbar-h) - 90px))); min-height: 0; max-height: none;
  }
  html body #w-sap.is-float:not(.is-max):not(.is-sized) { width: min(720px, calc(100vw - 20px)); max-height: calc(100dvh - var(--taskbar-h)); }
}
/* 2) El marco (la ventana, o su .win-scroll cuando esta maximizada/redimensionada) es una columna que no scrollea */
html body #w-sap:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
html body #w-sap > .win-scroll {
  display: flex !important; flex-direction: column; flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden !important;
}
html body #w-sap :is(.title-bar, .sapx__menu, .sapx__tb, .sapx__head, .sapx__tb2, .sx__msg) { flex: none; }
/* 3) Easy Access: el unico scroll es el de .sap (arbol + panel) */
html body #w-sap:not(.is-sx) .sap {
  flex: 1 1 0; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; align-content: stretch;
}
html body #w-sap:not(.is-sx) .sap__tree { max-height: none; overflow: visible; }
/* 4) Pantallas de transaccion: columna que no scrollea; su cuerpo es el unico scroll */
html body #w-sap .sx__screen:not([hidden]) {
  display: flex !important; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden;
}
html body #w-sap .sx__screen > :is(.sx__body, .sx__code, .sx__dump, .sx__dbg, .sx__rule) {
  flex: 1 1 0; min-height: 0; min-width: 0; height: auto; max-height: none;
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html body #w-sap .sx__screen > :is(.sx__body, .sx__dump) { align-content: flex-start; }
/* 5) Dentro del cuerpo nada scrollea por su cuenta: crece con su contenido y scrollea el cuerpo */
html body #w-sap .sx__screen :is(.sx__dtree, .sx__dmain, .dbg__code, .dbg__sc, .pc__res .sx__code) {
  height: auto; max-height: none; overflow: visible;
}
html body #w-sap .sx__screen .dbg__code { min-height: 0; }
html body #w-sap #w-dump .sx__dhead dt { min-width: 0; }
html body #w-sap #w-dump .sx__dhead dd { min-width: 0; overflow-wrap: anywhere; }
/* En celular/tablet el arbol del dump va arriba y el texto debajo (una sola columna, un solo scroll) */
@media (max-width: 1023px) {
  html body #w-sap #w-dump .sx__dump { flex-direction: column; flex-wrap: nowrap; }
  html body #w-sap #w-dump .sx__dtree { flex: none; border-right: 0; border-bottom: 1px solid #6a7f90; }
  html body #w-sap #w-dump .sx__dmain { flex: none; }
}

/* Propiedades de pantalla > Protector de pantalla en celular/tablet.
   La ventana es de tamaño fijo y sin scroll, y el grupo "Características de ahorro de energía" quedaba cortado.
   Se compacta SOLO esta solapa (monitor más chico y espacios más justos) y, si la pantalla es muy baja,
   se permite scroll vertical dentro de la solapa como respaldo. Las solapas Fondo y Apariencia no cambian. */
@media (max-width: 1023px) {
  html body #w-bg .dun__body[data-panel="ss"]:not([hidden]) { gap: 4px !important; padding: 6px 8px !important; overflow-x: hidden !important; overflow-y: auto !important; }
  html body #w-bg [data-panel="ss"] .mon { flex: none; }
  html body #w-bg [data-panel="ss"] .mon__scr { width: 112px; height: 78px; border-width: 7px; }
  html body #w-bg [data-panel="ss"] .mon__stand { width: 34px; height: 5px; }
  html body #w-bg [data-panel="ss"] .mon__base { width: 70px; height: 5px; }
  html body #w-bg [data-panel="ss"] .ss__grp { flex: none; margin: 0; padding: 3px 8px 5px; }
  html body #w-bg [data-panel="ss"] .ss__row { margin-bottom: 4px; }
  html body #w-bg [data-panel="ss"] .ss__row2 { margin-bottom: 0; }
  html body #w-bg [data-panel="ss"] .ss__energy { gap: 10px; padding: 0 2px 3px; }
  html body #w-bg [data-panel="ss"] .ss__energy img { width: 60px; height: 40px; }
}

/* celular: las palabras de las barras de menú no se parten en dos líneas ("Archi/vo").
   Cada opción mantiene su palabra entera y, si no entran todas, la barra pasa a una segunda fila. */
.menu-bar > span { white-space: nowrap; }
@media (max-width: 520px) {
  .menu-bar { flex-wrap: wrap; row-gap: 0; }
  .menu-bar > span { padding-left: 4px; padding-right: 4px; }
}

/* calculadora: el botón "Retroceso" no parte la palabra en dos líneas en celular. */
.calc__top .calc__k { white-space: nowrap; }
.calc__top .calc__k[data-k="BS"] { flex: 1.7; }
@media (max-width: 520px) { .calc__top { gap: 4px; } .calc__top .calc__k { font-size: 11px; letter-spacing: -.2px; } }

/* Debugger ABAP (SE38 con /h): el codigo fuente vuelve a tener su propia caja con scroll.
   La regla "nada scrollea por su cuenta" lo dejaba con overflow visible: las lineas de abajo se dibujaban encima de la barra
   de estado (Scope / Ln / Col) y las lineas largas se metian bajo el panel de la pila. El resto de la pantalla sigue con un solo scroll. */
html body #w-sap #w-dbg .dbg__src .dbg__code { flex: none; height: 262px; min-height: 262px; max-height: 262px; overflow: auto; }
html body #w-sap #w-dbg .dbg__src { min-width: 0; overflow: hidden; }
/* con la ventana SAP maximizada el codigo aprovecha el alto disponible (en tamaño normal queda en 262px con su scroll). */
@media (min-width: 1024px) {
  html body #w-sap.is-max #w-dbg .dbg__src .dbg__code { height: max(262px, calc(100dvh - 400px)); min-height: max(262px, calc(100dvh - 400px)); max-height: max(262px, calc(100dvh - 400px)); }
}

/* Ayuda (LEEME) en celular: los botones de la barra de título (en especial Minimizar) tienen un área de toque más grande
   y no esperan el "doble toque" del navegador. Solo agranda la zona sensible; el dibujo del botón no cambia. */
@media (max-width: 1023px) {
  #w-leeme .title-bar__btn { position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  #w-leeme .title-bar__btn::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -1px; right: -1px; }
}

/* Ayuda (LEEME) - achicar y cambiar de tamaño.
   Escritorio: la ventana ya no tiene un alto mínimo fijo al redimensionarla y el árbol de contenido se achica con ella. */
@media (min-width: 1024px) {
  #w-leeme.is-sized:not(.is-max) { min-height: 0; min-width: 0; }
  #w-leeme .hlp__nav { flex: 0 1 38%; max-width: 210px; min-width: 80px; }
  #w-leeme .hlp__page { min-width: 60px; }
  #w-leeme .hlp__tabs button { white-space: nowrap; padding-left: 4px; padding-right: 4px; overflow: hidden; }
  #w-leeme .hlp__tb { overflow: hidden; }
}
/* Celular: el cuadrado del medio (Restaurar) achica la Ayuda a una ventana centrada en lugar de dejarla a pantalla completa.
   Con tamaño propio (arrastrando los bordes) manda el tamaño que se fija por JS. */
@media (max-width: 1023px) {
  html body .workspace > #w-leeme.is-restored-center:not(.is-max):not([hidden]) {
    position: fixed !important;
    left: var(--restore-x, 50%) !important;
    top: var(--restore-y, 50%) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - var(--taskbar-h) - 16px) !important;
  }
  html body .workspace > #w-leeme.is-restored-center:not(.is-max):not(.is-sized):not([hidden]) {
    width: min(360px, calc(100vw - 24px)) !important;
    height: min(480px, calc(100dvh - var(--taskbar-h) - 24px)) !important;
  }
  html body #w-leeme.is-restored-center:not(.is-max) .hlp__main:not(.is-hid) .hlp__nav { flex: 0 0 38%; height: auto; min-height: 70px; }
  html body #w-leeme.is-restored-center:not(.is-max) .hlp__main:not(.is-hid) .hlp__page { min-height: 0; }
}