/*
 * Afinado para pantallas pequeñas.
 *
 * Medido el 04/09/2026 en la landing de informe de dominio, ventana de 390x844:
 *
 *   cabecera            141 px, el 17 % de la pantalla
 *   formulario empieza  470 px
 *   boton de enviar   1.232 px   <- el fold esta en 844
 *   h1 24 px, h2 28,8 px         <- el subtitulo mas grande que el titulo
 *   imagen del informe  392 px, debajo del formulario
 *
 * Parte del marcado lo genera el bundle compilado y no se puede tocar en su
 * sitio, asi que se corrige desde aqui. Todo va dentro de media queries: en
 * escritorio no cambia nada.
 */

/* El logo. Tenia un style="width:340px" en linea, que en un movil de 390px
   ocupaba casi todo el ancho y estiraba la cabecera hasta 141px. */
.logo-svg { width: 340px; max-width: 100%; }

/* El lema junto al logo. Estaba escrito en un style= en linea, con un
   margin-top de -27px que lo subia sobre el hueco del logotipo. Ese ajuste
   esta calculado para un logo de 340px: en cuanto el logo encoge, el texto se
   le monta encima. */
.logo-lema {
    color: #176aac;
    font-weight: 600;
    font-size: 16px;
    margin-left: 66px;
    margin-top: -27px;
}

@media (max-width: 767.98px) {

    /* --- Cabecera ------------------------------------------------------- */

    .logo-svg { width: 170px; }

    /* Fuera el lema. Con el logo encogido se montaba sobre el logotipo, y ademas
       repite lo que ya dice el h1 justo debajo. Al quitarlo, la marca deja de
       ocupar todo el ancho y el boton de menu sube a la misma fila. */
    .logo-lema { display: none; }

    .navbar { padding-top: .4rem; padding-bottom: .4rem; }
    .navbar-brand { padding-top: 0; padding-bottom: 0; margin-right: 0; }

    /* --- Jerarquia de titulos -------------------------------------------
       El h2 salia a 28,8px y el h1 a 24: el subtitulo pesaba mas que el
       titulo. Ademas dos tamanos grandes seguidos comen media pantalla. */

    /* El h1 de las landings lleva un style="font-size:1.5rem" EN LINEA, que gana
       a cualquier hoja: quedan 24px y no hay nada que hacer desde aqui. Da un
       tamano razonable, asi que solo se corrige el h2, que salia a 28,8px --mas
       grande que el titulo-- y ademas comia media pantalla. */
    .title-landing { font-size: 1.4rem; line-height: 1.25; }
    h2, .jumbotron-heading, .page-title { font-size: 1.15rem; line-height: 1.3; }

    /* --- La tarjeta "Ejemplo de Informe de Dominio" -----------------------
       392px de alto para una foto decorativa que ademas queda por debajo del
       boton de enviar: en movil no la ve nadie util.

       Se oculta la TARJETA ENTERA y no solo la imagen. Ocultando solo la
       imagen quedaba una caja blanca vacia de 162px con su cabecera negra
       encima, que es peor que la foto. */

    #app .card.shadow { display: none; }

    /* --- El formulario ---------------------------------------------------
       Cinco campos a 95px cada uno. El alto de los inputs NO se toca: 40px es
       el minimo comodo para tocar con el dedo. Lo que se recorta es el aire
       entre campos y el de las etiquetas. */

    #app .el-form-item { margin-bottom: 12px; }
    #app .el-form-item__label { padding-bottom: 2px; line-height: 1.3; font-size: .9rem; }

    /*
     * 16px en los campos, y esto no es estetica: iOS Safari hace ZOOM a toda la
     * pagina cuando se toca un campo con la letra por debajo de 16px, y despues
     * el usuario se queda con la pagina ampliada y desplazada. Venian a 14px.
     *
     * Es la causa mas comun de que un formulario "no se sienta movil" aunque
     * todo lo demas este bien.
     */
    #app .el-input__inner,
    #app .el-textarea__inner { font-size: 16px; }

    /* --- El texto de entrada ---------------------------------------------
       Los tres parrafos entre el titulo y el formulario ocupaban 165px. */

    #app .container > .text-center { margin-bottom: .4rem !important; }

    /* --- El formulario dentro de las paginas de ayuda ---------------------
       Alli el componente vive dentro de una tarjeta, y su `.row.pl-4.pr-4`
       arrastra los -15px de Bootstrap mas 24px de padding. El formulario se
       quedaba en 265px de 390 (68%), contra 313 (80%) en la landing. Se
       neutralizan los dos, igual que se hace en parches.css para el
       contenedor de la landing. */

    .card-body .row.pl-4.pr-4 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* --- La linea de terminos --------------------------------------------
       Heredaba line-height: 40px con letra de 14px, asi que cada linea ocupaba
       casi el triple de lo necesario y las dos de abajo se solapaban con la de
       arriba: se leia como texto pisado. */

    #app .terms-text,
    #app .terms-text a { line-height: 1.45; }
    #app .checkbox label { line-height: 1.45; }
}

/* -------------------------------------------------------------------------
   Preguntas frecuentes: altura fija que no cabe
   -------------------------------------------------------------------------
   Element UI le da a la cabecera del desplegable `height: 48px` y
   `line-height: 48px`. Una pregunta que ocupa dos lineas necesita 72px, asi
   que se sale de su caja y se mete en la pregunta siguiente. Se veia como si
   dos preguntas distintas fueran una sola.

   Va sin media query porque el fallo no es del movil, solo se nota antes:
   basta una pregunta larga para que pase en cualquier ancho. Con altura
   automatica y un minimo, cuando el texto cabe en una linea el resultado es
   identico al de antes.
   ------------------------------------------------------------------------- */
/* La clase se repite a proposito. Element UI inyecta su CSS desde JavaScript
   al arrancar Vue, o sea DESPUES de esta hoja, asi que con la misma
   especificidad gana siempre el suyo. Repetir la clase sube la especificidad a
   0,2,0 sin depender de la estructura del DOM ni recurrir a !important. */
.el-collapse-item__header.el-collapse-item__header {
    height: auto;
    min-height: 48px;
    line-height: 1.4;
    padding-top: 12px;
    padding-bottom: 12px;
}