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

/* ================================================== */
/* PESTAÑAS                                           */
/* ================================================== */
.pestanasLqr{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:30px;
}
.pestanaLqr{
    background:#eeeeee;
    color:#333;
    font-weight:bold;
}
.pestanaLqr:hover{
    background:#e5e5e5;
}
.pestanaLqr.pestanaActiva{
    background:#645c9f;
    color:white;
}

/*
 * Pestañas temporalmente bloqueadas mientras
 * la cámara se está abriendo o apagando.
 */

/* Pestaña inactiva bloqueada */
.pestanaLqr:disabled{
    background:#e2e2e2;
    color:#999;
    cursor:not-allowed;
}

/* Pestaña activa bloqueada */
.pestanaLqr.pestanaActiva:disabled{
    background:#77738f;
    color:#eeeeee;
    cursor:not-allowed;
}

/* ================================================== */
/* PANELES DE LECTURA                                 */
/* ================================================== */
.panelLectura h2{
    text-align:center;
    color:#413889;
    margin-bottom:10px;
}
.descripcionLqr{
    text-align:center;
    line-height:1.4;
    color:#666;
    margin-bottom:25px;
}

/* ================================================== */
/* CARGA DE IMAGEN                                    */
/* ================================================== */
.zonaCarga{
    min-height:300px;

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

    gap:15px;

    padding:30px;

    border:2px dashed #aaa;
    border-radius:12px;

    background:#f8f8f8;

    text-align:center;

    transition:
        border-color .2s,
        background-color .2s;
}
.zonaCarga:hover{
    border-color:#645c9f;
    background:#f5f3fa;
}

/*
 * Esta clase podrá ser agregada por JavaScript
 * mientras el usuario arrastra una imagen
 * sobre la zona de carga.
 */
.zonaCargaArrastre{
    border-color:#645c9f;
    background:#eeeaf8;
}
.iconoCarga{
    font-size:50px;
}
.separadorCarga{
    color:#777;
}

/* ================================================== */
/* BOTONES                                            */
/* ================================================== */
.btnPrincipal{
    width:100%;
    background:#1976d2;
    color:white;
}
.btnPrincipal:hover{
    background:#1565c0;
}
.btnSecundario{
    width:100%;
    background:#eeeeee;
    color:#333;
}
.btnSecundario:hover{
    background:#e2e2e2;
}

/* ================================================== */
/* CÁMARA                                             */
/* ================================================== */
#lectorCamara{
    width:100%;
    margin-bottom:20px;

    overflow:hidden;

    border-radius:10px;
}
/*
 * La biblioteca html5-qrcode crea internamente
 * elementos de video e imagen.
 */
#lectorCamara video{
    width:100% !important;
    border-radius:10px;
}

/* ================================================== */
/* ESTADO DE LA LECTURA                               */
/* ================================================== */
.estadoLectura{
    margin-top:20px;

    padding:12px;

    border-radius:8px;

    background:#eeeeee;

    text-align:center;
}

/* ================================================== */
/* RESULTADO                                          */
/* ================================================== */
#vistaResultado h2{
    text-align:center;
    color:#413889;
    margin-bottom:25px;
}
#contenidoResultado{
    width:100%;

    padding:20px;

    margin-bottom:20px;

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

    background:#f8f8f8;

    line-height:1.5;

    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

/* ================================================== */
/* ACCIONES DEL RESULTADO                             */
/* ================================================== */
#accionesResultado{
    display:flex;
    flex-direction:column;
    gap:12px;

    margin-bottom:20px;
}
#accionesResultado button{
    width:100%;
}

/* ================================================== */
/* CONTENIDO ORIGINAL                                 */
/* ================================================== */
.contenidoOriginal{
    margin-bottom:20px;
}
#bloqueOriginal{
    margin-top:12px;
}
#textoOriginal{
    width:100%;
    min-height:130px;

    padding:12px;

    border:1px solid #bbb;
    border-radius:8px;

    resize:vertical;

    font-family:monospace;
    font-size:14px;
    line-height:1.4;

    background:#f8f8f8;
}

/* ================================================== */
/* BOTONES FINALES                                    */
/* ================================================== */
#btnLeerOtro{
    margin-bottom:0;
}
#vistaResultado .btnInicio{
    margin-top:12px;
}

/* ================================================== */
/* BOTONES DE LA VISTA DE LECTURA                     */
/* ================================================== */
#btnCargarQR,
#btnAbrirCamara,
#vistaLectura .btnInicio{
    display:block;
    width:260px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* ============================================================
   CONTENIDO ORIGINAL - AYUDA
   ============================================================ */
.controlOriginal{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.btnInfoOriginal{
    border:none;
    background:transparent;
    padding:2px;
    font-size:20px;
    line-height:1;
    color:#645c9f;
    cursor:pointer;
}

.ayudaOriginal{
    position:absolute;
    z-index:20;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    width:min(360px, 90vw);
    padding:14px 16px;
    background:white;
    border:1px solid #d4d4d4;
    border-radius:10px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.15);
    text-align:left;
    font-size:14px;
    line-height:1.45;
}

.ayudaOriginal p{
    margin:8px 0 0;
}

[hidden]{
    display:none !important;
}

/* ============================================================
   GUARDAR CONTACTO - AYUDA
   ============================================================ */
.grupoAccionContacto{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
}

.grupoAccionContacto .btnPrincipal{
    flex:1;
}

.btnInfoContacto{
    width:auto !important;
    flex:0 0 auto;
    border:none;
    background:transparent;
    padding:2px;
    font-size:20px;
    line-height:1;
    color:#645c9f;
    cursor:pointer;
}

.ayudaContacto{
    position:absolute;
    z-index:20;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    width:min(360px, 90vw);
    padding:14px 16px;
    background:white;
    border:1px solid #d4d4d4;
    border-radius:10px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.15);
    text-align:left;
    font-size:14px;
    line-height:1.45;
}

.ayudaContacto p{
    margin:8px 0 0;
}

/* En dispositivos que admiten hover,
   mostramos las ayudas al pasar el cursor
   sobre los iconos de información. */
@media (hover: hover) {
    .controlOriginal:has(
        .btnInfoOriginal:hover
    ) .ayudaOriginal {
        display:block !important;
    }
    .grupoAccionContacto:has(
        .btnInfoContacto:hover
    ) .ayudaContacto {
        display:block !important;
    }
}

.advertenciaWifi{
    margin-top:14px;
    padding:10px 12px;
    border-radius:8px;
    background:#f4f2fa;
    font-size:14px;
    line-height:1.4;
}

/* ================================================== */
/* TABLET                                             */
/* ================================================== */
@media (max-width:900px){
    .contenedor{
        width:min(650px,100%);
    }
}

/* ================================================== */
/* CELULAR                                            */
/* ================================================== */
@media (max-width:600px){
    .contenedor{
        width:100%;
    }
    .zonaCarga{
        min-height:250px;
        padding:20px 15px;
    }
    .iconoCarga{
        font-size:42px;
    }
    #btnCargarQR,
    #btnAbrirCamara,
    #vistaLectura .btnInicio{
        width:100%;
    }
}