/* ==========================================================================
   INNOVACODE DESKTOP
   desk.css
   ========================================================================== */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {

    --desk-header-height: 56px;

    --desk-taskbar-height: 52px;


    --color-desktop:
        #334155;

    --color-header:
        #111827;

    --color-window:
        #ffffff;

    --color-window-content:
        #f8fafc;


    --color-text:
        #ffffff;

    --color-content-text:
        #1e293b;


    --border-light:
        rgba(255, 255, 255, 0.08);

    --border-medium:
        rgba(255, 255, 255, 0.14);


    --hover-light:
        rgba(255, 255, 255, 0.10);

    --active-light:
        rgba(255, 255, 255, 0.16);


    --shadow-window:
        0 20px 50px
        rgba(0, 0, 0, 0.35);

    --shadow-window-active:
        0 22px 55px
        rgba(0, 0, 0, 0.45);

    --shadow-menu:
        0 18px 40px
        rgba(0, 0, 0, 0.50);
}


/* ==========================================================================
   RESET
   ========================================================================== */

html,
body {

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;
}


body {

    font-family:
        Arial,
        sans-serif;

    overflow:
        hidden;

    background:
        var(--color-desktop);

    color:
        var(--color-text);
}


/* ==========================================================================
   ESCRITORIO
   ========================================================================== */

#desk {

    width:
        100%;

    height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--color-desktop);
}


/* ==========================================================================
   CABECERA
   ========================================================================== */

#desk-header {

    height:
        var(--desk-header-height);

    min-height:
        var(--desk-header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 20px;

    box-sizing:
        border-box;

    background:
        var(--color-header);

    color:
        var(--color-text);

    border-bottom:
        1px solid
        var(--border-light);

    user-select:
        none;
}


#desk-brand {

    font-size:
        18px;

    font-weight:
        600;
}


#desk-session {

    font-size:
        14px;

    color:
        rgba(255, 255, 255, 0.75);
}


/* ==========================================================================
   ÁREA DE TRABAJO
   ========================================================================== */

#desk-workspace {

    position:
        relative;

    flex:
        1;

    min-height:
        0;

    overflow:
        hidden;

    background:
        var(--color-desktop);
}


/* ==========================================================================
   ICONOS DEL ESCRITORIO
   ========================================================================== */

#desktop-icons {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    padding:
        20px;

    box-sizing:
        border-box;

    z-index:
        1;

    pointer-events:
        none;
}


/* ==========================================================================
   ÁREA DE VENTANAS
   ========================================================================== */

#desktop-windows {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        10;

    pointer-events:
        none;
}


/* ==========================================================================
   VENTANA
   ========================================================================== */

.desktop-window {

    position:
        absolute;

    width:
        800px;

    height:
        500px;

    display:
        flex;

    flex-direction:
        column;

    box-sizing:
        border-box;

    background:
        var(--color-window);

    border-radius:
        10px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow-window);

    pointer-events:
        auto;

    z-index:
        100;

    transition:
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}


/* ==========================================================================
   VENTANA ACTIVA
   ========================================================================== */

.desktop-window.is-focused,
.desktop-window.is-active {

    box-shadow:
        var(--shadow-window-active);
}


/* ==========================================================================
   VENTANA MINIMIZADA
   ========================================================================== */

.desktop-window.is-minimized {

    display:
        none;
}


/* ==========================================================================
   VENTANA MAXIMIZADA
   ========================================================================== */

.desktop-window.is-maximized {

    top:
        0 !important;

    left:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    border-radius:
        0;
}


/* ==========================================================================
   CABECERA DE VENTANA
   ========================================================================== */

.desktop-window-header {

    height:
        44px;

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    background:
        var(--color-header);

    color:
        var(--color-text);

    user-select:
        none;

    cursor:
        move;
}


/* ==========================================================================
   TÍTULO DE VENTANA
   ========================================================================== */

.desktop-window-title {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding-left:
        15px;

    font-size:
        14px;

    font-weight:
        600;
}


.desktop-window-icon {

    width:
        22px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    font-size:
        17px;
}


.desktop-window-title-text {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ==========================================================================
   CONTROLES
   ========================================================================== */

.desktop-window-controls {

    height:
        100%;

    display:
        flex;

    flex-shrink:
        0;
}


.desktop-window-button {

    width:
        44px;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--color-text);

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        background 0.15s ease;
}


.desktop-window-button:hover {

    background:
        var(--hover-light);
}


.desktop-window-button.close:hover {

    background:
        #dc2626;
}


/* ==========================================================================
   CONTENIDO
   ========================================================================== */

.desktop-window-content {

    flex:
        1;

    min-height:
        0;

    padding:
        20px;

    box-sizing:
        border-box;

    overflow:
        auto;

    background:
        var(--color-window-content);

    color:
        var(--color-content-text);
}


.desktop-window-content h2 {

    margin-top:
        0;
}


/* ==========================================================================
   ARRASTRE
   ========================================================================== */

.desktop-window.is-dragging {

    transition:
        none;

    user-select:
        none;
}


body.is-dragging-window {

    user-select:
        none;
}


/* ==========================================================================
   REDIMENSIONAMIENTO
   ========================================================================== */

.window-resize-handle {

    position:
        absolute;

    z-index:
        20;
}


.resize-n {

    top:
        -3px;

    left:
        8px;

    right:
        8px;

    height:
        6px;

    cursor:
        ns-resize;
}


.resize-s {

    bottom:
        -3px;

    left:
        8px;

    right:
        8px;

    height:
        6px;

    cursor:
        ns-resize;
}


.resize-e {

    top:
        8px;

    right:
        -3px;

    bottom:
        8px;

    width:
        6px;

    cursor:
        ew-resize;
}


.resize-w {

    top:
        8px;

    left:
        -3px;

    bottom:
        8px;

    width:
        6px;

    cursor:
        ew-resize;
}


.resize-ne {

    top:
        -4px;

    right:
        -4px;

    width:
        10px;

    height:
        10px;

    cursor:
        nesw-resize;
}


.resize-nw {

    top:
        -4px;

    left:
        -4px;

    width:
        10px;

    height:
        10px;

    cursor:
        nwse-resize;
}


.resize-se {

    right:
        -4px;

    bottom:
        -4px;

    width:
        10px;

    height:
        10px;

    cursor:
        nwse-resize;
}


.resize-sw {

    left:
        -4px;

    bottom:
        -4px;

    width:
        10px;

    height:
        10px;

    cursor:
        nesw-resize;
}


body.is-resizing-window {

    user-select:
        none;
}


/* ==========================================================================
   BARRA DE TAREAS
   ========================================================================== */

#desktop-taskbar {

    position:
        relative;

    height:
        var(--desk-taskbar-height);

    min-height:
        var(--desk-taskbar-height);

    display:
        flex;

    align-items:
        center;

    padding:
        0 10px;

    box-sizing:
        border-box;

    background:
        var(--color-header);

    color:
        var(--color-text);

    border-top:
        1px solid
        var(--border-light);

    z-index:
        5000;
}


/* ==========================================================================
   ZONAS
   ========================================================================== */

.taskbar-left {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

    z-index:
        5001;
}


.taskbar-applications {

    position:
        relative;

    flex:
        1;

    min-width:
        0;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin:
        0 10px;

    overflow:
        visible;

    z-index:
        5001;
}


.taskbar-right {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

    font-size:
        14px;

    white-space:
        nowrap;

    z-index:
        5001;
}


/* ==========================================================================
   BOTÓN LAUNCHER
   ========================================================================== */

#launcher-button {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--color-text);

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


#launcher-button:hover {

    background:
        var(--hover-light);
}


#launcher-button:active {

    transform:
        scale(0.94);
}


/* ==========================================================================
   LOGO INNOVACODE DEL LAUNCHER
   ========================================================================== */

.innovacode-launcher-logo {

    position:
        relative;

    width:
        34px;

    height:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        21px;

    font-weight:
        500;
}


.innovacode-menu-icon {

    position:
        relative;

    z-index:
        2;

    line-height:
        1;

    transition:
        transform 0.20s ease;
}


.innovacode-brace {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    font-size:
        25px;

    line-height:
        1;

    opacity:
        0;

    transition:
        left 0.25s ease,
        right 0.25s ease,
        opacity 0.20s ease;
}


.innovacode-brace-left {

    left:
        12px;
}


.innovacode-brace-right {

    right:
        12px;
}


/* ==========================================================================
   HOVER DEL LOGO
   ========================================================================== */

#launcher-button:hover
.innovacode-brace-left {

    left:
        0;

    opacity:
        1;
}


#launcher-button:hover
.innovacode-brace-right {

    right:
        0;

    opacity:
        1;
}


/* ==========================================================================
   ESTADO ABIERTO
   ========================================================================== */

#launcher-button[aria-expanded="true"]
.innovacode-brace-left {

    left:
        0;

    opacity:
        1;
}


#launcher-button[aria-expanded="true"]
.innovacode-brace-right {

    right:
        0;

    opacity:
        1;
}


/* ==========================================================================
   GRUPO DE APLICACIÓN
   ========================================================================== */

.taskbar-application-group {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    height:
        100%;

    flex:
        0 0 auto;

    z-index:
        5002;
}


.taskbar-application-group.is-menu-open {

    z-index:
        99998;
}


/* ==========================================================================
   BOTÓN DE APLICACIÓN
   ========================================================================== */

.taskbar-application-group
> .taskbar-application {

    position:
        relative;

    height:
        38px;

    min-width:
        42px;

    max-width:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 10px;

    margin:
        0;

    box-sizing:
        border-box;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--color-text);

    cursor:
        pointer;

    overflow:
        hidden;

    white-space:
        nowrap;

    z-index:
        1;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.taskbar-application-group
> .taskbar-application:hover {

    background:
        var(--hover-light);
}


.taskbar-application-group
> .taskbar-application:active {

    transform:
        scale(0.96);
}


.taskbar-application-group
> .taskbar-application.is-active {

    background:
        var(--active-light);

    box-shadow:
        inset 0 -2px 0
        rgba(255, 255, 255, 0.85);
}


.taskbar-application.is-minimized {

    opacity:
        0.60;
}


.taskbar-application.is-minimized:hover {

    opacity:
        1;
}


/* ==========================================================================
   ICONO / TÍTULO / CONTADOR
   ========================================================================== */

.taskbar-application-icon {

    width:
        22px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    font-size:
        17px;
}


.taskbar-application-title {

    max-width:
        150px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        13px;
}


.taskbar-application-count {

    min-width:
        18px;

    height:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    margin-left:
        4px;

    padding:
        0 5px;

    box-sizing:
        border-box;

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.16);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        18px;
}


/* ==========================================================================
   MODOS DE VISUALIZACIÓN
   ========================================================================== */

.taskbar-application.display-icon {

    width:
        42px;

    min-width:
        42px;

    padding:
        0;
}


.taskbar-application.display-title {

    min-width:
        100px;
}


.taskbar-application.display-icon-title {

    min-width:
        100px;
}


/* ==========================================================================
   MENÚ DE VENTANAS
   ========================================================================== */

.taskbar-window-menu,
.taskbar-application-menu {

    position:
        absolute;

    left:
        50%;

    bottom:
        calc(100% + 12px);

    transform:
        translateX(-50%);

    display:
        none;

    flex-direction:
        column;

    width:
        260px;

    min-width:
        260px;

    max-width:
        260px;

    max-height:
        360px;

    margin:
        0;

    padding:
        6px;

    box-sizing:
        border-box;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        #111827 !important;

    background-color:
        #111827 !important;

    background-image:
        none !important;

    color:
        #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius:
        10px;

    box-shadow:
        var(--shadow-menu);

    opacity:
        1 !important;

    visibility:
        visible;

    z-index:
        999999;
}


.taskbar-application-group.is-menu-open
> .taskbar-window-menu {

    display:
        flex !important;
}


.taskbar-application-group.is-menu-open
> .taskbar-application-menu {

    display:
        flex !important;
}


/* ==========================================================================
   ELEMENTO MENÚ
   ========================================================================== */

.taskbar-window-menu-item {

    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    flex-shrink:
        0;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        8px 10px;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent !important;

    background-color:
        transparent !important;

    color:
        #ffffff !important;

    cursor:
        pointer;

    text-align:
        left;

    font-family:
        inherit;

    transition:
        background 0.15s ease,
        opacity 0.15s ease;
}


.taskbar-window-menu-item:hover {

    background:
        rgba(255, 255, 255, 0.10) !important;
}


.taskbar-window-menu-item.is-active {

    background:
        rgba(255, 255, 255, 0.16) !important;

    font-weight:
        600;
}


.taskbar-window-menu-item.is-minimized {

    opacity:
        0.55;
}


.taskbar-window-menu-item.is-minimized:hover {

    opacity:
        1;
}


.taskbar-window-menu-icon {

    flex:
        0 0 26px;

    width:
        26px;

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        18px;

    text-align:
        center;
}


.taskbar-window-menu-title {

    flex:
        1 1 auto;

    min-width:
        0;

    padding:
        0 8px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        13px;

    color:
        #ffffff;
}


.taskbar-window-menu-number {

    flex:
        0 0 22px;

    width:
        22px;

    text-align:
        center;

    font-size:
        11px;

    opacity:
        0.55;
}


/* ==========================================================================
   RELOJ
   ========================================================================== */

#taskbar-clock {

    min-width:
        42px;

    text-align:
        center;
}


/* ==========================================================================
   LAUNCHER
   ========================================================================== */

#desktop-launcher {

    position:
        absolute;

    left:
        10px;

    bottom:
        10px;

    width:
        340px;

    max-height:
        calc(100% - 20px);

    display:
        none;

    flex-direction:
        column;

    box-sizing:
        border-box;

    background:
        #111827;

    color:
        #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        12px;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.40);

    overflow:
        hidden;

    z-index:
        4000;

    opacity:
        1;

    visibility:
        hidden;

    pointer-events:
        none;
}


#desktop-launcher.is-open {

    display:
        flex;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* ==========================================================================
   CABECERA DEL LAUNCHER
   ========================================================================== */

.launcher-header {

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 15px;

    box-sizing:
        border-box;

    border-bottom:
        1px solid
        var(--border-light);
}


.launcher-back {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        20px;

    cursor:
        pointer;

    transition:
        background 0.15s ease;
}


.launcher-back:hover {

    background:
        rgba(255, 255, 255, 0.10);
}


.launcher-header-text {

    min-width:
        0;

    flex:
        1;
}


.launcher-title {

    font-size:
        16px;

    font-weight:
        600;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.launcher-subtitle {

    margin-top:
        3px;

    font-size:
        11px;

    color:
        rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.launcher-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-height:
        30px;

    padding:
        5px 15px;

    box-sizing:
        border-box;

    overflow:
        hidden;

    white-space:
        nowrap;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


.launcher-breadcrumb-item {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-size:
        10px;

    color:
        rgba(255, 255, 255, 0.55);
}


.launcher-breadcrumb-separator {

    flex-shrink:
        0;

    font-size:
        12px;

    color:
        rgba(255, 255, 255, 0.30);
}


/* ==========================================================================
   APLICACIONES DEL LAUNCHER
   ========================================================================== */

#launcher-applications {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        10px;

    min-height:
        0;

    overflow-y:
        auto;

    overflow-x:
        hidden;
}


/* ==========================================================================
   ITEM DEL LAUNCHER
   ========================================================================== */

.launcher-application {

    width:
        100%;

    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        8px 10px;

    box-sizing:
        border-box;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #ffffff;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.launcher-application:hover {

    background:
        rgba(255, 255, 255, 0.08);
}


.launcher-application:active {

    transform:
        scale(0.98);
}


/* ==========================================================================
   ICONO DEL LAUNCHER
   ========================================================================== */

.launcher-application-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    font-size:
        23px;
}


/* ==========================================================================
   INFORMACIÓN DEL ITEM
   ========================================================================== */

.launcher-application-info {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.launcher-application-name {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        13px;

    color:
        #ffffff;
}


.launcher-application-type {

    font-size:
        10px;

    color:
        rgba(255, 255, 255, 0.45);
}


/* ==========================================================================
   FLECHA
   ========================================================================== */

.launcher-application-arrow {

    width:
        20px;

    flex-shrink:
        0;

    text-align:
        center;

    font-size:
        22px;

    color:
        rgba(255, 255, 255, 0.40);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .desktop-window {

        width:
            calc(100% - 30px);

        height:
            calc(100% - 30px);

        top:
            15px;

        left:
            15px;
    }
}


@media (max-width: 600px) {

    #desk-header {

        padding:
            0 12px;
    }


    #desk-brand {

        font-size:
            16px;
    }


    .taskbar-application-title {

        display:
            none;
    }


    .taskbar-application.display-title
    .taskbar-application-title {

        display:
            inline;
    }


    .taskbar-application.display-title {

        min-width:
            80px;
    }


    .taskbar-application.display-icon-title {

        min-width:
            42px;
    }


    #desktop-launcher {

        left:
            5px;

        right:
            5px;

        bottom:
            5px;

        width:
            auto;

        max-height:
            calc(100% - 10px);
    }


    .desktop-window-button {

        width:
            38px;
    }


    .taskbar-window-menu,
    .taskbar-application-menu {

        width:
            230px;

        min-width:
            230px;

        max-width:
            230px;
    }
}