/* archivo: css/estilos.css - Versión optimizada con barra superior, menú lateral responsive y panel admin */

/* ============================= */
/* RESET GENERAL */
/* ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  body {
    font-family: 'Delius', cursive;
  }

  /* Forzar a que los modales usen la misma fuente */
  .modal h2,
  .modal,
  .modal * {
    font-family: 'Delius', cursive !important;
  }

   

  /* Forzar a que los formularios usen la misma fuente */
  input,
  textarea,
  select,
  button,
  label {
    font-family: 'Delius', cursive;
    /* hereda la del body */
    font-size: 15px;
    /* opcional, para mantener proporción */
  }
}

body {
  background-color: #ffffff;
  color: #333;/
}

/* Quitar flechas en inputs type=number (Chrome, Safari, Edge) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


a {
  text-decoration: none;
}

/* ============================= */
/* CONTENEDOR PRINCIPAL Y SIDEBAR */
/* ============================= */
.contenedor-principal {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  transition: width 0.3s ease;
  border-right: 1px solid #2e3a4d;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.sidebar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
}


.logo-sidebar {
  width: 200px; /* Ajusta el tamaño según sea necesario */
  height: auto; /* Mantener proporción */
  display: block;
  border-radius: 50%;
  margin: 0 auto ; /* Centrar y espacio inferior */
  transition: all 0.4s ease-in-out;  /* transición suave */
}




.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    text-align: center;
}


.logo-text {
    margin-top: 10px;
    line-height: 1.2;
}

.logo-text .linea1,
.logo-text .linea2 {
    display: block;
    color: #ffffff; /* Cambia si tu sidebar usa otro color */
    font-weight: 600;
    font-size: 12px; /* Ajusta si lo quieres más grande */
    letter-spacing: 0.5px;
}

/* Para que la segunda línea se vea más personalizada */
.logo-text .linea2 {
    font-weight: 500;
    font-size: 11px;
    opacity: 0.9;
}








/* Cuando el sidebar está minimizado → logo pequeño */
.sidebar.minimizada .logo-sidebar {
    width: 75px;              /* tamaño tipo avatar */
    margin: 20px auto 40px;   /* centrado vertical y horizontal */
    display: block;           /* asegurar centrado */
    transform: translateX(0); /* evitar desplazamientos raros */
    transition: all 0.4s ease-in-out;

}

.sidebar.minimizada .logo-text {
    opacity: 0;                /* fade-out */
    transform: translateY(-5px);
    pointer-events: none;      /* evita que afecte el layout */
    height: 0;                 /* literal desaparece */
    overflow: hidden;          /* oculta contenido */
}

.sidebar-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(170, 231, 196, 0.3), rgba(88, 182, 130, 0.3)), url("../medios/img/fondo.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 1;
}

.sidebar>*:not(.sidebar-fondo) {
  position: relative;
  z-index: 1;
}

.sidebar.minimizada {
  width: 80px;
}

.sidebar.minimizada .perfil p,
.sidebar.minimizada .acciones,
.sidebar.minimizada .menu a span {
  display: none;
}

.perfil {
  text-align: center;
  margin-bottom: 40px;
}

.perfil img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  /*border: 2px solid #2196f3;*/
  margin-bottom: 10px;
  transition: all 0.3s ease;/
}

.perfil p {
  font-weight: 600;
  margin-bottom: 10px;
}

.acciones i {
  color: #ccc;
  margin: 0 8px;
  cursor: pointer;
  transition: color 0.3s;
}

.acciones i:hover {
  color: #fff;
}

.menu ul {
  list-style: none;
}

.menu li {
  margin: 15px 0;
}

.menu a {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.menu a:hover {
  background: rgba(2, 63, 20, 0.541);
  color: #fff;
}

.menu a i {
  width: 24px;
  text-align: center;
}

.toggle-sidebar {
  background-color: transparent;
  color: #ffffff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
  transition: color 0.3s ease;
}

.toggle-sidebar:hover {
  color: #2196f3;
}

/* ============================= */
/* TOPBAR */
/* ============================= */
.topbar-superior {
  background-color: #d4edda;
  /* Verde institucional 2f663c*/
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;

}

.topbar-superior h2 {
  font-size: 1rem;
  font-weight: bold;
  color: #2f663c;
  text-transform: uppercase;
  text-align: center;
}

.topbar-superior .toggle-sidebar {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* ------------------------------ */
/* Estilos para el botón hamburguesa */
/* ------------------------------ */

/* Contenedor del botón hamburguesa */
.toggle-sidebar {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Espacio entre las barras */
  z-index: 1001;
  /* Para que esté sobre otros elementos */
}


/* Las tres barras (líneas) del botón */
.toggle-sidebar span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #fff;
  /* Color blanco para barras (ajusta según tu topbar) */
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* Cuando el botón está activo (menú abierto), transformamos las barras para hacer la X */

/* Primera barra rota 45° y movida */
.toggle-sidebar.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 5px);
}

/* Segunda barra oculta */
.toggle-sidebar.active span:nth-child(2) {
  opacity: 0;
}

/* Tercera barra rota -45° y movida */
.toggle-sidebar.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -5px);
}

/* ------------------------------ */
/* Estilos para el sidebar (menú lateral) */
/* ------------------------------ */

/* Sidebar oculto inicialmente en móvil, desplazado fuera de pantalla */
.sidebar {
  position: fixed;
  /* Que quede fijo */
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  /* Ancho menú */
  background-color: #222;
  /* Fondo oscuro, ajusta a tu diseño */
  overflow-y: auto;
  transform: translateX(-100%);
  /* Oculto hacia la izquierda */
  transition: width 0.3s ease;
  /* transición suave al ancho */
  z-index: 1000;
  /* Debajo del botón */
}

/* Sidebar visible en móvil cuando tiene la clase active */
.sidebar.active {
  transform: translateX(0);
  /* Se muestra */
}

/* Sidebar minimizado en escritorio */
@media (min-width: 769px) {
  .sidebar {
    transform: translateX(0);
    position: relative;
    /* Ya no fijo */
    height: auto;

  }

  .sidebar.minimizada {
    width: 100px;
    /* Ancho minimizado */
  }
}


/* Opcional: para esconder scrollbar pero que siga scroll */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* ------------------------------ */
/* Ajustes responsive para móviles */
/* ------------------------------ */

@media (max-width: 768px) {
  /* Aquí puedes agregar ajustes específicos para móvil si quieres */
}





/* ============================= */
/* CONTENIDO Y PIE DE PÁGINA */
/* ============================= */
.contenido {
  flex: 1;
  padding: 10px;
  /* Espacio alrededor del contenido */
  background: #fff;
  min-height: calc(100vh - 130px);
}

.pie-pagina {
  background: linear-gradient(180deg, #1e2b3a, #19222e);
  color: #ccc;
  padding: 20px 40px;
  text-align: center;
  font-size: 14px;
  border-top: 1px solid #2e3a4d;
  margin-top: auto;
}

.contenido-footer p {
  margin: 4px 0;
  line-height: 1.4;
}

/* ============================= */
/* SECCIÓN DE NOTICIAS EN INDEX */
/* ============================= */


.seccion-noticias {
  margin-top: 40px;
}

.seccion-noticias h2 {
  font-size: 24px;
  color: #066b44;
  margin-bottom: 20px;
}

.seccion-noticias .contenedor-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.seccion-noticias .tarjeta-noticia {
  background-color: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.seccion-noticias .tarjeta-noticia:hover {
  transform: scale(1.03);
}

.seccion-noticias .tarjeta-noticia img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: #ffffff; 
}

.seccion-noticias .contenido-noticia {
  padding: 15px;
}

.seccion-noticias .contenido-noticia h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.seccion-noticias .contenido-noticia .fecha {
  font-size: 14px;
  color: #777;
  margin-bottom: 12px;
}

.btn-leer {
  display: inline-block;
  background-color: #066b44;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.btn-leer:hover {
  background-color: #044d31;
}

/* ============================= */
/* ADMIN NOTICIAS (admin_noticias.php) */
/* ============================= */
.admin-noticias {
  margin-top: 20px;
}

.admin-noticias h2 {
  font-size: 24px;
  color: #066b44;
  margin-bottom: 20px;
  text-align: center;
}

.admin-noticias form {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.admin-noticias form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.admin-noticias form input[type="text"],
.admin-noticias form textarea,
.admin-noticias form input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.admin-noticias form button {
  background-color: #066b44;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.admin-noticias form button:hover {
  background-color: #044d31;
}

.admin-noticias table {
  width: 100%;
  border-collapse: collapse;
  /* Eliminar espacios entre celdas */
  background: #ffffff;
  border-radius: 10px;
  /* Bordes redondeados */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.admin-noticias table th,
.admin-noticias table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e1e1e1;
  /* Línea divisoria*/
}

.admin-noticias table th {
  background-color: #f4f6f9;
  font-weight: bold;
  /* Negrita */
}

.admin-noticias table tr:hover {
  background-color: #f9f9f9;
}

.admin-noticias table a {
  color: #066b44;
  text-decoration: none;
  margin: 0 5px;
  /* Espacio entre enlaces */
}

.admin-noticias table a:hover {
  text-decoration: underline;
}

/* ============================= */
/* noticias.php - miniaturas solo en esta página */
/* ============================= */
.pagina-noticias .contenedor-noticias {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pagina-noticias h2 {
  margin-bottom: 15px;
  /* Ajusta según prefieras */
}


.pagina-noticias .contenedor-noticias .tarjeta-noticia {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 5px;
  transition: background-color 0.3s ease;

}

.pagina-noticias .contenedor-noticias .tarjeta-noticia:hover {
  background-color: #eef6f3;
}

.pagina-noticias .contenedor-noticias .tarjeta-noticia img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
}

.pagina-noticias .contenedor-noticias .contenido-noticia h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pagina-noticias .contenedor-noticias .contenido-noticia .fecha {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

.pagina-noticias .contenedor-noticias .btn-leer {
  font-size: 13px;
  padding: 5px 10px;
}

.detalle-noticia img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 15px 0;
}

/* ============================= */
/* EDITAR NOTICIA (editar_noticia.php) */
/* ============================= */
.editar-noticia {
  max-width: 700px;
  margin: 20px auto;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.editar-noticia h2 {
  font-size: 24px;
  color: #066b44;
  margin-bottom: 20px;
  text-align: center;
}

.editar-noticia form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.editar-noticia form input[type="text"],
.editar-noticia form textarea,
.editar-noticia form input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.editar-noticia form button {
  background-color: #066b44;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.editar-noticia form button:hover {
  background-color: #044d31;
}

/* ============================= */
/* FORMULARIO PQR (pqr.php) */
/* ============================= */

.pqr-form {
  max-width: 700px;
  margin: 20px auto;
  background: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* efecto de cuadro */
}


.pqr-form small {
  display: block;       /* Lo hace ocupar toda la línea */
  text-align: right;    /* Alinea el texto a la derecha */
  margin-bottom: 8px;   /* Espacio debajo, opcional */
}


.pqr-form h2 {
  font-size: 24px;
  color: #066b44;
  /* Verde institucional */
  margin-bottom: 20px;
  text-align: center;
}

.pqr-form form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.pqr-form form input[type="text"],
.pqr-form form input[type="email"],
.pqr-form form input[type="file"],
.pqr-form form select,
.pqr-form form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}


.pqr-form input[type="number"] {
  width: 180px;
  padding: 9px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px; /* o el valor que necesites */
}



input[type="file"]::file-selector-button {
  background-color: #066b44;
  /* color del botón */
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background-color: #044d31;
  /* color al pasar el mouse */
}



.pqr-form form button {
  background-color: #066b44;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pqr-form form button:hover {
  background-color: #044d31;
}

/* Resultado de la consulta PQR */
.resultado-pqr {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  line-height: 1.6;
  /* mejora la legibilidad */
}



.resultado-pqr p {
  margin-bottom: 10px;
  /* espacio entre cada campo */
}


.resultado-pqr a {
  display: inline-block;
  margin-top: 5px;
  color: #007bff;
  text-decoration: none;
}



.resultado-pqr h3 {
  color: #066b44;
  margin-bottom: 10px;
}



/* Diseño admin PQR */
.admin-pqr {
  margin-top: 20px;
}

.admin-pqr h2 {
  font-size: 24px;
  color: #066b44;
  margin-bottom: 20px;
  text-align: center;
}

.filtros-pqr {
  margin-bottom: 20px;
  text-align: center;
}

.filtros-pqr select {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.btn-informe {
  background-color: #066b44;
  color: #fff;
  padding: 9px;
  border-radius: 6px;
  font-size: 14px;
  transition: background-color 0.3s ease;
  margin-bottom: 10px;

  border: none;            /* Elimina borde */
  box-shadow: none;        /* Elimina sombra */
  outline: none;           /* Elimina contorno al hacer clic */
}

.btn-informe:hover {
  background-color: #044d31;
}



.admin-pqr table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.admin-pqr table th,
.admin-pqr table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e1e1e1;
}

.admin-pqr table th {
  background-color: #f4f6f9;
  font-weight: bold;
}

.admin-pqr table tr:hover {
  background-color: #f9f9f9;
}

.admin-pqr table a {
  color: #066b44;
  text-decoration: none;
}

.admin-pqr table a:hover {
  text-decoration: underline;
}


/* ============================= */
/* EDITAR PQR (editar_pqr.php) */
/* ============================= */
.editar-pqr {
  max-width: 700px;
  margin: 20px auto;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.editar-pqr h2 {
  font-size: 24px;
  color: #066b44;
  margin-bottom: 20px;
  text-align: center;
}

.editar-pqr form label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: bold;
}

.editar-pqr form select,
.editar-pqr form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.editar-pqr form button {
  background-color: #066b44;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.editar-pqr form button:hover {
  background-color: #044d31;
}


/* Estilo para submenús */
.submenu>a {
  display: flex;
  align-items: center;
  gap: 8px;
  /* espacio entre ícono y texto */
}


.submenu-items {
  display: none;
  flex-direction: column;
  margin-left: 60px;
  margin-top: 5px;
}

.submenu-items li a {
  padding: 8px 0;
  font-size: 14px;
}

.submenu.abierto .submenu-items {
  display: flex;
}


/* ============================= */
/* Bloques informativos en PQR */
/* ============================= */

/* Primer bloque */
.info-pqr {
  max-width: 700px;
  margin: 20px auto;
  background: #e6f0fa;
  /* azul claro */
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #033e6b;
  line-height: 1.5;
}

/* Segundo bloque */
.info-asunto {
  max-width: 700px;
  margin: 10px auto 20px auto;
  background: #d9e8f5;
  /* azul un poco más fuerte */
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #033e6b;
  line-height: 1.5;
}

.info-asunto h3 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #02527a;
}

.info-asunto ul {
  list-style: none;
  padding-left: 0;
}

.info-asunto li {
  margin-bottom: 8px;
}


/* ============================= */
/* Formulario de login */
/* ============================= */

.login-contenedor {
  max-width: 400px;
  margin: 80px auto;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-contenedor h2 {
  color: #066b44;
  margin-bottom: 20px;
}

.login-contenedor label {
  display: block;
  text-align: left;
  margin-top: 10px;
  font-weight: bold;
}

.login-contenedor input[type="email"],
.login-contenedor input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.login-contenedor button {
  margin-top: 20px;
  background-color: #066b44;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.login-contenedor button:hover {
  background-color: #044d31;
}

.mensaje-error {
  color: red;
  margin-bottom: 15px;
}

/* ============================= */
/* admin_index.php - Panel de administración */
/* ============================= */

.admin-dashboard {
  padding: 20px;
}

.admin-dashboard h2 {
  font-size: 26px;
  color: #066b44;
  text-align: center;
  margin-bottom: 30px;
}

.tarjetas-admin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tarjeta {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: #333;
}

.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tarjeta i {
  font-size: 40px;
  color: #066b44;
  margin-bottom: 15px;
}

.tarjeta h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #066b44;
}

.tarjeta p {
  font-size: 14px;
  color: #555;
}


/* ============================= */
/* perfil.php - Estilos exclusivos del formulario de perfil */
/* ============================= */

.perfil-usuario {
  margin-top: 20px;
}

.perfil-usuario h2 {
  font-size: 24px;
  color: #066b44;
  margin-bottom: 20px;
  text-align: center;
}

.perfil-usuario form {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.perfil-usuario form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.perfil-usuario form input[type="text"],
.perfil-usuario form input[type="email"],
.perfil-usuario form input[type="password"],
.perfil-usuario form select,
.perfil-usuario form input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.perfil-usuario form button {
  background-color: #066b44;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.perfil-usuario form button:hover {
  background-color: #044d31;
}

.mensaje-exito {
  background-color: #d4edda;
  color: #155724;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  text-align: center;
}

/* ============================= */
/* perfil.php - Galería de avatares */
/* ============================= */

.galeria-avatares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 15px;
  margin: 15px 0;
}

.opcion-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 5px;
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.opcion-avatar img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 5px;
  pointer-events: none;
  /* Evita que la imagen bloquee el click */
}

.opcion-avatar input[type="radio"] {
  display: none;
  /* Ocultamos el radio button */
}

.opcion-avatar:hover {
  border-color: #ccc;
  transform: scale(1.05);
}

.opcion-avatar input[type="radio"]:checked+img,
.opcion-avatar input[type="radio"]:checked~img {
  border: 3px solid #066b44;
  /* Verde para seleccionado */
  border-radius: 50%;
}

/* ============================= */
/* Ajustes para avatar en sidebar */
/* ============================= */

/* Avatar tamaño normal */
.avatar-sidebar {
  width: 50px !important;/* Tamaño según necesidad */
  height: 50px !important;
  border-radius: 50%;
  /*border: 2px solid #2196f3;*/
  margin-bottom: 10px;
  /* Espacio entre avatar y nombre */
  transition: all 0.3s ease;/* Efecto de transición suave */
  object-fit: cover;
  image-rendering: auto;/* Asegurar que el navegador use buena calidad */
}

/* Avatar cuando el sidebar está minimizado */
.sidebar.minimizada .avatar-sidebar {
  width: 50px; /* Tamaño reducido */
  height: 50px;
  /*border: 1px solid #2196f3;*/
}




/* ============================= */
/* Sección: INFORMACIÓN LEGAL Y FINANCIERA */
/* ============================= */

.informacion-legal {
  margin-top: 20px;
  /* Espacio superior */
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.informacion-legal h2 {
  text-align: center;
  color: #066b44;
  margin-bottom: 20px;
  font-size: 24px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

.selector-anio {
  display: block;
  margin: 0 auto 30px auto;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #ccc;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

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

.tarjeta-categoria {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  transition: all 0.3s ease;
}

.tarjeta-categoria:hover {
  transform: translateY(-5px);
  border-color: #066b44;
}

.tarjeta-categoria h3 {
  color: #066b44;
  margin-bottom: 10px;
  font-size: 18px;
}

.tarjeta-categoria ul {
  list-style: none;
  padding: 0;
}

.tarjeta-categoria ul li {
  margin-bottom: 8px;
}

.tarjeta-categoria ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.tarjeta-categoria ul li a:hover {
  color: #066b44;
}


/* ============================= */
/* actividad meritoria */
/* ============================= */
.actividad-meritoria p {
  line-height: 1.8;
  /* Espaciado entre líneas */
  margin-bottom: 15px;
  /* Espacio entre párrafos */
  font-size: 1rem;
  /* Tamaño de letra legible */
  color: #333;
  /* Color de texto más suave */
}

.actividad-meritoria {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}



/* ============================= */
/* Modal de edición de noticias */
/* ============================= */


/* Fondo del modal */
#modal-editar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Contenedor del contenido del modal */
#modal-editar .modal-contenido {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Botón cerrar */
#modal-editar .cerrar {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  cursor: pointer;
}

/* Título principal del modal */
#modal-editar h2 {
  text-align: center;
  color: #066b44;
  /* Verde institucional */
  font-weight: bold;
  /* Negrita */
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 22px;
}

/* Etiquetas de los campos */
#modal-editar label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: bold;
  /* Negrita para etiquetas */
  color: #333;
}

/* Campos de entrada */
#modal-editar input,
#modal-editar select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Botón de guardar */
#modal-editar button[type="submit"] {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background-color: #066b44;
  /* Verde institucional */
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#modal-editar button[type="submit"]:hover {
  background-color: #044d31;
}






/* Contacto */
.contact-section {
  padding: 40px 20px;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #2f663c;
}

.section-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}

.contact-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  width: 280px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform .2s ease, box-shadow .2s ease;
}

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

.contact-card i {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

/* Colores personalizados */
.contact-card i.fa-map-marker-alt {
  color: #0d6efd;
}

/* Azul */
.contact-card i.fa-envelope {
  color: #ff9800;
}

/* Naranja */
.contact-card i.fa-whatsapp {
  color: #25d366;
}

/* Verde WhatsApp */

.contact-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #222;
}


.contact-card p,
.contact-card a {
  font-size: 0.95rem;
  color: #555;
  text-decoration: none;
}

.contact-card a:hover {
  color: #0d6efd;
}





/* Botón flotante de WhatsApp */
.btn-whatsapp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.btn-whatsapp img {
  width: 35px;
  height: 35px;
}

.btn-whatsapp:hover {
  transform: scale(1.1);
}





/* Contenedor de todas las respuestas */
.respuestas-container {
  margin-top: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
}

/* Cada respuesta individual */
.respuesta {
  background: #ffffff;
  border: 1px solid #ddd;
  border-left: 5px solid #4CAF50;
  /* línea lateral verde */
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

/* Efecto hover */
.respuesta:hover {
  transform: scale(1.02);
  background: #fdfdfd;
}

/* Texto de la respuesta */
.respuesta p {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* Fecha de la respuesta */
.respuesta .fecha {
  font-size: 12px;
  color: #777;
  margin-top: 6px;
  display: block;
  text-align: right;
}





.respuesta-item {
  background: #f9f9f9;
  border-left: 4px solid #4CAF50;
  padding: 12px;
  margin: 12px 0;
  border-radius: 6px;
}

.respuesta-fecha {
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}

.respuesta-texto {
  font-size: 14px;
  line-height: 1.4;
  color: #222;
}


/* ============================= */
/* Ajustes finales de dashboard  */
/* ============================= */

/* Normalizar separación entre secciones del dashboard */
.contenido {
  padding-top: 0;
  /* quita espacio extra arriba */
}

.informacion-legal {
  margin: 10px 0;
  /* igual margen arriba y abajo */
}

.informacion-legal h2 {
  margin-top: 0;
  /* evita que el título empuje hacia arriba */
}

/* Ajustar solo la primera sección (Noticias destacadas) */
.seccion-noticias {
  margin-top: 0 !important;
  /* quita margen arriba */
  padding-top: 0 !important;
  /* quita padding arriba */
}

.seccion-noticias h2 {
  margin-top: 0 !important;
  /* quita margen arriba */
  padding-top: 0 !important;
  /* quita padding arriba */
}




/* ============================= */
/* Adaptación a móviles */
/* ============================= */
@media screen and (max-width: 768px) {
  .selector-anio {
    width: 100%;
    font-size: 14px;
  }

  .tarjeta-categoria h3 {
    font-size: 16px;
  }
}









/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media screen and (max-width: 768px) {
  .contenedor-principal {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1200;
    padding: 40px 20px 20px 20px;
  }

  .sidebar.mostrar-mobile {
    transform: translateX(0);
  }



  .menu li {
    margin: 10px 0;
  }

  .menu a {
    padding: 10px;
    font-size: 16px;
  }

  .topbar-superior {
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
  }

  .topbar-superior h2 {
    font-size: 18px;
    text-align: center;
  }

  .topbar-superior .toggle-sidebar {
    position: static;
    transform: none;
    margin-bottom: 10px;
    z-index: 1300;
    /* por encima del sidebar */
  }

  .admin-noticias form {
    width: 95%;
    padding: 15px;
  }

  .admin-noticias table th,
  .admin-noticias table td {
    font-size: 14px;
    padding: 8px;
  }
}




.pqr-form {
  width: 95%;
  padding: 15px;
}

.pqr-form h2 {
  font-size: 20px;
}

.pqr-form form button {
  width: 100%;
  padding: 12px;
}

.editar-pqr {
  width: 95%;
  padding: 15px;
}

.editar-pqr h2 {
  font-size: 20px;
}

.info-pqr,
.info-asunto {
  width: 95%;
  padding: 15px;
  font-size: 13px;
}

.tarjetas-admin {
  grid-template-columns: 1fr;
}

.perfil-usuario form {
  width: 95%;
  padding: 15px;
}

.galeria-avatares {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 10px;
}

.opcion-avatar img {
  width: 50px;
  height: 50px;
}













/* ============================= */
/* ============================= */
/* Responsive: Noticias */
/* ============================= */

/* Contenedor principal de noticias */
.pagina-noticias {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 15px;
  /* ajusta según el diseño */
}

/* Contenedores internos (lista y detalle) */
.pagina-noticias>div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ============================= */
/* Responsive: primero detalle y luego lista */
/* ============================= */
@media (max-width: 768px) {
  .pagina-noticias {
    flex-direction: column;
  }

  /* Invertimos el orden en móviles */
  .pagina-noticias .detalle-noticia {
    order: -1;
  }

  /* Aseguramos que cada bloque ocupe todo el ancho */
  .pagina-noticias>div {
    min-width: 100%;
  }
}




/* Paginación Noticias */
.paginacion-noticias {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  /* espacio entre botones y texto */
  margin-top: 40px;
  /* separa de la última noticia */
  margin-bottom: 40px;
  /* separa del footer */
}

.paginacion-noticias button {
  background: #2a9d8f;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.paginacion-noticias button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.paginacion-noticias span {
  font-weight: bold;
  color: #333;
}


/* ============================= */
/* FORMULARIO GENERAL */

/* Contenedor general de formularios */
.formulario {
  max-width: 600px; 
  margin: 20px auto; 
}

/* Cada campo dentro del formulario */
.campo-formulario {
  margin-bottom: 10px;/* Espacio entre campos */
  display: flex;
  flex-direction: column;
}

/* Estilo para las etiquetas */
.campo-formulario label {
  font-weight: bold;
  margin-bottom: 5px;
}

/* Inputs, selects y textarea */
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
  padding: 8px;/* Espaciado interno */
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 200px;
  box-sizing: border-box;
}

/* Botón de envío */
.formulario button {
  padding: 10px 15px;/* Espaciado interno */
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.formulario button:hover {
  background-color: #0056b3;
}


/* Filtros: en fila en escritorio */
.filtros-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* espacio entre campos */
  align-items: flex-end; /* alinear el botón con los inputs */
}

/* Reducir ancho de inputs en filtros */
.filtros-formulario .campo-formulario select {
  width: 260px; /* más compacto que el formulario principal */
}

/* Reducir ancho de inputs en filtros */
.filtros-formulario .campo-formulario input {
  width: 150px; /* más compacto que el formulario principal */
}

/* Botón ajustado */
.filtros-formulario .boton-filtro button {
  width: 180px;
  padding: 8px 14px;
}

/* Responsive: apilado en móviles */
@media (max-width: 768px) {
  .filtros-formulario {
    flex-direction: column;
    align-items: stretch;
  }

  .filtros-formulario .campo-formulario input,
  .filtros-formulario .campo-formulario select,
  .filtros-formulario .boton-filtro button {
    width: 100%;
  }
}




/* Solo afecta a los párrafos de datos en la vista de editar/responder PQR */
.editar-pqr p {
  margin-bottom: 10px;   /* separación entre cada dato */
  line-height: 1.4;      /* mejora legibilidad */
}

.btn-volver {
  display: inline-block;
  padding: 8px 14px;
  background-color: #6c757d; /* gris neutro */
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.btn-volver:hover {
  background-color: #5a6268; /* gris más oscuro */
}



.map-container {
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}




/* ====== TARJETAS DE CONÓCENOS  Y BOTON LEER MÁS ====== */

.conocenos-cards {
  display: flex;
  justify-content: center; 
  gap: 20px;
  flex-wrap: wrap;
}

.conocenos-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  width: 280px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform .2s ease, box-shadow .2s ease;
}

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

.conocenos-card i {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

/* ====== COLORES PARA LOS ICONOS DE LAS TARJETAS DE CONÓCENOS ====== */

/* Ícono de Misión */
.conocenos-card .fa-hand-holding-water {
    color: #0077b6; /* Azul agua */
}

/* Ícono de Visión */
.conocenos-card .fa-eye {
    color: #2a9d8f; /* Verde azulado */
}

/* Ícono de Historia */
.conocenos-card .fa-book-open {
    color: #e76f51; /* Naranja suave */
}


.conocenos-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: #222;
}


.conocenos-card p {
  font-size: 0.95rem;
  color: #555;
  text-decoration: none;
}


/* Botón "Leer más" */
    .btn-leer-mas {
        background: linear-gradient(135deg, #066b44, #066b44);
        color: #fff;
        border: none;
        padding: 10px 18px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-leer-mas:hover {
        background: linear-gradient(135deg, #044d31, #044d31);
        transform: scale(1.05);
    }

    /* Fondo del modal (overlay) */
    .modal {
        display: none;
        /* oculto por defecto */
        position: fixed;
        z-index: 1000;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        animation: fadeIn 0.3s ease;
    }

    /* Contenido del modal */
    .modal-contenido {
        background: #fff;
        margin: auto;
        padding: 25px;
        border-radius: 12px;
        width: 85%;
        max-width: 950px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        animation: slideIn 0.4s ease;
    }

    /* Texto largo con scroll interno */
    .scrollable-text {
        max-height: 65vh;
        overflow-y: auto;
        padding-right: 10px;
        text-align: justify;
        line-height: 1.6;
    }

    .scrollable-text::-webkit-scrollbar {
        width: 8px;
    }

    .scrollable-text::-webkit-scrollbar-thumb {
        background: #00bcd4;
        border-radius: 4px;
    }

    /* Botón cerrar */
    .cerrar {
        color: #333;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
    }

    .cerrar:hover {
        color: #e53935;
    }

    /* Animaciones */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Responsive */
    @media (max-width: 600px) {
        .modal-contenido {
            width: 95%;
            padding: 20px;
        }
    }

.detalle-noticia p {
  text-align: justify;
  line-height: 1.6;
}

.pie-pagina .creditos {
  font-size: 14px;
  margin-top: 5px;
}

.pie-pagina .creditos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  flex-direction: row-reverse;
}

.pie-pagina .creditos a:hover {
  text-decoration: underline;
}

.logo-waresoft {
  height: 35px;
  width: auto;
}