/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: maximizar, scroll Win98, Clippy, relleno al maximizar, tipografia de inicio/BIOS, accesos arrastrados y restaurar ventana. Las reglas de abajo pisan a las de arriba.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 29: maximizar a pantalla completa, scroll de Windows 98 y animaciones de Clippy. Va al final de todo (de
 *   linea 34: Ventana maximizada = toda la pantalla (menos la barra de tareas) --- Antes, .is-float (ventana arrastrada
 *   linea 65: SAP: las pantallas PA30 / SE38 / dump viven dentro del área con scroll
 *   linea 69: Scroll de Windows 98 (dentro de las ventanas)
 *   linea 118: Firefox no dibuja flechas ni relieve: al menos que sea gris
 *   linea 123: Clippy: ojos y cejas animados (los de siempre, en los tres Clippy)
 *   linea 143: tamaño nuevo del Clippy que trae el Word
 *   linea 148: Ventanas: relleno al maximizar, cambio de tamaño por los bordes y cursores
 *   linea 151: Al maximizar (o agrandar a mano) el contenido principal ocupa todo el alto disponible, sin franja gris va
 *   linea 163: Ventana con tamaño propio (se ajustó desde un borde)
 *   linea 171: Bordes y esquinas para redimensionar
 *   linea 184: el cursor global usa !important: acá también, con más especificidad
 *   linea 191: La línea del grupo ya no atraviesa el título (leyenda con fondo, como en Windows 98)
 *   linea 194: tipografía del inicio (como el logo de Windows 98), pantalla de BIOS, diálogos al maximizar y texto
 *   linea 198: Logo de inicio: "Microsoft® / Windows®98" en negro, Franklin Gothic pesada + 98 fino
 *   linea 213: BIOS (Award Modular BIOS)
 *   linea 232: Diálogos tipo propiedades (teléfono, fondo...) al maximizar / agrandar: con margen y rellenando el alto
 *   linea 237: Texto de la fuente pixelada: sin letras encimadas cuando hay zoom o pantallas de alta densidad
 *   linea 242: los accesos arrastrados se dibujan en la posición donde se soltaron.
 *   linea 261: restaurar una ventana maximizada siempre en el centro de la pantalla.
 *   linea 275: Scroll siempre a la vista: en ventanas maximizadas o con tamaño propio, el área que tiene scroll propio s
 *   linea 282: Word: la hoja crece con el contenido y el que hace scroll es el escritorio gris (barras siempre visibles)
 * ========================================================================= */
/* ==========================================================================
   maximizar a pantalla completa, scroll de Windows 98 y animaciones de Clippy.
   Va al final de todo (después de earth.css) para ganarle a las reglas anteriores.
   ========================================================================== */

/* --- Ventana maximizada = toda la pantalla (menos la barra de tareas) ---
   Antes, .is-float (ventana arrastrada) pisaba a .is-max y la ventana quedaba "absolute" y a la altura de su contenido. */
html .window.is-max {
  position: fixed !important;
  inset: 0 0 var(--taskbar-h) 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  justify-self: stretch !important;   /* las ventanas con justify-self:start (Earth, Buscaminas...) quedaban finitas */
  align-self: stretch !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 30 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
html .window.is-max > .title-bar,
html .window.is-max > .status-bar { flex: none; }
html .window.is-max > .win-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
html .window.is-max > .status-bar { margin-top: 3px; }
html .window.is-max .xp { height: auto; flex: 1 1 0; min-height: 200px; }
html .window.is-max .wd__page { max-height: none; }
html .window.is-max .ie__page { max-height: none; }
html .window.is-max .earth__body { height: max(300px, calc(100vh - var(--taskbar-h) - 76px)); }
/* SAP: las pantallas PA30 / SE38 / dump viven dentro del área con scroll */
html body .window--sap.is-sx > .win-scroll { display: block !important; }
html body .window--sap.is-sx .win-scroll > :not(.sx__screen) { display: none !important; }

/* --- Scroll de Windows 98 (dentro de las ventanas) --- */
html::-webkit-scrollbar,
*::-webkit-scrollbar { width: 16px; height: 16px; }
html::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner { background: #c0c0c0; }
html::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: #c0c0c0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23c0c0c0'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  min-height: 16px;
  min-width: 16px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
html::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #c0c0c0;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
html::-webkit-scrollbar-button:active,
*::-webkit-scrollbar-button:active { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; }
.start-menu::-webkit-scrollbar-button:vertical:start:increment,
.window::-webkit-scrollbar-button:vertical:start:increment,
.start-menu::-webkit-scrollbar-button:vertical:end:decrement,
.window::-webkit-scrollbar-button:vertical:end:decrement,
.start-menu::-webkit-scrollbar-button:horizontal:start:increment,
.window::-webkit-scrollbar-button:horizontal:start:increment,
.start-menu::-webkit-scrollbar-button:horizontal:end:decrement,
.window::-webkit-scrollbar-button:horizontal:end:decrement,
*::-webkit-scrollbar-button:vertical:start:increment,
*::-webkit-scrollbar-button:vertical:end:decrement,
*::-webkit-scrollbar-button:horizontal:start:increment,
*::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
html::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:start:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M8 5h1v1H8zM7 6h3v1H7zM6 7h5v1H6zM5 8h7v1H5z' fill='%23000'/%3E%3C/svg%3E"); }
html::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:vertical:end:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M5 7h7v1H5zM6 8h5v1H6zM7 9h3v1H7zM8 10h1v1H8z' fill='%23000'/%3E%3C/svg%3E"); }
html::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:start:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M5 8h1v1H5zM6 7h1v3H6zM7 6h1v5H7zM8 5h1v7H8z' fill='%23000'/%3E%3C/svg%3E"); }
html::-webkit-scrollbar-button:horizontal:end:increment,
*::-webkit-scrollbar-button:horizontal:end:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M8 5h1v7H8zM9 6h1v5H9zM10 7h1v3h-1zM11 8h1v1h-1z' fill='%23000'/%3E%3C/svg%3E"); }
/* Firefox no dibuja flechas ni relieve: al menos que sea gris */
@supports not selector(::-webkit-scrollbar) {
  html, * { scrollbar-color: #c0c0c0 #e4e4e4; }
}

/* --- Clippy: ojos y cejas animados (los de siempre, en los tres Clippy) --- */
.cl-art .cl-eye { transform-box: fill-box; transform-origin: center; animation: clrBlink 4.6s infinite; }
.cl-art .cl-look { animation: clLook 7.5s ease-in-out infinite; }
.cl-art .cl-brow path { transform-box: fill-box; transform-origin: center; }
.cl-art .cl-brow path:last-child { animation: clBrowR 6s ease-in-out infinite; }
.cl-art .cl-brow path:first-child { animation: clBrowL 6s ease-in-out infinite .3s; }
@keyframes clLook {
  0%, 12%, 100% { transform: translate(0, 0); }
  18%, 32% { transform: translate(-2.4px, -1px); }
  40%, 52% { transform: translate(1.2px, -1.2px); }
  60%, 74% { transform: translate(-1px, 1.2px); }
  82%, 92% { transform: translate(1.6px, .4px); }
}
@keyframes clBrowR { 0%, 80%, 100% { transform: none; } 86% { transform: translateY(-2.2px) rotate(-8deg); } 94% { transform: translateY(-1.4px) rotate(-5deg); } }
@keyframes clBrowL { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(.8px) rotate(4deg); } }
@keyframes clPaper { 0%, 100% { transform: skewX(0) rotate(0); } 50% { transform: skewX(-1.5deg) rotate(.8deg); } }
.clipr[data-mood=panic] .cl-art .cl-brow path, .clipr[data-mood=wow] .cl-art .cl-brow path,
.clipr[data-mood=panic] .cl-art .cl-look, .clipr[data-mood=type] .cl-art .cl-look { animation: none; }
.clipr[data-mood=type] .cl-art .cl-look { transform: translate(1.4px, 2px); }
@media (prefers-reduced-motion: reduce) { .cl-art *, .cl-art { animation: none !important; } }
/* tamaño nuevo del Clippy que trae el Word */
.clipx__c { width: 64px; height: 93px; }
.clipx__c svg { width: 64px; height: 93px; }


/* ==========================================================================
   Ventanas: relleno al maximizar, cambio de tamaño por los bordes y cursores
   ========================================================================== */
/* Al maximizar (o agrandar a mano) el contenido principal ocupa todo el alto disponible, sin franja gris vacía */
html .window:is(.is-max, .is-sized) > .win-scroll { display: flex; flex-direction: column; }
html .window:is(.is-max, .is-sized) > .win-scroll > * { flex-shrink: 0; }
html .window:is(.is-max, .is-sized) > .win-scroll > :is(.about, .sys, .cal, .slip, .oe, .explorer__list, .notepad__text, .ie__page, .wd__desk, .terminal, .earth) { flex: 1 0 auto; }
html .window:is(.is-max, .is-sized) .about { display: flex; flex-direction: column; }
html .window:is(.is-max, .is-sized) .about > .field { flex: 1 0 auto; }
html .window:is(.is-max, .is-sized) .sys__list { align-content: start; }
html .window:is(.is-max, .is-sized) .oe > :last-child { flex: 1 0 auto; }
html .window:is(.is-max, .is-sized) .ie__page,
html .window:is(.is-max, .is-sized) .notepad__text,
html .window:is(.is-max, .is-sized) .wd__page { max-height: none; }

/* Ventana con tamaño propio (se ajustó desde un borde) */
html .window.is-sized:not(.is-max) { display: flex; flex-direction: column; max-width: none; }
html .window.is-sized > .title-bar,
html .window.is-sized > .status-bar { flex: none; }
html .window.is-sized:not(.is-max) > .win-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
html .window.is-sized:not(.is-max) .xp { height: auto; flex: 1 1 0; min-height: 140px; }
html .window.is-sized:not(.is-max) .earth__body { height: auto; flex: 1 1 auto; min-height: 200px; }

/* Bordes y esquinas para redimensionar */
.window.has-rz:not(.is-float):not(.is-max) { position: relative; }
.window .title-bar { position: relative; z-index: 4; }
.rz { position: absolute; z-index: 3; display: block; touch-action: none; }
.rz--n  { top: -3px;    left: 12px;  right: 12px;  height: 6px; }
.rz--s  { bottom: -3px; left: 12px;  right: 12px;  height: 6px; }
.rz--e  { right: -3px;  top: 12px;   bottom: 12px; width: 6px; }
.rz--w  { left: -3px;   top: 12px;   bottom: 12px; width: 6px; }
.rz--ne, .rz--nw, .rz--se, .rz--sw { width: 14px; height: 14px; }
.rz--ne { top: -3px;    right: -3px; clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 6px) 100%, calc(100% - 6px) 6px, 0 6px); }
.rz--nw { top: -3px;    left: -3px;  clip-path: polygon(0 0, 100% 0, 100% 6px, 6px 6px, 6px 100%, 0 100%); }
.rz--se { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 0); }
.rz--sw { bottom: -3px; left: -3px;  clip-path: polygon(0 0, 6px 0, 6px calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 0 100%); }
/* el cursor global usa !important: acá también, con más especificidad */
html .rz--n, html .rz--s   { cursor: ns-resize !important; }
html .rz--e, html .rz--w   { cursor: ew-resize !important; }
html .rz--ne, html .rz--sw { cursor: nesw-resize !important; }
html .rz--nw, html .rz--se { cursor: nwse-resize !important; }
html .window.is-max > .rz { display: none; }

/* La línea del grupo ya no atraviesa el título (leyenda con fondo, como en Windows 98) */
.group legend { background: var(--silver); }

/* ==========================================================================
   tipografía del inicio (como el logo de Windows 98), pantalla de BIOS,
   diálogos al maximizar y texto nítido con zoom / pantallas de alta densidad
   ========================================================================== */
/* --- Logo de inicio: "Microsoft® / Windows®98" en negro, Franklin Gothic pesada + 98 fino --- */
.w98splash__txt { color: #000; text-shadow: none; gap: 0; }
.w98splash__ms {
  font: 500 clamp(18px, 5vw, 27px)/1 'Franklin Gothic Medium', 'Franklin Gothic Book', 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -.01em; padding-left: .08em;
}
.w98splash__win {
  display: flex; align-items: flex-end; gap: 0; margin-top: -.05em;
  font: 900 clamp(38px, 11vw, 66px)/.95 'Franklin Gothic Heavy', 'Franklin Gothic Demi', 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  letter-spacing: -.045em;
}
.w98splash__txt sup { font-size: .26em; font-weight: 500; letter-spacing: 0; line-height: 1; align-self: flex-start; margin-top: .32em; vertical-align: top; }
.w98splash__ms sup { margin-left: .08em; font-size: .4em; }
.w98splash__win .w98splash__98 { flex: none; width: auto; height: .72em; margin-left: .02em; margin-bottom: .02em; color: #000; }

/* --- BIOS (Award Modular BIOS) --- */
.bios {
  position: fixed; inset: 0; z-index: 10002; overflow: hidden; color: #dcdcff;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1b1752 0%, #0d0b2e 55%, #05040f 100%);
  font: 18px/1.28 'DOS Prompt', 'Lucida Console', 'Courier New', monospace; -webkit-font-smoothing: none; font-smooth: never;
}
.bios.is-out { opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }
.bios__txt { position: absolute; left: 7vw; top: 14vh; right: 24vw; }
.bios__txt p { margin: 0 0 1.28em; white-space: pre; opacity: 0; animation: biosIn 0s steps(1) var(--d, 0s) forwards; }
.bios__txt p.bios__hdd { margin: 0; }
.bios__ico { display: inline-block; width: 12px; height: 14px; margin: 0 .5em 0 -1.5em; vertical-align: -1px; }
.bios__txt p:first-child { padding-left: 0; }
.bios__foot { position: absolute; left: 7vw; bottom: 10vh; margin: 0; opacity: 0; animation: biosIn 0s steps(1) var(--d, 0s) forwards; }
.bios__star { position: absolute; right: 5vw; top: 12vh; width: clamp(90px, 14vw, 170px); height: auto; }
.bios__epa { position: absolute; right: 5vw; top: calc(12vh + clamp(48px, 7.2vw, 86px)); margin: 0; color: #3cc47a; font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .06em; -webkit-font-smoothing: auto; }
@keyframes biosIn { to { opacity: 1; } }
@media (max-width: 640px) { .bios { font-size: 12px; } .bios__txt { right: 4vw; left: 9vw; } .bios__txt p { white-space: pre-wrap; } .bios__star { top: 4vh; } .bios__epa { top: calc(4vh + 52px); } }
@media (prefers-reduced-motion: reduce) { .bios__txt p, .bios__foot { opacity: 1; animation: none; } }

/* --- Diálogos tipo propiedades (teléfono, fondo...) al maximizar / agrandar: con margen y rellenando el alto --- */
html .window:is(.is-max, .is-sized) > .win-scroll > .dun { flex: 1 0 auto; display: flex; flex-direction: column; padding: 6px 6px 0; }
html .window:is(.is-max, .is-sized) > .win-scroll > .dun > .dun__body:not([hidden]) { flex: 1 0 auto; }
html .window:is(.is-max, .is-sized) .dun__btns { padding: 8px 0 6px; }

/* --- Texto de la fuente pixelada: sin letras encimadas cuando hay zoom o pantallas de alta densidad --- */
@media (min-resolution: 1.05dppx) {
  html { text-rendering: geometricPrecision; font-kerning: none; }
}

/* los accesos arrastrados se dibujan en la posición donde se soltaron. */
html body .desktop { position: relative; }
html body .desktop > .desktop-folder-shortcut {
  position: absolute !important;
  z-index: 8;
  width: 76px;
  min-height: 64px;
  margin: 0;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: default;
}
html body .desktop > .desktop-folder-shortcut span {
  max-width: 76px;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 2px #000;
}
/* restaurar una ventana maximizada siempre en el centro de la pantalla. */
html body .window.is-restored-center:not(.is-max) {
  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;
  margin: 0 !important;
  z-index: 31;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - var(--taskbar-h) - 24px);
}

/* Scroll siempre a la vista: en ventanas maximizadas o con tamaño propio, el área que tiene scroll propio
   se ajusta al alto de la ventana (no crece con su contenido). Así la barra horizontal y la vertical se ven
   desde el principio y no quedan escondidas al final de un contenido largo. */
html .window:is(.is-max, .is-sized) > .win-scroll:has(> :is(.notepad__text, .ie__page, .terminal, .explorer__list, .wd__desk)) { overflow: hidden; }
html .window:is(.is-max, .is-sized) > .win-scroll > :is(.notepad__text, .ie__page, .terminal, .explorer__list, .wd__desk) {
  flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; box-sizing: border-box;
}
/* Word: la hoja crece con el contenido y el que hace scroll es el escritorio gris (barras siempre visibles) */
html .window:is(.is-max, .is-sized) .wd__desk .wd__page { overflow: visible; }