/*
 * Ribera Profesionales — cuadro médico, diseño alternativo
 * ([rpro_cuadro_medico diseno="2"], templates/cuadro-medico-2.php):
 * "propuesta B" del diseño, con barra de filtros horizontal fija y
 * tarjetas con la foto grande arriba (templates/tarjeta-medico-2.php).
 *
 * Se carga después de rpro-front.css, así que aquí solo va lo que cambia.
 * Todo limitado a .rpro-cuadro-diseno-2 para no tocar el diseño normal.
 */

.rpro-cuadro-diseno-2 .rpro-cuadro-cabecera {
	margin-bottom: 0;
}

.rpro-cuadro-diseno-2 .rpro-cuadro-cuerpo {
	display: block;
}

.rpro-cuadro-diseno-2 .rpro-acordeon[hidden],
.rpro-cuadro-diseno-2 .rpro-barra-movil li[hidden],
.rpro-cuadro-diseno-2 .rpro-acordeon-n[hidden] {
	display: none;
}

/* Por debajo de la barra fija, que no tape el principio de los resultados. */
.rpro-cuadro-diseno-2 .rpro-cuadro-resultados {
	gap: 36px;
	padding-top: 24px;
	scroll-margin-top: 80px;
}

/* Barra de móvil: solo en móvil. */
.rpro-cuadro-diseno-2 .rpro-barra-movil {
	display: none;
}

.rpro-cuadro-diseno-2 .rpro-solo-movil-texto {
	display: none;
}

/* ---------- Escritorio: el panel es una barra de pastillas ---------- */
@media (min-width: 900px) {
	.rpro-cuadro-diseno-2 .rpro-cuadro-filtros,
	.rpro-cuadro-diseno-2.rpro-sin-lateral .rpro-cuadro-filtros {
		position: sticky;
		top: 0;
		z-index: 4;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 10px;
		padding: 14px 0;
		border: 0;
		/* Fondo blanco y línea inferior a todo el ancho, sin desbordar. */
		border-image: linear-gradient(to top, var(--rpro-borde) 1px, #fff 1px) fill 0 / / 0 100vmax;
	}

	.rpro-cuadro-diseno-2 .rpro-filtros-cabecera {
		padding: 0;
	}

	.rpro-cuadro-diseno-2 .rpro-filtros-cabecera h2 {
		margin-right: 4px;
		font-size: 14px;
		font-weight: 700;
	}

	.rpro-cuadro-diseno-2 .rpro-filtros-cuerpo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon {
		position: relative;
		display: block;
		padding: 0;
		border: 0;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon h3 button {
		width: auto;
		gap: 6px;
		min-height: 44px;
		padding: 0 12px 0 16px;
		border: 1px solid var(--rpro-borde-campo);
		border-radius: 999px;
		background: #fff;
		color: var(--rpro-titulo);
		white-space: nowrap;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon h3 button:hover {
		border-color: var(--rpro-titulo);
		background: #fff;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon h3 button:focus-visible {
		outline: 3px solid var(--rpro-titulo);
		outline-offset: 2px;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-titulo {
		flex-grow: 0;
		font-size: 15px;
		font-weight: 600;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-n {
		margin-left: -2px;
		font-size: 15px;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-resumen {
		display: none;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon h3 svg {
		width: 16px;
		height: 16px;
		stroke-width: 2.5;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon.rpro-activo h3 button {
		border-color: var(--rpro-color-oscuro);
		background: var(--rpro-fondo-rosa);
		color: var(--rpro-color-oscuro);
	}

	.rpro-cuadro-diseno-2 .rpro-activo :is(.rpro-acordeon-titulo, .rpro-acordeon-n) {
		font-weight: 700;
	}

	/* Desplegable de cada pastilla. */
	.rpro-cuadro-diseno-2 .rpro-acordeon-panel {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 6;
		width: 300px;
		max-height: min(420px, 60vh);
		overflow-y: auto;
		padding: 12px 16px;
		border: 1px solid var(--rpro-borde);
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 8px 24px rgba(30, 30, 28, 0.12);
		box-sizing: border-box;
	}

	/* Videoconsulta: una pastilla que se marca de un toque. */
	.rpro-cuadro-diseno-2 .rpro-acordeon-video .rpro-opciones label {
		gap: 8px;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--rpro-borde-campo);
		border-radius: 999px;
		background: #fff;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		box-sizing: border-box;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-video .rpro-opciones label:hover {
		border-color: var(--rpro-titulo);
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-video input {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		opacity: 0;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-video label:has(input:checked) {
		border-color: var(--rpro-color-oscuro);
		background: var(--rpro-fondo-rosa);
		color: var(--rpro-color-oscuro);
		font-weight: 700;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-video label:has(input:focus-visible) {
		outline: 3px solid var(--rpro-titulo);
		outline-offset: 2px;
	}
}

/* ---------- Resultados ---------- */
.rpro-cuadro-diseno-2 .rpro-grupo-icono {
	display: none;
}

.rpro-cuadro-diseno-2 .rpro-grupo-cabecera {
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.rpro-cuadro-diseno-2 .rpro-grupo-cabecera h2 {
	color: var(--rpro-color);
	font-size: 28px;
	font-weight: 700;
}

.rpro-cuadro-diseno-2 .rpro-grupo-numero {
	flex: none;
	font-size: 15px;
	font-weight: 600;
}

.rpro-cuadro-diseno-2 .rpro-cuadro-grupo > section {
	gap: 20px;
}

.rpro-cuadro-diseno-2 .rpro-tarjetas {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

/* ---------- Tarjeta con la foto arriba ---------- */
.rpro-tarjeta-2 {
	border-color: var(--rpro-borde-campo);
	min-width: 0;
}

.rpro-tarjeta-2 .rpro-tarjeta-foto {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	background: var(--rpro-fondo-rosa);
}

.rpro-tarjeta-2 .rpro-tarjeta-foto svg {
	display: block;
	width: 76%;
	height: auto;
	fill: var(--rpro-silueta);
	stroke: none;
}

.rpro-tarjeta-2 .rpro-tarjeta-cuerpo {
	gap: 4px;
	padding: 16px 18px 0;
	font-size: 14px;
}

.rpro-tarjeta-2 .rpro-tarjeta-nombre {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}

.rpro-tarjeta-2 .rpro-tarjeta-cargo {
	color: var(--rpro-color-oscuro);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: break-word;
	hyphens: auto;
}

.rpro-tarjeta-2 .rpro-tarjeta-centros {
	gap: 2px;
	margin-top: 8px;
}

.rpro-tarjeta-2 .rpro-tarjeta-centros li {
	gap: 7px;
}

.rpro-tarjeta-2 .rpro-tarjeta-centros svg,
.rpro-tarjeta-2 .rpro-tarjeta-video svg {
	margin-top: 2px;
	color: var(--rpro-texto-suave);
}

.rpro-tarjeta-2 .rpro-tarjeta-video {
	align-items: center;
	gap: 7px;
	margin-top: 2px;
	color: var(--rpro-texto-suave);
	font-size: 13px;
}

.rpro-tarjeta-2 .rpro-tarjeta-video svg {
	margin-top: 0;
}

.rpro-tarjeta-2 .rpro-tarjeta-areas {
	margin: 0;
	padding-top: 10px;
}

.rpro-tarjeta-2 .rpro-tarjeta-areas :is(a, span) {
	padding: 6px 12px;
	border: 0;
	background: var(--rpro-fondo-suave);
	color: var(--rpro-texto);
	transition: background-color 0.15s, color 0.15s;
}

.rpro-tarjeta-2 .rpro-tarjeta-areas a:is(:hover, :focus-visible) {
	background: var(--rpro-color);
	color: #fff;
}

.rpro-tarjeta-2 .rpro-tarjeta-ficha {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	margin-top: 16px;
	padding: 0 18px;
	border-top: 1px solid #d6d6d5;
	color: var(--rpro-titulo);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.rpro-tarjeta-2 .rpro-tarjeta-ficha span {
	flex-grow: 1;
}

.rpro-tarjeta-2 .rpro-tarjeta-ficha svg:first-child {
	color: var(--rpro-texto-suave);
}

.rpro-tarjeta-2 .rpro-tarjeta-ficha svg:last-child {
	stroke-width: 2.5;
}

.rpro-tarjeta-2 .rpro-tarjeta-ficha:hover {
	color: var(--rpro-color-oscuro);
}

.rpro-tarjeta-2 .rpro-tarjeta-ficha:hover span {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Móvil ---------- */
@media (max-width: 899px) {
	.rpro-cuadro-diseno-2 .rpro-solo-movil-texto {
		display: inline;
	}

	.rpro-cuadro-diseno-2 .rpro-cuadro-acciones {
		display: flex;
	}

	.rpro-cuadro-diseno-2 .rpro-cuadro-acciones .rpro-boton-lleno {
		flex-grow: 1;
	}

	/* Fila de pastillas fija arriba, que se desliza de lado. */
	.rpro-cuadro-diseno-2 .rpro-barra-movil {
		position: sticky;
		top: 0;
		z-index: 4;
		display: block;
		padding: 12px 0;
		border-image: linear-gradient(to top, var(--rpro-borde) 1px, #fff 1px) fill 0 / / 0 100vmax;
	}

	.rpro-cuadro-diseno-2 .rpro-barra-movil ul {
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 0;
		overflow-x: auto;
		list-style: none;
		scrollbar-width: none;
	}

	.rpro-cuadro-diseno-2 .rpro-barra-movil li {
		flex: none;
		margin: 0;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		margin: 0;
		padding: 0 12px 0 14px;
		border: 1px solid var(--rpro-borde-campo);
		border-radius: 999px;
		background: #fff;
		color: var(--rpro-titulo);
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		cursor: pointer;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla:focus-visible {
		outline: 3px solid var(--rpro-titulo);
		outline-offset: 2px;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla svg {
		width: 16px;
		height: 16px;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla .rpro-acordeon-n {
		margin-left: -2px;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla-filtros,
	.rpro-cuadro-diseno-2 .rpro-pastilla-filtros:hover,
	.rpro-cuadro-diseno-2 .rpro-pastilla-filtros:focus {
		gap: 8px;
		padding: 0 14px;
		border-color: var(--rpro-titulo);
		background: var(--rpro-titulo);
		color: #fff;
		font-weight: 700;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla-filtros svg {
		width: 18px;
		height: 18px;
	}

	.rpro-cuadro-diseno-2 .rpro-pastilla-filtros .rpro-contador-filtros {
		min-width: 20px;
		height: 20px;
		background: #fff;
		color: var(--rpro-titulo);
	}

	.rpro-cuadro-diseno-2 .rpro-activo .rpro-pastilla,
	.rpro-cuadro-diseno-2 .rpro-pastilla[aria-pressed="true"] {
		border-color: var(--rpro-color-oscuro);
		background: var(--rpro-fondo-rosa);
		color: var(--rpro-color-oscuro);
		font-weight: 700;
	}

	/* En el panel, el nº ya va en el resumen ("2 seleccionadas"). */
	.rpro-cuadro-diseno-2 .rpro-cuadro-filtros .rpro-acordeon-n {
		display: none;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-video {
		padding: 6px 0;
	}

	.rpro-cuadro-diseno-2 .rpro-acordeon-video svg {
		display: none;
	}

	.rpro-cuadro-diseno-2 .rpro-cuadro-resultados {
		gap: 24px;
		padding-top: 16px;
		scroll-margin-top: 72px;
	}

	.rpro-cuadro-diseno-2 .rpro-grupo-cabecera h2 {
		min-width: 0;
		font-size: 24px;
	}

	.rpro-cuadro-diseno-2 .rpro-grupo-numero {
		font-size: 14px;
	}

	.rpro-cuadro-diseno-2 .rpro-cuadro-grupo > section {
		gap: 16px;
	}

	/* Dos tarjetas por fila, grises y sin borde. */
	.rpro-cuadro-diseno-2 .rpro-tarjetas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.rpro-tarjeta-2 {
		border: 0;
		background: var(--rpro-fondo-suave);
	}

	.rpro-tarjeta-2 .rpro-tarjeta-foto {
		width: 100%;
		height: auto;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-foto svg {
		width: 80%;
		height: auto;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-cuerpo {
		gap: 3px;
		padding: 12px 12px 0;
		font-size: 13px;
		line-height: 1.4;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-nombre {
		font-size: 16px;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-cargo {
		font-size: 14px;
		line-height: 1.3;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-centros {
		margin-top: 6px;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-centros li {
		gap: 5px;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-centros svg {
		width: 15px;
		height: 15px;
		margin-top: 1px;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-areas :is(a, span) {
		padding: 5px 10px;
		background: var(--rpro-borde);
	}

	.rpro-tarjeta-2 .rpro-tarjeta-ficha {
		gap: 6px;
		min-height: 46px;
		margin-top: 12px;
		padding: 0 12px;
		font-size: 13px;
	}

	.rpro-tarjeta-2 .rpro-tarjeta-ficha svg {
		width: 15px;
		height: 15px;
	}
}