/* ==========================================================================
   Lo que el tema dibuja por su cuenta — fase 2 de la salida de Divi
   --------------------------------------------------------------------------
   Cabecera, pie, listados (busqueda y archivos) y entradas sueltas. O sea, el
   marco del sitio: lo que no sale de los bloques de una pagina, que vive en
   bloques.css.

   Esta hoja tiene que bastarse sola el dia que Divi no exista. Nada de lo que
   hay aqui depende de su CSS ni de su fuente de iconos.

   Los valores no son inventados: se midieron sobre el sitio en produccion el
   2026-08-29, con la cabecera de Divi puesta, para que el cambio no se note.

       cabecera            104 px de alto, #003260, fija arriba
       al bajar             54 px (Divi lo hacia con .et-fixed-header)
       logo                 244x73 px arriba, 38 de alto al encoger
       menu                 Montserrat 14 px, peso 600, blanco
       activo               #2EA3F2
       submenu              fondo #003260, borde superior de 3 px, 300 px
       pie                  #222222, franja inferior con negro al 32 %
       texto del pie        #666666 a 14 px

   Casi todo lleva nombre propio (uveitis-*) en vez de reaprovechar los de Divi.
   Ver el porque en la cabecera de header-nueva.php: con nombres compartidos,
   cada regla era una pelea de especificidad con el tema padre. Asi no hay pelea.
   ========================================================================== */

:root {
	--uv-azul: #003260;
	--uv-celeste: #2ea3f2;
	--uv-cabecera: 104px;
	--uv-cabecera-mini: 54px;
	--uv-logo: 73px;
	--uv-logo-mini: 38px;
	--uv-pie: #222222;
	--uv-pie-texto: #666666;
	--uv-tipo: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
}

/* --------------------------------------------------------------------------
   Utilidades que antes ponia Divi y que hay que traerse
   -------------------------------------------------------------------------- */

/* OJO: no poner clearfix en un contenedor flex. Su ::after cuenta como un
   elemento flex mas, y justify-content lo tiene en cuenta al repartir. Paso en
   la barra de la cabecera: con .clearfix puesta, space-between repartia el
   hueco entre TRES elementos y el menu quedaba a 155 px del borde derecho en
   lugar de pegado a el. Aqui se usa solo en el pie, que si lleva flotados. */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Saltar al contenido: invisible hasta que alguien llega con el tabulador.
   Divi no tenia ninguno; es de las cosas que se ganan al escribir la cabecera. */
.uveitis-saltar {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100001;
	padding: 12px 20px;
	border-radius: 0 0 6px 6px;
	background: #ffffff;
	color: var(--uv-azul);
	font: 600 15px/1 var(--uv-tipo);
	text-decoration: none;
	transition: top 0.2s ease-in-out;
}

.uveitis-saltar:focus {
	top: 0;
}

/* --------------------------------------------------------------------------
   La cabecera
   -------------------------------------------------------------------------- */

#page-container {
	/* Compensa que la cabecera este fija y no ocupe sitio en el flujo.

	   El !important no es capricho. Mientras Divi siga instalado, SU JavaScript
	   le escribe a este elemento un padding-top en linea y lo recalcula al
	   desplazarse: al bajar lo dejaba en 54 px, la altura de la cabecera ya
	   encogida. Al volver arriba, la cabecera vuelve a 104 px pero el hueco se
	   quedaba en 54, y las primeras lineas de cada pagina quedaban tapadas.

	   Un estilo en linea gana a cualquier hoja, salvo a un !important. Es la
	   unica forma de que mande la hoja sin ponerse a desmontar el JavaScript
	   del tema padre. Cuando Divi se vaya no habra nadie con quien discutir y
	   el !important se puede quitar. */
	padding-top: var(--uv-cabecera) !important;
}

#main-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--uv-cabecera);
	z-index: 99999;
	background: var(--uv-azul);
	box-shadow: none;
	font-family: var(--uv-tipo);
	transition: height 0.4s ease-in-out;
}

/* Encogida al bajar. Se usa una clase propia y no la .et-fixed-header de Divi
   para que el dia del cambio no haya dos JavaScript disputandose la misma. */
#main-header.uveitis-fija {
	height: var(--uv-cabecera-mini);
}

#main-header .container,
#main-footer .container {
	width: 94%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0;
}

#main-header .container.uveitis-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
}

/* El logo -------------------------------------------------------------- */

#main-header .uveitis-marca {
	display: flex;
	align-items: center;
	height: 100%;
	min-width: 0;
}

#main-header .uveitis-marca .uveitis-logo {
	display: flex;
	align-items: center;
	max-width: 100%;
}

/* La altura del logo va en pixeles, no en porcentaje del alto de la cabecera.
   El porcentaje parece mas elegante y da problemas: la imagen medía el 70 % del
   enlace que la envuelve, y ese enlace medía lo que midiera su contenido, o sea
   la imagen. Esa pescadilla la resuelve cada navegador como puede — aqui daba
   50 px donde tocaban 38. Con pixeles no hay ambigüedad, y ademas son los
   valores medidos sobre la cabecera de Divi: 73 arriba, 38 al encoger. */
#main-header .uveitis-marca #logo {
	display: block;
	width: auto;
	height: var(--uv-logo);
	max-width: 100%;
	transition: height 0.4s ease-in-out;
}

#main-header.uveitis-fija .uveitis-marca #logo {
	height: var(--uv-logo-mini);
}

/* Reserva de emergencia: si no hay imagen de logo, el nombre del sitio. */
#main-header .uveitis-marca .uveitis-logo-texto {
	color: #ffffff;
	font: 700 20px/1.2 var(--uv-tipo);
	letter-spacing: 0.02em;
}

/* El menu de escritorio ------------------------------------------------- */

#main-header #uveitis-nav {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
	font-weight: 600;
}

/* Solo el <nav>. NO anadir aqui «#uveitis-nav-menu > ul»: eso alcanza tambien
   al propio menu con mas especificidad que su regla de movil, y le imponia
   height:100% al panel desplegable. Se abria con 80 px de alto y 580 px de
   contenido dentro, o sea recortado tras el primer enlace. El menu ya recibe
   su altura de su propia regla, unas lineas mas abajo. */
#main-header #uveitis-nav-menu {
	height: 100%;
}

#main-header #uveitis-menu {
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
	gap: 22px;
}

#main-header #uveitis-menu > li {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

#main-header #uveitis-menu > li > a {
	display: flex;
	align-items: center;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}

#main-header #uveitis-menu > li > a:hover {
	opacity: 0.7;
}

#main-header #uveitis-menu > li.current-menu-item > a,
#main-header #uveitis-menu > li.current-menu-ancestor > a,
#main-header #uveitis-menu > li.current-menu-parent > a {
	color: var(--uv-celeste);
}

/* La flechita de «tiene submenu». En Divi era un glifo de su fuente de
   iconos; aqui es un triangulo de bordes, que no depende de nada. */
#main-header #uveitis-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	margin-left: 7px;
	border: 4px solid transparent;
	border-top: 5px solid currentColor;
	transform: translateY(2px);
}

/* Los submenus ---------------------------------------------------------- */

#main-header #uveitis-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	width: 300px;
	margin: 0;
	padding: 16px 0;
	list-style: none;
	background: var(--uv-azul);
	border-top: 3px solid var(--uv-azul);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
	transform-origin: 0 0;
	transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

#main-header #uveitis-menu > li:hover > .sub-menu,
#main-header #uveitis-menu > li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

#main-header #uveitis-menu .sub-menu li {
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

#main-header #uveitis-menu .sub-menu a {
	display: block;
	padding: 6px 20px;
	color: var(--uv-celeste);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

#main-header #uveitis-menu .sub-menu a:hover,
#main-header #uveitis-menu .sub-menu a:focus {
	background-color: rgba(255, 255, 255, 0.08);
	opacity: 1;
}

/* Tercer nivel: no lo hay hoy en el menu, pero si alguien lo anade que no se
   pierda detras de la cabecera. */
#main-header #uveitis-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* La lupa y la hamburguesa ---------------------------------------------- */

#main-header .uveitis-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 22px;
	padding: 6px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #ffffff;
	cursor: pointer;
	transition: opacity 0.2s ease-in-out;
}

#main-header .uveitis-icono:hover {
	opacity: 0.7;
}

#main-header .uveitis-icono:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

#main-header #uveitis-hamburguesa {
	display: none;
	color: var(--uv-celeste);
}

/* El buscador desplegable ------------------------------------------------ */

#main-header .uveitis-buscador-panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--uv-azul);
	border-top: 3px solid var(--uv-azul);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

#main-header .uveitis-buscador-panel[hidden] {
	display: none;
}

#main-header .uveitis-buscador-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
}

#main-header .uveitis-buscador-campo {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font-family: var(--uv-tipo);
	font-size: 15px;
}

#main-header .uveitis-buscador-campo::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

#main-header .uveitis-buscador-campo:focus {
	outline: 2px solid var(--uv-celeste);
	outline-offset: 1px;
}

#main-header .uveitis-buscar-enviar {
	margin-left: 0;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Movil y tableta (hasta 980 px, el mismo corte que usaba Divi)
   -------------------------------------------------------------------------- */

@media all and (max-width: 980px) {

	:root {
		--uv-cabecera: 80px;
		--uv-cabecera-mini: 80px;
		--uv-logo: 56px;
		--uv-logo-mini: 56px;
	}

	/* En movil la cabecera se va con el desplazamiento, como hoy. */
	#main-header {
		position: absolute;
	}

	#main-header .uveitis-marca #logo {
		max-height: 70%;
		max-width: 60vw;
	}

	#main-header #uveitis-hamburguesa {
		display: flex;
	}

	#main-header #uveitis-nav-menu {
		position: static;
	}

	/* El menu pasa a ser un panel colgado de la cabecera. */
	#main-header #uveitis-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 9998;
		height: auto;
		max-height: calc(100vh - var(--uv-cabecera));
		overflow-y: auto;
		padding: 4% 0;
		background: var(--uv-azul);
		border-top: 3px solid var(--uv-azul);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	}

	body.uveitis-menu-abierto #main-header #uveitis-menu {
		display: block;
	}

	#main-header #uveitis-menu > li {
		display: block;
		height: auto;
		font-size: 16px;
	}

	#main-header #uveitis-menu > li > a,
	#main-header #uveitis-menu .sub-menu a {
		display: block;
		padding: 12px 6%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		color: #ffffff;
		font-size: 16px;
		font-weight: 700;
	}

	/* En el panel los submenus van siempre desplegados y sangrados, como
	   hacia Divi: en una pantalla tactil no hay «pasar el raton por encima». */
	#main-header #uveitis-menu .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		width: auto;
		padding: 0;
		border-top: 0;
		box-shadow: none;
		background: transparent;
	}

	#main-header #uveitis-menu .sub-menu a {
		padding-left: 12%;
		color: rgba(255, 255, 255, 0.85);
		font-weight: 600;
	}

	#main-header #uveitis-menu .menu-item-has-children > a::after {
		display: none;
	}
}

@media all and (max-width: 479px) {

	#main-header .uveitis-icono {
		margin-left: 12px;
	}
}

/* --------------------------------------------------------------------------
   El pie
   -------------------------------------------------------------------------- */

#main-footer {
	background: var(--uv-pie);
	color: var(--uv-pie-texto);
	font-family: var(--uv-tipo);
}

#main-footer .uveitis-pie-barra {
	padding: 15px 0 5px;
	background: rgba(0, 0, 0, 0.32);
}

#main-footer .uveitis-creditos {
	float: left;
	margin: 0;
	padding: 0 0 10px;
	color: var(--uv-pie-texto);
	font-size: 14px;
	line-height: 1.7;
}

#main-footer .uveitis-creditos a {
	color: #9aa4ad;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

#main-footer .uveitis-creditos a:hover,
#main-footer .uveitis-creditos a:focus {
	color: #ffffff;
	text-decoration: underline;
}

#main-footer .uveitis-redes {
	float: right;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#main-footer .uveitis-red {
	margin: 0;
	padding: 0;
}

#main-footer .uveitis-red a {
	display: block;
	color: var(--uv-pie-texto);
	transition: color 0.2s ease-in-out;
}

#main-footer .uveitis-red a:hover,
#main-footer .uveitis-red a:focus {
	color: #ffffff;
}

@media all and (max-width: 767px) {

	#main-footer .uveitis-creditos,
	#main-footer .uveitis-redes {
		float: none;
		justify-content: center;
		text-align: center;
	}

	#main-footer .uveitis-creditos {
		padding-top: 10px;
	}
}


/* ==========================================================================
   Listados y entradas sueltas
   --------------------------------------------------------------------------
   Estilos de index-nueva.php (busqueda y archivos) y single-nueva.php (las
   guias clinicas). Van en este archivo, y no en bloques.css, porque son parte
   de lo que el TEMA dibuja por su cuenta, no de lo que dibujan los bloques de
   una pagina.

   Paleta tomada de bloques.css para no abrir una nueva: azul #003260, gris
   #666, fondo suave #f2f5f9, borde #e3e9f1, Montserrat y 1080 px de ancho.
   ========================================================================== */

.uveitis-vista-entrada,
.uveitis-vista-listado {
	max-width: 1080px;
	margin: 0 auto;
	padding: 48px 20px 72px;
	font-family: var(--uv-tipo);
}

.uveitis-vista-entrada__titulo,
.uveitis-vista-listado__titulo {
	margin: 0 0 12px;
	color: var(--uv-azul);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.2;
}

.uveitis-vista-listado__cabecera {
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 2px solid #e3e9f1;
}

.uveitis-vista-listado__cuenta {
	margin: 0;
	color: #666666;
	font-size: 15px;
}

.uveitis-vista-listado__descripcion {
	margin-top: 12px;
	color: #666666;
}

/* Las tarjetas de resultado ---------------------------------------------- */

/*
   OJO CON EL NOMBRE. Esto se llamaba «.uveitis-tarjetas», y esa clase YA existe
   en la portada envolviendo dos bloques de columnas. Ponerle display:grid la
   convertia en rejilla y colocaba los dos bloques uno AL LADO del otro: las
   cuatro tarjetas salian en una sola fila de 149 px, pegadas a la izquierda,
   en vez de 2x2 de 526 px centradas. Lo vio Pablo el 2026-08-30.

   No se noto antes porque cabecera.css solo se carga en la vista previa; el dia
   del cambio habria salido en la portada de verdad.
   ------------------------------------------------------------------------- */
.uveitis-rejilla-entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
}

.uveitis-tarjeta-entrada {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e3e9f1;
	border-radius: 8px;
	background: #ffffff;
	transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.uveitis-tarjeta-entrada:hover {
	box-shadow: 0 10px 24px rgba(0, 26, 51, 0.12);
	transform: translateY(-2px);
}

.uveitis-tarjeta-entrada__imagen {
	display: block;
	background: #f2f5f9;
}

/* Nunca estirar una imagen por encima de su tamano: se ve blanda y sucia.
   El recorte lo hace object-fit, que no deforma. */
.uveitis-tarjeta-entrada__imagen img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.uveitis-tarjeta-entrada__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.uveitis-tarjeta-entrada__titulo {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.uveitis-tarjeta-entrada__titulo a {
	color: var(--uv-azul);
	text-decoration: none;
}

.uveitis-tarjeta-entrada__titulo a:hover,
.uveitis-tarjeta-entrada__titulo a:focus {
	text-decoration: underline;
}

.uveitis-tarjeta-entrada__extracto {
	margin: 0;
	color: #55606b;
	font-size: 15px;
	line-height: 1.6;
}

/* Paginacion -------------------------------------------------------------- */

.uveitis-vista-listado .navigation.pagination {
	margin-top: 40px;
}

.uveitis-vista-listado .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.uveitis-vista-listado .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid #e3e9f1;
	border-radius: 6px;
	color: var(--uv-azul);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.uveitis-vista-listado .page-numbers:hover,
.uveitis-vista-listado .page-numbers:focus {
	background: #f2f5f9;
}

.uveitis-vista-listado .page-numbers.current {
	background: var(--uv-azul);
	border-color: var(--uv-azul);
	color: #ffffff;
}

/* Sin resultados ---------------------------------------------------------- */

.uveitis-vista-listado__vacio {
	padding: 32px 24px;
	border-radius: 8px;
	background: #f2f5f9;
	color: #55606b;
}

.uveitis-vista-listado__vacio p {
	margin: 0 0 18px;
	font-size: 17px;
}

.uveitis-vista-listado__buscador {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.uveitis-vista-listado__buscador input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #cdd8e5;
	border-radius: 6px;
	font-family: var(--uv-tipo);
	font-size: 16px;
}

.uveitis-vista-listado__buscador button {
	padding: 11px 22px;
	border: 0;
	border-radius: 6px;
	background: var(--uv-azul);
	color: #ffffff;
	font-family: var(--uv-tipo);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.uveitis-vista-listado__buscador button:hover,
.uveitis-vista-listado__buscador button:focus {
	background: #01407f;
}