/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: telefono, IE, correo, Ejecutar, SAP y Clippy-logo, iconos de barras, logo de Windows en Internet Explorer.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 20: teléfono sin cambio de tamaño, Internet Explorer / Correo / Ejecutar con íconos como Windows 98
 *   linea 24: Teléfono: las dos solapas ocupan siempre el mismo alto (la que está oculta reserva su lugar)
 *   linea 31: Internet Explorer: barra de botones con íconos, dirección, página de error
 *   linea 55: Correo: barra de herramientas con íconos, formato y campos editables
 *   linea 79: Ejecutar: ícono, lista desplegable y botón Examinar como en Windows 98
 *   linea 91: Lista desplegable clásica de Ejecutar (Windows 98), sin picker nativo moderno
 *   linea 104: SAP: transacciones que funcionan (PA30 y SE38) en negrita + logo SAP armado por Clippy
 *   linea 110: Clippy se transforma: lienzo de píxeles (cuerpo de Clippy -> logo SAP)
 *   linea 116: Durante el arranque de Windows, el splash ocupa la pantalla completa sin scrollbar del documento.
 *   linea 120: íconos de barras de herramientas (Outlook, IE, Paint) en pixel art
 *   linea 127: En Internet Explorer, los controles de la maqueta que no tienen acción real se muestran deshabilitados, s
 *   linea 133: Desplegables estilo Windows 98 (como "Ejecutar") para Propiedades de Pantalla
 *   linea 149: Logo de Windows (img/win98/tb98/winflag-32.png) en la esquina superior derecha de Internet Explore
 * ========================================================================= */
/* ==========================================================================
   teléfono sin cambio de tamaño, Internet Explorer / Correo / Ejecutar con íconos como Windows 98
   ========================================================================== */

/* ---- Teléfono: las dos solapas ocupan siempre el mismo alto (la que está oculta reserva su lugar) ---- */
.window--dial .dun { display: grid; grid-template-columns: minmax(0, 1fr); }
.window--dial .dun__tabs { grid-row: 1; }
.window--dial .dun__body { grid-row: 2; grid-column: 1; }
.window--dial .dun__body[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.window--dial .dun__btns { grid-row: 3; }

/* ---- Internet Explorer: barra de botones con íconos, dirección, página de error ---- */
.menu-bar--ie { display: flex; align-items: center; }
.menu-bar--ie .ie__throb { margin-left: auto; align-self: stretch; height: 22px; width: 22px; box-shadow: var(--bevel-status); }
.ie__tools { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 3px 2px; }
.ie__tb { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; padding: 2px 4px; }
.ie__tb img { display: block; width: 24px; height: 24px; }
.ie__tb em { font-style: normal; font-size: calc(var(--fs) - 1px); line-height: 1.1; }
.ie__tb--na em { color: #808080; text-shadow: 1px 1px #fff; }
.ie__sep { flex: none; width: 2px; margin: 2px 3px; background: linear-gradient(90deg, #808080 1px, #fff 1px); }
.ie__addr { display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; }
.ie__addrlbl { flex: none; color: #444; }
.ie__addrbox { display: flex; flex: 1; min-width: 0; align-items: center; gap: 4px; padding: 2px 2px 2px 4px; background: #fff; }
.ie__url { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ie__dd { flex: none; align-self: stretch; width: 16px; background: var(--silver); box-shadow: var(--bevel-raised); position: relative; }
.ie__dd::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -4px; border: 4px solid transparent; border-top: 4px solid #000; border-bottom: 0; }
.ie__go { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.ie__links { flex: none; padding-left: 6px; box-shadow: inset 1px 0 grey, inset 2px 0 #fff; }
.ie__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ie__hd img { flex: none; width: 32px; height: 32px; }
.ie__hd .ie__h { margin: 0; }
.ie__mini { display: inline-block; width: 16px; height: 16px; margin: 0 3px 0 1px; vertical-align: -4px; }
.status-bar__field--r img, .status-bar__field img { width: 14px; height: 14px; vertical-align: -3px; }
@media (max-width: 520px) { .ie__tb { min-width: 44px; padding: 2px; } .ie__links { display: none; } }

/* ---- Correo: barra de herramientas con íconos, formato y campos editables ---- */
.oe__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; }
.oe__tb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 26px; height: 26px; padding: 2px 4px; color: inherit; font: inherit; background: transparent; border: 0; box-shadow: none; }
.oe__tb img { display: block; width: 20px; height: 20px; }
.oe__tb:not(.oe__tb--na):hover { box-shadow: inset 1px 1px #fff, inset -1px -1px grey; }
.oe__tb:not(.oe__tb--na):active { box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }
.oe__tb--lbl { padding: 2px 8px 2px 4px; }
.oe__tb--txt { cursor: default; }
.oe__tb--na { cursor: default; }
.oe__sep { flex: none; width: 2px; height: 22px; margin: 0 3px; background: linear-gradient(90deg, #808080 1px, #fff 1px); }
.oe__fmt { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.oe__sel { position: relative; display: inline-block; padding: 2px 20px 2px 4px; background: #fff; box-shadow: var(--bevel-field); }
.oe__sel i { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 14px; background: var(--silver); box-shadow: var(--bevel-raised); }
.oe__sel i::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -3px; border: 3px solid transparent; border-top: 4px solid #000; border-bottom: 0; }
.oe__sel--a { min-width: 70px; } .oe__sel--b { min-width: 92px; } .oe__sel--c { min-width: 42px; }
.oe__f { padding: 0 6px; font-size: calc(var(--fs) + 1px); cursor: default; }
.oe__hdr { grid-template-columns: max-content minmax(0, 1fr); }
.oe__lblbtn { min-width: 64px; padding: 2px 8px; text-align: left; }
.oe__lbl { padding-left: 8px; }
.oe__in { width: 100%; min-width: 0; box-sizing: border-box; padding: 3px 6px; font: inherit; color: #000; background: #fff; border: 0; outline: 0; user-select: text; -webkit-user-select: text; }
.oe__body { display: block; box-sizing: border-box; width: 100%; min-height: 160px; resize: none; padding: 8px; font: inherit; color: #000; background: #fff; border: 0; outline: 0; user-select: text; -webkit-user-select: text; }
.oe__in, .oe__body { cursor: url('../img/cursors/ibeam.svg') 2 8, text !important; }
.oe__in:focus, .oe__body:focus { outline: 0; }

/* ---- Ejecutar: ícono, lista desplegable y botón Examinar como en Windows 98 ---- */
.xd--run { width: min(380px, 94vw); }
.xd--run .xd__body { display: block; padding: 14px 14px 6px; }
.run__top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.run__top p { flex: 1; margin: 0; }
.run__ico { flex: none; width: 32px; height: 32px; }
.xd--run .run__row { display: flex; align-items: center; gap: 10px; width: auto; margin: 0 0 4px; }
.run__combo { display: flex; flex: 1; min-width: 0; align-items: stretch; padding: 2px; background: #fff; }
.xd--run .run__combo input { flex: 1; min-width: 0; padding: 1px 4px; border: 0; outline: 0; background: transparent; }
.run__combo input::-webkit-calendar-picker-indicator { display: none !important; }
.run__arrow { flex: none; width: 16px; padding: 0; border: 0; background: var(--silver); box-shadow: var(--bevel-raised); position: relative; }
.run__arrow::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -4px; border: 4px solid transparent; border-top: 4px solid #000; border-bottom: 0; }
/* Lista desplegable clásica de Ejecutar (Windows 98), sin picker nativo moderno */
.run__combo { position: relative; }
.run__arrow { cursor: default; }
.run__arrow:active, .run__arrow[aria-expanded="true"] { box-shadow: var(--bevel-pressed); }
.run__list { position: absolute; z-index: 10020; top: calc(100% + 2px); left: 0; right: 0; max-height: 156px; overflow-y: auto; padding: 2px; background: #fff; color: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #808080; font: var(--fs) var(--font); }
.run__list[hidden], .run__option[hidden] { display: none !important; }
.run__option { display: block; width: 100%; padding: 2px 5px; border: 0; border-radius: 0; background: #fff; color: #000; text-align: left; font: inherit; cursor: default; }
.run__option:hover, .run__option:focus { outline: 0; background: #000080; color: #fff; }
.xd--run .xd__btns { justify-content: flex-end; padding: 10px 14px 14px; }
.xd--run .xd__btns .btn { min-width: 75px; text-align: center; }
.run__help { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; margin-right: 2px; font: 700 11px/1 Arial, sans-serif; background-image: none; }
.xd--run .run__help + .title-bar__btn { margin-left: 0; }

/* ---- SAP: transacciones que funcionan (PA30 y SE38) en negrita + logo SAP armado por Clippy ---- */
.sap__node[title="PA30"] .sap__lbl, .sap__node[title="SE38"] .sap__lbl, .sap__node[title="PE02"] .sap__lbl, .sap__node[title="PC00_M29_CALC"] .sap__lbl, .sap__node[title="SE09"] .sap__lbl, .sap__node[title="SE10"] .sap__lbl { font-weight: 700; }
.sap__node.is-hint { animation: sxHint .9s ease-in-out 4; }
@keyframes sxHint { 0%, 100% { background: transparent; } 50% { background: #ffe97a; color: #000; } }
.sap__node.is-hint .sap__lbl::after { content: ' \25C4'; color: #c00; }

/* ---- Clippy se transforma: lienzo de píxeles (cuerpo de Clippy -> logo SAP) ---- */
#clipfx { position: fixed; left: 0; top: 0; z-index: 87; pointer-events: none; image-rendering: pixelated; transition: opacity .35s; }
#clipfx.is-gone { opacity: 0; }
body.is-clipmorph #clipr .clipr__img { visibility: hidden; }


/* Durante el arranque de Windows, el splash ocupa la pantalla completa sin scrollbar del documento. */
html:has(body .w98splash), html:has(body .bios), html:has(body .boot) { overflow: hidden !important; }
body:has(.w98splash), body:has(.bios), body:has(.boot) { overflow: hidden !important; }

/* íconos de barras de herramientas (Outlook, IE, Paint) en pixel art */
.oe__tb img { width: 16px; height: 16px; image-rendering: pixelated; }
.ie__tb img { image-rendering: pixelated; }
.paint__tool img { display: block; width: 16px; height: 16px; image-rendering: pixelated; }
.paint__tool:first-child { box-shadow: var(--bevel-raised); }
.paint__tool:nth-child(7) { box-shadow: var(--bevel-pressed); }

/* En Internet Explorer, los controles de la maqueta que no tienen acción real
   se muestran deshabilitados, sin aparentar que son enlaces funcionales. */
.ie__tools .ie__tb { color: #808080; }
.ie__tools .ie__tb img { filter: grayscale(1); opacity: .62; }
.ie__tools .ie__tb em { color: #808080; text-shadow: 1px 1px #fff; }

/* Desplegables estilo Windows 98 (como "Ejecutar") para Propiedades de Pantalla */
.wcombo { display: flex; align-items: stretch; box-sizing: border-box; min-height: 22px; min-width: 0; width: 100%; padding: 2px; background: #fff; color: #000; box-shadow: var(--bevel-field); cursor: default; font: inherit; }
.ss__row .wcombo { flex: 1; width: auto; }
.wcombo:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.wcombo__v { flex: 1; min-width: 0; padding: 1px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000; -webkit-text-fill-color: #000; align-self: center; }
.wcombo__b { flex: none; position: relative; width: 17px; background: var(--silver); box-shadow: var(--bevel-raised); }
.wcombo__b::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -4px; border: 4px solid transparent; border-top: 4px solid #000; border-bottom: 0; }
.wcombo[aria-expanded="true"] .wcombo__b { box-shadow: var(--bevel-pressed); }
.wcombo.is-off { background: var(--silver); }
.wcombo.is-off .wcombo__v { color: grey; -webkit-text-fill-color: grey; text-shadow: 1px 1px #fff; }
.wcombo.is-off .wcombo__b::after { border-top-color: grey; }
.wcombo__list { position: fixed; z-index: 2147483000; box-sizing: border-box; overflow-y: auto; padding: 2px; background: #fff; color: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #808080; }
.wcombo__list[hidden] { display: none !important; }
.wcombo__opt { padding: 2px 5px; white-space: nowrap; color: #000; -webkit-text-fill-color: #000; cursor: default; }
.wcombo__opt.is-sel, .wcombo__opt:hover { background: #000080; color: #fff; -webkit-text-fill-color: #fff; }

/* Logo de Windows (img/win98/tb98/winflag-32.png) en la esquina superior derecha de Internet Explorer */
.menu-bar--ie .ie__throb { width: 22px; height: 22px; object-fit: contain; background: #fff; image-rendering: auto; }