.simulador-container {
    padding: 30px;
    text-align: center;
}

.simulador-titulo {
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    color: #5E3686;
    margin-bottom: 15px;
}

.simulador-subtitulo {
    font-weight: bold;
    color: #464646;
    margin-bottom: 25px;
}

.linea-decorativa {
    width: 180px;
    height: 4px;
    background-color: #522e92;
    opacity: 0.8;
    margin: -10px auto 30px auto;
}

.simulador-descripcion {
    font-size: 18px;
    text-align: justify;
    margin-bottom: 40px;
    max-width: 999px;
    margin-left: auto;
    margin-right: auto;
}

.seleccion-boleta {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    margin-top: 66px;
}

.boleta-opcion {
    background-color: #f3f3f3;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    width: 280px;
}

.boleta-opcion:hover {
    transform: translateY(-8px);
}

.MTSJ:hover {
    box-shadow: 0px 0px 9px 6px #FEB4C7;
}

.MTDJ:hover {
    box-shadow: 0px 0px 9px 6px #8EB8EE;
}

.Jueces:hover {
    box-shadow: 0px 0px 9px 6px #D3E2BE;
}

.boleta-imagen-contenedor {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
}

.boleta-imagen {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.boleta-titulo {
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

.simulador-boleta-seccion {
    background-color: #f2f2f2;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 40px;
}

.simulador-boleta-imagen-contenedor {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.simulador-boleta-imagen {
    display: block;
    width: 100%;
    height: auto;
}

.campo-voto {
    font-family: "Single Day", cursive;
    position: absolute;
    text-align: center;
    font-size: 1rem;
    border-radius: 4px;
    width: 3.5%;
    /* Ajustable según proporción de la imagen */
    aspect-ratio: 0.78 / 1;
    /* Ajusta según tus dimensiones deseadas */
    transform: translate(-50%, -50%);
}


.campo-label {
    font-family: cursive;
    position: absolute;
    text-align: center;
    font-size: 20px;
    border-radius: 4px;
}

.boton-finalizar {
    display: inline-block;
    padding: 12px 24px;
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

.boton-finalizar:hover {
    background-color: #45a049;
}

.MTSJ-label {
    top: 65px;
    left: 72%;
    font-size: 15px;
}

.MTDJ-label {
    top: 65px;
    left: 72%;
    font-size: 15px;
}

.JUECES-label {
    top: 65px;
    left: 72%;
    font-size: 15px;
}

.boleta-oculta {
    display: none;
}

.borrar-button {
    background-color: #7b7676;
    color: white;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.borrar-button:hover {
    background-color: #6f6f6f;
}

.start-button {
    background-color: #608798;
    color: white;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.start-button:hover {
    background-color: #4f6d7b;
}

.subtitle {
    color: #5E3686;
    font-size: 24px;
}

.boleta {
    display: flex;
}

.boton-verificar {
    width: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
}

@media screen and (max-width: 900px) and (orientation: landscape) {
    /* Estilos a aplicar en orientación horizontal */
    .imagen-bar {
        height: 41px;
        width: 64px;
        margin: 0px 18px 0px -8px;
    }

    .subtitle {
        font-size: 14px !important;
    }

    .bar {
        height: 64px !important;
    }

    .celular {
        display: none !important;
    }

    .simulador-descripcion {
        font-size: 12px;
    }

    .lineamiento {
        width: 100%;
    }

    .lineamiento a {
        font-size: 6px !important;
    }

    .seleccion-boleta {
        flex-wrap: nowrap;
        margin-top: 44px;
    }

    .boleta-titulo {
        padding: 3px;
        font-size: 8px;
        height: 36%;
        place-items: center;
        display: grid;
    }

    .boleta-imagen-contenedor {
        height: 66px;
        padding: 6px;
    }

    .boleta-opcion {
        border-radius: 6px;
        width: 100px;
        margin: 0px 8px;
        height: 104%;
    }

    .boleta {
        display: block;
    }

    .simulador-boleta-seccion {
        padding: 0px;
        margin-bottom: 0px;
    }

    .boton-verificar {
        margin: 22px 0px;
        display: inline-block;
        width: 100%;
    }

    .start-button {
        padding: 0px 16px;
        height: 28px;
        font-size: 11px;
    }

    .borrar-button {
        padding: 0px 16px;
        height: 28px;
        font-size: 11px;
    }

    .campo-MTSJ {
        border: 1px solid #000000;
        height: 40px;
        top: 34.4%;
        border-radius: 2px;
    }

    .campo-MTDJ {
        border: 1px solid #000000;
        height: 41px;
        top: 34.7%;
        border-radius: 2px;
    }

    .campo-Jueces {
        border: 1px solid #000000;
        height: 40px;
        border-radius: 2px;
    }

    .MTSJ-label {
        top: 23px;
        left: 75%;
        font-size: 6px;
    }

    .MTSJ-1 {
        left: 8.4%;
    }

    .MTSJ-2 {
        left: 11.9%;
    }

    .MTSJ-3 {
        left: 16.5%;
    }

    .MTSJ-4 {
        left: 20%;
    }

    .MTSJ-5 {
        left: 24.5%;
    }

    .MTSJ-6 {
        left: 28.1%;
    }

    .MTSJ-7 {
        left: 32.5%;
    }

    .MTSJ-8 {
        left: 36.1%;
    }

    .MTSJ-9 {
        left: 40.6%;
    }

    .MTSJ-10 {
        left: 44.2%;
    }

    .MTSJ-11 {
        left: 58.8%;
    }

    .MTSJ-12 {
        left: 62.38%;
    }

    .MTSJ-13 {
        left: 67.4%;
    }

    .MTSJ-14 {
        left: 71%;
    }

    .MTSJ-15 {
        left: 76.1%;
    }

    .MTSJ-16 {
        left: 79.6%;
    }

    .MTSJ-17 {
        left: 84.6%;
    }

    .MTSJ-18 {
        left: 88.1%;
    }

    .MTDJ-label {
        top: 25px;
        left: 72%;
        font-size: 6px;
    }

    .MTDJ-1 {
        left: 19.5%;
    }

    .MTDJ-2 {
        left: 23.1%;
    }

    .MTDJ-3 {
        left: 29.8%;
    }

    .MTDJ-4 {
        left: 33.3%;
    }

    .MTDJ-5 {
        left: 71.8%;
    }

    .MTDJ-6 {
        left: 75.4%;
    }

    .JUECES-label {
        top: 27px;
        left: 71%;
        font-size: 6px;
    }

    .JUECES-1 {
        left: 29%;
        top: 19.7%;
    }

    .JUECES-2 {
        left: 32.4%;
        top: 19.7%;
    }

    .JUECES-3 {
        left: 36.6%;
        top: 19.7%;
    }

    .JUECES-4 {
        left: 39.9%;
        top: 19.7%;
    }

    .JUECES-5 {
        left: 76.5%;
        top: 19.7%;
    }

    .JUECES-6 {
        left: 80%;
        top: 19.7%;
    }

    .JUECES-7 {
        left: 84%;
        top: 19.7%;
    }

    .JUECES-8 {
        left: 87.2%;
        top: 19.7%;
    }

    .JUECES-9 {
        left: 13.9%;
        top: 52%;
    }

    .JUECES-10 {
        left: 17.4%;
        top: 52%;
    }

    .JUECES-11 {
        left: 21.5%;
        top: 52%;
    }

    .JUECES-12 {
        left: 25%;
        top: 52%;
    }

    .JUECES-13 {
        left: 61.4%;
        top: 52%;
    }

    .JUECES-14 {
        left: 64.7%;
        top: 52%;
    }

    .JUECES-15 {
        left: 68.8%;
        top: 52%;
    }

    .JUECES-16 {
        left: 72.4%;
        top: 52%;
    }

    .JUECES-17 {
        left: 21%;
        top: 80.1%;
    }

    .JUECES-18 {
        left: 24.5%;
        top: 80.1%;
    }

    .JUECES-19 {
        left: 75.4%;
        top: 80.1%;
    }

    .JUECES-20 {
        left: 78.8%;
        top: 80.1%;
    }

    .label-votos {
        border: 3px solid rgb(96, 135, 152);
        padding: 8px 4px;
        border-radius: 9px;
    }

    .mesajeValidado {
        margin-left: -74px;
        color: #000000;
        font-size: 14px !important;
    }
  }

@media (min-width:320px) and (max-width: 479px) {

    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
    .imagen-bar {
        height: 41px;
        width: 64px;
        margin: 0px 18px 0px -8px;
    }

    .subtitle {
        font-size: 14px !important;
    }

    .bar {
        height: 64px !important;
    }

    .celular {
        display: none !important;
    }

    .simulador-descripcion {
        font-size: 12px;
    }

    .lineamiento {
        width: 100%;
    }

    .lineamiento a {
        font-size: 6px !important;
    }

    .seleccion-boleta {
        flex-wrap: nowrap;
        margin: 44px 0px 40px 0px;
        gap: 22px;
    }

    .boleta-titulo {
        padding: 3px;
        font-size: 8px;
        height: 36%;
        place-items: center;
        display: grid;
    }

    .boleta-imagen-contenedor {
        height: 66px;
        padding: 6px;
    }

    .boleta-opcion {
        border-radius: 6px;
        width: 100px;
        margin: 0px 8px;
        height: 104%;
    }

    .boleta {
        display: block;
    }

    .simulador-boleta-seccion {
        padding: 0px;
        margin-bottom: 0px;
    }

    .boton-verificar {
        margin: 22px 0px;
        display: inline-block;
        width: 100%;
    }

    .start-button {
        padding: 0px 16px;
        height: 28px;
        font-size: 11px;
    }

    .borrar-button {
        padding: 0px 16px;
        height: 28px;
        font-size: 11px;
    }

    .campo-MTSJ {
        border: 1px solid #000000;
        height: 16px;
        top: 34.4%;
        border-radius: 2px;
    }

    .campo-MTDJ {
        border: 1px solid #000000;
        height: 16px;
        top: 34.4%;
        border-radius: 2px;
    }

    .campo-Jueces {
        border: 1px solid #000000;
        height: 16px;
        border-radius: 2px;
    }

    .MTSJ-label {
        top: 23px;
        left: 75%;
        font-size: 6px;
    }

    .MTSJ-1 {
        left: 8.4%;
    }

    .MTSJ-2 {
        left: 11.9%;
    }

    .MTSJ-3 {
        left: 16.5%;
    }

    .MTSJ-4 {
        left: 20%;
    }

    .MTSJ-5 {
        left: 24.6%;
    }

    .MTSJ-6 {
        left: 28.1%;
    }

    .MTSJ-7 {
        left: 32.6%;
    }

    .MTSJ-8 {
        left: 36.1%;
    }

    .MTSJ-9 {
        left: 40.7%;
    }

    .MTSJ-10 {
        left: 44.1%;
    }

    .MTSJ-11 {
        left: 58.8%;
    }

    .MTSJ-12 {
        left: 62.38%;
    }

    .MTSJ-13 {
        left: 67.4%;
    }

    .MTSJ-14 {
        left: 70.95%;
    }

    .MTSJ-15 {
        left: 75.8%;
    }

    .MTSJ-16 {
        left: 79.52%;
    }

    .MTSJ-17 {
        left: 84.6%;
    }

    .MTSJ-18 {
        left: 88.1%;
    }

    .MTDJ-label {
        top: 25px;
        left: 72%;
        font-size: 6px;
    }

    .MTDJ-1 {
        left: 19.5%;
    }

    .MTDJ-2 {
        left: 23.4%;
    }

    .MTDJ-3 {
        left: 29.6%;
    }

    .MTDJ-4 {
        left: 33.5%;
    }

    .MTDJ-5 {
        left: 71.6%;
    }

    .MTDJ-6 {
        left: 75.7%;
    }

    .JUECES-label {
        top: 27px;
        left: 71%;
        font-size: 6px;
    }

    .JUECES-1 {
        left: 29%;
        top: 19.6%;
    }

    .JUECES-2 {
        left: 32.4%;
        top: 19.6%;
    }

    .JUECES-3 {
        left: 36.9%;
        top: 19.6%;
    }

    .JUECES-4 {
        left: 39.9%;
        top: 19.6%;
    }

    .JUECES-5 {
        left: 76.5%;
        top: 19.6%;
    }

    .JUECES-6 {
        left: 80.1%;
        top: 19.6%;
    }

    .JUECES-7 {
        left: 84.2%;
        top: 19.6%;
    }

    .JUECES-8 {
        left: 87.2%;
        top: 19.6%;
    }

    .JUECES-9 {
        left: 13.9%;
        top: 52.2%;
    }

    .JUECES-10 {
        left: 17.4%;
        top: 52.2%;
    }

    .JUECES-11 {
        left: 21.5%;
        top: 52.2%;
    }

    .JUECES-12 {
        left: 25.2%;
        top: 52.2%;
    }

    .JUECES-13 {
        left: 61.4%;
        top: 52.2%;
    }

    .JUECES-14 {
        left: 64.7%;
        top: 52.2%;
    }

    .JUECES-15 {
        left: 68.8%;
        top: 52.2%;
    }

    .JUECES-16 {
        left: 72.4%;
        top: 52.2%;
    }

    .JUECES-17 {
        left: 20.9%;
        top: 80%;
    }

    .JUECES-18 {
        left: 24.6%;
        top: 80%;
    }

    .JUECES-19 {
        left: 75.6%;
        top: 80%;
    }

    .JUECES-20 {
        left: 78.8%;
        top: 80%;
    }

    .label-votos {
        border: 3px solid rgb(96, 135, 152);
        padding: 8px 4px;
        border-radius: 9px;
    }

    .mesajeValidado {
        margin-left: -74px;
        color: #000000;
        font-size: 14px !important;
    }
}

@media (min-width:480px) and (max-width: 599px) {

    /* smartphones, Android phones, landscape iPhone */
    .subtitle {
        font-size: 24px !important;
    }
}

@media (min-width:600px) and (max-width: 800px) {

    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
    .subtitle {
        font-size: 24px !important;
    }
}

@media (min-width:801px) and (max-width: 1024px) {

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .subtitle {
        font-size: 24px !important;
    }

    .imagen-bar {
        height: 66px;
        width: 90px;
        margin-right: 33px;
    }

    .celular {
        display: none !important;
    }

}

@media (min-width:1025px) and (max-width: 1280px) {

    /* big landscape tablets, laptops, and desktops */
    .subtitle {
        font-size: 24px !important;
    }
}

@media (min-width:1281px) {

    /* hi-res laptops and desktops */
    .container {
        max-width: 100%;
    }

    .subtitle {
        font-size: 24px !important;
    }

    .bar {
        height: 120px !important;
    }

    .imagen-bar {
        height: 66px;
        width: 90px;
        margin-right: 33px;
    }

    .simulador-container {
        margin-top: 66px;
    }

    .label-votos {
        border: 3px solid rgb(96, 135, 152);
        padding: 8px 8px;
        border-radius: 9px;
        margin-left: 213px;
    }

    .mesajeValidado {
        margin-left: -66px;
        color: #000000;
        font-size: 14px !important;
    }

    .MTSJ-label {
        top: 66px;
    }

    .campo-MTSJ {
        border: 1px solid #000000;
        top: 34.5%;
    }

    .MTSJ-1 {
        left: 8.3%;
    }

    .MTSJ-2 {
        left: 11.9%;
    }

    .MTSJ-3 {
        left: 16.4%;
    }

    .MTSJ-4 {
        left: 20%;
    }

    .MTSJ-5 {
        left: 24.3%;
    }

    .MTSJ-6 {
        left: 27.9%;
    }

    .MTSJ-7 {
        left: 32.5%;
    }

    .MTSJ-8 {
        left: 36.2%;
    }

    .MTSJ-9 {
        left: 40.4%;
    }

    .MTSJ-10 {
        left: 44.2%;
    }

    .MTSJ-11 {
        left: 58.8%;
    }

    .MTSJ-12 {
        left: 62.3%;
    }

    .MTSJ-13 {
        left: 67.3%;
    }

    .MTSJ-14 {
        left: 71%;
    }

    .MTSJ-15 {
        left: 76%;
    }

    .MTSJ-16 {
        left: 79.6%;
    }

    .MTSJ-17 {
        left: 84.8%;
    }

    .MTSJ-18 {
        left: 88.3%;
    }

    .boton-verificar {
        display: block;
    }

    .campo-MTDJ {
        border: 1px solid #000000;
        top: 34.6%;
        height: 38px;
        width: 30px;
    }

    .MTDJ-label {
        top: 65px;
        left: 73%;
        font-size: 15px;
    }

    .MTDJ-1 {
        left: 19.6%;
    }

    .MTDJ-2 {
        left: 23%;
    }

    .MTDJ-3 {
        left: 29.6%;
    }

    .MTDJ-4 {
        left: 33.3%;
    }

    .MTDJ-5 {
        left: 71.8%;
    }

    .MTDJ-6 {
        left: 75.3%;
    }

    .campo-Jueces {
        border: 1px solid #000000;
    }

    .JUECES-label {
        top: 70px;
        left: 71%;
        font-size: 15px;
    }

    .JUECES-1 {
        left: 29%;
        top: 19.6%;
    }

    .JUECES-2 {
        left: 32.4%;
        top: 19.6%;
    }

    .JUECES-3 {
        left: 36.9%;
        top: 19.6%;
    }

    .JUECES-4 {
        left: 39.9%;
        top: 19.6%;
    }

    .JUECES-5 {
        left: 76.5%;
        top: 19.6%;
    }

    .JUECES-6 {
        left: 80.1%;
        top: 19.6%;
    }

    .JUECES-7 {
        left: 84.2%;
        top: 19.6%;
    }

    .JUECES-8 {
        left: 87.2%;
        top: 19.6%;
    }

    .JUECES-9 {
        left: 13.9%;
        top: 52.2%;
    }

    .JUECES-10 {
        left: 17.4%;
        top: 52.2%;
    }

    .JUECES-11 {
        left: 21.5%;
        top: 52.2%;
    }

    .JUECES-12 {
        left: 25.2%;
        top: 52.2%;
    }

    .JUECES-13 {
        left: 61.4%;
        top: 52.2%;
    }

    .JUECES-14 {
        left: 64.7%;
        top: 52.2%;
    }

    .JUECES-15 {
        left: 68.8%;
        top: 52.2%;
    }

    .JUECES-16 {
        left: 72.4%;
        top: 52.2%;
    }

    .JUECES-17 {
        left: 20.9%;
        top: 80%;
    }

    .JUECES-18 {
        left: 24.6%;
        top: 80%;
    }

    .JUECES-19 {
        left: 75.6%;
        top: 80%;
    }

    .JUECES-20 {
        left: 78.8%;
        top: 80%;
    }

    .lineamiento {
        width: 100%;
        justify-content: center;
        display: grid;
        margin-top: 44px;
    }

    .lineamiento a {
        font-size: 14px !important;
        height: 44px !important;
    }

    .simulador-descripcion {
        font-size: 18px;
        max-width: 1111px;
    }

    .simulador-subtitulo {
        font-size: 33px;
    }

    .boleta-imagen-contenedor {
        padding: 11px;
    }

    .boleta-titulo {
        padding: 3px;
        height: 36%;
        place-items: center;
        display: grid;
    }

    .boleta-opcion {
        height: 234px;
    }

    .simulador-boleta-seccion {
        width: 93%;
        display: inline-block;
    }

    .campo-voto {
        font-size: 24px;
    }
}