/* ==========================================================
   ==========================================================
                INICIO — PARTE 1 DE 6
          CONFIGURACIÓN GENERAL + CABECERA
   ==========================================================
   ========================================================== */

* {
    box-sizing: border-box;
}

:root {
    --azul: #087ead;
    --azul-oscuro: #05668f;
    --azul-claro: #25b5e5;
    --verde: #20b862;
    --verde-oscuro: #15954c;
    --celeste-fondo: #dff7fb;
    --celeste-panel: #edfaff;
    --naranja: #ff9818;
    --amarillo: #ffc928;
    --rojo: #ef4054;
    --texto: #125b7b;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #163b4b;

    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(255,255,255,.95),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #c9f2fb 0%,
            #eafcff 48%,
            #e3f8ee 100%
        );

    overflow: hidden;
}


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

.cabecera {
    width: 100%;
    height: 88px;

    display: grid;
    grid-template-columns: 260px 1fr 230px;
    align-items: center;

    padding: 7px 25px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(239,251,255,.88)
        );

    border-bottom: 1px solid rgba(0,126,173,.18);

    box-shadow:
        0 3px 14px rgba(0,90,125,.10);
}

.logo-valley {
    display: flex;
    align-items: center;
}

.logo-valley img {
    width: 190px;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;
}

.titulo-principal {
    text-align: center;
}

.titulo-principal h1 {
    margin: 0;
    font-size: 31px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .5px;

    text-shadow:
        0 2px 3px rgba(0,0,0,.12);
}

.titulo-principal h1 span {
    color: #147eb8;
}

.titulo-principal h1 strong {
    color: #20a755;
}

.subtitulo {
    display: inline-block;

    margin-top: 6px;
    padding: 5px 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #20a6dc,
            #087db6
        );

    color: white;

    font-size: 12px;
    font-weight: 700;

    box-shadow:
        0 4px 8px rgba(0,114,165,.20);
}

.estado-programar {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 17px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            #28c76f,
            #18a858
        );

    color: white;

    font-size: 14px;
    font-weight: 800;

    border: 1px solid rgba(0,120,50,.15);

    box-shadow:
        0 5px 10px rgba(15,150,75,.25),
        inset 0 2px 2px rgba(255,255,255,.35);
}

.carita {
    width: 19px;
    height: 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: white;
    color: #20b862;

    font-size: 10px;
}


/* ==========================================================
   DISTRIBUCIÓN PRINCIPAL
   ========================================================== */

.simulador {
    width: 100%;
    height: calc(100vh - 88px);

    display: grid;

    grid-template-columns:
        330px
        minmax(480px, 710px)
        350px;

    column-gap: 18px;

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

    padding: 12px 16px;

    overflow: hidden;
}


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

.panel-mapas,
.panel-programacion {
    width: 100%;

    padding: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(245,253,255,.96)
        );

    border: 1px solid rgba(16,133,175,.18);

    border-radius: 20px;

    box-shadow:
        0 10px 25px rgba(0,91,125,.12),
        inset 0 2px 0 rgba(255,255,255,.95);
}


/* ==========================================================
   PANEL MIS MAPAS
   ========================================================== */

.cabecera-mapas {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

.icono-mapas {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #e4faff,
            #d5f4eb
        );

    border: 1px solid rgba(20,150,180,.15);

    font-size: 23px;

    box-shadow:
        inset 0 2px 2px white,
        0 4px 8px rgba(0,100,140,.08);
}

.texto-cabecera-mapas h2 {
    margin: 0 0 3px;
    color: var(--texto);
    font-size: 21px;
    font-weight: 900;
}

.texto-cabecera-mapas p {
    margin: 0;
    color: #6c8792;
    font-size: 12px;
}

.grupo-mapa {
    margin-bottom: 10px;
}

.grupo-mapa label {
    display: block;
    margin-bottom: 6px;
    color: var(--texto);
    font-size: 12px;
    font-weight: 800;
}

#selector-mapa {
    width: 100%;
    height: 40px;

    padding: 0 12px;

    border: 1px solid #afd1dc;
    border-radius: 10px;

    outline: none;

    background: white;
    color: #24556a;

    font-size: 13px;

    box-shadow:
        inset 0 2px 3px rgba(0,80,110,.04);
}

#selector-mapa:focus {
    border-color: #1ca8d4;

    box-shadow:
        0 0 0 3px rgba(28,168,212,.12);
}


/* ==========================================================
   BOTONES DE MAPAS
   ========================================================== */

#cargar-mapa,
#quitar-mapa {
    width: 100%;
    min-height: 41px;

    margin-top: 8px;

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

    gap: 8px;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}

#cargar-mapa {
    border: 2px solid #65d590;

    background:
        linear-gradient(
            180deg,
            #32cb75 0%,
            #18ae5b 75%,
            #11964b 100%
        );

    color: white;

    box-shadow:
        0 5px 0 #108844,
        0 8px 12px rgba(15,130,65,.20),
        inset 0 3px 3px rgba(255,255,255,.35);
}

#cargar-mapa:hover {
    transform: translateY(-2px);
}

#cargar-mapa:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 0 #108844,
        0 4px 6px rgba(15,130,65,.18),
        inset 0 2px 4px rgba(0,0,0,.08);
}

#quitar-mapa {
    border: 1px solid #d7e1e5;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #e9eff1
        );

    color: #65737a;

    box-shadow:
        0 3px 0 #ccd4d7,
        0 5px 8px rgba(0,0,0,.08),
        inset 0 2px 2px white;
}

#quitar-mapa:disabled {
    opacity: .48;
    cursor: not-allowed;
}

#nombre-mapa {
    width: 100%;

    margin-top: 11px;
    padding: 8px 10px;

    text-align: center;

    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            #f4fbfd,
            #eaf4f6
        );

    border: 1px solid #d7e8ed;

    color: #55717d;

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mensaje-mapas {
    margin-top: 16px;

    padding: 12px;

    display: flex;
    gap: 9px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #fff3d5
        );

    border: 1px solid #f4dfab;
}

.mensaje-mapas p {
    margin: 0;
    color: #745f2f;
    font-size: 11px;
    line-height: 1.4;
}

.estrella {
    font-size: 18px;
}


/* ==========================================================
   ==========================================================
                INICIO — PARTE 2 DE 6
                       TABLERO
   ==========================================================
   ========================================================== */

.zona-tablero {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    justify-self: center;
}

.barra-tablero,
.marco-tablero {
    width: min(
        100%,
        calc(100vh - 150px)
    );
}


/* ==========================================================
   BARRA DEL TABLERO
   ========================================================== */

.barra-tablero {
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 17px;

    margin-bottom: 0;

    background:
        linear-gradient(
            180deg,
            #1189bb,
            #05739f
        );

    border: 2px solid #20a8d0;
    border-bottom: 0;

    border-radius:
        18px 18px 0 0;

    box-shadow:
        0 7px 15px rgba(0,92,130,.22),
        inset 0 2px 2px rgba(255,255,255,.18);
}

.titulo-tablero {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;

    color: white;

    font-size: 16px;
    font-weight: 900;

    text-shadow:
        0 2px 2px rgba(0,0,0,.18);
}

.titulo-tablero span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icono-aventura {
    font-size: 20px;
}

.tamano-tablero {
    flex: 0 0 auto;

    padding: 5px 14px;

    border: 2px solid rgba(255,255,255,.45);
    border-radius: 18px;

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

    color: white;

    font-size: 12px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.20);
}


/* ==========================================================
   MARCO DEL TABLERO
   ========================================================== */

.marco-tablero {
    padding: 6px;

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

    background:
        linear-gradient(
            145deg,
            #0b82af,
            #04658d
        );

    border: 2px solid #19a8d0;
    border-top: 0;

    border-radius:
        0 0 18px 18px;

    box-shadow:
        0 12px 24px rgba(0,88,125,.25),
        inset 0 0 0 1px rgba(255,255,255,.13);
}


/* ==========================================================
   TABLERO
   ========================================================== */

#tablero {
    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    display: grid;

    position: relative;

    overflow: hidden;

    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    border: 2px solid rgba(255,255,255,.92);
    border-radius: 8px;

    box-shadow:
        inset 0 0 10px rgba(0,75,105,.14);
}

.casilla {
    position: relative;

    min-width: 0;
    min-height: 0;

    border-right:
        1px solid rgba(87,126,143,.62);

    border-bottom:
        1px solid rgba(87,126,143,.62);
}

.casilla.destino {
    background:
        rgba(32,184,98,.22);

    box-shadow:
        inset 0 0 15px rgba(32,184,98,.28);
}


/* ==========================================================
   TALE-BOT
   ========================================================== */

#talebot {
    width: 88%;
    height: 88%;

    max-width: 88%;
    max-height: 88%;

    object-fit: contain;

    user-select: none;
    touch-action: none;

    cursor: grab;

    filter:
        drop-shadow(
            0 5px 4px rgba(0,0,0,.23)
        );

    transform-origin: center center;
}


/* ==========================================================
   CRÉDITO DEL SIMULADOR
   ========================================================== */

.credito-simulador {
    width: min(
        100%,
        calc(100vh - 150px)
    );

    margin-top: 15px;

    text-align: center;

    color: #55717d;

    font-size: 16px !important;
    font-weight: 500;

    line-height: 1.3;

    letter-spacing: .1px;
}

.credito-simulador strong {
    color: #286b80;
    font-weight: 700;
}


/* ==========================================================
   ==========================================================
                  FIN — PARTE 2 DE 6
   ==========================================================
   ========================================================== */


/* ==========================================================
   ==========================================================
                INICIO — PARTE 3 DE 6
              PROGRAMACIÓN + PANEL LED
   ==========================================================
   ========================================================== */

.panel-programacion {
    padding: 15px;
}

.panel-cabecera {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-bottom: 10px;

    border-bottom:
        1px solid #d8eaf0;
}

.robot-mini {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #e8faff,
            #e4f8ed
        );

    border: 1px solid #d1ebef;

    font-size: 24px;

    box-shadow:
        inset 0 2px 2px white,
        0 3px 7px rgba(0,90,120,.08);
}

.texto-programacion h2 {
    margin: 0;

    color: #08698f;

    font-size: 19px;
    font-weight: 900;
}

.texto-programacion p {
    margin: 2px 0 0;

    color: #63828f;

    font-size: 11px;
}


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

.panel-led {
    margin-top: 10px;

    height: 82px;
    min-height: 82px;

    padding: 0 18px;

    display: flex;
    flex-direction: column;

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

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #eaf8fc,
            #dff2f7
        );

    border: 1px solid #badde8;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.9);
}

.panel-led .fila-led {
    width: 100%;

    display: flex;

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

    margin-left: 0;
    margin-right: 0;
}

.panel-led .led-comandos {
    width: 100%;
    flex: 0 0 100%;

    display: flex;

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

    gap: 0;

    margin: 0;
    padding: 0;
}

.panel-led .led-redondo {
    width: 25px;
    height: 25px;

    min-width: 25px;
    min-height: 25px;

    flex: 0 0 25px;

    display: inline-block;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f3f6f6,
            #c7d0d2 60%,
            #aeb9bb
        );

    border: 1px solid #aab7ba;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.85),
        0 1px 2px rgba(0,0,0,.16);
}

.panel-led .led-redondo.verde {
    background:
        radial-gradient(
            circle at 35% 30%,
            #d8ffe1,
            #41d26b 45%,
            #149842
        );

    border-color: #54dc78;

    box-shadow:
        0 0 8px rgba(37,204,93,.85);
}

.panel-led .led-redondo.rojo {
    background:
        radial-gradient(
            circle at 35% 30%,
            #ffd8dd,
            #f34d61 45%,
            #c52338
        );

    border-color: #fa7080;

    box-shadow:
        0 0 8px rgba(239,64,84,.85);
}

.panel-led .led-redondo.amarillo {
    background:
        radial-gradient(
            circle at 35% 30%,
            #fffbd4,
            #ffd13d 45%,
            #d9a400
        );

    border-color: #ffe46f;

    box-shadow:
        0 0 8px rgba(255,201,40,.90);
}

.panel-led .led-redondo.azul {
    background:
        radial-gradient(
            circle at 35% 30%,
            #dcf7ff,
            #35b8e9 45%,
            #0879b0
        );

    border-color: #68cef2;

    box-shadow:
        0 0 8px rgba(37,181,229,.90);
}

.panel-led .led-redondo.morado {
    background:
        radial-gradient(
            circle at 35% 30%,
            #f4dcff,
            #b85be0 45%,
            #7d25a7
        );

    border-color: #cf83ed;

    box-shadow:
        0 0 8px rgba(160,63,208,.90);
}

.panel-led .led-redondo.celeste {
    background:
        radial-gradient(
            circle at 35% 30%,
            #e1fbff,
            #63dced 45%,
            #18a8c2
        );

    border-color: #8ce9f5;

    box-shadow:
        0 0 8px rgba(60,207,229,.90);
}


/* ==========================================================
   LED DEL BUCLE
   ========================================================== */

.panel-led .fila-led-bucle {
    margin-top: 9px;
}

.panel-led .led-bucles {
    width: auto;
    flex: none;

    display: flex;

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

    gap: 8px;

    margin: 0 auto;
    padding: 0;
}

.panel-led .led-alargado {
    width: 28px;
    height: 10px;

    flex: 0 0 28px;

    display: inline-block;

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            #e4e9e9,
            #bfc9ca
        );

    border: 1px solid #abb8ba;

    box-shadow:
        inset 0 1px 2px white;
}

.panel-led .led-alargado.encendido {
    background:
        linear-gradient(
            180deg,
            #6ee98d,
            #20b85b
        );

    border-color: #1ca74f;

    box-shadow:
        0 0 8px rgba(32,184,91,.70);
}


/* ==========================================================
   ==========================================================
                  FIN — PARTE 3 DE 6
   ==========================================================
   ========================================================== */


/* ==========================================================
   ==========================================================
                INICIO — PARTE 4 DE 6
          BLOQUES + LISTA DE MOVIMIENTOS
   ==========================================================
   ========================================================== */

.bloque {
    margin-top: 10px;

    padding: 10px;

    border-radius: 14px;

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

.bloque-movimientos {
    background:
        linear-gradient(
            145deg,
            #f0fbff,
            #e4f7fd
        );

    border: 1px solid #b6deeb;
}

.bloque-botones {
    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #fff4d8
        );

    border: 1px solid #f0dda9;
}

.titulo-paso {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: #125f7e;

    font-size: 12px;
}

.numero {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    font-size: 13px;
    font-weight: 900;

    border:
        2px solid rgba(255,255,255,.75);

    box-shadow:
        0 3px 5px rgba(0,0,0,.15),
        inset 0 2px 2px rgba(255,255,255,.35);
}

.numero-azul {
    background:
        linear-gradient(
            #34b9e8,
            #168ec4
        );
}

.numero-naranja {
    background:
        linear-gradient(
            #ffb33e,
            #f28a08
        );
}


/* ==========================================================
   MIS MOVIMIENTOS
   ========================================================== */

#lista-comandos {
    width: 100%;

    min-height: 48px;
    max-height: 70px;

    padding: 8px;

    overflow-y: auto;

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

    border-radius: 10px;

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

    border:
        2px solid #a9dbe9;

    color: #55727e;

    text-align: center;

    font-size: 18px;
    font-weight: 900;

    letter-spacing: .5px;

    line-height: 1.25;

    box-shadow:
        inset 0 2px 5px rgba(0,90,120,.06);
}


/* ==========================================================
   ==========================================================
                  FIN — PARTE 4 DE 6
   ==========================================================
   ========================================================== */


/* ==========================================================
   ==========================================================
                INICIO — PARTE 5 DE 6
            BOTONES TALE-BOT + MICRÓFONO
   ==========================================================
   ========================================================== */

.controles {
    width: 210px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 60px);

    grid-template-rows:
        repeat(3, 60px);

    gap: 9px;

    justify-content: center;
}

.btn,
.espacio {
    width: 60px;
    height: 60px;
}

.btn {
    position: relative;

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

    padding: 0;

    overflow: visible;

    border: 3px solid rgba(255,255,255,.96);

    outline: 1px solid rgba(0,0,0,.08);

    cursor: pointer;

    box-shadow:
        0 5px 0 rgba(0,0,0,.14),
        0 8px 12px rgba(0,0,0,.14),
        inset 0 3px 3px rgba(255,255,255,.38),
        inset 0 -3px 4px rgba(0,0,0,.08);

    transition:
        transform .10s ease,
        box-shadow .10s ease,
        filter .10s ease;
}

.btn::before {
    content: none;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

.btn:active {
    transform: translateY(4px);

    box-shadow:
        0 1px 0 rgba(0,0,0,.13),
        0 3px 5px rgba(0,0,0,.12),
        inset 0 3px 5px rgba(0,0,0,.10);
}

.icono-boton {
    width: 72%;
    height: 72%;

    display: block;

    position: relative;

    z-index: 2;

    pointer-events: none;
}

.icono-go {
    width: 61%;
    height: 61%;
}

.bailar,
.microfono,
.bucle,
.borrar {
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f3f3
        );
}

.bailar {
    border-color: #eee9f0;
}

.microfono {
    border-color: #dcecef;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;
}

.bucle {
    border-color: #dce9df;
}

.borrar {
    border-color: #efe2e4;
}

.avanzar {
    border-radius:
        45% 45% 34% 34% /
        42% 42% 34% 34%;

    background:
        linear-gradient(
            145deg,
            #42d779,
            #20b95c
        );
}

.retroceder {
    border-radius:
        34% 34% 45% 45% /
        34% 34% 42% 42%;

    background:
        linear-gradient(
            145deg,
            #f25767,
            #e83b4f
        );
}

.izquierda {
    border-radius:
        48% 30% 30% 48% /
        50% 36% 36% 50%;

    background:
        linear-gradient(
            145deg,
            #ffdc42,
            #ffc11e
        );
}

.derecha {
    border-radius:
        30% 48% 48% 30% /
        36% 50% 50% 36%;

    background:
        linear-gradient(
            145deg,
            #3abdea,
            #169bd3
        );
}

.ejecutar {
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffb43c,
            #ff8d0b
        );
}

.orificio-microfono {
    position: absolute;

    top: 7px;
    left: 50%;

    width: 4px;
    height: 4px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #222222;

    z-index: 3;

    pointer-events: none;
}

.microfono.grabando {
    background:
        linear-gradient(
            145deg,
            #f8ffff,
            #d9f7fb
        );

    border-color: #78dbea;

    transform: translateY(4px);

    box-shadow:
        0 1px 0 rgba(0,140,165,.20),
        0 0 13px rgba(55,207,229,.55),
        inset 0 3px 5px rgba(0,110,135,.08);
}

.espacio {
    pointer-events: none;
}

.ayuda {
    margin-top: 10px;

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

    gap: 7px;

    padding: 9px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #e9faff,
            #dcf3fa
        );

    border: 1px solid #badfe9;

    color: #176987;

    font-size: 11px;
    font-weight: 700;

    box-shadow:
        inset 0 2px 2px white;
}

.mano {
    font-size: 17px;
}


/* ==========================================================
   ==========================================================
                  FIN — PARTE 5 DE 6
   ==========================================================
   ========================================================== */


/* ==========================================================
   ==========================================================
                INICIO — PARTE 6 DE 6
                 DISEÑO RESPONSIVE
   ==========================================================
   ========================================================== */


/* ==========================================================
   MONITORES CON MENOS DE 900 PX DE ALTO
   ========================================================== */

@media (max-height: 900px) {

    .barra-tablero,
    .marco-tablero,
    .credito-simulador {
        width:
            min(
                100%,
                calc(100vh - 145px)
            );
    }
}


/* ==========================================================
   PANTALLAS 1366 × 768
   ========================================================== */

@media (max-height: 800px) {

    .cabecera {
        height: 60px;

        padding-top: 3px;
        padding-bottom: 3px;
    }

    .logo-valley img {
        width: 155px;
        max-height: 50px;
    }

    .titulo-principal h1 {
        font-size: 24px;
    }

    .subtitulo {
        margin-top: 3px;
        padding: 3px 18px;
        font-size: 10px;
    }

    .estado-programar {
        padding: 7px 13px;
        font-size: 12px;
    }

    .simulador {
        height: calc(100vh - 60px);

        padding-top: 6px;
        padding-bottom: 5px;
    }

    .barra-tablero,
    .marco-tablero,
    .credito-simulador {
        width:
            min(
                100%,
                calc(100vh - 108px)
            );
    }

    .barra-tablero {
        height: 38px;
    }

    .panel-mapas,
    .panel-programacion {
        padding: 12px;
    }

    .cabecera-mapas {
        margin-bottom: 10px;
    }

    .panel-led {
        margin-top: 7px;

        height: 82px;
        min-height: 82px;

        padding: 0 18px;

        display: flex;
        flex-direction: column;

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

    .bloque {
        margin-top: 7px;
        padding: 7px;
    }

    #lista-comandos {
        min-height: 40px;
        font-size: 16px;
    }

    .controles {
        width: 177px;

        grid-template-columns:
            repeat(3, 51px);

        grid-template-rows:
            repeat(3, 51px);

        gap: 8px;
    }

    .btn,
    .espacio {
        width: 51px;
        height: 51px;
    }

    .btn {
        font-size: 25px;
    }

    .bailar,
    .microfono,
    .bucle,
    .borrar {
        border-radius: 50%;
    }

    .ejecutar {
        border-radius: 18px;
        font-size: 23px;
    }

    .microfono {
        font-size: 22px;
    }

    .ayuda {
        margin-top: 7px;
        padding: 7px;
    }

    #talebot {
        width: 86%;
        height: 86%;
    }

    .credito-simulador {
        margin-top: 15px;
    }
}


/* ==========================================================
   PANTALLAS MUY BAJAS
   ========================================================== */

@media (max-height: 700px) {

    .cabecera {
        height: 52px;
    }

    .simulador {
        height: calc(100vh - 52px);
    }

    .barra-tablero,
    .marco-tablero,
    .credito-simulador {
        width:
            min(
                100%,
                calc(100vh - 96px)
            );
    }

    .barra-tablero {
        height: 34px;
    }
}


/* ==========================================================
   PANTALLAS ANGOSTAS
   ========================================================== */

@media (max-width: 1150px) {

    body {
        overflow-y: auto;
    }

    .cabecera {
        grid-template-columns:
            180px
            1fr
            170px;
    }

    .logo-valley img {
        width: 155px;
    }

    .simulador {
        height: auto;

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 18px;

        overflow: visible;
    }

    .panel-mapas,
    .panel-programacion,
    .zona-tablero {
        width: min(94vw, 650px);
    }

    .barra-tablero,
    .marco-tablero,
    .credito-simulador {
        width: 100%;
    }
}


/* ==========================================================
   TABLETS Y CELULARES
   ========================================================== */

@media (max-width: 700px) {

    .cabecera {
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 6px;

        padding: 9px;
    }

    .logo-valley {
        justify-content: center;
    }

    .logo-valley img {
        width: 145px;
    }

    .titulo-principal h1 {
        font-size: 22px;
    }

    .estado-programar {
        justify-self: center;
    }

    .simulador {
        padding: 10px 8px 25px;
    }

    .panel-mapas,
    .panel-programacion,
    .zona-tablero {
        width: 100%;
    }

    .credito-simulador {
        width: 100%;
        margin-top: 15px;
    }
}


/* ==========================================================
   ==========================================================
                  FIN — PARTE 6 DE 6
   ==========================================================
   ========================================================== */


/* ==========================================================
   TAMAÑO DEFINITIVO DEL CRÉDITO
   ESTA REGLA PREVALECE EN TODAS LAS PANTALLAS
   ========================================================== */

.credito-simulador {
    margin-top: 15px !important;
    font-size: 18px !important;
}

/* ==========================================================
   CRÉDITO DEL SIMULADOR — TAMAÑO DEFINITIVO
   ========================================================== */

.credito-simulador {
    margin-top: 15px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.credito-simulador strong {
    font-size: 18px !important;
    font-weight: 700 !important;
}