/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: tokens, base, componentes, contenido de cada ventana, responsive y ventanas nuevas. Es la base: las demas hojas la pisan.
 * Numero = linea de este archivo donde empieza el comentario de esa parte.
 *
 *   linea 70: [general] Fuente MS Sans Serif
 *   linea 87: [general] Tokens
 *   linea 111: [general] Base
 *   linea 167: [barra de tareas] Barra de tareas (161: solo icono en pantallas chicas)
 *   linea 242: [menu Inicio] Menu Inicio
 *   linea 287: [escritorio] Escritorio (layout); 236: iconos
 *   linea 338: [ventanas] Ventanas (marco, barra de titulo, botones)
 *   linea 434: [contenido] Contenido de cada ventana
 *   linea 437: [#w-about] Sobre mi
 *   linea 457: [#w-exp] Terminal
 *   linea 502: [#w-skills] Skills (propiedades)
 *   linea 531: [#w-skills] Barra de progreso
 *   linea 549: [#w-cockpit] Explorador (Migration Cockpit)
 *   linea 574: [#w-abap] Bloc de notas
 *   linea 586: [#w-paint] Paint
 *   linea 648: [footer] Footer
 *   linea 679: [responsive] >= 768px
 *   linea 689: [responsive] >= 1024px: iconos a un costado
 *   linea 718: [ventanas nuevas] Ventanas nuevas (grupo hasta la linea 798)
 *   linea 726: [#w-cal] Calendario
 *   linea 739: [#w-pc] Mi PC
 *   linea 746: [#w-pe51] Recibo (PE51)
 *   linea 757: [#w-sap] SAP Easy Access
 *   linea 772: [sin ventana identificada] Marcador
 *   linea 781: [#w-calc] Calculadora
 *   linea 794: [#w-mail] Outlook Express
 *   linea 804: [#w-lang] Carga de ingles
 *   linea 809: [#w-debug] Internet Explorer (debug)
 *   linea 819: [#w-sap] SAP mas fiel
 *   linea 833: [#w-abap] Bloc de notas / menus con letra subrayada
 *   linea 837: [#w-paint] herramientas
 *   linea 841: [general] Silenciar
 *   linea 844: [#w-mines] Buscaminas
 *   linea 858: [errores] Mensaje de error
 *   linea 868: [#w-sap] SAP Easy Access (estilo SAP GUI clasico)
 *   linea 896: [#w-dial / #w-bg] Pestanas y dialogos
 *   linea 912: [#w-bg] Monitor y lista de fondos
 *   linea 922: [#w-dial] telefono legible (857: separar espacios del pixel font)
 *   linea 933: [general] Combos, checkboxes y selects estilo Windows 98
 *   linea 949: [general] Pestanas (botones reales y spans decorativos)
 *   linea 955: [#w-dial] Acceso telefonico a redes
 *   linea 973: [#w-bg] Propiedades de Pantalla
 *   linea 1005: [#w-bg] Pantalla completa del protector
 *   linea 1010: [#w-sap] SAP Easy Access (estilo SAP GUI, como el screenshot)
 *
 * POR VENTANA (lineas donde se habla de cada una):
 *   #w-abap: 574, 833
 *   #w-about: 437
 *   #w-bg: 896, 912, 973, 1005
 *   #w-cal: 726
 *   #w-calc: 781
 *   #w-cockpit: 549
 *   #w-debug: 809
 *   #w-dial: 896, 922, 955
 *   #w-exp: 457
 *   #w-lang: 804
 *   #w-mail: 794
 *   #w-mines: 844
 *   #w-paint: 586, 837
 *   #w-pc: 739
 *   #w-pe51: 746
 *   #w-sap: 757, 819, 868, 1010
 *   #w-skills: 502, 531
 * ========================================================================= */
/* ==========================================================================
   Fuente: MS Sans Serif (la de Windows 98), pixelada
   ========================================================================== */
@font-face {
  font-family: 'Pixelated MS Sans Serif';
  src: url('../fonts/ms_sans_serif.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pixelated MS Sans Serif';
  src: url('../fonts/ms_sans_serif_bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --teal: #008080;
  --silver: #c0c0c0;
  --navy: #000080;
  --sky: #1084d0;
  --btn-face: #c0c0c0;

  --bevel-raised: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  --bevel-pressed: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  --bevel-window: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  --bevel-terminal: inset -1px -1px #dfdfdf, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  --bevel-field: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --bevel-status: inset -1px -1px #dfdfdf, inset 1px 1px grey;
  --bevel-group: inset -1px -1px #fff, inset 1px 1px grey;

  --font: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, sans-serif;
  --fs: 11px;            /* tamaño nativo de la fuente: se ve nítida */
  --taskbar-h: 36px;
  --gap: 16px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.35;
  color: #000;
  background-color: var(--desk-color, var(--teal));
  background-image: var(--desk-pat, none), var(--desk-img, none);
  background-repeat: repeat, var(--desk-repeat, repeat);
  background-position: 0 0, var(--desk-pos, 0 0);
  background-size: auto, var(--desk-size, auto);
  background-attachment: fixed;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

[hidden] { display: none !important; }

::selection { color: #fff; background-color: var(--navy); }

:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Barra de tareas
   ========================================================================== */
.taskbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--taskbar-h);
  padding: 4px;
  background: var(--silver);
  box-shadow: var(--bevel-raised);
}

.taskbar__start,
.task {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 6px;
  background: var(--silver);
  box-shadow: var(--bevel-raised);
}

.taskbar__start { font-weight: 700; }

.taskbar__start:active,
.taskbar__start[aria-expanded='true'],
.task.is-active {
  box-shadow: var(--bevel-pressed);
}

.taskbar__tasks {
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 0;
  height: 100%;
}

.task {
  flex: 0 1 160px;
  min-width: 28px;
  justify-content: center;
}

.task.is-active {
  font-weight: 700;
  background: repeating-conic-gradient(#fff 0% 25%, var(--silver) 0% 50%) 50% / 2px 2px;
}

.task img { flex: none; }

.task__label,
.taskbar__start-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* En pantallas chicas solo se ve el ícono */
.task__label { display: none; }

.taskbar__clock {
  flex: none;
  padding: 0 8px;
  line-height: 24px;
  box-shadow: var(--bevel-status);
}

.taskbar__clock:empty { display: none; }

/* ==========================================================================
   Menú Inicio
   ========================================================================== */
.start-menu {
  position: fixed;
  bottom: var(--taskbar-h);
  left: 2px;
  z-index: 50;
  min-width: 200px;
  max-height: calc(100vh - var(--taskbar-h));
  overflow-y: auto;
  padding: 3px 3px 3px 28px;
  /* La barra azul va como fondo del menú (no se mueve con el scroll) y cubre toda la altura visible */
  background: linear-gradient(0deg, var(--navy), #1084d0) 3px 3px / 22px calc(100% - 6px) no-repeat, var(--silver);
  box-shadow: var(--bevel-raised);
}

.start-menu::before { content: none; }

.start-menu li > button,
.start-menu li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
}

.start-menu li > button:hover,
.start-menu li > a:hover,
.start-menu li > button:focus-visible,
.start-menu li > a:focus-visible {
  color: #fff;
  background: var(--navy);
  outline: 0;
}

.start-menu__sep {
  height: 2px;
  margin: 3px 0;
  border-top: 1px solid grey;
  border-bottom: 1px solid #fff;
}

/* ==========================================================================
   Escritorio (layout)
   ========================================================================== */
.desktop {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) 12px calc(var(--taskbar-h) + var(--gap));
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--gap);
  min-width: 0;
}

/* Íconos */
.icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px 0;
  justify-items: center;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  padding: 2px;
  color: #fff;
  text-align: center;
  overflow-wrap: anywhere;
}

.icon span { padding: 0 2px; }

.icon:hover img,
.icon:active img { opacity: 0.85; }

.icon:focus-visible { outline: 0; }

.icon:focus-visible span,
.icon:active span {
  background: var(--navy);
  outline: 1px dotted #ff0;
}

/* ==========================================================================
   Ventanas
   ========================================================================== */
.window {
  padding: 3px;
  background: var(--silver);
  box-shadow: var(--bevel-window);
}

.window--terminal {
  background: #000;
  box-shadow: var(--bevel-terminal);
}

.window.is-max {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 2px 3px 3px;
  color: #bfbfbf;
  background: linear-gradient(90deg, grey, #b5b5b5);
}

.window.is-active .title-bar {
  color: #fff;
  background: linear-gradient(90deg, var(--navy), var(--sky));
}

.title-bar img { flex: none; }

.title-bar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: inherit;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title-bar__controls { display: flex; gap: 2px; }
.title-bar__controls .title-bar__btn:last-child { margin-left: 2px; }

.title-bar__btn {
  display: block;
  width: 22px;
  height: 20px;
  background: var(--btn-face) no-repeat 5px 5px;
  box-shadow: var(--bevel-raised);
}

.title-bar__btn:active { box-shadow: var(--bevel-pressed); }

.title-bar__btn--minimize { background-image: url('../img/bar/minimize.png'); }
.title-bar__btn--maximize { background-image: url('../img/bar/maximize.png'); }
.title-bar__btn--close    { background-image: url('../img/bar/close.png'); }

.menu-bar {
  display: flex;
  gap: 2px;
  padding: 2px 0;
}

.menu-bar span { padding: 1px 6px; }

.field {
  color: #000;
  background: #fff;
  box-shadow: var(--bevel-field);
}

.status-bar {
  display: flex;
  gap: 1px;
  margin-top: 3px;
}

.status-bar__field {
  flex: 1;
  padding: 3px 4px;
  min-height: 20px;
  box-shadow: var(--bevel-status);
}

.status-bar__field:last-child { flex: 0 0 auto; min-width: 90px; }

/* ==========================================================================
   Contenido de cada ventana
   ========================================================================== */
/* Sobre mí */
.about {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.about__headline {
  font-weight: 700;
  text-decoration: underline;
}

.text-body {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  padding: 8px;
}

/* Terminal */
.terminal {
  padding: 5px 10px;
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: calc(var(--fs) + 2px);
}

.terminal p { margin: 5px 0; }
.terminal > p:first-child { margin-bottom: 1em; }

.terminal__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  vertical-align: text-bottom;
  background: #fff;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.courses { margin: 1em 0; }
.course { margin-bottom: 1.25em; }

.course__name   { margin-left: 1em; color: #5ce1e6; }
.course__school { margin-left: 2em; color: #fcc343; }
.course__date   { margin-left: 3em; color: var(--silver); }
.course__date--job { margin-left: 1em; }

.tasks { margin: 6px 0 0 1em; }

.tasks li {
  position: relative;
  margin-bottom: 4px;
  padding-left: 1.4em;
}

.tasks li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: #fcc343;
}

/* Skills (propiedades) */
.skill-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px 4px;
}

.group {
  padding: 8px 10px 10px;
  border: 0;
  box-shadow: var(--bevel-group);
}

.group legend { padding: 0 4px; }

.skill-list {
  padding: 6px 8px;
  color: #000;
  background: #fff;
  box-shadow: var(--bevel-field);
  columns: 2 11em;
  column-gap: 16px;
}

.skill-list li { margin-bottom: 4px; break-inside: avoid; }

.skill-label { margin-bottom: 6px; }

/* Barra de progreso: 13 segmentos de 10px + 1px de separación */
.progress {
  --segment: 11px;
  width: calc(13 * var(--segment) + 10px);
  max-width: 100%;
  padding: 5px;
  background: var(--silver);
  box-shadow: var(--bevel-pressed);
}

.progress::before {
  content: '';
  display: block;
  width: calc(var(--level) * var(--segment));
  height: 20px;
  background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px var(--segment));
}

/* Explorador (Migration Cockpit) */
.explorer__address {
  margin: 2px 0 4px;
  padding: 4px 6px;
}

.explorer__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}

.explorer__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas: 'icon name' 'icon desc';
  column-gap: 8px;
  align-items: center;
}

.explorer__item img { grid-area: icon; }
.explorer__name { grid-area: name; font-weight: 700; }
.explorer__desc { grid-area: desc; color: #444; }

/* Bloc de notas */
.notepad__text {
  max-height: 340px;
  margin: 2px 0 0;
  padding: 6px 8px;
  overflow: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: calc(var(--fs) + 2px);
  line-height: 1.4;
  tab-size: 2;
}

/* Paint */
.paint {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.paint__tools {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  grid-auto-rows: 24px;
  align-content: start;
  gap: 0;
  padding: 2px;
  flex: none;
}

.paint__tool {
  display: block;
  background: var(--silver);
  box-shadow: var(--bevel-raised);
}

.paint__tool:first-child { box-shadow: var(--bevel-pressed); }

.paint__area {
  flex: 1;
  min-width: 0;
  padding: 6px;
  overflow: auto;
  background: grey;
  box-shadow: var(--bevel-field);
}

.paint__canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.paint__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: calc(14 * 16px + 8px);
  max-width: 100%;
  margin: 4px 0 0 4px;
  padding: 2px;
  box-shadow: var(--bevel-field);
}

.paint__swatch {
  width: 16px;
  height: 16px;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 16px;
  padding: 16px 12px 40px;
}

.footer__item {
  display: flex;
  flex: 1 1 130px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
}

a.footer__item:hover .footer__text { text-decoration: underline; }

.footer__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.footer__text { overflow-wrap: anywhere; }

/* ==========================================================================
   >= 768px
   ========================================================================== */
@media (min-width: 768px) {
  :root { --fs: 12px; }

  .task__label { display: block; }
  .footer__img { width: 56px; height: 56px; }
}

/* ==========================================================================
   >= 1024px: íconos a un costado
   ========================================================================== */
@media (min-width: 1024px) {
  .desktop {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .icons {
    grid-template-columns: repeat(3, 76px);
    justify-content: start;
    position: sticky;
    top: var(--gap);
  }

}

@media (min-width: 1280px) {
  .workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #w-exp, #w-skills, #w-cockpit, #w-folder, #w-sap, #w-pa30, #w-se38, #w-dump { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal__cursor { animation: none; }
}

/* ==========================================================================
   Ventanas nuevas
   ========================================================================== */
.icon img { width: 32px; height: 32px; object-fit: contain; }
.icon span { max-width: 100%; }
.btn { min-width: 24px; padding: 2px 8px; background: var(--silver); box-shadow: var(--bevel-raised); }
.btn:active { box-shadow: var(--bevel-pressed); }

/* Calendario */
.cal { margin-top: 6px; }
.cal__tabs { display: flex; gap: 2px; padding-left: 4px; }
.cal__tabs span { padding: 3px 10px; box-shadow: inset 1px 1px #fff, inset -1px 0 grey; }
.cal__tabs .is-on { font-weight: 700; }
.cal__body { padding: 8px; box-shadow: inset 1px 1px #fff, inset -1px -1px grey; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cal__grid { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: center; }
.cal__grid th, .cal__grid td { padding: 3px 0; }
.cal__grid th { color: #fff; background: grey; font-weight: 400; }
.cal__grid td.is-bday { color: #fff; background: var(--navy); font-weight: 700; }
.cal__note { margin-top: 6px; min-height: 2.8em; }

/* Mi PC */
.sys { display: flex; gap: 10px; margin-top: 6px; padding: 8px; }
.sys img { flex: none; }
.sys__list { flex: 1; min-width: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; padding: 8px; }
.sys__list dt { font-weight: 700; }
.sys__list dd { min-width: 0; overflow-wrap: anywhere; }

/* Recibo (PE51) */
.slip { margin-top: 2px; padding: 8px; }
.slip p { margin-bottom: 4px; }
.slip__scroll { overflow-x: auto; margin: 6px 0; }
.slip__table { width: 100%; min-width: 300px; border-collapse: collapse; }
.slip__table th, .slip__table td { padding: 3px 6px; border: 1px solid grey; text-align: right; }
.slip__table th:first-child, .slip__table td:first-child { text-align: left; }
.slip__table thead th { background: var(--silver); }
.slip__table tfoot td { font-weight: 700; }
.slip__note { color: #444; }

/* SAP Easy Access */
.sap__bar { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 3px 6px; }
.sap__ok { flex: none; color: #080; font-weight: 700; }
.sap__cmd { flex: 0 1 120px; min-width: 0; padding: 2px 4px; font: inherit; background: #fff; border: 0; box-shadow: var(--bevel-field); }
.sap__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-weight: 700; }
.sap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sap__tree { max-height: 320px; padding: 6px; overflow: auto; }
.sap__tree ul { margin-left: 16px; }
.sap__node { display: block; width: 100%; padding: 2px 4px; text-align: left; overflow-wrap: anywhere; }
.sap__node:hover, .sap__node.is-sel { color: #fff; background: var(--navy); }
.sap__info { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; }
.sap__logo { width: 100%; max-width: 240px; height: auto; image-rendering: pixelated; }
.sap__detail { width: 100%; text-align: center; overflow-wrap: anywhere; }
.sap__detail .btn { margin-top: 6px; }

/* Marcador */
.dialer { padding: 12px 8px; }
.dialer__label { margin-bottom: 4px; }
.dialer__num { padding: 8px; font-weight: 700; font-size: calc(var(--fs) + 4px); overflow-wrap: anywhere; }

@media (min-width: 768px) {
  .sap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Calculadora (Windows 98) */
.calc { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; margin: 2px auto 0; padding: 6px; }
.calc__disp { padding: 4px 6px; min-height: 26px; text-align: right; font-size: calc(var(--fs) + 4px); overflow: hidden; white-space: nowrap; }
.calc__top { display: flex; gap: 6px; }
.calc__mem { flex: none; width: 30px; height: 26px; text-align: center; line-height: 26px; }
.calc__mem.is-on::after { content: 'M'; }
.calc__top .calc__k { flex: 1; }
.calc__keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.calc__k { height: 26px; padding: 0 2px; background: var(--silver); box-shadow: var(--bevel-raised); font-weight: 700; overflow: hidden; }
.calc__k:active { box-shadow: var(--bevel-pressed); }
.calc__k--num { color: #0000ff; }
.calc__k--red { color: #ff0000; }

/* Outlook Express */
.oe { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0; }
.oe__tools { display: flex; flex-wrap: wrap; gap: 4px; }
.oe__send { font-weight: 700; }
.oe__hdr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.oe__hdr dd { padding: 3px 6px; overflow-wrap: anywhere; }
.oe__hdr a { text-decoration: underline; color: #0000ee; }
.oe__body { min-height: 110px; padding: 8px; }
.oe__body p { margin-bottom: 0.8em; }

/* Carga de inglés */
.load { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px 8px; }
.load .progress { max-width: 100%; }
.load__pct { font-weight: 700; }

/* Internet Explorer (debug) */
.ie__tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
.ie__page { padding: 12px; max-height: 340px; overflow: auto; }
.ie__page p, .ie__page hr { margin-bottom: 8px; }
.ie__h { margin-bottom: 8px; font-size: calc(var(--fs) + 6px); font-weight: 400; }
.ie__list { margin: 0 0 8px 20px; list-style: disc; }
.ie__list li { margin-bottom: 6px; }
.ie__link { color: #c00; text-decoration: underline; }
.ie__err { color: #444; }

/* SAP más fiel */
.sap__btns { display: flex; flex: none; gap: 2px; }
.sap__btns i { display: block; width: 22px; height: 20px; background: var(--silver); box-shadow: var(--bevel-raised); }
.sap__node::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  background: url('../img/win98/notepad-16.png') no-repeat;
}
.sap__node--folder::before { background-image: url('../img/win98/folder-16.png'); }

/* Bloc de notas / menús con letra subrayada */
.menu-bar--np span::first-letter { text-decoration: underline; }
.notepad__text { border: 0; background: #fff; }

/* Paint: herramientas */
.paint__tool { display: flex; align-items: center; justify-content: center; }
.paint__tool svg { display: block; }

/* Silenciar */
.taskbar__mute { flex: none; padding: 0 6px; line-height: 24px; box-shadow: var(--bevel-status); }

/* Buscaminas */
.mines { display: inline-block; margin: 4px auto 0; padding: 6px; box-shadow: var(--bevel-raised); }
.window:has(.mines) { width: fit-content; max-width: 100%; justify-self: start; }
.mines__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 4px 6px; box-shadow: var(--bevel-field); }
.mines__led { min-width: 44px; padding: 1px 3px; color: #f00; background: #000; font-family: 'Courier New', monospace; font-weight: 700; font-size: 20px; line-height: 24px; text-align: center; }
.mines__face { width: 28px; height: 28px; font-size: 18px; line-height: 24px; background: var(--silver); box-shadow: var(--bevel-raised); }
.mines__face:active { box-shadow: var(--bevel-pressed); }
.mines__board { display: grid; grid-template-columns: repeat(9, 24px); box-shadow: var(--bevel-field); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mines__c { width: 24px; height: 24px; padding: 0; font-size: 14px; font-weight: 700; line-height: 24px; text-align: center; background: var(--silver); box-shadow: var(--bevel-raised); }
.mines__c.is-open { box-shadow: inset 1px 1px grey; background: var(--silver); }
.mines__c.is-boom { background: #f00; }
.mines__c.n1 { color: #0000ff; } .mines__c.n2 { color: #008000; } .mines__c.n3 { color: #f00; } .mines__c.n4 { color: #000080; }
.mines__c.n5 { color: #800000; } .mines__c.n6 { color: #008080; } .mines__c.n7 { color: #000; } .mines__c.n8 { color: grey; }

/* Mensaje de error (como los de Windows) */
.dialog { position: fixed; top: 50%; left: 50%; z-index: 70; width: min(420px, 92vw); transform: translate(-50%, -50%); }
.dialog .title-bar { color: #fff; background: linear-gradient(90deg, var(--navy), var(--sky)); }
.dialog__body { display: flex; align-items: center; gap: 14px; padding: 18px 14px 14px; }
.dialog__body p { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dialog__x { flex: none; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: #f00; font-size: 20px; font-weight: 700; line-height: 32px; text-align: center; box-shadow: 1px 1px 0 grey; }
.dialog__btns { display: flex; justify-content: center; gap: 10px; padding: 6px 10px 12px; }
.dialog__btns .btn { min-width: 84px; padding: 4px 12px; text-align: center; }
.icon { word-break: break-word; }

/* ==========================================================================
   SAP Easy Access (estilo SAP GUI clásico)
   ========================================================================== */
.window--sap { --sap-blue: #1c2a7a; }
.sapx__menu { display: flex; align-items: center; gap: 12px; padding: 3px 8px; color: #e8ecff; background: linear-gradient(90deg, #14206e, #2a3f9c); overflow: hidden; }
.sapx__menu span { white-space: nowrap; }
.sapx__logo { margin-left: auto; padding: 0 8px; color: #fff; font-size: 16px; font-style: italic; letter-spacing: 1px; background: linear-gradient(90deg, #1b5fb5, #1d9ad8); }
.sapx__tb, .sapx__tb2 { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: #cdd2d6; }
.sapx__ok { flex: none; width: 22px; height: 20px; color: #0a0; font-weight: 700; line-height: 20px; text-align: center; background: var(--silver); box-shadow: var(--bevel-raised); }
.sapx__tb .sap__cmd { flex: 0 1 140px; }
.sapx__ico { display: flex; gap: 3px; margin-left: 6px; overflow: hidden; }
.sapx__ico i { flex: none; width: 20px; height: 18px; background: #e6e8ea; box-shadow: var(--bevel-raised); }
.sapx__head { padding: 8px 10px; color: #3a5a8c; background: #fff; font-size: calc(var(--fs) + 6px); font-weight: 700; }
.sapx__tb2 { flex-wrap: wrap; border-bottom: 1px solid #fff; }
.sapx__b { padding: 3px 10px; background: #dfe3e6; box-shadow: var(--bevel-raised); white-space: nowrap; }
.sapx__b.is-off { color: #8a9096; }
.window--sap .sap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
.window--sap .sap__tree { max-height: 340px; padding: 4px; overflow: auto; background: #cfe4f2; box-shadow: none; border-right: 1px solid #fff; }
.window--sap .sap__info { display: block; padding: 10px; background: #9fb6c8; box-shadow: none; }
.window--sap .sap__detail { color: #0b2a44; text-align: left; }
.window--sap .sap__node { padding: 1px 4px; color: #003c8f; }
.window--sap .sap__node--folder { color: #000; }
.window--sap .sap__node:hover, .window--sap .sap__node.is-sel { color: #fff; background: #1c3f94; }
.window--sap .sap__node::before { box-sizing: border-box; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; content: '✱'; color: #000; font-size: 10px; line-height: 12px; text-align: center; background: #fff; border: 1px solid #000; }
.window--sap .sap__node--folder::before { content: ''; width: 16px; height: 16px; border: 0; background: url('../img/win98/folder-16.png') no-repeat; }
.sapx__status { display: flex; justify-content: flex-end; gap: 2px; padding: 2px 4px; background: #b9c3cc; }
.sapx__status span { padding: 2px 10px; box-shadow: var(--bevel-status); white-space: nowrap; }

/* Pestañas y diálogos (acceso telefónico, pantalla) */
.dun { padding-top: 6px; }
.dun__tabs { display: flex; flex-wrap: wrap; gap: 1px; padding-left: 4px; }
.dun__tabs span { padding: 3px 8px; box-shadow: inset 1px 1px #fff, inset -1px 0 grey; }
.dun__tabs .is-on { font-weight: 700; }
.dun__body { display: flex; flex-direction: column; gap: 10px; padding: 10px; box-shadow: inset 1px 1px #fff, inset -1px -1px grey; }
.dun__name { display: flex; align-items: center; gap: 12px; }
.dun__sel { padding: 1px 4px; color: #fff; background: var(--navy); }
.dun__row { display: flex; flex-wrap: wrap; gap: 8px; }
.dun__f { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.dun__f--grow { flex: 1; min-width: 0; }
.dun__lbl.is-off, .dun__in.is-off { color: #808080; text-shadow: 1px 1px #fff; }
.dun__in { padding: 3px 6px; min-height: 22px; overflow-wrap: anywhere; }
.dun__btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 8px 4px 4px; }
.dun__btns .btn { min-width: 80px; padding: 4px 12px; text-align: center; }

/* Monitor y lista de fondos */
.mon { align-self: center; }
.mon__scr { width: 160px; height: 120px; border: 8px solid #c0c0c0; box-shadow: 0 0 0 1px #000, inset 1px 1px grey; background: #008080; }
.mon__base { width: 70px; height: 10px; margin: 0 auto; background: #c0c0c0; box-shadow: var(--bevel-raised); }
.bg__lbl { margin-bottom: 4px; }
.bg__list { max-height: 120px; overflow: auto; }
.bg__list button { display: block; width: 100%; padding: 2px 6px; text-align: left; }
.bg__list button.is-sel { color: #fff; background: var(--navy); }


/* ==========================================================================
   teléfono legible, ventana de acceso telefónico, SAP, propiedades de pantalla
   ========================================================================== */

/* El pixel font colapsa los espacios: los separamos a mano para que el número se lea */
.phone { word-spacing: .5em; letter-spacing: .03em; white-space: nowrap; }
.calc__disp { padding: 6px 8px; min-height: 32px; font-size: calc(var(--fs) + 5px); line-height: 1.5; }
.calc__disp.is-phone { font-weight: 700; word-spacing: .5em; letter-spacing: .03em; }
.sys__phone { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px; text-align: left; }
.sys__phone:hover, .sys__phone:focus-visible { color: #fff; background: var(--navy); outline: 1px dotted #ff0; }

/* Combos, checkboxes y selects al estilo Windows 98 */
.combo { display: flex; align-items: stretch; min-height: 22px; background: #fff; box-shadow: var(--bevel-field); }
.combo__v { flex: 1; min-width: 0; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.combo__b { position: relative; flex: none; width: 17px; margin: 2px; background: var(--silver); box-shadow: var(--bevel-raised); }
.combo__b::after { content: ''; position: absolute; top: 50%; left: 50%; margin: -2px 0 0 -4px; border: 4px solid transparent; border-top: 4px solid #000; border-bottom: 0; }
.chk { display: inline-block; flex: none; width: 13px; height: 13px; background: #fff; box-shadow: var(--bevel-field); }
.chk.is-on::after { content: '✓'; display: block; font-size: 11px; font-weight: 700; line-height: 13px; text-align: center; }
.win-select {
  appearance: none; -webkit-appearance: none; min-width: 120px; min-height: 22px; padding: 3px 24px 3px 6px; border: 0; border-radius: 0; color: #000; font: inherit;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='18' shape-rendering='crispEdges'><rect width='17' height='18' fill='%23c0c0c0'/><path d='M0 0h17v1H0zM0 0h1v18H0z' fill='%23fff'/><path d='M0 17h17v1H0zM16 0h1v18h-1z' fill='%23000'/><path d='M1 16h15v1H1zM15 1h1v16h-1z' fill='%23808080'/><path d='M4 7h9l-4.5 4.5z' fill='%23000'/></svg>") right 2px center / 17px 18px no-repeat;
  box-shadow: var(--bevel-field); cursor: default;
}
.win-select:disabled { color: grey; text-shadow: 1px 1px #fff; background-color: var(--silver); }
.win-select--sm { min-width: 52px; }
.win-select:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* Pestañas (botones reales para las funcionales, spans para las decorativas) */
.dun__tabs > * { padding: 3px 8px; color: inherit; font: inherit; background: var(--silver); box-shadow: inset 1px 1px #fff, inset -1px 0 grey; border: 0; cursor: default; }
.dun__tabs > .is-on { position: relative; z-index: 1; margin-bottom: -2px; padding-bottom: 5px; font-weight: 700; }
.dun__tabs > .is-na { color: #000; }
.dun__body[hidden] { display: none; }

/* Acceso telefónico a redes (como el screenshot de Nodo50) */
.window--dial.is-active .title-bar { background: linear-gradient(90deg, #000080, #1084d0 55%, #008080); }
.window--dial .dun__row { flex-wrap: nowrap; align-items: flex-end; gap: 6px; }
.window--dial .dun__f { gap: 3px; margin-bottom: 8px; }
.dun__dash { padding-bottom: 14px; }
.dun__num { font-size: calc(var(--fs) + 4px); font-weight: 700; letter-spacing: .06em; }
.dun__chk { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.dun__full { margin: 0 0 4px; padding: 4px 6px; background: #ffffe1; box-shadow: var(--bevel-status); }
.dun__modem { display: flex; align-items: flex-start; gap: 12px; padding: 2px 0 6px; }
.dun__modemcol { display: flex; flex: 1; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.dun__modemcol .combo { align-self: stretch; }
.dun__cfg { padding: 3px 14px; }
.dun__links { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.dun__links li { display: flex; align-items: center; gap: 8px; }
.dun__links a { color: #0000ee; text-decoration: underline; overflow-wrap: anywhere; }
.dun__btns .btn[href] { text-decoration: none; color: inherit; }
.dun__btns .btn:disabled { color: grey; text-shadow: 1px 1px #fff; }

/* Propiedades de Pantalla */
.mon { display: flex; flex-direction: column; align-items: center; align-self: center; }
.mon__scr { position: relative; width: 168px; height: 126px; overflow: hidden; background-color: var(--desk-color, var(--teal)); border: 10px solid #c0c0c0; border-radius: 1px; box-shadow: 0 0 0 1px #000, inset 1px 1px grey, inset -1px -1px #fff, 1px 1px 0 1px #808080; image-rendering: pixelated; }
.mon__bar { position: absolute; right: 0; bottom: 0; left: 0; height: 7px; background: #c0c0c0; border-top: 1px solid #fff; }
.mon__stand { width: 44px; height: 8px; background: #c0c0c0; box-shadow: inset -1px 0 grey, inset 1px 0 #fff; }
.mon__base { width: 94px; height: 6px; background: #c0c0c0; box-shadow: var(--bevel-raised); }
.mon__scr--ss { background: #000; display: grid; place-items: center; color: #fff; }
.ss-prev__txt { font-weight: 700; font-style: italic; }
.bg__row { display: flex; gap: 8px; align-items: flex-start; }
.bg__list { flex: 1; min-width: 0; height: 104px; max-height: none; overflow: auto; list-style: none; }
.bg__list button { display: flex; align-items: center; gap: 4px; width: 100%; padding: 1px 3px; text-align: left; white-space: nowrap; }
.bg__list button img { flex: none; width: 16px; height: 16px; }
.bg__list button.is-sel { color: #fff; background: var(--navy); }
.bg__list button:focus-visible { outline: 1px dotted #ff0; outline-offset: -2px; }
.bg__side { display: flex; flex: none; flex-direction: column; gap: 6px; width: 116px; }
.bg__btn { display: block; padding: 4px 8px; text-align: center; cursor: default; }
.bg__mode { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.bg__mode .win-select { min-width: 0; width: 100%; }
.bg__pat { position: absolute; right: 18px; z-index: 5; width: 130px; margin-top: -30px; list-style: none; background: #fff; box-shadow: var(--bevel-field); }
.bg__pat[hidden] { display: none; }
.bg__pat button { display: block; width: 100%; padding: 2px 6px; text-align: left; }
.bg__pat button.is-sel, .bg__pat button:hover { color: #fff; background: var(--navy); }
.group { position: relative; }
.ss__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ss__row .win-select { flex: 1; min-width: 0; }
.ss__wait { display: flex; align-items: center; gap: 6px; }
.ap__prev { align-self: center; width: 200px; padding: 14px; background: var(--desk-color, var(--teal)); box-shadow: var(--bevel-field); }
.ap__win { background: var(--silver); box-shadow: var(--bevel-raised); padding: 2px; }
.ap__bar { display: flex; justify-content: space-between; padding: 2px 4px; color: #fff; background: linear-gradient(90deg, var(--navy), var(--sky)); font-weight: 700; }
.ap__x { padding: 0 4px; color: #000; background: var(--silver); box-shadow: var(--bevel-raised); }
.ap__txt { padding: 10px 6px; }

/* Pantalla completa del protector */
.ss { position: fixed; inset: 0; z-index: 1000; display: block; background: #000; cursor: none; }
.ss[hidden] { display: none; }
.ss canvas { display: block; width: 100%; height: 100%; }

/* SAP Easy Access (estilo SAP GUI clásico, como el screenshot) */
.window--sap .sapx__menu { position: relative; gap: 14px; padding: 4px 8px; min-height: 26px; color: #e4e6ff; background: linear-gradient(90deg, #0a0a78 0%, #1c1c94 55%, #2f4fb4 100%); }
.window--sap .sapx__menu span { text-decoration: none; }
.window--sap .sapx__menu span:first-child::first-letter, .window--sap .sapx__menu span::first-letter { text-decoration: underline; }
.window--sap .sapx__logo { align-self: stretch; display: flex; align-items: center; margin: -4px -8px -4px auto; padding: 0 12px 0 26px; color: #fff; font-size: 20px; font-style: italic; font-weight: 700; letter-spacing: 0; text-shadow: 1px 1px 0 #0a3a8a; background: radial-gradient(ellipse 60% 130% at 10% 130%, #1d9ad8 0 40%, transparent 41%), radial-gradient(ellipse 80% 100% at 30% 0%, #2a6fcf 0 50%, transparent 51%), linear-gradient(90deg, #1c4fb4, #1d9ad8); }
.window--sap .sapx__tb { gap: 3px; padding: 3px 4px; background: #c8ccd2; border-bottom: 1px solid #8a8f96; box-shadow: inset 0 1px #fff; }
.window--sap .sapx__ok { display: flex; flex: none; width: 24px; height: 22px; align-items: center; justify-content: center; background: transparent; box-shadow: none; }
.window--sap .sapx__tb .sap__cmd { flex: 0 1 150px; height: 20px; }
.window--sap .sapx__ico { display: flex; flex-wrap: nowrap; align-items: center; gap: 1px; margin-left: 2px; overflow: hidden; }
.sapx__sep { flex: none; width: 2px; height: 18px; margin: 0 3px; background: linear-gradient(90deg, #8a8f96 1px, #fff 1px); }
.sapx__i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; background: transparent; box-shadow: none; }
.sapx__i svg { display: block; width: 16px; height: 16px; shape-rendering: crispEdges; }
.sapx__i.is-off { opacity: .42; }
.window--sap .sapx__head { padding: 6px 8px 5px; color: #5a6a94; font-size: calc(var(--fs) + 7px); font-style: italic; font-weight: 700; letter-spacing: .02em; background: #fff; border-bottom: 1px solid #aab; }
.window--sap .sapx__tb2 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px 4px 5px; background: #c8ccd2; border-bottom: 1px solid #8a8f96; }
.sapx__b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; background: #d6d9de; box-shadow: var(--bevel-raised); white-space: nowrap; }
.sapx__b.is-off { color: #8a9096; text-shadow: 1px 1px #f2f2f2; }
.sapx__b.is-off svg { opacity: .45; }
.sapx__b svg { width: 16px; height: 16px; shape-rendering: crispEdges; }
.sapx__b--ico { padding: 2px 3px; }
.window--sap .sap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 300px; margin: 0; background: #9db4c6; }
.window--sap .sap__tree { max-height: 360px; padding: 0; overflow: auto; background: #d8e9f5; box-shadow: none; border: 1px solid #fff; border-right-color: #6a7f90; }
.window--sap .sap__tree ul { margin-left: 0; list-style: none; }
.window--sap .sap__tree ul ul { margin-left: 16px; }
.window--sap .sap__tree > ul > li > button { padding-left: 4px; }
.window--sap .sap__info { padding: 14px; background: #9db4c6; }
.window--sap .sap__detail { color: #0b2a44; }
.window--sap .sap__node { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 18px; padding: 0 4px; color: #00309c; line-height: 18px; text-align: left; overflow-wrap: anywhere; }
.window--sap .sap__node--folder { color: #000; font-weight: 400; }
.window--sap .sap__node.is-top { background: #cfe3f2; color: #0a2f8f; }
.window--sap .sap__node:hover { color: #fff; background: #1c3f94; }
.window--sap .sap__node.is-sel { color: #fff; background: #1c3f94; outline: 1px dotted #fff; outline-offset: -2px; }
.window--sap .sap__node:focus-visible { outline: 1px dotted #000; outline-offset: -2px; }
.window--sap .sap__node::before { display: none; }
.sap__tri { flex: none; width: 12px; color: #333; font-size: 10px; text-align: center; }
.sap__ic { flex: none; width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; image-rendering: pixelated; }
.sap__ic--tx { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='2' y='2' width='12' height='12' fill='white' stroke='black'/><path d='M8 4v8M4 8h8M5 5l6 6M11 5l-6 6' stroke='black' stroke-width='1'/></svg>"); }
.sap__ic--fc { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path d='M1 4h5l1 1h8v9H1z' fill='%23ffe45c' stroke='%23000'/><path d='M1 6h14' stroke='%23c9a800'/></svg>"); }
.sap__ic--fo { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path d='M1 3h5l1 1h7v2H4L1 14z' fill='%23ffe45c' stroke='%23000'/><path d='M4 6h12l-3 8H1z' fill='%23fff3a0' stroke='%23000'/></svg>"); }
.window--sap .sapx__status { display: flex; align-items: center; justify-content: flex-start; gap: 2px; padding: 2px 3px; background: #c8ccd2; border-top: 1px solid #fff; }
.window--sap .sapx__status span { padding: 2px 8px; box-shadow: var(--bevel-status); white-space: nowrap; }
.window--sap .sapx__status .sapx__sp { flex: 1; padding: 2px 0; }
.window--sap .sapx__status .sapx__play { padding: 2px 6px; font-size: 9px; }
.sapx__mi { width: 20px; padding: 2px 0; background: linear-gradient(135deg, transparent 0 38%, #1d6fc8 39% 62%, transparent 63%); }

@media (min-width: 720px) {
  .window--sap .sap { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .window--sap .sap__tree { max-height: 440px; }
}
@media (max-width: 460px) {
  .window--dial .dun__row { flex-wrap: wrap; }
  .bg__row { flex-direction: column; }
  .bg__side { width: 100%; }
}