/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden de capas: base, AJUSTES (primera tanda), AJUSTES (segunda tanda) y los ajustes posteriores al final. Las reglas de abajo pisan a las de arriba.
 * Numero = linea de este archivo donde empieza el comentario de esa parte.
 *
 *   linea 59: [general] cabecera: Word, WordArt, Clippy, Ejecutar, Guardar como, Copiando, pantalla azul, buscador
 *   linea 90: [#w-word] Word (Office 97/2000)
 *   linea 102: [Clippy] Clippy original
 *   linea 108: [#w-paint] Paint
 *   linea 113: [#w-exp] consola DOS
 *   linea 117: [general] animacion de apertura
 *   linea 121: [general] AJUSTES (primera tanda) (todo lo nuevo va abajo)
 *   linea 125: [#w-pc] Mi PC: icono
 *   linea 129: [#w-word] texto justificado
 *   linea 134: [#w-word] pistas sobre Guardar y WordArt
 *   linea 143: [Clippy] pantallas chicas
 *   linea 146: [Clippy] insistente (icono de Word al medio)
 *   linea 161: [general] cursores clasicos
 *   linea 170: [general] AJUSTES (segunda tanda) (todo lo nuevo va abajo)
 *   linea 174: [inicio] logo de Windows 98 al iniciar sesion
 *   linea 198: [general] controles apagados y boton hundido
 *   linea 211: [#w-abap] Bloc de notas: escritura progresiva
 *   linea 216: [Clippy] reactivo (#clipr)
 *   linea 252: [Clippy] lapiz que escribe y acciones extra
 *   linea 260: [Clippy] celular: globo mas chico
 *   linea 262: [#w-word] celular: menus y barra de estado
 *   linea 267: [#w-find] Buscar = Explorador (arbol + lista)
 *   linea 295: [ventanas] movibles
 *   linea 299: [ventanas] maximizada sin franja gris
 *   linea 303: [Clippy] papelera: papel que tira
 *   linea 306: [#w-sap] SAP Logon: fondo de un solo color
 *   linea 310: [#w-pa30 / #w-se38 / #w-dump] pantallas SAP GUI clasicas
 *   linea 342: [#w-sap] SAP dentro de la misma ventana
 *   linea 357: [#w-mail] barra de herramientas estilo Outlook Express
 *   linea 361: [apagar] aviso de apagado
 *   linea 367: [#w-find] celular: arbol y contenido en dos paneles
 *   linea 377: [Clippy / ayuda] globo de ayuda crece dentro de su fondo
 *   linea 395: [ventanas] arrastradas flotan sobre el escritorio
 *   linea 398: [#w-find] arrastrar carpetas al escritorio
 *   linea 402: [errores] icono de error unico
 *   linea 408: [general] boton de sonido de la barra de tareas
 *   linea 411: [#w-find] Explorador en celular
 *   linea 426: [#w-word] ClipArt
 *   linea 440: [#w-word] ClipArt: iconos sin funcion en gris
 *
 * POR VENTANA (lineas donde se habla de cada una):
 *   #w-abap: 211
 *   #w-dump: 310
 *   #w-exp: 113
 *   #w-find: 267, 367, 398, 411
 *   #w-mail: 357
 *   #w-pa30: 310
 *   #w-paint: 108
 *   #w-pc: 125
 *   #w-sap: 306, 342
 *   #w-se38: 310
 *   #w-word: 90, 129, 134, 262, 426, 440
 * ========================================================================= */
/* Extras: Word, WordArt, Clippy, Ejecutar, Guardar como, Copiando, pantalla azul, buscador, ventana colgada */
.title-bar__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon span{overflow-wrap:anywhere;max-width:100%}
.window{max-width:100%;overflow-wrap:anywhere}
.wd__tb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 4px;border-bottom:1px solid #808080;font-size:12px}
.wd__ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;padding:0;cursor:pointer;font-size:14px}
.wd__ico:hover{border-color:#fff #808080 #808080 #fff}
.wd__ico.is-pulse{animation:none;outline:0}
.wd__box{border:2px inset #fff;background:#fff;padding:0 6px}
.wd__page{background:#fff;color:#000;font:13px/1.4 'Times New Roman',Times,serif;padding:14px 22px;overflow:auto;max-height:min(62vh,540px)}
.wd__page h3{font:700 14px Arial,sans-serif;border-bottom:1px solid #000;margin:14px 0 4px}
.wd__page ul{margin:2px 0 6px 20px;padding:0}.wd__page p{margin:4px 0}
.wd__contact{text-align:center;font-size:12px}
.wordart{font:italic 900 clamp(30px,8vw,46px)/1.05 Impact,'Arial Black',sans-serif;text-align:center;letter-spacing:1px;padding:4px 0 10px;
 background:linear-gradient(180deg,#fff200,#ff8a00 55%,#d40000);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(2px 2px 0 #1a1a80) drop-shadow(4px 4px 0 #7a7ad8);transform:skewX(-6deg) rotate(-2deg)}
.xd{z-index:80}.xd__body{display:flex;gap:10px;align-items:flex-start;padding:12px;font-size:12px;flex-wrap:wrap}
.xd__body p{margin:0 0 6px;flex:1 1 180px}.xd__body label{display:flex;gap:6px;align-items:center;width:100%;margin:2px 0}
.xd__body input{flex:1;min-width:0;font:inherit;padding:2px 4px}.xd__btns{display:flex;gap:8px;justify-content:center;padding:0 12px 12px;flex-wrap:wrap}
.xd__ico{width:28px;height:28px;border-radius:50%;background:#c00;color:#fff;text-align:center;line-height:28px;font-weight:700;flex:none}
.xprog{width:100%;height:18px;border:2px inset #fff;padding:1px}.xprog i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#000080 0 8px,transparent 8px 10px)}
.clippy{position:fixed;right:10px;bottom:44px;z-index:60;display:flex;align-items:flex-end;gap:2px;max-width:min(300px,92vw)}
.clippy__b{background:#ffffe1;color:#000;border:1px solid #000;padding:8px 10px;font-size:12px;box-shadow:2px 2px 0 #0006}.clippy__b p{margin:0 0 6px}
.clippy__b div{display:flex;gap:6px;flex-wrap:wrap}.clippy__img{flex:none;animation:clip 2s ease-in-out infinite}@keyframes clip{50%{transform:translateY(-4px) rotate(4deg)}}
.err-ghost{pointer-events:none}#err .title-bar{cursor:move;touch-action:none}
.bsod,.boot{position:fixed;inset:0;z-index:9999;font:16px/1.4 'Courier New',monospace;padding:6vh 6vw;box-sizing:border-box}
.bsod{background:#0000aa;color:#fff}.bsod__t{text-align:center}.bsod__t span{background:#aaa;color:#0000aa;padding:0 8px}
.boot{background:#000;color:#aaa;display:flex;align-items:flex-end}.bsod i{display:inline-block;width:10px;height:16px;background:#fff;animation:bl 1s steps(2) infinite;vertical-align:-2px}@keyframes bl{50%{opacity:0}}
.find__row{display:flex;gap:6px;align-items:center;padding:6px;flex-wrap:wrap;font-size:12px}.find__row input{flex:1;min-width:120px;font:inherit;padding:2px 4px}
#find-res li{cursor:pointer}#find-res{min-height:120px;max-height:260px;overflow:auto}

/* --- Word (Office 97/2000) --- */
.wd__menu{display:flex;align-items:center;gap:2px}.wd__menu img{margin:0 4px 0 2px}
.wd__tb{background:#c0c0c0}.wd__tb .wd__ico{font-size:11px;color:#000}.wd__sep{width:2px;height:20px;margin:0 3px;border-left:1px solid #808080;border-right:1px solid #fff}
.wd__box{font-size:11px;min-width:34px}.wd__f{font:700 12px 'Times New Roman',serif;padding:0 6px}.wd__hl{background:#ff0}.wd__fc{border-bottom:3px solid #f00;padding:0 4px}
.wd__art{font:italic 900 15px Impact,sans-serif;background:linear-gradient(#ff0,#f60);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(1px 1px 0 #00a)}
.wd__ruler{height:16px;border-top:1px solid #808080;border-bottom:1px solid #808080;margin:0 14px 0 28px;background:linear-gradient(90deg,#fff 0 70%,#808080 70%);position:relative}
.wd__ruler:after{content:'';position:absolute;inset:6px 0 0;background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 12px)}
.wd__desk{background:#808080;padding:8px 14px 8px 28px;box-shadow:inset 1px 1px #404040}.wd__desk .wd__page{background:#fff;box-shadow:2px 2px 0 #000;padding:22px 30px;max-height:min(52vh,460px);overflow:auto}
.wd__page{font:13px/1.35 'Times New Roman',Times,serif;color:#000}.wd__page h3{font:700 13px Arial,sans-serif;border:0;margin:14px 0 4px}.wd__cols{columns:2;list-style:none;margin:0;padding:0}
.wd__st .is-off{color:#808080}.wd__st{flex-wrap:wrap}
.wa-g{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%}.wa-t{background:#fff;border:2px inset #fff;height:44px;padding:0;cursor:pointer}.wa-t.is-on{outline:2px solid #000;outline-offset:-4px}
.wa-t .wordart{zoom:.38;display:block;padding:0;margin:0;line-height:44px}.dialog.wa{width:min(520px,94vw)}
/* --- Clippy original --- */
.clippy{flex-direction:column;align-items:flex-end;gap:0}.clippy__b{position:relative;background:#ffc;border:1px solid #000;border-radius:10px;padding:8px 10px;font:12px Tahoma,'MS Sans Serif',sans-serif;box-shadow:2px 2px 0 #0005}
.clippy__b:after{content:'';position:absolute;right:26px;bottom:-9px;border:9px solid transparent;border-top-color:#000;border-bottom:0}
.clippy__b ul{list-style:none;margin:6px 0;padding:0}.clippy__b li button{display:flex;gap:6px;text-align:left;background:none;border:0;padding:3px 0;font:inherit;cursor:pointer}
.clippy__b li i{flex:none;width:9px;height:9px;margin-top:3px;border-radius:50%;background:#1a4fd0;box-shadow:0 0 0 2px #cdd7f8}.clippy__x{border-top:1px solid #c9b56b;padding-top:6px;text-align:center}.clippy__x div,.clippy__x{display:block}
.clippy__img{margin-right:18px}
/* --- Paint --- */
.paint__opt{grid-column:1/-1;height:64px;margin-top:6px;background:#c0c0c0;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.paint__palette{width:calc(14*16px + 44px)}.paint__clr{position:relative;width:32px;height:32px;margin-right:4px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.paint__clr i{position:absolute;width:14px;height:14px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}.paint__clr i:first-child{left:3px;top:3px;background:#000;z-index:1}.paint__clr i:last-child{left:13px;top:13px;background:#fff}
.paint__area{background:#808080;padding:4px}.paint__canvas{margin:0;max-width:none;box-shadow:0 0 0 1px #000}
/* --- Consola DOS: misma tipografía que 98.js.org --- */
@font-face{font-family:'DOS Prompt';src:url('../fonts/dos.woff') format('woff');font-display:swap}
.terminal,.terminal *{font-family:'DOS Prompt','Lucida Console','Courier New',monospace!important}
.terminal{font-size:16px;-webkit-font-smoothing:none;font-smooth:never}
/* --- animación de apertura --- */
.zoomframe{position:fixed;z-index:9998;pointer-events:none;border:2px dotted #fff;mix-blend-mode:difference;box-sizing:border-box;display:none}
@media(max-width:600px){.clippy__b{font-size:11px;padding:6px 8px}.clippy{max-width:78vw;right:6px}.clippy__img{width:44px;height:64px;margin-right:8px}}

/* ==========================================================================
   AJUSTES (primera tanda) (todo lo nuevo va acá abajo; lo anterior no se tocó)
   ========================================================================== */

/* --- Mi PC: el global `img{height:auto}` dejaba que el flex estirara el ícono --- */
.sys > img{align-self:flex-start;width:32px;height:32px;object-fit:contain}
@media(max-width:360px){.sys__phone{max-width:100%;white-space:normal;text-align:left}.sys__phone .phone{white-space:normal}}

/* --- Word: texto justificado (el contacto y el WordArt siguen centrados) --- */
.wd__page p,.wd__page li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.wd__page .wd__contact,.wd__page .wordart{text-align:center;hyphens:manual}
.wd__page h3,.wd__page .wd__cols li{text-align:left;hyphens:manual}

/* --- Word: pistas sobre Guardar y WordArt --- */
.wd__tb{position:relative}
.wd__ico.is-pulse{z-index:2}
.wd__tip{position:absolute;z-index:8;width:max-content;max-width:min(200px,70%);padding:3px 6px;background:#ffffe1;color:#000;border:1px solid #000;
 font:11px/1.25 Tahoma,'MS Sans Serif',sans-serif;box-shadow:2px 2px 0 #0006;pointer-events:none;animation:wdh .9s ease-in-out infinite}
.wd__tip:before{content:'';position:absolute;top:-6px;left:var(--ax,12px);border:6px solid transparent;border-bottom-color:#000;border-top:0}
@keyframes wdh{50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.wd__ico.is-pulse{animation:none;outline-color:rgba(0,0,128,.45)}.wd__tip{animation:none}}

/* --- Clippy en pantallas chicas: cartel más compacto para no tapar el contenido --- */
@media(max-width:600px){.clippy__b:not(.clipx__b) p:nth-of-type(2){display:none}.clippy__b{padding:6px 8px}.clippy{max-width:66vw}}

/* --- Clippy insistente: llega al medio de la pantalla con el ícono de Word --- */
.clipx{position:fixed;inset:0;z-index:65;pointer-events:none}
.clipx>*{position:absolute;left:0;top:0;transform-origin:50% 50%}
.clipx__c{width:52px;height:82px}.clipx__c svg{display:block;width:52px;height:82px;overflow:visible}
.clipx.is-idle .clipx__c svg{animation:clip 2s ease-in-out infinite}
.clipx__i{pointer-events:auto;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}
.clipx__i span{color:#fff;background:var(--navy,#000080);outline:1px dotted #ff0}
.clipx__b{left:0;top:0;pointer-events:auto;box-sizing:border-box;transform-origin:30% 100%}
.clipx__b{box-shadow:0 0 0 2px #fff,4px 4px 0 rgba(0,0,0,.45)}
.clipx__b:after{right:auto!important;left:var(--tail,40px);z-index:1}
.clipx__b:before{content:'';position:absolute;left:calc(var(--tail,40px) - 2px);bottom:-13px;border:11px solid transparent;border-top-color:#fff;border-bottom:0}
.clipx__b.is-pop{animation:clipxpop .28s ease-out}
@keyframes clipxpop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.clipx.is-idle .clipx__c svg,.clipx__b.is-pop{animation:none}}

/* --- Cursores clásicos de Windows (flecha, mano para lo clickeable, I-beam sobre texto) --- */
html,html *{cursor:url('../img/cursors/arrow.svg') 0 0,default!important}
html a,html button,html label.btn,html [data-open],html [data-action],html [data-x],html [data-tab],html [data-k],html [data-cal],
html .icon,html .task,html .btn[href],html .sap__node,html #find-res li,html .mines__c,html .bg__list button,html .bg__pat button,
html .wa-t,html .clippy__b li button,html .sys__phone,html #fl-file,html #fl-copy{cursor:url('../img/cursors/hand.svg') 4 0,pointer!important}
html .wd__page,html .wd__page *,html input:not([type=file]):not([type=checkbox]),html .notepad__text,html .notepad__text *{cursor:url('../img/cursors/ibeam.svg') 2 8,text!important}
html #err .title-bar,html #err .title-bar__text,html #err .title-bar img{cursor:move!important}
html .ss,html .ss *{cursor:none!important}

/* ==========================================================================
   AJUSTES (segunda tanda) (todo lo nuevo va acá abajo; lo anterior no se tocó)
   ========================================================================== */

/* --- Inicio de sesión: logo de Windows 98 (el mismo del protector de pantalla) --- */
.w98splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden;color:#fff;
 font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;background:#7fb0e0 url(../img/boot/sky.jpg) center/cover no-repeat}

.w98splash.is-out{opacity:0;transition:opacity .45s ease-out;pointer-events:none}
.w98splash:not(.is-run),.w98splash:not(.is-run) *{animation-play-state:paused!important}
.w98splash__logo{display:flex;align-items:center;gap:16px;padding:0 12px;max-width:100%;box-sizing:border-box}
.w98splash__img{flex:none;width:min(220px,44vw);height:auto;opacity:0;animation:w98logo 1.2s cubic-bezier(.2,1,.3,1) .1s both}
@keyframes w98logo{from{opacity:0;transform:translateX(-60px) scale(.7)}to{opacity:1;transform:none}}
.w98splash__txt{display:flex;flex-direction:column;gap:2px;line-height:1;opacity:0;animation:w98in .7s 1s ease-out both;text-shadow:2px 2px 0 rgba(0,0,60,.45)}
@keyframes w98in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.w98splash__ms{font:400 clamp(14px,4vw,20px)/1 Arial,Helvetica,sans-serif;letter-spacing:.02em}
.w98splash__win{font:700 clamp(28px,8vw,50px)/1 Arial,Helvetica,sans-serif;letter-spacing:-.01em}
.w98splash__win b{margin-left:.18em;font-style:italic;color:#ffe45a}
.w98splash__bar{position:relative;width:min(320px,72vw);height:16px;box-sizing:border-box;border:2px solid #fff;background:rgba(0,0,80,.35);overflow:hidden;opacity:0;animation:w98in .5s 1.3s ease-out both}
.w98splash__bar i{position:absolute;top:1px;bottom:1px;left:-30%;width:30%;background:repeating-linear-gradient(90deg,#1f4fd8 0 8px,transparent 8px 10px);animation:w98bar 1.3s linear infinite}
@keyframes w98bar{to{left:100%}}
.w98splash__msg{margin:0;font-size:12px;text-shadow:1px 1px 0 rgba(0,0,60,.6);opacity:0;animation:w98in .6s 1.6s ease-out both}
.w98splash__gate{position:absolute;bottom:14%;margin:0;padding:0 12px;text-align:center;font-size:13px;text-shadow:1px 1px 0 rgba(0,0,60,.6);animation:w98gate 1.6s ease-in-out infinite}
.w98splash:not(.is-run) .w98splash__gate{animation-play-state:running!important}
.w98splash.is-run .w98splash__gate{display:none}
@keyframes w98gate{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.w98splash,.w98splash__img,.w98splash__bar i,.w98splash__gate{animation:none}.w98splash__txt,.w98splash__bar,.w98splash__msg,.w98splash__img{animation:none;opacity:1}}

/* --- Controles apagados (los que no funcionan) y botón hundido al apretar --- */
.is-off{color:#808080!important;text-shadow:1px 1px 0 #fff}
.wd__ico.is-off,.is-off img,.is-off svg{filter:grayscale(1);opacity:.5;text-shadow:none}
.is-down{box-shadow:var(--bevel-pressed)!important}
.wd__ico.is-down,.sapx__i.is-down,.menu-bar > span.is-down,.menu-bar > span.is-open{box-shadow:inset 1px 1px #808080,inset -1px -1px #fff!important}
.menu-bar > span:not(.is-off){cursor:default}
.w98menu{position:fixed;z-index:90;min-width:150px;padding:2px;background:#c0c0c0;font:var(--fs) var(--font);box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff}
.w98menu__i{display:block;width:100%;padding:3px 22px 3px 22px;border:0;background:none;text-align:left;font:inherit;color:#000;cursor:default}
.w98menu__i::first-letter{text-decoration:underline}
.w98menu__i:not(.is-off):hover,.w98menu__i:not(.is-off):focus-visible{background:#000080;color:#fff;outline:0}
.w98menu__i.is-off{text-shadow:1px 1px 0 #fff}
.w98menu__sep{display:block;height:0;margin:3px 1px;border-top:1px solid #808080;border-bottom:1px solid #fff}

/* --- Bloc de notas: escritura progresiva --- */
.notepad__text.is-typing{overflow:hidden}
.np-caret{display:inline-block;width:7px;height:1.05em;margin-left:1px;vertical-align:text-bottom;background:#000;animation:npb .6s steps(2) infinite}
@keyframes npb{50%{opacity:0}}

/* --- Clippy reactivo (siempre uno solo: #clipr) --- */
.clipr{z-index:85;transform-origin:100% 100%}
.clipr--top{z-index:10001}
.clipr.is-in{animation:clriIn .5s cubic-bezier(.2,1.3,.4,1)}
.clipr.is-out{animation:clrOut .28s ease-in forwards}
@keyframes clriIn{from{transform:translateY(130%) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes clrOut{to{transform:translateY(40%) scale(.7);opacity:0}}
.clipr__b{padding-right:22px}
.clipr__b p{margin:0 0 4px}
.clipr__b ul{margin:6px 0 0}
.clipr__x{position:absolute;top:1px;right:3px;border:0;background:none;padding:0 3px;font:700 15px/1 Tahoma,sans-serif;cursor:pointer}
.clipr__img{overflow:visible;transform-origin:50% 100%}
.clipr__img .cl-eye{transform-box:fill-box;transform-origin:center;animation:clrBlink 4s infinite}
.clipr__img .cl-pup{transform:translate(var(--px,0px),var(--py,0px));transition:transform .12s}
.clipr__img .cl-brow{transition:transform .2s}
@keyframes clrBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes clrLook{0%,100%{transform:translate(0,0)}25%{transform:translate(-1.2px,.6px)}60%{transform:translate(1.2px,-.6px)}}
.clipr[data-mood=happy] .clipr__img{animation:clrJump .6s ease-out 2,clip 2s ease-in-out 1.2s infinite}
.clipr[data-mood=wow] .clipr__img{animation:clrWow .9s ease-out 1,clip 2s ease-in-out 1s infinite}
.clipr[data-mood=no] .clipr__img{animation:clrNo .5s ease-in-out 2}
.clipr[data-mood=type] .clipr__img{animation:clrType .24s ease-in-out infinite}
.clipr[data-mood=run] .clipr__img{animation:clrRun .7s ease-in-out 1}
.clipr[data-mood=think] .clipr__img{animation:clrThink 1.6s ease-in-out infinite}
.clipr[data-mood=panic] .clipr__img{animation:clrPanic .12s linear infinite}
.clipr[data-mood=panic] .cl-eye{transform:scale(1.25);animation:none}
.clipr[data-mood=panic] .cl-brow,.clipr[data-mood=wow] .cl-brow{transform:translateY(-2px)}
@keyframes clrJump{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-16px) scale(.92,1.1)}60%{transform:translateY(0) scale(1.1,.9)}}
@keyframes clrWow{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-6deg)}60%{transform:scale(1.2) rotate(6deg)}100%{transform:scale(1)}}
@keyframes clrNo{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes clrType{50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes clrRun{0%{transform:translateX(0)}35%{transform:translateX(-40px) scaleX(1.25) skewX(12deg)}70%{transform:translateX(8px)}100%{transform:none}}
@keyframes clrThink{50%{transform:rotate(-8deg) translateY(-2px)}}
@keyframes clrPanic{0%{transform:translate(-2px,0) rotate(-4deg)}50%{transform:translate(2px,-3px) rotate(4deg)}100%{transform:translate(-2px,0) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.clipr,.clipr__img,.clipr__img *{animation:none!important}}
@media(max-width:600px){.clipr__b{max-width:62vw}}

/* --- Lápiz que escribe el código + acciones extra de Clippy --- */
.np-pencil{position:fixed;left:0;top:0;z-index:84;pointer-events:none;transition:opacity .35s}
.np-pencil.is-out{opacity:0}
.cl-pencil{display:none;transform-box:fill-box;transform-origin:15% 90%}
.clipr[data-mood=type] .cl-pencil{display:block;animation:clrPen .3s ease-in-out infinite}
@keyframes clrPen{50%{transform:rotate(-14deg) translate(1px,1px)}}
.clipr.is-hop .clipr__img{animation:clrJump .6s ease-out 1}
@media(prefers-reduced-motion:reduce){.np-pencil{display:none}}
/* Celular: el globo de Clippy más chico para que no tape los textos de las ventanas */
@media(max-width:600px){.clippy__b{max-width:min(250px,calc(100vw - 92px));padding:6px 8px;font-size:12px;line-height:1.25}.clippy__b li,.clippy__b button{font-size:12px}}
/* Celular: menús y barra de estado de Word sin cortar palabras a la mitad */
.wd__menu{flex-wrap:wrap}
.wd__menu > span,.wd__st .status-bar__field{white-space:nowrap}
.wd__menu > span{padding-left:4px;padding-right:4px}

/* --- Buscar = Explorador de Windows 98 (árbol de carpetas + lista Nombre / Tamaño / Tipo) --- */
.xp{display:flex;gap:4px;height:min(54vh,340px);margin-top:3px;font-size:12px;min-width:0}
.xp__tree{flex:0 0 40%;min-width:120px;display:flex;flex-direction:column;min-height:0}
.xp__hd{display:flex;justify-content:space-between;align-items:center;padding:3px 4px;font-size:12px}
.xp__tv{flex:1;overflow:auto;padding:3px 2px;min-height:0;white-space:nowrap}
.xp__tv ul{list-style:none;margin:0;padding:0}.xp__tv ul ul{margin-left:8px;padding-left:9px;border-left:1px dotted #808080}
.xp__tv li{position:relative}.xp__tv ul ul>li:before{content:'';position:absolute;left:-9px;top:9px;width:9px;border-top:1px dotted #808080}
.xp__row{display:flex;align-items:center;gap:3px;min-height:18px;cursor:default}
.xp__pm{flex:none;width:9px;height:9px;border:1px solid #808080;background:#fff;position:relative;cursor:pointer;box-sizing:border-box}
.xp__pm:before{content:'';position:absolute;left:1px;right:1px;top:3px;border-top:1px solid #000}
.xp__pm.is-plus:after{content:'';position:absolute;top:1px;bottom:1px;left:3px;border-left:1px solid #000}
.xp__pm.is-none{visibility:hidden}
.xp__row img{flex:none;width:16px;height:16px}
.xp__row span.xp__lb{padding:1px 2px;border:1px dotted transparent}
.xp__row.is-sel span.xp__lb{background:#000080;color:#fff}
.xp__list{flex:1;min-width:0;overflow:auto}
.xp__tbl{border-collapse:collapse;width:100%;min-width:300px;font-size:12px}
.xp__tbl th{position:sticky;top:0;z-index:1;background:#c0c0c0;text-align:left;font-weight:700;padding:2px 6px;box-shadow:inset 1px 1px #fff,inset -1px -1px #808080,inset -2px -2px #dfdfdf}
.xp__tbl td{padding:1px 6px;white-space:nowrap;cursor:default}
.xp__tbl .xp__r{text-align:right}.xp__tbl td:first-child{display:flex;align-items:center;gap:4px;max-width:260px}
.xp__tbl td:first-child span{overflow:hidden;text-overflow:ellipsis}.xp__tbl td img{width:16px;height:16px;flex:none}
.xp__tbl tr.is-sel td:first-child span{background:#000080;color:#fff}.xp__tbl tr.is-sel td:not(:first-child){background:#000080;color:#fff}
.xp__sz{flex:0 0 auto!important;min-width:70px;text-align:center}
.xp__pv{width:100%;font-size:12px}.xp__pv table{border-collapse:collapse;width:100%;background:#fff;color:#000}.xp__pv td,.xp__pv th{border:1px solid #808080;padding:1px 4px;text-align:left;white-space:nowrap}
.xp__pv th{background:#c0c0c0}.xp__pv pre{margin:0;padding:6px;background:#fff;color:#000;font:12px/1.3 'Courier New',monospace;white-space:pre-wrap}.xp__pv ul{margin:0;padding-left:16px;background:#fff;color:#000;padding-top:6px;padding-bottom:6px}
@media (max-width:520px){.xp{flex-direction:column;height:min(64vh,420px)}.xp__tree{flex:0 0 38%}.xp__list{flex:1 1 0}}
.xp__tbl th{white-space:nowrap}

/* --- Ventanas movibles --- */
.window .title-bar{touch-action:none;-webkit-user-select:none;user-select:none}
.window.is-float{position:absolute;margin:0;max-width:none}
.win-ph{visibility:hidden;pointer-events:none;min-width:0}.win-ph[hidden]{display:none}
/* Maximizada: ocupa todo el ancho y solo la altura que necesita su contenido (sin franja gris abajo) */
.window.is-max{left:0!important;top:0!important;right:0!important;bottom:auto!important;width:auto!important;height:auto!important;max-width:none!important;max-height:calc(100vh - var(--taskbar-h));z-index:30!important}
.window.is-max .xp{height:calc(100vh - var(--taskbar-h) - 190px);min-height:200px}
.window.is-max .status-bar{margin-top:auto}
/* Clippy de la papelera: el papel que tira */
.clipr__ball{position:fixed;left:0;top:0;z-index:90;pointer-events:none;will-change:transform}

/* --- SAP Logon: todo el fondo del mismo color (sin barra lateral azul) --- */
.window--sap .sap,.window--sap .sap__info{background:#d8e9f5}
.window--sap .sap__tree{border:0}

/* --- PA30 / SE38 / dump: pantallas SAP GUI clásicas --- */
.sx button.sapx__i,.sx button.sapx__b{border:0;font:inherit;color:inherit;cursor:default}
.sx button.sapx__b{background:#d6d9de}.sx button.sapx__b:active,.sx button.sapx__i:active{box-shadow:inset 1px 1px #666}
.sx .sapx__ok{cursor:default}.sx__app svg{width:16px;height:16px}
.sx__body{display:flex;flex-wrap:wrap;min-height:330px;background:#a3b8cb}
.sx__find{flex:0 0 220px;margin:6px;background:#ece9d8;border:1px solid #6a7f90;padding:4px;font-size:12px}
.sx__ft{display:flex;flex-direction:column;gap:2px;margin-top:6px}.sx__ft span{padding:1px 4px}
.sx__ft button{background:none;border:0;text-align:left;padding:1px 4px 1px 22px;font:inherit}.sx__ft button:hover{background:#1c3f94;color:#fff}
.sx__main{flex:1 1 360px;min-width:0;margin:6px;position:relative}
.sx__pn{display:flex;align-items:center;gap:6px;margin-bottom:8px}.sx__pn input{width:120px;padding:2px 4px;border:1px solid #6a7f90;background:#fff;font:inherit}
.sx__pn input.is-req,#pa-pernr.is-req{background:#fff3a0}
.sx__f4{border:1px solid #6a7f90;background:#d6d9de;width:20px;height:20px;padding:0;font-size:11px}
.sx__f4l{position:absolute;top:26px;left:100px;z-index:5;margin:0;padding:2px;list-style:none;background:#fff;border:1px solid #000;box-shadow:2px 2px 0 #0004}
.sx__f4l button{display:block;border:0;background:none;font:inherit;padding:2px 6px;white-space:nowrap}.sx__f4l button:hover{background:#1c3f94;color:#fff}
.sx__tabs{display:flex;gap:2px;margin-top:14px}.sx__tabs button{padding:3px 10px;border:1px solid #6a7f90;border-bottom:0;background:#c9d0d8;font:inherit}.sx__tabs .is-on{background:#d4d0c8;font-weight:700}
.sx__pane{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:#d4d0c8;border:1px solid #6a7f90}
.sx__its{flex:1 1 160px;margin:0;padding:2px;list-style:none;background:#c9c6bd;border:1px solid #888;min-height:120px}
.sx__its button{display:block;width:100%;text-align:left;border:0;background:none;padding:2px 6px;font:inherit}.sx__its .is-sel,.sx__its button:hover{background:#1c3f94;color:#fff}
.sx__per{flex:1 1 200px;border:1px solid #888;padding:4px 8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-size:12px}.sx__per .sapx__b{grid-column:1/-1;justify-self:start;margin-top:4px}
.sx__dir{margin:8px 0 0;border:1px solid #888;padding:4px 8px;display:flex;flex-wrap:wrap;gap:8px;background:#d4d0c8;font-size:12px}.sx__dir input{width:80px;border:1px solid #6a7f90;background:#fff;font:inherit}.sx__dir .sm{width:40px}
.sx__rec{flex:1;margin:6px;padding:10px;background:#d4d0c8;border:1px solid #6a7f90;display:grid;gap:6px}
.sx__hd{display:flex;flex-wrap:wrap;gap:4px 12px;padding-bottom:6px;border-bottom:1px solid #888}
.sx__rec label{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:8px;align-items:center}.sx__rec input{padding:2px 4px;border:1px solid #6a7f90;background:#fff;font:inherit;min-width:0}.sx__rec input[readonly]{background:#e9e7df}
.sx__msg{min-height:22px;padding:3px 8px;background:#c8ccd2;border-top:1px solid #fff;font-size:12px}.sx__msg i{font-style:normal;color:#0a7a2a;font-weight:700}.sx__msg.is-bad i{color:#c00}.sx__msg.is-bad{color:#900}
.sx__code{height:360px;overflow:auto;background:#fff;font:12px/1.35 'Courier New',monospace;border:1px solid #6a7f90}.sx__code div{display:flex;white-space:pre}.sx__code i{flex:none;width:44px;padding-right:6px;text-align:right;color:#6a7f90;background:#e8ecf0;font-style:normal}.sx__code code{padding-left:6px}.sx__code b{color:#1a1aa6;font-weight:400}.sx__code em{color:#5a6a94;font-style:italic}.sx__code s{color:#a03000;text-decoration:none}
.sx__dump{display:flex;flex-wrap:wrap;min-height:380px;background:#fff}
.sx__dtree{flex:0 0 220px;overflow:auto;max-height:420px;background:#e8eef4;border-right:1px solid #6a7f90;font-size:12px}.sx__dtree ul{list-style:none;margin:0;padding-left:12px}.sx__dtree>ul{padding:2px}.sx__dtree b{font-weight:400}.sx__dtree button{border:0;background:none;font:inherit;padding:1px 4px;text-align:left}.sx__dtree button:hover,.sx__dtree .is-sel{background:#1c3f94;color:#fff}
.sx__dmain{flex:1 1 320px;min-width:0;overflow:auto;max-height:420px}
.sx__dhead{display:grid;grid-template-columns:max-content 1fr;margin:0;background:#ff8f87;font:12px 'Courier New',monospace}.sx__dhead dt,.sx__dhead dd{margin:0;padding:1px 8px}.sx__dhead dt{min-width:210px}
.sx__dtxt{margin:6px 8px;white-space:pre-wrap;font:12px/1.4 'Courier New',monospace;background:#fff}.sx__dtxt::first-line{background:#cde5f7}
@media(max-width:600px){.sx__find{flex-basis:100%}.sx__dhead dt{min-width:140px}}

/* --- SAP dentro de la misma ventana + estética SAP GUI clásica --- */
.window--sap.is-sx>:not(header):not(.sx__screen){display:none!important}.sx__screen[hidden]{display:none!important}
.sx .sx__app{background:#dcd9c9;border-bottom:1px solid #8a8f96}
.sx__body,.sx__rec{background:#96b1c5}.sx__rec{padding:8px;margin:0;border:0;gap:0;display:block}
.sx__find{background:#dcd9c9;border:1px solid #7a8a98}
.sx__pane,.sx__dir,.sx__grp{background:#dcd9c9;border:1px solid #7a8a98}
.sx__tabs{margin-top:12px;gap:3px}.sx__tabs button{background:#b9ccdb;border:0;padding:3px 16px 3px 12px;clip-path:polygon(0 100%,8px 0,calc(100% - 8px) 0,100% 100%)}.sx__tabs .is-on{background:#dcd9c9}
.sx__pane{border-top:0}
.sx fieldset{border:1px solid #7a8a98}.sx legend{padding:0 14px 0 4px;background:#dcd9c9;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)}
.sx__hd{border:0;padding:0 0 10px;align-items:center}.sx__hd span{color:#000}.sx__hd b{padding:1px 6px;background:#e4e1d2;font-weight:400;font-family:'Courier New',monospace}
.sx__grp{display:grid;gap:5px;padding:18px 12px 12px;position:relative}.sx__gt{position:absolute;top:-1px;left:-1px;padding:1px 16px 1px 6px;background:#dcd9c9;border:1px solid #7a8a98;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 100%,0 100%)}
.sx__rec label span{border-bottom:1px solid #a9a690;padding-bottom:1px}
.sx__rec input,.sx__pn input,.sx__dir input{border:0;background:#fffbe6;box-shadow:inset 1px 1px #b5b29f}.sx__rec input[readonly]{background:#e4e1d2}
.sx__pn input.is-req,#pa-pernr.is-req{background:#ffe98a}

/* Outlook Express / Windows 98 mail toolbar: chunky pixel icons */
#w-mail .oe__tools img { image-rendering: pixelated; image-rendering: crisp-edges; }


/* Aviso de apagado: mayor separación entre icono, texto y botones */
.sd-warn .dialog__body { gap: 18px; padding: 22px 20px 20px; line-height: 1.5; }
.sd-warn .dialog__body p { margin: 0; }
.sd-warn .dialog__btns { gap: 12px; padding: 8px 16px 16px; }
#w-mail .oe__tools img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* En celular, el Explorador conserva el árbol y el contenido en dos paneles
   dentro de la misma ventana; evita que la lista de archivos caiga debajo. */
@media (max-width:520px){
  .xp{flex-direction:row;height:min(64vh,420px);gap:3px;overflow:hidden}
  .xp__tree{flex:0 0 42%;min-width:0;max-width:42%}
  .xp__list{flex:1 1 0;min-width:0;overflow:auto}
  .xp__tbl{min-width:230px;font-size:11px}
  .xp__tbl th,.xp__tbl td{padding-left:3px;padding-right:3px}
}

/* Ajuste puntual: el globo de ayuda crece dentro de su propio fondo, sin deformar márgenes. */
.clippy__b,
.clipt__b,
.clipr__b {
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  overflow-wrap: anywhere;
}
.clippy__b p,
.clipt__b p,
.clipr__b p { max-width: 100%; }
@media (max-width: 600px) {
  .clippy__b,
  .clipt__b,
  .clipr__b { max-width: min(250px, calc(100vw - 24px)); }
}

/* Ventanas arrastradas: flotan sobre el escritorio completo, incluidos los iconos. */
.window.is-float { position: fixed; }

/* Arrastrar carpetas del Explorador al escritorio: toda la fila (ícono o texto) arrastra, sin seleccionar texto */
.xp__row,.xp__row *,#find-body tr[data-d],#find-body tr[data-d] *{-webkit-user-select:none;user-select:none}
.xp__row img,#find-body tr[data-d] img{-webkit-user-drag:none}

/* Ícono de error único (el mismo del cartel de apagar/reiniciar) en todos los avisos de error */
html .dialog__x--error, html .xd__ico, html .cmdlg__err {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  background: url('../img/win98/error-32.png') no-repeat center / 32px 32px !important;
  color: transparent !important; font-size: 0 !important; line-height: 0 !important; image-rendering: pixelated;
}
/* Botón de sonido de la barra de tareas */
.taskbar__mute img { display: block; width: 16px; height: 16px; margin: 4px 0; image-rendering: pixelated; }

/* Explorador en celular. Abre solo con las carpetas; al tocar una se abre la lista a la derecha
   y la solapa Carpetas se puede esconder (boton x) para ver la lista completa. Escritorio: sin cambios. */
.xp__bar,.xp__x{display:none}
@media (max-width:520px){
  #w-find[data-view="tree"] .xp__tree{flex:1 1 100%;max-width:none}
  #w-find[data-view="tree"] .xp__list{display:none}
  #w-find[data-view="list"] .xp__tree{display:none}
  #w-find[data-view="list"] .xp__bar{display:flex;padding:3px 6px 0}
  .xp__bar .btn{min-height:36px;padding:0 12px;font:inherit}
  .xp__hd>span[aria-hidden="true"]{display:none}
  #w-find[data-view="both"] .xp__x{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:36px;min-height:36px;padding:0;border:0;background:none;font:inherit;font-size:18px;line-height:1;color:inherit;cursor:pointer}
  #w-find .xp__x:focus-visible,#w-find .xp__bar .btn:focus-visible{outline:1px dotted #000;outline-offset:-4px}
  #w-find .xp__row{min-height:28px}
}

/* Insertar ClipArt (Word): ventana sencilla estilo Office 97/98. Solo se abre; no tiene funcion. */
.dialog.cg{width:min(560px,96vw);max-height:92vh}.dialog.cg .xd__btns{display:none}.dialog.cg .xd__body{display:block;padding:6px 8px 8px;font:11px Tahoma,'MS Sans Serif',Arial,sans-serif}
.cg__ti{margin-right:3px;vertical-align:-3px}
.cg__tb{display:flex;align-items:center;gap:10px;padding:2px 2px 4px;border-bottom:1px solid #808080;box-shadow:0 1px #fff;margin-bottom:5px;flex-wrap:wrap}
.cg__nav{display:flex;gap:6px}.cg__nav img{image-rendering:pixelated}.cg__sep{width:2px;height:22px;border-left:1px solid #808080;border-right:1px solid #fff}
.cg__b{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.cg__b img{image-rendering:pixelated}
.cg__q{padding:3px 0 6px}.cg__q label{display:flex;gap:6px;align-items:center;width:100%;margin:0}.cg__q input{flex:1;min-width:0;font:inherit;padding:2px 4px;background:#fff;border:2px inset #fff;box-shadow:inset 1px 1px #808080;color:#000}
.cg__tabs{display:flex;gap:2px;padding-left:4px;position:relative;z-index:1;margin-bottom:-2px}.cg__tabs span{display:inline-flex;align-items:center;gap:6px;padding:4px 14px 3px 8px;background:#c0c0c0;box-shadow:inset 1px 1px #fff,inset -1px 0 #808080,inset 0 1px #fff;border:1px solid #fff;border-bottom:0;border-right-color:#404040;margin-top:3px}
.cg__tabs span img{image-rendering:pixelated}.cg__tabs .is-on{margin-top:0;padding-bottom:5px;font-weight:400}
.cg__pane{background:#c0c0c0;box-shadow:inset 1px 1px #fff,inset -1px -1px #404040,inset -2px -2px #808080;padding:8px 6px 6px}
.cg__cnt{margin:0 0 6px;font:11px Tahoma,'MS Sans Serif',Arial,sans-serif;flex:none}
.cg__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;height:290px;overflow:auto;background:#fff;padding:8px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #404040}
.cg__t{display:flex;align-items:center;justify-content:center;height:88px;background:#fff;border:1px solid #000;cursor:default}.cg__t img{max-width:100%;max-height:100%;display:block;image-rendering:auto}

/* ClipArt: los iconos sin funcion van en GRIS; al tocarlos pasan a color 1 segundo (clase .is-flash, javascript/toolbar-flash.js). */
.dialog.cg .cg__g{cursor:default}.dialog.cg .cg__g img{filter:grayscale(1)}.dialog.cg .cg__g.is-flash img{filter:none}
.dialog.cg .cg__b.cg__g{color:#808080;text-shadow:1px 1px #fff}.dialog.cg .cg__b.cg__g.is-flash{color:#000;text-shadow:none}