/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

}

body {

    background:
        radial-gradient(
            ellipse at center,
            #101714 0%,
            #050807 55%,
            #020303 100%
        );

    color: #35ff72;

    font-family:
        "Courier New",
        Courier,
        monospace;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

}


/* =========================================================
   EFECTO CRT
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 4px
        );

    z-index: 20;

}

body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0,0,0,.65) 100%
        );

    z-index: 21;

}


/* =========================================================
   CONSOLA
   ========================================================= */

.console {

    width: min(900px, 94vw);

    min-height: 650px;

    position: relative;

    padding: 42px;

    background:

        linear-gradient(
            145deg,
            #111615,
            #050807 45%,
            #101413
        );

    border: 2px solid #444b48;

    box-shadow:

        0 0 0 1px #151a18,
        0 0 35px rgba(0,255,90,.12),
        inset 0 0 40px rgba(0,0,0,.9);

}


/* esquinas */

.console::before,
.console::after {

    content: "";

    position: absolute;

    width: 28px;
    height: 28px;

    border-color: #555;

    border-style: solid;

}

.console::before {

    top: 12px;
    left: 12px;

    border-width: 2px 0 0 2px;

}

.console::after {

    bottom: 12px;
    right: 12px;

    border-width: 0 2px 2px 0;

}


/* =========================================================
   SCANNER ROJO
   ========================================================= */

.scanner {

    height: 48px;

    width: 100%;

    position: relative;

    overflow: hidden;

    background:

        repeating-linear-gradient(
            to right,
            #080909 0px,
            #080909 12px,
            #171817 13px,
            #080909 14px
        );

    border: 2px solid #242927;

    border-radius: 20px;

    box-shadow:
        inset 0 0 15px #000,
        0 0 10px rgba(255,0,0,.15);

}


/* línea roja que se mueve */

.scanner-light {

    position: absolute;

    top: 3px;
    bottom: 3px;

    width: 100px;

    left: -100px;

    background:

        radial-gradient(
            ellipse at center,
            #ffffff 0%,
            #ff3333 15%,
            #ff0000 35%,
            rgba(255,0,0,.6) 55%,
            transparent 100%
        );

    filter: blur(2px);

    box-shadow:

        0 0 12px #ff0000,
        0 0 25px #ff0000,
        0 0 45px rgba(255,0,0,.8);

    animation:

        knightRider 3s ease-in-out infinite alternate;

}


@keyframes knightRider {

    0% {

        left: -100px;

    }

    100% {

        left: calc(100% + 100px);

    }

}


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

.header {

    margin-top: 35px;

    border-bottom: 1px solid #1c4b2a;

    padding-bottom: 20px;

}

.version {

    font-size: 14px;

    color: #22a94b;

    letter-spacing: 2px;

}

.title {

    margin-top: 12px;

    font-size: clamp(24px, 4vw, 38px);

    color: #48ff7a;

    text-shadow:

        0 0 8px rgba(60,255,110,.5);

    letter-spacing: 2px;

}

.subtitle {

    margin-top: 10px;

    color: #278c43;

    font-size: 14px;

}


/* =========================================================
   LOGIN
   ========================================================= */

.login {

    margin-top: 35px;

}

.field {

    margin-bottom: 22px;

}

label {

    display: block;

    margin-bottom: 8px;

    color: #37db63;

    font-size: 14px;

    letter-spacing: 2px;

}

label::before {

    content: "> ";

    color: #ff2b2b;

}

input {

    width: 100%;

    padding: 16px 18px;

    background: #030504;

    color: #45ff75;

    border: 1px solid #1b7736;

    outline: none;

    font-family: "Courier New", monospace;

    font-size: 16px;

    box-shadow:

        inset 0 0 15px rgba(0,0,0,.8);

}

input:focus {

    border-color: #39ff68;

    box-shadow:

        0 0 8px rgba(40,255,90,.25),
        inset 0 0 15px rgba(0,0,0,.8);

}

input::placeholder {

    color: #315b3b;

}


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

button {

    width: 100%;

    margin-top: 5px;

    padding: 16px;

    background: transparent;

    color: #ff3535;

    border: 2px solid #ff2525;

    font-family: "Courier New", monospace;

    font-size: 17px;

    letter-spacing: 4px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition: .2s;

    box-shadow:

        0 0 8px rgba(255,0,0,.15);

}

button:hover {

    background: rgba(255,0,0,.08);

    box-shadow:

        0 0 15px rgba(255,0,0,.4);

}

button:active {

    transform: scale(.99);

}

button::before {

    content: ">";

    position: absolute;

    left: 20px;

    animation: blink .8s infinite;

}

button::after {

    content: "_";

    position: absolute;

    right: 20px;

    animation: blink .8s infinite;

}

@keyframes blink {

    50% {
        opacity: 0;
    }

}


/* =========================================================
   ERROR
   ========================================================= */

.error {

    margin-bottom: 20px;

    padding: 12px;

    border: 1px solid #ff2222;

    color: #ff5555;

    background: rgba(255,0,0,.06);

    text-align: center;

    box-shadow:

        0 0 10px rgba(255,0,0,.15);

    animation: errorBlink .8s ease-in-out;

}

@keyframes errorBlink {

    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }

}


/* =========================================================
   ESTADO DEL SISTEMA
   ========================================================= */

.status {

    margin-top: 30px;

    border: 1px solid #155d2a;

    padding: 18px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px 30px;

    background: rgba(0,20,8,.25);

}

.status-title {

    grid-column: 1 / -1;

    color: #37db63;

    margin-bottom: 5px;

}

.status-row {

    color: #276f39;

    font-size: 13px;

}

.status-row span {

    color: #39e965;

}

.online {

    color: #39ff69 !important;

}


/* =========================================================
   DECORACIÓN
   ========================================================= */

.equalizer {

    display: flex;

    align-items: end;

    gap: 3px;

    height: 35px;

    margin-top: 8px;

}

.equalizer i {

    display: block;

    width: 5px;

    background: #29db59;

    box-shadow: 0 0 5px #20ff54;

    animation: equalize .7s infinite alternate;

}

.equalizer i:nth-child(1) {height:15px; animation-delay:.1s;}
.equalizer i:nth-child(2) {height:25px; animation-delay:.3s;}
.equalizer i:nth-child(3) {height:20px; animation-delay:.5s;}
.equalizer i:nth-child(4) {height:31px; animation-delay:.2s;}
.equalizer i:nth-child(5) {height:18px; animation-delay:.4s;}
.equalizer i:nth-child(6) {height:27px; animation-delay:.1s;}
.equalizer i:nth-child(7) {height:22px; animation-delay:.6s;}
.equalizer i:nth-child(8) {height:30px; animation-delay:.3s;}
.equalizer i:nth-child(9) {height:17px; animation-delay:.5s;}
.equalizer i:nth-child(10) {height:25px; animation-delay:.2s;}

@keyframes equalize {

    from {
        transform: scaleY(.5);
    }

    to {
        transform: scaleY(1);
    }

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    margin-top: 25px;

    text-align: center;

    color: #1d6832;

    font-size: 11px;

    letter-spacing: 2px;

}

.indicators {

    margin-top: 12px;

    display: flex;

    justify-content: center;

    gap: 7px;

}

.indicators i {

    width: 8px;
    height: 8px;

    border: 1px solid #2bcf55;

    display: block;

}

.indicators i:nth-child(4) {

    background: #42ff70;

    box-shadow: 0 0 7px #42ff70;

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:600px) {

    body {

        overflow:auto;

    }

    .console {

        width:94vw;

        min-height:auto;

        padding:25px;

        margin:20px 0;

    }

    .status {

        grid-template-columns:1fr;

    }

    .status-title {

        grid-column:auto;

    }

}