/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: menu Inicio en cascada, icono de informacion, iconos movibles, Apagar, Clippy bailarin, Propiedades de pantalla.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 22: menú Inicio en cascada (estilo Windows 98), Apagar el sistema, íconos movibles, ícono de información
 *   linea 25: Menú Inicio clásico: banner vertical, ítems grandes, submenús en cascada
 *   linea 57: ítem con submenú: triangulito a la derecha
 *   linea 70: submenú (cualquier nivel)
 *   linea 89: Apagar el sistema: separador y ítem final como en Windows 98
 *   linea 97: Ícono de información al estilo Windows 98 (globo de diálogo amarillo con "i" azul)
 *   linea 113: Íconos movibles del escritorio
 *   linea 125: Diálogo "Apagar Windows" y pantallas de apagado
 *   linea 161: Clippy bailarín (clippy-dance)
 *   linea 176: Ícono de advertencia (triángulo amarillo) en los avisos
 *   linea 184: Los íconos del escritorio siempre quedan DEBAJO de las ventanas (como en Windows)
 *   linea 188: Propiedades de pantalla: todas las solapas del mismo tamaño + solapa Protector de pantalla como en Window
 *   linea 197: lo que sobra de alto lo ocupa un elemento de cada solapa (sin huecos grises)
 *   linea 238: Inglés C2 conserva su posición de escritorio; abrir ventanas no debe recolocarlo.
 *   linea 246: Propiedades de pantalla es una ventana fija: nunca debe mostrar scroll exterior.  [menciona #w-bg]
 * ========================================================================= */
/* menú Inicio en cascada (estilo Windows 98), Apagar el sistema, íconos movibles, ícono de información clásico, Clippy bailarín.
   Solo agrega o reemplaza lo del menú Inicio y del ícono "i"; el resto del sitio no se toca. */

/* ==========================================================================
   Menú Inicio clásico: banner vertical, ítems grandes, submenús en cascada
   ========================================================================== */
.start-menu {
  min-width: 190px;
  max-height: none;
  overflow: visible;                 /* los submenús salen hacia el costado */
  padding: 3px 3px 3px 28px;
}
.start-menu::before {
  content: 'Windows 98';
  position: absolute;
  left: 3px; top: 3px; bottom: 3px;
  width: 22px;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 0 0 6px 1px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font: 700 19px/22px Arial, 'Helvetica Neue', sans-serif;
  letter-spacing: .5px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}
.start-menu .sm, .start-menu .sm__sub { list-style: none; margin: 0; padding: 0; }
.start-menu .sm > li > button,
.start-menu .sm > li > a { padding: 6px 8px; font-size: 13px; min-height: 40px; }
.start-menu .sm > li > button > .sm__t,
.start-menu .sm > li > a > .sm__t { flex: 1; min-width: 0; }
.start-menu u { text-decoration: underline; }

/* ítem con submenú: triangulito a la derecha */
.start-menu .sm__has { position: relative; }
.start-menu .sm__has > button { padding-right: 18px; }
.start-menu .sm__has > button::after {
  content: '';
  position: absolute; right: 6px; top: 50%;
  margin-top: -4px;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.start-menu .sm__has.is-open > button { color: #fff; background: var(--navy); }

/* submenú (cualquier nivel) */
.start-menu .sm__sub {
  display: none;
  position: absolute;
  left: 100%; top: -3px;
  min-width: 170px;
  padding: 3px;
  background: var(--silver);
  box-shadow: var(--bevel-raised);
  z-index: 2;
}
.start-menu .sm__has.is-open > .sm__sub { display: block; }
.start-menu .sm__sub > li > button,
.start-menu .sm__sub > li > a { padding: 4px 18px 4px 6px; white-space: nowrap; min-height: 24px; }
.start-menu .sm__sub .sm__has > button { padding-right: 18px; }
.start-menu .sm__sub.is-flip { left: auto; right: 100%; }
.start-menu .sm__sub.is-over { left: 22px; right: auto; top: 6px; }
.start-menu .sm__sub img { flex: none; }

/* Apagar el sistema: separador y ítem final como en Windows 98 */
.start-menu .start-menu__sep { margin: 3px 0; }

@media (max-height: 520px) {
  .start-menu .sm > li > button, .start-menu .sm > li > a { min-height: 30px; padding: 2px 8px; }
  .start-menu .sm > li > button > img { width: 24px; height: 24px; }
}

/* ==========================================================================
   Ícono de información al estilo Windows 98 (globo de diálogo amarillo con "i" azul)
   ========================================================================== */
.dialog__i:not(.dialog__i--warn):not(.dialog__i--trophy),
.xd__ico--i {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 0;
  background: url('../img/win98/info-32.png') no-repeat center / 32px 32px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

/* ==========================================================================
   Íconos movibles del escritorio
   ========================================================================== */
@media (max-width: 1023px) { .icons { position: relative; } }   /* en escritorio ya es sticky (también posicionado) */
.icons .icon { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.icons .icon img { -webkit-user-drag: none; user-drag: none; }
.icons .icon.is-moved { position: absolute; z-index: 3; }
.icons .icon.is-drag { z-index: 6; cursor: grabbing; }
.icons .icon.is-drag span { background: var(--navy); outline: 1px dotted #ff0; }
.icons .icon.is-drag img { opacity: .6; }
body.is-icondrag { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* ==========================================================================
   Diálogo "Apagar Windows" y pantallas de apagado
   ========================================================================== */
.sd { width: min(380px, 94vw); }
.sd__body { display: flex; gap: 16px; padding: 16px 14px 8px; }
.sd__body > img { flex: none; width: 32px; height: 32px; }
.sd__q { margin: 0 0 8px; }
.sd__opts { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.sd__opt { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sd__opt input { position: absolute; opacity: 0; pointer-events: none; }
.sd__radio {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: var(--bevel-field);
  display: inline-block; position: relative;
}
.sd__opt input:checked + .sd__radio::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #000;
}
.sd__opt input:focus-visible + .sd__radio { outline: 1px dotted #000; outline-offset: 2px; }
.sd__opt span.sd__t { padding: 1px 2px; }
.sd__opt input:focus-visible ~ .sd__t { outline: 1px dotted #000; }
.sd__btns { display: flex; justify-content: center; gap: 8px; padding: 10px 10px 12px; }
.sd__btns .btn { min-width: 84px; padding: 4px 12px; text-align: center; }

.sd-off {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 6vh 6vw;
  font-family: var(--font); cursor: default;
}
.sd-off--bye { background: #008080; color: #fff; font-size: 20px; }
.sd-off--bye strong { font: 700 28px/1.2 Arial, sans-serif; text-shadow: 2px 2px 0 #0007; }
.sd-off--safe { background: #000; color: #ff9d00; font: 700 22px/1.4 'Courier New', monospace; }
.sd-off--safe small { display: block; margin-top: 18px; font-size: 13px; font-weight: 400; color: #8a5400; }
.sd-off--bye img { width: 64px; height: auto; image-rendering: pixelated; }

/* ==========================================================================
   Clippy bailarín (clippy-dance)
   ========================================================================== */
@keyframes clrDance {
  0%, 100% { transform: translateY(0) rotate(0); }
  15% { transform: translateY(-10px) rotate(-14deg); }
  30% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-10px) rotate(14deg); }
  60% { transform: translateY(0) rotate(0) scaleX(-1); }
  75% { transform: translateY(-10px) rotate(-10deg) scaleX(-1); }
  90% { transform: translateY(0) rotate(0) scaleX(-1); }
}
.clipr[data-mood=dance] .clipr__img { animation: clrDance 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .clipr[data-mood=dance] .clipr__img { animation: none; } }

/* Ícono de advertencia (triángulo amarillo) en los avisos */
.dialog__x--warn {
  flex: none; width: 32px; height: 32px; border-radius: 0; box-shadow: none;
  background: url('../img/win98/warning-32.png') no-repeat center / 32px 32px;
  color: transparent; font-size: 0; line-height: 0; image-rendering: pixelated;
}
.sd-warn { width: min(380px, 94vw); }

/* Los íconos del escritorio siempre quedan DEBAJO de las ventanas (como en Windows) */
.window:not(.is-float):not(.is-max):not(.dialog) { position: relative; }
.icons .icon.is-moved, .icons .icon.is-drag { z-index: auto; }

/* ==========================================================================
   Propiedades de pantalla: todas las solapas del mismo tamaño + solapa Protector de pantalla como en Windows 98
   ========================================================================== */
.window--bg { width: 100%; max-width: 440px; justify-self: start; }
.window--bg .dun__tabs { flex-wrap: nowrap; padding-left: 2px; gap: 0; }
.window--bg .dun__tabs > * { padding: 3px 5px; white-space: nowrap; }
.window--bg .dun__tabs > .is-on { padding-bottom: 5px; }
.window--bg .dun__body { box-sizing: border-box; gap: 8px; padding: 8px 10px; }
.window--bg .dun__body:not([hidden]) { height: var(--bg-h, 360px); }
/* lo que sobra de alto lo ocupa un elemento de cada solapa (sin huecos grises) */
.window--bg [data-panel="bg"] .group { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.window--bg [data-panel="bg"] .bg__row { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 116px; grid-template-rows: minmax(0, 1fr); gap: 8px; align-items: start; min-height: 0; }
.window--bg [data-panel="bg"] .bg__list { align-self: stretch; height: auto; min-height: 0; max-height: none; overflow: auto; }
.window--bg [data-panel="ap"] .ap__prev { position: relative; flex: 1; align-self: stretch; width: auto; min-height: 0; padding: 0; overflow: hidden; }
.window--bg [data-panel="ap"] .ap__win { position: absolute; width: 64%; }
.window--bg [data-panel="ap"] .ap__win--off { left: 6%; top: 9%; }
.window--bg [data-panel="ap"] .ap__win--off .ap__bar { color: #c0c0c0; background: #808080 !important; }
.window--bg [data-panel="ap"] .ap__win--off .ap__txt { padding: 26px 6px; }
.window--bg [data-panel="ap"] .ap__win--on { right: 6%; bottom: 9%; }
.window--bg [data-panel="ap"] .ap__txt { padding: 18px 8px; }
.window--bg .dun__body[hidden] { display: none; }
.ss__grp { padding: 6px 10px 8px; }
.ss__row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ss__row2 { margin-bottom: 0; }
.ss__row .win-select { flex: 1; min-width: 0; }
.ss__btn { min-width: 76px; padding: 3px 8px; text-align: center; white-space: nowrap; }
.ss__btn:disabled { color: grey; text-shadow: 1px 1px #fff; }
.ss__pw { display: flex; align-items: center; gap: 6px; position: relative; white-space: nowrap; }
.ss__pw input { position: absolute; opacity: 0; width: 13px; height: 13px; margin: 0; }
.ss__chk { flex: none; width: 13px; height: 13px; background: #fff; box-shadow: inset 1px 1px grey, inset -1px -1px #fff, inset 2px 2px #000, inset -2px -2px #c0c0c0; }
.ss__off { color: grey; text-shadow: 1px 1px #fff; }
.ss__wait { display: flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
.ss__spin { display: inline-flex; height: 22px; background: #fff; box-shadow: inset 1px 1px grey, inset -1px -1px #fff, inset 2px 2px #000, inset -2px -2px #c0c0c0; }
.ss__spin input { width: 34px; padding: 0 4px; border: 0; background: transparent; font: inherit; text-align: right; color: #000; outline: 0; }
.ss__spin input:disabled { color: grey; }
.ss__arrows { display: flex; flex-direction: column; width: 16px; padding: 2px 2px 2px 0; }
.ss__arrows button { flex: 1; padding: 0; border: 0; background: var(--silver); box-shadow: var(--bevel-raised); position: relative; }
.ss__arrows button::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -3px; border: 3px solid transparent; }
.ss__arrows button[data-spin="1"]::after { border-bottom: 3px solid #000; border-top: 0; }
.ss__arrows button[data-spin="-1"]::after { border-top: 3px solid #000; border-bottom: 0; }
.ss__spin:has(input:disabled) .ss__arrows button::after { filter: opacity(.4); }
.ss__energy { display: flex; align-items: center; gap: 14px; padding: 2px 4px 4px; }
.ss__energy img { flex: none; image-rendering: pixelated; }
.ss__energy p { flex: 1; min-width: 0; }
.ss__energybtn { display: flex; justify-content: flex-end; }
@media (max-width: 520px) { .ss__row2 { flex-wrap: wrap; } .ss__wait { margin-left: 0; } }
.ss__wait:has(input:disabled) { color: grey; text-shadow: 1px 1px #fff; }
@media (max-width: 520px) { .window--bg .dun__tabs { flex-wrap: wrap; } .window--bg .dun__body:not([hidden]) { height: auto; min-height: 360px; } }


/* Inglés C2 conserva su posición de escritorio; abrir ventanas no debe recolocarlo. */
@media (min-width: 1024px) {
  .icons .icon[data-open="w-lang"] {
    transform: none !important;
  }
}


/* Propiedades de pantalla es una ventana fija: nunca debe mostrar scroll exterior. */
html body #w-bg { overflow: hidden !important; }
html body #w-bg > .win-scroll { min-height: 0 !important; overflow: hidden !important; overscroll-behavior: none; }
html body #w-bg .dun { min-height: 0; overflow: hidden; }
html body #w-bg .dun__body:not([hidden]) { min-height: 0; overflow: hidden; }
@media (max-width: 520px) {
  html body #w-bg .dun__tabs { flex-wrap: nowrap !important; overflow: hidden; }
  html body #w-bg .dun__tabs > * { min-width: 0; padding-left: 3px; padding-right: 3px; font-size: 10px; }
  html body #w-bg .dun__body:not([hidden]) { height: 300px !important; min-height: 0 !important; }
  html body #w-bg [data-panel="bg"] .bg__row { grid-template-columns: minmax(0, 1fr) 94px; gap: 5px; }
  html body #w-bg .bg__side { width: 94px; }
}