/* ============================================================
   RESPONSIVE CUSTOM - Municipalidad de Morales
   Mejoras de responsive para pantallas pequenas
============================================================ */

/* ============================================================
   REDUCCIONES DE HEADER Y TITULO (mas espacio para contenido)
============================================================ */

/* Header mas compacto */
.navbar-default {
  min-height: 50px;
}

.navbar-default .navbar-brand {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 15px;
}

.navbar-default .navbar-brand > img {
  max-height: 50px;
}

.navbar-default .navbar-nav > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 20px;
}

/* Breadcrumb/titulo reducido ~20% */
.breadcrumb-area {
  padding: 18px 0 !important;
}

.breadcrumb-area .page-title {
  font-size: 22px !important;
  margin: 0;
  line-height: 1.3;
}

.breadcrumb-area .breadcrumb {
  margin-bottom: 0;
  padding: 4px 0;
  font-size: 12px;
}

/* ============================================================
   POPUP / MODAL RESPONSIVE
============================================================ */

#miPopup .modal-dialog {
  max-width: 90vw;
  margin: 20px auto;
}

#miPopup .modal-content {
  border-radius: 8px;
  overflow: hidden;
}

#miPopup .modal-header {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

#miPopup .modal-header .modal-title {
  font-size: 16px;
}

#miPopup .modal-header .close {
  font-size: 24px;
  opacity: 0.7;
}

#miPopup .modal-body {
  padding: 10px;
  max-height: 70vh;
  overflow-y: auto;
}

#miPopup .modal-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-height: 65vh;
  object-fit: contain;
}

#miPopup .modal-footer {
  padding: 8px 15px;
  border-top: 1px solid #eee;
}

#miPopup .modal-footer .btn {
  font-size: 13px;
  padding: 6px 20px;
}

@media (min-width: 992px) {
  #miPopup .modal-dialog {
    max-width: 700px;
  }
}

@media (max-width: 576px) {
  #miPopup .modal-dialog {
    max-width: 95vw;
    margin: 10px auto;
  }

  #miPopup .modal-body {
    padding: 8px;
    max-height: 75vh;
  }

  #miPopup .modal-header .modal-title {
    font-size: 14px;
  }
}

/* ============================================================
   DETALLE DE NOTICIA - IMAGEN RESPONSIVE
============================================================ */

/* Eliminar espacio del banner/overlay vacio */
.content-holder {
  padding-top: 10px !important;
  margin-top: 0 !important;
}

/* Entry post - reducir padding superior, mantener sombra */
.content-holder .entry-post {
  padding-top: 15px;
}

.post-media {
  max-height: 500px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 20px;
}

.post-media img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

.content-holder .entry-post .post-title {
  font-size: 24px;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .post-media {
    max-height: 300px;
  }

  .post-media img {
    max-height: 300px;
  }

  .content-holder .entry-post .post-title {
    font-size: 18px;
  }

  .content-holder .entry-post .entry-excerpt {
    font-size: 14px;
  }
}

/* ============================================================
   ESTILOS PARA LISTADO DE DOCUMENTOS
============================================================ */

/* Buscador de documentos */
.doc-search-box {
  max-width: 500px;
  margin: 0 auto 20px;
  position: relative;
}

.doc-search-box input[type="text"] {
  width: 100%;
  padding: 12px 50px 12px 20px;
  border: 2px solid #ddd;
  border-radius: 30px;
  font-size: 15px;
  color: #333;
  outline: none;
  transition: border-color 0.3s ease;
  background: #fff;
}

.doc-search-box input[type="text"]:focus {
  border-color: #4a90a4;
}

.doc-search-box button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: #4a90a4;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.doc-search-box button:hover {
  background: #3a7a94;
}

/* Seccion de contenido con menos padding superior */
.breadcrumb-area + section {
  padding-top: 20px !important;
}

.doc-search-info {
  text-align: center;
  color: #888;
  font-size: 13px;
  margin-bottom: 15px;
}

/* Tabla de documentos */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.doc-table thead th {
  background: #f5f5f5;
  color: #555;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 10px;
  border-bottom: 2px solid #ddd;
  text-align: left;
}

.doc-table thead th.col-date,
.doc-table thead th.col-pdf {
  text-align: center;
}

.doc-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background 0.2s ease;
}

.doc-table tbody tr:hover {
  background: #f9f9f9;
}

.doc-table tbody td {
  padding: 10px;
  font-size: 13px;
  color: #555;
  vertical-align: top;
}

.doc-table .col-title {
  width: 28%;
}

.doc-table .col-title a {
  color: #2a6496;
  text-decoration: none;
  font-weight: 500;
}

.doc-table .col-title a:hover {
  text-decoration: underline;
  color: #1a4a6a;
}

.doc-table .col-description {
  width: 45%;
  color: #666;
  line-height: 1.4;
}

.doc-table .col-date {
  width: 12%;
  text-align: center;
  white-space: nowrap;
  color: #888;
}

.doc-table .col-pdf {
  width: 5%;
  text-align: center;
}

.doc-table .col-pdf img {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.doc-table .col-pdf img:hover {
  transform: scale(1.2);
}

/* Paginacion */
.doc-pagination {
  text-align: center;
  padding: 20px 0;
}

.doc-pagination a {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 3px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #555;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
}

.doc-pagination a:hover {
  background: #4a90a4;
  color: #fff;
  border-color: #4a90a4;
}

/* Responsive tabla documentos */
@media (max-width: 767px) {
  .doc-table .col-description {
    display: none;
  }

  .doc-table .col-title {
    width: 55%;
  }

  .doc-table .col-date {
    width: 30%;
  }

  .doc-table .col-pdf {
    width: 15%;
  }

  .doc-table thead th,
  .doc-table tbody td {
    padding: 8px 6px;
    font-size: 12px;
  }

  .doc-search-box {
    margin: 0 15px 20px;
  }
}

/* ---- MOBILE: hasta 991px ---- */
@media (max-width: 991px) {

  /* Header fijo - mejor comportamiento */
  #head.navbar-fixed-top {
    position: fixed;
    width: 100%;
    z-index: 9999;
  }

  /* Boton hamburguesa */
  .navbar-toggle {
    display: block !important;
    margin: 12px 15px 12px 0;
    padding: 9px 10px;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 4px;
    z-index: 10000;
    position: relative;
  }

  .navbar-toggle .icon-bar {
    background-color: #fff;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
  }

  /* Cuando el header tiene fondo oscuro animado */
  .animated .navbar-toggle {
    border-color: rgba(0,0,0,0.3);
  }
  .animated .navbar-toggle .icon-bar {
    background-color: #333;
  }

  /* Logo - tamano controlado */
  .navbar-brand {
    padding: 8px 0 8px 15px !important;
    max-width: 200px;
  }

  .navbar-brand > img {
    max-height: 50px !important;
    width: auto !important;
  }

  .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* ---- MENU DESPLEGABLE MOVIL ---- */
  .navbar-collapse {
    position: fixed !important;
    top: 0 !important;
    right: -280px;
    width: 280px;
    height: 100vh !important;
    background-color: #1a1a2e !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 70px 0 30px !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: -3px 0 15px rgba(0,0,0,0.3);
    transition: right 0.35s ease;
    max-height: none !important;
  }

  .navbar-collapse.in {
    right: 0;
  }

  /* Overlay oscuro cuando menu esta abierto */
  .navbar-collapse.in::before {
    content: '';
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: -1;
  }

  /* Items del menu */
  .nav4 .navbar-nav,
  .navbar-nav.dropdown2 {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100%;
  }

  .navbar-nav.dropdown2 > li {
    display: block !important;
    float: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    width: 100%;
  }

  .navbar-nav.dropdown2 > li > a {
    color: #e0e0e0 !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 400;
    display: block;
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .navbar-nav.dropdown2 > li > a:hover,
  .navbar-nav.dropdown2 > li > a:focus,
  .navbar-nav.dropdown2 > li.current > a {
    background-color: rgba(255,255,255,0.1) !important;
    color: #fff !important;
  }

  /* Flechas para items con sub-menu */
  .navbar-nav.dropdown2 > li > a:after {
    display: none !important;
  }

  .navbar-nav.dropdown2 > li > a:before {
    display: none !important;
  }

  /* ---- SUB-MENUS MOVIL ---- */
  .navbar-nav.dropdown2 > li > .sub-menu,
  .navbar-nav > li ul {
    position: static !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(0,0,0,0.2) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: auto !important;
    transform: none !important;
    transition: none !important;
    float: none !important;
  }

  .navbar-nav.dropdown2 > li > .sub-menu.open {
    display: block !important;
  }

  .navbar-nav.dropdown2 > li > .sub-menu > li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .navbar-nav.dropdown2 > li > .sub-menu > li:last-child {
    border-bottom: none;
  }

  .navbar-nav.dropdown2 > li > .sub-menu > li > a {
    color: #b0b0b0 !important;
    padding: 12px 20px 12px 35px !important;
    font-size: 13px !important;
    display: block;
    line-height: 1.4;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .navbar-nav.dropdown2 > li > .sub-menu > li > a:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }

  /* Indicador de submenu (flecha) */
  .navbar-nav.dropdown2 > li.has-submenu > a {
    position: relative;
    padding-right: 45px !important;
  }

  .navbar-nav.dropdown2 > li.has-submenu > a .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
  }

  .navbar-nav.dropdown2 > li.has-submenu > a .submenu-toggle::after {
    content: '+';
    color: #aaa;
    font-size: 18px;
    font-weight: 300;
  }

  .navbar-nav.dropdown2 > li.has-submenu.submenu-open > a .submenu-toggle::after {
    content: '-';
  }

  /* ---- SECCIONES GENERALES ---- */
  section {
    padding: 40px 0 !important;
  }

  section.killPadding,
  section.killPaddingTop {
    padding: 20px 0 !important;
  }

  /* Parallax en movil - desactivar efecto */
  .parallax {
    background-attachment: scroll !important;
    background-size: cover;
  }

  /* Columnas que se apilan */
  .col-md-4, .col-md-6, .col-md-3, .col-md-8 {
    margin-bottom: 20px;
  }

  /* Popup modal responsive */
  .modal-dialog.modal-lg {
    width: 95%;
    margin: 15px auto;
  }

  .modal-body img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Navegacion lateral - ocultar en movil */
  #cd-vertical-nav {
    display: none !important;
  }

  /* Footer responsive */
  #footer_canvas .col-md-3,
  #footer_canvas .col-md-4 {
    text-align: center;
    margin-bottom: 30px;
  }

  /* Slider texto - mas pequeno */
  .slide-item h1,
  .slide-item h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .slide-item p {
    font-size: 14px !important;
  }

  .slide-item .btn {
    font-size: 12px !important;
    padding: 8px 20px !important;
  }

  /* Titulos de seccion */
  .section-head h2,
  .subtitle h2 {
    font-size: 24px !important;
    line-height: 1.3;
  }

  .section-head h3 {
    font-size: 18px !important;
  }
}

/* ---- MOBILE PEQUENO: hasta 480px ---- */
@media (max-width: 480px) {

  .navbar-brand {
    max-width: 160px;
  }

  .navbar-brand > img {
    max-height: 40px !important;
  }

  .navbar-collapse {
    width: 260px;
    right: -260px;
  }

  .slide-item h1,
  .slide-item h2 {
    font-size: 18px !important;
  }

  .section-head h2,
  .subtitle h2 {
    font-size: 20px !important;
  }

  .modal-dialog.modal-lg {
    width: 98%;
    margin: 10px auto;
  }

  /* Tabla responsive */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   FIX SCROLL, MENÚ Y STICKY-HEADER (TABLET/MÓVIL/LANDSCAPE)
   Corrige:
   1. body { margin: 25px } (body.bordered) en iOS/Android impide
      llegar al tope de página al hacer scroll.
      main.js remueve .bordered del body, pero antes de ese instante
      el margen puede generar un flash. Este fix lo anula desde el inicio.
   2. Sticky-header jump: cuando .sticky-header.on activa position:fixed,
      #header_canvas colapsa → el contenido salta hacia arriba.
      min-height previene el salto en portrait Y landscape.
      JS en piejs.php ajusta la altura real (incluye load + resize).
   3. Conflicto Bootstrap 3 legacy (position:fixed; right:-280px)
      vs Bootstrap 5 (display:none / .show) para el navbar-collapse.
============================================================ */

/* Fix global: body sin margen (main.js quita .bordered pero el margen puede generar flash) */
body {
  margin: 0 !important;
}

/* Fix header: sin padding extra de Bootstrap 5 navbar */
#head.navbar {
  padding: 0 !important;
}

/* Fix header siempre de borde a borde al volverse fixed */
.sticky-header.on,
#head.sticky-header.on,
.navbar-fixed-top,
.fixed-top {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

/* Fix espacio reservado para que el contenido no salte cuando el header pasa a fixed */
#header_canvas {
  min-height: 70px;
}

/* Header: 20% oscuro sobre el slider */
#head.semi-tp-dark:not(.animated) {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* Fix 3: solo en móvil/tablet portrait — neutralizar Bootstrap 3 navbar-collapse */
/* Fix 4: corregir altura del header y recorte del logo/hamburguesa en tablet/móvil */
@media (max-width: 991px) {

  /* Neutralizar Bootstrap 3 navbar-collapse legacy */
  nav.navbar-collapse {
    position: static !important;
    top: auto !important;
    right: auto !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    overflow: visible !important;
  }

  /* Header más alto para que logo y hamburguesa no queden recortados. */
  .navbar-default {
    min-height: 70px !important;
  }

  /* CRÍTICO: navbar-header tiene position:absolute + height:100% en main.css.
     Si el padre solo tiene min-height (sin height explícita), height:100% = 0
     en algunos navegadores → flex container vacío → align-items:center pone
     todo en y=0 (tope del header) → logo y hamburguesa aparecen recortados.
     La altura explícita aquí fuerza el centrado correcto de los ítems. */
  .navbar-header {
    height: 70px !important;
  }

  /* Brand: sin padding vertical para no recortar el logo */
  .navbar-brand {
    padding: 0 0 0 15px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar-brand > img {
    max-height: 54px !important;
    width: auto !important;
  }
}

/* ============================================================
   FIX IMÁGENES FALTANTES DEL TEMA
   Reemplaza img/loading.gif y img/icons/cross_white.png
   con versiones CSS/SVG inline para evitar 404s
============================================================ */

/* lightbox.css: .lb-cancel usaba loading.gif → spinner CSS */
.lb-cancel {
  background: none !important;
  border: 3px solid rgba(255,255,255,0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: lb-spin 0.7s linear infinite !important;
}
@keyframes lb-spin {
  to { transform: rotate(360deg); }
}

/* main.css: varios selectores usaban cross_white.png → SVG inline */
.close-slide-nav,
.lb-data .lb-close,
.portfolio-close,
.expander-close,
.close-product {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
}