/* RESET Y BASE */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Geneva', sans-serif; }
body, html { width: 100%; height: 100%; overflow: hidden; background-color: #008080; }

#desktop {
    width: 100vw;
    height: 100vh;
    background-color: #008080; /* El color sólido que querías */
    position: relative;
}

/* POST-IT (Regresado a su lugar y estilo original) */
.post-it {
    position: absolute; top: 60px; left: 40px;
    width: 280px; background: #ffff99; padding: 25px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    border: 1px solid #e6e600; transform: rotate(-2deg); z-index: 10;
}

/* ICONOS (Desordenados hacia la derecha) */
.draggable-icon { position: absolute; width: 110px; display: flex; flex-direction: column; align-items: center; cursor: pointer; z-index: 5; }
.draggable-icon img { width: 70px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); margin-bottom: 5px; }
.draggable-icon span { color: white; font-size: 13px; font-weight: bold; text-shadow: 2px 2px 4px black; text-align: center; }

/* Coordenadas cargadas a la derecha (estilo escritorio usado) */
/* COORDENADAS CORREGIDAS (BASADAS EN PORCENTAJE) */
.pos-about    { top: 12%; right: 7%; }    /* Justo sobre tu foto en el CPU */
.pos-arch     { top: 31%; left: 63%; }   /* Carpeta amarilla izquierda */
.pos-artistic { top: 22%; left: 74%; }   /* Carpeta amarilla arriba */
.pos-model    { top: 48%; left: 70%; }   /* Carpeta amarilla abajo */
.pos-exp      { top: 43%; left: 55%; }   /* Icono WinRAR libros */
.pos-insta    { bottom: 6%; left: 14%; } /* Icono MSN abajo monitor */
.pos-contact  { bottom: 25%; right: 9%; } /* Mailbox sobre el CPU */


/* VENTANAS Y COLUMNAS (About Me restaurado) */
.window { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; z-index: 100; }
.hidden { display: none !important; }
.window-header { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 4px 8px; display: flex; justify-content: space-between; font-weight: bold; }
.close-btn { cursor: pointer; background: #c0c0c0; border: 1px solid black; padding: 0 4px; color: black; }

#window-body { background: white; border: 2px inset #808080; margin: 2px; padding: 0; max-height: 80vh; overflow-y: auto; color: black; }

/* GRID DE COLUMNAS (Para que About Me se vea bien) */
.content-padding { padding: 40px; }
.column-grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; margin-bottom: 40px; }
.left-col { font-size: 14px; line-height: 1.6; }
.right-col { font-size: 14px; line-height: 1.6; }
.section-label { text-transform: uppercase; font-weight: bold; font-size: 12px; border-bottom: 1px solid #ccc; padding-bottom: 5px; }

/* FORMULARIO DE CONTACTO */
.contact-form { display: flex; flex-direction: column; gap: 15px; width: 400px; padding: 20px; }
.contact-form input, .contact-form textarea { padding: 8px; border: 2px inset #808080; font-family: monospace; }
.contact-form button { background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; padding: 10px; cursor: pointer; font-weight: bold; }

/* GALERÍAS */
/* GALERÍAS (Forzando 4 columnas por línea) */
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* Esto obliga a que siempre sean 4 */
    gap: 25px; 
    padding: 20px;
    align-items: end; 
}

/* GALERÍA DE EXPERIENCIA (Forzando 5 columnas por línea) */
.experience-grid {
    grid-template-columns: repeat(5, 1fr) !important; /* Esto obliga a que sean 5 */
    gap: 15px;
}

.gallery-item img, 
.gallery-item video { 
    width: 100%; 
    height: auto;      
    max-height: 400px; 
    object-fit: contain; 
    border: 1px solid #999;
    background: #f0f0f0; 
}

/* BARRA DE TAREAS */
#taskbar { position: absolute; bottom: 0; width: 100%; height: 35px; background: #c0c0c0; border-top: 2px solid #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }

/* ESTILOS DEL VISOR CENTRADO */
#media-viewer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 90vw;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 1000; /* Por encima de todo */
    box-shadow: 10px 10px 30px rgba(0,0,0,0.5);
}

#viewer-content {
    background: #000; /* Fondo negro para que resalte la foto */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    overflow: hidden;
}

#viewer-img {
    max-width: 100%;
    max-height: 75vh; /* Que no se pase de la pantalla */
    display: block;
    object-fit: contain;
}

/* Oscurecer el fondo cuando el visor esté abierto */
#desktop::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: none;
    z-index: 90;
}

body.viewer-open #desktop::after {
    display: block;
}

/* DISEÑO DE 3 COLUMNAS PARA GALERÍAS */
.gallery-header .column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr; /* El manifiesto ocupa el doble que los otros dos */
    gap: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 15px;
}

/* Forzar que no haya espacio extra si se solicita */
.no-margin { 
    margin-bottom: 10px !important; 
}

/* Ajuste de fuentes para las columnas del manifiesto */
.mid-col, .left-col, .right-col {
    font-size: 13px;
    line-height: 1.5;
}

/* AJUSTE BOTÓN PERSONALIZADO */
.start-button {
    display: flex;
    align-items: center;
    padding: 0 15px; 
    height: 25px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap; 
    cursor: pointer;
}

/* ESTO QUITA EL ESPACIO DE LA IMAGEN QUE YA NO ESTARÁ */
.start-button img {
    display: none;
}
/* --- ESTO SOLO AFECTA A TELÉFONOS, LA COMPU SE QUEDA IGUAL --- */
@media (max-width: 768px) {
    #desktop {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Alinea iconos a la derecha en columna */
        padding: 20px;
        gap: 15px;
        overflow-y: auto !important;
    }

    /* Quita las coordenadas fijas para que los iconos no se amontonen */
    .draggable-icon {
        position: static !important; 
        width: 80px !important;
        margin-bottom: 5px;
    }

    .draggable-icon img {
        width: 50px;
    }

    /* Ocultamos el Post-it en móvil para liberar espacio */
    .post-it {
        display: none !important;
    }

    /* Las ventanas ocupan casi todo el ancho del cel */
    .window {
        width: 95vw !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    #window-body {
        padding: 15px !important;
    }

    /* Convertimos todas las columnas en una sola fila vertical */
    .column-grid {
        display: block !important;
    }

    .left-col, .right-col, .mid-col {
        width: 100% !important;
        margin-bottom: 20px;
        padding: 0 !important;
    }

    /* Galerías y Experiencia a 2 columnas para que se vean grandes */
    .gallery-grid, .experience-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Ajuste específico para los manifiestos de las galerías */
    .gallery-header .column-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}