/* ========== CONTENEDOR PRINCIPAL ========== */
.contenedor {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Cada div ocupa el mismo ancho */
.contenedor div {
	flex: 1;
	padding: 20px;
	text-align: center;
	color: white;
}

/* ========== ENLACES DENTRO DEL CONTENEDOR ========== */
.contenedor .link-divRS {
	flex: 1 1 280px;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
}

/* ========== DIVs INTERNOS DE LOS ENLACES ========== */
.divRS1,
.divRS2,
.divRS3 {
	padding: 20px;
	text-align: center;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

/* Colores de fondo */
.divRS1 {
	background-color: #CB0404;
}

.divRS2 {
	background-color: #FFCC00;
}

.divRS3 {
	background-color: #5CB338;
}

/* Efecto hover */
.link-divRS:hover .divRS1,
.link-divRS:hover .divRS2,
.link-divRS:hover .divRS3 {
	background-color: #921f26;
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Títulos */
.divRS1 h5,
.divRS2 h5,
.divRS3 h5 {
	color: white;
	margin: 0;
	padding: 0 5px;
	font-size: 1em;
}

/* Imagen en alerta */
#img_alerta {
	width: 50%;
}

/* Estilo para divs con sufijo _AS */
.divRS1_AS,
.divRS2_AS,
.divRS3_AS {
	background-color: #921f26;
}

/* Estilos comunes para enlaces dentro de divRS_AS */
.divRS1_AS,
.divRS2_AS,
.divRS3_AS,
a {
	text-decoration: none;
	color: #c5ba9f;
	font-weight: bold;
}

.divRS1_AS,
.divRS2_AS,
.divRS3_AS,
a:hover {
	color: #ccc;
}

/* ========== BOTÓN DE REGRESAR ========== */
.btn_regresar {
    display: flex;
    justify-content: center;
    margin: 1px 0 15px 0; /* Arriba | Derecha | Abajo | Izquierda */
}


/* ========== LISTADO PRINCIPIOS ========== */
.listPrincipios2 { 
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilo de los elementos de la lista */
.listPrincipios2 li { 
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 5px;
	border-bottom: 1px solid #ccc;
	text-align: justify;   /* 🔹 Texto justificado */
	line-height: 1.5;      /* 🔹 Mejor legibilidad */
	word-break: normal;
	overflow-wrap: break-word;
}

/* Ícono al inicio */
.listPrincipios2 li i:first-child {
	margin-right: 8px;
	flex-shrink: 0;   /* 🔹 Evita que el ícono se deforme */
}

/* Botón al final */
.listPrincipios2 li button {
	white-space: nowrap;
}

/* 🔹 Ajuste para pantallas pequeñas → fuerza 1 columna */
@media (max-width: 768px) {
    .listPrincipios2 li {
        flex-direction: column;     /* Texto abajo, botón abajo */
        align-items: flex-start;    /* Todo alineado a la izquierda */
        text-align: justify;        /* Se mantiene justificado */
    }

    .listPrincipios2 li button {
        align-self: flex-end;       /* Botón alineado a la derecha */
    }
}



/* ========== OTROS DIVS CON COLORES ========== */
.divGA1 {
	background-color: #0D92F4;
}

.divFS {
	background-color: #d8831c;
	color: #03A6A1;
}

.divFS a {
	text-decoration: none;
	color: #003092;
	font-weight: bold;
}

.divFS a:hover {
	color: #ccc;
}

/* Imagen GA */
#img_ga {
	width: 100%;
}

/* ========== CONTENEDOR SECUNDARIO ========== */
.contenedor2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
}

.divPS {
    flex: 1 1 250px;       /* Flexibilidad para ajustar */
    max-width: 250px;      /* Tamaño máximo */
    padding: 10px;
    text-align: center;
    color: white;
    box-sizing: border-box;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
	.contenedor {
		flex-direction: column;
		align-items: stretch;
	}

	.contenedor .link-divRS {
		width: 100%;
		flex: 1 1 auto;
		margin-bottom: 10px;
	}
}

/* Estilo para divs con sufijo _AS */
.divRS1_ASm1 {
	background-color: #E67514;
}

.divRS2_ASm2 {
	background-color: #f0a243;
}

.divRS3_ASm3 {
	background-color: rgb(230, 170, 90);
}

/* Estilos comunes para enlaces dentro de divRS_AS */
.divRS1_ASm,
.divRS2_ASm,
.divRS3_ASm,
a {
	text-decoration: none;
	color: #c5ba9f;
	font-weight: bold;
}

/* === CONTENEDOR FLEX RESPONSIVO === */
.contenedor-horizontal-coeprist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 1px 20px 20px 20px; /* Arriba | Derecha | Abajo | Izquierda */
}


/* === ENLACE QUE CONTIENE CADA DIV === */
.enlace-bloque-coeprist {
	flex: 1 1 180px;
	min-width: 140px;
	text-decoration: none;
	display: block;
}

/* === ESTILO DE CADA DIV (IMAGEN) === */
.bloque-div-coeprist {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.bloque-div-coeprist img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

/* === EFECTO HOVER (opcional) === */
.bloque-div-coeprist:hover {
	transform: scale(1.03);
	cursor: pointer;
}

/* === RESPONSIVO: EN MÓVILES OCUPA TODA LA FILA === */
@media (max-width: 600px) {
	.enlace-bloque-coeprist {
		flex: 1 1 100%;
	}
}