/* Ventanas: marco común y tamaño de cada una */

/* ---------- Marco de la ventana ---------- */

.ventana {
    position: absolute;
    display: flex;
    flex-direction: column;
    max-height: calc(92% - 60px);
    background: var(--ventana);
    border: 2px solid var(--tinta);
    border-radius: 10px;
    box-shadow: var(--sombra);
    overflow: hidden;
    animation: abrir-ventana 0.35s ease-out;
}

@keyframes abrir-ventana {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* ---------- Tamaño de cada ventana ---------- */

.ventana-inicio {
    width: min(1000px, 52vw);
    animation-delay: 0.1s;
    animation-fill-mode: both;
}

.ventana-sobre-mi {
    width: min(700px, 36vw);
    animation-delay: 0.25s;
    animation-fill-mode: both;
}

/* Lo más grande posible sin tapar los iconos ni salirse por abajo */
.ventana-proyectos {
    width: min(1400px, 100vw - 280px, (100dvh - 390px) * 2.9);
    max-height: calc(100% - 32px);
}

.ventana-experiencia {
    width: min(900px, 62vw);
}

.ventana-contacto {
    width: min(720px, 50vw);
}

/* ---------- Barra de título ---------- */

.ventana-barra {
    flex-shrink: 0;
    height: 40px;
    padding: 0 8px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--barra);
    border-bottom: 2px solid var(--tinta);
    font-size: 12.5px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.ventana-barra:active {
    cursor: grabbing;
}

.ventana-cerrar {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ventana);
    border: 1.5px solid var(--tinta);
    border-radius: 6px;
    font-size: 12px;
}

.ventana-cerrar:hover {
    background: var(--tinta);
    color: var(--ventana);
}

.ventana-contenido {
    overflow-y: auto;
}