: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;
  --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;
  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;
}

.header-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  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);
  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);
  position: sticky;
  top: 59px;
  z-index: 38
}

.tabs-in {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  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
}

.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;
  }

  /* "Corte al..." + botón Inicio: en vez de acomodarse abajo del
     título (donde antes se movían de lugar), se quedan fijos en la
     esquina superior derecha del encabezado en todas las secciones. */
  .view-head {
    padding-right: 100px;
  }

  .header-right-group {
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    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: grid de 4, con "Etapa de contratación" más ancho ===== */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px
}

/* Tramitología tiene 4 KPIs (Derecho de vía, CFE, CONAGUA, Cruce
   ferroviario), distinto a los 3 del Tablero ejecutivo, así que usa
   su propio número de columnas en vez de heredar repeat(3, 1fr). */
#kpisTram {
  grid-template-columns: repeat(4, 1fr);
}

/* Las 4 tarjetas (incluida k-v, "Etapa de contratación") tienen el
   mismo ancho: una columna cada una, sin excepciones. */

.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
}

/* ===== Fila de gráficas: Obras por estatus (30%) / Inversión por Puentes (70%) ===== */
.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;
}

.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;
}

/* Inversión por Puentes: 18 barras con etiquetas largas rotadas
   45° necesitan más alto que el chart-box estándar para no
   cortarse contra el borde del panel. */
.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;
}

/* ===== Flechas táctiles de scroll horizontal =====
   Botones reales (no solo un hint) para desplazar tablas anchas en
   móvil. Se inyectan por JS (ver inicializarFlechasTactiles) dentro de
   cualquier contenedor con overflow-x, y su JS las mantiene
   verticalmente centradas en lo que se ve en pantalla del contenedor:
   si la tabla es más alta que la ventana y el usuario hace scroll
   hacia abajo, la flecha "seguirá viendo" en vez de quedarse arriba
   fuera de vista. Pensado como ayuda para personas mayores u otros
   usuarios a quienes cuesta notar que una tabla se puede deslizar. */
.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
}

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

/* Zebra en tono vino: la fila impar usa el vino "notable" y la par el
   "fuerte" (ambos suaves, se notan pero sin pasarse). El hover usa un
   tercer tono, distinto de los dos de reposo, igual para impares y
   pares. Los selectores de hover repiten el mismo :nth-child()/:not()
   que su versión sin hover para igualar la especificidad y así SÍ
   ganarle al color base (ver nota de especificidad más abajo). */
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);
}

/* Filas clickeables de la tabla resumen (Tablero ejecutivo) */
.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)
}

.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
}

/* Gallery */
.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
}
/* ===== Header de color dentro de la tarjeta (body-top) ===== */
.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;
}

/* Un escalón por debajo del municipio: dorado en vez del rosa de .mun,
   para que se note (no es un dato menor, es la empresa ganadora) pero
   sin competir con él. margin-top:auto lo manda siempre casi al borde
   de abajo de la tarjeta, sin importar cuánto ocupen el nombre/municipio
   arriba (2 líneas, 1 línea, etc.) */
.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;
}

/* Modal */
.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;
}

/* Encabezado del modal: ahora es un elemento normal dentro del flujo
   (flex column del .modal-card), en vez de quedar "flotando" fijo
   respecto a la pantalla. Así siempre se ve pegado a la tarjeta,
   nunca se desalinea, y el cuerpo del modal (.modal-body /
   .gest-modal-body) hace su propio scroll interno por debajo,
   sin que el encabezado tape nada. */
.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
}

/* Botón de cerrar (X): posicionado dentro del encabezado (que ya no
   se mueve porque no forma parte del área con scroll), así que no
   necesita quedar fijo respecto a la pantalla ni recalcular su
   posición a partir del ancho del modal. */
.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)
}

.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;
}

/* En el modal de Ficha Técnica, el mapa (.viewer) y el cuerpo
   (.modal-body) comparten un solo contenedor con scroll, para que el
   mapa se desplace junto con el resto del contenido en vez de quedar
   fijo junto al título como si fuera parte del encabezado. */
.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 40px;
  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;
}

/* Fila de Ficha Técnica (Edomex). El título (h5) vive DENTRO de
   .ficha-row-body, junto con el párrafo/chip que le sigue, para que la
   franja dorada (el border-left de .ficha-row-body) mida el alto de
   ambos juntos — el borde de un elemento siempre abarca toda su caja,
   así que no hace falta calcular nada a mano. La franja sí convive
   dentro del área del modal (no ocupa mucho espacio en blanco).
   El ÍCONO, en cambio, se saca del todo del flujo (position:absolute)
   y se manda -32px hacia la franja blanca del padding del modal — así
   no "vive" dentro del div con el resto del contenido, y como ya no es
   parte del flex, .ficha-row-body no se mueve ni un pixel por su
   ausencia. top:50%+translateY(-50%) lo centra según el alto real de
   .ficha-row (que es el alto de .ficha-row-body, título+párrafo). */
.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;
}

/* ===== Estatus con proyectista / licitación (modal de ficha) ===== */
.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;
}

/* ===== Datos técnicos (modal de ficha) =====
   Layout: 2 columnas separadas por línea vertical; dentro de cada
   celda, el label va arriba y el valor abajo, ocupando el ancho
   completo de su columna (no en la misma línea). En móvil colapsa
   a 1 columna, conservando el mismo patrón label-arriba/valor-abajo. */
.dt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #FBF7F9;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.dt>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--line);
  border-right: 1px dashed var(--line);
}

/* Quita el borde derecho a la última columna de cada fila (columnas
   pares: 2, 4, 6...) para que no quede una línea doble junto al borde
   del contenedor. */
.dt>div:nth-child(2n) {
  border-right: none;
}

/* Quita el borde inferior de las últimas 2 celdas (la última fila). */
.dt>div:nth-last-child(-n+2) {
  border-bottom: none;
}

.dt>div b {
  color: var(--ink-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

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

/* ===== Render / Proyecto Ejecutivo, lado a lado ===== */
.render-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

/* Sin video: el bloque queda a una sola columna, con el Render
   centrado y de un ancho razonable (no estirado a todo el modal). */
.render-grid-solo {
  grid-template-columns: 1fr;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

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

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

.render-viewer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  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); }
}

/* Videos: se muestran en negro mientras cargan (con el spinner encima) y
   se revelan solo cuando el navegador ya tiene datos suficientes para
   reproducirlos, para que nunca se vea un frame roto o en blanco. */
.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;
}

/* Variante "natural": conserva la proporción real del video (como el de
   reconocimiento con dron, que no es 4/3), sin recortar con object-fit:
   cover. Solo mantiene el fondo negro mientras carga. */
.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;
}

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

.render-item img,
.render-item video,
.render-viewer img,
.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-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;
}

/* ===== Tarjetas de archivos (Seguimiento y Supervisión de Obra) ===== */
.pdf-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pdf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 108px;
  padding: 10px 8px 8px;
  background: var(--vino-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.pdf-card:hover {
  background: var(--vino-2);
  border-color: var(--vino-2);
  color: #fff;
  transform: translateY(-2px);
}

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

.pdf-card-icono {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}

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

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

@media (max-width: 480px) {
  .pdf-card {
    width: 92px;
    padding: 8px 6px 6px;
  }
}

#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: 22%;
}

#tblSupervision th:nth-child(3),
#tblSupervision td:nth-child(3) {
  width: auto;
}

/* ===== Leyenda de avance por color ===== */
.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 {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 8px;
  flex-shrink: 0;
}

.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);
}

/* Color de fondo (pastel): representa la dependencia/gestión */
.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);
}

/* Dependencias adicionales (puentes con datos capturados: 5 y 6) */
.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;
}

/* Color del borde derecho: representa el estatus/avance de la gestión.
   En hover, ese mismo color llena todo el botón. */
.btn-gest-estatus-rojo {
  border-right-color: var(--rojo);
  --gest-hover-bg: var(--rojo);
  --gest-hover-text: #fff;
}

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

.btn-gest-estatus-verde {
  border-right-color: var(--verde);
  --gest-hover-bg: var(--verde);
  --gest-hover-text: #fff;
}

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

/* ===== Botones de gestión dentro de Tramitología =====
   Sin borde derecho (solo color de dependencia como fondo) pero con
   un borde izquierdo de estatus (semáforo) y, para los puentes que
   aún no tienen datos capturados, en gris y sin click. */
.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: var(--rojo);
}

.btn-gest-tram.btn-gest-estatus-ambar {
  border-left-color: var(--ambar);
}

.btn-gest-tram.btn-gest-estatus-verde {
  border-left-color: var(--verde);
}

.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;
}

/* Logo de la dependencia dentro de la etiqueta de Tramitología */
.btn-gest-tram .btn-gest-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

/* ===== Semáforo de estatus dentro del modal de gestiones ===== */
.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;
}

/* Variante con ícono (Estado de México): sustituye la barra de color por
   un ícono de recursos/utils, en vez del indicador de color. */
.estatus-badge.estatus-badge--icono {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-left: none;
  padding: 3px 0;
}

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

/* ===== Ícono de Ubicación (descarga KMZ) ===== */
.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;
}

/* ===== Tabla de archivos por gestión (modal) =====
   Dos capas: .tbl-archivos-gest-wrap (estático, position:relative,
   sostiene el indicador de flecha) y .tbl-archivos-gest-scroll (el que
   de verdad hace scroll horizontal). Si el scroll fuera el mismo
   elemento que tiene position:relative, overflow-x:auto recorta
   también el eje vertical y la flecha (que vive fuera de su caja)
   desaparecería. */
.tbl-archivos-gest-wrap {
  position: relative;
}

.tbl-archivos-gest-scroll {
  overflow-x: auto;
}

.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 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);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

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

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

  /* "Etapa de contratación" ya no necesita un trato especial: las 4
     tarjetas siempre tienen el mismo ancho. */

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

  main {
    padding: 18px 14px 50px
  }

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

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

  .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 20px;
  }

  .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: wrap;
    gap: 8px;
  }

  .seg-historial-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }

  .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) {
  /* Aquí .mbody-pad baja a 16px de padding: ya no cabe el ícono en
     -32px sin salirse del modal (se recortaría contra .modal-card,
     que tiene overflow:hidden). Vuelve al flujo normal, en línea junto
     a la franja. */
  .ficha-row>.ficha-icono {
    position: static;
    transform: none;
    margin-right: 12px;
  }

  .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;
  }

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

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

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

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

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

  .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;
  }

  .seg-historial-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .seg-fotos {
    width: 100%;
  }

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

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

@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;
  }
}

/* ===== Responsivo: Modal de Gestiones ===== */
@media (max-width: 640px) {
  .modal {
    padding: 0;
    margin: 0;
  }

  .modal-card,
  .modal-card-gest,
  .modal-card1 {
    max-width: 100%;
    width: 100%;
    --modal-w: 100vw;
    min-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

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

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

  .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;
  }
}

/* ============================================================
   MODAL SEGUIMIENTO DE OBRA
   ============================================================ */

/* Avance Físico / Avance Financiero: 2 columnas en desktop, cada
   una con su texto (Programado/Real/Semanal apilados) a la
   izquierda y 1 sola gráfica a la derecha ocupando la altura
   completa de esas 3 filas. */
.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-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;
  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-larguillo {
  margin-top: 10px;
}

.seg-lg-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
  gap: 20px;
  align-items: start;
}

.seg-lg-inputs,
.seg-lg-esquema {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.seg-lg-inputs {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.seg-lg-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.seg-lg-table th,
.seg-lg-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eceef3;
  text-align: left;
  vertical-align: middle;
}

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

.seg-lg-center {
  text-align: center !important;
  transition: background-color 0.18s ease;
}

.seg-lg-center input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.seg-lg-center input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.seg-lg-check-compromiso {
  accent-color: #cf2e2e;
}

.seg-lg-check-proceso {
  accent-color: #c99600;
}

.seg-lg-check-concluida {
  accent-color: #2a9d46;
}

.seg-lg-estado-compromiso {
  background: #ffe1e1;
}

.seg-lg-estado-proceso {
  background: #fff4cc;
}

.seg-lg-estado-concluida {
  background: #dcf6e2;
}

.seg-lg-categoria-label {
  color: #4c5566;
  font-weight: 600;
  background: #fafbfe;
  min-width: 140px;
}

.seg-lg-category-start td {
  border-top: 2px solid #d9dde8;
}

.seg-lg-category-start:first-child td {
  border-top: 1px solid #eceef3;
}

.seg-lg-esquema {
  padding: 18px;
  overflow-x: hidden;
}

.seg-lg-esquema > div {
  width: min(100%, 880px);
  max-width: 100%;
  margin: 10px auto;
}

.seg-lg-parapetos {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seg-lg-cabezales,
.seg-lg-pilas {
  width: min(100%, 820px) !important;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  column-gap: clamp(16px, 3vw, 30px);
  margin-left: auto;
  margin-right: auto;
}

.seg-lg-trabes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
}

.seg-lg-lozas,
.seg-lg-guarniciones {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seg-lg-pila,
.seg-lg-cabezal,
.seg-lg-trabe,
.seg-lg-loza,
.seg-lg-guarnicion,
.seg-lg-parapeto {
  background-color: #b9bcc4;
  border: 2px solid #111;
  transition: background-color 0.18s ease;
}

.seg-lg-pila {
  clip-path: polygon(25% 0, 25% 100%, 75% 100%, 75% 0);
  width: clamp(110px, 24vw, 240px);
  height: clamp(130px, 24vw, 220px);
}

.seg-lg-cabezal {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  width: clamp(120px, 28vw, 300px);
  height: clamp(48px, 8vw, 88px);
}

.seg-lg-trabe {
  clip-path: polygon(0 0, 0 30%, 30% 30%, 30% 70%, 0 70%, 0 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0);
  width: clamp(56px, 9vw, 120px);
  height: clamp(56px, 9vw, 120px);
}

.seg-lg-loza {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  width: 94%;
  height: clamp(28px, 5vw, 66px);
}

.seg-lg-guarnicion {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  width: 100%;
  height: clamp(16px, 2.8vw, 34px);
}

.seg-lg-parapeto {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  width: clamp(22px, 5vw, 56px);
  height: clamp(54px, 12vw, 100px);
}

@media (max-width: 980px) {
  .seg-lg-layout {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
  }

  .seg-lg-inputs {
    max-width: 100%;
  }

  .seg-lg-table {
    min-width: 390px;
    font-size: 12px;
  }

  .seg-lg-esquema {
    padding: 14px;
  }
}

/* Datos principales / Habitantes: 2 columnas. */
.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-layout {
    grid-template-columns: 1fr;
  }

  .seg-lg-esquema {
    order: 1;
  }

  .seg-lg-inputs {
    order: 2;
  }

  .seg-lg-inputs {
    position: relative;
    padding-top: 24px;
    overflow-x: visible;
    max-width: 100%;
  }

  .seg-lg-esquema > div {
    width: 100%;
  }

  .seg-lg-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    font-size: 11px;
  }

  .seg-lg-table th,
  .seg-lg-table td {
    padding: 8px 6px;
  }

  .seg-lg-table th {
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
  }

  .seg-lg-table td {
    font-size: 11px;
  }

  .seg-lg-categoria-label {
    min-width: 0;
    width: 34%;
    font-size: 11px;
    line-height: 1.2;
  }

  .seg-lg-center input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }

  .seg-lg-cabezales,
  .seg-lg-pilas {
    width: min(100%, 520px) !important;
  }

  .seg-lg-trabes {
    gap: 6px;
  }

  .seg-lg-trabe {
    width: 100%;
    max-width: 88px;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .seg-lg-pila,
  .seg-lg-cabezal {
    width: 100%;
    min-width: 84px;
    max-width: 220px;
  }

  .seg-lg-pila {
    height: clamp(100px, 28vw, 160px);
    max-width: 180px;
  }

  .seg-lg-cabezal {
    height: clamp(40px, 9vw, 62px);
  }

  .seg-lg-loza {
    width: 93%;
    height: clamp(22px, 8vw, 46px);
  }

  .seg-lg-guarnicion {
    width: 100%;
    height: clamp(12px, 4vw, 24px);
  }

  .seg-lg-parapeto {
    width: clamp(18px, 7vw, 34px);
    height: clamp(40px, 14vw, 70px);
  }

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

  .seg-historial-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .seg-historial-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .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;
}

/* Fuerza de trabajo y Maquinaria: ahora van una al lado de la otra
   dentro de .seg-datos-grid (2 columnas en pc, 1 en celular). */
.seg-trabajadores-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Historial (quincenas) + Fotografías/Videos, según el boceto:
   columna angosta de quincenas a la izquierda, y a la derecha
   Fotografías arriba / Videos abajo. */
.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;
}

/* Ícono de foto de la dependencia, primera columna de la tabla de
   trámites (tramitología). Al hacer clic abre el lightbox ampliado. */
.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: imagen ampliada al hacer clic en el ícono de foto.
   Necesita quedar por encima de cualquier otro modal desde el que se
   abra (p. ej. el de Seguimiento/Avances), así que sube su z-index en
   vez de depender del orden en el DOM. */
.lightbox-modal {
  z-index: 90;
}

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

.lightbox-card {
  position: relative;
  max-width: min(90vw, 1000px);
  max-height: calc(100vh - 40px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-card #lightboxImg {
  max-width: min(90vw, 1000px);
  max-height: calc(100vh - 40px);
  border-radius: 10px;
  display: block;
  object-fit: contain;
  background: #1a0610;
}

/* Barra superior del lightbox: el "Tipo" del trámite (u otro título) a la
   izquierda y el botón de cerrar a la derecha, superpuestos sobre la
   imagen para no depender del tamaño del contenedor. */
.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;
}

/* Solo en el lightbox de fotos (Tramitología): el título ("Tipo") va
   sobre la propia foto, con el degradado de .lightbox-topbar de fondo.
   Si la foto es clara, el texto blanco se pierde; un fondo propio lo
   hace legible sin importar qué haya detrás. En el modal de PDF no hace
   falta (su barra ya tiene fondo sólido). */
#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;
}

.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 {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #1a0610;
  }

  .lightbox-card #lightboxImg {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .lightbox-topbar {
    border-radius: 0;
  }

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

/* Modal para ver PDFs embebidos (en vez de abrir una pestaña externa).
   A diferencia del lightbox de fotos, aquí la barra de título NO va
   flotando encima del contenido: el propio visor de PDF del navegador
   trae su propia barra de herramientas (zoom, descargar, imprimir...) y
   si la nuestra queda superpuesta se ven las dos chocando. Por eso el
   card es una columna: título arriba (fijo, con fondo sólido) y el PDF
   abajo ocupando el resto de la altura. */
.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 {
  /* La regla global "iframe { max-height: 480px }" (pensada para los
     mapas embebidos) le pone tope a CUALQUIER iframe del sitio; sin
     anularla aquí, el visor de PDF se queda fijo en 480px de alto sin
     importar el tamaño del modal. */
  max-height: none;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  background: #fff;
  display: block;
}

@media (max-width: 640px) {
  .pdf-modal-card {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

/* Reset: los enlaces de PDF ahora son <button> que abren el visor en
   modal, así que quitan los estilos de botón nativo del navegador. */
.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;
}

/* Videos: lista vertical, cada uno con su reproductor y descripción. */
.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;
}

/* Un poco de aire arriba cuando se llega aquí por el botón de
   "ir a" larguillo / tabla de rendimiento (scrollIntoView). */
.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: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px;
  }

  .seg-historial-item {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  .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;
  }
}

/* estilos.css — agregar después de .mbody-group:last-of-type */
.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;
}

/* ===== Responsivo: modal de Seguimiento de obra ===== */

/* ===== Modal Chat Seguimiento ===== */
.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);
}

/* Botón "Chat de seguimiento": antes era solo una imagen circular con
   un glow al hover, poco intuitivo como elemento clicable. Ahora es
   una píldora con ícono + texto + flecha, igual de clara que el
   botón "Inicio", y vive en su propia fila (no compite por espacio
   con "Corte al..." / "Inicio"). */
.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;
  }
}

/* Botón "Chat de seguimiento" dentro de la tarjeta de Inversión total
   del Tablero ejecutivo: pensado para caber en el ancho de la tarjeta,
   con el ícono centrado junto al texto. */
.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;
}

/* ===== Dashboard layout KPI top ===== */
.dash-kpi-top {
  display: grid;
  grid-template-columns: 33.3fr 33.3fr 33.3fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin-bottom: 18px;
}

/* Inversión: ocupa las 2 filas de la col 1 */
.dash-kpi-inv {
  grid-column: 1;
  grid-row: 1 / 3;
  text-align: center;
}

/* Estatus: ocupa las 2 filas de la col 3 */
.dash-kpi-right {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: 14px 16px;
  overflow: hidden;
  width: auto;
}
/* Vacío: col 2, fila 2 */
.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;
}