/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: iconos de barras de IE/Fiori, Ayuda, Correo, Word y Excel.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 20: Iconos de barras de herramientas Win98 (img/win98/tb98/) en Internet Explorer/Fiori (#w-debug), Ayuda... [menciona #w-debug, #w-leeme, #w-mail]
 *   linea 23: Internet Explorer / Fiori
 *   linea 32: Ayuda de Windows
 *   linea 34: Atras / Adelante deshabilitados -> icono gris
 *   linea 37: Ocultar <-> Mostrar segun el estado del panel
 *   linea 39: Opciones / Ayuda de Web: decorativos (grises); al tocarlos, 1 segundo en color
 *   linea 45: Correo (Outlook Express) [menciona #w-mail]
 *   linea 51: Word / Excel: icono Guardar [menciona #w-excel]
 *   linea 56: Word / Excel: barras de herramientas con los íconos de referencia (recortes en img/win98/office/, 16x1... [menciona #w-excel]
 *   linea 71: Iconos de las barras de herramientas (correcciones)
 *   linea 72: (1) WordArt de Word: icono pixel-art (img/win98/office/wordart.png) en lugar de la letra "A" con degradé.
 *   linea 75: (2) Correo (#w-mail), versión escritorio: descripción de cada icono al lado, como en la barra del Expl... [menciona #w-mail]
 *   linea 85: Boton ClipArt de Word (#wd-clip), junto a WordArt: mismo formato que .wd__art; abre la ventana Inserta...
 * ========================================================================= */
/* Iconos de barras de herramientas Win98 (img/win98/tb98/) en Internet Explorer/Fiori (#w-debug), Ayuda (#w-leeme) y Correo (#w-mail).
   Independiente: para revertir, borrar este archivo + su <link> y volver a poner los src anteriores en esas tres barras de index.html. */

/* ---------- Internet Explorer / Fiori ---------- */
.ie__tools--98 { gap: 0; padding: 3px 2px; }
.ie__tools--98 .ie__tb { min-width: 48px; padding: 2px 4px; border: 1px solid transparent; color: #000; cursor: default; }
.ie__tools--98 .ie__tb img { width: 20px; height: 20px; filter: grayscale(1); opacity: .6; image-rendering: pixelated; margin: 1px 0 2px; }
.ie__tools--98 .ie__tb em { color: #808080; text-shadow: 1px 1px #fff; white-space: nowrap; }
.ie__tools--98 .ie__tb.is-flash img { filter: none; opacity: 1; }
.ie__tools--98 .ie__tb.is-flash em { color: #000; text-shadow: none; }
@media (max-width: 520px) { .ie__tools--98 .ie__tb { min-width: 40px; padding: 2px 1px; } }

/* ---------- Ayuda de Windows ---------- */
.hlp__b .hlp__ic { width: 20px; height: 20px; margin: 1px 0 2px; image-rendering: pixelated; }
/* Atras / Adelante deshabilitados -> icono gris */
button#hlp-back:disabled .hlp__ic { content: url('../img/win98/tb98/help-back-off.png'); filter: none; opacity: 1; }
button#hlp-fwd:disabled .hlp__ic  { content: url('../img/win98/tb98/help-forward-off.png'); filter: none; opacity: 1; }
/* Ocultar <-> Mostrar segun el estado del panel */
.hlp:has(.hlp__main.is-hid) #hlp-hide .hlp__ic { content: url('../img/win98/tb98/help-show.png'); }
/* Opciones / Ayuda de Web: decorativos (grises); al tocarlos, 1 segundo en color */
.hlp__b.is-off { color: #808080; text-shadow: 1px 1px #fff; }
.hlp__b.is-off .hlp__ic { filter: grayscale(1); opacity: .55; }
.hlp__b.is-off.is-flash { color: #000; text-shadow: none; }
.hlp__b.is-off.is-flash .hlp__ic { filter: none; opacity: 1; }

/* ---------- Correo (Outlook Express) ---------- */
#w-mail .oe__tools .oe__tb img { width: auto; height: auto; image-rendering: pixelated; }
#w-mail .oe__tools .oe__tb--na img { filter: grayscale(1); opacity: .55; }
#w-mail .oe__tools .oe__tb--na.is-flash img { filter: none; opacity: 1; }
#w-mail .oe__tools .oe__tb--na.oe__tb--txt.is-flash { color: #000; }

/* ---------- Word / Excel: icono Guardar ---------- */
#wd-save img { display: block; width: 16px; height: 16px; image-rendering: pixelated; }
#w-excel .xi.xi--20 { width: 20px; height: 20px; }
#w-excel .xl__tb .xb.is-flash .xi { filter: none; opacity: 1; }

/* ---------- Word / Excel: barras de herramientas con los íconos de referencia (recortes en img/win98/office/, 16x16, sin gris forzado) ---------- */
#w-excel .xl__tb .xb .xi { filter: none; opacity: 1; }
.wd__tb1 { gap: 0; padding: 2px 3px; }
.wd__tb1 .xg { flex: none; width: 3px; height: 20px; margin: 0 3px 0 0; box-shadow: inset 1px 0 #fff, inset -1px 0 #808080; }
.wd__tb1 .wd__ico { width: 22px; height: 22px; box-sizing: border-box; }
.wd__tb1 .wd__ico img { display: block; width: 16px; height: 16px; image-rendering: pixelated; filter: none; opacity: 1; }
.wd__tb1 .wd__ico.is-off, .wd__tb1 .wd__ico.is-off img { filter: none; opacity: 1; }
.wd__tb1 .wd__ico:not(#wd-save):not(#wd-art):not(#wd-clip) { cursor: default; }
.wd__tb1 .wd__ico:not(#wd-save):not(#wd-art):not(#wd-clip):hover { border-color: transparent; }
.wd__tb1 .wd__sep { margin: 0 3px; }
.wd__arr { flex: none; display: inline-block; width: 0; height: 0; margin: 0 4px 0 -3px; border: 3px solid transparent; border-top: 3px solid #000; border-bottom: 0; }
.wd__tb1 .wd__ico + .wd__arr { align-self: center; }
.wd__tb1 .wd__art { width: auto; min-width: 22px; margin-left: 4px; }
.wd__more { margin-left: auto; padding-right: 2px; filter: drop-shadow(1px 1px 0 #808080); }

/* ---------- Iconos de las barras de herramientas (correcciones) ---------- */
/* (1) WordArt de Word: icono pixel-art (img/win98/office/wordart.png) en lugar de la letra "A" con degradé. */
.wd__tb1 .wd__art { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; font: inherit; width: 22px; min-width: 22px; margin-left: 4px; }
.wd__tb1 .wd__art img { display: block; width: 16px; height: 16px; image-rendering: pixelated; filter: none; opacity: 1; }
/* (2) Correo (#w-mail), versión escritorio: descripción de cada icono al lado, como en la barra del Explorador.
   En celular (<=520px) se ocultan, igual que en el Explorador. Español/inglés con dos spans (.es / .en). */
#w-mail .oe__tools .oe__l { display: inline; white-space: nowrap; }
#w-mail .oe__tools .oe__l .en { display: none; }
html[lang="en"] #w-mail .oe__tools .oe__l .es { display: none; }
html[lang="en"] #w-mail .oe__tools .oe__l .en { display: inline; }
#w-mail .oe__tools .oe__tb--na .oe__l { color: #808080; text-shadow: 1px 1px #fff; }
#w-mail .oe__tools .oe__tb--na.is-flash .oe__l { color: #000; text-shadow: none; }
@media (max-width: 520px) { #w-mail .oe__tools .oe__l { display: none !important; } }

/* Boton ClipArt de Word (#wd-clip), junto a WordArt: mismo formato que .wd__art; abre la ventana Insertar ClipArt (extras.js). */
.wd__tb1 .wd__clip { background: none; width: 22px; min-width: 22px; margin-left: 2px; }
.wd__tb1 .wd__clip img { display: block; width: 16px; height: 16px; image-rendering: pixelated; filter: none; opacity: 1; }