*/
.modern-card img{
object-fit: contain;
background: #f1f1f1; /* para que no quede “vacío” feo */
}
/* ===== Foto equipo directivo: tamaño controlado (no 100% columna) ===== */
.thumbnail .bordefoto{
width: 450px; /* ajusta: 160/180/200 */
height: 450px;
max-width: 100%;
border-radius: 50%;
object-fit: cover; /* recorta centrado, mantiene "avatar" */
display: block;
margin: 0 auto;
/* tu marco (puedes mantenerlo) */
background: #fff;
padding: 8px;
border: 1px solid #fff;
box-shadow: 0px 5px 12px 0px rgba(141, 132, 132, 0.45);
}
/* En móviles, un poco más chico */
@media (max-width: 576px){
.thumbnail .bordefoto{
width: 140px;
height: 140px;
padding: 6px;
}
}
.separador-cargo {
width: 70%;
margin: 18px auto;
border: none;
height: 2px;
background-color: #646666;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.igm-breadcrumb{
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 10px 0 18px;
padding: 8px 14px;
border-radius: 10px;
background: #05252f;
backdrop-filter: blur(4px);
}
.igm-breadcrumb__link{
color: #ffffff !important;
font-weight: 600;
text-decoration: none !important;
opacity: 0.95;
}
.igm-breadcrumb__link:hover{
opacity: 1;
text-decoration: underline !important;
}
.igm-breadcrumb__sep{
color: rgba(255,255,255,0.55);
}
.igm-breadcrumb__section{
color: rgba(255,255,255,0.75);
font-weight: 600;
}
.igm-breadcrumb__current{
color: #79dbf4;
font-weight: 600;
cursor: default;
}
/* móvil */
@media (max-width: 767px){
.igm-breadcrumb{
margin: 8px 0 14px;
padding: 8px 12px;
font-size: 13px;
}
}
/*enlace al qr*/
.link-qr-scroll {
color: #0fa5ad;
font-weight: 600;
text-decoration: underline;
transition: all 0.3s ease;
}
.link-qr-scroll:hover {
color: #046997;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
/* 1) Normaliza el párrafo de descripción en todas las cards del carrusel */
.owl-carousel .item p,
.post-slide11 p,
.card-slider p {
margin: 0;
line-height: 1.6;
}
/* 2) Fuerza “misma altura” visual de la descripción (ajusta el valor) */
.owl-carousel .item p {
min-height: 78px; /* prueba 70–90 según tu diseño */
}
/* 3) Estilo del link dentro del párrafo SIN desalinear */
.owl-carousel .item p a.link-qr-scroll {
display: inline; /* clave: no lo conviertas en block */
font-weight: 600;
color: #0fa5ad;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.owl-carousel .item p a.link-qr-scroll:hover {
color: #046997;
}
/* Botón subir arriba */
.btn-top{
position: fixed;
right: 18px;
bottom: 18px;
width: 48px;
height: 48px;
border-radius: 10px;
background: #0288a7; /* ajusta a tu color */
color: #fff !important;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
box-shadow: 0 10px 25px rgba(0,0,0,.25);
right: auto !important;
left: 20px !important;
bottom: 20px !important;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .25s ease;
}
.btn-top:hover{
background: #046997;
transform: translateY(0);
}
/* visible */
.btn-top.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* opcional: más chico en móvil */
@media (max-width: 767px){
.btn-top{
width: 42px;
height: 42px;
right: 14px;
bottom: 14px;
}
}
@media (max-width: 576px){
#btn-top{ left: 14px !important; bottom: 14px !important; }
}
/*modal para mostrar la ubicacion del igm*/
.modal-ubicacion{
border-radius: 16px;
overflow: hidden;
}
.modal-ubicacion .modal-header{
background: linear-gradient(90deg, #0b78a7, #0aa2c2);
color: #fff;
border: 0;
}
.modal-ubicacion .btn-close{
filter: invert(1);
opacity: .9;
}
.lista-igm li strong {
white-space: nowrap;
}
/**PARA FOTOS INTERNAS PAGINAS**/
:root{
--igm-overlay: rgba(10, 60, 85, 0.32); /* azul/teal institucional */
}
/* Wrapper para poder aplicar overlay + máscara sin que se note el "cuadro" */
.igm-photo-wrap{
position: relative;
width: min(420px, 92%);
margin: 0 auto 24px;
isolation: isolate; /* mezcla aislada */
}
/* La foto */
.igm-photo{
display: block;
width: 100%;
height: auto;
/* Integración cromática con el sitio (menos cálido / menos saturado) */
filter: saturate(0.78) contrast(0.95) brightness(0.99) hue-rotate(-10deg);
/* Bordes esfumados (NO se ve cuadrada) */
-webkit-mask-image: radial-gradient(ellipse at center,
rgba(0,0,0,1) 58%,
rgba(0,0,0,0.70) 72%,
rgba(0,0,0,0) 100%
);
mask-image: radial-gradient(ellipse at center,
rgba(0,0,0,1) 58%,
rgba(0,0,0,0.70) 72%,
rgba(0,0,0,0) 100%
);
/* suavidad mínima, no "tarjeta" */
border-radius: 10px;
}
/* Capa azul institucional encima (para amarrarla al fondo) */
.igm-photo-wrap::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background: radial-gradient(ellipse at center,
var(--igm-overlay) 0%,
rgba(10,60,85,0.18) 55%,
rgba(10,60,85,0) 100%
);
mix-blend-mode: multiply; /* prueba también: overlay o soft-light */
opacity: 0.95;
/* esfumado del overlay también (para que no haya bordes) */
-webkit-mask-image: radial-gradient(ellipse at center,
rgba(0,0,0,1) 60%,
rgba(0,0,0,0.35) 78%,
rgba(0,0,0,0) 100%
);
mask-image: radial-gradient(ellipse at center,
rgba(0,0,0,1) 60%,
rgba(0,0,0,0.35) 78%,
rgba(0,0,0,0) 100%
);
}
/* Fallback si mask-image no está soportado */
@supports not (mask-image: radial-gradient(circle, #000, transparent)){
.igm-photo-wrap{ overflow:hidden; border-radius: 14px; }
.igm-photo{ border-radius: 14px; }
}
.nav-tabs{
border-bottom:0px solid #dee2e6 !important;
}
/****quiero cambiar el atributo color de la flecha del carrusel que esta ne recursos***/
.swiper-button-next, .swiper-button-prev{
color:#0cb1bd !important;
}
/****VIDETOS TIENDA*****/
.subtitulo-comercial {
font-size: 1.3rem;
color: rgba(255,255,255,0.75) !important;
margin-bottom: 0;
text-align:center;
}
/* ===== SALUDO DIRECTOR IGM ===== */
.saludo-director-igm .card-saludo {
max-width: 950px;
margin: 0 auto;
padding: 40px 45px;
background: rgba(8, 34, 46, 0.55);
backdrop-filter: blur(8px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}
/* Imagen */
.saludo-director-igm .foto-director {
display: block;
margin: 0 auto 30px;
width: min(650px, 95%);
border-radius: 16px;
box-shadow: 0 18px 35px rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
}
/* Texto */
.saludo-director-igm .texto-saludo {
font-size: 1.05rem;
line-height: 1.9;
color: rgba(255,255,255,0.88);
text-align: left;
letter-spacing: 0.2px;
}
/* Separación entre párrafos */
.saludo-director-igm .texto-saludo p {
margin-bottom: 18px;
}
/* Primera letra estilo editorial (opcional elegante) */
.saludo-director-igm .texto-saludo p:first-child::first-letter {
font-size: 2.6rem;
font-weight: 700;
float: left;
line-height: 1;
padding-right: 8px;
color: #8ee7f1;
}
/* Firma */
.saludo-director-igm .firma-director {
margin-top: 35px;
text-align: center;
font-weight: 600;
color: rgba(255,255,255,0.95);
}
/* Línea decorativa superior */
.saludo-director-igm .card-saludo::before {
content: "";
display: block;
width: 80px;
height: 4px;
margin: 0 auto 25px;
border-radius: 50px;
background: linear-gradient(90deg, #1cb5c4, #0d7377);
opacity: 0.7;
}
/* ===== MISIÓN IGM ===== */
.page-mision-igm .modern1-card p{
max-width: 70ch;
margin: 10px auto 0;
font-size: 1.25rem;
line-height: 1.95;
letter-spacing: .15px;
text-align: justify;
}
/* líneas elegantes arriba/abajo del texto */
/*.page-mision-igm .modern1-card p::before,
.page-mision-igm .modern1-card p::after{
content:"";
display:block;
width: 90px;
height: 3px;
margin: 18px auto;
border-radius: 50px;
background: linear-gradient(90deg,#1cb5c4,#0d7377);
opacity: .75;
}*/
/* ===== VISIÓN IGM ===== */
.page-vision-igm p:first-of-type{
max-width: 90ch;
margin: 20px auto 24px;
padding: 0 0 0 18px;
line-height: 2;
font-size: 1.25rem;
border-left: 4px solid rgba(46,196,199,.75);
background: none;
border-radius: 0;
border-top: 0;
border-right: 0;
border-bottom: 0;
}
/* ===== LISTA VALORES VISIÓN IGM ===== */
/* primera frase más fuerte */
.page-vision-igm p:first-of-type strong{
color: #66bbcf;
font-size: 1.12rem;
}
/* ===== LISTA VISIÓN IGM (corregida) ===== */
/* ===== LISTA VISIÓN IGM (corregida) ===== */
.page-vision-igm .modern1-card{
display: flex;
flex-direction: column;
align-items: center;
}
/* Contenedor UL */
.page-vision-igm .lista-igm{
width: 100%;
max-width: 680px;
margin: 30px auto 0 !important;
padding-left: 0;
list-style: none;
}
/* Cada LI como tarjeta */
.page-vision-igm .lista-igm li{
display: grid;
grid-template-columns: 26px 1fr;
gap: 14px;
align-items: start;
padding: 18px 22px;
margin-bottom: 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
/* transición suave (hover) */
transition:
transform 0.45s cubic-bezier(.22,1,.36,1),
background-color 0.45s cubic-bezier(.22,1,.36,1),
box-shadow 0.45s cubic-bezier(.22,1,.36,1),
border-color 0.45s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
/* Hover elegante */
.page-vision-igm .lista-igm li:hover{
transform: translateY(-4px);
background-color: rgba(255,255,255,0.10);
border-color: rgba(142,231,241,.28);
box-shadow: 0 16px 34px rgba(0,0,0,0.32);
}
/* Icono */
.page-vision-igm .lista-igm li i{
grid-column: 1;
margin-top: 3px;
font-size: 1.15rem;
color: rgba(142,231,241,.95);
}
/* Texto completo del item */
.page-vision-igm .lista-igm li{
color: rgba(255,255,255,0.92);
line-height: 1.65;
}
/* ✅ Título dentro del li (evita el “texto en columna”) */
.page-vision-igm .lista-igm li strong{
display: inline-block; /* o block si lo quieres en línea aparte */
color: #8ee7f1;
font-weight: 700;
margin-right: 6px; /* separa del texto */
white-space: normal; /* por si el título es largo */
}
/* Si estás usando
dentro del li, que no deje un salto gigante */
.page-vision-igm .lista-igm li br{
display: none; /* opcional: quita el
visualmente */
}
/* (Opcional) Si quieres que el texto comience “debajo” del título */
.page-vision-igm .lista-igm li strong{
display: block; /* descomenta si lo prefieres así */
margin: 0 0 6px 0;
}
/* ===== SALUDO DIRECTOR ===== */
.page-saludo-director p{
max-width: 85ch;
margin: 0 auto 14px;
line-height: 2.05;
letter-spacing: .15px;
text-align: justify;
hyphens: auto;
}
/* dropcap solo al primer párrafo */
.page-saludo-director p:first-of-type::first-letter{
float: left;
font-size: 3.2rem;
line-height: .9;
padding: 10px 10px 0 0;
font-weight: 800;
color: rgba(142,231,241,.95);
}
/* firma */
.page-saludo-director .firma-director{
text-align:center;
margin-top: 26px;
opacity: .95;
}
.page-saludo-director .firma-director::before{
content:"";
display:block;
width: 220px;
height: 3px;
margin: 0 auto 18px;
border-radius: 50px;
background: linear-gradient(90deg,#1cb5c4,#0d7377);
opacity: .85;
}
/*.seccion-interna-igm a{
color: #4ad2e9 !important;
text-decoration: underline;
}*/
/* CONTENEDOR “FLOAT / GLASS” PARA IMÁGENES DESTACADAS SOLO POSICIONAMIENTO SIN BORDE*/
/*.igm-media{
position: relative;
width: min(920px, 92%);
margin: 0 auto;
padding: 16px;
border-radius:10px;
}
.igm-media__img{
display:block;
width: 100%;
height: auto;
border-radius: calc(var(--r) - 10px);
}*/
/* CONTENEDOR “FLOAT / GLASS” PARA IMÁGENES DESTACADAS CON BORDES Y BACKGROUND TRANSPARENTES*/
.igm-media{
position: relative;
width: min(920px, 92%);
margin: 0 auto 26px;
padding: 14px;
border-radius: 22px;
/* base glass */
background: rgba(10, 34, 40, 0.35);
border: 1px solid rgba(142,231,241,0.16);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* sombra para que “flote” */
box-shadow:
0 18px 45px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.06);
overflow: hidden;
}
/* Glow suave (integración con el verde/agua) */
.igm-media::before{
content:"";
position:absolute;
inset:-40px;
background: radial-gradient(60% 60% at 30% 20%,
rgba(142,231,241,0.22),
rgba(142,231,241,0.06) 45%,
rgba(0,0,0,0) 70%);
pointer-events:none;
}
/* Overlay topográfico MUY sutil (sin moverse) */
.igm-media::after{
content:"";
position:absolute;
inset:0;
background-image: url("assets/images/ui/topo-lines.png"); /* tu patrón topográfico PNG/SVG */
background-size: cover;
background-position: center;
opacity: 0.14; /* clave: bajito */
mix-blend-mode: screen; /* se fusiona con el fondo */
pointer-events:none;
}
/* IMAGEN */
.igm-media__img{
display:block;
width:100%;
height:auto;
border-radius: 16px;
/* sutil “profundidad” */
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.10);
/* leve integración de color */
filter: saturate(1.02) contrast(1.03);
}
/* viñeta suave para que no se vea “pegada” */
.igm-media .igm-media__img{
-webkit-mask-image: radial-gradient(circle at 50% 45%,
rgba(0,0,0,1) 70%,
rgba(0,0,0,0.92) 82%,
rgba(0,0,0,0.75) 92%,
rgba(0,0,0,0.0) 100%);
mask-image: radial-gradient(circle at 50% 45%,
rgba(0,0,0,1) 70%,
rgba(0,0,0,0.92) 82%,
rgba(0,0,0,0.75) 92%,
rgba(0,0,0,0.0) 100%);
}
.borde-fotos-peq{
padding:10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgb(71, 166, 177);
border-radius: 16px;
box-shadow: 0 16px 34px rgba(0,0,0,0.32);
}
.fecha-historica{
color: #8ee7f1; /* tu turquesa institucional */
font-weight: 700;
}
.referente{
color: #8ee7f1; /* tu turquesa institucional */
font-weight: 700;
font-size:22px !important;
}
/***equipo directivo***/
/* === EQUIPO DIRECTIVO === */
.EquipoDirectivo{
/*background: url('../images/fondo04.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;*/
padding-top: 40px;
padding-bottom: 60px;
margin-top: 150px;
}
/* Swiper */
.EquipoDirectivo .EquipoDirectivo__swiper{
width: 100%;
max-width: 1300px;
margin: auto;
padding-bottom: 48px;
/* ✅ un poco más alto para que no “muerda” la paginación */
height: clamp(585px, 74vh, 760px);
}
/* Flechas */
.EquipoDirectivo .swiper-button-next,
.EquipoDirectivo .swiper-button-prev{
color: #2bbec7;
z-index: 20;
width: 60px;
height: 60px;
}
/* tamaño del icono */
.EquipoDirectivo .swiper-button-next:after,
.EquipoDirectivo .swiper-button-prev:after{
font-size: 42px; /* más grande */
font-weight: bold;
}
/* separarlas de las cards */
.EquipoDirectivo .swiper-button-prev{
left: -17px;
}
.EquipoDirectivo .swiper-button-next{
right: -17px;
}
/* ===== Color bullets personalizado ===== */
.EquipoDirectivo .bullets-color .swiper-pagination-bullet{
background: rgba(255,255,255,0.35); /* bullets normales */
}
.EquipoDirectivo .bullets-color .swiper-pagination-bullet-active{
background: #5ad0d8; /* bullet activo */
opacity: 1;
transform: scale(1.15);
}
/* Bullets */
.EquipoDirectivo .swiper-pagination{
/* ✅ BAJAR 10px: antes estaba en 10px, ahora lo bajamos 10px */
bottom: 0px !important;
/* ✅ por si algún contenedor los estaba recortando */
z-index: 30;
}
.EquipoDirectivo .swiper-pagination-bullet{
width: 12px;
height: 12px;
opacity: .55;
}
.EquipoDirectivo .swiper-pagination-bullet-active{
opacity: 1;
}
/* ===== Tarjeta ===== */
.EquipoDirectivo .ed-card{
width: 100%;
max-width: 360px;
margin: 0 auto;
border-radius: 10px;
background: #012c3b82;
box-shadow: 0 12px 30px rgba(0,0,0,0.18);
overflow: hidden;
padding: 18px 18px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.EquipoDirectivo .ed-card{
position: relative; /* clave para el overlay */
}
/* Fondo decorativo dentro de la card */
.EquipoDirectivo .ed-card::before{
content: "";
position: absolute;
inset: 0;
background-image: url("assets/images/equipo-directivo/avatar_cmd.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: .90; /* ajusta intensidad */
pointer-events: none;
z-index: 0;
}
/* Todo el contenido arriba del fondo */
.EquipoDirectivo .ed-card > *{
position: relative;
z-index: 1;
}
/* ===== ÓVALO ===== */
.EquipoDirectivo .ed-avatar{
width: 92%;
max-width: 320px;
height: 390px;
margin-top: 4px;
background: #fff;
border: 10px solid #fff;
border-radius: 50%;
box-shadow: 0 16px 28px rgba(0,0,0,0.18);
overflow: hidden;
position: relative;
}
/* imagen recortada */
.EquipoDirectivo .ed-avatar img{
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: 118%;
height: 118%;
object-fit: cover;
object-position: center;
display: block;
}
/* ===== Textos ===== */
.EquipoDirectivo .ed-body{
width: 100%;
text-align: center;
padding: 14px 18px 0;
}
.EquipoDirectivo .ed-nombre{
margin: 10px 0 10px;
font-size: clamp(0.95rem, 1vw, 1.15rem); /* un poco más chico */
font-weight: 800;
color: #5ad0d8;
white-space: nowrap; /* siempre una línea */
text-align: center; /* centrado */
width: 100%; /* centra correctamente */
text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
/* ✅ cards iguales aunque el puesto sea largo */
.EquipoDirectivo .ed-cargo{
padding: 6px 0 12px;
border-bottom: 1px solid rgba(0,0,0,0.08);
min-height: 96px;
display: flex;
flex-direction: column;
justify-content: center;
}
.EquipoDirectivo .ed-grado{
font-size: 1.05rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
line-height: 1.15;
}
/* ✅ puesto máximo 3 líneas */
.EquipoDirectivo .ed-puesto{
font-size: 0.95rem;
color: #ffffff;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* ==== MAIL FULL WIDTH (caja entera a ambos costados) ==== */
.EquipoDirectivo .ed-mails{
width: calc(100% + 36px);
margin: 14px -18px 0;
/* ✅ más “alto” el bloque mail (como tu maqueta) */
padding: 16px 12px 18px;
background: #012c3b;
border-top: 1px solid rgba(0,0,0,0.06);
display: flex;
justify-content: center;
align-items: center;
min-height: 64px;
}
.EquipoDirectivo .ed-mail{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.80rem;
color: #83dde3;
font-size:16px;
padding: 6px 10px;
border-radius: 8px;
cursor: default;
user-select: text;
}
.EquipoDirectivo .ed-mail span{
word-break: break-word;
line-height: 1.1;
}
/* Responsive */
@media (max-width: 576px){
.EquipoDirectivo .ed-card{ max-width: 340px; }
.EquipoDirectivo .ed-avatar{ height: 380px; }
}
.EquipoDirectivo .swiper-pagination-bullet{
transition: all .25s ease;
}
.EquipoDirectivo .ed-card{
transition: transform .25s ease, box-shadow .25s ease;
}
.EquipoDirectivo .ed-card:hover{
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.actualiza{
color: #d3ab10
}
/******formulario de contacto**********/
/* Estilo general del formulario */
/* Inputs y textarea: estado normal */
#contact input.form-control,
#contact textarea.form-control,
#contact .form-select {
background-color: #f0f2f5 !important; /* gris suave */
color: #222 !important; /* texto negro */
border: 2px solid #d2dadc !important; /* borde gris */
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 0.95rem !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; /* sombra tenue */
outline: none !important;
appearance: none !important;
background-clip: padding-box !important;
transition: all 0.3s ease !important;
}
/* Placeholder negro */
#contact input.form-control::placeholder,
#contact textarea.form-control::placeholder,
#contact .form-select option:disabled {
color: #222 !important;
opacity: 1 !important;
}
/* Focus: sombra y borde más pronunciados */
#contact input.form-control:focus,
#contact textarea.form-control:focus,
#contact .form-select:focus {
border-color: #555 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
/* Botones con sombra */
#contact button {
background-color: #059aa7 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-size: 0.95rem !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
#contact button:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
background-color: #06c4df !important;
}
/* Opción por defecto deshabilitada */
#contact .form-select option:disabled {
background-color: #cce0ff !important; /* azul tenue */
color: #000 !important; /* texto negro */
}
#contact .text-muted-form{
color:#63e7dc !important;
}
/***contacto oficina de partes*******/
/* Estilo general del formulario */
/* Inputs y textarea: estado normal */
#contact_ofpartes input.form-control,
#contact_ofpartes textarea.form-control,
#contact_ofpartes .form-select {
background-color: #f0f2f5 !important; /* gris suave */
color: #222 !important; /* texto negro */
border: 2px solid #d2dadc !important; /* borde gris */
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 0.95rem !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; /* sombra tenue */
outline: none !important;
appearance: none !important;
background-clip: padding-box !important;
transition: all 0.3s ease !important;
}
/* Placeholder negro */
#contact_ofpartes input.form-control::placeholder,
#contact_ofpartes textarea.form-control::placeholder,
#contact_ofpartes .form-select option:disabled {
color: #222 !important;
opacity: 1 !important;
}
/* Focus: sombra y borde más pronunciados */
#contact_ofpartes input.form-control:focus,
#contact_ofpartes textarea.form-control:focus,
#contact_ofpartes .form-select:focus {
border-color: #555 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
/* Botones con sombra */
#contact_ofpartes button {
background-color: #059aa7 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-size: 0.95rem !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
#contact_ofpartes button:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
background-color: #06c4df !important;
}
/* Opción por defecto deshabilitada */
#contact_ofpartes .form-select option:disabled {
background-color: #cce0ff !important; /* azul tenue */
color: #000 !important; /* texto negro */
}
#contact_ofpartes .text-muted-form{
color:#63e7dc !important;
}
/******formulario de contacto**********/
/* Estilo general del formulario */
/* Inputs y textarea: estado normal */
#contact input.form-control,
#contact textarea.form-control,
#contact .form-select {
background-color: #f0f2f5 !important; /* gris suave */
color: #222 !important; /* texto negro */
border: 2px solid #d2dadc !important; /* borde gris */
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 0.95rem !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; /* sombra tenue */
outline: none !important;
appearance: none !important;
background-clip: padding-box !important;
transition: all 0.3s ease !important;
}
/* Placeholder negro */
#contact input.form-control::placeholder,
#contact textarea.form-control::placeholder,
#contact .form-select option:disabled {
color: #222 !important;
opacity: 1 !important;
}
/* Focus: sombra y borde más pronunciados */
#contact input.form-control:focus,
#contact textarea.form-control:focus,
#contact .form-select:focus {
border-color: #555 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
/* Botones con sombra */
#contact button {
background-color: #059aa7 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-size: 0.95rem !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
#contact button:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
background-color: #06c4df !important;
}
/* Opción por defecto deshabilitada */
#contact .form-select option:disabled {
background-color: #cce0ff !important; /* azul tenue */
color: #000 !important; /* texto negro */
}
#contact .text-muted-form{
color:#63e7dc !important;
}
/***contacto oficina de partes*******/
/* Estilo general del formulario */
/* Inputs y textarea: estado normal */
#contact_ofpartes input.form-control,
#contact_ofpartes textarea.form-control,
#contact_ofpartes .form-select {
background-color: #f0f2f5 !important; /* gris suave */
color: #222 !important; /* texto negro */
border: 2px solid #d2dadc !important; /* borde gris */
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 0.95rem !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; /* sombra tenue */
outline: none !important;
appearance: none !important;
background-clip: padding-box !important;
transition: all 0.3s ease !important;
}
/* Placeholder negro */
#contact_ofpartes input.form-control::placeholder,
#contact_ofpartes textarea.form-control::placeholder,
#contact_ofpartes .form-select option:disabled {
color: #222 !important;
opacity: 1 !important;
}
/* Focus: sombra y borde más pronunciados */
#contact_ofpartes input.form-control:focus,
#contact_ofpartes textarea.form-control:focus,
#contact_ofpartes .form-select:focus {
border-color: #555 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
/* Botones con sombra */
#contact_ofpartes button {
background-color: #059aa7 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-size: 0.95rem !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
#contact_ofpartes button:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
background-color: #06c4df !important;
}
/* Opción por defecto deshabilitada */
#contact_ofpartes .form-select option:disabled {
background-color: #cce0ff !important; /* azul tenue */
color: #000 !important; /* texto negro */
}
#contact_ofpartes .text-muted-form{
color:#63e7dc !important;
}
/***contacto sugerencias y reclamos*******/
/* Estilo general del formulario */
/* Inputs y textarea: estado normal */
#contact_sug input.form-control,
#contact_sug textarea.form-control,
#contact_sug .form-select {
background-color: #f0f2f5 !important; /* gris suave */
color: #222 !important; /* texto negro */
border: 2px solid #d2dadc !important; /* borde gris */
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 0.95rem !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important; /* sombra tenue */
outline: none !important;
appearance: none !important;
background-clip: padding-box !important;
transition: all 0.3s ease !important;
}
/* Placeholder negro */
#contact_sug input.form-control::placeholder,
#contact_sug textarea.form-control::placeholder,
#contact_sug .form-select option:disabled {
color: #222 !important;
opacity: 1 !important;
}
/* Focus: sombra y borde más pronunciados */
#contact_sug input.form-control:focus,
#contact_sug textarea.form-control:focus,
#contact_sug .form-select:focus {
border-color: #555 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
outline: none !important;
}
/* Botones con sombra */
#contact_sug button {
background-color: #059aa7 !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: 10px 18px !important;
font-size: 0.95rem !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
#contact_sug button:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
transform: translateY(-1px) !important;
background-color: #06c4df !important;
}
/* Opción por defecto deshabilitada */
#contact_sug .form-select option:disabled {
background-color: #cce0ff !important; /* azul tenue */
color: #000 !important; /* texto negro */
}
#contact_sug .text-muted-form{
color:#63e7dc !important;
}
/*******descargas gratuitas*******/
.list-group-item {
/*border: 1px solid #dcdee0ff;*/
color: #0d6efd;
background-color: #0d5b69;
transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s ease;
}
.list-group-item:hover {
background-color: #0e9da7 !important;
color: #fff !important;
transform: translateY(-2px); /* pequeño efecto de levantar */
box-shadow: 0 4px 8px #0e9da7; /* sombra sutil */
}
.custom-tabs .nav-link {
border-radius: 8px;
padding: 10px 25px;
margin: 0 8px;
color: #0d6efd;
background-color: #fff;
border: 1px solid #0d6efd;
transition: all 0.3s ease;
font-weight: 500;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.custom-tabs .nav-link:hover {
background-color: #0d6efd;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
.custom-tabs .nav-link.active {
background-color: #0d6efd;
color: #fff;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
font-weight: 600;
}
.custom-tabs .nav-item {
list-style: none; /* Quita los puntos */
}
.mapas{
font-size:18px !important
}
/***************************************************
ACTIVIDADES DEL IGM - ESTILOS EXCLUSIVOS
prefijo: igm-act-
***************************************************/
/***************************************************
PRELOADER ACTIVIDADES IGM
***************************************************/
.igm-act-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(180deg, rgba(2,27,35,0.82), rgba(3,39,50,0.92)),
rgba(0,0,0,0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 1;
visibility: visible;
transition: opacity .45s ease, visibility .45s ease;
}
.igm-act-preloader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.igm-act-preloader__box {
width: min(92vw, 440px);
padding: 34px 28px;
text-align: center;
border-radius: 24px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(142,231,241,0.14);
box-shadow:
0 24px 60px rgba(0,0,0,0.35),
0 0 24px rgba(28,167,199,0.12);
position: relative;
overflow: hidden;
}
.igm-act-preloader__box::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at top left, rgba(142,231,241,0.12), transparent 35%),
radial-gradient(circle at bottom right, rgba(28,167,199,0.10), transparent 35%);
pointer-events: none;
}
/* ── Anillos con ícono centrado dentro ── */
.igm-act-preloader__rings {
position: relative;
width: 110px;
height: 110px;
margin: 0 auto 20px;
}
.igm-act-preloader__rings span {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(142,231,241,0.18);
animation: igmActPulse 2.2s infinite ease-in-out;
}
.igm-act-preloader__rings span:nth-child(2) {
inset: 10px;
animation-delay: .25s;
border-color: rgba(28,167,199,0.24);
}
.igm-act-preloader__rings span:nth-child(3) {
inset: 22px;
animation-delay: .5s;
border-color: rgba(255,255,255,0.16);
}
/* ── Ícono centrado dentro de los anillos ── */
.igm-act-preloader__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
margin: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1ca7c7, #0b6a85);
color: #fff;
font-size: 1.2rem;
box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.igm-act-preloader__title {
margin: 0 0 10px;
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
}
.igm-act-preloader__text {
margin: 0 0 18px;
color: rgba(255,255,255,0.82);
line-height: 1.7;
font-size: 0.96rem;
}
.igm-act-preloader__bar {
width: 100%;
height: 8px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
}
.igm-act-preloader__bar-fill {
width: 42%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #1ca7c7, #8ee7f1, #1ca7c7);
background-size: 200% 100%;
animation: igmActBarMove 1.6s linear infinite;
}
@keyframes igmActPulse {
0%, 100% {
transform: scale(1);
opacity: .9;
}
50% {
transform: scale(1.06);
opacity: .45;
}
}
@keyframes igmActBarMove {
0% {
transform: translateX(-20%);
background-position: 0% 50%;
}
100% {
transform: translateX(140%);
background-position: 100% 50%;
}
}
@media (max-width: 768px) {
.igm-act-preloader__box {
padding: 26px 18px;
border-radius: 18px;
width: min(92vw, 360px);
}
.igm-act-preloader__rings {
width: 84px;
height: 84px;
margin: 0 auto 16px;
}
.igm-act-preloader__icon {
width: 46px;
height: 46px;
font-size: 1rem;
}
.igm-act-preloader__title {
font-size: 1.08rem;
line-height: 1.35;
margin-bottom: 8px;
}
.igm-act-preloader__text {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 16px;
}
.igm-act-preloader__bar {
height: 7px;
}
}
/***end preloader*****************/
.igm-act-wrapper{
padding: 10px 0;
}
/* INTRO TEXTO */
.igm-act-intro-box{
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 22px 26px;
color: rgba(255,255,255,0.90);
line-height: 1.8;
box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
/* CONTENEDOR TABLA */
.igm-act-table-container{
margin-top: 20px;
background: rgba(4,28,36,0.45);
border: 1px solid rgba(142,231,241,0.08);
border-radius: 18px;
padding: 22px;
box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
/* TABLA */
.igm-act-table{
color: #fff;
border-collapse: separate !important;
border-spacing: 0 12px !important;
}
/* HEADER TABLA */
.igm-act-table thead th{
background: rgba(10,93,115,0.95);
border: none !important;
font-size: 14px;
font-weight: 600;
padding: 16px 14px !important;
text-align: center;
color: #fff;
}
/* FILAS */
/* base más refinada */
.igm-act-table tbody tr{
position: relative;
background: rgba(255,255,255,0.04);
transition:
transform .35s cubic-bezier(.4,0,.2,1),
box-shadow .35s ease,
background-color .35s ease,
border-color .35s ease;
}
/* glow institucional de fondo */
.igm-act-table tbody tr::after{
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
90deg,
rgba(142,231,241,0.10) 0%,
rgba(142,231,241,0.03) 45%,
rgba(142,231,241,0.00) 100%
);
transition: opacity .35s ease;
}
/* hover principal */
.igm-act-table tbody tr:hover{
transform: translateY(-4px) scale(1.005);
background: rgba(255,255,255,0.08);
box-shadow:
0 14px 28px rgba(0,0,0,0.24),
0 0 18px rgba(28,167,199,0.12);
}
.igm-act-table tbody tr:hover::after{
opacity: 1;
}
.igm-act-table tbody td{
border: none !important;
padding: 18px 12px !important;
text-align: center;
}
/* IMAGEN NOTICIA */
.igm-act-thumb-box{
transition:
transform .35s cubic-bezier(.4,0,.2,1),
box-shadow .35s ease,
border-color .35s ease;
}
.igm-act-table tbody tr:hover .igm-act-thumb-box{
transform: scale(1.06);
border-color: rgba(142,231,241,0.35);
box-shadow:
0 10px 22px rgba(0,0,0,0.25),
0 0 12px rgba(142,231,241,0.18);
}
.igm-act-thumb-img{
transition: transform .45s ease;
}
.igm-act-table tbody tr:hover .igm-act-thumb-img{
transform: scale(1.08);
}
/***************************************************
TÍTULO
***************************************************/
.igm-act-title-link{
transition:
color .25s ease,
text-shadow .25s ease;
}
.igm-act-table tbody tr:hover .igm-act-title-link{
color: #dffcff;
text-shadow: 0 0 10px rgba(142,231,241,0.18);
}
/***************************************************
FECHA
***************************************************/
.igm-act-date{
transition: color .25s ease, transform .25s ease;
}
.igm-act-table tbody tr:hover .igm-act-date{
color: #baf6ff;
}
/* BOTON VER NOTICIA */
.igm-act-btn-view{
background: linear-gradient(135deg,#1ca7c7,#0b6a85);
border: none;
color: #fff;
padding: 9px 16px;
border-radius: 10px;
font-weight: 600;
transition: all .2s ease;
}
.igm-act-btn-view:hover{
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
/***************************************************
DATATABLE PERSONALIZADO
***************************************************/
/***************************************************
PAGINADOR DATATABLE - FIX VISUAL
***************************************************/
/* contenedor del paginador */
.dataTables_wrapper .dataTables_paginate {
float: none !important;
text-align: center !important;
margin-top: 16px;
}
/* lista del paginador */
.dataTables_wrapper .dataTables_paginate ul.pagination {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none !important;
}
/* quitar puntos / viñetas */
.dataTables_wrapper .dataTables_paginate ul.pagination li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination li::marker {
content: "" !important;
}
/* links/botones */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
min-width: 42px;
height: 42px;
padding: 0 14px;
border: 0 !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.08) !important;
color: #ffffff !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
box-shadow: none !important;
transition: all .25s ease;
}
/* hover */
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
background: rgba(255,255,255,0.14) !important;
color: #ffffff !important;
transform: translateY(-1px);
}
/* activo */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
background: linear-gradient(135deg, #1ca7c7, #0b6a85) !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}
/* deshabilitado */
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
background: rgba(255,255,255,0.04) !important;
color: rgba(255,255,255,0.38) !important;
opacity: 1;
cursor: not-allowed;
}
/* móvil */
@media (max-width: 768px) {
.dataTables_wrapper .dataTables_paginate ul.pagination {
gap: 6px;
flex-wrap: wrap;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
min-width: 38px;
height: 38px;
padding: 0 10px;
font-size: 14px;
}
}
/***************************************************
RIPPLE EFFECT PAGINADOR
***************************************************/
.dataTables_wrapper .dataTables_paginate .page-link{
position: relative;
overflow: hidden;
}
/* onda ripple */
.igm-ripple-effect{
position:absolute;
border-radius:50%;
transform:scale(0);
animation:igmRippleAnim 0.6s linear;
background:rgba(255,255,255,0.5);
pointer-events:none;
}
@keyframes igmRippleAnim{
to{
transform:scale(4);
opacity:0;
}
}
/***************************************************
MODAL PDF - ACTIVIDADES IGM
***************************************************/
.igm-act-modal-dialog{
width: min(96vw, 1400px);
max-width: min(96vw, 1400px);
height: 92vh;
margin: 4vh auto;
}
.igm-act-modal-content{
height: 92vh;
border: 0;
border-radius: 16px;
overflow: hidden;
background: #f2f2f2;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,0.30);
}
.igm-act-modal-header{
background: #f3f3f3;
border-bottom: 1px solid rgba(0,0,0,0.10);
padding: 14px 18px;
flex: 0 0 auto;
}
.igm-act-modal-body{
flex: 1 1 auto;
min-height: 0;
padding: 0;
background: #e9e9e9;
}
.igm-act-modal-footer{
background: #f3f3f3;
border-top: 1px solid rgba(0,0,0,0.08);
justify-content: center;
padding: 14px;
flex: 0 0 auto;
}
.igm-act-pdf-frame{
width: 100%;
height: 100%;
border: 0;
display: block;
background: #e9e9e9;
}
/* Botones */
.igm-act-modal-actions button{
border: none;
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.igm-act-btn-control{
background: #5d5d5d;
color: #fff;
}
.igm-act-btn-close{
background: #e9424b;
color: #fff;
}
/* Maximizado */
.igm-act-modal.igm-act-modal-maximized .igm-act-modal-dialog{
width: 100vw;
max-width: 100vw;
height: 100vh;
margin: 0;
}
.igm-act-modal.igm-act-modal-maximized .igm-act-modal-content{
height: 100vh;
border-radius: 0;
}
/* Minimizado */
.igm-act-modal.igm-act-modal-minimized .igm-act-modal-body,
.igm-act-modal.igm-act-modal-minimized .igm-act-modal-footer{
display: none;
}
.igm-act-modal.igm-act-modal-minimized .igm-act-modal-dialog{
width: min(520px, calc(100vw - 24px));
max-width: min(520px, calc(100vw - 24px));
height: auto;
margin: auto;
}
.igm-act-modal.igm-act-modal-minimized .igm-act-modal-content{
height: auto;
}
/* móvil */
@media (max-width: 768px){
.igm-act-modal-dialog{
width: 100vw;
max-width: 100vw;
height: 100vh;
margin: 0;
}
.igm-act-modal-content{
height: 100vh;
border-radius: 0;
}
.igm-act-modal-actions button{
width: 38px;
height: 38px;
}
.igm-act-modal.igm-act-modal-minimized .igm-act-modal-dialog{
width: 94vw;
max-width: 94vw;
}
}
/***************************************************
ARTÍCULOS DE PRENSA - LISTADO LIMPIO + MODAL
***************************************************/
.page-prensa-igm .prensa-igm-list-wrap{
padding: 28px;
}
.prensa-igm-intro-box{
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 22px 24px;
color: rgba(255,255,255,0.9);
line-height: 1.9;
box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.prensa-igm-tools{
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
justify-content: space-between;
}
.prensa-igm-search{
position: relative;
flex: 1 1 auto;
min-width: 320px;
}
.prensa-igm-search i{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.6);
pointer-events: none;
}
.prensa-igm-search input{
width: 100%;
height: 48px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.05);
color: #fff;
padding: 0 16px 0 42px;
outline: none;
}
.prensa-igm-search input::placeholder{
color: rgba(255,255,255,0.55);
}
.prensa-igm-filters{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.prensa-igm-chip{
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.84);
border-radius: 999px;
padding: 10px 16px;
font-weight: 600;
transition: all .25s ease;
}
.prensa-igm-chip:hover,
.prensa-igm-chip.is-active{
background: linear-gradient(135deg, #1ca7c7, #0b6a85);
color: #fff;
border-color: transparent;
}
.prensa-igm-list{
display: flex;
flex-direction: column;
gap: 18px;
}
.prensa-igm-item{
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0,0,0,0.18);
transition: all .35s ease;
}
.prensa-igm-item:hover{
transform: translateY(-3px);
box-shadow: 0 18px 34px rgba(0,0,0,0.24);
border-color: rgba(142,231,241,0.18);
}
.prensa-igm-item__head{
display: grid;
grid-template-columns: 1fr auto;
gap: 22px;
align-items: center;
padding: 22px 24px;
}
.prensa-igm-item__content--full{
min-width: 0;
}
.prensa-igm-item__meta{
display: flex;
flex-wrap: wrap;
gap: 14px;
color: rgba(255,255,255,0.68);
font-size: 0.92rem;
margin-bottom: 12px;
}
.prensa-igm-item__content h3{
color: #fff;
font-size: 1.18rem;
line-height: 1.55;
margin: 0;
}
.prensa-igm-item__actions{
display: flex;
flex-direction: column;
gap: 10px;
min-width: 190px;
}
.prensa-igm-toggle,
.prensa-igm-link-btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.08);
color: #fff;
transition: all .25s ease;
}
.prensa-igm-toggle{
cursor: pointer;
}
.prensa-igm-toggle:hover,
.prensa-igm-link-btn:hover{
color: #fff;
background: linear-gradient(135deg, #1ca7c7, #0b6a85);
}
.prensa-igm-link-btn--alt{
background: rgba(142,231,241,0.08);
}
.prensa-igm-empty{
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 18px;
background: rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.12);
color: rgba(255,255,255,0.78);
}
.prensa-igm-empty i{
font-size: 2rem;
color: #8ee7f1;
}
.prensa-igm-item.is-hidden-initial{
display: none;
}
/***************************************************
MODAL RECORTE PRENSA
***************************************************/
.prensa-igm-modal .modal-content{
background: rgba(8, 28, 34, 0.96);
border: 1px solid rgba(142,231,241,0.12);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
.prensa-igm-modal__dialog{
max-width: min(1100px, 94vw);
}
.prensa-igm-modal__header{
padding: 16px 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
}
.prensa-igm-modal__title{
color: #fff;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.4;
padding-right: 14px;
padding-top:20px;
}
.prensa-igm-modal__close{
width: 42px;
height: 42px;
border: 0;
border-radius: 12px;
background: rgba(255,255,255,0.08);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .25s ease;
}
.prensa-igm-modal__close:hover{
background: linear-gradient(135deg, #1ca7c7, #0b6a85);
}
.prensa-igm-modal__body{
padding: 18px;
}
.prensa-igm-modal__imagebox{
width: 100%;
border-radius: 16px;
overflow: auto;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
padding: 14px;
max-height: 78vh;
}
.prensa-igm-modal__imagebox img{
width: 100%;
height: auto;
display: block;
border-radius: 12px;
background: #fff;
}
@media (max-width: 991px){
.prensa-igm-item__head{
grid-template-columns: 1fr;
}
.prensa-igm-item__actions{
flex-direction: row;
flex-wrap: wrap;
min-width: 0;
}
}
@media (max-width: 768px){
.page-prensa-igm .prensa-igm-list-wrap{
padding: 18px;
}
.prensa-igm-tools{
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.prensa-igm-search{
flex: 0 0 auto !important;
min-width: 100%;
width: 100%;
}
.prensa-igm-filters{
width: 100%;
justify-content: flex-start;
}
.prensa-igm-item__head{
padding: 18px;
gap: 16px;
}
.prensa-igm-item__content h3{
font-size: 1.02rem;
}
.prensa-igm-item__actions{
flex-direction: column;
}
.prensa-igm-modal__dialog{
max-width: 96vw;
margin: 0.8rem auto;
}
.prensa-igm-modal__header{
padding: 14px 16px;
}
.prensa-igm-modal__body{
padding: 12px;
}
.prensa-igm-modal__imagebox{
padding: 8px;
max-height: 72vh;
}
}
/************/
/***************************************************
LIGHTBOX GLOBAL IGM
***************************************************/
.js-igm-lightbox {
cursor: zoom-in;
transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.js-igm-lightbox:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 18px 30px rgba(0,0,0,0.22);
}
.igm-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility .3s ease;
}
.igm-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.igm-lightbox__backdrop {
position: absolute;
inset: 0;
background:
linear-gradient(rgba(2, 22, 26, 0.82), rgba(2, 22, 26, 0.9)),
rgba(0,0,0,0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.igm-lightbox__dialog {
position: relative;
z-index: 2;
width: min(92vw, 1200px);
height: min(88vh, 900px);
display: grid;
grid-template-columns: 64px 1fr 64px;
align-items: center;
gap: 18px;
transform: scale(.94);
transition: transform .3s ease;
}
.igm-lightbox.is-open .igm-lightbox__dialog {
transform: scale(1);
}
.igm-lightbox__figure-wrap {
position: relative;
width: 100%;
height: 100%;
border-radius: 22px;
overflow: hidden;
background: rgba(9, 36, 43, 0.88);
border: 1px solid rgba(142, 231, 241, 0.16);
box-shadow: 0 28px 70px rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.igm-lightbox__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
border-radius: 14px;
background: #fff;
opacity: 1;
transform: scale(1);
transition:
opacity .46s ease,
transform .50s ease;
will-change: opacity, transform;
}
.igm-lightbox__img.is-changing {
opacity: 0;
transform: scale(0.985);
}
.igm-lightbox__caption {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(0, 71, 93, 0.78);
border: 1px solid rgba(142, 231, 241, 0.14);
color: #fff;
font-size: 0.98rem;
line-height: 1.5;
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
opacity: 1;
transform: translateY(0);
transition:
opacity .34s ease,
transform .34s ease;
}
.igm-lightbox__caption.is-changing {
opacity: 0;
transform: translateY(8px);
}
.igm-lightbox__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
width: 48px;
height: 48px;
border: 0;
border-radius: 14px;
background: rgba(255,255,255,0.10);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all .25s ease;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.igm-lightbox__close:hover {
background: linear-gradient(135deg, #1ca7c7, #0b6a85);
color: #fff;
}
.igm-lightbox__nav {
width: 54px;
height: 54px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,0.10);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: all .25s ease;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.igm-lightbox__nav:hover {
background: linear-gradient(135deg, #1ca7c7, #0b6a85);
color: #fff;
transform: scale(1.06);
}
.igm-lightbox__nav.is-hidden {
opacity: 0;
pointer-events: none;
}
body.igm-lightbox-open {
overflow: hidden;
}
@media (max-width: 768px) {
.igm-lightbox__dialog {
width: min(96vw, 96vw);
height: min(84vh, 84vh);
grid-template-columns: 44px 1fr 44px;
gap: 8px;
}
.igm-lightbox__figure-wrap {
padding: 10px;
border-radius: 16px;
}
.igm-lightbox__caption {
left: 10px;
right: 10px;
bottom: 10px;
padding: 10px 12px;
font-size: 0.9rem;
}
.igm-lightbox__close {
top: 10px;
right: 10px;
width: 42px;
height: 42px;
border-radius: 12px;
}
.igm-lightbox__nav {
width: 40px;
height: 40px;
font-size: 0.95rem;
}
}
/***************************************************
ESTRUCTURA ADMINISTRATIVA / ORGANIGRAMA
Solo para esta imagen
***************************************************/
.img-estructura-admin {
display: block;
width: 100%;
max-width: 980px;
height: auto !important;
object-fit: contain !important;
margin: 0 auto;
border-radius: 10px;
}
/* Contenedor opcional para centrar mejor la imagen */
.igm-media--estructura {
display: flex;
justify-content: center;
align-items: center;
padding: 14px;
}
/* Si quieres que la miniatura no se vea tan pequeña */
.igm-media--estructura .img-estructura-admin {
max-height: 520px;
}
/* Ajuste responsive */
@media (max-width: 768px) {
.igm-media--estructura {
padding: 8px;
}
.igm-media--estructura .img-estructura-admin {
max-height: none;
width: 100%;
height: auto !important;
}
}
/***************************************************
ESTRUCTURA ADMINISTRATIVA / ORGANIGRAMA
Miniatura + lightbox sin fondo blanco
***************************************************/
/* Miniatura */
.igm-media--estructura {
display: flex;
justify-content: center;
align-items: center;
padding: 14px;
}
.img-estructura-admin {
display: block;
width: 100%;
max-width: 980px;
height: auto !important;
object-fit: contain !important;
margin: 0 auto;
border-radius: 10px;
}
/* Cuando el lightbox está mostrando una imagen marcada como "sin fondo" */
.igm-lightbox.lightbox-sin-fondo .igm-lightbox__img {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* También quita el panel inferior blanco percibido alrededor de la imagen */
.igm-lightbox.lightbox-sin-fondo .igm-lightbox__figure-wrap {
background: rgba(9, 36, 43, 0.72);
}
/* Opcional: si quieres que el organigrama se vea más limpio dentro del visor */
.igm-lightbox.lightbox-sin-fondo .igm-lightbox__caption {
background: rgba(0, 71, 93, 0.82);
}
@media (max-width: 768px) {
.igm-media--estructura {
padding: 8px;
}
.img-estructura-admin {
max-width: 100%;
height: auto !important;
}
}
.img-estructura-admin {
width: auto !important;
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
}
/***************************************************
BLOQUE FLOTANTE - ESTRUCTURA ADMINISTRATIVA (FINAL)
***************************************************/
.estructura-admin-note {
max-width: 720px;
margin: 0 auto;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 16px;
/* Glass effect */
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(98, 222, 231, 0.18);
border-radius: 18px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* Sombra elegante */
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255,255,255,0.04);
/* Efecto flotante */
transform: translateY(6px);
transition: all .3s ease;
}
/* Hover elegante */
.estructura-admin-note:hover {
border-color: rgba(98, 222, 231, 0.35);
transform: translateY(2px);
}
/* ICONO */
.estructura-admin-note__icon {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
rgba(98, 222, 231, 0.18),
rgba(12, 177, 189, 0.12)
);
border: 1px solid rgba(98, 222, 231, 0.22);
color: #62dee7;
font-size: 1.3rem;
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
/* CONTENIDO */
.estructura-admin-note__content {
text-align: left;
}
/* TÍTULO */
.estructura-admin-note__content h5 {
margin: 0 0 4px;
color: #62dee7;
font-size: 1rem;
font-weight: 700;
text-align: left;
}
/* TEXTO */
.estructura-admin-note__content p {
margin: 0;
color: rgba(255,255,255,0.88);
line-height: 1.6;
font-size: 0.95rem;
}
/***************************************************
RESPONSIVE
***************************************************/
@media (max-width: 768px) {
.estructura-admin-note {
flex-direction: column;
text-align: center;
padding: 16px 18px;
gap: 12px;
}
.estructura-admin-note__icon {
width: 46px;
height: 46px;
font-size: 1.05rem;
}
.estructura-admin-note__content h5 {
font-size: 0.96rem;
text-align: center;
}
.estructura-admin-note__content p {
font-size: 0.9rem;
text-align: center;
}
}
/***noticias home******/
.color_fecha{
color:#62dee7;
font-weight:bold;
}
/*
Bloque completo para la pestaña "Mapas IGM" de Descargas Gratuitas.
Incluye:
- Menú de categorías elegante
- Tarjetas con miniatura
- Integración con el lightbox global existente (.js-igm-lightbox)
- Botón para abrir tamaño real
Nota:
- No modifica la pestaña de Grillas IGM.
- Requiere que ya exista el lightbox global del sitio.
*/
/***************************************************
DESCARGAS GRATUITAS - NAVEGACIÓN DE CATEGORÍAS
***************************************************/
.descargas-mapas-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.descargas-mapas-nav__btn {
appearance: none;
border: 1px solid rgba(98, 222, 231, 0.18);
background: linear-gradient(180deg, rgba(6, 84, 96, 0.72), rgba(3, 42, 52, 0.86));
color: #e8fdff;
padding: 12px 16px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.25;
box-shadow: 0 10px 18px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.03);
transition: all .25s ease;
cursor: pointer;
}
.descargas-mapas-nav__btn:hover {
transform: translateY(-2px);
border-color: rgba(98, 222, 231, 0.30);
box-shadow: 0 16px 26px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.descargas-mapas-nav__btn.is-active {
background: linear-gradient(180deg, rgba(16, 155, 169, 0.95), rgba(6, 97, 108, 0.95));
color: #fff;
border-color: rgba(98, 222, 231, 0.45);
box-shadow: 0 16px 30px rgba(0,0,0,0.22), 0 0 12px rgba(98, 222, 231, 0.14);
}
/***************************************************
DESCARGAS GRATUITAS - MAPAS EN TARJETAS
***************************************************/
.mapa-bloque {
margin-bottom: 2.6rem;
}
.mapa-bloque.is-hidden {
display: none;
}
.mapa-titulo-bloque {
color: #7feaf2;
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 10px;
border-bottom: 1px solid rgba(98, 222, 231, 0.18);
}
.mapa-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 22px;
}
.mapa-card {
background: linear-gradient(180deg, rgba(4, 65, 79, 0.88), rgba(3, 42, 52, 0.92));
border: 1px solid rgba(98, 222, 231, 0.14);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0,0,0,0.16);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mapa-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 34px rgba(0,0,0,0.22);
border-color: rgba(98, 222, 231, 0.26);
}
.mapa-card__thumb-wrap {
position: relative;
padding: 12px 12px 0 12px;
}
.mapa-card__thumb {
width: 100%;
height: 260px;
object-fit: cover;
object-position: center top;
border-radius: 12px;
display: block;
cursor: zoom-in;
border: 1px solid rgba(98, 222, 231, 0.14);
box-shadow: 0 8px 18px rgba(0,0,0,0.16);
transition: transform .25s ease, box-shadow .25s ease;
}
.mapa-card:hover .mapa-card__thumb {
transform: scale(1.01);
box-shadow: 0 12px 22px rgba(0,0,0,0.2);
}
.mapa-card__body {
padding: 14px 14px 16px;
}
.mapa-card__title {
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 12px;
min-height: 44px;
}
.mapa-card__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mapa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 0.92rem;
transition: all .25s ease;
cursor: pointer;
}
.mapa-btn--preview {
background: linear-gradient(135deg, #1db7c7, #128ea4);
color: #fff;
border: 1px solid rgba(255,255,255,0.08);
}
.mapa-btn--preview:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.mapa-btn--full {
background: rgba(255,255,255,0.06);
color: #dffcff;
border: 1px solid rgba(98, 222, 231, 0.18);
}
.mapa-btn--full:hover {
color: #fff;
background: rgba(255,255,255,0.1);
border-color: rgba(98, 222, 231, 0.32);
}
.mapa-btn i {
font-size: 0.9rem;
}
@media (max-width: 768px) {
.mapa-card__thumb {
height: 220px;
}
.mapa-card__title {
min-height: auto;
}
.mapa-card__actions {
flex-direction: column;
}
.mapa-btn {
width: 100%;
}
}
/**************codigo para noticias modal***************/
/* Estilo exclusivo para el modal de noticias */
#noticias_index .btn-close-modal {
all: unset;
position: absolute;
top: 12px;
right: 15px;
font-size: 28px;
font-weight: bold;
color: #fff !important;
background-color: #dc3545;
border-radius: 50%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1060;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
line-height: 1;
text-align: center;
}
#noticias_index .btn-close-modal:hover {
background-color: #c82333;
transform: scale(1.05);
}
/* === CSS EQUIPO DIRECTIVO === */
.EquipoDirectivo{
margin-top: 150px;
}
/* Swiper */
.EquipoDirectivo .EquipoDirectivo__swiper{
width: 100%;
max-width: 1300px;
margin: auto;
padding-bottom: 48px;
/* ✅ un poco más alto para que no “muerda” la paginación */
height: clamp(585px, 74vh, 760px);
}
/* Flechas */
.EquipoDirectivo .swiper-button-next,
.EquipoDirectivo .swiper-button-prev{
color: #2bbec7;
z-index: 20;
width: 60px;
height: 60px;
}
/* tamaño del icono */
.EquipoDirectivo .swiper-button-next:after,
.EquipoDirectivo .swiper-button-prev:after{
font-size: 42px; /* más grande */
font-weight: bold;
}
/* separarlas de las cards */
.EquipoDirectivo .swiper-button-prev{
left: -17px;
}
.EquipoDirectivo .swiper-button-next{
right: -17px;
}
/* ===== Color bullets personalizado ===== */
.EquipoDirectivo .bullets-color .swiper-pagination-bullet{
background: rgba(255,255,255,0.35); /* bullets normales */
}
.EquipoDirectivo .bullets-color .swiper-pagination-bullet-active{
background: #5ad0d8; /* bullet activo */
opacity: 1;
transform: scale(1.15);
}
/* Bullets */
.EquipoDirectivo .swiper-pagination{
/* ✅ BAJAR 10px: antes estaba en 10px, ahora lo bajamos 10px */
bottom: 0px !important;
/* ✅ por si algún contenedor los estaba recortando */
z-index: 30;
}
.EquipoDirectivo .swiper-pagination-bullet{
width: 12px;
height: 12px;
opacity: .55;
}
.EquipoDirectivo .swiper-pagination-bullet-active{
opacity: 1;
}
/* ===== Tarjeta ===== */
.EquipoDirectivo .ed-card{
width: 100%;
max-width: 360px;
margin: 0 auto;
border-radius: 10px;
background: #012c3b82;
box-shadow: 0 12px 30px rgba(0,0,0,0.18);
overflow: hidden;
padding: 18px 18px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.EquipoDirectivo .ed-card{
position: relative; /* clave para el overlay */
}
/* Fondo decorativo dentro de la card */
.EquipoDirectivo .ed-card::before{
content: "";
position: absolute;
inset: 0;
background-image: url("assets/images/secciones/pages/equipo-directivo/avatar_cmd.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: .90; /* ajusta intensidad */
pointer-events: none;
z-index: 0;
}
/* Todo el contenido arriba del fondo */
.EquipoDirectivo .ed-card > *{
position: relative;
z-index: 1;
}
/* ===== ÓVALO ===== */
.EquipoDirectivo .ed-avatar{
width: 92%;
max-width: 320px;
height: 390px;
margin-top: 4px;
background: #fff;
border: 10px solid #fff;
border-radius: 50%;
box-shadow: 0 16px 28px rgba(0,0,0,0.18);
overflow: hidden;
position: relative;
}
/* imagen recortada */
.EquipoDirectivo .ed-avatar img{
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: 118%;
height: 118%;
object-fit: cover;
object-position: center;
display: block;
}
/* ===== Textos ===== */
.EquipoDirectivo .ed-body{
width: 100%;
text-align: center;
padding: 14px 18px 0;
}
.EquipoDirectivo .ed-nombre{
margin: 10px 0 10px;
font-size: clamp(0.95rem, 1vw, 1.15rem); /* un poco más chico */
font-weight: 800;
color: #5ad0d8;
white-space: nowrap; /* siempre una línea */
text-align: center; /* centrado */
width: 100%; /* centra correctamente */
text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
/* ✅ cards iguales aunque el puesto sea largo */
.EquipoDirectivo .ed-cargo{
padding: 6px 0 12px;
border-bottom: 1px solid rgba(0,0,0,0.08);
min-height: 96px;
display: flex;
flex-direction: column;
justify-content: center;
}
.EquipoDirectivo .ed-grado{
font-size: 1.05rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
line-height: 1.15;
}
/* ✅ puesto máximo 3 líneas */
.EquipoDirectivo .ed-puesto{
font-size: 0.95rem;
color: #ffffff;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
/* ==== MAIL FULL WIDTH (caja entera a ambos costados) ==== */
.EquipoDirectivo .ed-mails{
width: calc(100% + 36px);
margin: 14px -18px 0;
/* ✅ más “alto” el bloque mail (como tu maqueta) */
padding: 16px 12px 18px;
background: #012c3b;
border-top: 1px solid rgba(0,0,0,0.06);
display: flex;
justify-content: center;
align-items: center;
min-height: 64px;
}
.EquipoDirectivo .ed-mail{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.80rem;
color: #83dde3;
font-size:16px;
padding: 6px 10px;
border-radius: 8px;
cursor: default;
user-select: text;
}
.EquipoDirectivo .ed-mail span{
word-break: break-word;
line-height: 1.1;
}
/* Responsive */
@media (max-width: 576px){
.EquipoDirectivo .ed-card{ max-width: 340px; }
.EquipoDirectivo .ed-avatar{ height: 380px; }
}
.EquipoDirectivo .swiper-pagination-bullet{
transition: all .25s ease;
}
.EquipoDirectivo .ed-card{
transition: transform .25s ease, box-shadow .25s ease;
}
.EquipoDirectivo .ed-card:hover{
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
/***************************************************
DESCARGAS GRATUITAS - MAPAS IGM REFACTOR
***************************************************/
.mapas-layout {
display: grid;
grid-template-columns: 290px 1fr;
gap: 28px;
align-items: start;
margin-top: 28px;
}
.mapas-sidebar {
position: sticky;
top: 120px;
background: linear-gradient(180deg, rgba(4, 53, 68, 0.88), rgba(2, 34, 42, 0.94));
border: 1px solid rgba(98, 222, 231, 0.14);
border-radius: 18px;
padding: 18px;
box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.mapas-sidebar__title {
color: #8ff4fb;
font-size: 1rem;
font-weight: 700;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(98, 222, 231, 0.18);
}
.mapas-sidebar__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mapas-sidebar__btn {
appearance: none;
width: 100%;
border: 1px solid rgba(98, 222, 231, 0.12);
background: linear-gradient(180deg, rgba(7, 94, 109, 0.58), rgba(3, 48, 59, 0.84));
color: #eefeff;
text-align: left;
padding: 13px 14px;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.35;
transition: all .28s ease;
box-shadow: 0 8px 16px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.mapas-sidebar__btn:hover {
transform: translateX(3px);
border-color: rgba(98, 222, 231, 0.24);
box-shadow: 0 12px 20px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.mapas-sidebar__btn.is-active {
background: linear-gradient(180deg, rgba(19, 178, 192, 0.95), rgba(7, 112, 124, 0.95));
color: #fff;
border-color: rgba(98, 222, 231, 0.40);
box-shadow: 0 14px 24px rgba(0,0,0,0.20), 0 0 10px rgba(98,222,231,0.18);
}
.mapas-panel-wrap {
min-width: 0;
}
.mapa-bloque {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity .38s ease, transform .38s ease;
}
.mapa-bloque.is-active {
display: block;
opacity: 1;
transform: translateY(0);
animation: mapasFadeIn .38s ease;
}
@keyframes mapasFadeIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.mapa-titulo-bloque {
color: #7feaf2;
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 10px;
border-bottom: 1px solid rgba(98, 222, 231, 0.18);
}
.mapa-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 22px;
}
.mapa-card {
background: linear-gradient(180deg, rgba(4, 65, 79, 0.88), rgba(3, 42, 52, 0.92));
border: 1px solid rgba(98, 222, 231, 0.14);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0,0,0,0.16);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mapa-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 34px rgba(0,0,0,0.22);
border-color: rgba(98, 222, 231, 0.26);
}
.mapa-card__thumb-wrap {
position: relative;
padding: 12px 12px 0 12px;
}
.mapa-card__thumb {
width: 100%;
height: 260px;
object-fit: cover;
object-position: center top;
border-radius: 12px;
display: block;
cursor: zoom-in;
border: 1px solid rgba(98, 222, 231, 0.14);
box-shadow: 0 8px 18px rgba(0,0,0,0.16);
transition: transform .25s ease, box-shadow .25s ease;
}
.mapa-card:hover .mapa-card__thumb {
transform: scale(1.01);
box-shadow: 0 12px 22px rgba(0,0,0,0.2);
}
.mapa-card__body {
padding: 14px 14px 16px;
}
.mapa-card__title {
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 12px;
min-height: 44px;
}
.mapa-card__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.mapa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 0.92rem;
transition: all .25s ease;
cursor: pointer;
}
.mapa-btn--preview {
background: linear-gradient(135deg, #1db7c7, #128ea4);
color: #fff;
border: 1px solid rgba(255,255,255,0.08);
}
.mapa-btn--preview:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.mapa-btn--full {
background: rgba(255,255,255,0.06);
color: #dffcff;
border: 1px solid rgba(98, 222, 231, 0.18);
}
.mapa-btn--full:hover {
color: #fff;
background: rgba(255,255,255,0.1);
border-color: rgba(98, 222, 231, 0.32);
}
.mapa-btn i {
font-size: 0.9rem;
}
@media (max-width: 991px) {
.mapas-layout {
grid-template-columns: 1fr;
}
.mapas-sidebar {
position: static;
}
}
@media (max-width: 768px) {
.mapa-card__thumb {
height: 220px;
}
.mapa-card__title {
min-height: auto;
}
.mapa-card__actions {
flex-direction: column;
}
.mapa-btn {
width: 100%;
}
}
.modal-responsive .modal-content {
width: 100% !important;
max-width: 100% !important;
}
.modal-responsive .modal-body {
padding: 0 !important;
width: 100% !important;
flex: 1 !important;
}
.modal-responsive .modal-body img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 80vh !important;
object-fit: contain !important;
overflow: visible !important;
display: block !important;
}
.modal-responsive {
max-width: min(800px, 95vw) !important;
width: min(800px, 95vw) !important;
margin: 50px auto !important; /* 80px = altura aproximada de tu menú */
}
.terra-top-btn{
display:inline-flex !important;
align-items:center;
gap:8px;
padding:6px 12px;
background:#0c7080;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.30);
border-radius:4px; /* o 5px */
font-size:12px;
font-weight:600;
text-decoration:none;
}
.terra-top-btn:hover{
background:#29c4d8;
color:#fff !important;
}