body {
    padding-top: 70px !important;
}

/* =========================================================
   Sección iconos de la página principal
   ========================================================= */
.icono-dgrtc {
	width: 3vw;
	height: auto;
}

/* Texto */
.item-dgrtc p {
	font-size: 14px;
	font-weight: 600;
	color: #333333;
	margin-top: 8px;
	margin-bottom: 0;
}


/* Efecto al pasar el mouse */
.item-dgrtc {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.item-dgrtc:hover {
	opacity: 0.6;
}

/* Opcional: pequeño movimiento */
.item-dgrtc:hover .icono-dgrtc {
	transform: scale(1.05);
	transition: transform 0.3s ease;
}

/* En móvil */
@media (max-width: 767px) {
	.icono-dgrtc {
		width: 60px;
	}

	.item-dgrtc p {
		font-size: 11px;
	}

	.item-dgrtc {
		margin-bottom: 25px;
	}
}

.contenedor-dgrtc {
	column-gap: 80px;
	row-gap: 25px;
}

/* =========================================================
   Sección ¿qué hacemos? de la página principal
   ========================================================= */
   
#QueHacemos {
	scroll-margin-top: 120px;
}

/* Iconos de ¿Qué hacemos? */
.quehacemos-icon {
	max-width: 160px;
	height: auto;
	border: 0;
	background-color: transparent;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Efecto de salto */
.quehacemos-item:hover .quehacemos-icon {
	transform: translateY(-10px);
	opacity: 0.8;
}

/* Texto */
.quehacemos-item p {
	line-height: 1.2;
	margin-top: 12px;
	margin-bottom: 0;
}

/* En móvil */
@media (max-width: 767px) {
	.quehacemos-icon {
		max-width: 100px;
	}

	.quehacemos-item p {
		font-size: 16px;
	}
}

/* =========================================================
   Sección listado de autorizaciones de la página principal
   ========================================================= */

#ListadosAutorizaciones {
	scroll-margin-top: 120px;
}
   
.img-link {
	text-decoration: none;
	display: block;
}

.guard-of {
	width: 100%;
}

.guard-of img {
	width: 100%;
	height: auto;
	display: block;
	transition: box-shadow 0.3s ease;
}

/* Solo sombra al pasar el cursor */
.guard-of:hover img {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
}

/* Espaciado de los textos/elementos */
.autorizacion-item {
	padding: 12px;
}

/* En móvil */
@media (max-width: 767px) {
	.autorizacion-item {
		padding: 10px;
	}
}

/* =========================================================
   Sección enlaces de interés de la página principal
   ========================================================= */
#Enlaces {
	scroll-margin-top: 120px;
}

.enlace-of {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Imagen */
.enlace-of img {
	width: 100%;
	height: 100%;
	border-radius: 15px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

/* Efecto hover */
.enlace-of img:hover {
	transform: translateY(-5px);
}

/* Texto */
.enlace-of h5 {
	margin-top: 12px;
	color: #000 !important;
	text-align: center;
	text-decoration: none !important;
}

/* Quitar decoración del enlace */
.enlace-of a {
	text-decoration: none;
	color: #000 !important;
}
#Enlaces{
	scroll-margin-top: 120px;
}

/* Área donde estará cada imagen */
.enlace-of > a:first-child {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 15px;
}

/* =========================================================
   Sección enlaces de interés de la página principal
   ========================================================= */
#Contacto { 
	scroll-margin-top: 120px;
}

/* =========================================================
   Página Pausas y Materiales
   ========================================================= */
.img-link {
	text-decoration: none;
}

.guard-of {
	overflow: hidden;
}

.guard-of img {
	width: 100%;
	transition: transform 0.3s ease;
}

.guard-of:hover img {
	transform: scale(1.08);
}

.imagen-item {
	margin-right: 45px;
	margin-bottom: 30px;
}

/* =========================================================
   CONFIGURACIÓN GENERAL DEL MAPA de la página de Pautas de TV
   ========================================================= */


/*
------------------------------------------------------------
TAMAÑO DEL MAPA
------------------------------------------------------------

Aquí modificas la altura del mapa.

Ejemplo:

height: 600px;

puedes cambiarlo por:

height: 700px;
height: 500px;
height: 400px;
*/

#mapa {
	width: 100%;
	height: 600px;
	background: #ffffff;
}


/*
------------------------------------------------------------
CONTENEDOR DEL MAPA
------------------------------------------------------------
*/

.mapa-contenedor {

	background: #fff;

	border: 1px solid #ddd;

	padding: 10px;

	margin-bottom: 30px;

}


/* =========================================================
   ESTADOS DEL MAPA
   ========================================================= */


/*
------------------------------------------------------------
COLOR NORMAL DE LOS ESTADOS
------------------------------------------------------------

fillColor = color del estado

fillOpacity = transparencia

color = color del borde

weight = grosor del borde

opacity = transparencia del borde
*/

.estado-mexico {

	fillColor: #611232;

	fillOpacity: 0.75;

	color: #ffffff;

	weight: 1.5;

	opacity: 1;

}


/*
------------------------------------------------------------
COLOR CUANDO PASAS EL MOUSE
------------------------------------------------------------

Este es el color que aparece al colocar
el cursor sobre un estado.
*/

.estado-mexico-hover {

	fillColor: #a57f2c;

	fillOpacity: 0.95;

	color: #ffffff;

	weight: 2;

}


/*
------------------------------------------------------------
COLOR DEL ESTADO SELECCIONADO
------------------------------------------------------------

Este es el estado que el usuario acaba
de seleccionar.
*/

.estado-mexico-selected {

	fillColor: #a57f2c;

	fillOpacity: 1;

	color: #ffffff;

	weight: 3;

}


/* =========================================================
   TOOLTIP
   ========================================================= */


/*
------------------------------------------------------------
TOOLTIP
------------------------------------------------------------

Aquí modificas el tamaño, color y apariencia
del nombre que aparece sobre el estado.
*/

.leaflet-tooltip.estado-tooltip {

	/*
		TAMAÑO DEL TEXTO
	*/
	font-size: 14px;


	/*
		TEXTO EN NEGRITAS
	*/
	font-weight: bold;


	/*
		COLOR DEL TEXTO
	*/
	color: #ffffff;


	/*
		COLOR DEL FONDO
	*/
	background: #000000;


	/*
		BORDE
	*/
	border: none;


	/*
	 ESPACIO INTERIOR
	*/
	padding: 7px 10px;


	/*
	 REDONDEADO
	*/
	border-radius: 4px;

}


/*
------------------------------------------------------------
TRIÁNGULO DEL TOOLTIP
------------------------------------------------------------
*/

.leaflet-tooltip.estado-tooltip:before {

	border-top-color: #611232;

}


/* =========================================================
   PANEL DERECHO
   ========================================================= */


/*
------------------------------------------------------------
TAMAÑO DEL PANEL
------------------------------------------------------------

El ancho lo controla Bootstrap:

col-md-4

Eso significa aproximadamente 33% del contenedor.

Si quieres controlar una altura específica:

min-height: 300px;

*/

.panel-estado {

	/*
		ALTURA MÍNIMA
	*/
	min-height: 400px;


	/*
		MÁXIMO DE ALTURA
	*/
	/* max-height: 600px; */


	/*
		Si quieres que el contenido
		pueda desplazarse:
	*/
	/* overflow-y: auto; */

}


/*
------------------------------------------------------------
ENCABEZADO DEL PANEL
------------------------------------------------------------
*/

.panel-estado .panel-heading {

	background-color: #611232;

	color: #ffffff;

}


/*
------------------------------------------------------------
TÍTULO DEL ESTADO
------------------------------------------------------------
*/

.panel-estado .panel-title {

	font-size: 22px;

	font-weight: 600;

}


/*
------------------------------------------------------------
CONTENIDO DEL PANEL
------------------------------------------------------------
*/

.panel-estado .panel-body {

	padding: 20px;

}


/* =========================================================
   BOTONES / LINKS
   ========================================================= */


/*
------------------------------------------------------------
LINKS
------------------------------------------------------------
*/

.link-estado {

	display: flex;

	align-items: center;

	justify-content: space-between;

	width: 100%;

	margin-bottom: 12px;

	padding: 10px 5px;

	border-bottom: 1px solid #dddddd;

	background: transparent;

	color: #333333;

	text-decoration: none;

}


/*
---------------------------------------------------------
NOMBRE DEL ENLACE
---------------------------------------------------------
*/

.link-nombre {

	flex: 1;

	padding-right: 15px;

	color: #333333;

	font-size: 16px;

}


/*
---------------------------------------------------------
ICONO DE DESCARGA
---------------------------------------------------------
*/

.link-estado a {

	display: inline-block;

	text-decoration: none;

}


/*
---------------------------------------------------------
ICONO AL PASAR EL MOUSE
---------------------------------------------------------
*/

.link-estado a:hover {

	opacity: 0.70;

}


/*
---------------------------------------------------------
IMAGEN
---------------------------------------------------------
*/

.link-estado img {

	display: inline-block;

	vertical-align: text-bottom;

}



/* =========================================================
   RESPONSIVE
   ========================================================= */


/*
------------------------------------------------------------
TABLET
------------------------------------------------------------
*/

@media (max-width: 991px) {

	#mapa {

		height: 500px;

	}

}


/*
------------------------------------------------------------
CELULAR
------------------------------------------------------------
*/

@media (max-width: 767px) {

	#mapa {

		height: 400px;

	}


	.panel-estado {

		margin-top: 20px;

	}

}



.leaflet-interactive,
.leaflet-interactive:focus,
.leaflet-interactive:active {
	outline: none !important;
}