/* Estilos generales del cuerpo de Windows XP */
body {
    background-image: url('https://i.imgur.com/yOpoaJH.jpg'); /* Fondo de pantalla de Windows XP */
    background-size: cover;
    font-family: 'Tahoma', 'Verdana', sans-serif;
    color: #000000;
    margin: 0;
    padding: 0;
    cursor: default;
}

/* Contenedor del "escritorio" */
.desktop-xp {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Barra de título principal */
.title-bar-xp {
    background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
    color: #ffffff;
    padding: 5px 10px;
    font-weight: bold;
    box-shadow: inset 0 -2px 0 1px rgba(0,0,0,0.5);
    border-bottom: 1px solid #000000;
}

/* Título principal */
.main-title-xp {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px #003dd7;
    margin: 0;
    padding: 0;
}

/* Contenedor de las ventanas */
.content-xp {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
}

/* Estilo de cada "ventana" o "tarjeta" de sistema operativo */
.os-window-xp {
    width: 350px;
    background-color: #ece9d8;
    border: 1px solid #000000;
    border-radius: 6px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    overflow: hidden;
}

.os-title-bar-xp {
    background: linear-gradient(to right, #0a246a, #a6caf0);
    color: #ffffff;
    padding: 3px 8px;
    font-weight: bold;
    border-bottom: 1px solid #000000;
}

.os-title-bar-text-xp {
    font-size: 1rem;
    text-shadow: 1px 1px #000000;
}

.os-content-xp {
    background-color: #ffffff;
    padding: 10px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

/* Títulos dentro del contenido */
.os-content-xp h2 {
    font-size: 1.5rem;
    color: #0a246a;
    margin-top: 0;
    border-bottom: 1px solid #a6caf0;
    padding-bottom: 5px;
}

.os-content-xp p {
    line-height: 1.4;
    flex-grow: 1; /* Esto hace que el párrafo ocupe el espacio disponible */
}

.os-link-xp {
    align-self: flex-start; /* Alinea el enlace a la izquierda */
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    color: #000000;
    text-decoration: none;
    border: 1px solid #000000;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.os-link-xp:hover {
    background-color: #e0e0e0;
}

.os-link-xp:active {
    box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf;
}