/*
 * Parches sobre el bundle compilado.
 *
 * `public/js/app.js` no se puede recompilar --faltan piezas en
 * bower_components-- así que el marcado que genera Vue no se puede tocar. Lo
 * que sale mal de ahí hay que corregirlo desde fuera, con CSS.
 *
 * Cada regla dice qué arregla y por qué no se puede arreglar en su sitio.
 */

/*
 * Scroll horizontal de 11 px en móvil, en todas las landings.
 *
 * El componente del formulario se envuelve en un `.row.pl-4.pr-4`, y Bootstrap
 * le da a `.row` márgenes de -15px contando con que el contenedor tenga 15px de
 * padding para compensarlos. El contenedor de la landing lleva `p-1`, que son
 * 4px, y `px-md-4` sólo actúa de tablet hacia arriba. En móvil quedan -15 + 4 =
 * -11px que se salen por cada lado.
 *
 * Se anulan los márgenes negativos y se reduce el padding lateral, para que el
 * formulario no pierda anchura al meterlo dentro: medido a 375px de ancho útil,
 * pasa de 319px desbordando a 313px sin desbordar.
 *
 * El !important es obligatorio: las utilidades de espaciado de Bootstrap
 * (`pl-4`, `pr-4`) ya lo llevan, y sin él no se pueden sobrescribir.
 */
@media (max-width: 767.98px) {
    .container.p-1 > .row.pl-4.pr-4 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* -------------------------------------------------------------------------
   El aviso del sitio
   -------------------------------------------------------------------------
   Antes esto era un modal: `simplemodal.js` mas una hoja de estilos cargada
   desde cssscript.com, una web de demos ajena. Los dos estaban rotos.

   El CSS devolvia 403 a todo el mundo --ese sitio bloquea el enlace directo--
   asi que el modal no tenia estilos, y el script llamaba a
   `document.querySelector('#message').innerHTML` nada mas cargar. Ese elemento
   solo existe cuando hay un aviso publicado, y como no hay ninguno, reventaba
   con un TypeError en cada pagina.

   Al quitar los dos, el aviso --si alguien lo publica desde el admin-- se
   queda como un bloque suelto sin formato en medio de la pagina. Estos estilos
   lo convierten en una banda decente. Deja de ser un modal, que para un aviso
   del sitio es mejor: no tapa nada ni hay que cerrarlo.
   ------------------------------------------------------------------------- */
.sp-source {
    background: #eaf3f6;
    border-bottom: 1px solid #cfe0e7;
    color: #35505c;
}

.sp-source .p-5 {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 20px !important;
    font-size: .95rem;
    line-height: 1.5;
}