* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* --- Paleta de Colores (Variables CSS) MOVILIDAD--- */
:root {
  --color-azul: #1f3b73;
  --color-azul-claro: #b9dbed;
  --color-blanco: #FFFFFF;
  --color-gris-claro: #F4F6F8;
  --color-gris-medio: #e0e0e0;
  --color-gris-oscuro: #333333;
  --color-azul-tecnologico: #007BFF;
  --color-rojo-acento: #1f3b73;
  --color-naranja-acento: #FF6B00;
  --font-principal: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-titulos: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --color-font-formularios: #0d3450;
}

/* --- Estilos Generales (Reutilizados) --- */
body {
  margin: 0;
  font-family: var(--font-principal);
  color: var(--color-gris-oscuro);
  background-color: var(--color-blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

.container-banner,
.container-bloque {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
}

.container-banner {
  max-width: 1200px;
}

.container-bloque {
  max-width: 1000px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-titulos);
  color: var(--color-azul);
  margin-top: 0;
}

section h2 {
  text-align: center;
  font-size: 2.2em;
  margin-bottom: 40px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-azul-claro);
  display: inline-block;
}

.section-title-wrapper {
  text-align: center;
  /*margin-bottom: 40px;*/
}

/* --- Quick Access Section --- */
.quick-access-section {
  padding: 60px 0;
  background-color: var(--color-blanco);
}

.quick-access-section h2 {
  text-align: center;
  margin-bottom: 40px;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.access-card {
  background-color: var(--color-gris-claro);
  padding: 25px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.access-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
}

.access-card .icon span {
  /* Iconos FA */
  font-size: 2.5em;
  /* Ajustado para FA */
  color: var(--color-azul);
  margin-bottom: 15px;
}

.access-card h3 {
  font-size: 1.3em;
  margin-bottom: 10px;
}

.access-card p {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 15px;
}

.access-card .btn {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  font-size: 0.9em;
}

.access-card .btn:hover {
  background-color: var(--color-azul-tecnologico);
}

.all-news-link {
  display: block;
  text-align: center;
  margin-top: 10px;
}

/* --- Key Stats Section --- */
.key-stats-section {
  padding: 60px 0;
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

.key-stats-section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
  color: var(--color-blanco);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  text-align: center;
}

.stat-item .icon span {
  /* Iconos FA */
  font-size: 2.2em;
  /* Ajustado para FA */
  margin-bottom: 10px;
}

.stat-item .number {
  font-size: 2.5em;
  font-weight: bold;
  display: block;
}

.stat-item .label {
  font-size: 1em;
}

/* --- Page Banner --- */
.page-banner {
  background-color: var(--color-azul);
  color: var(--color-blanco);
  padding: 50px 0;
  text-align: center;
}

.page-banner h1 {
  font-size: 2.8em;
  margin-bottom: 10px;
  color: var(--color-blanco);
}

.page-banner p {
  font-size: 1.1em;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.9;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.btn i {
  margin-right: 8px;
}

.btn-principal {
  background-color: var(--color-azul);
  color: var(--color-blanco);
}

/* Botón principal verde para enviar */
.btn-principal:hover {
  background-color: var(--color-azul-tecnologico);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-blanco);
}

.btn-secundario {
  background-color: transparent;
  color: var(--color-azul);
  border: 2px solid var(--color-azul);
}

.btn-secundario:hover {
  background-color: var(--color-rojo-acento);
  color: var(--color-blanco);
  transform: translateY(-2px);
  text-decoration: none;
}

img {
  height: auto not;
}

.bloque-center {
  padding-bottom: 30px;
  text-align: center;
}

/* --- Estructura de Contenido para "Contacto" --- */
.contact-section {
  padding: 60px 0;
}

.contact-section:nth-child(even) {
  background-color: var(--color-gris-claro);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {

  /* Dos columnas en desktop */
  .contact-layout {
    grid-template-columns: 1fr 1.5fr;
  }

  /* Formulario un poco más ancho */
}

.contact-info-block h3 {
  font-size: 1.6em;
  margin-bottom: 25px;
  color: var(--color-naranja-acento);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 1.05em;
}

.contact-info-item i {
  font-size: 1.5em;
  color: var(--color-naranja-acento);
  margin-right: 15px;
  margin-top: 3px;
  /* Alineación vertical */
  width: 25px;
  /* Ancho fijo para alinear texto */
  text-align: center;
}

.contact-info-item p {
  margin: 0;
  line-height: 1.5;
}

.contact-info-item strong {
  display: block;
  margin-bottom: 3px;
  color: var(--color-gris-oscuro);
}

.map-placeholder {
  background-color: var(--color-gris-medio);
  height: 250px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-style: italic;
  margin-top: 30px;
}

/* Formulario de Contacto */
.contact-form h3 {
  font-size: 1.6em;
  margin-bottom: 25px;
  color: var(--color-azul);
}

.page-contactanos .section-page-container {
  background-color: var(--color-azul);
  /* azul institucional */
}

.about-section {
  padding: 60px 0;
}

.contenedor-titulo {
  padding-top: 60px;
}

.padding-top {
  padding: 20px 0;
}

.section-title-wrapper {
  text-align: center;
  /*margin-bottom: 40px;*/
}

/* Misión y Visión */
.mision-vision-grid {
  display: grid;
  grid-template-columns:1fr 1fr;
  gap: 40px;
}

.mision-vision-card {
  background-color: var(--color-blanco);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-left: 5px solid var(--color-naranja-acento);
}

.mision-vision-card h3 {
  font-size: 1.8em;
  margin-bottom: 20px;
  color: var(--color-naranja-acento);
}

.mision-vision-card h3 i {
  margin-right: 10px;
}

.mision-vision-card p {
  font-size: 1.05em;
  line-height: 1.7;
}

.container-fluid {
  padding: 0 !important;
  padding: 2rem 0;
}

.seccion-header>.section-header-container>.container-fluid {
  padding: 0;
  margin: 0;
}

.seccion-footer>.section-footer-container>.container-fluid {
  margin: 0;
  padding: 0;
}

.container-margin {
  margin-top: 5rem;
}

.container-padding {
  padding-bottom: 5rem;
}

.container-margin-bottom {
  margin-bottom: 10rem;
  padding: 5rem 0;
}

.row-center {
  max-width: 1100px;
  margin: auto;
}

.title-participa {
  padding-bottom: 2rem;
  text-align: center;
}

/*-----------Funciones Acerca de----------------------------*/
.function-list {
  list-style: none;
  padding-left: 0;
}

.function-list li {
  background-color: var(--color-blanco);
  /* Fondo blanco para cada función si la sección tiene fondo de color */
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 6px;
  border-left: 4px solid var(--color-naranja-acento);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  font-size: 1.05em;
  /* Ligeramente más grande para legibilidad */
}

.function-list li::before {
  /* Icono personalizado para cada item */
  font-family: "Font Awesome 5 Free";
  /* Asegúrate que coincida con la versión de FA */
  font-weight: 900;
  /* Para iconos solid */
  content: "\f0da";
  /* fas fa-caret-right o similar */
  color: var(--color-naranja-acento);
  margin-right: 12px;
  font-size: 1.1em;
}

.section-intro-text {
  /* Para el texto "Son responsabilidad y funciones..." */
  font-size: 1.1em;
  margin-bottom: 20px;
  color: var(--color-gris-oscuro);
  font-style: italic;
}

/*seccion menu*/
/*seccion gif----------------------*/
.gif {
  display: none;
  max-width: 100%;
}

.gif.visible {
  display: block;
}

.flex-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  /*padding: 20px 0;*/
  gap: 30px;
}

.nav-text {
  display: flex;
  justify-content: end;
}

.principal_enlace_menu a {
  color: rgb(41, 41, 41);
}

.principal_enlace_menu a:hover {
  color: black;
}

.logo-godvalle {
  width: 180px;
}

/*seccion contacto*/

.row_shadow {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 10px 10px 26px 0px rgba(0, 0, 0, 0.2);
}

.title_h2 {
  margin-bottom: 3rem;
  text-align: center;
}

.padding-title {
  padding: 2rem 0;
}

.texto_section {
  margin-top: 3rem;
}

.Col_infoContacto {
  padding: 6rem;
}

.img_contact .content-block {
  padding-top: 4rem;
}

.margin-bottom {
  margin-bottom: 4rem;
}

/*seccion form*/

.row_forms {
  border-radius: 0.5rem;
  margin: 5rem auto;
  box-shadow: 10px 10px 26px 0px rgba(0, 0, 0, 0.2);
}


/*seccion mapa*/

.section_maps {
  margin-bottom: 5rem;
  text-align: center;
}

/*seccion footer*/
.containerBlue {
  background-color: #f1f9fc;
  margin-bottom: 5rem;
}

.containerBlue-padding {
  padding: 5rem 0;
}

.boton_calendar .content-block {
  display: flex;
  justify-content: center;
  padding-bottom: 5rem;
}

.botonJustifycenter .content-block {
  display: flex;
  justify-content: center;
}

/* botones */
.content-block>.boton-new,
.content-block>.boton-new-noticias {
  margin: 0 auto 4rem auto;
  display: flex;
}

.content-block>.boton-new-conversatorio {
  margin: 0 auto;
  display: flex;
}

/*Banner inicio*/
.campo-data.campoTextArea.slider-principal-1-descripcion.banner-img img {
  width: 100%;
}

/* Estilos base para el bloque */
.block.block-text {
  padding: 20px;
  /* Espacio interno para que el contenido no esté pegado a los bordes */
  margin: 0 auto;
  /* Centra el bloque horizontalmente */
  max-width: 1200px;
  /* Ancho máximo para evitar que el contenido se extienda demasiado */
  box-sizing: border-box;
  /* Asegura que el padding no afecte el ancho total */
}

/* Estilos generales para la tabla */
table {
  width: 100%;
  /* Ocupa el 100% del contenedor */
  max-width: 800px;
  /* Ancho máximo para evitar que se extienda demasiado */
  margin: 20px auto;
  /* Centra la tabla y añade margen exterior */
  border-collapse: collapse;
  /* Une los bordes de las celdas */
  font-family: Arial, sans-serif;
  /* Fuente legible */
  background-color: #fff;
  /* Fondo blanco */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Sombra suave */
}

/* Estilos para las celdas de la tabla */
td,
th {
  padding: 12px;
  /* Espacio interno para que el contenido no esté pegado */
  text-align: left;
  /* Alineación del texto a la izquierda */
  border: 1px solid #ddd;
  /* Borde suave */
}

/* Estilos para el encabezado de la tabla */
th {
  background-color: #f8f9fa;
  /* Color de fondo para el encabezado */
  font-weight: bold;
  /* Texto en negrita */
  color: #333;
  /* Color de texto oscuro */
}

/* Estilos para las filas impares (opcional) */
tr:nth-child(odd) {
  background-color: #f9f9f9;
  /* Fondo gris claro para filas impares */
}

/* Estilos para las filas al pasar el mouse (hover) */
tr:hover {
  background-color: #f1f1f1;
  /* Cambia el color de fondo al pasar el mouse */
}


/*SLIDER ACTUALIDAD*/
/* Estilos para las tarjetas de "Actualidad" */
.contenedor-diseño-azul {
  background: linear-gradient(to bottom right, #0c143c, #2b3270);
  color: white !important;
}

.contenedor-diseño-azul-claro {
  background: var(--color-azul-claro);
}

.vista-slider {
  padding: 40px 100px;
}

.vista-slider .contenido-div {
  padding: 5px;
  height: 380px;
}

.testimonio-slider .contenido-div {
  color: black
}

.vista-slider .titulo-grilla {
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.vista-slider .titulo-grilla a {
  color: #333;
  text-decoration: none;
}

/*REVISAAR*/
.container-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 10px),
    repeating-linear-gradient(-45deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 10px);
  background-size: 20px 20px;
  filter: blur(0.5px);
}

.ow-carousel-normal {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 20px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}

.owl-item {
  flex: 0 0 auto;
  width: 320px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.owl-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.contenido-div img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #ddd;
}

.actualidad-1-titulo {
  padding: 10px;
  text-align: left;
}


.titulo-grilla a,
.conversatorios-ciudadanos-titulo a {
  text-decoration: none;
}

.campo-data.tipo-contenido-actualidad .categoria-valor {
  font-size: 14px;
  margin-bottom: 5px;
}

.campo-data.fecha-actualidad .valor_campo {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.campo-data.actualidad-1-titulo .valor_campo {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.owl-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  pointer-events: none;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
  font-size: 24px;
  /* Tamaño más grande */
  color: #2b3270;
  /* Color del ícono */
  cursor: pointer;
  background-color: #fff;
  /* Fondo semi-transparente */
  border: 2px solid #fff;
  /* Borde sólido */
  border-radius: 50%;
  /* Forma circular */
  width: 40px;
  /* Ancho */
  height: 40px;
  /* Alto */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  /* Transición suave */
  pointer-events: auto;
  /* Permite hacer clic en los botones */
}

/* Posicionamiento del botón "prev" (izquierda) */
.owl-nav .owl-prev {
  margin-left: -50px;
  /* Mueve el botón fuera del contenedor */
}

/* Posicionamiento del botón "next" (derecha) */
.owl-nav .owl-next {
  margin-right: -50px;
  /* Mueve el botón fuera del contenedor */
}

/* Efecto al pasar el mouse sobre los botones */
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  transform: scale(1.1);
  /* Escala un poco el botón */
}

/* Animación para el botón "prev" (izquierda) */
.owl-nav .owl-prev:hover {
  animation: moveLeft 0.5s infinite alternate;
  /* Animación de movimiento */
}

/* Animación para el botón "next" (derecha) */
.owl-nav .owl-next:hover {
  animation: moveRight 0.5s infinite alternate;
  /* Animación de movimiento */
}

/* Animación de movimiento hacia la izquierda */
@keyframes moveLeft {
  0% {
    transform: translateX(0);
    /* Posición inicial */
  }

  100% {
    transform: translateX(-10px);
    /* Movimiento hacia la izquierda */
  }
}

/* Animación de movimiento hacia la derecha */
@keyframes moveRight {
  0% {
    transform: translateX(0);
    /* Posición inicial */
  }

  100% {
    transform: translateX(10px);
    /* Movimiento hacia la derecha */
  }
}

.owl-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.owl-dots .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.owl-dots .owl-dot.active span {
  background-color: #007BFF;
}

.owl-carousel .owl-stage-outer {
  padding: 10px 0px;
}

/*.owl-prev .disabled {}*/

/* Estilos para Actualidad */
div.filtros.col-xs-12 {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}

.form-control {
  border-radius: 20px;
}

input.form-control.rangofecha {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 20px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.contenedor-gris {
  background-color: var(--color-gris-claro);
}

/*
.filtros .contenedor-filtro {
  margin-left: 7rem;
}*/
.contenedor-grilla-none {
  padding: 0px 30px;
  margin-right: auto;
  margin-left: auto;
}

.texto-icono-resultados {
  margin-left: 7rem;
  font-weight: bold;
}

.filtros .campo-opcion-filtro {
  margin-bottom: 1rem;
}

.filtros .form-control:focus {
  border-color: #0a43b5;
  box-shadow: 0 0 5px rgba(10, 67, 181, 0.5);
  outline: none;
}

.filtros .btn {
  background-color: var(--color-azul-tecnologico);
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 1rem;
  height: 34px;
}

.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
  z-index: 2;
  margin-left: -1px;
  align-content: center;
}

.filtros .btn:hover {
  background-color: #083a8f;
}

.reset-filter:hover::before {
  transform: scaleX(1);
}

.reset-filter-content {
  position: relative;
  z-index: 15;
}

.reset-filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(82.3deg,
      rgb(15 129 81) 10.8%,
      rgb(6 108 68) 94.3%);
  transition: all 0.475s;
  z-index: -1;
  color: #fff;
}

.grilla-none .row {
  display: flex;
  flex-wrap: wrap;
  /*gap: 1.5%; Espacio entre las tarjetas */
  padding: 2%;
  justify-content: center;
  align-items: stretch;
}

.reset-filter {
  --color: #2b3270;
  font-family: inherit;
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 2em;
  margin: 20px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid var(--color);
  transition: color 0.5s;
  z-index: 1;
  font-size: 14px;
  border-radius: 20px;
  font-weight: 500;
  color: var(--color);
}

.reset-filter:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color);
  height: 150px;
  width: 200px;
  border-radius: 50%;
}

.reset-filter:hover {
  color: #fff;
}

.reset-filter:before {
  top: 100%;
  left: 100%;
  transition: all 0.7s;
}

.reset-filter:hover:before {
  top: -30px;
  left: -30px;
}

.reset-filter:active:before {
  background: #2b3270;
  transition: background 0s;
}

/* Cada tarjeta */
.grilla-none .grupito {
  background-color: #c9dafc;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  width: 350px;
  max-width: 350px;
  /* Ancho máximo de cada tarjeta */
  margin-bottom: 5%;
  height: 300px;
  padding-bottom: 3%;
}

/*.grilla-none .grupito:hover {
  transform: translateY(-10px);
  /* Mayor desplazamiento 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* Sombra más pronunciada 
  filter: brightness(0.8);
  /* Filtro aplicado al pasar el cursor 
}*/

.grilla-none .contenido-div {
  flex: 0 1 30%;
  max-width: 30%;
  box-sizing: border-box;
}

/* Imagen de la portada */
.portada-grilla img {
  width: 100%;
  height: 250px !important;
  object-fit: cover;
  /* Ajusta la imagen para que no se deforme */
}

/* Contenedor para tipo de contenido y fecha */
.grilla-none .tipo-contenido-actualidad {
  display: inline-block !important;
  width: 70%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.grilla-none .tipo-contenido-actualidad .valor_campo {
  background-color: #2b3270;
  color: #fff;
  font-size: 0.9em;
  border-radius: 0 10px 10px 0;
}

.grilla-none .fecha-actualidad {
  display: inline-block !important;
  width: 28%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.fa,
.far,
.fas {
  font-family: "Font Awesome 5 Free";
}

.fa,
.fas {
  font-weight: 900;
}

.fa-calendar-alt:before {
  content: "\f073";
}

.grilla-none .fecha-actualidad .valor_campo {
  color: #444;
  font-size: 0.9em;
}

/* Título */
.grilla-none .actualidad-1-titulo .valor_campo {
  color: #333;
  /*padding: 10px;*/
  flex-grow: 1;
  text-decoration: none !important;
  max-height: 3em;
  /* Altura máxima del título */
  overflow: hidden;
  /* Oculta el texto que exceda la altura */
  text-overflow: ellipsis;
  /* Añade puntos suspensivos al texto que se corta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Número de líneas permitidas */
  -webkit-box-orient: vertical;
  margin-bottom: auto;
  font-weight: bold;
  font-size: 16px;
}

.grilla-none .actualidad-1-titulo .valor_campo:hover {
  text-decoration: none;
  color: #0a6e94;
}

/*VISTA GRILLA CONVERSATORIOS*/
.grilla-none .fecha-conversatorio {
  display: inline-block !important;
  width: 28%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.grilla-none .fecha-conversatorio .valor_campo {
  color: #444;
  font-size: 0.9em;
}

/* Título */
.grilla-none .conversatorios-ciudadanos-titulo .valor_campo {
  color: #333;
  /*padding: 10px;*/
  text-align: center;
  flex-grow: 1;
  text-decoration: none !important;
  max-height: 3em;
  /* Altura máxima del título */
  overflow: hidden;
  /* Oculta el texto que exceda la altura */
  text-overflow: ellipsis;
  /* Añade puntos suspensivos al texto que se corta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Número de líneas permitidas */
  -webkit-box-orient: vertical;
  margin-bottom: auto;
  font-weight: bold;
  font-size: 16px;
}

.grilla-none .conversatorios-ciudadanos-titulo .valor_campo:hover {
  text-decoration: none;
  color: #0a6e94;
}

/* Imagen de la portada */
.portada-conversatorio img {
  width: 100%;
  height: 200px !important;
  object-fit: cover;
  /* Ajusta la imagen para que no se deforme */
  border-radius: 20px 0;
}

.campo-data.conversatorios-ciudadanos-titulo .valor_campo {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.campo-data.conversatorios-ciudadanos-titulo .valor_campo:hover {
  color: #0056b3;
}

/* Contenedor para tipo de contenido y fecha */
.grilla-none .categoria-conversatorio {
  display: inline-block !important;
  width: 70%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.grilla-none .fecha-conversatorio {
  display: inline-block !important;
  width: 28%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.campo-data.fecha-conversatorio .valor_campo {
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
}

.grilla-none .categoria-conversatorio .valor_campo {
  background-color: #2b3270;
  color: #fff;
  font-size: 0.9em;
  border-radius: 0 10px 10px 0;
}

.grilla-none .fecha-conversatorio .valor_campo {
  color: #444;
  font-size: 0.9em;
}

/* Título */
.grilla-none .conversatorios-ciudadanos-titulo .valor_campo {
  color: #333;
  /*padding: 10px;*/
  text-align: center;
  flex-grow: 1;
  text-decoration: none !important;
  max-height: 3em;
  /* Altura máxima del título */
  overflow: hidden;
  /* Oculta el texto que exceda la altura */
  text-overflow: ellipsis;
  /* Añade puntos suspensivos al texto que se corta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Número de líneas permitidas */
  -webkit-box-orient: vertical;
  margin-bottom: auto;
  font-weight: bold;
  font-size: 16px;
}

.grilla-none .conversatorios-ciudadanos-titulo .valor_campo:hover {
  text-decoration: none;
  color: #0a6e94;
}

/* Paginador */
/* Asegura que el paginador se comporte como un bloque completo y no como tarjeta */
.vista-grilla .ajax-paginate,
.grilla-none .ajax-paginate {
  flex: 0 0 100%;
  /* Ocupar toda la fila del contenedor flex */
  max-width: 100%;
  order: 999;
  /* Lo manda al final del contenedor flex */
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 15px;
  text-align: center;
  border: none;
  box-shadow: none;
  background: none;
  height: auto;
}

/* Limpieza visual por si hereda algo */
.vista-grilla .ajax-paginate a,
.grilla-none .ajax-paginate a {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px;
  background-color: #2b3270;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.vista-grilla .ajax-paginate a.active,
.grilla-none .ajax-paginate a.active {
  background-color: #444b9e;
}

.grilla-none .categoria-conversatorio {
  width: 50%;
  /* Ocupan el 100% en pantallas pequeñas */
  text-align: start;
}

.grilla-none .fecha-conversatorio {
  width: 48% !important;
  /* Ocupan el 100% en pantallas pequeñas */
  text-align: start;
}

/* Videos Conversatorios Facebook------------------------------------------------------------------------------------------*/
.video-conversatorio {
  max-width: 920px;
  margin: 20px auto;
  padding: 20px;
  background: #111;
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 200, 0.1) inset;
  position: relative;
  border: 8px solid #333;
}

/* TV "bisel" o marco exterior */
.video-conversatorio::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* Simulación del soporte del TV */
.video-conversatorio::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 15px;
  background: #444;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Responsive iframe container */
.video-conversatorio .responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 0 !important;
}

.video-conversatorio .responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.etiqueta-superior {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #2b3270;
  color: #ffffff;
  padding: 5px 15px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 20;
  white-space: nowrap;
}


/*ESTILOS PARA LAS VISTAS INTERNAS*/
.vista-interna {
  color: #333;
  /*background-color: #f4f4f4;*/
  padding: 20px 60px;
  /*border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

.vista-interna .documentos-titulo .valor_campo,
.vista-interna .titulo-grilla .valor_campo {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3;
}

.vista-interna .descripcion-grilla .valor_campo,
.vista-interna.actualidad-interna .actualidad-1-descripcion a {
  font-size: 17px;
  /* o el tamaño que desees */
  line-height: 1.6;
  /* opcional, mejora legibilidad */
}

.contenedor-vista-interna {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f4f4f4;
  border-radius: 8px;
}

/*.valor_campo {
  margin-bottom: 10px;
}*/

.fecha-campo {
  color: #333;
  position: relative;
  padding-left: 10px;
  /* Espacio para el icono */
}

.vista-slider .categoria-grilla .categoria-valor,
.vista-interna .categoria-grilla .categoria-valor,
.vista-interna .categoria-documentos .categoria-valor,
.vista-grilla .categoria-grilla .categoria-valor {
  padding: 5px 16px;
  display: inline-block;
  margin-bottom: 10px;
  color: #fff;
  border-radius: 0 10px 10px 0;
}

.vista img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 5px;
  border-radius: 10px;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

#infoCard,
.infoCard {
  /* Posición y centrado */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 20 !important;

  /* Dimensiones */
  width: 90% !important;
  /* Ancho adaptable */
  max-width: 600px !important;
  /* Ancho máximo para no estirarse demasiado */
  height: auto !important;
  /* Altura automática según el contenido */
  max-height: 80vh !important;
  /* Altura máxima para no exceder la pantalla */

  /* Estilos visuales */
  background-color: #fdfdfd !important;
  border-radius: 10px;
  /* Bordes redondeados */
  border: 1px solid #d6d6d6;
  /* Borde sutil */
  box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.3);
  /* Sombra suave */
  padding: 20px;
  /* Espaciado interno */
  overflow-y: auto;
  /* Scroll vertical si el contenido es largo */
  overflow-x: hidden;
  /* Evita el scroll horizontal */

  /* Transición suave */
  transition: all 0.3s ease-in-out;
}

/*IFRAME EN VIVO CONVERSATORIOS*/
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 55%;
  height: 0;
  overflow: hidden;
  margin: 20px auto;
}

.responsive-iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*iframe looker*/
.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 74%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.margin-top {
  margin-top: 6rem;
}

/*SLIDER VIDEO YOUTUBE*/
.contenedor-slider-videos {
  background-color: #004a87;
}

/* Contenedor del slider */
.slider-container {
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

/* Slider */
.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Slides */
.slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.slide iframe {
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Controles del slider */
.controls {
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

/* Botones de control */
.control-button-prev,
.control-button-next {
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  background-color: #2b3270;
  border: 2px solid #2b3270;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3sease;
  pointer-events: auto;
}

.control-button-prev {
  margin-left: 40px;
}

.control-button-next {
  margin-right: 40px;
}

/* Efecto al pasar el mouse sobre los botones */
.control-button-prev:hover,
.control-button-next:hover {
  transform: scale(1.1);
  /* Escala un poco el botón */
}

/* Animación para el botón "prev" (izquierda) */
.control-button-prev:hover {
  animation: moveLeft 0.5s infinite alternate;
  /* Animación de movimiento */
}

/* Animación para el botón "next" (derecha) */
.control-button-next:hover {
  animation: moveRight 0.5s infinite alternate;
  /* Animación de movimiento */
}

/* Clase para el contenedor principal */
.mapa-container {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
}

/* Contenedor del iframe */
.iframe-container {
  width: 90%;
  /* Ancho del contenedor (ajusta según necesites) */
  max-width: 1200px;
  /* Ancho máximo del contenedor */
  height: 630px;
  /* Altura fija (ajusta según necesites) */
  margin: 20px;
  /* Márgenes alrededor del contenedor */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* Sombra opcional */
  border-radius: 10px;
  /* Bordes redondeados opcionales */
  overflow: hidden;
  /* Oculta el contenido que se desborda */
}

/* Iframe para el mapa */
.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Elimina el borde del iframe */
}

.campo-data.testimonios-titulo .valor_campo {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  margin-bottom: 10px;
  display: block;
  text-align: center;
}

.campo-data.testimonios-perfil {
  width: 100px;
  /* Ancho del círculo */
  height: 100px;
  /* Alto del círculo */
  border-radius: 50%;
  /* Hace que el contenedor sea un círculo */
  overflow: hidden;
  /* Recorta la imagen que sobresale */
  display: flex;
  /* Centra la imagen */
  align-items: center;
  justify-content: center;
  border: 3px solid #2b3270;
  /* Borde azul de 3px */
  box-sizing: border-box;
  /* Asegura que el borde no aumente el tamaño del contenedor */
  margin: auto;
}

.testimonio-slider .contenido-div .grupo {
  display: flex;
  flex-direction: column;
}

.testimonio-slider .contenido-div {
  padding: 20px;
  display: flex;
}

.testimonio-slider .contenido-div img {
  width: 100%;
  /* Asegura que la imagen ocupe todo el ancho del contenedor */
  height: 100% !important;
  /* Asegura que la imagen ocupe todo el alto del contenedor */
  object-fit: cover;
  /* Ajusta la imagen para cubrir el contenedor */
  object-position: center center;
  /* Centra la imagen dentro del contenedor */
  border-radius: 50%;
  /* Hace que la imagen sea un círculo */
  margin: 0;
  border-bottom: 0;
}

.campo-data.testimonios-titulo {
  align-content: center;
  margin: auto;
}

.campo-data.testimonios-descripcion {
  text-align: center;
  margin: auto;
}

h3.col-xs-12.titulo-vista.show {
  font-size: 30px;
  text-align: center;
  margin-bottom: 6rem;
}

/* Contenedor para tipo de contenido y fecha  del slider Actualidad*/
.vista-slider .categoria-grilla {
  display: inline-block !important;
  width: 70%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.vista-slider .categoria-grilla .valor_campo {
  background-color: var(--color-azul-tecnologico);
  color: #fff;
  font-size: 0.9em;
  border-radius: 0 10px 10px 0;
}

.vista-slider .fecha-grilla {
  display: inline-block !important;
  width: 28%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.vista-slider .fecha-grilla .valor_campo {
  color: #444;
  font-size: 0.9em;
}

/*vista grilla actualidad*/
.vista-grilla .row {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  /*Espacio entre las tarjetas 
  padding: 2%;*/
  justify-content: center;
  align-items: stretch;
}

/* Cada tarjeta */
.vista-grilla .grupito {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  margin-bottom: 5%;
  height: 380px;
  padding: 5px;
  border: 1px solid #DEDEDE;
}

.vista-documentos .row:last-child .grupito:hover,
.vista-grilla .grupito:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  /* Sombra ligera */
  border: 2px solid var(--color-naranja-acento);
  /* Borde naranja vibrante */
  transition: all 0.3s ease;
}

.vista-grilla .contenido-div {
  flex: 0 1 30%;
  max-width: 30%;
  box-sizing: border-box;
}

/* Contenedor para tipo de contenido y fecha */

.vista-grilla .categoria-grilla {
  display: inline-block !important;
  width: 38%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.vista-interna .categoria-documentos .valor_campo,
.vista-interna .categoria-grilla .valor_campo,
.vista-grilla .categoria-grilla .valor_campo {
  background-color: var(--color-azul-tecnologico);
  color: #fff;
  font-size: 0.9em;
  border-radius: 0 10px 10px 0;
}

label.label-fecha-grilla {
  color: #444;
}

.vista-grilla .fecha-grilla {
  display: inline-block !important;
  width: 41%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.fa,
.far,
.fas {
  font-family: "Font Awesome 5 Free";
}

.fa,
.fas {
  font-weight: 900;
}

.fa-calendar-alt:before {
  content: "\f073";
}

.vista-grilla .fecha-grilla .valor_campo {
  color: #444;
  font-size: 0.9em;
}

/* Título */

.vista-grilla .titulo-grilla .valor_campo,
.vista-documentos .documentos-titulo .valor_campo {
  color: var(--color-azul);
  /*padding: 10px;*/
  flex-grow: 1;
  text-decoration: none !important;
  max-height: 6em;
  /* Altura máxima del título */
  overflow: hidden;
  /* Oculta el texto que exceda la altura */
  margin-bottom: auto;
  font-weight: bold;
  font-size: 16px;
}

.campo-data.documentos-titulo .valor_campo:hover,
.vista-grilla .campo-data.titulo-grilla .valor_campo:hover {
  color: var(--color-naranja-acento);
  text-decoration: none !important;
}

nav a,
nav span {
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border: 1px solid #2b3270;
  border-radius: 6px;
  color: #fff;
  background-color: #2b3270;
  transition: all 0.2sease-in-out;
  text-decoration: none;
}

nav a:hover {
  background-color: #edf2f7;
  /* Fondo gris claro al pasar el cursor */
  border-color: #cbd5e0;
  /* Borde más oscuro al pasar el cursor */
  color: #2d3748;
  /* Color de texto más oscuro */
}

nav span {
  cursor: not-allowed;
  /* Cursor no permitido para elementos deshabilitados */
  opacity: 0.7;
  /* Opacidad reducida para elementos deshabilitados */
}

nav .relative.z-0.inline-flex a,
nav .relative.z-0.inline-flex span {
  padding: 0.5rem 1rem;
  /* Espacio interno */
  margin: 0 0.125rem;
  /* Espacio entre números */
  border: 1px solid #e2e8f0;
  /* Borde gris claro */
  border-radius: 6px;
  /* Bordes redondeados */
  font-size: 0.875rem;
  /* Tamaño de fuente */
  color: #4a5568;
  /* Color de texto gris oscuro */
  background-color: #ffffff;
  /* Fondo blanco */
  transition: all 0.2s ease-in-out;
  /* Transición suave */
}

nav .relative.z-0.inline-flex a:hover {
  background-color: #edf2f7;
  /* Fondo gris claro al pasar el cursor */
  border-color: #cbd5e0;
  /* Borde más oscuro al pasar el cursor */
  color: #2d3748;
  /* Color de texto más oscuro */
}

nav .relative.z-0.inline-flex span[aria-current="page"] {
  background-color: #4299e1;
  /* Fondo azul para la página actual */
  border-color: #4299e1;
  /* Borde azul para la página actual */
  color: #ffffff;
  /* Texto blanco para la página actual */
}

nav p.text-sm {
  color: #4a5568;
  /* Color de texto gris oscuro */
  font-size: 0.875rem;
  /* Tamaño de fuente */
  margin: 0;
  /* Eliminar margen predeterminado */
}

nav svg {
  width: 1.25rem;
  /* Tamaño del ícono */
  height: 1.25rem;
  /* Tamaño del ícono */
  color: #4a5568;
  /* Color del ícono */
}

nav a:hover svg {
  color: #2d3748;
  /* Color del ícono al pasar el cursor */
}

/*
 * Estilos para anular las reglas generales de .col-admin-edit > div
 * Aplica la clase .estilo-anulado al div específico que quieres modificar.
*/
.col-admin-edit>div {
  /* Anula el borde */
  border: none;
  /* Restablece la posición a su valor por defecto */
  position: static;
  /* Elimina el padding */
  padding: 0;
  /* Desactiva la transición */
  transition: none;
}

/* Estilos generales del menú */
.menu.nav-text {
  padding: 10px 20px;
  font-size: 16px;
}

.navbar-header {
  display: none;
  /* Oculta el botón de menú en pantallas grandes */
}

.navbar-collapse {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

.menu-nav li {
  position: relative;
}

.menu-nav li a {
  color: #222;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 20px;
}

.menu-nav li a:hover {
  background-color: #3a427f;
  color: #fff;
  border-radius: 20px;
}

/* Estilos para el submenú desplegable */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2b3270;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  z-index: 1000;
  width: 250px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu li a {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-menu li a:hover {
  background-color: #3a427f;
  color: #fff;
}

/* Estilos para el ícono de flecha del submenú */
.caret {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.dropdown:hover .caret {
  transform: rotate(180deg);
}

/* Estilos para el submenú interno (hijos-holder) */
.hijos-holder {
  padding: 10px 0;
  list-style-type: none;
}

.hijos-holder li {
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease;
  position: relative;
}

.hijos-holder li:hover {
  background-color: #3a427f;
}

.enlace-menu {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.enlace-menu:hover {
  color: #fff;
  padding-left: 25px;
}

/* Separador entre elementos */
.hijos-holder li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Efecto de sombra al pasar el mouse */
.hijos-holder li:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background-color: #0069be;
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Estilos para el botón de menú móvil */
.meanmenu-reveal {
  padding: 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  outline: none;
  position: relative;
  z-index: 1002;
  display: none;
  /* Oculta el botón en pantallas grandes */
}

.meanmenu-reveal .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #222;
  margin: 4px 0;
  transition: all 0.3s ease;
}

.meanmenu-reveal.navbar-toggle:not(.collapsed) .icon-bar {
  background-color: #fff;
  /* blanco */
}

.meanmenu-reveal.navbar-toggle.collapsed .icon-bar {
  background-color: #000;
  /* negro */
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
  background-color: #3a427f;
  border-color: #337ab7;
  color: #fff
}

.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  /* Grosor de la barra */
  background-color: #e0e0e0;
  /* Color de fondo */
  z-index: 9999;
}

/* Barra que se llena */
.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  /* Color de la barra de progreso */
  transition: width 0.1s;
}

/* Contenedor para centrar el botón */
.contenedor-votacion-button {
  text-align: center;
  /* Centra horizontalmente */
}

/* Estilos específicos para los botones de votación */
.votacion-button {
  display: inline-flex;
  /* Cambia a inline-flex para que funcione con text-align */
  align-items: center;
  justify-content: center;
  height: 50px;
  position: relative;
  padding: 0 20px;
  font-size: 18px;
  text-transform: uppercase;
  border: 0;
  box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px;
  background-color: hsl(210deg 100% 44%);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: 31ms cubic-bezier(.5, .7, .4, 1);
  text-decoration: none;
  color: white;
}

.votacion-button:before {
  content: attr(alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 15px;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  opacity: 1;
}

.votacion-button:active {
  box-shadow: none;
  transform: translateY(7px);
  transition: 35ms cubic-bezier(.5, .7, .4, 1);
}

.votacion-button:hover:before {
  transition: all .0s;
  transform: translateY(100%);
  opacity: 0;
}

.votacion-button i {
  color: white;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 4px;
  font-style: normal;
  transition: all 2s ease;
  transform: translateY(-20px);
  opacity: 0;
}

.votacion-button:hover i {
  transition: all .2s ease;
  transform: translateY(0px);
  opacity: 1;
}

.votacion-button:hover i:nth-child(1) {
  transition-delay: 0.045s;
}

.votacion-button:hover i:nth-child(2) {
  transition-delay: calc(0.045s * 2);
}

.votacion-button:hover i:nth-child(3) {
  transition-delay: calc(0.045s * 3);
}

.votacion-button:hover i:nth-child(4) {
  transition-delay: calc(0.045s * 4);
}

.votacion-button:hover i:nth-child(5) {
  transition-delay: calc(0.045s * 5);
}

.votacion-button:hover i:nth-child(6) {
  transition-delay: calc(0.045s * 6);
}

.votacion-button:hover i:nth-child(7) {
  transition-delay: calc(0.045s * 7);
}

.votacion-button:hover i:nth-child(8) {
  transition-delay: calc(0.045s * 8);
}

.vista-conversatorios-interna {
  padding: 2px 2px;
  ;
}

/*------------VISTA DIRECTORIO SECRETARÍA-----------------------------------------------------------------------------------*/

.vista-programas .row,
.vista-programas-interna .row {
  display: flex;
  flex-wrap: wrap;
  /*gap: 1.5%; Espacio entre las tarjetas */
  padding: 2%;
  justify-content: center;
  align-items: stretch;
}

/* Cada tarjeta */
.vista-programas .grupito,
.vista-programas-interna .grupito {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  margin-bottom: 5%;
  /*height: 300px;*/
  padding-bottom: 3%;
  border: 1px solid #DEDEDE;
  padding: 10px;
  text-align: center;
}

.vista-programas .grupito {
  width: 350px;
  max-width: 350px;
}

.vista-programas .grupito:hover {
  transform: translateY(-10px);
  /* Mayor desplazamiento */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* Sombra más pronunciada */
}

.vista-programas .contenido-div {
  flex: 0 1 30%;
  max-width: 30%;
  box-sizing: border-box;
}

.vista-programas-interna .contenido-div {
  flex: 0 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* Imagen de la portada */
.vista-programas .valor_campo.perfil-foto,
.vista-programas-interna .valor_campo.perfil-foto {
  display: flex;
  justify-content: center;
}

.vista-programas .perfil-foto img,
.vista-programas-interna .perfil-foto img {
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 4px solid var(--color-azul-claro);
}

.vista-programas .perfil-foto img {
  width: 150px;
  height: 150px !important;
}

.vista-programas-interna .perfil-foto img {
  width: 300px;
  height: 350px !important;
}

.vista-programas .perfil-foto,
.vista-programas-interna .perfil-foto {
  text-align: center;
}

.vista-programas .perfil-foto img,
.vista-programas-interna .perfil-foto img {
  display: inline-block;
  max-width: 150px;
  /* Puedes ajustar este valor si quieres un tamaño estándar */
  border-radius: 50%;
  /* Opcional: para hacerlas redondas tipo avatar */
}

.vista-programas .perfil-foto img.img-responsive {
  margin-left: auto;
  margin-right: auto;
}

.vista-programas .perfil-nombre,
.vista-programas .perfil-apellido,
.vista-programas-interna .perfil-nombre,
.vista-programas-interna .perfil-apellido {
  display: inline;
}

.vista-programas .perfil-nombre .valor_campo,
.vista-programas .perfil-apellido .valor_campo,
.vista-programas-interna .perfil-nombre .valor_campo,
.vista-programas-interna .perfil-apellido .valor_campo {
  display: inline;
  font-weight: bold;
  color: #0c2e6b;
  margin-right: 5px;
}

.vista-programas .perfil-nombre .valor_campo,
.vista-programas .perfil-apellido .valor_campo {
  font-size: 18px;
}

.vista-programas-interna .perfil-nombre .valor_campo,
.vista-programas-interna .perfil-apellido .valor_campo {
  font-size: 2.2em;
}

.vista-programas .perfil-cargo .valor_campo,
.vista-programas-interna .perfil-cargo .valor_campo {
  /*font-size: 1.2rem;*/
  color: #f16822;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
}

.vista-programas .perfil-telefono .valor_campo::before,
.vista-programas-interna .perfil-telefono .valor_campo::before {
  content: "\f095";
  /* fa-phone */
  font-family: "Font Awesome 5 Free";
  /* o "FontAwesome" para FA4 */
  font-weight: 900;
  /* para los íconos sólidos */
  margin-right: 8px;
  color: #0c2e6b;
}

.vista-programas .perfil-email .valor_campo::before,
.vista-programas-interna .perfil-email .valor_campo::before {
  content: "\f0e0";
  /* fa-envelope */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
  color: #0c2e6b;
}

.vista-programas .perfil-telefono .valor_campo,
.vista-programas .perfil-email .valor_campo {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 8px;
}


/* Contenedor para tipo de contenido y fecha */
.vista-programas .tipo-contenido-actualidad {
  display: inline-block !important;
  width: 70%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.vista-programas .tipo-contenido-actualidad .valor_campo {
  background-color: #2b3270;
  color: #fff;
  font-size: 0.9em;
  border-radius: 0 10px 10px 0;
}

.vista-programas .fecha-actualidad {
  display: inline-block !important;
  width: 28%;
  /* Ocupa el 48% de la fila cada uno */
  box-sizing: border-box;
  text-align: start;
}

.campo.campo-data.directorio-1-descripcion {
  text-align: justify;
}

.fa,
.far,
.fas {
  font-family: "Font Awesome 5 Free";
}

.fa,
.fas {
  font-weight: 900;
}

.fa-calendar-alt:before {
  content: "\f073";
}

.vista-programas .fecha-actualidad .valor_campo {
  color: #444;
  font-size: 0.9em;
}

/* Título */
.vista-programas .titulo-programas .valor_campo {
  color: #333;
  /*padding: 10px;*/
  flex-grow: 1;
  text-decoration: none !important;
  max-height: 3em;
  /* Altura máxima del título */
  overflow: hidden;
  /* Oculta el texto que exceda la altura */
  text-overflow: ellipsis;
  /* Añade puntos suspensivos al texto que se corta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Número de líneas permitidas */
  -webkit-box-orient: vertical;
  margin-bottom: auto;
  font-weight: bold;
  font-size: 16px;
}

.vista-programas .titulo-programas .valor_campo:hover {
  text-decoration: none;
  color: #0a6e94;
}

.titulo-programas {
  text-align: left;
}

.titulo-programas a {
  text-decoration: none;
}

/* Afecta SOLO a la grilla dentro del contenedor lateral de 4 columnas */
.contenedor-lateral-vista-programas .vista-programas .row,
.contenedor-lateral-vista-programas .vista-grilla .row {
  display: block !important;
}

.contenedor-lateral-vista-programas .vista-programas .contenido-div,
.contenedor-lateral-vista-programas .vista-grilla .contenido-div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  margin-bottom: 20px;
}

.contenedor-lateral-vista-programas .vista-programas .contenido-div:last-child {
  margin-bottom: 0;
}

/* Opcional: Estilos para mejorar la presentación en el lateral */
.contenedor-lateral-vista-programas .vista-programas .portada-programas img {
  height: 200px !important;
  width: 100%;
  object-fit: cover;
}

.contenedor-lateral-vista-programas .vista-programas .secretaria-de-desarrollo-economico-titulo {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.3;
}

.contenedor-lateral-vista-programas .vista-grilla .grupito {
  height: auto;
}


.fondo-blanco {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* Sombra sutil */
}

.vista-programas-interna {
  font-size: 16px;
  text-align: justify;
}

/*
.vista-programas .row {
  display: flex;
  flex-wrap: wrap;
  /*gap: 1.5%; Espacio entre las tarjetas 
  padding: 2%;
  justify-content: center;
  align-items: stretch;
}*/

/*-----------------iframe formato 9:6--------------------------------------------------------------*/
/*IFRAME EN VIVO CONVERSATORIOS*/
.responsive-iframe-container-vertical {
  position: relative;
  width: 30%;
  padding-bottom: 45%;
  /* Relación de aspecto (ajusta según necesites) */
  height: 0;
  overflow: hidden;
  margin: 20px auto;
}

.responsive-iframe-container-vertical iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}


/*-------------------------VISTA PARA EL CONTENIDO DE LOS PROGRAMAS----------------------------------*/
/*REELS*/
.programas-section {
  max-width: 1000px;
  margin: auto;
}

.programas-section p {
  line-height: 1.6;
}

.reel-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 2rem;
  aspect-ratio: 9 / 16;
}

.reel-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}



/* Estilos para videos horizontales */
.video-horizontal-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2rem;
  aspect-ratio: 16 / 9;
}

.video-horizontal-container iframe {
  width: 100%;
  height: 570px;
  border: none;
}

/*--------------Componente valoracion de proyectos------------------*/


.conjunto-estrellas-valoracion .texto #titulo {
  font-weight: bold;
  color: #003366;
  margin-bottom: 0.8rem;
  font-size: 18px;
}

.star-rating {
  display: flex;
  gap: 8px;
  color: #ccc;
  cursor: pointer;
  font-size: 22px;
}

.recomendaciones .btn {
  background-color: #ffffff;
  border: 1px solid #0074c7;
  color: #0074c7;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  margin-top: 1rem;
  font-size: 16px;
}

.recomendaciones .btn i {
  margin-left: 4px;
}

.dropdown-menu {
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  padding: 0.5rem 1rem;
  width: 100%;
}

.listado-resultados {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.item-resultado {
  display: flex;
  align-items: center;
  gap: 10px;
}

.valor_resultado {
  font-weight: bold;
  width: 20px;
}

.componente-valoracion {
  display: flex;
  justify-content: space-between;
  padding: 20px 80px;
}

.recomendaciones .dropdown-menu {
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 10px;
  width: 350px;
  background-color: #f4f4f4;
}



.block.texto-valoracion-programas {
  font-size: 16px;
}

.valoracion-proyecto {
  padding: 20px 80px;
}

.valoracion-proyecto h3 {
  color: #003366;

}

.valoracion-proyecto p {
  color: #333;

}


/* Estilos scoped para el footer con prefijo único */
#unique-gov-footer {
  all: initial;
  /* Reset para contenedor principal */
}

#unique-gov-footer .gov-footer-bg {
  margin: 0;
  background: linear-gradient(to bottom right, #0c143c, #2b3270);
  color: white;
  font-family: Arial, sans-serif;
  /* Definir fuente explícitamente */
  line-height: 1.5;
  box-sizing: border-box;
}

#unique-gov-footer .gov-container-footer {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
}

#unique-gov-footer .gov-footer-header {
  margin-bottom: 20px;
  text-align: center;
}

#unique-gov-footer .gov-logos img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

#unique-gov-footer .gov-footer-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

#unique-gov-footer .gov-column-1,
#unique-gov-footer .gov-contacto {
  flex: 1;
  min-width: 300px;
  padding: 0 15px;
  box-sizing: border-box;
}

#unique-gov-footer .gov-content {
  margin-bottom: 20px;
}

#unique-gov-footer .gov-info {
  line-height: 1.6;
}

#unique-gov-footer .gov-footer-links {
  border-top: 1px solid #aaa;
  padding-top: 10px;
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

#unique-gov-footer .gov-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

#unique-gov-footer .gov-footer-links ul li {
  margin: 0;
  padding: 0;
}

#unique-gov-footer .gov-footer-links ul li a {
  text-decoration: none;
  color: white;
  white-space: nowrap;
}

#unique-gov-footer .gov-footer-links ul li a:hover {
  text-decoration: underline;
}

#unique-gov-footer .gov-powered-by {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin: 20px 0;
  width: 100%;
}

#unique-gov-footer .gov-powered-by img {
  width: 150px;
  margin-left: 10px;
}


/*--------------------------------BOTON VOLVER ARRIBA----------------------------------------------*/
/* Contenedor del botón */
.scroll-to-top {
  position: fixed;
  bottom: 130px;
  right: 20px;
  z-index: 99;
  display: none;
  /* Oculto por defecto */
}

/* Botón de scroll */
.boton-volver {
  background-color: #004a87;
  /* Azul similar al de la imagen */
  border-radius: 30px;
  padding: 10px 15px;
  text-align: center;
  color: white;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
  width: 50px;
  height: 50px;
  justify-content: center;
  cursor: pointer;
}

/* Efecto al pasar el cursor */
.boton-volver:hover {
  width: 160px;
  /* Se expande al pasar el cursor */
}

/* Ícono */
.boton-volver .icono {
  font-size: 20px;
}

/* Texto del botón */
.boton-volver .texto {
  display: none;
  white-space: nowrap;
}

/* Mostrar texto al pasar el cursor */
.boton-volver:hover .texto {
  display: inline;
}

/* Scroll suave */
html {
  scroll-behavior: smooth;
}

/*----------------------------COMPROMISOS CUMPLIDOS----------------------------------*/
.grilla-none-compromisos-cumplidos {
  height: 90vh;
  /* altura visible tipo móvil o tablet */
  overflow-x: hidden;
  /* Oculta scroll horizontal */
  overflow-y: scroll;
  /* scroll vertical */
  scroll-snap-type: y mandatory;
  /* snap para efecto de pantalla completa */
  -webkit-overflow-scrolling: touch;
  /* suaviza el scroll en móviles */
  /*background-color: #000;  fondo negro tipo reels */
  padding: 0;
  margin: 0;

}

.grilla-none-compromisos-cumplidos .contenido-div {
  scroll-snap-align: start;
  height: 100vh;
  /* cada video ocupa el alto completo */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
}

.grilla-none-compromisos-cumplidos iframe {
  max-height: 80vh;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Estilo opcional para ocultar botones de edición (si deseas una vista limpia para usuarios) */
.grilla-none-compromisos-cumplidos .admin-componente-edit {
  display: none;
}

/*---------------------------VISTA SLIDER COMPROMISOS CUMPLIDOS------------------------------*/
.vista-slider-compromisos-cumplidos .slide {
  padding: 0;
}

.vista-slider-compromisos-cumplidos .carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: center;
  /*padding: 20px;*/
  background-color: #f9f9f9;
}

.vista-slider-compromisos-cumplidos .carousel-item {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 500px;
  /* Asegura espacio uniforme */
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.vista-slider-compromisos-cumplidos .carousel-item.active {
  display: flex;
  position: relative;
}

.vista-slider-compromisos-cumplidos iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  height: auto;
}


.vista-slider-compromisos-cumplidos .grupito {
  margin-top: 20px;
}

.vista-slider-compromisos-cumplidos .compromisos-cumplidos-titulo .valor_campo {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 0;
}

.vista-slider-compromisos-cumplidos .compromisos-cumplidos-municipio .valor_campo {
  font-size: 18px;
  margin-top: 8px;
}

/* Indicadores (bolitas) más grandes */
.vista-slider-compromisos-cumplidos .carousel-indicators li {
  width: 12px;
  height: 12px;
  background-color: #aaa;
}

.vista-slider-compromisos-cumplidos .carousel-indicators .active {
  background-color: #007bff;
}

/* Flechas personalizadas */
.vista-slider-compromisos-cumplidos .carousel-control {
  /*width: 5%;*/
  color: #007bff;
}

.vista-slider-compromisos-cumplidos .carousel-control:hover {
  color: #0056b3;
}

.vista-slider-compromisos-cumplidos .grupito {
  margin: 10px 0;
}

.vista-slider-compromisos-cumplidos .campo-data {
  margin-bottom: 10px;
}

/*.vista-slider-compromisos-cumplidos .contenido-div {
  position: relative;  Necesario para posicionar absolutamente dentro de este contenedor 
}*/

.compromisos-cumplidos-titulo,
.compromisos-cumplidos-municipio {
  position: absolute;
  z-index: 2;
  color: white;
  /* o el color que necesites */
  background: rgba(0, 0, 0, 0.5);
  /* fondo semitransparente para mejor contraste */
  padding: 5px 20px;
  font-weight: bold;
  max-width: 90%;
  border-radius: 0px 10px 10px 0px;
  margin-left: -10px;
}

.compromisos-cumplidos-titulo {
  top: 10px;
  left: 10px;
}

.compromisos-cumplidos-municipio {
  top: 50px;
  /* ajusta según altura del título */
  left: 10px;
}

/* Asegura que el iframe esté detrás */
.vista-slider-compromisos-cumplidos .valor_campo iframe {
  z-index: 1;
  position: relative;
}

#vista-15269 .owl-nav {
  display: flex;
  justify-content: space-around;
}

#vista-15269 .owl-item:hover {
  transform: none;
  box-shadow: none;
}

/*----INFOGRAFIAS DE LOOKER STUDIO----------------------------------------------------------------------------------------------*/
.infografia-container {
  width: 100%;
  margin: 0 auto;
  /*padding: 20px;*/
}

.infografia-iframe-wrapper {
  width: 100%;
  aspect-ratio: 600/ 980;
  /* Mantiene proporción automáticamente */
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* sombra suave */
  animation: fadeIn 1s ease-in;
  /* animación al cargar */
}

.infografia-responsive-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  /* evita que se vea scroll interno */
}

/* Animación de aparición suave */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*----------Menu AJAX---------------*/
.componente-menuback .fila-tabs-menuback .nav-tabs {
  border-bottom: 1px solid #BEBEBE;
}

.componente-menuback .fila-tabs-menuback .nav-tabs>li>a {
  color: var(--color-azul);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 21px;
  text-align: center;
  text-transform: uppercase;
  background: transparent;
  border: none;
  min-height: 45px;
}

.componente-menuback .fila-tabs-menuback .nav-tabs>li.active>a {
  border: 1px solid #BEBEBE;
  border-bottom: 1px solid #FFFFFF !important;
  border-radius: 20px 20px 0 0 !important;
  color: var(--color-naranja-acento);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 21px;
  text-align: center;
  text-transform: uppercase;
  background: #FFFFFF;
}

/*--------FONDO LOGIN----------------*/
.content-login-fondo-fluid {
  background-image: url('https://movilidad.valledelcauca.gov.co/storage/Clientes/Gobernacion/Movilidad/imagenes/Icon%20Grid.svg');
  background-size: cover;
  /* Cubre todo el contenedor */
  background-position: center;
  /* Centra la imagen */
  background-repeat: no-repeat;
  /* Evita repetición */
}


/*--------VISTA DE PUBLICACIONES----------------------------------*/

/* ---------------------------------------------------------------------------------------- */
/* Página Documentos */

.fila-pagina-documentos>div>:nth-child(1),
.fila-pagina-documentos>div>:nth-child(2) {
  height: 62px;
}

.fila-pagina-documentos .fila-visual-result {
  padding: 0 15px !important;
}

.fila-pagina-documentos .filtros {
  margin-bottom: 10px;
}

.fila-pagina-documentos .filtros select {
  width: 100%;
}

.fila-pagina-documentos .filtros .contenedor-filtro {
  width: 33%;
  display: inline-block;
}

.fila-pagina-documentos>div>:nth-child(2)>div {
  margin-top: 17px;
}

.pagina-documentos .filtros .campo-opcion-filtro {
  margin-right: 30px;
}

.section-page-container.contenedor-margin-center {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}


.vista-documentos .row:last-child .grupito {
  box-sizing: border-box;
  border: 1px solid #DEDEDE;
  border-radius: 10px;
  background-color: #FFFFFF;
  position: relative;
  margin-bottom: 15px;
  border-left: 5px solid var(--color-azul-tecnologico);
  padding: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

/*label.label-fecha-documento,
.vista-documentos .documentos-titulo {
  padding-left: 15px;
}*/

.label-fecha-documento,
.fecha-documento {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.vista-documentos .categoria-valor:before {
  content: "\f15c";
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  color: var(--color-rojo-acento);
  font-weight: 900;
  margin-right: 8px;
  line-height: 24px;
}

/*.vista-documentos .categoria-valor {
  padding-bottom: 24px;
}*/

.vista-documentos .valor-campo-descargar {
  position: absolute;
  right: 80px;
  top: 24px;
  font-size: 24px;
  font-weight: 900;
}

.vista-documentos .valor-campo-descargar i {
  color: #17517B;
}

.vista-documentos .valor-campo-ver {
  position: absolute;
  right: 22px;
  top: 24px;
  font-size: 24px;
  font-weight: 900;
  padding-left: 14px;
  border-left: 1px solid #DEDEDE;
}

.vista-documentos .valor-campo-ver i {
  color: #17517B;
}

.vista-documentos .grupito a>div {
  padding-right: 120px;
  max-height: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.valor-campo-descargar a::before {
  content: "\f019";
  /* Ícono de descarga (fa-download) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.25em;
  font-size: 2.5rem;
  color: var(--color-azul-tecnologico);
}

.valor-campo-ver a::before {
  content: "\f06e";
  /* Ícono de ver (fa-eye) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.25em;
  font-size: 2.5rem;
  color: var(--color-azul-tecnologico);
}

/* Oculta el texto visualmente, pero lo deja para lectores de pantalla */
.valor-campo-descargar a,
.valor-campo-ver a {
  color: transparent;
  font-size: 0;
  position: relative;
}

/* Si quieres que el cursor cambie al pasar por encima */
.valor-campo-descargar a:hover::before,
.valor-campo-ver a:hover::before {
  color: var(--color-naranja-acento);
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Estilos para la grilla del mapa */

/*
 * Estilos responsivos para la clase .padding-interior
 * Enfoque: Mobile-First
*/

/* 1. Estilos por defecto para móviles (pantallas pequeñas) */
.padding-interior {
  padding: 20px 25px;
  /* Menos padding horizontal para móviles */
}


/* 1. ESTILO DEL CONTENEDOR PRINCIPAL (LA TARJETA) */
/* Le damos una apariencia de tarjeta moderna y limpia. */
.vista-mapa-grilla .grupito {
  background-color: #ffffff;
  /* Fondo blanco para la tarjeta */
  border-radius: 16px;
  /* Bordes más redondeados y suaves */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  /* Sombra sutil para darle profundidad */
  padding: 24px;
  /* Espacio interno para que el contenido respire */
  border: 1px solid #e0e0e0 !important;
  /* Un borde muy ligero */
  overflow: hidden;
  /* Asegura que todo se mantenga dentro de los bordes redondeados */

  /* ¡MEJORA CREATIVA! Usamos Flexbox para reordenar los elementos visualmente. */
  display: flex;
  flex-direction: column;
  /* Apilamos los elementos verticalmente */
}

/* 2. REORDENAMIENTO Y ESTILO DEL ENCABEZADO (TÍTULO Y FECHA) */

/* Movemos el título para que aparezca primero */
.vista-mapa-grilla .georreferenciacion-para-la-transparencia\:-titulo {
  order: 1;
  /* El título es el primer elemento */
}

/* Movemos la fecha para que aparezca segunda */
.vista-mapa-grilla .fecha-georeferenciacion {
  order: 2;
  /* La fecha va después del título */
  margin-bottom: 20px;
  /* Espacio entre la fecha y el mapa */
}

/* Estilos para el enlace del título */
.vista-mapa-grilla .georreferenciacion-para-la-transparencia\:-titulo .valor_campo {
  color: #2c3e50;
  /* Un color oscuro y legible para el título */
  text-decoration: none;
  /* Quitamos el subrayado del enlace */
  font-weight: 700;
  /* Hacemos la fuente más gruesa y destacada */
  font-size: 2em;
  /* Un tamaño de fuente grande para el título */
  transition: color 0.3s ease;
  /* Transición suave al pasar el mouse */
}

/* Efecto hover para el título */
.vista-mapa-grilla .georreferenciacion-para-la-transparencia\:-titulo a:hover {
  color: #3498db;
  /* Cambia de color al pasar el mouse */
}

/* Estilos para la fecha */
.vista-mapa-grilla .fecha-georeferenciacion .valor_campo {
  font-size: 0.95em;
  /* Ligeramente más pequeño que el texto normal */
  color: #7f8c8d;
  /* Un color gris suave para la fecha */
  display: flex;
  /* Alineamos el ícono y el texto */
  align-items: center;
}

/* Estilo para el ícono de calendario */
.vista-mapa-grilla .fecha-georeferenciacion .fa-calendar-alt {
  margin-right: 8px;
  /* Espacio entre el ícono y la fecha */
  font-size: 1.1em;
  /* Hacemos el ícono un poco más grande */
}


/* 3. MAPA RESPONSIVO Y REORDENAMIENTO */

/* Movemos el contenedor del mapa para que aparezca al final */
.vista-mapa-grilla .georreferenciacion-para-la-transparencia\:-descripcion {
  order: 3;
  /* El mapa es el tercer y último elemento */
}

/* ¡MEJORA CREATIVA! Técnica de relación de aspecto para el iframe. */
/* Esto asegura que el mapa siempre mantenga su proporción. */
.vista-mapa-grilla .georreferenciacion-para-la-transparencia\:-descripcion .valor_campo {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  /* Relación de aspecto 4:3. Puedes ajustarlo a (680/840)*100 = 80.95% */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  /* Redondeamos también las esquinas del mapa */
}

/* Estilos finales para el iframe */
.vista-mapa-grilla .georreferenciacion-para-la-transparencia\:-descripcion iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* Quitamos cualquier borde que pueda tener el iframe */
}


.navegacion-mapas-lateral {
  margin-top: 20px;
  background-color: #f4f6f9;
  padding: 20px;
  border-radius: 16px;
  height: fit-content;
}

.titulo-contenedor-lateral {
  font-size: 1.5em;
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

.grilla-mapa-meses .grupito {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid transparent;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.grilla-mapa-meses .grupito:hover {
  border-color: var(--color-naranja-acento);
  box-shadow: 0 6px 12px rgba(52, 152, 219, 0.2);
}

.grilla-mapa-meses .georreferenciacion-para-la-transparencia\:-titulo a {
  color: var(--color-azul);
  font-size: 16px;
  flex-grow: 1;
  text-decoration: none !important;
  max-height: 6em;
  overflow: hidden;
  margin-bottom: auto;
  font-weight: bold;
}

/* --- Estilos del Panel de Administración --- */
/* Estilos Generales del Panel */
.panel-admin {
  background-color: #f0f2f5;
  /* Un tono de fondo ligeramente distinto */
  padding: 50px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Fuente moderna */
}

.panel-titulo {
  text-align: center;
  color: #1c2b4d;
  margin-bottom: 40px;
  display: block;
}

/* Contenedor de tarjetas con Flexbox */
.panel-tarjetas-contenedor {
  display: flex;
  /* ¡Activamos Flexbox! */
  flex-wrap: wrap;
  /* Permite que las tarjetas pasen a la siguiente línea */
  justify-content: center;
  /* Centra las tarjetas en el contenedor */
  gap: 30px;
  /* Espacio uniforme entre tarjetas */
  max-width: 1200px;
  margin: 0 auto;
}

/* El enlace que envuelve la tarjeta */
.tarjeta-link {
  text-decoration: none;
  flex-grow: 1;
  /* Permite que el enlace crezca si hay espacio */
  min-width: 300px;
  /* Ancho mínimo antes de que se envuelva */
  max-width: 450px;
  /* Ancho máximo para no ser demasiado grande */
}

/* La tarjeta en sí, con diseño horizontal */
.tarjeta {
  display: flex;
  /* Usamos Flexbox también dentro de la tarjeta */
  align-items: center;
  /* Alinea el ícono y el texto verticalmente */
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease-in-out;
}

/* Efecto al pasar el mouse */
.tarjeta-link:hover .tarjeta {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(28, 43, 77, 0.1);
  border-color: var(--color-naranja-acento);
}

/* Estilo del ícono a la izquierda */
.tarjeta-icono {
  font-size: 2.5rem;
  /* 40px */
  color: #0A2240;
  margin-right: 25px;
  padding: 15px;
  background-color: #f0f2f5;
  border-radius: 50%;
  /* Círculo perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 70px;
}

/* Contenedor del texto a la derecha */
.tarjeta-cuerpo {
  text-align: left;
}

.tarjeta-titulo {
  color: var(--color-azul);
  margin: 0 0 5px 0;
  font-weight: 600;
}

.tarjeta-descripcion {
  color: #6c757d;
  margin: 0;
}

/* Asegura que no haya subrayado en el enlace al pasar el cursor */
.tarjeta-link:hover {
  text-decoration: none;
  color: var(--color-naranja-acento);
}

/* --- Estilos para el Botón de Regresar --- */
/* Estilo principal del botón */
.boton-regresar {
  display: inline-block;
  /* Para que el padding y margen funcionen bien */
  padding: 4px 10px;
  font-size: 16px;
  background-color: transparent;
  color: var(--color-azul);
  border: 2px solid var(--color-azul);
  font-weight: 600;
  text-decoration: none;
  /* Quita el subrayado del enlace */
  border-radius: 5px;
  /* Bordes redondeados */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  /* Transición suave para el hover */
}

/* Estilo del ícono Font Awesome */
.boton-regresar .fa-reply {
  margin-right: 8px;
  /* Espacio entre el ícono y el texto */
}

/* Efecto al pasar el cursor sobre el botón */
.boton-regresar:hover {
  background-color: var(--color-azul);
  /* Un gris un poco más oscuro */
  color: #ffffff;
  /* Mantiene el color del texto */
  transform: translateY(-2px);
  /* Eleva sutilmente el botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}


/* --- FORMULARIO --- */
.componente-gestioncontenido .crear_nuevo {
  padding: 12px 2px;
}

/* --- CONTENEDOR PRINCIPAL DEL FORMULARIO --- */
.componente-formulario {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
/*.componente-formulario {
  max-width: 1000px;
  margin: 1px auto;
  padding: 2rem 3rem;
}


.panelDiligenciar .border-rounded .row {
  margin: 0;
}
 Apuntamos a la clase principal que envuelve tu formulario */
.panelDiligenciar {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  padding: 30px !important;
  border: none !important;
  margin: 20px auto !important;
  /* Centramos el formulario */
  max-width: 900px;
  /* Limitamos el ancho máximo */
}
.wizard-wrapper{
  border: none !important;
}
.wizard-steps>li.active .wizard-step-number, .wizard-steps>li.completed .wizard-step-number {
  color: var(--color-azul);
  border-color: var(--color-azul);
}
/* --- TÍTULO PRINCIPAL Y SUBTÍTULOS DE SECCIÓN --- */
/* Estilo para el título como "Formulario Plantilla" */
.titulo-vista,
.nombre_grupo {
  text-align: left !important;
  margin-bottom: 20px !important;
  color: var(--color-azul) !important;
  font-weight: 600 !important;
  font-size: 24px;
  line-height: 21.94px;
}

.titulo-vista {
  font-size: 24px !important;
  text-align: center !important;
}
.titulo-vista .fa {
  margin-right: 10px;
}
.cabeceraform,
.footerform {
  text-align: justify;
  color: #37474F;
  background-color: #ECEFF1;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}
/* --- Títulos de Grupo/Categoría --- */
.nombre_grupo {
  color: #0D47A1;
  font-weight: 700;
  padding-bottom: 10px;
  margin-bottom: 2rem;
  border-bottom: 2px solid #90CAF9;
}
/* --- Asistente de Pasos (Wizard) --- */
.wizard-wrapper {
  margin-bottom: 2rem;
}

.wizard-steps {
  list-style: none;
  padding: 0;
  justify-content: space-around;
}
.step_click {
  padding: 15px 10px;
  cursor: pointer;
  color: #546E7A;
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
  flex-grow: 1;
  text-align: center;
}
.step_click.active {
  color: #0D47A1;
  font-weight: 700;
}

/* Línea indicadora del paso activo */
.step_click.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #0D47A1;
  border-radius: 3px 3px 0 0;
}
/* --- ETIQUETAS DE LOS CAMPOS (LABELS) --- */
/* Apuntamos a la clase que usan las etiquetas de tu formulario */
.control-label {
  font-weight: 500 !important;
  color:  var(--color-font-formularios) !important;
  font-size: 14px !important;
  height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
}
/* --- CAMPOS DE TEXTO, SELECTS Y TEXTAREA --- */
/* Apuntamos a la clase genérica para todos los campos de entrada */
.form-control {
  color: var(--color-azul);
  width: 100% !important;
  height: 4rem;
  padding: 6px 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  box-shadow: none !important;
  /* Removemos sombras que pueda tener por defecto */
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Efecto al seleccionar un campo */
.form-control:focus {
  border-color: #0056b3 !important;
  outline: none !important;
  box-shadow: 0 0 5px rgba(0, 86, 179, 0.2) !important;
}

/* Espaciado entre cada grupo de campo */
.form-group {
  margin-bottom: 1px;
}
.workflow-form .divBootstrapIn {
  min-height: 59px !important;
}
.chosen-container {
  border: none !important;
}
/*.chosen-container-single {
  border: 1px rgb(189, 189, 189) solid !important;
    border-radius: 8px;
    color: #0d3450;
    width: 100%;
    height: 38px;
    outline: none;
}*/
.chosen-container-multi .chosen-choices li.search-choice {
  margin: 2px 0 2px 2px !important;
}
/* --- Estilos para Selectores (Chosen.js) - Single y Multi --- */
.chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices {
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 8px 15px; /* Ajuste de padding para multi-select */
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo-georef .select2-selection.select2-selection--single,
.workflow-form .chosen-container-single .chosen-single {
  height: 38px !important;
  align-content: center;
  color: var(--color-azul);
  border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-azul);
  font-size: 14px;
  padding: auto;
}
.chosen-container-single .chosen-single {
   height: 50px;
}
.select2-container--open .select2-dropdown--below,
.select2-container--default .select2-search--dropdown .select2-search__field,
.chosen-container-active .chosen-single, .chosen-container-active .chosen-choices {
  border: 1px solid #0D47A1 !important;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1) !important;
}
.select2-container--default.select2-container--open .select2-selection--single {
  /* Tus estilos deseados: */
  border: 1px solid #0D47A1 !important;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.1) !important;
  /* (Recomendado) Quitar el contorno por defecto para que solo se vea tu box-shadow */
  outline: none;
}
.select2-container--open .select2-dropdown--below,
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 8px;
}
.chosen-container .chosen-drop {
    /* Esta línea define un borde azul completo */
    border: 1px solid #0D47A1;
    border-radius: 0px 0px 8px 8px;
  }
  
/* Píldoras del selector múltiple */
.chosen-container-multi .chosen-choices .search-choice {
  background-color: var(--color-azul-tecnologico);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 25px 4px 10px !important;
  margin: 5px 5px 5px 0;
}


/*
* 1. Hacemos espacio para la 'X' dentro de la opción seleccionada.
* Usamos 'position: relative' para poder posicionar la 'X' dentro.
*/
.chosen-choices .search-choice {
position: relative !important;
padding-right: 28px !important; /* Aumentamos el espacio a la derecha */
}

/*
* 2. Creamos el botón 'X' y lo posicionamos.
*/
.chosen-choices .search-choice .search-choice-close {
display: block;
position: absolute; /* Lo posicionamos relativo a su padre (.search-choice) */
top: 50% !important;
right: 5px;
transform: translateY(-50%); /* Truco para centrarlo verticalmente perfecto */
width: 18px !important;
height: 18px !important;
border-radius: 50%; /* Para que sea un círculo */
background-color: #a0a0a0; /* Un color de fondo gris */
color: white; /* El color de la 'X' */
text-align: center;
align-content: center;
line-height: 18px; /* Ayuda a centrar la 'X' */
font-size: 18px;
text-decoration: none;
transition: background-color 0.2s; /* Transición suave */
}

/*
* 3. Añadimos el caracter '×' (es el símbolo de multiplicación, no la letra x) 
* dentro del botón usando un pseudo-elemento.
*/
.chosen-choices .search-choice .search-choice-close::after {
content: '×';
}
.chosen-container-single .chosen-search input {
  border-radius: 8px;
  border: 1px solid #0D47A1;
}
.chosen-container-single .chosen-search input:focus {
  outline: none !important;
  border-color: #0056b3 !important;
  box-shadow: 0 0 5px rgba(0, 86, 179, 0.5) !important;
}
.chosen-container .chosen-results li.active-result {
  color: var(--color-azul);
}
.chosen-container .chosen-results li.active-result:hover {
  background-color: var(--color-azul-claro);
}
/*
* 4. (Opcional) Cambiamos el color al pasar el mouse para mejor experiencia.
*/
.chosen-choices .search-choice .search-choice-close:hover {
background-color: var(--color-azul); /* Se pone rojo al pasar el mouse */
}
/* --- BOTONES --- */
/* Botón de "Enviar" o "Siguiente" (verde por defecto en tu HTML) */
.btn-success {
  background-color: var(--color-azul) !important;
  color: #fff !important;
  border-color: var(--color-azul) !important;
}

.btn-success:hover {
  background-color: #0a56c9 !important;
  /* Un poco más oscuro al pasar el mouse */
}


/* Botón de "Cancelar" o "Atrás" (gris por defecto en tu HTML) */
.kv-zoom-actions .btn-kv {
  background-color: #f0f0f0 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
.kv-zoom-actions .btn-kv i {
  margin: auto !important;
}
.btn-default {
  background-color: #CFD8DC;
  color: #37474F;
}
.btn-default:hover {
  background-color: #e0e0e0 !important;
}

/* Ocultar elementos que no queremos del HTML original */
/*
================================================================
  ESTILOS MODERNOS PARA CAMPO DE CARGA DE ARCHIVOS
================================================================
*/

/* 2. Área donde se muestra el nombre del archivo */
.file-caption.form-control {
  border: 1px solid #ccc;
  border-right: none; /* Quitamos el borde derecho para que se una con los botones */
  box-shadow: none;
  border-radius: 8px 0 0 8px !important;
}

/* Estilo para el texto del placeholder */
.file-caption-name::placeholder {
  color: #999;
}

/* 3. Botón "Examinar..." (el principal) */
.btn-file {
  background-color: #004a77 !important; /* Azul oscuro principal */
  color: white !important;
  border: 1px solid #004a77 !important;
  border-radius: 0 8px 8px 0 !important; /* Bordes redondeados solo a la derecha */
  font-size: 12px;
  padding: 10px 12px !important;
  height: 4rem; 
}
.btn-file:hover {
  background-color: #003a60 !important; /* Un poco más oscuro al pasar el mouse */
}

/* 4. Botón "Quitar" (el secundario) */
.fileinput-remove-button {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  border-right: none !important; /* Se une con el botón de examinar */
  border-radius: 0 !important; /* Bordes redondeados solo a la derecha */
  padding: 10px 12px !important;
  height: 4rem; 
  font-size: 12px !important;
}
.fileinput-remove-button:hover {
  background-color: #e0e0e0 !important;
  color: #c70000 !important; /* Color rojo para el ícono al pasar el mouse */
}

/* 5. Aseguramos que los íconos dentro de los botones se vean bien */
.btn .fa {
  color: inherit; /* Hereda el color del botón (blanco o gris) */
  vertical-align: middle;
}
.kv-zoom-actions {
  display: flex;
}

.grupo-repetitiva-archivo {
  border-radius: 8px;
}

.btn.dropdown-toggle.btn-default.cargamasiva,
.agregar-registro {
  width: auto !important;
}
/*
================================================================
  ESTILOS MODERNOS PARA TABLA DE DATOS
================================================================
*/

/* 2. Estilos generales de la tabla */
/* Ahora la tabla misma tiene el borde y la sombra para un look contenido. */
.repite-tabla {
  width: 100%;
  border-collapse: collapse;
  color: #333;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 3. Encabezado de la tabla (thead) */
/* Fondo azul oscuro y texto en blanco como solicitaste. */
.repite-tabla thead {
  background-color: #004a77; /* Azul oscuro */
  text-align: left;
}

.repite-tabla th {
  background-color: #004a77;
  padding: 16px 15px;
  font-weight: 600;
  color: #ffffff; /* Texto en blanco */
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* 4. Celdas y filas del cuerpo de la tabla (tbody) */
.repite-tabla td {
  padding: 15px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f1f1;
}

/* Efecto de hover en las filas para mejorar la interactividad */
.repite-tabla tbody tr:hover {
  background-color: #f0f7ff;
}

/* Elimina el borde de la última fila para un acabado limpio */
.repite-tabla tbody tr:last-child td {
  border-bottom: none;
}

/* 5. Estilos para los botones de "Opciones" (Editar y Eliminar) */
/* Ahora tienen apariencia de botones reales. */
.opciones-admin {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio reducido entre los botones */
}

.editar-dato-seccion,
.eliminar-dato-seccion {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: white !important; /* Texto en blanco para ambos botones */
  padding: 6px 12px; /* Padding para dar forma de botón */
  border-radius: 5px; /* Bordes redondeados */
  border: 1px solid transparent;
  transition: background-color 0.2s ease;
}

/* Añadimos los iconos de Font Awesome 5 usando pseudo-elementos ::before */
.editar-dato-seccion::before,
.eliminar-dato-seccion::before {
  font-family: "Font Awesome 5 Free"; /* Asegúrate de que tu sitio cargue Font Awesome */
  font-weight: 900; /* Para iconos sólidos (fas) */
}

/* Estilo para el botón de Editar */
.editar-dato-seccion {
  background-color: #007bff; /* Fondo azul */
  border-color: #007bff;
}
.editar-dato-seccion:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}
.editar-dato-seccion::before {
  content: "\f044"; /* Icono de lápiz (fa-edit) */
}

/* Estilo para el botón de Eliminar */
.eliminar-dato-seccion {
  background-color: #dc3545; /* Fondo rojo */
  border-color: #dc3545;
}
.eliminar-dato-seccion:hover {
  background-color: #c82333;
  border-color: #c82333;
}
.eliminar-dato-seccion::before {
  content: "\f2ed"; /* Icono de papelera (fa-trash-alt) */
}