/**
 * Estilos para la Interfaz del Escritorio Windows XP (Tema Luna)
 * Se carga cuando NO estamos en la plantilla page-login-xp.php.
 */

/* ====================================
   1. VARIABLES Y RESET GENERAL
   ==================================== */

:root {
    --xp-blue-main: #3a68b4;        /* Barra de tareas, barra de título */
    --xp-green-start: #319520;      /* Botón de inicio normal */
    --xp-green-start-hover: #36a928;/* Botón de inicio hover */
    --xp-light-gray: #f2f0e6;       /* Fondo de las ventanas */
    --xp-taskbar-height: 28px;
    --xp-border-gray: #c9c9c9;
}

/* Aplicar la fuente clásica a todo el escritorio */
body {
    font-family: Tahoma, 'Microsoft Sans Serif', Arial, sans-serif;
    color: black;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Oculta barras de desplazamiento del body */
}

/* El contenido del escritorio debe ser de pantalla completa */
#xp-desktop-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding-bottom: var(--xp-taskbar-height); /* Espacio para la barra de tareas */
    box-sizing: border-box;
    
    /* Fondo de pantalla: "Bliss" (Asegúrate de que la imagen exista en /assets/images/) */
    background-image: url('../images/bliss.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Asegurar que el contenido del body no interfiera con el desktop */
    z-index: 1; 
}


/* ====================================
   2. BARRA DE TAREAS (Taskbar)
   ==================================== */

#xp-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--xp-taskbar-height);
    z-index: 1000; /* Asegura que esté por encima de todo */
    
    /* Gradiente azul clásico de la barra de tareas de XP */
    background: linear-gradient(to bottom, #4982d6 0%, #325aab 100%);
    border-top: 1px solid #ffffff66; /* Borde superior brillante */
    
    display: flex;
    align-items: center;
    padding: 0 4px;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}


/* ====================================
   3. BOTÓN DE INICIO (Start Button)
   ==================================== */

#xp-start-button {
    height: 22px;
    padding: 2px 8px 2px 2px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
    color: white;
    text-shadow: 1px 1px 1px var(--xp-blue-main);
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    
    /* Estilo del botón verde/redondeado */
    border: 1px solid #005a00;
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--xp-green-start) 0%, #308f1f 100%);
    box-shadow: inset 1px 1px 1px #80c880, inset -1px -1px 1px #194a19;
}

#xp-start-button:hover {
    /* Efecto hover: color más claro y sombra más marcada */
    background: linear-gradient(to bottom, var(--xp-green-start-hover) 0%, #329f22 100%);
    box-shadow: inset 1px 1px 2px #a0d8a0, inset -1px -1px 2px #103010;
}

/* Icono de Windows (ficticio o SVG simple) */
.xp-start-icon {
    /* Aquí podrías usar un SVG o un span con un fondo de imagen */
    width: 20px;
    height: 20px;
    /* Ejemplo de color simple para simular un logo */
    background-color: #f7d23d; 
    border-radius: 2px;
}


/* ====================================
   4. ICONOS DEL ESCRITORIO
   ==================================== */

.xp-desktop-icon {
    width: 70px; /* Ancho fijo para el área del icono */
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.1s;
    user-select: none;
    padding: 5px;
    position: absolute; /* Para posicionar libremente los iconos en el escritorio */
}

/* Estilo para el texto (nombre del archivo) */
.xp-desktop-icon span {
    color: white;
    font-size: 11px;
    line-height: 1.2;
    margin-top: 5px;
    /* Sombra de texto azul clásica de XP para legibilidad */
    text-shadow: 
        1px 1px 0 var(--xp-blue-main), 
        -1px -1px 0 var(--xp-blue-main), 
        1px -1px 0 var(--xp-blue-main), 
        -1px 1px 0 var(--xp-blue-main),
        2px 2px 2px rgba(0, 0, 0, 0.5); /* Sombra adicional para profundidad */
}

/* Efecto de selección al hacer hover */
.xp-desktop-icon:hover {
    background-color: rgba(67, 126, 219, 0.5); /* Sombra azul semi-transparente */
    border: 1px dotted #ffffff; /* Borde punteado de selección XP */
    padding: 4px;
}

/* Estilo del "icono" en sí (debe ser una imagen PNG/SVG) */
.xp-icon-image {
    width: 32px;
    height: 32px;
}


/* ====================================
   5. VENTANAS DE APLICACIÓN (Ventana que contendrá el proyecto)
   ==================================== */

.xp-window {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 600px;
    min-height: 300px;
    background-color: var(--xp-light-gray);
    border: 1px solid #103061; /* Borde oscuro exterior */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    resize: both; /* Permite redimensionar la ventana */
    overflow: hidden;
}

.xp-window-titlebar {
    height: 24px;
    line-height: 24px;
    padding-left: 5px;
    font-weight: bold;
    color: white;
    user-select: none;
    cursor: grab; /* Indica que la barra de título es para arrastrar */
    
    /* Gradiente de la barra de título de la ventana activa */
    background: linear-gradient(to right, #0a246a 0%, var(--xp-blue-main) 100%);
    border-bottom: 1px solid #103061;
    display: flex;
    justify-content: space-between;
}

.xp-window-controls {
    display: flex;
}

/* Estilo de los botones de control (Minimizar, Maximizar, Cerrar) */
.xp-window-controls button {
    width: 28px;
    height: 24px;
    border: none;
    font-weight: bold;
    color: black;
    cursor: pointer;
    background-color: #e3e3e3;
    border-left: 1px solid white; /* Borde divisorio */
    
    /* Sutil relieve del botón */
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #8e8e8e;
    border-bottom: 1px solid #8e8e8e;
}

.xp-window-controls button:hover {
    background-color: #ffe87c; /* Amarillo al pasar el ratón */
}

/* Estilo especial para el botón de Cerrar */
.xp-window-controls .close-button {
    background-color: #ff5454;
    color: white;
    /* Gradiente rojo para el botón de cerrar */
    background: linear-gradient(to top, #ff3030 0%, #ff6e6e 100%);
}

.xp-window-controls .close-button:hover {
    background: linear-gradient(to top, #e30000 0%, #ff4d4d 100%);
}

.xp-window-content {
    padding: 10px;
    /* El contenido de tu portafolio va aquí */
}