:root {
  --ink: #3B0A20;
  --ink-2: #5E2238;
  --muted: #6B5560;
  --bg: #F2EEF0;
  --surface: #FFFFFF;
  --line: #E2D8DD;
  --vino: #691B3C;
  --vino-2: #9D2449;
  --vino-soft: #F4E4EA;
  --vino-zebra-notable: #F7EBF0;
  --vino-zebra-fuerte: #F0D9E3;
  --vino-zebra-hover: #E3B8CB;
  --oro: #A87C36;
  --oro-soft: #F4ECDB;
  --verde: #1F7A52;
  --verde-soft: #E2F1EA;
  --pd-gris: #55585C;
  --pd-verde: #1E5C46;
  --ambar: #C77D00;
  --ambar-soft: #FBEFD8;
  --rojo: #C0334B;
  --rojo-soft: #FAE4E8;
  --azul: #2C5C8A;
  --azul-soft: #E5EEF6;
  --gest-semarnat: #8BC34A;
  --gest-conagua: #549CBD;
  --gest-cfe: #1B5E20;
  --gest-pemex: #A6CE39;
  --gest-gnn: #fcc23a;
  --gest-ferreas: #D4AF37;
  --gest-ductos: #17A2B8;
  --gest-otros: #9AA0A6;
  --gris: #9E9E9E;
  --shadow: 0 1px 2px rgba(59, 10, 32, .06), 0 6px 20px rgba(59, 10, 32, .08);
}

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

html {
  -webkit-text-size-adjust: 100%
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased
}

header {
  background: var(--vino);
  color: #fff;
}

.header-tabs-fijo {
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between
}

.header-right-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
  margin-left: auto;
}

/* Agrupa "Compartir" + "Inicio" (y cualquier otro botón que se sume) para
   que se muevan juntos como bloque, separados del "Corte al" -- así en
   móvil quedan uno junto al otro en su propia fila, sin depender de que
   el wrap general de .header-right-group los deje pegados por casualidad. */
.header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  order: 1;
}

.header-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1.5px solid var(--oro);
  border-radius: 8px;
  padding: 7px 14px;
  background-color: var(--vino);
  cursor: pointer;
  transition: all .15s;
}

.header-right:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--vino);
}

.header-right-logo img {
  width: auto;
  height: 35px;
  transition: height 0.3s;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand h1 {
  font-family: 'Archivo';
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .3px;
  line-height: 1.05;
}

.brand p {
  font-size: 11px;
  color: #E0BFCC;
  font-weight: 500;
  letter-spacing: .4px;
  text-transform: uppercase;
}

nav.tabs {
  background: var(--ink);
}

.tabs-in {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none
}

.tab {
  flex: none;
  background: none;
  border: none;
  color: #D2A9B9;
  font-weight: 600;
  font-size: 13.5px;
  padding: 13px 17px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: .15s
}

.tab-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.tab:hover,
.tab:active {
  color: #fff;
}

.tab.active {
  border-bottom-color: var(--oro)
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px 60px
}

.view {
  display: none;
  animation: fade .25s ease
}

.view.active {
  display: block
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}


.view-head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px
}

.view-head h2 {
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.2px
}

.view-head p {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 2px;
  max-width: 600px
}

.periodo {
  font-size: 13px;
  color: var(--vino);
  text-align: right;
  line-height: 1.3;
  flex: none;
  order: 2;
}

.periodo b {
  color: #000000;
  font-weight: 600;
  font-size: 13px;
  display: block
}

@media (max-width: 700px) {
  .header-right-logo img {
    height: 16px;
  }

  .header-in {
    padding: 11px 14px;
    gap: 10px;
  }

  .brand h1 {
    font-size: 15px;
  }

  .brand p {
    font-size: 10px;
  }

  .view-head h2 {
    font-size: 19px;
  }

  .view-head p {
    font-size: 12.5px;
  }

  /* En vez de sacar .header-right-group de flujo (position:absolute,
     esquina superior) y apretarlo contra el h2 con padding-right: se
     apila en columna -- primero el título completo, y abajo, en su
     propia fila, "Corte al" + los botones. Menos denso, nada se pega. */
  .view-head {
    flex-direction: column;
    align-items: stretch;
  }

  .header-right-group {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .header-buttons {
    gap: 6px;
  }

  .header-right {
    padding: 5px 10px;
    font-size: 10.5px;
    gap: 5px;
  }

  .periodo {
    font-size: 10.5px;
  }

  .periodo b {
    font-size: 10.5px;
  }
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px
}

#kpisTram {
  grid-template-columns: repeat(4, 1fr);
}


.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden
}

.kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--vino-2)
}

.kpi.k-v::before {
  background: var(--verde)
}

.kpi.k-b::before {
  background: var(--azul)
}

.kpi.k-a::before {
  background: var(--ambar)
}

.kpi .lbl {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px
}

.kpi .lblMunicip {
  font-size: 13px;
  line-height: 1.15;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.kpi .val {
  font-family: 'Archivo';
  font-weight: 800;
  font-size: 28px;
  margin-top: 8px;
  letter-spacing: -.5px
}

.kpi .val small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600
}

.kpi .val small.lblMunicip {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
}

.kpi .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px
}

.kpis-permisos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 18px
}

.kpi-permiso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.kpi-permiso:hover {
  transform: translateY(-2px);
  border-color: var(--vino-2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

.kpi-permiso img {
  height: 32px;
  max-width: 90px;
  object-fit: contain;
}

.modal-card-permisos {
  max-width: 1200px;
  --modal-w: 1200px;
}

.permisos-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.permisos-titulo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.permisos-print-btn {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.permisos-print-btn:hover {
  background: rgba(255, 255, 255, .28);
}

.permisos-row {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.permisos-map-group {
  flex: 1 1 auto;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.permisos-logo-grande {
  height: 44px;
  max-width: 70%;
  object-fit: contain;
  flex: 0 0 auto;
  margin: 0;
}

#permisosLeyenda {
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 0 10px;
}

.permisos-map {
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eee;
}

.permisos-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  display: block;
}

.permisos-row .permisos-tbl-wrap {
  flex: 0 0 auto;
  width: 282px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.permisos-row .permisos-tbl-wrap .tbl-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
}

.permisos-row .permisos-tbl-wrap .tbl-scroll table {
  height: 100%;
}

.permisos-tbl-wrap {
  width: 100%;
  margin-bottom: 0;
}

.tbl-permisos th:last-child,
.tbl-permisos td:last-child {
  text-align: center;
}

.tbl-permisos th:nth-child(n+3),
.tbl-permisos td:nth-child(n+3) {
  text-align: center;
}

.tbl-permisos {
  table-layout: fixed;
}

.tbl-permisos--compacta {
  min-width: 0;
}

.tbl-permisos th:first-child,
.tbl-permisos td:first-child {
  width: 34px;
  padding-left: 8px;
  padding-right: 8px;
}

.tbl-permisos th:nth-child(2),
.tbl-permisos td:nth-child(2) {
  width: 18%;
}

.tbl-permisos--compacta th:first-child,
.tbl-permisos--compacta td:first-child {
  width: 36px;
}

.tbl-permisos--compacta th:nth-child(2),
.tbl-permisos--compacta td:nth-child(2) {
  width: 100px;
}

.tbl-permisos--compacta th:last-child,
.tbl-permisos--compacta td:last-child {
  width: 140px;
}

.tbl-permisos--sin-canal .col-canal-cruzamiento {
  display: none;
}

.tbl-permisos,
.tbl-permisos th {
  font-size: 10px;
}

.tbl-permisos th {
  white-space: normal;
}

.permiso-estatus-cell {
  padding-top: 10px;
  padding-bottom: 10px;
}

.tbl-permisos .puente-name {
  font-weight: 800;
  font-style: normal;
}

.tbl-permisos .puente-mun {
  font-style: italic;
}

.permiso-estatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: normal;
  line-height: 1.25;
  padding: 5px 10px;
  border-radius: 14px;
}

.permiso-estatus-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.permiso-estatus-gris {
  font-weight: 700;
  text-transform: none;
}

.permiso-fecha {
  display: block;
  font-weight: 700;
  font-size: 11.5px;
  margin-top: 4px;
  color: var(--ink);
}

@media (max-width: 860px) {
  .permisos-row {
    flex-direction: column;
    height: auto;
  }

  /* min-width:0 -- sin esto, "permisos-map-group" seguía forzando su
     mínimo de escritorio (300px) en pantallas angostas y desbordaba el
     modal horizontalmente. */
  .permisos-map-group,
  .permisos-row .permisos-tbl-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .permisos-map {
    height: 320px;
  }

  .tbl-permisos--compacta {
    width: 100%;
  }

  .tbl-permisos--compacta th:first-child,
  .tbl-permisos--compacta td:first-child {
    width: 14%;
  }

  .tbl-permisos--compacta th:nth-child(2),
  .tbl-permisos--compacta td:nth-child(2) {
    width: 42%;
  }

  .tbl-permisos--compacta th:last-child,
  .tbl-permisos--compacta td:last-child {
    width: 44%;
  }

  .kpis-permisos {
    grid-template-columns: 1fr;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: 30fr 70fr;
  gap: 16px;
  margin-bottom: 20px
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.mapa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.mapa-panel-head h5 {
  margin: 0;
}

.mapa-chips {
  /* El <select> "Ir al puente" que vivía aquí se reemplazó por la tabla
     clicable de nombre+número que dibuja el propio mapa en pantalla
     completa (ver crearTablaPuentesFullscreen en visor_puentes_*.html):
     hacían lo mismo y quedaban duplicados junto al botón de salir de
     pantalla completa. El div se deja vacío (nunca visible) solo como
     anda para .mapa-panel-acciones, que sigue necesitándolo para ubicar
     el botón de pantalla completa. */
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mapa-chips label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vino);
}

.mapa-select {
  border: 1.5px solid var(--vino-soft);
  background: var(--vino-soft);
  color: var(--vino);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  font-family: inherit;
}

/* Fila superior del modal Seguimiento de acciones
   (#modalPrioridad/#modalPrioridadGeneral, 2026-09-30, rediseño pedido
   explícito del usuario): "Enviar Correo" y el filtro de Responsable
   PEGADOS entre sí (2026-09-30, 2da ronda, pedido explícito del usuario:
   antes estaban separados con justify-content:space-between, uno en cada
   extremo) -- el filtro "Responsabilidad de trámite" se QUITÓ (la columna
   sigue en la tabla, solo se quitó su filtro). */
.prio-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

/* Botón "Enviar Correo" (2026-09-30) -- antes vivía flotando en el header
   del modal (.modal-export-mail, junto a Imprimir/PowerPoint/Excel); se
   movió aquí, como botón de texto normal, a pedido explícito del usuario. */
.prio-enviar-correo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--vino);
  background: #fff;
  color: var(--vino);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.prio-enviar-correo-btn:hover {
  background: var(--vino-soft);
}

.prio-filtro-responsable {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prio-filtro-responsable label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vino);
  white-space: nowrap;
}

.mapa-select:hover,
.mapa-select:focus {
  border-color: var(--vino-2);
  outline: none;
}

.mapa-panel-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mapa-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--vino-soft);
  background: var(--vino-soft);
  color: var(--vino);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.mapa-fullscreen-btn:hover,
.mapa-fullscreen-btn:focus {
  border-color: var(--vino-2);
  outline: none;
}

.panel.panel-fullscreen,
.panel:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: var(--surface);
}

.panel.panel-fullscreen .mapa-panel-head,
.panel:fullscreen .mapa-panel-head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.panel.panel-fullscreen iframe,
.panel:fullscreen iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: none;
}

.panel h3 {
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px
}

.panel .ph-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px
}

.chart-box {
  position: relative;
  height: 230px;
}

.chart-box-inv {
  height: 350px;
  width: auto;
}

.tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: visible;
  position: relative;
  margin-bottom: 18px;
}

.tbl-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tbl-flechas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  pointer-events: none;
  z-index: 6;
}

.tbl-flecha {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(105, 27, 60, 0.25);
  background: rgba(255, 255, 255, 0.95);
  color: var(--vino);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(105, 27, 60, 0.18);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tbl-flecha:active {
  transform: translateY(-50%) scale(0.92);
}

.tbl-flecha-prev {
  left: 6px;
}

.tbl-flecha-next {
  right: 6px;
}

.tbl-flecha.oculta {
  display: none;
}

@media (min-width: 861px) {
  .tbl-flechas {
    display: none;
  }
}

@media (max-width: 860px) {
  .tbl-wrap {
    margin-top: 50px;
  }

}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 700px
}

th {
  text-align: left;
  font-weight: 600;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 11px 13px;
  background: var(--vino);
  white-space: nowrap
}

td {
  padding: 11px 13px;
  border-bottom: 1px solid #EFE9EC;
  vertical-align: middle
}

.tbl-cabecera-fija-clon {
  z-index: 500;
  pointer-events: none;
  visibility: hidden;
}

.tbl-cabecera-fija-clon table {
  border-collapse: collapse;
  margin: 0;
}

tr:last-child td {
  border-bottom: none
}

tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td {
  background: var(--vino-zebra-notable)
}

tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td {
  background: var(--vino-zebra-fuerte)
}

tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover td,
tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover td {
  background: var(--vino-zebra-hover)
}

.row-total td {
  background: var(--vino-soft);
  color: var(--vino);
  font-weight: 700;
  border-bottom: 1px solid #832042;
}

.row-total .puente-name {
  color: var(--vino);
}

.row-total:hover td {
  background: var(--vino-soft);
}

.row-Subtotal td {
  background: rgb(255, 249, 251);
  color: #8B3A53;
  font-weight: 700;
  border-bottom: 1px solid #916a77;
}

.row-Subtotal .puente-name {
  color: #8B3A53;
}

.row-Subtotal:hover td {
  background: rgb(255, 249, 251);
}

.seleccion {
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}

.colorSel {
  border-left: 4px solid var(--verde);
}

.nocolorSel {
  border-left: 4px solid var(--rojo);
}

.seleccion:hover {
  background: var(--vino-soft);
}

.seleccion:active {
  background: var(--oro-soft);
}

.puente-name {
  font-weight: 600;
  color: var(--ink);
}

.puente-mun {
  font-size: 11.5px;
  color: var(--muted)
}

.descargar-kmz {
  font-size: 10.5px;
  color: var(--muted)
}

.fecha-obra {
  font-size: 10px;
  line-height: 1.5;
  white-space: normal !important;
}

#tblObraFin thead tr:first-child th:nth-child(3) {
  white-space: normal;
}

.num {
  font-variant-numeric: tabular-nums
}

.rowno {
  font-family: 'Archivo';
  font-weight: 700;
  color: var(--vino-2);
  width: 26px
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap
}

.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor
}

.c-v {
  background: var(--verde-soft);
  color: #155F3F
}

.c-r {
  background: var(--rojo-soft);
  color: #9A2738
}

.c-b {
  background: var(--azul-soft);
  color: #1F4569
}

.c-o {
  background: var(--oro-soft);
  color: #7A5A1E
}

.c-g {
  background: #9E9E9E;
  color: #ffffff;
}

.c-prog {
  background: #EFE9EC;
  color: #6B5560
}

.prog {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 120px
}

.prog .bar {
  flex: 1;
  height: 8px;
  background: #EEE6EA;
  border-radius: 6px;
  overflow: hidden
}

.prog .fill {
  height: 100%;
  border-radius: 6px;
  background: var(--vino-2)
}

.prog.pe .fill {
  background: var(--oro)
}

.prog .pct {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 38px;
  text-align: right
}

/* La tabla combinada (tblResumenCombinado) suma varias columnas de monto
   además de las de siempre, así que la barra de Avance PE se achica aquí
   para que la tabla completa quepa sin activar el scroll horizontal. */
#tblResumenCombinado .prog {
  min-width: 70px;
  gap: 6px
}

#tblResumenCombinado .prog .pct {
  width: 30px;
  font-size: 11px
}

/* Columna "Obras Inducidas" (la última): angosta un poco más, dejando que
   el texto haga wrap en los espacios (nunca a mitad de palabra) en vez de
   estirar la tabla. */
#tblResumenCombinado th:last-child,
#tblResumenCombinado td:last-child {
  max-width: 150px;
  white-space: normal
}

.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: .18s;
  display: flex;
  flex-direction: column
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(59, 10, 32, .16)
}

.card .thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #EDE6EA;
  overflow: hidden
}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.card .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(59, 10, 32, .86);
  color: #fff;
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 11.5px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  white-space: nowrap;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis
}

.card .estb {
  position: absolute;
  top: 10px;
  right: 10px
}

.card .body-top {
  background: #691B3C;
  width: 100%;
  padding: 12px 14px;
  color: #fff;
  height: 130px;
  display: flex;
  flex-direction: column;
}

.card .body-top h4 {
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  color: #fff;
}

.card .body-top .mun {
  font-size: 14px;
  color: #E0BFCC;
  margin-top: 2px;
}

.card .body-top .emp {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3B0A21;
  width: calc(100% + 28px);
  height: 65px;
  margin: auto -14px -12px -14px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  color: #dcc9a5;
  text-align: start;
}

/* Aviso flotante para el botón "Compartir" cuando cae al fallback de
   copiar el enlace (sin Web Share API, p. ej. en desktop) -- confirma
   que sí pasó algo, ya que copiar al portapapeles no tiene feedback
   visual propio. */
.toast-sicopue {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  z-index: 200;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.toast-sicopue-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(40, 8, 22, .78);
  z-index: 80;
  display: none;
  padding: 20px;
  overflow-y: auto
}

.modal.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: fade .2s
}

.modal-card {
  max-width: 960px;
  --modal-w: 960px;
  width: 100%;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}

.modal-card-gest {
  max-width: 1200px;
  --modal-w: 1200px;
}

.modal-top {
  background: var(--vino);
  color: #fff;
  position: relative;
  flex: 0 0 auto;
  padding: 20px 76px 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.modal-top h3 {
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15
}

.modal-top .mt-mun {
  font-size: 12.5px;
  color: #E0BFCC;
  margin-top: 3px
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: background .15s;
}

.modal-close:hover {
  background: var(--vino)
}

#modalSeguimiento .modal-top,
#modalFichaResumen .modal-top {
  padding-right: 122px;
}

/* #modalSeguimiento tiene un botón más que #modalFichaResumen (Exportar a
   PowerPoint, junto al de imprimir) -- necesita más aire a la derecha del
   título para que no se le encimen los botones. Misma especificidad que
   la regla de arriba; gana por venir después, y solo pisa a
   #modalSeguimiento (el selector de #modalFichaResumen de la regla de
   arriba queda intacto). */
#modalSeguimiento .modal-top,
#modalPrioridad .modal-top,
#modalPrioridadGeneral .modal-top {
  padding-right: 190px;
}

.modal-print {
  position: absolute;
  top: 16px;
  right: 68px;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: background .15s;
}

.modal-print:hover {
  background: var(--vino)
}

/* Botón "Exportar a PowerPoint" (#segExportPptx), el más a la izquierda de
   los tres -- mientras genera, su texto crece ("Generando PPTX... (Ns)") y
   ese crecimiento empuja el botón hacia la IZQUIERDA (position:absolute
   con "right" fijo) -- por eso va primero desde la izquierda: así no le
   queda ningún botón encimado en el camino cuando crece. */
.modal-export-pptx {
  right: 188px;
}

/* Botón "Exportar a Excel" (#prioExportExcel/#prioGeneralExportExcel),
   junto al de imprimir -- mismo estilo (reusa .modal-print), solo se le
   corre el "right" para que no le quede exactamente encima. Va MÁS CERCA
   del de imprimir que el de PowerPoint (ver comentario arriba) porque su
   texto no crece mientras exporta. */
.modal-export-excel {
  right: 128px;
}

.modal-print:disabled {
  cursor: not-allowed;
  opacity: .85;
  font-size: 13px;
}

.modal-print .modal-print-texto {
  font-size: 13px;
}

.tram-ficha-btn {
  border: none;
  background: var(--vino-soft);
  color: var(--vino);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.tram-ficha-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* El ícono de "Problemática Social" (triángulo + lupa) se leía chico a
   18px -- se agranda solo este botón, sin tocar Ficha/Plano que comparten
   la misma clase base. */
.tram-ficha-btn-problematica {
  width: 50px;
  height: 50px;
}

.tram-ficha-btn-problematica img {
  width: 30px;
  height: 30px;
}

/* Solo en dispositivos que de verdad tienen "hover" (mouse) -- en
   celular, sin este media query, el estado :hover se quedaba "pegado"
   (fondo vino encendido) después de tocar el botón, hasta tocar otra
   cosa en la pantalla. */
@media (hover: hover) {
  .tram-ficha-btn:hover {
    background: var(--vino);
    color: #fff;
  }
}

.tram-ficha-btn:disabled {
  background: #ECEBEC;
  color: #9AA0A6;
  cursor: not-allowed;
  opacity: .7;
}

.tram-ficha-btn:disabled:hover {
  background: #ECEBEC;
  color: #9AA0A6;
}

.resumen-corte {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vino);
}

.resumen-badges {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}

.resumen-badge {
  flex: 1;
  text-align: center;
}

.resumen-badge span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.resumen-badge b {
  display: block;
  padding: 8px 10px;
  border-radius: 20px;
  color: #fff;
  font-size: 15px;
}

.resumen-badge-verde b { background: var(--verde); }
.resumen-badge-vino b { background: var(--vino); }
.resumen-badge-oro b { background: var(--oro); }

.resumen-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

.resumen-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.resumen-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: none;
  margin-top: 2px;
}

.resumen-item p {
  margin: 0;
  white-space: pre-line;
}

.resumen-mapa {
  width: 100%;
  height: 360px;
  border: none;
  border-radius: 12px;
}

.resumen-permisos {
  margin-bottom: 20px;
}

.resumen-permisos h2 {
  background: var(--oro);
  color: #fff;
  margin: 0 0 12px;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: 'Archivo';
  font-size: 16px;
}

.resumen-permisos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.3fr;
  gap: 12px;
}

.resumen-permiso-card, .resumen-permiso-otros {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  font-size: 12.5px;
}

.resumen-permiso-card img {
  height: 28px;
  margin-bottom: 6px;
}

.resumen-permiso-card h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
}

.resumen-permiso-estatus {
  display: inline-block;
  background: var(--vino-soft);
  color: var(--vino);
  border-radius: 10px;
  padding: 3px 10px;
  font-weight: 700;
  margin-bottom: 6px;
}

.resumen-permiso-num, .resumen-permiso-fecha {
  margin: 2px 0 0;
  color: var(--muted);
}

.resumen-permiso-otros h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--vino);
}

.resumen-tramo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 0;
}

.resumen-tramo th {
  background: var(--vino);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  white-space: normal;
}

.resumen-tramo td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .resumen-layout { grid-template-columns: 1fr; }
  .resumen-badges { flex-wrap: wrap; }
  .resumen-permisos-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .resumen-badges {
    flex-direction: column;
    gap: 8px;
  }
}

.resumen-problematica {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Dentro de su propio modal (#modalProblematica) es lo único que hay en
   el body -- sin el separador de arriba, que ahí no tiene nada que
   separar. */
#problematicaBody .resumen-problematica {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.resumen-problematica-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.resumen-problematica-badge img {
  height: 52px;
  width: auto;
  flex: none;
}

.resumen-problematica-badge span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.resumen-problematica-badge h3 {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.resumen-problematica-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.resumen-problematica-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resumen-problematica-lista li {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
  text-align: justify;
}

.resumen-problematica-mapa {
  width: 100%;
  height: 460px;
  border: none;
  border-radius: 12px;
}

.resumen-problematica-caption {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

/* Texto corto arriba del video, en modo "solo video" -- de ancho
   completo (ocupa las dos columnas cuando hay video + imagen). */
.resumen-problematica-video-desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Modo "solo video" de Problemática Social (ver problematicaSocialHTML):
   para puentes que por ahora nada más tienen el video, sin bullets/mapa
   todavía -- se ve centrado en vez de ir a la izquierda como el texto. */
.resumen-problematica-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 640px;
  /* El video (vertical) a lo ancho completo se veía demasiado alto,
     ocupando casi todo el modal -- con max-height + width:auto se achica
     manteniendo su proporción, sin recortarlo ni deformarlo. */
  max-height: 480px;
  margin: 0 auto;
  border-radius: 12px;
  background: #000;
}

/* Modo "solo video" CON imagen (ej. puente 8: video a la izquierda,
   imagen de ubicación a la derecha) -- cada uno centrado dentro de su
   columna, no estirado a lo ancho completo. */
.resumen-problematica-video-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.resumen-problematica-imagen {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .resumen-problematica-layout,
  .resumen-problematica-video-layout { grid-template-columns: 1fr; }
}

.viewer {
  background: #1a0610;
  position: relative
}

.viewer img {
  width: 100%;
  display: block;
  max-height: 540px;
  object-fit: contain;
  background: #1a0610
}

.vnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, .5);
  color: #fff;
  border: none;
  width: 42px;
  height: 60px;
  cursor: pointer;
  font-size: 22px;
  display: grid;
  place-items: center
}

.vnav:hover {
  background: rgba(0, 0, 0, .75)
}

.vprev {
  left: 0;
  border-radius: 0 8px 8px 0
}

.vnext {
  right: 0;
  border-radius: 8px 0 0 8px
}

.vlabel {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(59, 10, 32, .85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px
}

.modal-body {
  padding: 18px 0 24px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.etapa-toggle-bar {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid var(--vino-soft);
  flex-wrap: wrap;
}

.etapa-toggle-btn {
  flex: 1 1 auto;
  min-width: 160px;
  background: var(--vino-soft);
  color: var(--vino);
  border: 1.5px solid var(--vino-soft);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: .15s;
}

.etapa-toggle-btn:hover {
  border-color: var(--vino-2);
}

.etapa-toggle-btn.active {
  background: var(--vino);
  color: #fff;
  border-color: var(--vino);
}

.etapa-pane.hidden {
  display: none;
}

.modal-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.modal-scroll-area .modal-body {
  flex: none;
  overflow: visible;
  min-height: auto;
}

.mbody-pad {
  padding: 0 80px;
}

.mbody-group {
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.mbody-group:first-child {
  padding-top: 0;
}

.mbody-group:last-of-type {
  border-bottom: none;
}

.render-grid-pad {
  padding: 0 80px;
  margin-top: 6px;
}

.gest-modal-body {
  padding: 24px 28px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.blk {
  margin-bottom: 25px
}

.pNuEx {
  display: flex;
  gap: 5px
}

.blk h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.h5-oro img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.h5-oro-texto {
  border-left: 3px solid var(--oro);
  padding-left: 8px;
}

.h5-oro-fila {
  display: flex;
  align-items: center;
  gap: 6px;
}

.h5-oro-fila > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.h5-oro-fila > .h5-oro-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 3px solid var(--oro);
  padding-left: 8px;
}

.h5-oro-fila > .h5-oro-cuerpo > h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin: 0 0 5px;
}

@media (max-width: 640px) {
  .h5-oro-fila {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 6px;
    row-gap: 2px;
    border-left: 3px solid var(--oro);
    padding-left: 8px;
  }

  .h5-oro-fila > img {
    grid-column: 1;
    grid-row: 1;
  }

  .h5-oro-fila > .h5-oro-cuerpo {
    display: contents;
  }

  .h5-oro-fila > .h5-oro-cuerpo > h5 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .h5-oro-fila > .h5-oro-cuerpo > p,
  .h5-oro-fila > .h5-oro-cuerpo > h6 {
    grid-column: 1 / -1;
  }
}

.ficha-row {
  position: relative;
  display: flex;
  align-items: center;
}

.ficha-row>.ficha-icono {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
}

.ficha-row>.ficha-row-body {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 3px solid var(--oro);
  padding-left: 12px;
}

.ficha-icono {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.blk p {
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: justify;
}

.dt-estatus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.dt-estatus-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--ink-2);
}

.dt-estatus-info b {
  color: var(--ink);
  font-weight: 600;
}

.dt {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #FBF7F9;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.dt>div {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px dashed var(--line);
}

.dt>div:nth-child(odd) {
  border-right: 1px dashed var(--line);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  justify-content: flex-end;
  text-align: right;
}

.dt>div:nth-child(even) {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}

.dt>div:nth-last-child(-n+2) {
  border-bottom: none;
}

@media (max-width: 640px) {
  .dt {
    grid-template-columns: 1fr;
  }

  .dt>div:nth-child(odd) {
    border-right: none;
    border-bottom: none;
    padding-bottom: 2px;
    justify-content: flex-start;
    text-align: left;
  }

  .dt>div:nth-last-child(-n+2) {
    border-bottom: 1px dashed var(--line);
  }

  .dt>div:last-child {
    border-bottom: none;
  }
}

.pd-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.pd-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
}

.pd-table th:first-child,
.pd-table td:first-child {
  width: 25%;
}

.pd-table th {
  color: #fff;
  padding: 7px 6px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: break-word;
}

.pd-th-title {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.pd-th-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  opacity: .92;
  margin-top: 1px;
}

.pd-th-sub-solo {
  margin-top: 0;
  font-size: 10.5px;
}

.pd-th-label {
  background: var(--pd-gris);
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.pd-th-gris { background: var(--pd-gris); }
.pd-th-verde { background: var(--pd-verde); }
.pd-th-vino { background: var(--vino); }
.pd-th-oro { background: var(--oro); }

.pd-table td {
  padding: 6px 6px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  overflow-wrap: break-word;
  line-height: 1.25;
}

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

.pd-table tbody tr:nth-child(even) {
  background: #FAF8F5;
}

.pd-td-label {
  text-align: left;
  font-weight: 700;
  color: var(--ink-2);
  font-size: 10.5px;
}

.pd-dash {
  color: var(--muted);
}

.pd-secciones:not(:empty) {
  margin-top: 16px;
}

.pd-viewer {
  position: relative;
  height: 320px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.pd-viewer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

@media (max-width: 640px) {
  .pd-viewer { height: 220px; }
}

.pd-viewer .vnav {
  width: 30px;
  height: 44px;
  font-size: 17px;
}

.pd-viewer .vprev { border-radius: 0 7px 7px 0; }
.pd-viewer .vnext { border-radius: 7px 0 0 7px; }

.pd-viewer-count {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .pd-table { font-size: 9.5px; }
  .pd-table th, .pd-table td { padding: 5px 4px; }
  .pd-th-title, .pd-th-sub { font-size: 8.5px; }
  .pd-th-sub-solo { font-size: 9px; }
  .pd-td-label { font-size: 9px; }
  .pd-th-label { font-size: 9px; }
}

.render-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.render-grid-solo {
  grid-template-columns: 1fr;
}

.render-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 3px solid var(--oro);
  padding-left: 8px;
}

.render-item-full {
  grid-column: 1 / -1;
  width: 100%;
}

.render-item>.ficha-icono {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  aspect-ratio: auto;
  object-fit: contain;
}

.render-viewer {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.render-viewer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  background: #EDE6EA;
  border: 1px solid var(--line);
}

.render-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--vino);
  animation: sicopue-girar .8s linear infinite;
}

@keyframes sicopue-girar {
  to { transform: rotate(360deg); }
}

.video-loading-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.video-loading-wrap video {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}

.video-loading-wrap.video-listo video {
  opacity: 1;
}

.video-loading-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: sicopue-girar .8s linear infinite;
  opacity: 1;
  transition: opacity .2s ease;
}

.video-loading-wrap.video-listo::after {
  opacity: 0;
  pointer-events: none;
}

.video-loading-wrap-natural {
  aspect-ratio: auto;
  min-height: 200px;
}

.video-loading-wrap-natural video {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.video-loading-wrap-alto-fijo {
  aspect-ratio: 16/9;
  height: auto;
}

.video-loading-wrap.video-loading-wrap-alto-fijo video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.render-label-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.render-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  text-align: left;
}

.render-item video,
.render-viewer video {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #EDE6EA;
  display: block;
}

.render-item img,
.render-viewer img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #EDE6EA;
  display: block;
}

.render-viewer .vnav {
  width: 30px;
  height: 44px;
  font-size: 17px;
}

.render-viewer .vprev {
  border-radius: 0 7px 7px 0;
}

.render-viewer .vnext {
  border-radius: 7px 0 0 7px;
}

.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vino-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--vino-soft);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  margin: 2px 4px 2px 0;
}

.pdf-link:hover {
  background: var(--vino-2);
  color: #fff;
}

.pdf-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#tblSupervision .col-antecedentes {
  width: 270px;
}

#tblSupervision .col-archivos-seg {
  width: auto;
}

#tblSupervision td.col-archivos-seg .pdf-cards,
#tblSupervision td.col-antecedentes .pdf-cards {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

#tblSupervision td.col-archivos-seg .pdf-card,
#tblSupervision td.col-antecedentes .pdf-card {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  #tblSupervision .col-antecedentes {
    width: 200px;
  }
}

.pdf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 84px;
  padding: 8px 6px 6px;
  background: var(--vino-soft);
  border: 2px solid var(--vino);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(105, 27, 60, 0.18);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.pdf-card:hover {
  background: var(--vino-2);
  border-color: var(--vino-2);
  color: #fff;
  box-shadow: 0 4px 10px rgba(105, 27, 60, 0.3);
  transform: translateY(-2px);
}

.pdf-card:hover .pdf-card-fecha {
  color: #fff;
}

.pdf-card-icono {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-bottom: 4px;
}

.pdf-card-desc {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pdf-card-fecha {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--vino-2);
  margin-top: 4px;
}

@media (max-width: 480px) {
  .pdf-card {
    width: 74px;
    padding: 7px 5px 5px;
  }
}

#tblSupervision {
  table-layout: fixed;
}

#tblSupervision th:nth-child(1),
#tblSupervision td:nth-child(1) {
  width: 40px;
}

#tblSupervision th:nth-child(2),
#tblSupervision td:nth-child(2) {
  width: 15%;
  white-space: normal;
  overflow-wrap: break-word;
}

#tblSupervision th.col-antecedentes {
  border-right: 2px solid rgba(255, 255, 255, 0.25);
}

#tblSupervision td.col-antecedentes {
  border-right: 2px solid rgba(105, 27, 60, 0.35);
}

.view-porcentaje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 20px;
}

.view-porcentaje p {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-right: 4px;
  flex: 1 1 100%;
}

@media (min-width: 560px) {
  .view-porcentaje p {
    flex: none;
  }
}

.porcentaje {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
}

.cuadrito-1,
.cuadrito-2,
.cuadrito-3,
.cuadrito-4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 8px;
  flex-shrink: 0;
}

.cuadrito-icon {
  width: 10px;
  height: 10px;
  color: #fff;
}

.cuadrito-1 {
  background-color: var(--rojo);
}

.cuadrito-2 {
  background-color: var(--ambar);
}

.cuadrito-3 {
  background-color: var(--verde);
}

.cuadrito-4 {
  background-color: var(--gris);
}

/* ===== Botones de gestión por avance ===== */
.gchips-gest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-gest-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-right: 9px solid transparent;
  border-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
  box-sizing: border-box;
  background: var(--gest-bg, #fff);
  color: var(--gest-text, var(--ink));
}

.btn-gest-item:hover {
  background: var(--gest-hover-bg, var(--gest-bg));
  color: var(--gest-hover-text, var(--gest-text));
}

.btn-gest-item:active {
  transform: scale(0.97);
}

.btn-gest-cat-semarnat {
  --gest-bg: #E6F4D9;
  --gest-text: var(--ink);
}

.btn-gest-cat-conagua {
  --gest-bg: #DCEEF6;
  --gest-text: var(--ink);
}

.btn-gest-cat-cfe {
  --gest-bg: #DCEEE0;
  --gest-text: var(--ink);
  --gest-hover-bg: #7FC79A;
  --gest-hover-text: #fff;
}

.btn-gest-cat-pemex {
  --gest-bg: #EFF6D6;
  --gest-text: var(--ink);
}

.btn-gest-cat-gas {
  --gest-bg: #FBE7D4;
  --gest-text: var(--ink);
  --gest-hover-bg: #E8A464;
  --gest-hover-text: #fff;
}

.btn-gest-cat-attrapi {
  --gest-bg: #E4E1F7;
  --gest-text: var(--ink);
  --gest-hover-bg: #8B7FD1;
  --gest-hover-text: #fff;
}

.btn-gest-cat-saascaem {
  --gest-bg: #D7F0EA;
  --gest-text: var(--ink);
  --gest-hover-bg: #4FAF95;
  --gest-hover-text: #fff;
}

.btn-gest-cat-ferreas {
  --gest-bg: #F7ECD2;
  --gest-text: var(--ink);
}

.btn-gest-cat-ductos {
  --gest-bg: #D9F0F2;
  --gest-text: var(--ink);
}

.btn-gest-cat-otros {
  --gest-bg: #ECEBEC;
  --gest-text: var(--ink);
}

.btn-gest-cat-telmex {
  --gest-bg: #DCE8F7;
  --gest-text: var(--ink);
  --gest-hover-bg: #6FA0DE;
  --gest-hover-text: #fff;
}

.btn-gest-cat-gas {
  --gest-bg: #FBE7D4;
  --gest-text: var(--ink);
  --gest-hover-bg: #E8A464;
  --gest-hover-text: #fff;
}

.btn-gest-cat-pemex {
  --gest-bg: #EFF6D6;
  --gest-text: var(--ink);
  --gest-hover-bg: #a7be74;
  --gest-hover-text: #fff;
}

.btn-gest-cat-conagua {
  --gest-bg: #DCEEF6;
  --gest-text: var(--ink);
  --gest-hover-bg: #7FC9E8;
  --gest-hover-text: #fff;
}

.btn-gest-cat-municipal {
  --gest-bg: #F3E9D8;
  --gest-text: var(--ink);
  --gest-hover-bg: #C9A25E;
  --gest-hover-text: #fff;
}

.btn-gest-cat-pordefinir {
  --gest-bg: #ECE3F5;
  --gest-text: var(--ink);
  --gest-hover-bg: #A97AD1;
  --gest-hover-text: #fff;
}

.btn-gest-cat-inah {
  --gest-bg: #F5E6D3;
  --gest-text: var(--ink);
  --gest-hover-bg: #C88A4C;
  --gest-hover-text: #fff;
}

.btn-gest-estatus-rojo {
  border-right-color: #C0392B;
  --gest-hover-bg: #C0392B;
  --gest-hover-text: #fff;
}

.btn-gest-estatus-amarillo {
  border-right-color: #F5C518;
  --gest-hover-bg: #F5C518;
  --gest-hover-text: #3B0A20;
}

.btn-gest-estatus-ambar {
  border-right-color: #F2994A;
  --gest-hover-bg: #F2994A;
  --gest-hover-text: #fff;
}

.btn-gest-estatus-verde {
  border-right-color: #2A9D8F;
  --gest-hover-bg: #2A9D8F;
  --gest-hover-text: #fff;
}

.btn-gest-estatus-gris {
  border-right-color: #9AA0A6;
  --gest-hover-bg: #9AA0A6;
  --gest-hover-text: #fff;
}

.btn-gest-tram {
  border-right: none !important;
  border-radius: 8px !important;
  padding: 3px 6px !important;
  border-left: 5px solid transparent;
}

.btn-gest-tram.btn-gest-estatus-rojo {
  border-left-color: #C0392B;
}

.btn-gest-tram.btn-gest-estatus-amarillo {
  border-left-color: #F5C518;
}

.btn-gest-tram.btn-gest-estatus-ambar {
  border-left-color: #F2994A;
}

.btn-gest-tram.btn-gest-estatus-verde {
  border-left-color: #2A9D8F;
}

.btn-gest-tram.btn-gest-estatus-gris {
  border-left-color: #9AA0A6;
}

.btn-gest-tram.btn-gest-disabled {
  --gest-bg: #ECEBEC !important;
  --gest-text: #9AA0A6 !important;
  --gest-hover-bg: #ECEBEC !important;
  --gest-hover-text: #9AA0A6 !important;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-gest-tram .btn-gest-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.estatus-badge {
  display: inline-block;
  padding: 3px 0 3px 10px;
  border-left: 4px solid var(--gest-otros);
}

.estatus-badge.estatus-rojo {
  border-left-color: var(--rojo);
}

.estatus-badge.estatus-ambar {
  border-left-color: var(--ambar);
}

.estatus-badge.estatus-verde {
  border-left-color: var(--verde);
}

.estatus-badge.estatus-gris {
  border-left-color: #9AA0A6;
  color: #9AA0A6;
}

.estatus-badge.estatus-badge--icono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-left: none;
  padding: 3px 0;
}

.estatus-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.estatus-badge--icono.estatus-rojo .estatus-badge-icon { color: var(--rojo); }
.estatus-badge--icono.estatus-ambar .estatus-badge-icon { color: var(--ambar); }
.estatus-badge--icono.estatus-verde .estatus-badge-icon { color: var(--verde); }
.estatus-badge--icono.estatus-gris .estatus-badge-icon { color: #9AA0A6; }

.estatus-icono {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

.estatus-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.estatus-dot-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.kmz-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  text-decoration: none;
  background: #c93850;
  cursor: pointer;
  transition: background 0.15s;
}

.kmz-link img {
  width: 16px;
  height: 16px;
  display: block;
}

.kmz-link:hover {
  background: var(--vino-soft);
}

.kmz-link-disabled {
  background: #ECEBEC;
  cursor: not-allowed;
  opacity: .6;
}


.avance-general {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-family: 'Archivo', sans-serif;
}

.avance-general .ag-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.avance-general .ag-valor {
  font-size: 18px;
  font-weight: 800;
}

.tbl-archivos-gest-wrap {
  position: relative;
}

/* Tablas DENTRO de modales (2026-09-25, pedido explícito del usuario:
   "todos los modals con tablas andan con scroll el modal y no solo la
   tabla"): scroll PROPIO de la tabla, limitado a 80vh de alto, en vez de
   dejar que el modal entero se estire/scrollee. Al ser este mismo
   contenedor el que de verdad hace scroll vertical, position:sticky
   nativo sí funciona aquí (a diferencia de las tablas de la página
   principal, donde el scroll real es el de toda la ventana y por eso usan
   el clon JS de cabeceras fijas -- ver TABLAS_SIN_CABECERA_FIJA). */
.tbl-archivos-gest-scroll,
.seg-rend-scroll,
#permisosBody .tbl-scroll {
  max-height: min(80vh, 640px);
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tbl-archivos-gest-scroll thead th,
#permisosBody .tbl-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Supercabecera de nivel (Alta/Media/Baja) de las tablas de "Seguimiento
   de Acciones": se fija justo debajo de la cabecera de columnas. */
.tbl-archivos-gest-scroll .prio-grupo-row td {
  position: sticky;
  top: var(--prio-header-h, 34px);
  z-index: 2;
}

/* La tabla del modal individual de "Seguimiento de acciones" (2026-09-30,
   pedido explícito del usuario) se ajusta entre 460px y 550px según el
   alto disponible del modal, pero SIN que eso rompa la otra condición que
   pidió: "que nunca se active el scroll del modal". Lo de arriba (título,
   mapa/render, botón de editar, paddings del modal-card) mide en total
   ~388px reales medidos en pantalla, así que "100vh - 388px" es lo que le
   queda de verdad a la tabla sin desbordar el modal.
   min(550px, ...) la deja crecer hasta 550px si sobra espacio. El piso de
   460px (min-height) se respeta en pantallas normales, pero en una
   ventana MUY chica (menos de ~688px de alto) se deja encoger más allá de
   460px -- justo para no romper la regla de "nunca actives el scroll del
   modal", que pidió con más énfasis ("pero que NUNCA"). En la inmensa
   mayoría de pantallas esto nunca se nota: la tabla siempre sale entre
   460 y 550px. */
#prioObraVista {
  height: min(550px, calc(100vh - 388px));
  min-height: 300px;
  overscroll-behavior-y: contain;
}

/* Sin cebra en las tablas de "Seguimiento de Acciones" (2026-09-29,
   pedido explícito del usuario) -- filas todas del mismo color, el
   border-bottom que ya trae .tbl-archivos-gest tbody td (arriba) es lo que
   las distingue. Se pisa la regla genérica de cebra (tbody tr:nth-child)
   con selectores más específicos, sin tocar otras tablas (ej. Gestiones,
   que sí se queda con cebra). */
#prioObraVista tbody tr:nth-child(odd) td,
#prioObraVista tbody tr:nth-child(even) td,
#prioGeneralVista tbody tr:nth-child(odd) td,
#prioGeneralVista tbody tr:nth-child(even) td {
  background: var(--surface);
}

.tbl-archivos-gest {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
}

.tbl-scroll table thead tr th {
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--vino-2);
}

.tbl-scroll table tbody tr .num, .rowtotal {
  text-align: center;
  vertical-align: middle;
}

.tbl-archivos-gest thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.tbl-archivos-gest thead th:last-child {
  width: 260px;
}

.tbl-archivos-gest thead th:nth-child(4),
.tbl-archivos-gest thead th:nth-child(5) {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  white-space: normal;
  line-height: 1.2;
}
.tbl-archivos-gest tbody td {
  padding: 10px 10px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  word-break: break-word;
}

.tbl-archivos-gest tbody tr:last-child td {
  border-bottom: none;
}

.tbl-archivos-gest tbody td:first-child {
  font-weight: 600;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .kpis {
    grid-template-columns: 1fr 1fr
  }

  #kpisTram {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2 {
    grid-template-columns: 1fr
  }

  main {
    padding: 18px 14px 50px
  }

  .mbody-pad {
    padding: 0 32px;
  }

  .render-grid-pad {
    padding: 0 32px;
  }

  .msegbody-pad {
    padding: 0 32px;
  }
}

@media (max-width: 400px) {

  .tbl-archivos-gest thead th:first-child,
  .tbl-archivos-gest tbody td:first-child {
    font-size: 12px;
  }

  .tbl-archivos-gest thead th:last-child {
    width: 110px;
  }

  .pdf-link span.pdf-text {
    display: none;
  }

  .header-right-logo img {
    height: 10px;
  }
}

.map-crop {
  width: 100%;
  max-width: 100%;
}

iframe {
  width: 100%;
  max-width: 100%;
  display: block;
  max-height: 480px;
  border: none;
}
.map-vista-individual iframe {
  max-height: none;
  height: 550px;
}

@media (max-width: 768px) {
  .kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  #kpisTram {
    grid-template-columns: 1fr 1fr;
  }

  .gal {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-in {
    padding: 14px 14px;
    gap: 10px;
  }

  .header-right-logo img {
    height: 30px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .brand p {
    font-size: 14px;
  }

  .view-head h2 {
    font-size: 19px;
  }

  .mbody-pad {
    padding: 0 32px;
  }

  .render-grid-pad {
    padding: 0 32px;
  }

  .seg-avance-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .seg-datos-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dash-kpi-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .dash-kpi-inv,
  .dash-kpi-right,
  .dash-kpi-vacio {
    grid-column: 1;
    grid-row: auto;
  }

  .seg-historial-layout {
    grid-template-columns: 1fr;
  }

  .seg-historial-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .seg-historial-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .seg-foto-img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #EDE6EA;
    flex: none;
  }

  .seg-video-item video {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 560px) {
  .ficha-row>.ficha-icono {
    position: static;
    transform: none;
    margin-right: 12px;
  }

  .render-item>.ficha-icono {
    position: static;
    transform: none;
    margin: 0 0 4px;
  }

  .gal {
    grid-template-columns: 1fr
  }

  .kpis {
    grid-template-columns: 1fr;
  }

  .kpi {
    padding: 12px;
  }

  .kpi .val {
    font-size: 21px
  }

  .kpi .lbl {
    font-size: 10.5px;
  }

  .modal {
    margin: 10px;
  }

  .modal-card {
    border-radius: 0px;
  }

  .modal-top {
    padding: 13px 16px;
    padding-right: 58px;
  }

  #modalSeguimiento .modal-top,
  #modalFichaResumen .modal-top {
    padding-right: 100px;
  }

  #modalSeguimiento .modal-top,
  #modalPrioridad .modal-top,
  #modalPrioridadGeneral .modal-top {
    padding-right: 148px;
  }

  .modal-top h3 {
    font-size: 15.5px;
  }

  .modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .modal-print {
    top: 12px;
    right: 54px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 16px;
  }

  .modal-export-pptx {
    right: 138px;
  }

  .modal-export-excel {
    right: 96px;
  }

  .mbody-pad {
    padding: 0 16px;
  }

  .render-grid-pad {
    padding: 0 16px;
  }

  .dt {
    grid-template-columns: 1fr;
  }

  .dt>div {
    border-right: none !important;
    border-bottom: 1px dashed var(--line);
  }

  .dt>div:last-child {
    border-bottom: none;
  }

  .blk p {
    text-align: left;
  }

  .header-right-logo img {
    height: 21px;
  }

  .brand h1 {
    font-size: 12px;
  }

  .brand p {
    font-size: 8px;
  }

  .msegbody-pad {
    padding: 0 16px;
  }

  .seg-avance-col {
    grid-template-columns: 1fr;
    height: auto;
  }

  .seg-avance-chart {
    min-height: 180px;
    width: 100%;
  }

  .seg-historial-list {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .seg-historial-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .seg-fotos {
    width: 100%;
  }

  .seg-historial-layout {
    grid-template-columns: 1fr;
  }

  .seg-historial-list {
    flex-direction: row;
  }
}

@media (max-width: 420px) {
  .kpis {
    grid-template-columns: 1fr;
  }

  .header-right-logo img {
    height: 21px;
  }

  header {
    padding: 2px 18px;
  }

  .brand h1 {
    font-size: 12px;
  }

  .brand p {
    font-size: 8px;
  }
}

@media (max-width: 640px) {
  .modal {
    padding: 0;
    margin: 0;
  }

  .modal-card,
  .modal-card-gest,
  .modal-card1 {
    max-width: 100%;
    width: 100%;
    --modal-w: 100vw;
    /* height (no min-height): con min-height, el max-height de la regla
       de escritorio (calc(100vh - 40px)) seguía puesto y, como
       min-height > max-height, CSS lo ignora -- la tarjeta quedaba sin
       techo, crecía con el contenido, y el .modal de afuera (el que
       tiene overflow-y:auto) era el que hacía scroll, arrastrando fuera
       de la pantalla el header con el botón de cerrar. Con height fijo a
       100vh, el alto de la tarjeta queda cerrado de verdad: el header
       (flex:0 0 auto) se queda fijo arriba y el que hace scroll es el
       body de adentro (.modal-body/.modal-scroll-area, flex:1 1 auto +
       overflow-y:auto), como en escritorio. */
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .modal-top {
    padding: 14px 60px 14px 16px;
    flex-wrap: wrap;
  }

  #modalSeguimiento .modal-top,
  #modalFichaResumen .modal-top {
    padding-right: 106px;
  }

  #modalSeguimiento .modal-top,
  #modalPrioridad .modal-top,
  #modalPrioridadGeneral .modal-top {
    padding-right: 154px;
  }

  .modal-close {
    right: 12px;
    top: 12px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .modal-print {
    right: 60px;
    top: 12px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 16px;
  }

  .modal-export-pptx {
    right: 156px;
  }

  .modal-export-excel {
    right: 108px;
  }

  .modal-card-gest .modal-top h3 {
    font-size: 15.5px;
    line-height: 1.25;
  }

  .gest-modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
  }

  .avance-general {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }

  .avance-general .ag-label {
    font-size: 12px;
  }

  .avance-general .ag-valor {
    font-size: 16px;
  }

  .tbl-archivos-gest thead th,
  .tbl-archivos-gest tbody td {
    padding: 8px 6px;
    font-size: 12.5px;
  }

  .tbl-archivos-gest thead th:last-child {
    width: 90px;
  }

  .pdf-link {
    font-size: 12px;
    padding: 4px 8px;
    white-space: normal;
    text-align: center;
  }

  .gchips-gest {
    gap: 5px;
  }

  .btn-gest-item {
    font-size: 11px;
    padding: 5px 11px;
  }

  header {
    padding: 2px 18px;
  }

  .header-right-logo img {
    height: 21px;
  }

  .brand h1 {
    font-size: 12px;
  }

  .brand p {
    font-size: 8px;
  }
}

.seg-avance-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.seg-avance-col {
  display: grid;
  grid-template-columns: minmax(180px, 2%) 1fr;
  gap: 14px;
  align-items: stretch;
  height: 250px;
}

.seg-avance-datos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seg-avance-datos h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
}

.seg-avance-fila {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.seg-avance-fila b {
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
}

.seg-avance-chart {
  position: relative;
  min-height: 140px;
}

.seg-avance-datos-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.seg-avance-chart-full {
  position: relative;
  width: 100%;
  min-height: 340px;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .seg-avance-datos-row {
    gap: 10px;
  }

  .seg-avance-chart-full {
    min-height: 260px;
  }
}

.seg-meta-tablas {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.seg-meta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

.seg-meta-marco {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  flex: 1 1 auto;
}

.seg-meta-marco > img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}

.seg-meta-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 3px solid var(--oro);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
}

.seg-meta-cuerpo > h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin: 0 0 5px;
}

.seg-meta-cuerpo > p {
  font-size: 14px;
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  margin: 0 0 10px;
}

.seg-meta-tbl {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--line);
}

.seg-meta-tbl td:first-child {
  width: 62%;
  white-space: nowrap;
}

.seg-meta-tbl th {
  background: var(--vino);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
  padding: 8px 12px;
  text-align: center;
}

.seg-meta-tbl td {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

.seg-meta-tbl tr:nth-child(even) td {
  background: var(--vino-soft);
}

.seg-meta-tbl td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
}

.seg-Tabla-Rendimiento {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .seg-Tabla-Rendimiento {
    position: relative;
    padding-top: 24px;
  }

}

.seg-rend-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--ink-2);
}

.seg-rend-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.seg-rend-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: auto;
}

.seg-rend-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.seg-rend-table tbody td {
  vertical-align: top;
}

.seg-rend-table tbody td:first-child {
  min-width: 220px;
  font-weight: 600;
}

.seg-rend-table tbody td:last-child {
  min-width: 180px;
}

.seg-rend-table tr.seg-rend-seccion td {
  background: var(--vino-soft);
  color: var(--vino);
  font-weight: 700;
  text-transform: none;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Nombre del puente (2026-09-30, pedido explícito del usuario): ya no es
   subtítulo chico dentro del título del modal -- ahora es un encabezado
   del mismo tamaño que "Seguimiento de acciones", arriba del mapa/render,
   sin centrar (alineado a la izquierda, el default de un bloque). */
.prio-obra-nombre {
  margin: 0 0 12px;
  font-family: 'Archivo';
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  color: var(--vino);
}

/* Modal individual de "Seguimiento de Acciones" (2026-09-26, pedido
   explícito del usuario): mapa + render del puente arriba de la tabla, a
   50%/50%, y en una sola columna en pantallas angostas. */
.prio-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.prio-media-col {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 190px;
}

.prio-media-col iframe {
  width: auto;
  height: 190px;
  max-height: none;
  border: none;
  display: block;
  margin: 0 auto;
}

.prio-media-col img {
  width: auto;
  height: 190px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
}

/* El mapa se deja un poco más grande que el render (2026-09-30, pedido
   explícito del usuario: vuelve a ser interactivo -- se puede mover, y se
   ven los botones +/-/* -- solo la leyenda se queda oculta, ver
   prioOcultarControlesMapa en prioridad-permisos.js). */
#prioMapCrop {
  height: 190px;
}

#prioMapCrop iframe {
  width: 100%;
  height: 190px;
}

@media (max-width: 768px) {
  .prio-media-grid {
    grid-template-columns: 1fr;
  }

  .prio-filtros {
    flex-direction: column;
    align-items: stretch;
  }

  .prio-enviar-correo-btn {
    justify-content: center;
  }

  .prio-filtro-responsable select {
    flex: 1 1 auto;
  }
}

.seg-larguillo {
  margin-top: 10px;
  /* 2026-09-25, pedido explícito del usuario: el Larguillo (dentro del
     modal de Seguimiento) es tan largo/ancho como una tabla y tenía el
     mismo problema -- hacía scroll el modal completo en vez de él. */
  max-height: min(80vh, 640px);
  overflow: auto;
}

.seg-lg-layout-nuevo {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.seg-lg-info-contrato {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 2px 2px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.seg-lg-info-contrato p {
  margin: 0;
}

.seg-lg-info-contrato strong {
  color: var(--vino-2);
  font-weight: 700;
  margin-right: 4px;
}

.seg-lg-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid var(--line);
  background: #fafbfe;
}

.seg-lg-leyenda-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.seg-lg-leyenda-muestra {
  width: 12px;
  height: 12px;
  border: 1px solid #111;
  border-radius: 2px;
  flex-shrink: 0;
}

.seg-lg-seccion {
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding: 8px 8px 10px;
  overflow-x: hidden;
  box-sizing: border-box;
}

.seg-lg-seccion:last-child {
  border-bottom: none;
}

.seg-lg-seccion-titulo {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4c5566;
  text-align: center;
}

.seg-lg-grid-barras {
  display: grid;
  row-gap: 2px;
  column-gap: 2px;
  align-items: stretch;
  width: 100%;
}

.seg-lg-cab-columna {
  font-size: 8.5px;
  font-weight: 700;
  text-align: center;
  color: #333;
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seg-lg-cab-numero {
  writing-mode: vertical-rl;
  font-size: 8.5px;
  font-weight: 700;
  color: #333;
  justify-self: center;
  padding-bottom: 2px;
  white-space: nowrap;
}

.seg-lg-fila-etiqueta {
  font-size: 8.5px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 3px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.15;
}

.seg-lg-celda {
  border: 1px solid #111;
  box-sizing: border-box;
  min-height: 12px;
  min-width: 0;
  background-color: #ffffff;
  transition: background-color 0.15s ease;
}

.seg-lg-celda-na {
  border: none;
  background: transparent;
}

.seg-lg-grupo-unidades {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-width: 0;
}

.seg-lg-grupo-unidades .seg-lg-celda {
  flex: 0 0 26%;
  min-width: 0;
}

.seg-lg-grid-apoyo {
  row-gap: 0;
}

.seg-lg-grid-apoyo > .seg-lg-cab-columna,
.seg-lg-grid-apoyo > .seg-lg-fila-etiqueta {
  padding-top: 2px;
  padding-bottom: 2px;
}

.seg-lg-divisor-apoyo {
  width: 4px;
  margin: 0 auto;
  background: #4c5566;
  border-radius: 2px;
  align-self: stretch;
}

@media (max-width: 980px) {
  .seg-lg-seccion {
    padding: 6px 5px 8px;
  }

  .seg-lg-seccion-titulo {
    font-size: 10px;
  }

  .seg-lg-cab-columna,
  .seg-lg-cab-numero,
  .seg-lg-fila-etiqueta {
    font-size: 7.5px;
  }

  .seg-lg-divisor-apoyo {
    width: 3px;
  }

  .seg-lg-celda {
    min-height: 9px;
  }
}

.seg-datos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 640px) {
  .seg-avance-col {
    grid-template-columns: 1fr;
    height: auto;
  }

  .seg-avance-chart {
    min-height: 180px;
    width: 100%;
  }

  .seg-datos-grid {
    grid-template-columns: 1fr;
  }

  .seg-lg-seccion {
    padding: 6px 4px 8px;
  }

  .seg-lg-cab-columna,
  .seg-lg-cab-numero,
  .seg-lg-fila-etiqueta {
    font-size: 7px;
  }

  .seg-lg-celda {
    min-height: 8px;
  }

  .seg-historial-layout {
    grid-template-columns: 1fr;
  }

  .seg-historial-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .seg-historial-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .seg-fotos {
    width: 100%;
  }

  .seg-foto-img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }

  .seg-video-item video {
    width: 100%;
    max-width: 100%;
    min-height: 220px;
  }
}

.seg-principal,
.seg-ciudadania {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seg-principal h5,
.seg-ciudadania h5,
.seg-trabajadores-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin-top: 10px;
}

.seg-principal h5:first-child,
.seg-ciudadania h5:first-child,
.seg-trabajadores-col h5:first-child {
  margin-top: 0;
}

.seg-principal p,
.seg-ciudadania p,
.seg-trabajadores-col p {
  font-size: 14px;
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
}

.seg-trabajadores-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seg-empleos-cols {
  display: flex;
  gap: 24px;
}

.seg-historial-layout {
  display: grid;
  grid-template-columns: 0.3fr 1.7fr;
  gap: 16px;
  align-items: start;
}

.seg-historial-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seg-historial-item {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.seg-historial-item:hover {
  border-color: var(--vino-2);
}

.seg-historial-item.activo {
  background: var(--vino-2);
  border-color: var(--vino-2);
  color: #fff;
}

.seg-historial-contenido {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.seg-historial-bloque h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin-bottom: 8px;
}

.tram-foto-cell {
  text-align: center;
  vertical-align: middle;
  width: 64px;
}

.tram-foto-icono {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #EDE6EA;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.tram-foto-icono img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tram-foto-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--vino);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
}

.tram-foto-vacia {
  color: var(--muted);
  font-size: 11px;
}

.lightbox-modal {
  z-index: 90;
}

.lightbox-modal.open {
  align-items: center;
}

.lightbox-card {
  position: relative;
  width: min(90vw, 900px);
  height: min(80vh, 650px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-card #lightboxImg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  object-fit: contain;
  background: #1a0610;
}

.lightbox-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 32px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  border-radius: 10px 10px 0 0;
}

.lightbox-title {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#modalLightbox .lightbox-title {
  background: rgba(0, 0, 0, .6);
  padding: 5px 12px;
  border-radius: 8px;
}

.lightbox-topbar .lightbox-close {
  position: static;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* Botón "Abrir en pestaña nueva" de los visores de PDF (#modalPdf y
   #modalPlano): respaldo para celular, donde el iframe con el PDF
   embebido suele quedar en blanco. */
.pdf-external-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background .15s;
}

.pdf-external-btn:hover {
  background: rgba(255, 255, 255, .32);
}

/* El botón "Abrir en pestaña nueva" (#pdfExternal en #modalPdf,
   #planoExternal en #modalPlano) solo hace falta en celular -- en PC el
   PDF ya se ve bien embebido, así que ahí se oculta para no ensuciar la
   barra. Se apunta a la clase (no a los IDs uno por uno) para que cubra
   ambos modales parejo. */
@media (min-width: 641px) {
  .pdf-external-btn {
    display: none;
  }
}

.lightbox-prev,
.lightbox-next {
  z-index: 5;
}

.lightbox-prev {
  left: -21px;
  border-radius: 8px;
}

.lightbox-next {
  right: -21px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .lightbox-card {
    width: 94vw;
    height: min(70vh, 94vw);
    margin: 0 auto;
    background: transparent;
  }

  .lightbox-card #lightboxImg {
    width: 100%;
    height: 100%;
  }

  .lightbox-prev {
    left: 4px;
  }
  .lightbox-next {
    right: 4px;
  }
}

.pdf-modal-card {
  width: min(94vw, 960px);
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.pdf-modal-card .lightbox-topbar {
  position: static;
  flex: none;
  background: var(--vino);
  padding: 14px 16px;
  border-radius: 0;
}

.pdf-modal-card #pdfFrame,
.pdf-modal-card #planoFrame {
  max-height: none;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  background: #fff;
  display: block;
}

/* Visor de "Plano general" (columna Plano de Proyecto Ejecutivo): mismo
   modal que el resto de los PDF, pero más ancho -- un plano de ingeniería
   se lee mejor grande. */
.pdf-modal-card-plano {
  width: min(94vw, 1200px);
}

@media (max-width: 640px) {
  .pdf-modal-card,
  .pdf-modal-card-plano {
    width: 100vw;
    height: 100vh;
    /* 100dvh (alto de viewport dinámico) después de 100vh: donde el
       navegador lo soporta, se ajusta solo al espacio que en verdad se ve
       (sin contar la franja que tapa la barra de direcciones cuando está
       visible), en vez del 100vh "de diseño" que puede quedar más alto
       que lo realmente visible. Donde no lo soporta, simplemente se
       ignora esta línea y se queda con el 100vh de arriba. */
    height: 100dvh;
    border-radius: 0;
  }

  /* .lightbox-modal.open centra verticalmente (align-items:center) --
     bien para el visor de fotos (#modalLightbox), que nunca llega a medir
     toda la pantalla. Pero #modalPdf/#modalPlano sí miden 100vh exacto
     arriba, y "100vh" en el navegador del celular no siempre coincide con
     el viewport REALMENTE visible (la barra de direcciones del navegador
     se esconde/aparece y cambia cuánto se ve) -- si la tarjeta termina un
     poco más alta que lo visible, quedar centrada reparte ese desborde
     arriba Y abajo por igual, empujando el header con el botón ✕ fuera de
     la pantalla por arriba. Ancladas arriba (flex-start, mismo criterio
     que ya usa el .modal normal de Avance de obra) el desborde se va solo
     hacia abajo y el header queda siempre visible. */
  #modalPdf.open,
  #modalPlano.open {
    align-items: flex-start;
  }
}

.pdf-link,
.pdf-card {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.seg-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.seg-foto-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;

}

.seg-foto-img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #EDE6EA;
  cursor: pointer;
}

.seg-foto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}

.seg-foto-desc {
  width: 100%;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  text-align: center;
}

.seg-videos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.seg-video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.seg-video-item video {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 220px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #000;
  display: block;
}

.seg-video-desc {
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

.seg-vacio {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.seg-larguillo,
.seg-Tabla-Rendimiento {
  scroll-margin-top: 16px;
}

@media (max-width: 768px) {
  .seg-historial-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .seg-historial-list {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    margin-bottom: 12px;
    padding-bottom: 4px;
  }

  .seg-historial-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  .seg-historial-contenido {
    width: 100% !important;
  }

  .seg-fotos,
  .seg-videos {
    width: 100% !important;
  }

  .seg-fotos {
    grid-template-columns: 1fr !important;
  }

  .seg-foto-img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .seg-video-item video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 220px !important;
  }
}

@media (max-width: 640px) {
  .apexcharts-toolbar,
  .apexcharts-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

.modal-card1 {
  max-width: 1200px;
  --modal-w: 1200px;
  width: 100%;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}

.msegbody-pad {
  padding: 0 20px;
}

.msegbody-group {
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.msegbody-group:first-child {
  padding-top: 0;
}

.msegbody-group:last-of-type {
  border-bottom: none;
}

.chat-mensajes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-avatar-placeholder {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vino-2);
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
  flex: none;
}

.chat-bubble {
  background: #FBF7F9;
  border: 1px solid var(--line);
  border-radius: 0 12px 12px 12px;
  padding: 10px 14px;
  max-width: 85%;
}

.chat-bubble .cb-nombre {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--vino-2);
}

.chat-bubble .cb-rol {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}

.chat-bubble .cb-texto {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.4;
}

.chat-bubble .cb-fecha {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  text-align: right;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.chat-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}

.chat-input:focus {
  border-color: var(--vino-2);
}

.chat-send {
  background: var(--vino-2);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 9px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.chat-send:hover {
  background: var(--vino);
}

.chat-historial {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-historial-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background .15s;
}

.chat-historial-item:hover {
  background: var(--vino-soft);
}

.link-Obra {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 18px 8px 8px;
  background: var(--vino);
  border: 1.5px solid var(--oro);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}

.link-Obra:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--vino);
}

.link-Obra img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  flex: none;
}

.link-Obra p {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.link-Obra p::after {
  content: '›';
  margin-left: 8px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .link-Obra {
    width: 100%;
    justify-content: center;
    padding: 8px 16px 8px 6px;
  }

  .link-Obra img {
    width: 34px;
    height: 34px;
  }

  .link-Obra p {
    font-size: 12px;
  }
}

.btn-chat-dash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 9px 14px;
  background: var(--vino);
  border: 1.5px solid var(--vino);
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.btn-chat-dash:hover {
  background: #541630;
  box-shadow: 0 0 10px 2px rgba(105, 27, 60, 0.6);
  color: #dcccd2;
}

.btn-chat-dash img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  flex: none;
}

.render-itemRec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.render-item video {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #EDE6EA;
  display: block;
  height: auto;
}

.dash-kpi-top {
  display: grid;
  grid-template-columns: 33.3fr 33.3fr 33.3fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin-bottom: 18px;
}

.dash-kpi-inv {
  grid-column: 1;
  grid-row: 1 / 3;
  text-align: center;
}

.dash-kpi-right {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: 14px 16px;
  overflow: hidden;
  width: auto;
}

.dash-kpi-vacio {
  grid-column: 2;
  grid-row: 2;
  border: 1px dashed var(--line);
  border-radius: 14px;
  box-shadow: none;
}

@media (max-width: 768px) {
  .dash-kpi-top {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .dash-kpi-inv,
  .dash-kpi-right,
  .dash-kpi-vacio {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }
}

.dash-etapa-header {
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--vino-2);
}

.dash-etapa-titulo {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--vino);
}

.dash-etapa-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.apex-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.apex-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.apex-leyenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}

.dropdown-title {
  background-color: #691B3C;
  color: #fff;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  padding: 16px 18px;
  border-radius: 14px;
}

.dropdown-title a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.dropdown-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.dropdown-panel.active {
  background: rgba(105, 27, 60, 0.06);
  border-color: #691B3C;
}

.dropdown-panel.active .dropdown-title {
  background-color: #fff;
  color: #691B3C;
}

.dropdown-title.active .dropdown-arrow {
  transform: rotate(180deg);
}

.hidden {
  display: none !important;
}

.historyChat {
  background: none;
  border: none;
  color: #E0BFCC;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}

.historyChat:hover {
  color: #fff;
}

:root {
  scrollbar-width: thin;
  scrollbar-color: var(--vino) transparent;
}

*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  background: var(--vino) !important;
  border-radius: 8px !important;
  border: none !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--vino-2) !important;
}

*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

*::-webkit-scrollbar-button:vertical:start,
*::-webkit-scrollbar-button:vertical:end,
*::-webkit-scrollbar-button:horizontal:start,
*::-webkit-scrollbar-button:horizontal:end,
*::-webkit-scrollbar-button:increment,
*::-webkit-scrollbar-button:decrement {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==================== DIRECTORIO ==================== */
.dir {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dir-grupo {
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-family: 'Archivo';
  font-size: 18px;
  color: var(--vino);
  border-bottom: 2px solid var(--oro);
}

.dir-sub {
  margin: 16px 0 10px;
  padding-left: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  border-left: 3px solid var(--vino-2);
}

.dir-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.dir-item {
  background: var(--surface);
  border: 1px solid var(--vino-2);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .2s;
}

.dir-item:hover {
  box-shadow: var(--shadow);
}

.dir-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
}

.dir-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}

.dir-nombre {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.dir-nombre small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
}

.dir-info {
  display: block;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: 13.5px;
  color: var(--ink-2);
}

.dir-info div {
  padding: 3px 0;
  word-break: break-word;
}

.dir-info i {
  font-style: normal;
  display: inline-block;
  width: 26px;
}

@media (min-width: 700px) {
  .dir-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .dir-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==================== (tabla con div) ==================== */
/* Colores literales (sin var()): estas reglas también se copian a la
   ventana de impresión, que no tiene el :root de la página. */
.cg {
  min-width: 960px;
  border: 2px solid #222;
  font-size: 11px;
  color: #222;
  background: #fff;
}

.cg-row,
.cg-grupo,
.cg-fila {
  display: flex;
}

.cg-row + .cg-row,
.cg-grupo + .cg-grupo,
.cg-fila + .cg-fila {
  border-top: 1px solid #222;
}

.cg-grupos,
.cg-filas {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cg-grupo,
.cg-fila {
  flex: 1 1 auto;
}

.cg-filas {
  flex: 1 1 0;
}

.cg-c {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  text-align: center;
  word-break: break-word;
  border-right: 1px solid #222;
  flex: 0 0 auto;
}

.cg-fila > .cg-est,
.cg-row > .cg-est,
.cg-head > .cg-est {
  border-right: 0;
}

/* anchos fijos, salvo "No. Oficio", que absorbe el resto: así las columnas
   quedan alineadas aunque el permiso vaya dentro del área o fuera de ella */
.cg-no { width: 34px; padding-left: 2px; padding-right: 2px; }
.cg-pte { width: 120px; }
.cg-mun { width: 120px; }
.cg-canal { width: 110px; }
.cg-perm { width: 170px; }
.cg-area { width: 100px; }
.cg-ofi { flex: 1 1 0; min-width: 120px; }
.cg-fec { width: 80px; }
.cg-est { width: 100px; }

.cg-head {
  background: #691B3C;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}

.cg-head .cg-c {
  border-right-color: rgba(255, 255, 255, .35);
}

/* SEMARNAT: mismas celdas; "Fecha" y "Estatus" más anchas y en un bloque fijo */
.cg--semarnat .cg-tipo { width: 110px; }
.cg--semarnat .cg-eval { width: 100px; }
.cg--semarnat .cg-bit { flex: 1 1 0; min-width: 130px; }
.cg--semarnat .cg-fec { width: 120px; }
.cg--semarnat .cg-est { width: 110px; }
.cg--semarnat .cg-filas { flex: 0 0 230px; }

/* ATTRAPI: "Dependencia" más ancha (texto largo) */
.cg--attrapi .cg-perm { width: 280px; }

/* MUNICIPIO: "Concepto" más ancho (texto largo) */
.cg--municipio .cg-perm { width: 340px; }

/* Cebra, mismos tonos que las demás tablas (valores literales por la
   impresión). El encabezado es el primer hijo, por eso los renglones de
   datos impares quedan en :nth-child(even). */
.cg-row:not(.cg-head):nth-child(even) {
  background: #F7EBF0;
}

.cg-row:not(.cg-head):nth-child(odd) {
  background: #F0D9E3;
}

.cg-row:not(.cg-head):hover {
  background: #E3B8CB;
}