@charset "utf-8";
/* CSS Document */
.contenedor-foto-clinica-poli {
		position: relative;
		width: 100%!important;
		max-width: 500px;
	
	
	
}
.contenedor-foto-clinica {
		position: relative;
		width: 100%;
		max-width: 350px;
		margin: 0 auto 25px auto;
		border-radius: 0px;
		overflow: hidden;
		border: 1px solid #222222;
		background-color: #121212;
}
.contenedor-foto-clinica img {
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important; /* Garantiza foto 100% completa en la página */
		display: block !important;
		cursor: zoom-in;
}
.indicador-zoom {
		position: absolute;
		bottom: 10px;
		right: 10px;
		background-color: rgba(11, 11, 11, 0.75);
		color: #d4af37;
		padding: 5px 10px;
		font-size: 0.8rem;
		border-radius: 0px;
		pointer-events: none;
}
/* ==========================================================================
   4. INTERFAZ DE DIALOG LIGHTBOX (EN DOS PISOS RIGIDOS: BOTÓN ABAJO)
   ========================================================================== */
.modal-visor {
		border: none !important;
		background: transparent !important;
		padding: 0 !important;
		max-width: 90vw;
		max-height: 95vh;
		overflow: hidden;
		outline: none;
		/* Transición fluida de apertura */
		opacity: 0;
		transform: scale(0.95);
		transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
		display: block !important;
		visibility: hidden;
}
.modal-visor[open] {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
}
.modal-visor::backdrop {
		background-color: rgba(11, 11, 11, 0.95) !important;
}
/* El bloque Grid obliga a separar la foto en el Piso 1 y el Botón en el Piso 2 */
.caja-bloque-visor {
		display: grid !important;
		grid-template-rows: auto auto !important;
		gap: 20px !important;
		justify-items: center !important;
		width: 100%;
}
.zona-foto-visor {
		grid-row: 1 !important;
		width: 100%;
		display: flex;
		justify-content: center;
}
.modal-visor img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 70vh !important; /* Deja espacio reservado abajo para el botón */
		object-fit: contain !important;
		display: block;
		border: 1px solid #222222;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}
.zona-boton-visor {
		grid-row: 2 !important; /* Piso 2 garantizado abajo */
		width: 100%;
		display: flex;
		justify-content: center;
}
/* EL BOTÓN REFORMADO QUE CORRIGE EL DESPLAZAMIENTO HACIA ARRIBA */
.boton-cerrar-inferior {
		display: inline-block !important;
		position: relative !important; /* Rompe el absolute viejo hererado */
		top: 0 !important;
		right: 0 !important;
		color: #cccccc !important;
		font-size: 0.95rem !important;
		font-weight: 500 !important;
		text-transform: uppercase;
		letter-spacing: 2px;
		cursor: pointer !important;
		padding: 12px 26px !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		border-radius: 4px !important;
		background-color: rgba(255, 255, 255, 0.02) !important;
		transition: all 0.3s ease !important;
}
.boton-cerrar-inferior:hover {
		color: #d4af37 !important;
		border-color: #d4af37 !important;
		background-color: rgba(212, 175, 55, 0.05) !important;
		transform: translateY(-2px);
}