/* ==================== WINDOWS 95 PORTFOLIO - STYLES ==================== */

/* Tipografía bitmap: "MS Sans Serif" no existe en ninguna máquina moderna y el
   fallback a Segoe UI delataba la época. Estos woff2 (13 KB) son la recreación
   "Pixelated MS Sans Serif" que viaja DENTRO del paquete 98.css, licencia MIT. */
@font-face {
    font-family: 'Pixelated MS Sans Serif';
    src: url('../fonts/ms_sans_serif.woff2') format('woff2'),
         url('../fonts/ms_sans_serif.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pixelated MS Sans Serif';
    src: url('../fonts/ms_sans_serif_bold.woff2') format('woff2'),
         url('../fonts/ms_sans_serif_bold.woff') format('woff');
    font-weight: bold;
    font-display: swap;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', Tahoma, sans-serif;
    font-size: 11px;
    -webkit-font-smoothing: none;   /* bitmap: sin antialiasing, como en 1995 */
}

body {
    overflow: hidden;
    height: 100vh;
    background-color: #008080;
    user-select: none;
}

/* ==================== Accessibility ==================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #000080;
    color: #fff;
    padding: 8px 16px;
    z-index: 1000000;
    font-size: 14px;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Azul de seleccion del Win95: lo compartian 8 reglas con el literal repetido.
   Cambiar el color de seleccion es ahora un solo edit. */
.start-menu-item:hover,
.window-menu span:hover,
.context-item:hover,
.win-menu-trigger:hover,
.win-menu-dropdown div:hover,
.submenu-item:hover,
.app-menubar span:hover {
    background: var(--title-active);
    color: white;
}

/* Los submenus se abren al pasar el mouse, como .win-menu: antes cada uno lo
   resolvia con un par de handlers inline en el HTML. */
.has-submenu:hover > .submenu {
    display: block;
}

/* ==================== CSS Variables ==================== */
:root {
    --win-bg: #c0c0c0;
    --win-dark: #808080;
    --win-light: #ffffff;
    --win-darker: #000000;
    --title-active: #000080;
    --title-inactive: #808080;

    /* Biseles del Win95 real: DOS capas por lado (receta de 98.css, MIT).
       `border: outset` de una capa se ve distinto en cada navegador; estos
       box-shadow apilados son idénticos en todos. */
    --bevel-out: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
                 inset -2px -2px grey,   inset 2px 2px #fff;
    --bevel-in:  inset -1px -1px #fff,   inset 1px 1px #0a0a0a,
                 inset -2px -2px #dfdfdf, inset 2px 2px grey;
    --bevel-btn: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                 inset -2px -2px grey,   inset 2px 2px #dfdfdf;
    --bevel-btn-pressed: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
                 inset -2px -2px #dfdfdf, inset 2px 2px grey;
    --bevel-field: inset -1px -1px #fff, inset 1px 1px grey,
                 inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    --bevel-thin: inset -1px -1px #0a0a0a, inset 1px 1px #fff;
}

/* ==================== Desktop ==================== */
#desktop {
    width: 100%;
    height: calc(100vh - 36px);
    background-color: #008080;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Selección por arrastre (rubber band), el gesto que todo escritorio real tiene */
#marquee {
    position: absolute;
    border: 1px dotted #fff;
    background: rgba(0, 0, 128, 0.25);
    pointer-events: none;
    z-index: 40;
}

/* Marca de agua de build beta, como los preview releases de la época */
#build-mark {
    position: fixed;
    right: 10px;
    bottom: 44px;
    color: #fff;
    opacity: .55;
    font-size: 11px;
    text-align: right;
    line-height: 1.4;
    pointer-events: none;
    z-index: 5;
    text-shadow: 1px 1px #004040;
}

/* ==================== Desktop Icons ==================== */
.desktop-icon {
    position: absolute;
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: default;
    padding: 6px 4px;
    border: 1px solid transparent;
}

/* Large icons (default) */
.desktop-icon .icon-emoji {
    font-size: 62px;
    line-height: 1;
    pointer-events: none;
}

.desktop-icon .icon-label {
    color: white;
    text-align: center;
    text-shadow: 1px 1px #000;
    margin-top: 4px;
    font-size: 11px;
    word-break: break-word;
    line-height: 1.2;
    pointer-events: none;
}

/* Small icons mode */
#desktop.small-icons .desktop-icon {
    width: 75px;
}

#desktop.small-icons .desktop-icon .icon-emoji {
    font-size: 40px;
}

.desktop-icon:hover {
    background: rgba(0, 0, 128, 0.3);
}

.desktop-icon.selected {
    background: rgba(0, 0, 128, 0.5);
    border: 1px dotted #fff;
}

.desktop-icon.trash-hover {
    background: rgba(0, 0, 128, 0.5);
    border: 1px dotted #fff;
    filter: brightness(1.2);
}

/* ==================== Taskbar ==================== */
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--win-bg);
    border-top: 2px solid var(--win-light);
    display: flex;
    align-items: center;
    padding: 2px 4px;
    z-index: 9999;
}

#start-button {
    height: 36px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}

#start-button:active,
#start-button.active {
    border: none; box-shadow: var(--bevel-field);
    background: #a0a0a0;
}

#taskbar-programs {
    display: flex;
    flex: 1;
    gap: 2px;
    margin-left: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
}

.taskbar-item {
    height: 22px;
    min-width: 100px;
    max-width: 120px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.taskbar-item.active {
    border: none; box-shadow: var(--bevel-field);
    background: #dfdfdf;
}

/* ==================== System Tray ==================== */
#system-tray {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 2px 8px;
    border: none; box-shadow: var(--bevel-thin);
    margin-left: auto;
    gap: 8px;
}

#clock {
    font-size: 11px;
}

#volume-control {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
}

#volume-control:hover {
    background: rgba(0, 0, 128, 0.3);
}

.volume-popup {
    position: fixed;
    bottom: 30px;
    right: 8px;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    padding: 8px;
    z-index: 100000;
    display: none;
}

.volume-popup.show {
    display: block;
}

.volume-slider {
    width: 120px;
    cursor: pointer;
}

/* ==================== Start Menu ==================== */
#start-menu {
    position: fixed;
    bottom: 36px;
    left: 0;
    width: 280px;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    display: none;
    z-index: 10000;
}

#start-menu.show {
    display: block;
}

#start-menu-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to top, #000080, #1084d0);
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}

#start-menu-sidebar span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #c0c0c0;
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 3px;
}

#start-menu-items {
    margin-left: 36px;
    padding: 8px;
}

.start-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 16px;
    cursor: pointer;
    color: #000;
}

.start-menu-item * {
    color: inherit;
}

.start-menu-item:hover * {
    color: white;
}

/* ==================== Windows ==================== */
.window {
    position: absolute;
    background: var(--win-bg);
    border: none;
    min-width: 200px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    padding: 3px;   /* deja aire para que el contenido no tape el bisel */
    box-shadow: var(--bevel-out), 2px 2px 3px rgba(0,0,0,.35);
}

.window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 36px) !important;
}

.window-header {
    /* Degradado real del 95: azul marino → celeste */
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    padding: 3px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: move;
}

.window.inactive .window-header {
    background: linear-gradient(90deg, #808080, #b5b5b5);
}

.window-title {
    flex: 1;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window-controls {
    display: flex;
    gap: 2px;
}

.window-btn {
    width: 16px;
    height: 14px;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

.window-btn:active {
    border: none; box-shadow: var(--bevel-field);
}

.window-menu {
    background: var(--win-bg);
    padding: 2px 4px;
    border-bottom: 1px solid var(--win-dark);
}

.window-menu span {
    padding: 2px 6px;
    cursor: pointer;
}

.window-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.window-content {
    flex: 1;
    overflow: auto;
    background: white;
    margin: 2px;
    border: none; box-shadow: var(--bevel-field);
}

.window-statusbar {
    background: var(--win-bg);
    padding: 2px 4px;
    border-top: 1px solid var(--win-dark);
    font-size: 10px;
}

/* ==================== Resize Handles ==================== */
.resize-handle {
    position: absolute;
    z-index: 100;
}

.resize-n { top: -3px; left: 0; right: 0; height: 6px; cursor: n-resize; }
.resize-s { bottom: -3px; left: 0; right: 0; height: 6px; cursor: s-resize; }
.resize-e { right: -3px; top: 0; bottom: 0; width: 6px; cursor: e-resize; }
.resize-w { left: -3px; top: 0; bottom: 0; width: 6px; cursor: w-resize; }
.resize-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.resize-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.resize-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: se-resize; }
.resize-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: sw-resize; }

/* ==================== App-Specific Styles ==================== */

/* Notepad */
.notepad-textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 4px;
    outline: none;
}

/* Explorer */
.explorer-content {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
    align-content: flex-start;
}

.explorer-item {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.explorer-item:hover {
    background: rgba(0, 0, 128, 0.2);
}

.explorer-item span {
    text-align: center;
    font-size: 11px;
    margin-top: 4px;
    word-break: break-word;
}

.address-bar {
    display: flex;
    align-items: center;
    padding: 4px;
    background: var(--win-bg);
    gap: 4px;
}

.address-bar input {
    flex: 1;
    padding: 2px 4px;
    border: none; box-shadow: var(--bevel-field);
}

.address-bar button {
    padding: 2px 12px;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    cursor: pointer;
}

.address-bar button:active {
    border: none; box-shadow: var(--bevel-field);
}

/* Image Viewer */
.image-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    height: 100%;
}

.image-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Video Player */
.video-player {
    width: 100%;
    height: 100%;
    background: #000;
}

.video-player iframe,
.video-player video {
    width: 100%;
    height: 100%;
}

/* ==================== Context Menu ==================== */
#context-menu {
    position: fixed;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    min-width: 150px;
    display: none;
    z-index: 100000;
}

.context-item {
    padding: 4px 20px;
    cursor: pointer;
}

/* ==================== Dialog & About ==================== */
.wallpaper-option {
    width: 80px;
    height: 60px;
    border: 2px solid transparent;
    cursor: pointer;
    background-size: cover;
}

.wallpaper-option:hover {
    border-color: #000080;
}

.about-content {
    padding: 20px;
    text-align: center;
}

.about-content h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

.about-content p {
    margin: 5px 0;
}

/* ==================== Boot Screen ==================== */
/* (Main boot screen styles are below in the Boot Screen Styles section) */

/* ==================== Scrollbars ==================== */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: repeating-linear-gradient(45deg,
        var(--win-bg),
        var(--win-bg) 2px,
        var(--win-light) 2px,
        var(--win-light) 4px);
}

::-webkit-scrollbar-thumb {
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
}

::-webkit-scrollbar-button {
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
}

/* ==================== Webamp ==================== */
/* Webamp no monta dentro del contenedor que se le pasa: crea un ancla de 0x0 en
   <body> con id="webamp" y al montar calcula posiciones absolutas para sus
   ventanas, centradas respecto de esa ancla. Correr el ancla sube o baja el
   stack entero: con el ancla en 0,0 abría demasiado abajo. */

/* ==================== Dropdown Menu (Shared) ==================== */
.win-menu {
    position: relative;
}

.win-menu-trigger {
    padding: 2px 6px;
    cursor: pointer;
}

.win-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #c0c0c0;
    border: 2px outset #fff;
    min-width: 150px;
    z-index: 1000;
}

.win-menu:hover .win-menu-dropdown {
    display: block;
}

.win-menu-dropdown div {
    padding: 4px 20px;
    cursor: pointer;
    font-size: 11px;
}

.win-menu-dropdown hr {
    margin: 2px 4px;
    border: 1px inset #fff;
}

/* ==================== Calculator ==================== */
.calc-btn {
    padding: 6px 2px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 12px;
    font-weight: normal;
}

.calc-btn:active {
    border: 2px inset #fff;
    background: #b0b0b0;
}

/* ==================== Paint ==================== */
.paint-tool-btn {
    width: 40px;
    height: 30px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
    font-size: 14px;
}

.paint-tool-btn:active,
.paint-tool-btn.active {
    border: 2px inset #808080;
    background: #a0a0a0;
}

.paint-size-btn {
    width: 40px;
    height: 20px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
}

.paint-color {
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    cursor: pointer;
    padding: 0;
}

/* ==================== Transitions ==================== */
[data-i18n] {
    transition: opacity 0.3s ease;
}

/* Responsive: see css/mobile.css (loaded conditionally via media query) */

/* ==================== Win95 Cursors ==================== */
body, #desktop, .desktop-icon, .start-menu-item, .context-item, .taskbar-item {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0l5 14 2-5 5-2z' fill='%23000'/%3E%3Cpath d='M1 1l4 11 1.5-4 4-1.5z' fill='%23fff'/%3E%3C/svg%3E") 0 0, default;
}

a, button, .window-btn, .calc-btn, .paint-tool-btn, .paint-color, .paint-size-btn {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Cpath d='M4 0v5H2v2H0v4h2v2h2v2h2v2h2v2h2v-2h-2v-2H6v-2H4v-4h4v-2h2V5H8V3H6V0z' fill='%23000'/%3E%3Cpath d='M5 1v4H3v2H1v2h2v2h2v2h2v2h2v-2H7v-2H5V9h4V7h2V5H9V3H7V1z' fill='%23fff'/%3E%3C/svg%3E") 6 0, pointer;
}

/* ==================== BSOD ==================== */
#bsod-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #0000aa;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.bsod-content {
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    line-height: 1.6;
    max-width: 700px;
    text-align: left;
}

.bsod-content p { margin: 0; }

/* ==================== Minesweeper ==================== */
.ms-cell {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: 'MS Sans Serif', sans-serif;
    user-select: none;
}

.ms-hidden {
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
}

.ms-hidden:active {
    border: 1px solid #808080;
    background: #b0b0b0;
}

.ms-revealed {
    background: #c0c0c0;
    border: 1px solid #808080;
}

.ms-flag {
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
}

.ms-mine { background: #ff0000; }

/* ==================== Start Menu Submenus ==================== */
.start-menu-item.has-submenu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--win-bg);
    border: none; box-shadow: var(--bevel-out);
    min-width: 180px;
    z-index: 10001;
    padding: 4px 0;
}

.submenu.show {
    display: block;
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    cursor: pointer;
    font-size: 11px;
    position: relative;
    white-space: nowrap;
    color: #000;
}

.submenu-item:hover > span {
    color: white;
}

.submenu-item.has-submenu .submenu {
    left: 100%;
    top: 0;
}

.submenu-nested {
    left: 100% !important;
    top: 0 !important;
}

/* Divisor de menu: los tres eran identicos salvo el margen lateral. */
.start-menu-divider,
.context-divider,
.submenu-divider {
    height: 1px;
    background: var(--win-dark);
    margin: 2px 0;
    border-bottom: 1px solid var(--win-light);
}

.submenu-divider { margin: 2px 4px; }

/* ==================== Clock Tooltip ==================== */
.clock-tooltip {
    position: fixed;
    background: #ffffc8;
    border: 1px solid #000;
    padding: 2px 6px;
    font-size: 11px;
    z-index: 100001;
    white-space: nowrap;
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    pointer-events: none;
}

/* ==================== Shared App Layout ==================== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #c0c0c0;
}

.app-container.outlook {
    font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
}

.app-menubar {
    background: #c0c0c0;
    padding: 2px 4px;
    border-bottom: 1px solid #808080;
    font-size: 11px;
}

.app-menubar span {
    padding: 2px 8px;
    cursor: pointer;
}

.app-toolbar {
    background: linear-gradient(180deg, #d4d0c8 0%, #c0c0c0 100%);
    padding: 4px 6px;
    border-bottom: 1px solid #808080;
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    background: #d4d0c8;
    border: 2px outset #fff;
    cursor: pointer;
    font-size: 10px;
}

.app-toolbar-btn.primary {
    padding: 4px 12px;
    min-width: 60px;
}

.app-toolbar-btn .tb-icon {
    font-size: 20px;
}

.app-toolbar-btn .tb-icon-sm {
    font-size: 16px;
}

.app-toolbar-divider {
    width: 1px;
    height: 28px;
    background: #808080;
    margin: 0 4px;
}

.app-statusbar {
    background: #d4d0c8;
    border-top: 2px solid #fff;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    font-size: 10px;
}

.app-statusbar-badge {
    padding: 2px 6px;
    background: #c0c0c0;
    border: 1px inset #808080;
}

/* ==================== Browser App ==================== */
.browser-toolbar {
    background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
    padding: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid #808080;
}

.browser-nav-btn {
    width: 24px;
    height: 22px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
}

.browser-addr-label {
    font-size: 11px;
    color: #000;
    margin-left: 8px;
}

.browser-url-input {
    flex: 1;
    padding: 2px 4px;
    border: 2px inset #fff;
    font-size: 11px;
}

.browser-go-btn {
    padding: 2px 12px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
    font-size: 11px;
}

.browser-viewport {
    flex: 1;
    background: #fff;
}

.browser-viewport iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.browser-status {
    background: #c0c0c0;
    border-top: 2px solid #fff;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    font-size: 10px;
}

/* ==================== Calculator App ==================== */
.calc-display-wrap {
    background: #909090;
    padding: 8px 10px;
    margin: 4px;
    border: 3px inset #606060;
}

.calc-display-input {
    width: 100%;
    height: 28px;
    background: #000;
    color: #ff0000;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    text-align: right;
    padding: 2px 4px;
    border: 1px solid #404040;
}

.calc-body {
    flex: 1;
    padding: 4px;
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* ==================== Contact / Outlook App ==================== */
.outlook-fields {
    background: #f0f0f0;
    padding: 8px 12px;
    border-bottom: 1px solid #808080;
}

.outlook-field-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.outlook-field-row:last-child {
    margin-bottom: 0;
}

.outlook-field-label {
    width: 70px;
    font-size: 11px;
    font-weight: bold;
    text-align: right;
    padding-right: 8px;
}

.outlook-field-input {
    flex: 1;
    padding: 3px 6px;
    border: 2px inset #c0c0c0;
    font-size: 11px;
    font-family: 'Tahoma', sans-serif;
}

.outlook-to-btn {
    width: 70px;
    padding: 3px 6px;
    background: #d4d0c8;
    border: 2px outset #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

.outlook-to-value {
    flex: 1;
    margin-left: 8px;
    padding: 3px 6px;
    background: #fff;
    border: 2px inset #c0c0c0;
    font-size: 11px;
}

.outlook-msg-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
}

.outlook-msg-header {
    padding: 4px 8px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    font-size: 10px;
}

.outlook-textarea {
    flex: 1;
    width: 100%;
    border: none;
    resize: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 10px;
    outline: none;
    box-sizing: border-box;
}

/* ==================== Settings App ==================== */
.settings-body {
    flex: 1;
    padding: 10px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    padding: 8px;
    border-top: 1px solid #808080;
}

.settings-btn {
    padding: 4px 20px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
}

/* ==================== Paint App ==================== */
.paint-sidebar {
    width: 50px;
    background: #c0c0c0;
    border-right: 1px solid #808080;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.paint-canvas-area {
    flex: 1;
    background: #808080;
    padding: 4px;
    overflow: auto;
}

.paint-canvas-wrap {
    background: #fff;
    display: inline-block;
    box-shadow: 1px 1px 0 #000;
}

.paint-canvas-wrap canvas {
    display: block;
    cursor: crosshair;
}

.paint-colorbar {
    display: flex;
    align-items: center;
    padding: 4px;
    border-top: 1px solid #fff;
    gap: 4px;
}

.paint-fg-color {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

.paint-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    width: 200px;
}

.paint-clear-btn {
    margin-left: auto;
    padding: 2px 8px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
}

/* ==================== Minesweeper App ==================== */
.ms-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #c0c0c0;
    align-items: center;
}

.ms-board-wrap {
    background: #c0c0c0;
    border: 3px inset #808080;
    padding: 6px;
    margin: 4px;
}

.ms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000;
    padding: 4px 8px;
    margin-bottom: 6px;
    border: 2px inset #808080;
}

.ms-counter {
    color: #ff0000;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
}

.ms-face-btn {
    font-size: 20px;
    width: 30px;
    height: 30px;
    background: #c0c0c0;
    border: 2px outset #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== Pomarola Radio App ==================== */

.radio-historial { width: 100%; border-collapse: collapse; }
.radio-historial td { padding: 3px 6px; font-size: 11px; vertical-align: top; }
.radio-historial .rh-hora { color: #404040; white-space: nowrap; }
.radio-historial tr:nth-child(odd) { background: #dfdfdf; }

/* ==================== MS-DOS ==================== */
.dos-screen {
    background: #000;
    color: #c0c0c0;
    height: 100%;
    padding: 6px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    cursor: text;
}

.dos-out {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dos-linea {
    display: flex;
    align-items: center;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.dos-in {
    flex: 1;
    background: #000;
    color: #c0c0c0;
    border: none;
    outline: none;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    caret-color: #c0c0c0;
}

/* El cuerpo de la app va gris sistema, como un programa de la época */

/* Slider de volumen estilo Win95: riel hundido y perilla gris con bisel.
   Sin esto queda el range azul moderno de Chrome, que rompe la época. */

/* Indicador de "qué suena" en la bandeja del sistema. Winamp no lee la
   metadata ICY del stream, así que el dato vivo se muestra acá y en el
   título de la pestaña. */
#tray-radio {
    max-width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    cursor: default;
}
#tray-radio[hidden] { display: none; }

/* Ranuras del menú Inicio que se rellenan con pixel-art desde JS */
.px-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    flex-shrink: 0;
}
.px-icon svg { width: 100%; height: 100%; }

/* Los íconos del escritorio ahora son SVG, no texto: el font-size ya no manda */
.desktop-icon .icon-emoji svg {
    width: 48px;
    height: 48px;
    display: block;
    image-rendering: pixelated;
}
#desktop.small-icons .desktop-icon .icon-emoji svg {
    width: 32px;
    height: 32px;
}