/* ==========================================================================
   MORSE TRAINER v2
   Base Layout + Variables + Reset
   ========================================================================== */

:root{

    /* Colores */

    --black:#000;
    --near-black:#1a1a1a;

    --cream:#e4ecf5;

    --white:#ffffff;

    --gray:#808080;
    --gray-light:#b3b3b3;
    --gray-dark:#4d4d4d;

    --border:rgba(128,128,128,.25);

    --green:#4d4d4d;
    --blue:#5c7c93;
    --error:#9a5246;

    --panel:#ffffff;

    /* Tipografía */

    --font-body:"Helvetica Neue",Helvetica,Arial,sans-serif;

    --font-mono:
        "Space Mono",
        ui-monospace,
        "SF Mono",
        monospace;

    /* Medidas */

    --nav-height:46px;

    --radius:2px;

    --transition:.22s ease;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

html,
body{

    width:100%;

    height:100%;

}

body{

    background:var(--cream);

    color:var(--near-black);

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

    overflow:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

.hidden{

    display:none !important;

}


/* ==========================================================================
   Scrollbars
   ========================================================================== */

::-webkit-scrollbar{

    width:5px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:rgba(0,0,0,.18);

    border-radius:20px;

}


/* ==========================================================================
   Fondo
   ========================================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.12;

    z-index:-2;

    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

        repeating-linear-gradient(

            0deg,

            rgba(0,0,0,.03) 0,

            rgba(0,0,0,.03) 1px,

            transparent 1px,

            transparent 2px

        );

}


/* ==========================================================================
   NAVBAR
   ========================================================================== */

.nav-bar{

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:var(--nav-height);

    background:#000;

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

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:500;

}

.nav-links{

    display:flex;

    flex-wrap:wrap;

}

.nav-item{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:14px 20px;

    text-decoration:none;

    color:var(--gray-light);

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

    font-size:10px;

    letter-spacing:.15em;

    text-transform:uppercase;

    border-right:1px solid var(--border);

    transition:all var(--transition);

}

.nav-item:last-child{

    border-right:none;

}

.nav-item:hover{

    color:var(--cream);

    background:rgba(255,255,255,.05);

}


/* ==========================================================================
   LAYOUT GENERAL
   ========================================================================== */

.screen{

    width:100%;

    height:calc(100dvh - var(--nav-height));

    margin-top:var(--nav-height);

}


/* ==========================================================================
   TRAINING LAYOUT
   ========================================================================== */

/*
    Esta es la diferencia más importante respecto
    a la versión anterior.

    Ya NO existe un popup.

    El entrenamiento es un GRID de dos columnas.

    ┌───────────────────────────────┬───────────────┐
    │                               │               │
    │                               │               │
    │         ENTRENAMIENTO         │   GLOSARIO    │
    │                               │               │
    │                               │               │
    └───────────────────────────────┴───────────────┘

*/

#screen-training{

    display:grid;

    grid-template-columns:

        minmax(0,1fr)

        340px;

    gap:24px;

    padding:24px;

    align-items:start;

}


/* ==========================================================================
   COLUMNA DEL JUEGO
   ========================================================================== */

.training-main{

    display:flex;

    flex-direction:column;

    gap:22px;

    min-width:0;

}


/* ==========================================================================
   PANEL LATERAL
   ========================================================================== */

.glossary-panel{

    display:flex;

    flex-direction:column;

    background:var(--panel);

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

    border-radius:var(--radius);

    height:calc(100dvh - 96px);

    overflow:hidden;

}


/* Header */

.glossary-header{

    padding:18px;

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

    background:var(--panel);

}

.glossary-title{

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

    font-size:14px;

    letter-spacing:.08em;

    color:var(--gray-dark);

    text-transform:uppercase;

}


/* contenido */

.glossary-content{

    flex:1;

    overflow-y:auto;

}
/* ==========================================================================
   PANEL GENERAL
   ========================================================================== */

.panel{

    background:var(--panel);

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

    border-radius:var(--radius);

    padding:20px;

}

.panel-title{

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

    font-size:13px;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--gray-dark);

    margin-bottom:16px;

    text-align:center;

}


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

.panel-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    text-align:center;

}

.brand{

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

    font-size:clamp(28px,5vw,40px);

    font-weight:700;

    letter-spacing:.06em;

}

.brand-accent{

    color:var(--green);

}

.subtitle{

    color:var(--gray-dark);

    font-size:15px;

}


/* ==========================================================================
   LED
   ========================================================================== */

.dial-led{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--border);

    transition:.1s;

}

.dial-led.lit{

    background:var(--green);

    box-shadow:0 0 10px rgba(77,77,77,.35);

}


/* ==========================================================================
   BOTONES
   ========================================================================== */

button{

    cursor:pointer;

    font-family:inherit;

}

.btn-primary{

    width:100%;

    border:none;

    background:var(--green);

    color:#fff;

    padding:18px;

    font-size:16px;

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

    letter-spacing:.08em;

    transition:.18s;

}

.btn-primary:hover{

    filter:brightness(1.08);

}

.btn-primary:active{

    transform:scale(.98);

}

.btn-secondary{

    width:100%;

    padding:14px;

    background:transparent;

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

    color:var(--gray-dark);

}

.btn-secondary:hover{

    border-color:var(--error);

    color:var(--error);

}

.btn-text{

    border:none;

    background:none;

    color:var(--gray-dark);

    text-decoration:underline;

    font-size:13px;

}

.btn-back{

    border:none;

    background:none;

    color:var(--gray-dark);

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

    margin-bottom:8px;

}

.btn-back:hover{

    color:var(--near-black);

}


/* ==========================================================================
   BOTÓN GLOSARIO
   ========================================================================== */

.btn-glossary{

    align-self:flex-end;

    background:var(--panel);

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

    padding:10px 16px;

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

    font-size:12px;

    letter-spacing:.06em;

    transition:.2s;

}

.btn-glossary:hover{

    border-color:var(--green);

    color:var(--green);

}


/* ==========================================================================
   BOTONES SEGMENTADOS
   ========================================================================== */

.seg-group{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.seg-btn{

    flex:1;

    min-width:120px;

    padding:12px;

    background:#fff;

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

    transition:.18s;

}

.seg-btn:hover{

    border-color:var(--green);

}

.seg-btn.active{

    border-color:var(--green);

    background:rgba(77,77,77,.08);

    color:var(--green);

}


/* ==========================================================================
   CAMPOS
   ========================================================================== */

.field{

    margin-top:18px;

}

.field label{

    display:block;

    margin-bottom:8px;

    color:var(--gray-dark);

    text-align:center;

}

.field-value{

    color:var(--blue);

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

}

.field-toggle{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}

.field input[type=range]{

    width:100%;

    appearance:none;

    height:6px;

    border-radius:50px;

    background:var(--border);

}

.field input[type=range]::-webkit-slider-thumb{

    appearance:none;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--green);

}


/* ==========================================================================
   INPUT PRINCIPAL
   ========================================================================== */

#answer-form{

    display:flex;

    justify-content:center;

}

#answer-input{

    width:150px;

    height:150px;

    background:#fff;

    border:2px solid var(--border);

    border-radius:12px;

    font-size:70px;

    text-align:center;

    text-transform:uppercase;

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

    transition:.18s;

}

#answer-input:focus{

    outline:none;

    border-color:var(--green);

}

#answer-input.flash-correct{

    background:rgba(77,77,77,.08);

    border-color:var(--green);

    color:var(--green);

}

#answer-input.flash-error{

    background:rgba(154,82,70,.12);

    border-color:var(--error);

    color:var(--error);

}


/* ==========================================================================
   HISTORIAL
   ========================================================================== */

.history-section{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.history-label{

    text-align:center;

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

    font-size:11px;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--gray-dark);

}

.history-strip{

    display:flex;

    gap:8px;

    overflow-x:auto;

}

.history-chip{

    min-width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    background:#fff;

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

}

.history-chip.correct{

    border-color:var(--green);

    color:var(--green);

}

.history-chip.incorrect{

    border-color:var(--error);

    color:var(--error);

}


/* ==========================================================================
   ESTADÍSTICAS
   ========================================================================== */

.stats-strip{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

}

.stat-cell{

    background:#fff;

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

    padding:12px;

    text-align:center;

}

.stat-label{

    display:block;

    font-size:11px;

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

    text-transform:uppercase;

    color:var(--gray-dark);

    margin-bottom:6px;

}

.stat-value{

    font-size:24px;

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

    color:var(--green);

    font-weight:700;

}
/* ==========================================================================
   GLOSARIO LATERAL
   ========================================================================== */

.glossary-panel{

    display:flex;

    flex-direction:column;

    background:var(--panel);

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

    border-radius:var(--radius);

    overflow:hidden;

    height:calc(100vh - 94px);

    position:sticky;

    top:70px;

}


/* Cabecera */

.glossary-header{

    padding:18px;

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

    background:#fafafa;

}

.glossary-title{

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

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.12em;

    text-align:center;

    color:var(--gray-dark);

}


/* Buscador */

.glossary-search{

    padding:14px;

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

}

.glossary-search input{

    width:100%;

    padding:10px 12px;

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

    background:#fff;

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

    font-size:13px;

}

.glossary-search input:focus{

    outline:none;

    border-color:var(--green);

}


/* Lista */

.glossary-content{

    flex:1;

    overflow-y:auto;

}


/* Filas */

.glossary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 18px;

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.18s;

}

.glossary-item:hover{

    background:rgba(0,0,0,.035);

}


/* Letra */

.glossary-letter{

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

    font-size:18px;

    font-weight:700;

}


/* Morse */

.glossary-code{

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

    color:var(--blue);

    letter-spacing:.18em;

}


/* Letra que está sonando */

.glossary-item.active{

    background:rgba(77,77,77,.10);

    border-left:4px solid var(--green);

}

.glossary-item.active .glossary-letter{

    color:var(--green);

}

.glossary-item.active .glossary-code{

    font-weight:bold;

}


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

.feedback{

    text-align:center;

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

    margin-top:12px;

    min-height:22px;

}

.feedback.correct{

    color:var(--green);

}

.feedback.error{

    color:var(--error);

}


/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

.fade-in{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.pulse{

    animation:pulse .35s;

}

@keyframes pulse{

    50%{

        transform:scale(1.04);

    }

}


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

@media (max-width:1100px){

    #screen-training{

        grid-template-columns:1fr;

    }

    .glossary-panel{

        position:fixed;

        top:46px;

        right:-360px;

        width:340px;

        height:calc(100vh - 46px);

        z-index:999;

        transition:right .30s ease;

        box-shadow:-8px 0 20px rgba(0,0,0,.12);

    }

    .glossary-panel.open{

        right:0;

    }

}


/* Móvil */

@media (max-width:768px){

    body{

        overflow:auto;

    }

    #screen-training{

        padding:14px;

    }

    .stats-strip{

        grid-template-columns:repeat(2,1fr);

    }

    #answer-input{

        width:110px;

        height:110px;

        font-size:52px;

    }

    .glossary-panel{

        width:88vw;

    }

}


/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mb-20{

    margin-bottom:20px;

}

.w-100{

    width:100%;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mono{

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

}

.small{

    font-size:12px;

}

.upper{

    text-transform:uppercase;

}