/*
 * Estilos de las páginas reconstruidas con bloques nativos.
 *
 * Va en un archivo aparte, y NO en el style.css del child theme, porque Divi
 * le sobrescribe la versión a ese archivo con la suya vía
 * et_core_replace_enqueued_style() (Divi/functions.php:416). Con la versión
 * congelada en la de Divi, los cambios no llegarían a quien ya tenga el CSS
 * en caché. Este se encola con filemtime(), así que se refresca solo.
 *
 * Se carga desde UveitisNetwork_enqueue_bloques() en functions.php.
 */

/* Onda superior: reproduce el divisor "wave" de Divi, relleno #003260.
   El SVG es exactamente el mismo que emitía Divi, y las alturas responsivas
   respetan las suyas: 100px en escritorio, 50px en tablet, 25px en teléfono. */
.uveitis-onda-superior {
	position: relative;
	overflow: hidden;
}

.uveitis-onda-superior::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	z-index: 2;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwMDMyNjAiPjxwYXRoIGQ9Ik0zMjAgMjhDMTYwIDI4IDgwIDQ5IDAgNzBWMGgxMjgwdjcwYy04MCAyMS0xNjAgNDItMzIwIDQyLTMyMCAwLTMyMC04NC02NDAtODR6Ii8+PC9nPjwvc3ZnPg==");
	background-size: 100% 100px;
	background-repeat: no-repeat;
	pointer-events: none;
}

@media (max-width: 980px) {
	.uveitis-onda-superior::before {
		height: 50px;
		background-size: 100% 50px;
	}
}

@media (max-width: 767px) {
	.uveitis-onda-superior::before {
		height: 25px;
		background-size: 100% 25px;
	}
}

/* Sombra del título sobre una imagen de fondo. Mismo valor que el preset2 de Divi. */
.uveitis-titulo-sombra {
	text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
}

/* Listados de entradas (core/query): tarjetas parejas.
   Sin esto, los extractos rinden distinto número de líneas aunque tengan las
   mismas palabras —el español médico tiene palabras muy largas—, y los enlaces
   de "leer más" quedan a alturas distintas dentro de la misma fila.
   Se recorta el extracto a 5 líneas exactas y se ancla el "leer más" abajo, así
   los enlaces se alinean aunque los títulos ocupen una o dos líneas. */
.uveitis-listado .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}

.uveitis-listado .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.uveitis-listado .wp-block-post-excerpt__excerpt {
	line-height: 1.7;
	/* Altura fija de 5 líneas exactas. Se usa height y no el recorte por
	   líneas de WebKit (-webkit-line-clamp) porque este párrafo es hijo de
	   un contenedor flex, y el navegador bloquifica el display de los
	   elementos flex: convierte -webkit-box en flow-root, incluso con
	   !important, y el recorte deja de aplicarse. Al ser múltiplo exacto
	   del interlineado, el corte cae siempre en el borde de una línea. */
	height: calc(5 * 1.7em);
	padding-bottom: 0;
	margin-bottom: 8px;
	overflow: hidden;
}

.uveitis-listado .wp-block-post-excerpt__more-text {
	margin-top: auto;
	margin-bottom: 0;
}

/* Buscador (core/search). Conserva el azul del boton que tenia el modulo
   et_pb_search de Divi: fondo #003260 y texto blanco. */
.uveitis-buscador .wp-block-search__button {
	background-color: #003260;
	color: #fff;
	border: 0;
	padding: 10px 18px;
	cursor: pointer;
}

.uveitis-buscador .wp-block-search__button:hover,
.uveitis-buscador .wp-block-search__button:focus-visible {
	background-color: #013f78;
}

.uveitis-buscador .wp-block-search__input {
	border: 1px solid #d0d0d0;
	padding: 10px 12px;
}


/* Publicaciones de /investigacion/: cada una es una caja que se abre al pulsar
   su título, como hacía el módulo et_pb_toggle de Divi. El título vive dentro
   del <summary>, que es lo que lo hace clicable en toda su superficie. */
.uveitis-resumen {
	border: 1px solid #d9dfe8;
	border-radius: 4px;
	background: #fff;
	margin: 0 0 10px;
}

.uveitis-resumen > summary {
	cursor: pointer;
	padding: 15px 46px 15px 18px;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	color: #022f7c;
	position: relative;
	/* se oculta el triángulo por defecto y se dibuja una flecha propia */
	list-style: none;
}

.uveitis-resumen > summary::-webkit-details-marker {
	display: none;
}

.uveitis-resumen > summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid #022f7c;
	border-bottom: 2px solid #022f7c;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.15s ease;
}

.uveitis-resumen[open] > summary::after {
	transform: translateY(-20%) rotate(-135deg);
}

.uveitis-resumen > summary:hover {
	background: #f4f7fb;
}

.uveitis-resumen > summary:focus-visible {
	outline: 2px solid #022f7c;
	outline-offset: -2px;
}

.uveitis-resumen[open] > summary {
	border-bottom: 1px solid #e8ecf2;
}

/* Los párrafos del resumen van dentro de la caja, con su propio margen. */
.uveitis-resumen > p {
	margin: 14px 18px;
	font-size: 15px;
	line-height: 1.7;
}

/* ---------- /especialistas-uveitis-chile/ ("Sobre nosotros") ---------- */

/* Foto de cabecera: esquina izquierda muy redondeada y franja azul, como en
   el original de Divi (border-radius 24vw y borde izquierdo de 2vw). */
.uveitis-hero-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24vw 0 0 24vw;
	border-left: 2vw solid #003260;
}

/* Ficha de cada especialista: la foto se apoya sobre la caja, así que solo
   redondea sus esquinas superiores y no lleva margen inferior. */
.uveitis-foto {
	margin: 0;
}

.uveitis-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 25px 25px 0 0;
	/* Los originales no miden lo mismo (5 en 300x324 y el de Morales en
	   370x393), y esa diferencia de proporcion bastaba para que las cajas
	   de abajo no quedaran alineadas entre columnas. Se fuerza la
	   proporcion mayoritaria y se recorta al centro. */
	aspect-ratio: 300 / 324;
	object-fit: cover;
	object-position: center;
	/* La foto y la ficha forman una sola tarjeta: la foto pone el marco
	   superior y los laterales, la ficha los laterales y el inferior. */
	border: 1px solid #7d8b9b;
	border-bottom: 0;
}

.uveitis-ficha {
	border: 1px solid #7d8b9b;
	border-top: 0;
	background: #f4f4f4;
	border-radius: 0 0 4px 4px;
	margin: 0 0 26px;
}

.uveitis-ficha > summary {
	cursor: pointer;
	padding: 16px 40px 16px 20px;
	font-size: 16px;
	font-weight: 500;
	color: #666;
	position: relative;
	list-style: none;
}

.uveitis-ficha > summary::-webkit-details-marker {
	display: none;
}

.uveitis-ficha > summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.15s ease;
}

.uveitis-ficha[open] > summary::after {
	transform: translateY(-20%) rotate(-135deg);
}

.uveitis-ficha > summary:hover {
	background: #ededed;
}

.uveitis-ficha > summary:focus-visible {
	outline: 2px solid #003260;
	outline-offset: -2px;
}

.uveitis-ficha > .uveitis-curriculo {
	margin: 12px 20px 16px;
	padding-left: 16px;
	/* La viñeta pedida es el punto medio (·), que no existe como
	   list-style. Se dibuja con ::before para que funcione en todos
	   los navegadores, incluidos los Safari antiguos. */
	list-style: none;
}

.uveitis-ficha > .uveitis-curriculo li {
	font-size: 15px;
	line-height: 1.45;
	margin: 0 0 6px;
	position: relative;
}

.uveitis-ficha > .uveitis-curriculo li::before {
	content: "·";
	position: absolute;
	left: -14px;
	top: -0.05em;
	font-size: 20px;
	line-height: 1.25;
	color: #666;
}

.uveitis-ficha > .uveitis-curriculo li:last-child {
	margin-bottom: 0;
}

/* Botones: contorno azul sobre fondo transparente, como el estilo por
   defecto de Divi en esta página. */
.uveitis-botones .wp-block-button__link {
	background: transparent;
	color: #003260;
	border: 2px solid #003260;
	border-radius: 3px;
	padding: 6px 20px;
	font-size: 20px;
	font-weight: 500;
}

.uveitis-botones .wp-block-button__link:hover,
.uveitis-botones .wp-block-button__link:focus-visible {
	background: #003260;
	color: #fff;
}

.uveitis-separador {
	border: 0;
	border-top: 1px solid #d5dde4;
	margin: 8px 0 28px;
}


/* ---------- Página de error 404 ---------- */
/* La dibuja 404.php del child theme, ya sin el Theme Builder de Divi.
   El azul del fondo va dentro de Error-404a.png, así que el color de más abajo
   tiene que coincidir con el de la imagen: si se recolorea una, cambiar la otra. */

body.uveitis-404 {
	margin: 0;
	background: #bbd4ea;
	font-family: "Open Sans", Arial, sans-serif;
	color: #4f4f4f;
}

.uveitis-404__lienzo {
	min-height: 100vh;
	box-sizing: border-box;
	padding: 48px 24px 64px;
	background-color: #bbd4ea;
	background-image: url("/wp-content/uploads/2020/04/Error-404a.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: cover;
}

/* La columna de texto ocupa la mitad izquierda, que es donde la ilustración
   deja sitio libre. En pantallas estrechas pasa a ocupar todo el ancho. */
.uveitis-404__columna {
	max-width: 520px;
	margin: 0 0 0 8%;
	text-align: center;
}

.uveitis-404__logo {
	display: inline-block;
	margin-bottom: 26px;
}

.uveitis-404__logo img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
}

.uveitis-404__titulo {
	font-size: 26px;
	font-weight: 700;
	font-variant: small-caps;
	line-height: 1.3;
	color: #4f4f4f;
	margin: 0 0 6px;
}

.uveitis-404__codigo {
	font-size: 21px;
	font-variant: small-caps;
	color: #666;
	margin: 0 0 18px;
}

.uveitis-404__texto {
	font-size: 16px;
	font-variant: small-caps;
	line-height: 1.6;
	color: #000;
	margin: 0 0 24px;
}

.uveitis-404__buscador {
	display: flex;
	max-width: 70%;
	margin: 0 auto 26px;
}

.uveitis-404__buscador input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #000;
	border-right: 0;
	font-size: 16px;
	background: #fff;
}

.uveitis-404__buscador button {
	padding: 11px 20px;
	border: 0;
	background: #00487c;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.uveitis-404__buscador button:hover,
.uveitis-404__buscador button:focus-visible {
	background: #003260;
}

.uveitis-404__volver {
	font-size: 18px;
	font-variant: small-caps;
	margin: 0;
}

.uveitis-404__volver a {
	color: #000;
	text-decoration: none;
}

.uveitis-404__volver a:hover,
.uveitis-404__volver a:focus-visible {
	text-decoration: underline;
}

/* En móvil la ilustración estorbaría detrás del texto: se quita y queda el
   azul liso, que es lo que hacía también la versión de Divi. */
@media (max-width: 980px) {
	.uveitis-404__lienzo {
		background-image: none;
		padding: 40px 20px 48px;
	}

	.uveitis-404__columna {
		margin: 0 auto;
	}

	.uveitis-404__buscador {
		max-width: 100%;
	}
}

/* ---------- /residentes-fellows/ ---------- */

/* Varios textos del sitio usan versalitas, que Divi ponía desde sus opciones de
   tipografía y los bloques del núcleo no ofrecen como ajuste. */
.uveitis-versalitas {
	font-variant: small-caps;
}

/* Barra de usuario (Cuenta / Salir), con el azul del módulo de menú original. */
.uveitis-barra-usuario p {
	margin: 0;
}

.uveitis-barra-usuario a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.uveitis-barra-usuario a:hover,
.uveitis-barra-usuario a:focus-visible {
	text-decoration: underline;
}

/* Los botones saltan a cada bloque de archivos. Se deja hueco por encima del
   destino para que el título no quede pegado al borde superior al saltar. */
#obligatorio,
#complementarios,
#seminarios {
	scroll-margin-top: 90px;
}

/* Formulario de acceso: se le da forma de tarjeta para que se despegue del
   degradado, en vez de flotar suelto sobre él. Solo estilos: el marcado lo
   sigue generando Ultimate Member, así que no se toca nada funcional. */
.uveitis-acceso .um {
	background: #fff;
	border-radius: 10px;
	/* 23px de relleno lateral y no 28: asi el ancho interior queda en 304px,
	   que es exactamente lo que mide el iframe del reCAPTCHA. Con 28 los campos
	   quedaban en 294 y el captcha sobresalia 10px. */
	padding: 30px 23px 24px;
	box-shadow: 0 12px 32px rgba(0, 26, 51, 0.25);
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.uveitis-acceso .um .um-field {
	margin-bottom: 18px;
}

.uveitis-acceso .um .um-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #02315c;
	margin-bottom: 7px;
}

.uveitis-acceso .um .um-form input[type="text"],
.uveitis-acceso .um .um-form input[type="password"] {
	/* !important porque Ultimate Member fija 40px con esa misma prioridad */
	height: 46px !important;
	border: 1px solid #c8d2dd !important;
	border-radius: 6px;
	font-size: 15px;
	padding: 0 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.uveitis-acceso .um .um-form input[type="text"]:focus,
.uveitis-acceso .um .um-form input[type="password"]:focus {
	border-color: #02315c !important;
	box-shadow: 0 0 0 3px rgba(2, 49, 92, 0.16);
	outline: none;
}

/* El botón pasa a ocupar todo el ancho de la tarjeta: antes medía 250px
   contra 350px de los campos y quedaba descolgado. */
.uveitis-acceso .um .um-form input[type="submit"],
.uveitis-acceso .um .um-form .um-button {
	width: 100% !important;
	height: 48px;
	border-radius: 6px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	transition: background-color 0.15s ease;
}

.uveitis-acceso .um .um-form input[type="submit"]:hover,
.uveitis-acceso .um .um-form .um-button:hover {
	background-color: #013f78 !important;
}

.uveitis-acceso .um a {
	color: #02315c;
	font-size: 14px;
}

.uveitis-acceso .um a:hover,
.uveitis-acceso .um a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 980px) {
	.uveitis-acceso .um {
		/* mismo criterio que en escritorio: 15px de lado dejan 305px interiores,
		   para que el captcha de 304px no sobresalga de los campos */
		padding: 24px 15px 20px;
	}
}

/* El contenedor del reCAPTCHA trae 2,5px de margen lateral, que lo dejaba
   descuadrado respecto a los campos. El iframe de Google mide 304px fijos y no
   se puede estirar sin escalarlo —lo que lo emborrona—, pero quitando ese
   margen queda alineado con los campos, que miden 305px. */
.uveitis-acceso .um .g-recaptcha {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* La columna izquierda comparte el lenguaje visual de la tarjeta del
   formulario: mismas esquinas redondeadas y la misma sombra, para que la foto
   no quede como un recorte pegado al lado de una tarjeta con relieve. */
.uveitis-acceso .wp-block-image {
	margin: 0 0 18px;
}

.uveitis-acceso .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 26, 51, 0.25);
}

/* La nota, con el mismo aire que el formulario. */
.uveitis-acceso .wp-block-column p {
	line-height: 1.75;
}