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

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

.menuLink 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;
}

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

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

.menuLink 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;
}

.panelLink .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.*/
}

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

#formulario{
    min-height:520px;
}

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

#enlaceConstruido{
    width:100%;
    min-height:140px;
    padding:16px;

    border:1px solid #d0d0d0;
    border-radius:10px;
    background:#fafafa;

    font-family:Consolas, "Courier New", monospace;
    line-height:1.45;
    color:#333;

    resize:none;
    overflow-y:auto;
    overflow-wrap:anywhere;
    word-break:break-word;

    box-sizing:border-box;
}

#estadoLink{
    width:100%;
}

#btnCopiarLink,
#btnAbrirLink,
#btnLimpiar{
    width:100%;
}

#btnMenu{
    margin-bottom:30px;
}

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

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

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

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

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

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

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

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

.campoLink input:focus,
.campoLink textarea:focus,
.campoLink 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;
}

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

.bloquePassword {
    padding: 14px;
    background-color: #e9e9e9;
    border-radius: 8px;
}
.bloquePassword .checkboxLink {
    margin-top: 12px;
}
.opcionRedOculta {
    margin-top: 12px;
}
#tituloEnlace{
    width:100%;
    margin-bottom:0px;

    font-size:18px;
    font-weight:bold;
    color:#413889;
}

.enlaceGrande {
    font-size:18px;
}
.enlaceMediano {
    font-size:14px;
}
.enlacePequeno {
    font-size:12px;
}
.enlaceMuyPequeno {
    font-size:10px;
}

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

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

/* ================================================== */
/* CELULAR                                            */
/* ================================================== */
@media (max-width:600px){
    .contenedor{
        width:100%;
    }
    .menuLink{
        /*
         * 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;
    }
    .menuLink 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);
    }
    .menuLink button span{
        font-size:28px;
    }
    #vistaMenu .btnInicio{
        width:220px;
    }
    .filaCampos,
    .filaDireccion{
        grid-template-columns:1fr;
    }
    .formularioLink{
        gap:16px;
    }
    #formulario{
        min-height:0;
    }
    #enlaceConstruido{
        min-height:110px;
        font-size:15px;
    }
}