/* ==========================================================================
 * INDICE DE ESTE ARCHIVO. Solo comentarios: no cambia ninguna regla.
 * Orden: telefono, logo de inicio, LEEME estilo Ayuda de Windows 98, banner sin linea de colores, fecha y hora, candado.
 * Numero = linea donde empieza el comentario de esa parte (el texto es el del propio comentario).
 *
 *   linea 14: ventana del teléfono con una sola solapa (como el cuadro de Acceso telefónico de Windows 98)
 *   linea 32: Logo de inicio: el 98 con la misma tipografía negrita que "Windows"
 *   linea 35: LEEME con la estética de la Ayuda de Windows 98
 *   linea 69: se quitó la línea de colores bajo el banner (no existe en la ayuda original)
 *   linea 96: Fecha y hora: como el cuadro "Propiedades de Fecha y hora" de Windows 98  [menciona #w-cal]
 *   linea 135: Celular: el botón Mostrar/Ocultar titila hasta que el usuario despliega el índice
 *   linea 140: libro "Trucos secretos" con candado mientras esta bloqueado
 * ========================================================================= */
/* ventana del teléfono con una sola solapa (como el cuadro de Acceso telefónico de Windows 98) */
.window--dial .combo.is-off { background: var(--silver); }
.window--dial .combo.is-off .combo__b { box-shadow: var(--bevel-raised); }
.window--dial .dun__lbl.is-off { color: #808080; text-shadow: 1px 1px #fff; }
.window--dial .dun__in.phone { word-spacing: normal; letter-spacing: 0; cursor: copy; }

.dun__pick { position: relative; }
.dun__pick .dun__cur { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 0; background: transparent; color: #000; font: inherit; text-align: left; cursor: default; }
.dun__pick .dun__cur span { overflow: hidden; text-overflow: ellipsis; }
.dun__pick .dun__cur:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.dun__pick .combo__b { border: 0; padding: 0; border-radius: 0; cursor: default; }
.dun__pick .combo__b:active, .dun__pick.is-open .combo__b { box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }
.dun__list { position: absolute; z-index: 10020; top: 100%; left: 0; right: 0; margin: 1px 0 0; padding: 1px; list-style: none; background: #fff; color: #000; border: 1px solid #000; box-shadow: 1px 1px 0 grey; }
.dun__list[hidden] { display: none; }
.dun__list li { display: flex; align-items: center; gap: 6px; padding: 2px 5px; white-space: nowrap; cursor: default; }
.dun__list li span { overflow: hidden; text-overflow: ellipsis; }
.dun__list li:hover, .dun__list li.is-hot { background: #000080; color: #fff; }

/* ---- Logo de inicio: el 98 con la misma tipografía negrita que "Windows" ---- */
.w98splash__win .w98splash__98 { font: inherit; letter-spacing: inherit; margin-left: .04em; color: #000; }

/* ---- LEEME con la estética de la Ayuda de Windows 98 ---- */
.window--help { width: 100%; max-width: 640px; justify-self: start; }
.hlp { display: flex; flex-direction: column; padding: 2px; font: var(--fs)/1.3 var(--font); color: #000; }
.hlp__tb { display: flex; flex-wrap: wrap; gap: 0; padding: 2px 0 4px; }
.hlp__b { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 3px 8px; border: 1px solid transparent; border-radius: 0; background: transparent; color: #000; font: inherit; cursor: default; }
.hlp__b .hlp__ic { display: block; width: 16px; height: 16px; image-rendering: pixelated; margin: 2px 0 3px; }
.hlp__it img { image-rendering: pixelated; }
button.hlp__b:hover, button.hlp__b:focus-visible { outline: 0; border-color: #fff #808080 #808080 #fff; }
button.hlp__b:active { border-color: #808080 #fff #fff #808080; }
button.hlp__b:disabled { color: #808080; text-shadow: 1px 1px #fff; }
button.hlp__b:disabled .hlp__ic { filter: grayscale(1); opacity: .5; }
.hlp__main { display: flex; gap: 4px; height: 360px; min-height: 0; padding: 2px; }
.hlp__nav { flex: 0 0 210px; display: flex; flex-direction: column; min-width: 0; }
.hlp__main.is-hid .hlp__nav { display: none; }
.hlp__tabs { display: flex; padding-left: 1px; }
.hlp__tabs button { padding: 3px 7px; border: 0; border-radius: 0; background: var(--silver); color: #000; font: inherit; cursor: default; box-shadow: inset 1px 1px #fff, inset -1px 0 grey, inset 0 1px 0 #dfdfdf; }
.hlp__tabs button.is-on { position: relative; z-index: 1; margin-bottom: -2px; padding-bottom: 5px; }
.hlp__tabs button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.hlp__tabbody { position: relative; z-index: 0; flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--bevel-field); }
.hlp__tree { list-style: none; margin: 0; padding: 2px 0; }
.hlp__tree ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.hlp__tree li { margin: 0; }
.hlp__it { display: flex; align-items: center; gap: 4px; width: 100%; padding: 1px 3px; border: 0; border-radius: 0; background: transparent; color: #000; font: inherit; text-align: left; white-space: nowrap; cursor: default; }
.hlp__it img { flex: none; width: 16px; height: 16px; }
.hlp__it span { overflow: hidden; text-overflow: ellipsis; }
.hlp__it.is-sel span { background: #000080; color: #fff; outline: 1px dotted #ff0; outline-offset: -1px; }
.hlp__it:focus-visible { outline: 0; }
.hlp__it:focus-visible span { outline: 1px dotted #000; }
.hlp__srch { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.hlp__srch input { box-sizing: border-box; width: 100%; padding: 2px 4px; border: 0; background: #fff; font: inherit; box-shadow: var(--bevel-field); }
.hlp__srch .btn { align-self: flex-end; min-width: 76px; }
.hlp__res { margin: 2px -8px 0; }
.hlp__page { flex: 1; min-width: 0; overflow: auto; background: url(../img/win98/help/leeme-bg.png) 0 0 / 100% 360px no-repeat local, #fff; box-shadow: var(--bevel-field); }   /* fondo azul-blanco tramado como la ayuda de Windows 98 */
.hlp__ban { position: relative; display: flex; align-items: center; gap: 6px; height: 90px; padding: 0 10px; background: transparent; }   /* sin franja blanca: se ve el fondo */
/* se quitó la línea de colores bajo el banner (no existe en la ayuda original) */
.hlp__ban::after { content: none; }
.hlp__ban img { flex: none; width: 40px; height: auto; }
.hlp__brand { display: flex; flex-direction: column; line-height: 1; color: #000; }
.hlp__ms { font: 500 13px/1 'Franklin Gothic Medium', 'Franklin Gothic Book', 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.01em; }
.hlp__win { margin-top: -1px; white-space: nowrap; font: 900 26px/.95 'Franklin Gothic Heavy', 'Franklin Gothic Demi', 'Arial Black', 'Helvetica Neue', Impact, sans-serif; letter-spacing: -.045em; }
.hlp__brand sup { font-size: .3em; font-weight: 500; letter-spacing: 0; vertical-align: top; position: relative; top: .35em; }
.hlp__doc { padding: 14px 16px 18px; font-family: var(--font); font-size: var(--fs); line-height: 1.5; }
.hlp__doc h1 { margin: 0 0 12px; font: 700 16px/1.2 var(--font); }
.hlp__doc .hlp__h3 { margin: 14px 0 6px; font: 700 var(--fs)/1.3 var(--font); }
.hlp__doc code { font: inherit; font-weight: 700; }
.hlp__doc p { margin: 0 0 12px; overflow-wrap: anywhere; }
.hlp__doc ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.hlp__doc li { margin: 0 0 8px; }
.hlp__doc a, .hlp__doc .hlp__lnk { color: #0000ee; text-decoration: underline; cursor: pointer; }
.hlp__doc .hlp__lnk { padding: 0; border: 0; background: none; font: inherit; text-align: left; }
.hlp__doc .cp { color: #0000ee; text-decoration: underline; cursor: copy; }
.hlp__doc dl { margin: 0; }
.hlp__doc dt { margin: 10px 0 2px; font-weight: 700; }
.hlp__doc dd { margin: 0; }
html .window--help:is(.is-max, .is-sized) > .win-scroll > .hlp { flex: 1 0 auto; }
html .window--help.is-max .hlp__main { height: calc(100vh - 150px); }
@media (max-width: 520px) {
  .hlp__main { flex-direction: column; height: auto; }
  .hlp__nav { flex: none; height: 215px; }
  .hlp__page { min-height: 300px; }
  .hlp__b { min-width: 52px; padding: 3px 4px; }
}

/* ---- Fecha y hora: como el cuadro "Propiedades de Fecha y hora" de Windows 98 ---- */
.cal98 .cal__tabs { gap: 0; padding-left: 2px; }
.cal98 .cal__tabs span { padding: 3px 9px; background: var(--silver); box-shadow: inset 1px 1px #fff, inset -1px 0 grey; font-weight: 400; }
.cal98 .cal__tabs .is-on { position: relative; z-index: 1; margin-bottom: -2px; padding-bottom: 5px; }
.cal98 .cal__body { padding: 10px; }
.cal98__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cal98__date { flex: 1 1 200px; min-width: 0; padding: 8px 8px 8px; }
.cal98__time { flex: 0 1 172px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; }
.cal98__top { display: flex; gap: 8px; margin-bottom: 8px; }
.cal98__mon { position: relative; flex: 1; min-width: 0; }
.cal98__mon .combo__v { padding: 1px 4px; margin: 2px 0 2px 2px; border: 0; border-radius: 0; background: #000080; color: #fff; font: inherit; text-align: left; cursor: default; flex: 1; }
.cal98__mon .combo__b { border: 0; padding: 0; border-radius: 0; cursor: default; }
.cal98__list { z-index: 10020; max-height: 150px; overflow-y: auto; }
.cal98__list li { display: block; }
.cal98__yr { display: flex; align-items: stretch; flex: none; }
.cal98__yrv { min-width: 52px; padding: 3px 6px; }
.cal98__spin { display: flex; flex-direction: column; width: 16px; margin-left: 1px; }
.cal98__spin button, .cal98__spin i { position: relative; flex: 1; padding: 0; border: 0; border-radius: 0; background: var(--silver); box-shadow: var(--bevel-raised); cursor: default; }
.cal98__spin :first-child::after, .cal98__spin :last-child::after { content: ''; position: absolute; left: 50%; top: 50%; margin-left: -3px; border: 3px solid transparent; }
.cal98__spin :first-child::after { margin-top: -3px; border-top: 0; border-bottom: 3px solid #000; }
.cal98__spin :last-child::after { margin-top: -1px; border-bottom: 0; border-top: 3px solid #000; }
.cal98__spin button:active { box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }
.cal98__grid { background: #fff; box-shadow: var(--bevel-field); }
.cal98__grid th { padding: 3px 0; background: #808080; color: #fff; font-weight: 400; }
.cal98__grid td { padding: 3px 0; cursor: default; }
.cal98__grid td[data-d]:hover { background: #e8e8f4; }
.cal98__grid td.is-sel { background: #000080; color: #fff; font-weight: 400; }
.cal98__clk { width: 140px; height: 140px; margin-top: 4px; }
.cal98__dig { display: flex; align-items: stretch; }
.cal98__dig .field { min-width: 82px; padding: 3px 6px; text-align: center; }
.cal98__btns { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 4px 4px; }
.cal98__btns .btn { min-width: 76px; padding: 4px 12px; text-align: center; }
.cal98__btns .btn:disabled { color: grey; text-shadow: 1px 1px #fff; }
.cal98 .cal__note { min-height: 0; margin: 10px 0 0; }
#w-cal { width: 450px; max-width: 100%; }
.cal98__time { flex: 0 0 168px; }
.cal98__clk { width: 132px; height: 132px; }
.cal98__date { flex: 1 1 190px; }

/* Celular: el botón Mostrar/Ocultar titila hasta que el usuario despliega el índice */
@keyframes hlpHint { 0%, 100% { background: transparent; box-shadow: none; } 50% { background: #000080; color: #fff; box-shadow: 0 0 0 2px #ff0; } }
.hlp__b.is-hint { animation: hlpHint 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .hlp__b.is-hint { animation: none; background: #000080; color: #fff; } }

/* libro "Trucos secretos" con candado mientras esta bloqueado */
.hlp__bk { position: relative; flex: none; display: inline-block; width: 16px; height: 16px; overflow: visible; }
.hlp__it .hlp__bk img { display: block; }
.hlp__lock { position: absolute; right: -6px; bottom: -5px; width: 16px; height: 16px; image-rendering: pixelated; }  /* candado real de Windows 98 */
.hlp__it .hlp__bk { overflow: visible; text-overflow: clip; }