/* ==================== SKIN MÓVIL: TELÉFONO NOKIA ==================== */
/* Escritorio = Windows 95. Móvil = celular monocromo de la misma época.     */
/* Windows 95 nunca tuvo versión móvil: en vez de encogerlo mal, cambia el   */
/* aparato. El motor de ventanas y las apps son los mismos.                  */
/* Se carga solo bajo 768px, así que no pisa nada del escritorio.            */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ==================== Paleta ==================== */
/* Contrastes calculados: tinta sobre LCD = 8.70:1 (AAA), y da lo mismo al
   invertirse, así que la fila seleccionada cumple con el mismo margen. */
:root {
    --nk-lcd:      #a8bd8a;
    --nk-ink:      #141a10;
    --nk-shell:    #262b2e;
    --nk-shell-hi: #363c40;
    --nk-key:      #31383c;
    --nk-borde:    3px;
}

/* ==================== Base ==================== */
html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body.nokia {
    margin: 0;
    /* dvh y no vh: en iOS Safari la barra de URL rompe 100vh. */
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: var(--nk-shell);
    background-image: radial-gradient(circle at 50% 0%, var(--nk-shell-hi), var(--nk-shell) 70%);
    font-family: 'VT323', 'Courier New', monospace;
    color: var(--nk-ink);
}

/* Sin cursores de Win95 en táctil */
*, *::before, *::after { cursor: default !important; }

/* ==================== Fuera la UI de Windows ==================== */
#taskbar, #start-menu, #context-menu, #volume-popup, #webamp-container, #webamp {
    display: none !important;
}

/* ==================== La pantalla LCD ==================== */
#nokia-screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--nk-lcd);
    border: var(--nk-borde) solid #0d1114;
    border-radius: 4px;
    box-shadow: inset 0 0 22px rgba(20, 26, 16, .28);
    overflow: hidden;
}

/* ==================== Barra de estado ==================== */
#nokia-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 6px;
    border-bottom: 1px solid var(--nk-ink);
    font-size: 17px;
    line-height: 1;
    letter-spacing: .5px;
}

.nk-signal { display: flex; align-items: flex-end; gap: 1.5px; }
.nk-signal i { width: 3px; background: var(--nk-ink); display: block; }

.nk-operator { font-weight: bold; letter-spacing: 1px; }

.nk-right { display: flex; align-items: center; gap: 6px; }

.nk-battery {
    width: 18px; height: 9px;
    border: 1.5px solid var(--nk-ink);
    border-radius: 1px;
    position: relative;
    display: inline-block;
}
.nk-battery::after {
    content: ''; position: absolute; right: -4px; top: 2px;
    width: 2px; height: 3px; background: var(--nk-ink);
}
.nk-battery b { display: block; height: 100%; width: 70%; background: var(--nk-ink); }

/* ==================== El menú (mismos .desktop-icon del escritorio) ====== */
#desktop {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--nk-lcd) !important;
    background-image: none !important;
    display: block;
    padding: 2px 0;
}

.desktop-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* 44px de alto: área táctil recomendada */
    min-height: 44px;
    padding: 4px 8px;
    border: none;
    background: transparent;
}

.desktop-icon .icon-emoji {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    font-size: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--nk-ink);
}
.desktop-icon .icon-emoji svg { width: 20px; height: 20px; }

.desktop-icon .icon-label {
    font-family: 'VT323', monospace;
    font-size: 21px;
    line-height: 1.1;
    color: var(--nk-ink);
    text-shadow: none;
    margin: 0;
    text-align: left;
}

/* Fila seleccionada: video inverso, como el menú real */
.desktop-icon.nk-sel {
    background: var(--nk-ink);
}
.desktop-icon.nk-sel .icon-label,
.desktop-icon.nk-sel .icon-emoji {
    color: var(--nk-lcd);
}

.desktop-icon:hover,
.desktop-icon.selected {
    background: transparent;
    border: none;
}
.desktop-icon.nk-sel:hover { background: var(--nk-ink); }

/* ==================== Softkeys ==================== */
#nokia-softkeys {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 8px 4px;
    border-top: 1px solid var(--nk-ink);
    min-height: 26px;
}

.nk-sk {
    background: none;
    border: none;
    padding: 4px 6px;
    font-family: 'VT323', monospace;
    font-size: 19px;
    color: var(--nk-ink);
    min-height: 26px;
}
.nk-sk:active { background: var(--nk-ink); color: var(--nk-lcd); }
.nk-sk.nk-oculta { visibility: hidden; }

/* ==================== Teclado ==================== */
#nokia-keypad {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: 10px;
    padding: 4px 6px 0;
}

.nk-key {
    width: 52px; height: 40px;
    border: none;
    border-radius: 20px;
    background: var(--nk-key);
    color: #cfd6d2;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 2px 0 #0d1114;
}
.nk-key:active { transform: translateY(1px); box-shadow: 0 1px 0 #0d1114; }
.nk-call { color: #8fd694; }
/* Solo el auricular va al reves, como en el aparato real. Antes rotaba el boton
   entero: quedaba inclinado en diagonal y mas grande que el verde. */
.nk-end { color: #e08b84; }
.nk-end span { display: inline-block; transform: rotate(135deg); }

.nk-dpad {
    display: grid;
    grid-template-columns: repeat(3, 46px);
    grid-template-rows: repeat(3, 36px);
    gap: 3px;
}

.nk-d {
    border: none;
    background: var(--nk-key);
    color: #cfd6d2;
    font-family: 'VT323', monospace;
    font-size: 17px;
    box-shadow: 0 2px 0 #0d1114;
}
.nk-d:active { transform: translateY(1px); box-shadow: 0 1px 0 #0d1114; }

.nk-up    { grid-area: 1 / 2; border-radius: 18px 18px 4px 4px; }
.nk-left  { grid-area: 2 / 1; border-radius: 18px 4px 4px 18px; }
.nk-ok    { grid-area: 2 / 2; border-radius: 4px; font-size: 15px; font-weight: bold; }
.nk-right { grid-area: 2 / 3; border-radius: 4px 18px 18px 4px; }
.nk-down  { grid-area: 3 / 2; border-radius: 4px 4px 18px 18px; }

/* En pantallas muy bajas el teclado se come el LCD: se esconde y quedan
   el toque directo y las softkeys, que hacen lo mismo. */
@media (max-height: 620px) {
    #nokia-keypad { display: none; }
}

/* ==================== Ventanas: ocupan el LCD ==================== */
.window {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    z-index: 500;
    background: var(--nk-lcd);
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

#desktop { position: relative; }

.window.maximized { height: auto !important; }

.resize-handle { display: none !important; }

.window-header {
    flex: 0 0 auto;
    background: var(--nk-ink) !important;
    background-image: none !important;
    color: var(--nk-lcd) !important;
    border: none;
    border-bottom: 1px solid var(--nk-ink);
    padding: 3px 6px;
    min-height: 26px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.window-title {
    font-family: 'VT323', monospace;
    font-size: 19px;
    font-weight: normal;
    color: var(--nk-lcd);
    background: transparent;
    padding: 0;
    text-align: left;
    flex: 1 1 auto;
    order: 2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.window-icon { display: none; }

.window-controls { order: 3; gap: 0; background: transparent; padding: 0; }

.minimize-btn, .maximize-btn { display: none !important; }

.close-btn {
    width: 30px !important;
    height: 26px !important;
    background: transparent !important;
    border: 1px solid var(--nk-lcd) !important;
    border-radius: 2px;
    color: var(--nk-lcd);
    font-size: 15px;
    font-family: 'VT323', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}
.close-btn:active { background: var(--nk-lcd) !important; color: var(--nk-ink); }

.window.inactive .window-header { background: var(--nk-ink) !important; }

.window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--nk-lcd);
    font-family: 'VT323', monospace;
    font-size: 19px;
}

.window-content { overflow-y: auto; }

/* ==================== Radio: el reproductor del Nokia ==================== */
.nk-radio {
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* La carátula llega a color: monocromo por filtro y multiply para que quede
   teñida por el LCD en vez de flotar como una foto pegada encima. */
.nk-radio-art {
    flex: 0 1 auto;
    min-height: 0;
    width: auto;
    max-width: min(100%, 200px);
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid var(--nk-ink);
    filter: grayscale(1) contrast(1.35) brightness(1.1);
    mix-blend-mode: multiply;
}
.nk-radio-art[hidden] { display: none; }

.nk-radio-titulo { font-size: 22px; line-height: 1.1; }
.nk-radio-artista { font-size: 18px; opacity: .8; }

.nk-radio-btn {
    flex: 0 0 auto;
    width: 56px;
    height: 40px;
    font-size: 20px;
    line-height: 1;
}

.nk-radio-pie { font-size: 16px; letter-spacing: .5px; }

/* Teclado virtual */
.window input:focus, .window textarea:focus { position: relative; z-index: 1000; }
@supports (-webkit-touch-callout: none) {
    .window { scroll-behavior: smooth; }
    .window input:focus, .window textarea:focus { scroll-margin-top: 60px; }
}

/* ==================== Barras de scroll ==================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nk-ink); border-radius: 3px; }

/* ==================== Campos y botones, base común ==================== */
/* El LCD es de un color: todo lo que en Win95 era gris/blanco acá se aplana
   al mismo verde y se distingue solo por el borde.
   Se acota a .window-body a propósito: si abarca toda .window, gana por
   especificidad sobre .close-btn y pinta la × oscura sobre el header oscuro. */
.window-body input, .window-body textarea,
.window-body select, .window-body button {
    font-family: 'VT323', monospace;
    background: var(--nk-lcd);
    color: var(--nk-ink);
    border: 1px solid var(--nk-ink);
    border-radius: 0;
}
.window-body button:active { background: var(--nk-ink); color: var(--nk-lcd); }

/* Tamaño mínimo 16px en inputs: bajo eso, iOS hace zoom al enfocar. */
.window-body input, .window-body textarea { font-size: 16px; padding: 6px; }

/* Todo lo que Win95 pintaba blanco se aplana al LCD. */
.window-content,
.explorer-content,
.browser-status,
.outlook-msg-area,
.outlook-msg-header,
.settings-actions,
.paint-canvas-area,
.ms-board-wrap,
.ms-container,
.app-container,
.address-bar,
.paint-sidebar,
.ms-hidden,
.ms-revealed,
.ms-header,
.browser-toolbar,
.window-menu,
.window-statusbar {
    background: var(--nk-lcd) !important;
}

/* Los emojis a color de las apps romperían el monocromo. */
.window .icon-emoji,
.window .explorer-item span:first-child,
.window .tb-icon,
.window .tb-icon-sm,
.window .window-menu span,
.window .ms-face-btn,
.window .paint-tool-btn {
    filter: grayscale(1) contrast(1.4);
}

/* ==================== Ajustes por app ==================== */

/* Explorador */
.explorer-content { gap: 2px; padding: 4px; display: block; }
.explorer-item {
    width: auto;
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 8px;
    min-height: 44px;
}
.explorer-item span:first-child { font-size: 19px !important; }
.explorer-item span:last-child { font-family: 'VT323', monospace; font-size: 19px; }
.explorer-item:active { background: var(--nk-ink); color: var(--nk-lcd); }

.address-bar { border-bottom: 1px solid var(--nk-ink); }
.address-bar input { font-size: 16px; }

/* Visor de imágenes */
.image-viewer img { max-width: 100%; max-height: 100%; }

/* Calculadora */
.calc-display-input { font-size: 22px; height: 36px; text-align: right; }
.calc-btn { padding: 8px 4px; font-size: 18px; min-height: 44px; }

/* Paint */
.paint-sidebar { width: 44px; border-right: 1px solid var(--nk-ink); }
.paint-tool-btn { width: 38px; height: 38px; font-size: 15px; }
.paint-tool-btn.active { background: var(--nk-ink); color: var(--nk-lcd); }
.paint-size-btn { width: 38px; height: 28px; }
.paint-colorbar { flex-wrap: wrap; }

/* Buscaminas */
.ms-cell { width: 30px !important; height: 30px !important; font-size: 17px; font-family: 'VT323', monospace; }
.ms-hidden { border: 1px solid var(--nk-ink); }
.ms-counter { font-size: 19px; font-family: 'VT323', monospace; padding: 2px 6px; border: 1px solid var(--nk-ink); }
.ms-face-btn { width: 34px; height: 34px; font-size: 18px; }
.ms-header { border: 1px solid var(--nk-ink); }

/* Navegador */
.browser-toolbar { flex-wrap: wrap; padding: 4px; gap: 4px; border-bottom: 1px solid var(--nk-ink); }
.browser-nav-btn { width: 34px; height: 34px; font-size: 14px; }
.browser-addr-label { display: none; }
.browser-url-input { font-size: 16px; padding: 5px 6px; }
.browser-go-btn { padding: 5px 12px; font-size: 17px; }
.browser-viewport iframe { background: #fff; }

/* Formulario de contacto */
.outlook-field-label { width: auto; min-width: 60px; font-size: 18px; font-family: 'VT323', monospace; }
.outlook-field-input { font-size: 16px; }
.outlook-to-btn { font-size: 17px; padding: 4px 8px; min-height: 34px; }
.outlook-to-value { font-size: 18px; }
.outlook-textarea { font-size: 16px; min-height: 110px; }
.outlook-fields { padding: 4px; }

/* Barras de herramientas */
.app-toolbar { background: var(--nk-lcd) !important; border-bottom: 1px solid var(--nk-ink); flex-wrap: wrap; }
.app-toolbar-btn { padding: 4px 8px; min-height: 40px; font-size: 16px; }
.app-toolbar-divider { background: var(--nk-ink); width: 1px; }
.app-menubar { background: var(--nk-lcd) !important; border-bottom: 1px solid var(--nk-ink) !important; flex-wrap: wrap; }
.app-menubar span { font-family: 'VT323', monospace; font-size: 17px; }
.app-statusbar { background: var(--nk-lcd) !important; border-top: 1px solid var(--nk-ink); font-family: 'VT323', monospace; font-size: 16px; }
.tb-icon, .tb-icon-sm { font-size: 15px; }

/* Acerca de */
.about-content { padding: 12px; font-family: 'VT323', monospace; }
.about-content h1 { font-size: 26px; color: var(--nk-ink) !important; font-family: 'VT323', monospace; }
.about-content p { font-size: 19px; line-height: 1.35; color: var(--nk-ink) !important; }
.about-content a { color: var(--nk-ink) !important; font-size: 19px !important; text-decoration: underline; }
.about-content hr { border-top: 1px solid var(--nk-ink) !important; }
.about-content strong { font-weight: bold; }

/* Configuración */
.wallpaper-option { width: 52px; height: 52px; border: 1px solid var(--nk-ink); }
.settings-btn { padding: 8px 20px; font-size: 18px; min-height: 40px; }
.settings-body { padding: 10px; }

/* Bloc de notas */
.notepad-textarea { font-size: 16px; padding: 8px; }
.window-menu { border-bottom: 1px solid var(--nk-ink); }
.window-menu span { font-family: 'VT323', monospace; font-size: 17px; padding: 6px 8px; display: inline-block; min-height: 32px; }
.window-statusbar { border-top: 1px solid var(--nk-ink); font-family: 'VT323', monospace; font-size: 16px; }

/* ==================== Arranque ==================== */
#bsod-screen { font-size: 12px; padding: 12px; }
.bsod-content p { font-size: 12px; }