header,
.navbar,
.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
}

.map-shell,
#map,
.map-canvas {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.leaflet-control-container,
.leaflet-top,
.leaflet-bottom {
  z-index: 500;
}

.monto-card{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  transition: box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}

.monto-card:hover{
  box-shadow: 0 14px 35px rgba(15,23,42,.12);
  transform: translateY(-2px);
}

/* Header profesional (sin bloque vino agresivo) */
.monto-head{
  background: #fff;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  border-top: 4px solid #976037; /* línea vino sutil */
  color: #111;
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
}

.monto-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 1rem;
  letter-spacing: .2px;
}

.monto-title i{
  color:#8a1426;
  font-size: 1.05rem;
}

/* Items */
.monto-mini{
  padding: 4px 2px;
}

.monto-label{
  font-size: .82rem;
  color: rgba(15,23,42,.62);
  margin-bottom: 4px;
}

/* ✅ Valores en negritas fuertes */
.monto-val{
  font-weight: 900;
  font-size: 1.08rem;
  color:#0f172a;
  letter-spacing: .2px;
}

/* Porcentaje en “pill” */
.avance-pill{
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .82rem;
  color:#0f172a;
}

/* Slider/barra (no lo quita, lo mejora) */
.monto-bar{
  height: 8px;                 /* más delgado */
  width: 75%;                  /* 🔥 ya no ocupa toda la card */
  margin: 10px auto 0 auto;    /* centrado */
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}


.monto-bar-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a1426, #c78b4a);
  transition: width .6s ease;
}

/* ===== Tabla bonita para Monto aprobado ===== */
.monto-table-wrap{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.monto-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}

.monto-table thead th{
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.75);
  font-weight: 900;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  white-space: nowrap;
}

.monto-table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  font-weight: 800;          /* ✅ valores en negritas */
  color: #0f172a;
}

.monto-table tbody tr:last-child td{
  border-bottom: none;
}

.monto-table tbody tr:hover td{
  background: rgba(59,130,246,.05);
}

/* Responsive: tabla scroll en móvil sin romper */
@media (max-width: 991.98px){
  .monto-table-wrap{
    overflow-x: auto;
  }
  .monto-table{
    min-width: 920px;
  }
}

/* ===== Barra de progreso tipo “real” ===== */
.prog-row{
  margin-top: 14px;
}

.prog-label{
  font-size: .82rem;
  color: rgba(15,23,42,.62);
  margin-bottom: 8px;
  font-weight: 700;
}

.prog-track{
  width: 70%;              /* 👈 más corta */
  max-width: 520px;        /* límite elegante */
  height: 16px;            /* 👈 más gruesa */
  margin: 0 auto;          /* centrada */
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}

.prog-fill{
  height: 100%;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right: 10px;
  transition: width .6s ease;
}

.prog-pct{
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
}

.prog-track.p-red .prog-fill{
  background: #dc2626;
}

.prog-track.p-orange .prog-fill{
  background: #f97316;
}

.prog-track.p-yellow .prog-fill{
  background: #facc15;
}

.prog-track.p-green .prog-fill{
  background: #22c55e;
}

.regresar-link{
  font-weight: 900;
  font-size: .95rem;
  color: #8a1426;          /* 🔥 vino institucional */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease, transform .2s ease;
}

.regresar-link i{
  color: #8a1426;
}

.regresar-link:hover{
  color: #976037;          /* dorado institucional al hover */
  transform: translateX(-4px);
  text-decoration: none;
}

.regresar-link:hover i{
  color: #976037;
}

/* Evita el “brinco” por scrollbar cuando abre el modal */
html { scrollbar-gutter: stable; }

/* Reduce flicker del diálogo */
.modal .modal-dialog {
  transform: translateZ(0);
  will-change: transform;
}

/* ===== Quejas (card) ===== */
.queja-card { border-radius: 16px; overflow: hidden; }
.queja-head { padding: 14px 16px; background: #fff; border-bottom: 1px solid #eee; }
.queja-ico{
  width: 38px; height: 38px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(125,19,19,.08);
  color: #7D1313;
  font-size: 18px;
}

/* .btn-maroon, .app-modal-content y .btn-app-* viven en home.css: ambas
   páginas lo cargan y el modal de queja (estilo estandarizado de intranet)
   ahora es compartido. */

/* ===== RichText (ckeditor) dentro de cards ===== */
.rich-block p { margin-bottom: .6rem; }
.rich-block ul, .rich-block ol { margin: .35rem 0 .75rem 1.2rem; }
.rich-block li { margin: .2rem 0; }
.rich-block a { color: #891b35; text-decoration: underline; }
.rich-block h1, .rich-block h2, .rich-block h3, .rich-block h4 {
  color: #111827;
  margin: .75rem 0 .35rem;
}

.info-icon{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all .2s ease;
  flex: 0 0 18px;
}

.info-icon:hover{
  background: #d1d5db;
  color: #111827;
}
/* =====================================================
   DETALLE DE OBRA (od-*)
   ===================================================== */
.od{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: #141418;
}
.od-card{
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 20px;
}
.od-seccion{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.35rem;
}
.od-h2{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}
.od-texto{
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: #4b5260;
}
.od-subtitulo{
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4b5260;
}

/* Ruta */
.od-barra{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.od-ruta{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #4b5260;
}
.od-ruta a{
  color: #891b35;
  font-weight: 600;
  text-decoration: none;
}

/* Botones */
.od-btn-pri,
.od-btn-sec{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: 0 .9rem;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.od-btn-pri{
  min-height: 44px;
  background: #891b35;
  border: 1px solid #891b35;
  color: #fff;
}
.od-btn-pri:hover,
.od-btn-pri:focus-visible{
  background: #6d1529;
  color: #fff;
}
.od-btn-sec{
  background: #fff;
  border: 1px solid #d5d6dc;
  color: #141418;
}
.od-btn-sec:hover,
.od-btn-sec:focus-visible{
  border-color: #891b35;
  color: #891b35;
}

/* Encabezado */
.od-hero{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.25rem;
}
.od-galeria{
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.od-foto-principal{
  position: relative;
  display: block;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #e3e5ea;
}
.od-foto-principal img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.od-foto-contador{
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(20,20,24,.75);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
.od-miniaturas{
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .2rem;
}
.od-miniatura{
  flex: none;
  width: 76px;
  height: 60px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  background: #e3e5ea;
}
.od-miniatura img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.od-miniatura.is-activa{
  border-color: #891b35;
}
.od-miniatura:focus-visible{
  outline: 2px solid #891b35;
  outline-offset: 2px;
}
/* Foto que no cargó */
.od-foto-rota{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7180;
  font-size: .85rem;
}
.od-foto-rota img{ display: none; }
.od-foto-vacia{
  height: 260px;
  border-radius: 16px;
  background: #f1f1f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #6b7180;
  font-size: .9rem;
}
.od-foto-vacia .bi{ font-size: 2rem; }

.od-info{
  flex: 999 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
}
.od-titulo{
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.od-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.od-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 8px;
  background: #f1f1f4;
  font-size: .82rem;
  font-weight: 600;
  color: #2b2f38;
}
.od-chip-tenue{ color: #5b6170; }
.od-resumen{
  align-self: stretch;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #fbf6f7;
  border: 1px solid #f0dde2;
}
.od-resumen-titulo{
  display: block;
  margin-bottom: .3rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6d1529;
}
.od-resumen p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #2b2f38;
}
.od-acciones{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Avances (anillos) */
.od-avances{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.od-avance{
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem;
}
.od-anillo{
  --pct: 0;
  --color: #9ca3af;
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--pct) * 1%), #ececf0 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.od-anillo > span{
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
}
.od-anillo > .od-sin-dato{
  font-size: .85rem;
  color: #6b7180;
}

/* Línea del tiempo */
.od-plazo{
  --pct: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.od-plazo-barra{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #ececf0;
}
.od-plazo-relleno{
  width: calc(var(--pct) * 1%);
  height: 100%;
  border-radius: 999px;
  background: #891b35;
}
.od-plazo-hoy{
  position: absolute;
  top: -6px;
  left: calc(var(--pct) * 1%);
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #891b35;
}
.od-plazo-etiquetas{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .82rem;
  color: #4b5260;
}
.od-plazo-etiquetas strong{
  display: block;
  color: #141418;
}
.od-plazo-centro{ text-align: center; }
.od-plazo-centro strong{ color: #891b35; }

.od-etapas{
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-top: .9rem;
  border-top: 1px solid #eeeef1;
}
.od-etapa{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 3.2rem;
  gap: .9rem;
  align-items: center;
}
.od-etapa-nombre{
  font-weight: 700;
}
.od-etapa-nombre small{
  display: block;
  font-weight: 500;
  color: #5b6170;
}
.od-etapa-pct{
  text-align: right;
  font-weight: 800;
}

/* Montos */
.od-montos{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.od-monto{
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: #f7f7f9;
}
.od-monto span{
  font-size: .82rem;
  color: #4b5260;
}
.od-monto strong{
  font-size: 1.35rem;
  font-weight: 800;
}
.od-aportaciones{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: 0;
  font-size: .9rem;
  color: #4b5260;
}
.od-aportaciones strong{ color: #141418; }

/* Datos + ubicación */
.od-fila{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.od-datos{
  flex: 1 1 340px;
  min-width: 0;
}
.od-datos dl{
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.1rem;
}
.od-datos dt{
  font-size: .82rem;
  font-weight: 500;
  color: #4b5260;
}
.od-datos dd{
  margin: .15rem 0 0;
  font-weight: 700;
}
.od-conexiones{
  font-size: .9rem;
  color: #2b2f38;
}
.od-ubicacion{
  flex: 2 1 540px;
  min-width: 0;
}
.od-ubicacion-cuerpo{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.od-lugares{
  flex: 1 1 220px;
  min-width: 0;
}
.od-lugares ol{
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
  color: #2b2f38;
}
.od-ver-mas{
  margin-top: .5rem;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #891b35;
  font-size: .88rem;
  font-weight: 700;
}
.od-mapa{
  flex: 2 1 300px;
  min-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: #e3e5ea;
}
.od-nota{
  margin: 0;
  font-size: .8rem;
  color: #5b6170;
}

/* Quejas */
.od-queja{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.35rem;
}

/* Móvil */
@media (max-width: 767.98px){
  .od-foto-principal{ height: 230px; }
  .od-avances{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .od-avance{
    flex-direction: column;
    text-align: center;
    gap: .6rem;
    padding: 1rem .75rem;
  }
  .od-avance .od-texto{ display: none; }
  .od-anillo{ width: 92px; height: 92px; }
  .od-anillo > span{ width: 70px; height: 70px; font-size: 1.2rem; }
  .od-montos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-monto strong{ font-size: 1.1rem; }
  .od-plazo-etiquetas{ font-size: .75rem; }
  .od-etapa{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 2.8rem; gap: .6rem; }
}
.od-foto-aviso{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7180;
  font-size: .9rem;
}
.od-titulo--largo{
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
}
.od-mapa-vacio{
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: #6b7180;
  font-size: .9rem;
  text-align: center;
  padding: 1rem;
}
.od-mapa-vacio .bi{ font-size: 1.6rem; }
@media (max-width: 767.98px){
  .od-monto strong{ font-size: 1rem; white-space: nowrap; }
}