/**
 * Página /prematricula: la misma tipografía que /curso-por-encuentro.
 *
 * POR QUÉ ESTE FICHERO NO ESTÁ EN scss/
 * -------------------------------------
 * El resto del tema se escribe en scss/ y se compila a css/styles.css, pero el
 * repositorio no trae con qué compilarlo: no hay package.json ni gulpfile, y
 * el styles.css versionado no coincide con lo que produce hoy un `sass` pelado
 * (73 reglas de diferencia: agrupaciones de selectores y comillas de los
 * selectores de atributo). Recompilarlo para colar tres reglas habría
 * reescrito el fichero entero con cambios que nadie ha revisado.
 *
 * Así que estas van aparte, en un fichero que no se genera. Si algún día se
 * recupera la compilación, muévelas a scss/_prematricula.scss y borra esto.
 *
 * Se carga en la librería global del tema (admision.libraries.yml -> inicio).
 */

/* --- El título ---------------------------------------------------------
 *
 * Mismos valores que .pagina-basica-posgrado .pagina-basica-titulo, que es lo
 * que usan Curso por encuentro y las demás páginas básicas: 44px, grosor 500,
 * versalitas y sin la regla inferior. El título de esta página venía de otra
 * época —40px en negrita y subrayado— y era lo único que delataba que no
 * pertenecía al mismo conjunto.
 */
.node-2267 .page-title {
  margin-bottom: 0;
  padding-bottom: 24px;
  border-bottom: 0;
  color: #202a62;
  font-size: 44px;
  font-weight: 500;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  .node-2267 .page-title {
    padding-bottom: 16px;
    font-size: 28px;
  }
}

/* --- Ancho de lectura --------------------------------------------------
 *
 * Nada de texto corrido pasa de 650px. Una línea de más de unos 75 caracteres
 * obliga al ojo a saltar tan lejos al final de cada renglón que pierde el
 * principio del siguiente.
 *
 * El ancho lo fija ESTA regla, no la rejilla. Antes lo decidían las columnas
 * —col-md-9 col-lg-7 col-xl-6 col-xxl-5— y el resultado no era 650px en
 * ningún tamaño: a partir de 1400px la columna medía 550, o sea más estrecho
 * de la cuenta, y entre 768 y 1200 se pasaba de largo. Un ancho de lectura es
 * una medida en píxeles, no una fracción de la pantalla; expresarlo con
 * fracciones obliga a acertar cinco veces y falla en las cinco.
 *
 * Las tres plantillas afectadas (el nodo, la vista del buscador y el bloque
 * del pie) llevan ahora col-12 y esta clase.
 */
.prematricula-columna {
  max-width: 650px;
}

/* --- El rótulo de sección ----------------------------------------------
 *
 * El tema define .pagina-basica-subtitulo, pero acotado dentro de
 * .pagina-basica-posgrado, que es el envoltorio de las páginas básicas. Aquí
 * el rótulo lo pinta el bloque de título de página, que vive fuera de ese
 * envoltorio, así que hay que repetir los valores. Son los mismos de
 * scss/_nodes.scss.
 */
.node-2267 .pagina-basica-subtitulo {
  padding-bottom: 8px;
  color: #19161a;
  font-size: 18px;
  font-weight: 500;
}

/* --- La forma azul del lateral -----------------------------------------
 *
 * El tema ya la trae montada (main::after con images/forma-der.png, en
 * scss/_formas.scss), pero nace oculta y se enciende página por página, cada
 * una con la altura que le va bien. Faltaban las nuestras, que hasta ahora
 * salían sin ella y por eso se veían más desnudas que /prematricula.
 *
 * Se enciende solo desde tableta: en un móvil se comería el ancho útil.
 */
@media (min-width: 768px) {
  .path-prematricula main:after {
    display: inline-block;
    top: 50%;
  }
}

/* --- Aire bajo la imagen de bienvenida ---------------------------------
 *
 * El tema le da 120px (scss/_prematricula.scss). Aquí baja a 85px, que es lo
 * que pide el nuevo orden: entre el banner y las pestañas ya no hay que
 * separar dos bloques sueltos, sino encadenar tres piezas seguidas.
 *
 * Va acotado a .node-2267 aunque hoy ese bloque solo salga en esa página: si
 * mañana se coloca en otra —una convocatoria distinta, por ejemplo— seguirá
 * con su separación original y nadie se preguntará por qué se movió.
 */
.node-2267 .block-prematricula-encabezadp {
  margin-bottom: 85px;
}

/* --- El buscador por carné --------------------------------------------- */

/* El tema le deja 120px por debajo. Con el bloque del pie justo detrás sobra
   la mitad: eran dos pantallazos de vacío entre el buscador y la única frase
   que viene después. */
.node-2267 .view-_-fprematricula {
  margin-bottom: 30px;
}

/* El campo, del mismo ancho que los de /prematricula/recuperar. Con
   .form-control ocupaba todo lo que le dejara la fila: un hueco de 500px para
   escribir once cifras, que además hacía que el botón de al lado pareciera
   pequeño en comparación. */
.node-2267 .views-exposed-form .form-item input[type="text"] {
  max-width: 360px;
  /* .form-control añade 6px de relleno arriba y abajo POR ENCIMA de la altura
     de línea de 40px que ya le da el tema: el campo acababa midiendo 54px,
     doce más que los de /prematricula/recuperar. Sin ese relleno, los dos
     miden 42 y se ven iguales. */
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 575.98px) {
  .node-2267 .views-exposed-form .form-item input[type="text"] {
    max-width: 100%;
  }
}

/* El botón, con el azul de la universidad y no con el azul de Bootstrap.
   Venía con .btn-primary de serie, que es el celeste genérico del framework y
   no aparece en ninguna otra parte del sitio: junto al resto de botones de
   prematrícula cantaba. Los mismos valores que .prematricula-finalizar. */
.node-2267 .views-exposed-form input[type="submit"] {
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: #202a62;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  /* 40px + los 2px de borde = los mismos 42px del campo de al lado. */
  line-height: 40px;
}

.node-2267 .views-exposed-form input[type="submit"]:hover,
.node-2267 .views-exposed-form input[type="submit"]:focus {
  background-color: #202a62;
  opacity: 0.9;
}

/* --- El aviso del plazo ------------------------------------------------
 *
 * Lo pinta el bloque "Plazo del proceso de prematrícula". Su estilo estaba
 * solo en la hoja del módulo, que se carga en el formulario y en el resumen
 * pero no en esta portada: aquí la frase salía como texto plano, sin color ni
 * separación, y no se distinguía del párrafo siguiente.
 */
.prematricula-plazo {
  margin-bottom: 2rem;
  color: #202a62;
  font-size: 15px;
  font-weight: 700;
}

/* --- El aviso de recuperar el documento --------------------------------
 *
 * Es el bloque del final de /prematricula. Era el último párrafo de la página
 * y nadie lo veía: los estudiantes llegaban abajo, no leían, y escribían
 * preguntando cómo recuperar su PDF.
 *
 * Lo que lo hace visible no es el color, es la ruptura: el resto de la página
 * es texto corrido sobre blanco, y esto es un recuadro con icono y botón. Se
 * distingue antes de leerlo, que es justo el problema que había.
 *
 * Los estilos anteriores del bloque están en styles.css (compilado desde
 * scss/_prematricula.scss) y solo fijaban el color y el tamaño del párrafo.
 * Estas reglas van después en el orden de carga, así que ganan sin tener que
 * tocar el fichero compilado. Ver la cabecera de este fichero.
 */
.block-prematriculainfo-footer .pm-aviso {
  display: flex;
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid #d7ddec;
  /* El azul institucional solo en el canto izquierdo: marca el bloque sin
     encerrarlo en una caja de color. */
  border-left: 5px solid #202a62;
  border-radius: 6px;
  background: #f4f6fb;
}

.block-prematriculainfo-footer .pm-aviso-icono {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #202a62;
  line-height: 0;
}

.block-prematriculainfo-footer .pm-aviso-cuerpo {
  min-width: 0;
}

.block-prematriculainfo-footer .pm-aviso-titulo {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  color: #202a62;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

/* Se repite el selector del párrafo porque styles.css ya fija color y tamaño
   para .block-prematriculainfo-footer p y hay que ganarle sin !important. */
.block-prematriculainfo-footer .pm-aviso .pm-aviso-texto {
  margin: 0;
  color: #3b3b3b;
  font-size: 15.5px;
  line-height: 1.55;
}

.block-prematriculainfo-footer .pm-aviso-boton,
.block-prematriculainfo-footer .pm-aviso .pm-aviso-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  background: #202a62;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.block-prematriculainfo-footer .pm-aviso-boton:hover,
.block-prematriculainfo-footer .pm-aviso-boton:focus {
  background: #161d47;
  color: #fff;
  text-decoration: none;
}

.block-prematriculainfo-footer .pm-aviso-flecha {
  /* La flecha se mueve al pasar por encima. Es lo que distingue un botón
     pulsable de un recuadro decorativo. */
  transition: transform 0.15s ease;
}

.block-prematriculainfo-footer .pm-aviso-boton:hover .pm-aviso-flecha {
  transform: translateX(3px);
}

@media (max-width: 575.98px) {
  .block-prematriculainfo-footer .pm-aviso {
    /* En pantalla estrecha el icono al lado se come el ancho del texto. */
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }

  .block-prematriculainfo-footer .pm-aviso-boton {
    /* Botón a todo el ancho: en el móvil es el objetivo del dedo. */
    justify-content: center;
    width: 100%;
  }
}