/******************************************************************************
 *
 * File...........: main.css
 * Project........: EnigmaJS
 * Description....: Estilos generales de la aplicación
 *
 ******************************************************************************/

:root {

    --color-background: #121211;
    --color-panel: #1e1d1b;
    --color-panel-dark: #161514;
    --color-panel-light: #282624;

    --color-metal-light: #a39785;
    --color-metal-dark: #463f35;
    --color-gold: #dfb247;
    --color-gold-hover: #fcd575;

    --color-text: #eadecd;
    --color-text-dim: #9b9386;
    --color-title: #dfb247;

    --color-accent: #c43737;

    --border-radius: 12px;

    --shadow-panel:
        0 8px 30px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --font-title: "Outfit", sans-serif;
    --font-main: "Inter", sans-serif;

}


/*==========================================================================*/
/* DOCUMENTO                                                                */
/*==========================================================================*/

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    background: radial-gradient(circle at top, #242220 0%, var(--color-background) 80%);

    color: var(--color-text);

    font-family: var(--font-main);

    min-height: 100vh;

    padding-bottom: 40px;

}


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

#menuBar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 32px;

    background: linear-gradient(180deg, #2b2926 0%, #1a1917 100%);

    border-bottom: 1px solid #33302c;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

}

#menuBar .title {

    font-family: var(--font-title);

    font-size: 28px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--color-title);

    text-shadow: 0 2px 10px rgba(223, 178, 71, 0.2);

}

#menuBar nav {

    display: flex;

    gap: 12px;

}

#menuBar button {

    font-family: var(--font-main);

    font-size: 13px;

    font-weight: 500;

    padding: 8px 16px;

    border: 1px solid #3d3a36;

    border-radius: 6px;

    background: #252321;

    color: var(--color-text);

    cursor: pointer;

    transition: all 0.2s ease;

}

#menuBar button:hover {

    background: #33302d;

    border-color: var(--color-gold);

    color: white;

}


/*==========================================================================*/
/* MODEL LABEL (junto al título)                                            */
/*==========================================================================*/

.model-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-dim);
    letter-spacing: 1px;
}


/*==========================================================================*/
/* DROPDOWN MENÚ                                                            */
/*==========================================================================*/

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #2b2926;
    border: 1px solid #3d3a36;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    margin-top: 0;
    padding: 4px 0;
    overflow: hidden;
}

.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

/* Para menús al borde derecho de la pantalla: abre hacia la izquierda */
.menu-dropdown-right .menu-dropdown-content {
    left: auto;
    right: 0;
}

.menu-dropdown-content .menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.menu-dropdown-content .menu-item:hover {
    background: #3a3733;
    color: white;
}

.menu-dropdown-content .menu-item.active {
    color: var(--color-gold);
    font-weight: 600;
}

.menu-dropdown-content .menu-item.active::before {
    content: "✓ ";
}

.menu-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.menu-check-item:hover {
    background: #3a3733;
    color: white;
}

.menu-check-item input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--color-gold);
    margin: 0;
}

.menu-item-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-title);
    padding: 8px 16px 4px 16px;
    pointer-events: none;
}

.menu-separator {
    border: none;
    border-top: 1px solid #3d3a36;
    margin: 6px 0;
}

.menu-item-delete {
    float: right;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 10px;
    border: none;
    background: transparent;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.menu-item-delete:hover {
    opacity: 1;
}


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

#application {

    width: 1100px;

    max-width: 95%;

    margin: 40px auto;

}


/*==========================================================================*/
/* PANELES                                                                  */
/*==========================================================================*/

section {

    margin-bottom: 24px;

    padding: 24px;

    border-radius: var(--border-radius);

    background: var(--color-panel);

    border: 1px solid #2d2a27;

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

}


/*==========================================================================*/
/* MENSAJES                                                                 */
/*==========================================================================*/

#messagePanel{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.messageBlock{

    display:flex;

    flex-direction:column;

}

.messageBlock label{

    margin-bottom:8px;

    color:var(--color-title);

    font-weight:bold;

}

textarea{

    resize:none;

    height:140px;

    padding:10px;

    border:none;

    border-radius:6px;

    background:#202020;

    color:#ffffff;

    font-size:16px;

    outline:none;

}


/*==========================================================================*/
/* ZONAS VACÍAS                                                             */
/*==========================================================================*/

#rotorBand{

    min-height:160px;

}

#lampBoard {

    padding: 0;

    background: transparent;

    border: none;

    box-shadow: none;

}

#keyboard{

    min-height:220px;

}