/* ================================================== */
/* CONTENEDOR                                         */
/* ================================================== */
.contenedor{
    width:min(1000px,100%);
}

/* ================================================== */
/* MENÚ — PC                                          */
/* ================================================== */
.menuQR{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
    justify-content:center;
    margin:10px auto 30px;
}

.menuQR button{
    aspect-ratio:auto;
    min-height:90px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    padding:10px;
    font-size:15px;
    text-align:center;
    background:#f4f4f4;
    color:#222;
    border:none;
    border-radius:10px;
    box-shadow:3px 3px 8px rgba(0,0,0,.18);
    transition:
        transform .2s,
        box-shadow .2s,
        background-color .2s;
}

.menuQR button:hover{
    transform:translateY(-3px);
    background:#eeeeee;
    box-shadow:5px 5px 12px rgba(0,0,0,.25);
}

.menuQR button:active{
    transform:translateY(1px);
    box-shadow:2px 2px 5px rgba(0,0,0,.20);
}

.menuQR button span{
    font-size:24px;
}

/* Borrar o poner como comentario una vez que haya probado la visualización de zona de trabajo */
/* #vistaMenu{
    display:none;
} */

/* ================================================== */
/* BOTÓN INICIO                                       */
/* ================================================== */
#vistaMenu .btnInicio{
    display:block;
    width:260px;
    margin:0 auto;
}

.panelQR .btnInicio{
    width:100%;
    margin-top:0;
}

/* ================================================== */
/* ZONA DE TRABAJO                                    */
/* ================================================== */
#zonaTrabajo{
    display:none; /*debe ir 'none'. 'block' es exclusivamente para hacer pruebas de visualización de esta parte.*/
}

.contenidoQR{
    display:grid;
    grid-template-columns:1fr 340px;
    gap:40px;
    align-items:start;
}

#formulario{
    min-height:520px;
}

.panelQR{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

#codigoQR{
    width:320px;
    height:320px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid #d0d0d0;
    border-radius:10px;
    background:white;
}

#estadoQR{
    width:100%;
}

#btnDescargar,
#btnCopiarImagen,
#btnLimpiar{
    width:100%;
}

#btnMenu{
    margin-bottom:30px;
}

/* ================================================== */
/* FORMULARIOS                                        */
/* ================================================== */

.formularioQR{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.formularioQR h2{
    margin-bottom:5px;
    color:#413889;
}

.subtituloFormulario{
    margin-top:5px;
    font-size:17px;
    color:#645c9f;
}

.campoQR{
    display:flex;
    flex-direction:column;
    gap:7px;
    width:100%;
}

.campoQR label{
    font-weight:bold;
    font-size:15px;
}

.campoQR input,
.campoQR textarea,
.campoQR select{
    width:100%;
    padding:11px 12px;
    border:1px solid #bdbdbd;
    border-radius:8px;
    font-family:inherit;
    font-size:16px;
    background:white;
}

.campoQR textarea{
    resize:vertical;
    min-height:110px;
}

.campoQR input:focus,
.campoQR textarea:focus,
.campoQR select:focus{
    outline:none;
    border-color:#645c9f;
    box-shadow:0 0 0 3px rgba(100,92,159,.15);
}

.filaCampos{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.filaDireccion{
    grid-template-columns:2fr 1fr;
}

.ayudaFormulario{
    margin-top:-10px;
    font-size:14px;
    line-height:1.4;
    color:#666;
}

.ayudaCampo{
    display:inline;
    padding:0;
    margin-left:4px;
    border:none;
    background:transparent;
    color:#645c9f;
    font-size:16px;
    cursor:help;
    vertical-align:middle;
}

.ayudaCampo:hover{
    transform:none;
    opacity:.75;
}

.botonPresionado{
    background-color:#b3ceb5;
}

.etiquetaConAyuda{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.ayudaCampo{
    padding:0;
    border:none;
    background:none;
    font-size:1rem;
    cursor:pointer;
}

.textoAyudaCampo{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:20;

    width:min(290px, 80vw);
    padding:10px 12px;

    color:#333;
    background-color:#fff;
    border:1px solid #aaa;
    border-radius:8px;
    box-shadow:0 3px 10px rgba(0, 0, 0, 0.2);

    font-size:0.9rem;
    font-weight:normal;
    line-height:1.35;
}

.ayudaCampo.ayudaActiva + .textoAyudaCampo{
    display:block;
}

.checkboxQR{
    display:block;
    cursor:pointer;
}

.bloquePassword {
    padding: 14px;
    background-color: #e9e9e9;
    border-radius: 8px;
}
.bloquePassword .checkboxQR {
    margin-top: 12px;
}
.opcionRedOculta {
    margin-top: 12px;
}

/* ================================================== */
/* TABLET                                             */
/* ================================================== */
@media (max-width:900px){
    .contenedor{
        width:min(760px,100%);
    }
    .menuQR{
        grid-template-columns:repeat(3,1fr);
        gap:22px;
    }
    .menuQR button{
        /* Recuperamos el formato cuadrado grande */
        aspect-ratio:1 / 1;
        min-height:0;

        padding:18px;
        font-size:20px;
        gap:12px;
    }
    .menuQR button span{
        font-size:42px;
    }
    .contenidoQR{
        grid-template-columns:1fr;
    }
    .panelQR{
        margin-top:35px;
    }
    #formulario{
        min-height:0;
    }
}

/* ================================================== */
/* CELULAR                                            */
/* ================================================== */
@media (max-width:600px){
    .contenedor{
        width:100%;
    }
    .menuQR{
        /*
         * Dos columnas de tamaño controlado.
         * No ocupan todo el ancho disponible.
         */
        grid-template-columns:repeat(2, minmax(110px, 130px));
        justify-content:center;
        column-gap:12px;
        row-gap:12px;
        margin:5px auto 22px;
    }
    .menuQR button{
        aspect-ratio:1.35 / 1;
        min-height:0;
        width:100%;
        padding:8px;
        font-size:15px;
        gap:5px;
        border-radius:10px;
        box-shadow:2px 2px 7px rgba(0,0,0,.18);
    }
    .menuQR button span{
        font-size:28px;
    }
    #vistaMenu .btnInicio{
        width:220px;
    }
    .filaCampos,
    .filaDireccion{
        grid-template-columns:1fr;
    }
    .formularioQR{
        gap:16px;
    }
    #formulario{
        min-height:0;
    }
}