:root {
  --ink: #3B0A20;
  --ink-2: #5E2238;
  --muted: #6B5560;
  --bg: #F2EEF0;
  --surface: #FFFFFF;
  --line: #E2D8DD;
  --vino: #691B3C;
  --vino-2: #9D2449;
  --vino-soft: #F4E4EA;
  --oro: #A87C36;
  --oro-soft: #F4ECDB;
  --verde: #1F7A52;
  --verde-soft: #E2F1EA;
  /* Solo para encabezados de la tabla de Parámetros de Diseño (portadas del
     prototipo de Colima) — tonos distintos a --ink/--verde para diferenciar
     "eje" de "rama" en la tabla sin depender de --vino/--oro (ya usados ahí
     también, ver .pd-th-vino/.pd-th-oro). */
  --pd-gris: #55585C;
  --pd-verde: #1E5C46;
  --ambar: #C77D00;
  --ambar-soft: #FBEFD8;
  /* Semáforo de 5 colores de gestiones/permisos (Tramitología, 2026-08-23):
     rojo=Sin trámite, ambar=Por tramitar/En proceso, amarillo=En trámite/
     Ingresado (escalón siguiente, ya con folio/oficio abierto), verde=Liberado.
     --amarillo empezó en un dorado oscuro (#B08900) para que el texto blanco
     encima se leyera bien, pero terminó casi idéntico a --ambar en los
     puntos de la leyenda (bug real reportado por el usuario) — ahora es un
     amarillo de verdad (mismo hex que el prototipo original), y donde hace
     falta texto encima se usa --amarillo-text (oscuro) en vez de blanco. */
  --amarillo: #F5C518;
  --amarillo-text: #3B0A20;
  --amarillo-soft: #FBF3D8;
  --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);
  --vino-zebra-notable: #F7EBF0;
  --vino-zebra-fuerte: #F0D9E3;
  --vino-zebra-hover: #E3B8CB;
}

* {
  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;
  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: 17px;
  height: 17px;
  object-fit: contain;
  flex: none;
}

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

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

main {
  width: 100%;
  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
}

/* Icono de casa junto a los títulos de sección (reemplaza el antiguo
   botón "Inicio" que vivía en header-right-group) — mismo look de botón
   que tenía antes (fondo vino, borde oro), solo que ahora es un botón
   circular con únicamente el ícono, pegado al título. */
.home-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--vino);
  border: 1.5px solid var(--oro);
  border-radius: 8px;
  padding: 6px;
  margin-right: 8px;
  vertical-align: -8px;
  transition: all .15s;
}

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

/* Botón "Compartir" (2026-09-26, portado del prototipo node-Express) — vive
   junto al <h2> de cada .view-head, justo después del título, mismo look
   que .home-icon-link (círculo vino+oro) para que se vea como un par. La
   lógica (compartirSeccionActual/mostrarToastCompartir/copiarEnlaceCompartir)
   vive en header.ejs, global — cualquier sección puede usar este botón. */
.share-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--vino);
  border: 1.5px solid var(--oro);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  vertical-align: -8px;
  transition: all .15s;
}

.share-icon-btn:hover {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--vino);
}

/* "Corte al" queda como texto plano fuera del botón; SOLO la fecha (con
   quien puede editarla) se ve como botón, con el lápiz de edición como
   badge circular superpuesto en la esquina superior derecha. */
.corte-static-label {
  font-size: 13px;
  color: var(--vino);
  margin-right: 6px;
}

.corte-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1.5px solid var(--vino);
  border-radius: 8px;
  padding: 7px 14px;
  color: #000;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}

.corte-btn:hover {
  background: var(--vino);
  color: #fff;
}

.corte-btn-pencil {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--oro);
  color: var(--vino);
  border-radius: 50%;
  font-size: 10px;
  border: 1.5px solid #fff;
}

.corte-btn-pencil img {
  width: 10px;
  height: 10px;
  display: block;
  object-fit: contain;
}

@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 con la fecha) — antes se ponía position:absolute
     en la esquina superior derecha del encabezado, con .view-head
     reservando 90px de padding para no taparlo. Bug real reportado por
     el usuario (2026-09-21): 90px alcanza para un texto corto, pero con
     un título largo ("Tramitología y gestiones requeridas", "Seguimiento
     y Supervisión de Obra"...) en pantallas angostas, el título ocupa
     ancho de sobra y el bloque de fecha (absoluto, fuera del flujo) le
     queda ENCIMA en vez de a un lado o debajo — texto sobrepuesto e
     ilegible. `.view-head` ya es flex con flex-wrap:wrap (ver arriba) —
     basta con dejar que `.header-right-group` participe del flujo normal
     (columna, alineado a la derecha) para que el wrap lo baje solo debajo
     del título cuando no cabe al lado, sin necesitar reservar un padding
     fijo que nunca acierta para todos los títulos. */
  .header-right-group {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .periodo {
    font-size: 10.5px;
  }

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

  .corte-btn {
    padding: 5px 10px;
    font-size: 10.5px;
    gap: 4px;
  }

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

/* overscroll-behavior-x:contain evita el bug de iOS Safari donde, al
   llegar al límite de un contenedor con scroll horizontal, el gesto
   "encadena" hacia la página completa (permite seguir arrastrando más
   allá del final/inicio de la tabla, dejando ver el fondo detrás).
   Android/Chrome ya bloquea esto por defecto; iOS no, sin esta regla. */
.tbl-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* ===== Cabeceras de tabla fijas — clon en position:fixed, sincronizado
   por JS (2026-09-21, portado del prototipo node-Express/public/colima.html,
   que el usuario confirmó que ahí sí funciona bien y de forma responsiva).
   Reemplaza el intento anterior de "100% CSS, sin JS" (max-height +
   position:sticky, limitado a tablas dentro de modal) — se probó y
   funcionaba, pero el usuario pidió cabecera pegada contra el scroll de
   la PÁGINA/MODAL real, sin que la tabla tuviera su propia caja de scroll
   interno, y position:sticky puro no puede lograr eso en una tabla con
   overflow-x:auto (ver historial de commits de este mismo día si hace
   falta el detalle de por qué). La lógica completa (medir/clonar/mostrar-
   ocultar el clon) vive en JS — ver /js/flechas-tactiles.js,
   `inicializarCabecerasFijas`/`actualizarCabecerasFijas`. Aquí solo el
   estilo del clon: mismo z-index alto que en el prototipo (por encima de
   cualquier contenido normal, incluido el overlay de SU propio modal),
   pointer-events:none (es solo visual, los clics deben pasar a través
   hacia lo que esté debajo) y visibility:hidden por default (el JS lo
   vuelve visible solo mientras la tabla real está cruzando el offset de
   "pegado").
   `position:fixed` aquí en la base — no solo cuando `actualizarCabecerasFijas()`
   lo activa por JS — es CRÍTICO: el JS solo pone `position:fixed` dentro
   del bloque `if (activo)`, así que en cualquier momento en que el clon
   NO esté activo (la mayoría del tiempo — recién creado, tabla fuera de
   vista, etc.) se queda con el `position` default (`static`), ocupando
   espacio real en el flujo normal del documento — y como
   `inicializarCabecerasFijas()` los cuelga de `document.body`, quedaban
   apilados uno tras otro justo DESPUÉS del `<footer>`, sumando cientos de
   píxeles de espacio en blanco al fondo de cualquier página con tablas
   largas (bug real reportado por el usuario 2026-09-22, con captura:
   "queda espacio en blanco cada que termino de scrollear" — verificado
   con Playwright, 7 clones de `.tbl-cabecera-fija-clon` sumaban ~420px
   extra al `document.body.scrollHeight`, todos apilados después del
   footer). `visibility:hidden` sola no basta para sacarlo del flujo. */
.tbl-cabecera-fija-clon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  pointer-events: none;
  visibility: hidden;
}

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

/* ===== Cabeceras fijas de tablas DENTRO de un modal — 100% CSS, sin JS
   (2026-09-24, pedido explícito del usuario: "TODAS LAS TABLAS que estén
   dentro de un MODAL", con el diseño de sticky-column-table.com como
   referencia). Distinto del sistema de clon de arriba (que sigue
   viviendo para tablas de PÁGINA COMPLETA) — aquí cada tabla gana su
   propia caja de scroll acotada a `75vh` ("el alto que ocupe el 75% del
   alto de la ventana"), con `position:sticky` real en el `<thead>`. Esto
   SÍ funciona sin trucos (a diferencia de intentarlo a nivel de página,
   donde el `<header>` de la app se interpone): el ancestro de scroll real
   de una tabla en un modal siempre puede ser la caja acotada misma, sin
   ningún elemento `position:sticky` externo tapándola.
   `.tbl-archivos-gest-scroll`/`.seg-rend-scroll` SIEMPRE viven dentro de
   un modal (Gestiones, Rendimiento), así que no hace falta el prefijo
   `.modal`; `.tbl-scroll` SÍ se usa también en tablas de página completa
   (Avance de Obra, Supervisión...), así que ahí el prefijo `.modal` es lo
   que distingue "esta instancia específica sí vive en un modal" de las
   que no. */
.modal .tbl-scroll,
.tbl-archivos-gest-scroll,
.seg-rend-scroll {
  max-height: 75vh;
  overflow-y: auto;
}

/* Supercabecera de nivel (Alta/Media/Baja) de las tablas de "Prioridad"
   (2026-09-30, portado de node-Express): se fija justo debajo de la
   cabecera de columnas — `--prio-header-h` se calcula en JS con el alto
   real del <thead> (ver prioAjustarAltoCabecera en tramitologia.ejs/
   prioridad-permisos.ejs), porque son dos elementos sticky independientes
   apilados, no uno solo. Sin prefijo `.modal` a propósito: también aplica
   dentro de `prioridad-permisos.ejs`, que es standalone (no vive en un
   `.modal`) pero reusa la misma clase `.tbl-scroll`. */
.tbl-scroll .prio-grupo-row td {
  position: sticky;
  top: var(--prio-header-h, 34px);
  z-index: 2;
}

.modal .tbl-scroll thead th,
.tbl-archivos-gest-scroll thead th,
.seg-rend-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  /* Cabeceras que se desbordaban en columnas angostas (2026-09-24, pedido
     explícito del usuario) — el `th` base de la app es 11px MAYÚSCULAS +
     letter-spacing, que en una columna de 80-100px con 2 palabras
     ("FECHA DE ATENCIÓN"/"COMENTARIOS") se salía de su celda. Bajado a
     9.5px + `white-space:normal` (para que sí se recorra a la siguiente
     línea en vez de desbordar) + `word-break:break-word` (por si alguna
     palabra sola sigue sin caber ni partiendo por espacios). */
  font-size: 9.5px;
  white-space: normal;
  word-break: break-word;
}

/* Tabla con thead de 2 filas (grupo de columnas arriba + sub-columnas
   abajo, vía rowspan/colspan) DENTRO de un modal: la 2da fila necesita su
   propio `top` (el alto real de la 1ra fila) para no quedar pegada
   encima de ella — con `top:0` en las dos, la 2da se pinta ENCIMA de la
   1ra en vez de justo debajo. Valor medido contra el contenido real
   (texto fijo, no cambia con los datos) — si el texto de esa cabecera
   cambia alguna vez de forma que crezca a más líneas, remedir y ajustar
   aquí. Rendimiento: lectura y edición son 2 <table> DISTINTAS (ver
   avance-detalle.ejs) con alto de fila 1 distinto — en lectura la fila 1
   es solo texto ("Período: ..."); en edición trae un <input> + su
   contador de caracteres (más alta). */
.seg-rend-table thead tr:nth-child(2) th {
  top: 38px;
}

.seg-rend-table-edit thead tr:nth-child(2) th {
  top: 50px;
}

/* ===== Flechas táctiles de scroll horizontal =====
   Botones reales (no solo un hint) para desplazar tablas anchas en
   móvil. Se inyectan por JS (ver /js/flechas-tactiles.js) 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 (max-width: 860px) {
  .tbl-wrap {
    margin-top: 50px;
  }
}

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

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
}

/* Separador vertical entre columnas — en TODAS las tablas del sitio (pedido
   explícito del usuario, 2026-08-24), no solo entre límites de grupo como
   al principio (ver .col-divisor más abajo, que queda igual de ancho para
   no generar 2 estilos de borde distintos mezclados). "Datos Técnicos" no
   necesita exclusión aparte: no es una tabla real (es un grid .dt-flat/
   .dt-form en ficha-tecnica.ejs), así que estos selectores de table th/td
   ni le aplican. :not(:last-child) evita un borde colgado en el borde
   derecho de la tabla.
   `box-shadow` en vez de `border-right` en los `th` (2026-09-21, bug real
   reportado por el usuario tras pasar las cabeceras a `position:sticky`
   puro): `border-collapse:collapse` no pinta bien los bordes de una celda
   que es `position:sticky` — es una incompatibilidad real del navegador
   (el modelo de bordes colapsados no contempla celdas fuera del flujo
   normal), así que los separadores entre columnas del encabezado
   desaparecían en cuanto la cabecera se volvía sticky. `box-shadow`
   (inset, simula el mismo borde de 2px) no depende de border-collapse y
   se pinta igual de bien esté o no la celda sticky — los `td` normales
   (nunca sticky) se quedan con `border-right` de siempre, sin cambio. */
th:not(:last-child) {
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.25);
}

td:not(:last-child) {
  border-right: 2px solid rgba(105, 27, 60, 0.35);
}

tbody tr:hover td {
  background: #FBF7F9
}

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

/* 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)
}

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

/* Columna "Inicio / Termino" de tblObraFin (avance-obra.ejs), portado de
   node-Express: letra más chica que el resto de la tabla + fecha en 2
   líneas fijas (<br> entre inicio y término en el EJS, no un solo string
   "01-ene-26-31-jul-27" con guiones que el navegador puede o no partir
   solo) — con esto la columna ocupa un ancho angosto y predecible en vez
   de forzar overflow-x en .tbl-scroll con estados que tienen muchas
   columnas (Monto Convenio, chat, etc.). white-space:normal (nowrap NO
   aplica aquí, ver `td` base) queda explícito por si algún ancestro lo
   cambia. */
.fecha-obra {
  font-size: 10px;
  line-height: 1.5;
  white-space: normal !important;
}

/* El "Inicio / Termino" del encabezado (3ra columna, 1ra fila de
   tblObraFin) es texto largo dentro de un <th> — y los <th> del sitio son
   white-space:nowrap por default (ver regla base de `th` más arriba), así
   que ese texto por sí solo forzaba la columna más ancha de lo que la
   fecha de abajo (ya angosta gracias a `.fecha-obra`) necesita. Portado
   del mismo fix de node-Express (commit "desborde de la tabla en edomex
   arreglado") junto con el `<colgroup>` de anchos fijos en el EJS. */
#tblObraFin thead tr:first-child th:nth-child(3) {
  white-space: normal;
}

/* Cabeceras de las 2 tablas maestras de Avance de Obra más chicas (9.5px,
   el `th` base del sitio es 11px) — pedido explícito del usuario
   2026-08-30, para que con las columnas nuevas (Monto Convenio, etc.) la
   tabla siga cabiendo sin activar el scroll horizontal de .tbl-scroll.
   Escopado a estas 2 tablas nada más, no es un cambio global de `th`. */
#tblObraFin th, #tblObraFis th {
  font-size: 9.5px;
}

.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;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 7px;
  display: block;
  /* Antes: height:26px fijo + overflow:hidden + white-space:nowrap +
     text-overflow:ellipsis, con display:grid/place-items:center. Un badge
     con año+etapa completos ("2026 · 1ra Etapa") que no cabía en una sola
     línea se recortaba CENTRADO (parejo en ambos extremos) en vez de
     mostrar "…" al final — se veía solo "2026", la etapa desaparecía por
     completo en pc (mismo bug que ya se había resuelto para móvil más
     abajo, ver docs/pendientes.md #12). Un min-height solo (sin tocar
     overflow/white-space/grid) NO alcanza — el recorte lo causa
     overflow:hidden + nowrap, no la altura. display:block + text-align
     (en vez de flex) deja que el texto envuelva como texto normal, por
     palabra — con flex-wrap el separador " · " podía quedar huérfano al
     inicio de la 2a línea (mismo bug que ya obligó a ocultarlo a mano en
     el bloque mobile de abajo). */
  max-width: calc(100% - 54px);
  overflow: visible;
  white-space: normal;
  text-align: center;
  line-height: 1.3
}

/* Parte "chica" del badge (la etapa, ej. "1ra Etapa") — el año es lo
   prominente, la etapa queda como dato secundario más pequeño y menos
   opaco, en la misma línea. */
.card .badge .badge-chico {
  font-weight: 600;
  font-size: 9.5px;
  opacity: .82;
}

.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: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  background-color: #3B0A21;
  width: calc(100% + 28px);
  height: 65px;
  margin: auto -14px -12px -14px;
  padding: 8px 14px;
  font-size: 11px;
  line-height: 1.35;
  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 {
  /* 2026-09-09: 1200px es el tope de ancho para TODOS los modales de la
     app (pedido explícito del usuario) — así ninguna tabla dentro de un
     modal se queda apretada contra un ancho menor. Los modales que ya
     tenían su propio override a 1200px (.modal-card-gest/-permisos,
     .modal-card1) se quedan igual, sin cambio; los que necesitan MENOS
     de 1200 (ej. chat) declaran su propio override más chico, ver
     .modal-card-chat más abajo. */
  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);
}

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

/* Modal de Avance de Obra — ancho AUTOMÁTICO en vez del 1200px fijo de
   `.modal-card` (2026-09-22, pedido explícito del usuario: "que ocupe la
   anchura automática, después vemos cómo acomodamos las cosas" — ajuste
   exploratorio, el layout interno se sigue afinando). `width:auto` deja
   que el contenido (gráfica/tablas internas) decida el ancho real en vez
   de estirarse siempre a 1200px; `max-width:96vw` es solo la red de
   seguridad para no tocar los bordes de la pantalla. */
#modalAvance .modal-card {
  width: auto;
  max-width: 96vw;
}

/* 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 img {
  width: 19px;
  height: 19px;
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

.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;
  /* Refuerzo (2026-09-22, pedido explícito del usuario) al lock de scroll
     que ya pone `document.body.style.overflow='hidden'` al abrir cualquier
     modal — ese lock se puede quedar corto en un caso real: modales
     anidados (ej. Papelera sobre Avance) donde cerrar el de encima
     restaura `overflow=''` sin fijarse si OTRO modal seguía abierto debajo.
     `overscroll-behavior:contain` es una red de seguridad aparte, a nivel
     CSS puro: evita que el scroll dentro de este panel se "encadene" hacia
     la página de fondo al llegar al principio/final del contenido, pase lo
     que pase con el lock de JS. Mismo criterio ya usado en la app para
     scroll horizontal de tablas (`overscroll-behavior-x:contain`). */
  overscroll-behavior: contain;
}

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

/* Modo edición inline del tablero ejecutivo ("⚙ Configurar tablero" ya no
   abre un modal — cada widget recibe una barra con ▲/▼ para moverlo, con
   el ícono 👁 en medio para ocultarlo/mostrarlo).
   .tablero-widget = cada bloque configurable; .tablero-widgets-grupo =
   contenedor flex que agrupa a los que sí se pueden reordenar entre sí
   (el global, y cada bloque de etapa por separado). */
.tablero-config-modo .tablero-widget {
  position: relative;
  transition: opacity .15s;
  border-radius: 10px;
}

/* Widget marcado como oculto: NO desaparece mientras se está configurando
   (display:none se quita en _tcActivar) — se ve difuminado para poder
   reordenarlo o reactivarlo, y solo vuelve a display:none al salir del
   modo edición o recargar. */
.tablero-widget.tablero-widget-oculto-preview {
  opacity: .35;
  filter: saturate(.4);
}

.tc-widget-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.tc-widget-bar button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: var(--vino);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.tc-widget-bar button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Barra de encabezado para reordenar una SECCIÓN completa (global / 1ra
   etapa / 2da etapa) entre sí — solo aparece cuando hay más de una
   sección en la página (ver _tcAgregarBarraGrupo). Los botones ▲/▼ de
   adentro reusan el mismo estilo que .tc-widget-bar button. */
.tc-grupo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(105, 27, 60, .08);
  border: 1px dashed var(--vino);
}

.tc-grupo-titulo {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vino);
}

.tc-grupo-bar button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  background: var(--vino);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.tc-grupo-bar button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* 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;
  background: var(--surface);
}

/* .render-grid-pad comparte el mismo padding horizontal que .mbody-pad
   a propósito, en TODOS los breakpoints (selector combinado para que no
   se puedan volver a desalinear como pasaba antes: .render-grid-pad
   tenía la MITAD del padding de .mbody-pad en las 4 definiciones —
   80/40, 32/20, 32/20, 16/12 — así que Render/Render Video/Estudio de
   Tránsito se veían más anchos que el resto del contenido de la ficha,
   en vez de alinearse con el mismo margen). */
.mbody-pad,
.render-grid-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 {
  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 -45px 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;
}

/* Títulos con ícono + franja dorada en "Avance de Obra" (.msegbody-pad),
   portado del prototipo original — .blk h5 ya trae el display:flex/gap
   necesario, aquí solo van el tamaño del ícono y la franja del texto. */
.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.seg-title-center {
  justify-content: center;
}

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

/* ===== 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);
  overflow-wrap: break-word;
}

.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;
  overflow-wrap: break-word;
}

/* ===== Variante "1 campo por fila" de Datos Técnicos (diseño final del
   prototipo) — modificador aparte, no toca .dt a secas, porque esa misma
   clase la reusa .dt-form (formulario "Agregar obra") con su propia
   estructura de 2 campos por fila; cambiar .dt directo lo hubiera roto.
   Lista plana de <div> alternados etiqueta/valor (en vez de un <div> con
   <b>+<span> adentro por campo) — nth-child(odd)/(even) los distingue sin
   necesitar una clase por celda. La columna de etiquetas se ajusta a su
   contenido (la más larga, "Longitud de Estructura / No. Claros"), dejando
   el resto del ancho para el valor. */
.dt.dt-flat {
  grid-template-columns: auto 1fr;
}

/* Filas de campos vacíos: ocultas por default (portado del prototipo, que
   directamente no las genera) — pero acá SÍ se generan (solo para quien
   puede editar), ocultas nomás, para poder revelarlas al entrar a modo
   edición y capturar el dato por primera vez (ver fxEditar/fxCancelar en
   ficha-tecnica.ejs, togglean la clase dt-mostrar-vacias en #fx-dt). */
.dt.dt-flat .dt-vacia {
  display: none;
}

#fx-dt.dt-mostrar-vacias .dt-vacia {
  display: flex;
}

.dt.dt-flat>div {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0;
  padding: 10px 16px;
  border-right: none;
}

.dt.dt-flat>div:nth-child(2n) {
  border-right: none;
}

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

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

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

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

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

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

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

/* ===== Formulario "Agregar obra" con el mismo formato visual que la ficha
   técnica: reusa .dt (grid label/valor) y .dt-estatus, pero con inputs reales
   en vez de texto de solo lectura — se pintan "planos" para que se vean
   igual que el valor de una ficha ya guardada. ===== */
.dt-form>div input,
.dt-form>div select,
.dt-form>div textarea {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  border: none;
  background: transparent;
  width: 100%;
  padding: 0;
  outline: none;
}

.dt-form>div textarea {
  font-weight: 400;
  font-size: 13px;
  resize: vertical;
  min-height: 40px;
}

.dt-form>div input:focus,
.dt-form>div select:focus,
.dt-form>div textarea:focus {
  color: var(--vino);
}

.dt-estatus-info input {
  font-size: 13px;
  color: var(--ink);
  border: none;
  border-bottom: 1px dashed var(--line);
  background: transparent;
  padding: 1px 0;
  outline: none;
}

.dt-estatus-info input:focus {
  border-bottom-color: var(--vino);
}

.no-select-estatus {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

.no-archivos label {
  display: block;
  margin: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--vino);
}

.no-archivos input[type="file"] {
  display: block;
  margin-top: 4px;
}

/* ===== Render / Proyecto Ejecutivo, lado a lado ===== */
/* Cada .render-item (Render/Estudio de Tránsito/Render Video) ocupa su
   propia fila completa, uno debajo del otro — mismo criterio que
   "Reconocimiento con Dron" (.render-itemRec, ya de 1 sola columna) y el
   diseño final del prototipo. Antes era grid de 2 columnas lado a lado. */
.render-grid {
  display: grid;
  grid-template-columns: 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). */
/* Ya no hace nada distinto de .render-grid (ambas a 1fr) — se deja la
   clase para no tocar la lógica de ficha-tecnica.ejs que la alterna según
   tieneTransito, mismo criterio que el prototipo (que también la dejó como
   no-op tras pasar a 1 columna). */
.render-grid-solo {
  grid-template-columns: 1fr;
}

/* Franja dorada continua por tarjeta (título+ícono+imagen/video), igual
   criterio que .ficha-row-body con "Datos técnicos" — position:relative
   porque es el ancla del ícono absoluto de Render/Estudio de Tránsito/Video
   Render (ver .render-item>.ficha-icono más abajo). */
.render-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 3px solid var(--oro);
  padding-left: 8px;
}

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

/* Variante "altura fija": para Estudio de Tránsito y Render Video. En vez
   de recortar el video para llenar un aspect-ratio 4/3 fijo (object-fit:
   cover), usa el mismo aspect-ratio 16/9 que la imagen de "Render"
   (.render-item img) — como ambos comparten el mismo ancho de columna,
   les queda la misma altura exacta sin necesidad de un valor en px, y
   el video se ve completo, sin recortar (object-fit: contain, con
   barras negras arriba/abajo si su proporción real no es 16:9).
   Selector calificado con 2 clases a propósito: así le gana en
   especificidad a ".render-item video" (la regla 4:3/cover de los
   videos normales) sin importar el orden en el archivo. */
.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 {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  text-align: left;
}

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

/* Mismo -45px/centrado vertical que .ficha-row>.ficha-icono (Problemática/
   Solución más arriba en esta misma ficha) — el ícono de Render/Estudio de
   Tránsito/Video Render vive fuera del flujo, en el margen que ya reserva
   .render-grid-pad (mismo padding que .mbody-pad, ver esa regla), centrado
   según el alto de TODA la tarjeta (título+imagen/video). Repite tamaño/
   object-fit de .ficha-icono
   (no solo la posición): ".render-item img" (la regla de la imagen/video
   grande, width:100%) tiene más especificidad que ".ficha-icono" sola (1
   clase+1 elemento vs. 1 clase) y sin repetirlo acá ese ícono de 40x40 se
   estiraría al ancho completo de la tarjeta — selector de 2 clases
   (.render-item>.ficha-icono) para ganarle, portado 1:1 del prototipo. */
.render-item>.ficha-icono {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  aspect-ratio: auto;
  object-fit: contain;
}

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

/* Los renders son imágenes 1600x900 (16:9) — con 4:3 (como los videos) se
   ven recortadas y más altas de lo real (mismo fix que trae el prototipo
   original). Los videos SÍ se quedan en 4:3, no se tocan. */
.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-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-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;
}

/* Botón "solo ícono" para abrir la lista de PDFs de un puente (Proyecto
   Ejecutivo — columna "Plano", 2026-09-09, pedido explícito del usuario:
   antes se veía un botón por PDF con su nombre completo, ahora es un solo
   ícono que abre un modal con la lista, sea 1 o varios archivos). */
.pdf-link-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--vino-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.pdf-link-icono:hover {
  background: var(--vino-2);
}
.pdf-link-icono:hover img {
  filter: brightness(0) invert(1);
}

/* ===== Tarjetas de archivos (Seguimiento y Supervisión de Obra) =====
   Rediseñado 2026-08-24 para calcar node-Express/public/estilos.css
   (.pdf-card): borde de 2px + sombra + tarjeta más chica (84px, antes
   108px) — el prototipo SÍ tenía este diseño terminado, a diferencia del
   resto de "Antecedentes de Validación" (esa parte era marcado sin JS que
   la implementara, así que sí es diseño nuevo). El ícono sigue siendo el
   emoji 📄 (el proyecto no trae un archivo de ícono de PDF en /utils/, el
   prototipo usa un <img>) pero al tamaño del prototipo (18px). */
.pdf-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.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: 21px;
  height: 21px;
  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;
  }
}

/* ===== Tabla de Supervisión: "Antecedentes de Validación" angosta (270px
   fijos — el usuario pidió menos ancho, ahí solo caben 2-3 tarjetas) y
   "Archivos de Seguimiento" con el resto — portado íntegro de
   node-Express/public/estilos.css, que ya traía este problema resuelto.
   Las reglas VIEJAS por nth-child (ver historial) se quitaron: desde que
   el encabezado "Archivos" se partió en 2 con colspan/rowspan, la fila 2
   del thead solo tiene 2 celdas (posiciones 1-2 DENTRO de esa fila)
   mientras que el tbody tiene 4-5 — nth-child ya no cae parejo entre
   encabezado y cuerpo, así que el ancho de esas columnas se controla por
   clase (.col-antecedentes/.col-archivos-seg), no por posición. Esa
   discordancia era la causa real de que la cabecera se viera descuadrada
   y de que la columna "+PDF" desapareciera (table-layout:fixed sin ancho
   para esa columna la colapsaba a 0). */
#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%;
  /* Los "th" del sitio son white-space:nowrap por default — "Puente /
     Municipio" no cabe en ese 15% y se salía por encima de las columnas
     vecinas. Con normal + wrap, si no cabe en una línea se parte en dos. */
  white-space: normal;
  overflow-wrap: break-word;
}

/* Cabecera de Supervisión: el texto parte línea en vez de desbordarse al
   angostar la ventana (2026-10-05). Va por CLASE (.tbl-supervision) y no por
   id porque el clon de cabecera fija (flechas-tactiles.js) copia la clase de
   la tabla pero NO su id — con "#tblSupervision" el clon seguía en nowrap. */
.tbl-supervision thead th {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
@media (max-width: 860px) {
  .tbl-supervision thead th {
    font-size: 9.5px;
    letter-spacing: .2px;
    padding: 8px 6px;
  }
}

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

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

/* padding-top/right: el botón ✕ de cada tarjeta (position:absolute,
   top:-6px;right:-6px, ver supervision.ejs) sobresale un poco del borde de
   su tarjeta a propósito (mismo patrón que el resto de galerías con ✕) —
   pero "overflow-x:auto" fuerza aquí a que "overflow-y" deje de ser
   "visible" (regla real del spec de CSS: no se puede tener un eje auto/
   scroll y el otro visible, el navegador lo sube a auto solo), así que sin
   este padding esa ✕ se recortaba contra el borde del contenedor (bug
   real reportado 2026-08-28, solo pasaba aquí porque es la ÚNICA tabla
   de la app que mete un scroll horizontal DENTRO de la celda). */
#tblSupervision td.col-archivos-seg .pdf-cards,
#tblSupervision td.col-antecedentes .pdf-cards {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 8px 8px 4px 2px;
  margin: -8px -8px 0 -2px;
}

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

/* Columna del botón "+ PDF" — ancho fijo explícito, sin esto colapsaba a 0
   bajo table-layout:fixed (ver comentario arriba). */
#tblSupervision .col-agregar-pdf {
  width: 90px;
}

/* class="col-divisor" nació aquí ("Antecedentes de Validación"/"Archivos de
   Seguimiento") para marcar un límite de grupo puntual, pero desde
   2026-08-24 el separador ya es la regla base de CUALQUIER columna en
   CUALQUIER tabla (ver th/td:not(:last-child) cerca de la definición
   global de <table>) — así que ya no hace falta una regla aparte para esta
   clase, el borde le llega igual sin ella. Los usos de class="col-divisor"
   que quedan en el HTML (avance-obra.ejs, supervision.ejs) son inofensivos,
   no hace falta quitarlos.

   En celular, "Antecedentes de Validación" ya no necesita los 270px fijos
   de escritorio: se angosta al ancho de ~2 tarjetas (lo típico ahí), en
   vez de dejar un hueco vacío grande cuando dice "Sin archivos". */
@media (max-width: 640px) {
  #tblSupervision .col-antecedentes {
    width: 200px;
  }
}

/* ===== 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;
  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);
}

/* Disco de color con el ícono de la "familia geométrica" adentro, para la
   leyenda de 5 colores (Estatus de trámite/permiso) — el color exacto
   llega inline (ver _gestDotIconoHtml() en gestiones-modal.ejs y su
   equivalente en tramitologia.ejs); "No aplica" (blanco) necesita borde
   propio para no perderse sobre fondo blanco. */
.estatus-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 8px;
}

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

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

.btn-gest-cat-inah {
  --gest-bg: #F5E6D3;
  --gest-text: var(--ink);
  --gest-hover-bg: #C88A4C;
  --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;
}

/* Escalón amarillo (En trámite/Ingresado) del semáforo de 5 colores —
   agregado 2026-08-23 junto con gestiones_obra.estatus ampliado. */
.btn-gest-estatus-amarillo {
  border-right-color: var(--amarillo);
  --gest-hover-bg: var(--amarillo);
  --gest-hover-text: var(--amarillo-text);
}

/* ===== 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-estatus-amarillo {
  border-left-color: var(--amarillo);
}

/* Chip de dependencia mientras se arrastra (Ordenamiento de dependencias,
   2026-08-23, ver tramitologia.ejs) — genérico, reusa la clase .dragging
   que ya usa larguillo-editor.ejs para sus tarjetas de categoría. */
.btn-gest-item.dragging {
  opacity: .4;
}

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

/* Logo de la dependencia dentro de la etiqueta de gestión (tramitología,
   ficha técnica, tablero ejecutivo) — sin esto el <img> se muestra a su
   tamaño nativo (grande) en vez de ajustarse a la altura del chip. */
.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 ===== */
/* El indicador de color (borde izquierdo) se reemplazó primero por un
   ícono raster (icono_sin_tramite/icono_en_tramite/icono_liberado.png,
   incompleto: sin ícono propio para "Por tramitar"/"Ingresado") y ahora
   por la librería SVG "familia geométrica" (2026-08-25, portada de
   colima/edomex/guerrero.html vía gestiones-modal.ejs: ic-x/ic-clock/
   ic-send/ic-check/ic-ban) — ver _gestIconoEstatusSvg() en
   gestiones-modal.ejs. .estatus-badge--icono es la variante nueva (ícono
   SVG, coloreado vía currentColor según .estatus-<clase>); .estatus-icono
   (ícono <img> suelto) se conserva para cualquier resto que no haya
   migrado a la variante --icono. */
.estatus-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 0;
}

.estatus-icono {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  flex: none;
}

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

.estatus-badge.estatus-badge--icono {
  gap: 6px;
}

.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-amarillo .estatus-badge-icon { color: var(--amarillo); }
.estatus-badge--icono.estatus-verde .estatus-badge-icon { color: var(--verde); }
.estatus-badge--icono.estatus-gris .estatus-badge-icon { color: #9AA0A6; }

/* ===== Ícono de Ubicación (descarga KMZ) ===== */
.descargar-kmz {
  font-size: 10.5px;
  color: var(--muted)
}

.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 inyectado por flechas-tactiles.js) y
   .tbl-archivos-gest-scroll (el que de verdad hace scroll horizontal). Si
   el scroll fuera el mismo elemento con 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;
  overscroll-behavior-x: contain;
}

.tbl-archivos-gest {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  /* table-layout:fixed (2026-09-21, junto con el ensanchado de columnas en
     celular más abajo) — con table-layout:auto (el default), un ancho de
     columna declarado por CSS es solo una PREFERENCIA que el navegador
     reparte proporcionalmente contra min-width de la tabla, no un valor
     fijo real: con la tabla vacía/con poco texto, terminaba encogiendo TODAS
     las columnas para caber en los 640px de min-width, ignorando por
     completo los anchos ensanchados de celular de abajo. Con `fixed`, cada
     columna respeta su ancho declarado tal cual (tomado de la primera fila),
     sin importar cuánto contenido tenga. */
  table-layout: fixed;
}

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

/* Separador de año entre bloques de una tabla (dropdowns globales de Tablero
   Ejecutivo: Proyecto Ejecutivo / Permisos Ambientales / Obras Inducidas) —
   marca en qué año real caen las filas que siguen, cuando el estado tiene
   más de un año real presente (ver tablero-ejecutivo.ejs: filasPorAnio). */
.tabla-separador-anio td {
  background: var(--oro);
  /* Texto en negro (2026-09-03, pedido explícito del usuario: se veía en
     blanco/ilegible) — otras reglas de la tabla (rayado par/impar, etc.)
     con más especificidad pisaban el `color:#fff` de antes; el fondo dorado
     sigue dando suficiente contraste con texto oscuro. */
  color: #1E2430;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 4px 8px;
  letter-spacing: 0.03em;
}

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

/* ===== "Documentación de la Solución" (antes columna "PDF") =====
   Varios PDFs por trámite + la descripción general (opcional, de la
   solución) debajo, separada de los archivos. Cada nombre de PDF se
   trunca visualmente (título/clic muestran el nombre completo, ver
   abrirPdfModal) — al no forzar un ancho fijo por botón, flex-wrap ya
   acomoda solo 2 por fila cuando el nombre es corto y 1 por fila cuando
   es largo, según el espacio real que ocupe el texto. */
.tram-doc-pdfs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tram-pdf-nombre {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tram-doc-desc {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 6px;
  line-height: 1.35;
}

.tram-doc-desc b {
  color: var(--vino-2);
  font-weight: 700;
}

/* ============================================================
   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,
  .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: 260px;
  }

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

  /* En cel las tarjetas se angostan (2 columnas) y un badge con año+etapa
     completos ("2026-2027 · 1ra y 2da Etapa") ya no cabe en una sola línea
     de 26px de alto sin recortarse — acá se deja crecer a 2 líneas en vez
     de truncar (docs/pendientes.md #12). IMPORTANTE: display:grid +
     place-items:center + overflow:hidden de la regla base (arriba) NO se
     resetean solos con solo cambiar height/white-space — el grid centra el
     bloque de 2 líneas verticalmente y overflow:hidden recorta lo que se
     sale de esos ~26px, dejando la 2a línea (la etapa) casi entera cortada
     (bug real visto en producción: solo se alcanzaba a ver el punto "·").
     display:flex en columna + overflow:visible hace que la caja SÍ crezca
     de verdad para las 2 líneas, sin recortar nada. */
  .card .badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 26px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
    padding: 4px 8px;
    max-width: calc(100% - 20px);
    overflow: visible;
    text-overflow: clip;
  }

  /* El separador " · " es para cuando año+etapa caben en la MISMA línea
     (desktop) — al envolver a 2 líneas aquí, se quita (si no, la línea se
     puede cortar justo ahí y deja un "·" huérfano al inicio de la 2a línea,
     ej. "2027" / "· 1ra y 2da Etapa") y la etapa pasa a su propia línea
     limpia, sin el punto. */
  .card .badge .badge-sep {
    display: none;
  }

  .card .badge .badge-chico {
    display: block;
  }

  .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,
  .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-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) {
  /* Acá .mbody-pad baja a 16px de padding: ya no cabe el ícono en -45px
     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 —
     portado del prototipo original, faltaba acá (afecta Problemática/
     Solución/Estatus Obra/Estatus Supervisión en móvil chico). */
  .ficha-row>.ficha-icono {
    position: static;
    transform: none;
    margin-right: 12px;
  }

  /* Mismo motivo que arriba, pero acá .render-item es columna (título
     arriba, imagen/video abajo): el ícono vuelve al flujo normal como
     primer elemento, arriba del todo, en vez de a la izquierda. */
  .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;
  }

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

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

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

  .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-fotos {
    width: 100%;
  }
}

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

  .modal-card,
  .modal-card-gest,
  .modal-card1 {
    max-width: 100%;
    width: 100%;
    --modal-w: 100vw;
    /* height (no min-height, 2026-09-30, portado de node-Express, bug real):
       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 (con 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 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). */
    height: 100vh;
    max-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;
  }

  /* Columnas MÁS anchas en celular, no más angostas (2026-09-21, pedido
     explícito del usuario) — esta tabla ya se navega con el dedo (scroll
     horizontal nativo de .tbl-archivos-gest-scroll, ver arriba), así que
     angostar columnas para "que quepan" no tiene sentido: solo aprieta el
     contenido (texto envuelto en 2-3 líneas, ilegible) sin evitar el
     scroll de todas formas. El ancho de cada columna viene de un inline
     style (nth-child, ver gestiones-modal.ejs) — `!important` es
     necesario para ganarle a esa especificidad más alta. */
  .tbl-archivos-gest thead th:nth-child(3),
  .tbl-archivos-gest tbody td:nth-child(3) {
    width: 130px !important;
  }

  .tbl-archivos-gest thead th:nth-child(4),
  .tbl-archivos-gest tbody td:nth-child(4) {
    width: 110px !important;
  }

  .tbl-archivos-gest thead th:nth-child(5),
  .tbl-archivos-gest tbody td:nth-child(5) {
    width: 100px !important;
  }

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

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

/* Layout de gráfica única combinada (Físico+Financiero en 1 sola gráfica),
   portado del prototipo de Colima — SOLO para estados con
   estados.grafica_avance_combinada activo (ver docs/pendientes.md #10 y la
   sección "⚙️ Administración" del nav, partials/obra/administracion.ejs). El
   resto de estados sigue con las 2 gráficas separadas de siempre
   (.seg-avance-chart arriba). */
.seg-avance-datos-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Gráfica | Mapa (2026-09-22/23/24, pedido explícito del usuario, 3
   rondas): orden GRÁFICA primero / MAPA después (invertido el 23, antes
   era al revés); apiladas 100% de ancho cada una por default (tablet/
   celular, <1200px, "no sé cómo se vea ahí") — pasan a 2 columnas recién
   en `min-width:1200px` (70% gráfica / 30% mapa) y a 50/50 en
   `min-width:1400px`.
   Alto AUTOMÁTICO, tope 80vh (2026-09-24, corrige la ronda anterior de
   "80vh fijo en las dos" — el usuario notó que gráfica y mapa "a veces no
   tienen el mismo alto": la gráfica tiene un `height:340` FIJO puesto por
   la propia librería ApexCharts (ver JS más abajo, `new ApexCharts(elCombo,
   {chart:{height:340,...`), así que forzar el contenedor a 80vh solo dejaba
   un hueco vacío debajo de una gráfica que nunca iba a crecer más de
   340px). `height:auto` dejar que cada caja se ajuste a su contenido real
   — la gráfica al alto real de ApexCharts, el mapa al alto fijo que le da
   su `<iframe>` (un iframe no tiene un "alto natural" propio que copiar,
   así que se le da uno explícito) — `max-height:80vh` sigue de tope en
   ambas para el caso de que el contenido real sea más alto que eso.
   `align-items:start` (antes `stretch`) en el grid para que una caja alta
   no obligue a la otra a estirarse a la misma altura. */
.seg-avance-chart-full {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 80vh;
  margin-bottom: 14px;
}

.seg-avance-mapa-box {
  width: 100%;
  height: 500px;
  max-height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.seg-avance-mapa-box iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

@media (min-width: 1200px) {
  .seg-avance-mapa-grafica {
    grid-template-columns: 70% 30%;
    align-items: start;
    gap: 14px;
  }

  .seg-avance-mapa-box,
  .seg-avance-mapa-grafica .seg-avance-chart-full {
    margin-bottom: 0;
  }
}

@media (min-width: 1400px) {
  .seg-avance-mapa-grafica {
    grid-template-columns: 50% 50%;
  }
}

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

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

/* ===== Modal de Avances (seguimiento-detalle) — rediseño en columna única,
   con títulos centrados y sub-datos en 2 columnas ===== */
.seg-title-center {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--vino-2);
  font-weight: 700;
  margin: 0 0 10px;
}

.seg-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.seg-2col-titles h5 {
  margin: 0;
}

/* Tarjeta con banda de cabecera degradada (2026-09-21, rediseño pedido
   explícito del usuario: "se ve muy básico... hazlo más institucional y
   más bonito... que se note que son avances" — el diseño anterior, de
   2026-08-26, ya había subido el borde superior a 3px + sombra, pero el
   usuario lo siguió viendo plano). En vez de agregar markup nuevo, la
   propia `.seg-stat-label` (SIEMPRE el primer hijo de `.seg-stat-box` en
   avance-detalle.ejs) se convierte en la banda de cabecera de la tarjeta
   — mismo elemento, solo estirado a los bordes con margin negativo igual
   al padding del contenedor (`.seg-stat-box` pasa a `padding:0` +
   `overflow:hidden` para las esquinas redondeadas). Degradado vino→vino-2
   (mismos 2 tonos institucionales de siempre, ver :root) en vez de un
   plano de un solo color, para que se sienta más "tarjeta de reporte" que
   "caja con línea arriba". */
.seg-stat-box {
  text-align: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(105,27,60,.1);
  overflow: hidden;
}

.seg-stat-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #fff;
  font-weight: 700;
  margin: 0;
  padding: 9px 10px 8px;
  background: linear-gradient(135deg, var(--vino) 0%, var(--vino-2) 100%);
}

.seg-stat-valor {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
  padding: 14px 10px 16px;
}

/* Barra de progreso bajo el valor — probada y quitada el mismo día
   (2026-09-21, pedido explícito del usuario): un avance real por encima
   de 100% (dato real, no un error de captura — pasa cuando la meta
   original quedó corta y se sigue capturando avance contra ella) se
   veía mal con una barra clamp-eada a 100% de ancho, como si el
   progreso se hubiera "topado" en vez de seguir creciendo. Si se
   retoma, no usar un simple `width:%` lineal — necesitaría un
   indicador que sí represente honestamente el caso >100%. */

/* Variante "Avance Financiero" (2026-09-21) — mismas tarjetas, degradado
   oro en vez de vino, para distinguir de un vistazo la sección Física de
   la Financiera sin perder el mismo lenguaje visual (ver `.seg-2col-fin`/
   `.seg-semanas-resumen--fin` en avance-detalle.ejs). */
.seg-2col-fin .seg-stat-label,
.seg-semanas-resumen--fin .seg-semanas-resumen-label {
  background: linear-gradient(135deg, var(--oro) 0%, #8A6229 100%);
}

.seg-2col-fin .seg-stat-valor,
.seg-semanas-resumen--fin .seg-semanas-resumen-item > .seg-cell-view {
  color: var(--oro);
}

/* Input dentro de .seg-stat-box (ej. "Meta (m)" en el grid 2x2 de Avance
   Físico) — mismo tamaño/posición visual que el .seg-stat-valor que
   reemplaza. `.seg-stat-box` pasó a `padding:0` (ver arriba, la banda de
   cabecera ahora la da `.seg-stat-label`), así que el margen vertical que
   antes daba el padding del contenedor se declara aquí directo. */
.seg-stat-input {
  width: 100%;
  max-width: 140px;
  margin: 12px auto 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--vino);
  text-align: center;
}

/* Indicador de "esto es editable" (2026-08-31, pedido explícito del
   usuario: "no parece editable y el cliente puede estar un poco ciego") —
   borde punteado + resalte en hover/focus, en TODOS los inputs de modo
   edición de la app: `.fx-input` (Ficha Técnica y el equivalente genérico
   de avance-detalle.ejs), `.seg-stat-input` (Meta/Montos), y cualquier
   input/select dentro de `.seg-cell-input` (historial de semanas, "Agregar
   semana", Calendario) — cubre prácticamente todo el modo edición sin
   tener que tocar cada <input> por separado. */
.fx-input, .seg-stat-input, .seg-cell-input input, .seg-cell-input select,
.seg-semana-nueva input, .seg-semana-body input, .seg-fin-nueva input {
  border: 1.5px dashed var(--vino-2) !important;
  transition: background-color .15s, border-color .15s;
}
.fx-input:hover, .seg-stat-input:hover, .seg-cell-input input:hover, .seg-cell-input select:hover,
.seg-semana-nueva input:hover, .seg-semana-body input:hover, .seg-fin-nueva input:hover,
.fx-input:focus, .seg-stat-input:focus, .seg-cell-input input:focus, .seg-cell-input select:focus,
.seg-semana-nueva input:focus, .seg-semana-body input:focus, .seg-fin-nueva input:focus {
  background: var(--vino-soft);
  border-style: solid !important;
  border-color: var(--vino) !important;
  outline: none;
}

/* Selectores de mes inicio/fin del "Calendario" (rango elegible, rediseño
   2026-08-24) — ver .seg-semanas-resumen-item "Calendario". */
.seg-cal-meses {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}

.seg-cal-meses select {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
}

/* "Fecha de corte de esta semana" — reubicada junto a Guardar/Cancelar
   (.fxseg-topbtns, ver avance-detalle.ejs), su display real (flex) vive en
   la hoja de estilos para que _fxsegToggle (que solo limpia el inline
   "display:none") la revele correctamente. */
.seg-fecha-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== Avance Físico/Financiero — historial semanal en filas colapsables
   (reemplaza la tabla vieja de "una columna nueva por semana", que se
   desbordaba horizontalmente con muchas semanas). Cualquier residente/admin
   puede expandir cualquier semana y editarla — ya no hay restricción de
   rol ni de cadencia (ver "Reglas de Avance" en CLAUDE.md). ===== */
.seg-semanas-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* Mismo tratamiento de tarjeta-con-banda que .seg-stat-box (ver ahí el
   porqué, 2026-09-21) — variante compacta para los 6 montos de "Avance
   Financiero" (Monto Programado/Contratado/Convenio/Inversión/Calendario/
   Comprometido AMP). Vive dentro de `.seg-semanas-resumen--fin` en
   avance-detalle.ejs, así que hereda el degradado oro de
   `.seg-semanas-resumen--fin .seg-semanas-resumen-label` (ver arriba). */
.seg-semanas-resumen-item {
  text-align: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(105,27,60,.08);
  overflow: hidden;
}

.seg-semanas-resumen-label {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #fff;
  font-weight: 700;
  margin: 0;
  padding: 7px 8px 6px;
  background: linear-gradient(135deg, var(--vino) 0%, var(--vino-2) 100%);
}

.seg-semanas-resumen-item > .seg-cell-view {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
  padding: 10px 8px 12px;
}

/* Vertical apilada (revertido 2026-08-28, pedido explícito del usuario —
   el rediseño horizontal con scroll de 2026-08-24 se descartó: con varias
   semanas se perdía de vista el listado completo). Cada semana es una fila
   de ancho completo (.seg-semana-row de abajo), apilada de más reciente a
   más antigua. */
.seg-semanas-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seg-semanas-list .seg-semana-row {
  width: 100%;
}

.seg-semana-row {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

/* Semana oculta (soft-hide admin-only, ver avance_hist.oculto) — mismo
   criterio visual que .seg-quincena-oculta: solo el admin la ve, con borde
   punteado para distinguirla sin cambiar el layout. */
.seg-semana-row.seg-semana-oculta {
  border-style: dashed;
  opacity: .68;
}

/* Botón iconVisible.png/iconNoVisible.png (antes 👁️/🙈) en la esquina superior derecha de cada tarjeta de semana —
   solo admin (ver esAdminData en avance-detalle.ejs). Absoluto respecto a
   .seg-semana-row (position:relative arriba), vive DENTRO de <summary>
   para que siga visible con la tarjeta colapsada (todo lo que no es
   <summary> dentro de un <details> se oculta hasta abrirlo). */
.seg-semana-ocultar-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.seg-semana-row summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.seg-semana-row summary::-webkit-details-marker { display: none; }

.seg-semana-row[open] summary { border-bottom: 1px solid var(--line); }

/* Flechita indicadora de que la fila se puede abrir (2026-08-31, pedido
   explícito del usuario) — antes no había ninguna señal visual de que
   ".seg-semana-row"/".seg-historial-wrap" fueran expandibles. El primer
   <span> (fecha/título) crece para empujar el resto a la derecha, la
   flechita queda pegada al borde y rota 90° cuando el <details> está abierto. */
.seg-semana-row summary > span:first-child { flex: 1; }
.seg-semana-row summary::after,
.seg-historial-wrap > summary::after {
  content: '›';
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: var(--vino);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .15s;
  flex: 0 0 auto;
}
.seg-semana-row[open] summary::after,
.seg-historial-wrap[open] > summary::after { transform: rotate(90deg); }

.seg-semana-fecha {
  font-weight: 600;
  color: var(--ink);
}

.seg-semana-aporte {
  font-weight: 700;
  color: var(--verde);
}

.seg-semana-body {
  padding: 12px 14px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.seg-semana-detalle {
  flex-basis: 100%;
  color: var(--ink-2);
}

.seg-semana-body label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.seg-semana-body input {
  margin-top: 3px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
}

.seg-semana-body-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Botones de semana deshabilitados (sin cambios, o 2+ semanas modificadas):
   se ven apagados y no son clicables. */
.seg-semana-body-btns button:disabled {
  background: #d9d4d6;
  color: #8f878b;
  border-color: #d9d4d6;
  cursor: not-allowed;
  opacity: .65;
  pointer-events: none;
}

.seg-semana-body-btns button {
  font-size: 11px;
  padding: 5px 10px;
  border: none;
  background: var(--vino);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.seg-semana-body-btns button.seg-semana-borrar {
  background: #fff;
  color: #C0334B;
  border: 1px solid #C0334B;
}

/* Botón "Cancelar" por fila de historial y del formulario de "Agregar
   avance de la semana" (2026-08-31, pedido explícito del usuario) —
   descarta lo tecleado sin guardar en esa fila/formulario en particular,
   sin salir de todo el modo edición. */
.seg-semana-body-btns button.seg-semana-cancelar,
.seg-semana-cancelar {
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 5px;
  cursor: pointer;
}

.seg-semana-nueva {
  margin-top: 10px;
}

.seg-semana-nueva > button {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px dashed var(--vino);
  color: var(--vino);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.seg-semana-nueva label {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.seg-semana-nueva input {
  margin-top: 3px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
}

/* Encabezado grande dentro de "Agregar avance de la semana" (2026-09-07,
   pedido explícito del usuario) — distingue a qué bloque pertenece cada %
   ahora que Físico Real/Programado y Financiero Real viven juntos en el
   mismo panel (ver avance-detalle.ejs: segFisNuevaForm/segFinNuevaForm). */
.seg-semana-nueva-titulo {
  font-size: 14px;
  font-weight: 800;
  color: var(--vino);
  margin-top: 4px;
}

/* Historial de semanas envuelto en UN solo desplegable ("Historial Avances
   Reales (%)", rediseño 2026-08-24, avance-detalle.ejs) — mismo look que
   .seg-semana-row pero con el título en mayúsculas para diferenciarlo de
   las filas individuales que contiene. */
.seg-historial-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.seg-historial-wrap > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--vino-2);
  list-style: none;
}
.seg-historial-wrap > summary > span:first-child { flex: 1; }

.seg-historial-wrap > summary::-webkit-details-marker { display: none; }

.seg-historial-wrap[open] > summary { border-bottom: 1px solid var(--line); }

.seg-historial-body {
  padding: 10px;
}

/* Avance Físico: "Historial Avances Reales (%)" y "Historial Avances
   Programados (%)" comparten UN solo desplegable (.seg-historial-wrap) pero
   se ven como 2 columnas independientes, cada una con su propia lista de
   semanas editable (rediseño 2026-08-24). */
.seg-historial-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.seg-historial-col-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--ink-2);
  text-align: center;
  margin: 0 0 6px;
}

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

/* Botón "Agregar semana" — antes una píldora chica, ahora del mismo ancho/
   alto que una fila del historial (.seg-semana-row) y vive FUERA del
   desplegable de arriba, siempre visible en modo edición. */
.seg-btn-agregar-semana {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 9px 14px;
  border: 1px dashed var(--vino);
  border-radius: 8px;
  background: #fff;
  color: var(--vino);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.seg-fecha-box {
  text-align: center;
}

.seg-fecha-box h5 {
  margin-bottom: 6px;
}

.seg-fecha-grande {
  font-size: 20px;
  font-weight: 700;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
}

.seg-empleo-box {
  text-align: center;
}

.seg-empleo-cifra {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
  line-height: 1.15;
}

.seg-empleo-label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
}

/* Habitantes beneficiados / Beneficios / Ahorro de tiempo — grid 2x2 (ver
   avance-detalle.ejs): Habitantes y Ahorro apilados en la columna
   izquierda (una fila cada uno), Beneficios (lista) ocupa la columna
   derecha completa, de alto igual a esas 2 filas juntas. */
.seg-benef-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}

.seg-benef-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
.seg-benef-cell:nth-child(2) { grid-column: 1; grid-row: 2; }

.seg-benef-lista {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.seg-benef-ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.seg-benef-ul li {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .seg-benef-grid {
    grid-template-columns: 1fr;
  }
  .seg-benef-lista {
    grid-column: 1;
    grid-row: auto;
  }
}

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

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

.seg-Tabla-Rendimiento {
  position: relative;
}

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

/* Período combinado dentro del <thead> de Rendimiento (2026-09-14, pedido
   explícito del usuario) — reemplaza el label suelto que vivía afuera/antes
   de la tabla. Mismo fondo vino que la fila de nombres de columna justo
   debajo (2026-09-15, bug real reportado por el usuario: se veía con un
   color distinto al resto de las cabeceras de la tabla — antes usaba
   vino-2, más claro, a propósito para "distinguir" ambas filas, pero el
   resultado real se veía como una inconsistencia, no como una distinción
   intencional). */
.seg-rend-periodo-th,
.seg-rend-periodo-row {
  background: var(--vino) !important;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  text-align: center;
  font-size: 11px;
}

/* #rendPeriodo vive sobre fondo vino-2 (ver arriba) — el borde punteado
   vino-2 de .rend-input (más abajo) quedaría invisible ahí (mismo color que
   el fondo), así que usa blanco translúcido en su lugar, mismo criterio ya
   usado en otros campos sobre fondo oscuro (ver .pd-add-col-btn). El
   contador de caracteres (contador-caracteres.js) también necesita su
   propio color aquí — por default es gris oscuro (var(--ink-2)), invisible
   sobre este fondo. */
#rendPeriodo {
  border: 1.5px dashed rgba(255, 255, 255, .6);
  transition: background-color .15s, border-color .15s;
}
#rendPeriodo:hover, #rendPeriodo:focus {
  background: rgba(255, 255, 255, .22) !important;
  border-style: solid;
  border-color: #fff;
  outline: none;
}
.seg-rend-periodo-row .cc-contador {
  color: rgba(255, 255, 255, .85);
}

/* Indicador de "esto es editable" para TODOS los campos de la Tabla de
   Rendimiento (2026-09-14, bug real reportado por el usuario: "no están con
   el color de enfoque y el borde de los dash como otros campos") — mismo
   criterio que `.fx-input`/`.seg-stat-input` (ver esa regla más arriba),
   solo que con su propia clase porque estos campos se generan en JS aparte
   (avance-detalle.ejs: _rendNumInput/_rendFilaElementos/_rendFilaSuperenc).
   `:not(:disabled)` es necesario porque los 5 campos numéricos SÍ se
   deshabilitan mientras se edita la estructura (Elemento/Unidad) — un campo
   deshabilitado no debe verse como editable. */
#rendBody .rend-input:not(:disabled) {
  border: 1.5px dashed var(--vino-2) !important;
  transition: background-color .15s, border-color .15s;
}
#rendBody .rend-input:not(:disabled):hover,
#rendBody .rend-input:not(:disabled):focus {
  background: var(--vino-soft);
  border-style: solid !important;
  border-color: var(--vino) !important;
  outline: none;
}

/* "Superencabezado" (2026-09-14, pedido explícito del usuario): fila
   separadora de sección dentro de la Tabla de Rendimiento, combina las 8
   columnas en una sola — mismo criterio visual en la tabla de solo lectura
   (.seg-rend-superenc) y en la editable (ver JS: _rendFilaSuperencabezado). */
.seg-rend-superenc td,
.rend-superenc-row {
  background: #F5EFE3;
  color: var(--vino-2);
  font-weight: 700;
  text-align: left;
  border-top: 2px solid var(--oro);
  border-bottom: 2px solid var(--oro);
}

.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;
  overscroll-behavior-x: contain;
  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;
}

/* "Borde que sigue la forma": un CSS border normal solo se dibuja sobre el
   rectángulo ORIGINAL del elemento — clip-path lo recorta después, así que
   en una forma irregular (pila = trapecio, trabe = perfil en "I") el borde
   desaparece justo en los tramos diagonales/con muescas, dejando solo los
   bordes que coinciden por casualidad con el rectángulo (se veía "roto").
   Truco (el elemento de AFUERA es el trazo, un ::after de ADENTRO es el
   relleno — NO al revés con z-index negativo: un hijo con z-index:-1 nunca
   pinta detrás del propio fondo de su padre, eso se probó y no funcionaba):
   el elemento base se pinta del color del trazo (#111) y queda recortado
   con el clip-path real — esa silueta completa ES el "borde". El ::after,
   encogido hacia adentro (inset positivo = grosor del trazo) con el MISMO
   clip-path (clip-path:inherit copia el polígono, en % sobre la caja ya
   más chica), pinta el relleno real encima — el color de estatus se pasa
   por la variable --larg-fill (JS hace el.style.setProperty), nunca por
   background-color directo (ese quedó reservado para el trazo). */
.seg-lg-pila,
.seg-lg-cabezal,
.seg-lg-trabe,
.seg-lg-loza,
.seg-lg-guarnicion,
.seg-lg-parapeto,
.seg-lg-generico {
  position: relative;
  background-color: #111;
}

.seg-lg-pila::after,
.seg-lg-cabezal::after,
.seg-lg-trabe::after,
.seg-lg-loza::after,
.seg-lg-guarnicion::after,
.seg-lg-parapeto::after,
.seg-lg-generico::after {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: inherit;
  background: var(--larg-fill, #b9bcc4);
  transition: background-color 0.18s ease;
}

/* El número de cada celda tiene que quedar ARRIBA del ::after de relleno
   (que es position:absolute, pinta después del texto normal si no se le
   da su propia capa) — se envuelve en este span con su propio apilamiento. */
.seg-lg-num {
  position: relative;
  z-index: 1;
}

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

/* Forma genérica (categorías libres que no encajan en ninguna pieza real
   del puente, ej. "Juntas de Dilatación") — rectángulo simple, mismo
   espíritu que loza/guarnición. */
.seg-lg-generico {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  width: clamp(60px, 14vw, 140px);
  height: clamp(36px, 6vw, 60px);
}

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

/* ── Larguillo — tabla-cuadrícula con alineación "por apoyo" (2026-09-17,
   portada 1:1 de node-Express/public/estilos.css) — ver CLAUDE.md
   "Larguillo". Reemplaza las figuras .seg-lg-pila/etc. de arriba, que
   quedan sin usar (se dejan por si se retoman más adelante). */
.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: 10px 10px 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: 3px solid var(--vino);
  padding: 8px 8px 14px;
  margin-bottom: 4px;
  /* `auto`, no `hidden` (2026-09-18, bug real reportado por el usuario:
     "no me deja desplazar bien las cosas") — con `hidden`, cualquier
     columna arrastrada más allá del ancho visible de la sección (o
     cualquier rejilla naturalmente más ancha que su contenedor, ej.
     Trabes con 30 columnas) se recortaba/desaparecía en vez de poder
     verse con scroll — el límite de arrastre (contra la vecina o el
     borde de la rejilla) ya evita que se pierda de vista sin razón, pero
     `hidden` lo escondía de todos modos. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}

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

/* Dentro de la ficha/modal de Avance (`avance-larguillo.ejs: #largDisplay`,
   solo lectura) las secciones NO deben generar su propio scroll — todo el
   Larguillo se escala como UN solo bloque (`ajustarEscalaLarg()`) para
   caber sin scroll en escritorio, y esa medición necesita que ninguna
   sección esconda su ancho real de antemano (2026-09-19, pedido explícito
   del usuario: "en la ficha se vea todo dentro y solo sea necesario
   activar el scroll en modo celular"). El editor standalone (`#largGridTablas`,
   otro id) NO se toca — ahí SÍ se quiere poder hacer scroll por sección. */
#largDisplay .seg-lg-seccion { overflow-x: visible; }

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

/* "Centrar título" desmarcado (2026-09-18) -- el título queda alineado a
   la izquierda, en la misma posición donde arrancan las etiquetas de fila,
   en vez de centrado sobre toda la tabla. */
.seg-lg-seccion-titulo.seg-lg-titulo-filas {
  text-align: left;
  margin-left: 0 !important;
}

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

/* Envuelve CADA `.seg-lg-grid-barras` en el editor standalone (2026-09-19,
   pedido explícito del usuario: "que tenga un máximo de 1200 pixeles de
   anchura para evitar activar scroll") — si el contenido real excede el
   tope, se escala hacia abajo (`transform:scale`, ver
   larguillo-editor.ejs: limitarAnchoGrid) en vez de generar scroll
   horizontal. `overflow:hidden` recorta el espacio ya invisible que
   `transform` deja reservado en el flujo normal (mismo mecanismo que
   `ajustarEscalaLarg` en la ficha de Avance). */
.seg-lg-grid-wrap { 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;
}

/* Horizontal por default (2026-09-19, pedido explícito del usuario) — solo
   se pone vertical (`.seg-lg-cab-vertical`, agregada por JS después de
   medir el ancho real de la columna contra el texto) cuando el bloque/
   columna es más angosto que lo que el título necesita para leerse en
   horizontal. Ver larguillo-editor.ejs: ajustarOrientacionCabeceras(). */
.seg-lg-cab-numero {
  font-size: 8.5px;
  font-weight: 700;
  color: #333;
  justify-self: center;
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.seg-lg-cab-numero.seg-lg-cab-vertical {
  writing-mode: vertical-rl;
  text-overflow: clip;
}

/* Más ancho (2026-09-19, pedido explícito del usuario: "apenas y se
   alcanza a leer") — antes 70px/46px (móvil), ahora 110px/78px. Los
   bloques de celdas se angostaron un poco para compensar (ver
   `.seg-lg-grupo-unidades .seg-lg-celda-grid` más abajo). */
.seg-lg-fila-etiqueta {
  font-size: 9.5px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 4px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
}

/* Checkbox "Negritas" por fila (2026-09-18) — el peso normal ya es 600,
   así que además de subir a 900 se sube un poco el tamaño para que la
   diferencia se note de verdad. */
.seg-lg-fila-etiqueta.seg-lg-negrita {
  font-weight: 900;
  font-size: 10.5px;
  color: #111;
}

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

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

/* Bloques apilados dentro de UNA columna (ej. "Caballete 1: 24 bloques") —
   2026-09-18: antes cada bloque forzaba flex:0 0 26% (pensado para ~3-4
   bloques nada más), así que con muchas más se desbordaban sin que
   ampliar el "ancho px" de la columna ayudara en nada. Ahora envuelven
   (flex-wrap) y cada bloque toma un tamaño chico, así SÍ aprovechan el
   ancho real disponible de la columna. */
.seg-lg-grupo-unidades {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: stretch;
  /* Centrado (2026-09-18, pedido explícito del usuario): con `max-width:32px`
     por bloque, pocos bloques (ej. 5) casi nunca llenan una columna ancha
     de verdad — antes se quedaban pegados a la izquierda, dejando un hueco
     vacío grande a la derecha ANTES del divisor de la siguiente columna
     (se veía como "el divisor pegado a la columna", no entre los bloques
     de las dos columnas vecinas). Centrando el grupo, el hueco sobrante se
     reparte a ambos lados por igual. */
  justify-content: center;
  min-width: 0;
}

.seg-lg-grupo-unidades .seg-lg-celda-grid {
  /* Angostados un poco (2026-09-19, pedido explícito del usuario) para
     compensar el ancho ganado por `.seg-lg-fila-etiqueta` — antes 14/10/32. */
  flex: 1 1 11px;
  min-width: 8px;
  max-width: 24px;
}

/* "hr verticales" entre bloques — además del borde propio de cada celda,
   un divisor más marcado para que la separación se note incluso con
   muchos bloques seguidos. */
.seg-lg-grupo-unidades .seg-lg-celda-grid + .seg-lg-celda-grid {
  border-left: 2px solid var(--vino);
}

.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 { font-size: 7.5px; }
  .seg-lg-fila-etiqueta { font-size: 8.5px; }
  .seg-lg-divisor-apoyo { width: 3px; }
  .seg-lg-celda-grid { min-height: 12px; }
}

@media (max-width: 640px) {
  .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 (2026-08-28, pedido explícito
   del usuario: la fila de quincenas era una columna angosta vertical a la
   izquierda -- ahora es una tira horizontal con scroll arriba, y el
   contenido (Fotografías/Videos) ocupa el ancho completo debajo). */
.seg-historial-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.seg-historial-item {
  flex: 0 0 auto;
  white-space: nowrap;
  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;
}

/* Semana oculta (docs/pendientes.md #2) — solo admin la ve, con borde
   punteado para distinguirla de las semanas normales sin tocar el layout. */
.seg-historial-item.seg-quincena-oculta {
  border-style: dashed;
  opacity: .68;
}

.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: 60px;
  height: 60px;
  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;
}

/* ===== Inputs de archivo dentro de las tablas de tramitología (gestiones-modal) =====
   Antes se veían con el botón nativo del navegador ("Elegir archivo" / "Choose file"),
   fuera de estilo con el resto de la app — se les da la misma línea visual que los
   demás botones pequeños (borde vino, radio 6px). */
.gest-foto-inp,
.gest-pdf-inp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  max-width: 78px;
  font-size: 9px;
  line-height: 1.25;
  color: var(--ink-2);
  cursor: pointer;
  overflow: hidden;
  word-break: break-all;
}

.gest-foto-inp::file-selector-button,
.gest-pdf-inp::file-selector-button,
.gest-foto-inp::-webkit-file-upload-button,
.gest-pdf-inp::-webkit-file-upload-button {
  width: 100%;
  margin-right: 0;
  padding: 3px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--vino);
  background: #fff;
  border: 1px solid var(--vino);
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.gest-foto-inp:hover::file-selector-button,
.gest-pdf-inp:hover::file-selector-button,
.gest-foto-inp:hover::-webkit-file-upload-button,
.gest-pdf-inp:hover::-webkit-file-upload-button {
  background: var(--vino);
  color: #fff;
}

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

/* Botón "Abrir en pestaña nueva" del visor de PDF (#pdfExternal) --
   respaldo para celular, donde el iframe con el PDF embebido suele
   quedar en blanco (ver #modalPdf en gestiones-modal.ejs). */
.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);
}

/* Solo en celular/tablet táctil: en escritorio el visor embebido funciona y el botón sobra. */
.pdf-external-btn { display: none; }
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .pdf-external-btn { display: grid; }
}

.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.
   OJO — este bloque va DESPUÉS de .lightbox-card a propósito: ambas
   clases conviven en el mismo div (class="lightbox-card pdf-modal-card")
   con la misma especificidad (una sola clase cada una), así que quien
   aparezca DESPUÉS en el archivo gana el empate — si .pdf-modal-card
   quedara antes, .lightbox-card le pisaría align-items/justify-content
   (center en vez de stretch) y la barra de título dejaría de ocupar el
   ancho completo del modal (bug real, encontrado en captura de pantalla). */
.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;
    /* 100dvh (alto de viewport dinámico) después de 100vh, 2026-09-30,
       portado de node-Express: donde el navegador lo soporta, se ajusta
       solo al espacio realmente visible (sin contar la franja que tapa la
       barra de direcciones), en vez del 100vh "de diseño"; donde no lo
       soporta, 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 sí mide 100vh exacto arriba, y "100vh" en
     el navegador del celular no siempre coincide con el viewport REALMENTE
     visible (la barra de direcciones se esconde/aparece) — 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. Anclada arriba (flex-start) el
     desborde se va solo hacia abajo y el header queda siempre visible. */
  #modalPdf.open {
    align-items: flex-start;
  }
}

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

.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-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 {
  position: relative;
  background: #FBF7F9;
  border: 1px solid var(--line);
  border-radius: 0 12px 12px 12px;
  padding: 10px 14px;
  max-width: 85%;
}

/* Botón para que un administrador borre un mensaje (cualquier autor) —
   iconBorrar.png (2026-09-XX, antes iconEliminar.png — ver "Íconos
   cancelar/borrar/visible" más abajo) ya trae su propio círculo negro, así
   que el botón va sin fondo/borde propio (si no, se ven dos círculos
   encimados). */
.chat-msg-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.chat-msg-del img {
  width: 18px;
  height: 18px;
}

.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 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Botón ✕ para eliminar un video existente en modo edición (Estudio de
   Tránsito/Render Video/Reconocimiento con Dron, 2026-08-28, pedido
   explícito del usuario: antes solo se podía REEMPLAZAR un video, no
   quitarlo sin subir otro) — mismo criterio que el resto de galerías con ✕
   (borrado diferido, se aplica solo al Guardar, ver _fxEliminarVideo). */
.fx-video-quitar {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

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

.modal-card-chat {
  /* Bug real corregido 2026-09-09: faltaba el punto del selector, así que
     este override NUNCA se aplicó — el chat vivía con el ancho base de
     .modal-card (960px antes, 1200px ahora que se convirtió en el tope
     general de todos los modales). Un chat no necesita ni se ve bien tan
     ancho, así que se queda con su propio tope, menor a 1200px. */
  max-width: 560px;
  --modal-w: 560px;
}

/* Mensaje propio: alineado a la derecha y con burbuja vino suave */
.chat-msg-mio {
  flex-direction: row-reverse;
}
.chat-msg-mio .chat-bubble {
  background: var(--vino-soft);
  border-color: var(--vino-soft);
  border-radius: 12px 0 12px 12px;
}
.chat-msg-mio .chat-avatar-placeholder {
  background: var(--vino);
}

/* Botón "← Historial" en la barra superior del modal */
.chat-volver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vino-soft);
  color: var(--vino);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 5px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.chat-volver:hover {
  background: #EED6DF;
}

/* Contador de no-leídos */
.chat-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 8px;
  background: var(--rojo);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}

/* ---- Ítems del historial (estructura interna) ---- */
.chat-historial {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.chat-historial-item {
  width: 100%;
  text-align: left;
  font-family: 'Inter', sans-serif;
  gap: 12px;
}
.chat-historial-item:hover {
  background: var(--vino-soft);
}
.chat-hist-icono {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.chat-hist-info {
  flex: 1;
  min-width: 0;
}
.chat-hist-nombre {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-2);
}
.chat-hist-prev {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-hist-fecha {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   Tarjeta "+ Agregar obra" (solo residentes) — pegar en estilos.css
   ============================================================ */
.card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: #faf7f8;
  border: 2px dashed var(--vino);
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.card-add:hover {
  background: var(--vino-soft, #F3E6EB);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(94, 34, 56, 0.12);
}
.card-add-inner {
  text-align: center;
  color: var(--vino);
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.9;
}
.card-add-inner::first-line {
  font-size: 40px;
  font-weight: 900;
}

/* Labels del modal de nueva obra */
#modalNuevaObra label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
#modalNuevaObra input,
#modalNuevaObra select,
#modalNuevaObra textarea {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.btn-nueva-dep {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px dashed var(--vino);
  color: var(--vino);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  margin: 2px;
  transition: background .12s;
}
.btn-nueva-dep:hover { background: var(--vino-soft); }

/* ===== Toast de progreso de subida (renders, videos, PDFs, semanas) =====
   Inyectado por src/public/js/subida-progreso.js, fijo abajo-derecha,
   independiente del modal que esté abierto — sigue visible aunque el
   usuario cambie de tab mientras sube. */
.subida-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  min-width: 240px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-2);
  animation: subidaToastIn .2s ease-out;
}

.subida-toast.subida-toast-error {
  border-color: #c0392b;
  color: #c0392b;
}

@keyframes subidaToastIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.subida-toast-texto {
  margin-bottom: 6px;
  font-weight: 600;
}

.subida-toast-barra {
  height: 8px;
  background: var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.subida-toast-fill {
  height: 100%;
  width: 0%;
  background: var(--vino);
  transition: width .15s ease-out;
}

/* ═══ Parámetros de Diseño (Colima) — portado 1:1 del prototipo original,
   node-Express/public/estilos.css. Encabezados coloreados por "eje"/"rama"
   (col.c: gris|verde|vino|oro, ver ficha-tecnica.ejs: pdCeldaEncabezado).
   table-layout:fixed con ancho fijo por columna — el texto hace wrap en vez
   de forzar el ancho, nunca deja una sola celda empujando la tabla entera. */
.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);
}

/* Editor de tabla de "Parámetros de Diseño" (antes: textarea de JSON
   crudo). Reusa .pd-table/.pd-wrap para que el "look" coincida con el
   modo lectura, pero necesita sus propias reglas: las celdas de header
   ahora cargan un select + 2 inputs apilados en vez de solo texto, y
   hace falta una columna extra (sin contraparte en modo lectura) para
   el botón de "eliminar fila" por cada renglón. */
/* table-layout:fixed (sin min-width por columna, a propósito): igual que
   .pd-table en modo lectura, las columnas de datos se REPARTEN el ancho
   disponible en partes iguales y se achican conforme se agregan más —
   la tabla siempre cabe en el ancho del modal sin scroll horizontal
   (overflow-x:auto queda solo como red de seguridad ante un caso
   extremo, nunca como comportamiento esperado). Los inputs adentro son
   width:100% + box-sizing:border-box, así que se angostan con su celda. */
.pd-wrap-edit {
  overflow-x: auto;
}

.pd-table-edit {
  table-layout: fixed;
  width: 100%;
}

.pd-table-edit th:first-child,
.pd-table-edit td:first-child {
  /* 110px→180px (2026-09-14, bug real reportado por el usuario: "mal
     estilizado") — con table-layout:fixed, 110px no alcanzaba para
     etiquetas reales ("Guarnición y parapeto" 21 car., "Pend. Gobernadora
     máxima" 24 car., verificado contra datos reales) y el input las
     recortaba en silencio (se veían solo hasta donde cabía, sin elipsis ni
     aviso — había que hacer clic y desplazarse adentro del input para leer
     el resto). 180px alcanza para el caso real más largo encontrado. */
  width: 180px;
}

.pd-table-edit th.pd-th-edit {
  vertical-align: top;
}

.pd-table-edit th.pd-th-edit-corner,
.pd-table-edit td.pd-edit-rowdel {
  /* 60px (antes 30px) — con table-layout:fixed esta es la MISMA columna que
     el 🗑 de cada fila (misma celda "esquina"/"eliminar fila" de siempre),
     así que ensancharla para que quepa el botón "+ Cabecera" con texto
     ensancha también, un poco, la columna del 🗑 — aceptable, sigue siendo
     angosta. 30px solo alcanzaba para un ícono suelto de 16px, el botón con
     texto quedaba cortado ("Cabece…"). */
  width: 60px;
  padding: 6px 4px;
}

.pd-edit-colhead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

.pd-table-edit input[type="text"],
.pd-edit-colhead select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 6px;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
}

/* Los inputs de título/subtítulo/valor viven sobre un fondo de color
   (el mismo del encabezado, .pd-th-*) — un input blanco puro con borde
   tenue ya contrasta bien ahí; el select además necesita su propio
   contraste porque no tiene placeholder que lo delate. */
.pd-edit-colhead select {
  font-weight: 700;
  cursor: pointer;
}

/* Indicador de "esto es editable" (2026-09-14, bug real reportado por el
   usuario: "mal estilizado... los campos no están con el color de enfoque y
   el borde de los dash como otros campos") — mismo criterio que
   `.fx-input`/`.rend-input` (ver esas reglas), Parámetros de Diseño nunca
   lo tuvo. Parámetro/Valor viven sobre fondo claro → vino-2 dashed, mismo
   que el resto de la app. Título/Subtítulo viven sobre el fondo de COLOR
   del encabezado (.pd-th-gris/verde/vino/oro, elegible por columna) —
   un borde vino-2 se perdería o desentonaría según el color elegido, así
   que usan blanco translúcido, mismo criterio que #rendPeriodo. */
.pd-table-edit td input[type="text"] {
  border: 1.5px dashed var(--vino-2) !important;
  transition: background-color .15s, border-color .15s;
}
.pd-table-edit td input[type="text"]:hover,
.pd-table-edit td input[type="text"]:focus {
  background: var(--vino-soft) !important;
  border-style: solid !important;
  border-color: var(--vino) !important;
  outline: none;
}
/* Bug real corregido en la misma ronda: un intento inicial usó borde
   blanco translúcido aquí (mismo criterio que #rendPeriodo, pensado para
   que no se perdiera contra el fondo de color del encabezado) — pero a
   diferencia de #rendPeriodo (fondo del INPUT también translúcido), estos
   inputs siempre tienen fondo blanco/casi-blanco de propósito (legibilidad
   del texto capturado) — un borde blanco sobre un fondo blanco resultaba
   invisible. Vino-2 (mismo criterio que el resto de la app) sí contrasta
   contra el fondo blanco del input, sea cual sea el color elegido para esa
   columna (gris/verde/vino/oro). */
.pd-edit-colhead input[type="text"] {
  border: 1.5px dashed var(--vino-2) !important;
  transition: background-color .15s, border-color .15s;
}
.pd-edit-colhead input[type="text"]:hover,
.pd-edit-colhead input[type="text"]:focus {
  background: var(--vino-soft) !important;
  border-style: solid !important;
  border-color: var(--vino) !important;
  outline: none;
}

.pd-edit-delcol {
  align-self: center;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: rgba(255, 255, 255, .22);
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  color: #fff;
  font-size: 10px;
  font-family: 'Inter', sans-serif;
}

.pd-edit-delcol img {
  width: 10px;
  height: 10px;
  filter: brightness(0) invert(1);
}

/* "+ Cabecera" (celda esquina del thead) — antes solo un ícono de 16px sin
   fondo/borde, sobre el gris oscuro de .pd-th-label: casi imposible de ver
   (bug real reportado por el usuario, 2026-09-11: "el botón de agregar
   cabeceras está raro, solo con ícono y no se ve casi ajajaj me jode toda
   la vista"). Mismo estilo de "pastilla punteada" que "+ Agregar fila"
   (abajo de la tabla) para que se lea claramente como un botón real. */
.pd-add-col-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  border: 1px dashed rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  border-radius: 5px;
  padding: 5px 4px;
  cursor: pointer;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}

.pd-add-col-btn img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

.pd-edit-rowdel button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.pd-edit-rowdel img {
  width: 16px;
  height: 16px;
}

.pd-edit-addbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px dashed var(--vino);
  background: #fff;
  color: var(--vino);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
}

.pd-edit-addbtn img {
  width: 12px;
  height: 12px;
}

/* Secciones Transversales: mismo patrón visual que .render-viewer/.vnav,
   pero con object-fit:contain en vez de cover a propósito — son planos
   técnicos con texto hasta el borde, cover los recortaría. Alto FIJO (a
   diferencia de .render-viewer, que varía con height:auto): cada sección
   trae una altura distinta, y con height:auto las flechas (position:
   absolute, top:50%) se corrían de lugar entre imágenes. */
.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;
}

.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-viewer { height: 220px; }
  .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; }
}

/* ===== Scrollbars personalizados: delgados y color vino, en todo el
   sitio (tablas con scroll horizontal, modales, tarjetas de PDF, etc.).
   Portado 1:1 de node-Express/public/estilos.css. scrollbar-color/-width
   son heredables, así que basta con ponerlos en :root; los pseudo-elementos
   ::-webkit-scrollbar no heredan, por eso van con el selector universal. */
:root {
  scrollbar-width: thin;
  /* "auto" en vez de un color de fondo -- deja el track transparente
     (Firefox no tiene una palabra clave "transparent" para esto, así
     que se omite el segundo valor y usa el fondo real de abajo). */
  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;
}

/* Sin flechitas en los extremos -- solo la barra. Algunos Chromium
   necesitan el selector genérico (::-webkit-scrollbar-button) Y las
   variantes :start/:end por orientación para de verdad quitarlas -- con
   solo una de las dos formas a veces siguen apareciendo. */
*::-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;
}

/* ===== "Permisos Requeridos" (Tramitología), generalizado a CUALQUIER
   dependencia con al menos una gestión categoria='permiso' — portado de
   node-Express/public/estilos.css (kpis-permisos/kpi-permiso/modal-card-
   permisos/tbl-permisos/permiso-estatus), 2026-08-23. A diferencia del
   prototipo (10 KPIs fijos en grid de 5 columnas), aquí el grid es
   auto-fit: puede haber 1 dependencia o 20, según lo que tenga capturado
   cada estado. */
.kpis-permisos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 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-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;
}

/* "+ Nueva Dependencia" (2026-09-XX, pedido explícito del usuario) — misma
   tarjeta que .kpi-permiso pero en vino con borde punteado, para que se
   lea de inmediato como la acción de "agregar" dentro de la misma
   cuadrícula, sin ser un permiso más. */
.kpi-permiso-nuevo {
  background: var(--vino);
  color: #fff;
  border: 2px dashed rgba(255, 255, 255, .6);
}

.kpi-permiso-nuevo img {
  height: 16px;
  max-width: 16px;
  filter: brightness(0) invert(1);
}

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

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

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

/* ===== Vista previa de archivos elegidos (ANTES de subir), con ✕ por si
   fue el archivo equivocado — ver src/public/js/vista-previa-archivos.js.
   Aplica a cualquier <input type="file" data-vp="1"> de imagen o video en
   Ficha Técnica, Tramitología (logo de dependencia) y Gestiones; Avance de
   Obra ya traía su propio preview+quitar por slot desde antes (no usa
   data-vp). ===== */
.vp-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.vp-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.vp-item--imagen { width: 64px; }
.vp-item--video { width: 140px; }

.vp-item--imagen .vp-item-media {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
}

.vp-item--video .vp-item-media {
  width: 140px;
  height: 84px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #000;
}

.vp-item-quitar {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vp-item-nombre {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  font-size: 9px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Selector "Ir al puente" sobre el mini-mapa del Tablero Ejecutivo
   (2026-08-29, portado de node-Express: "vistas mapas en tablero ejecutivo
   para no usar zoom manualmente") — antes había que hacer zoom manual en
   el mapa buscando un puente en particular entre todos los pines. */
.mapa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

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

/* El <select> "Ir al puente" que vivía aquí se reemplazó 2026-09-08 por la
   tabla clicable "Ubicación de Puentes" que dibuja el propio visor DENTRO
   del iframe (ver visor-puentes.ejs: crearTablaPuentesFullscreen) — hacían
   lo mismo y quedaban duplicados junto al botón de pantalla completa. El
   div se deja vacío (nunca visible) solo como ancla para
   .mapa-panel-acciones, que sigue necesitándolo para ubicar ese botón. */
.mapa-chips {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Botón "⛶ Pantalla completa" del mini-mapa del Tablero Ejecutivo (2026-08-31,
   portado de node-Express, junto con "Ir al puente" arriba). Envuelve .mapa-chips
   (el <select> "Ir al puente") en un contenedor junto al botón — ver JS al final
   de tablero-ejecutivo.ejs ("BOTÓN DE PANTALLA COMPLETA"). */
.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: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  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;
}

/* Al activar el botón, el .panel completo (título + "Ir al puente" + mapa)
   entra en pantalla completa — no solo el iframe — así el selector sigue
   visible y usable con el mapa ya en grande. */
.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%;
  /* La regla global "iframe { max-height:480px }" le pone tope a CUALQUIER
     iframe; sin anularla aquí, el mapa nunca puede pasar de 480px aunque el
     panel ocupe toda la pantalla. */
  max-height: none;
}

/* "Ficha Resumen" — tarjeta ejecutiva imprimible por puente (2026-08-29,
   portado de node-Express, ver docs/pendientes.md #22). Botón de imprimir
   propio junto al de cerrar — mismo criterio que el resto de modales con
   impresión (imprimir-tabla.js): reserva de espacio SOLO en este modal
   (#modalFichaResumen), no en .modal-top global. */
#modalFichaResumen .modal-top {
  padding-right: 122px;
}

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

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

/* "Imprimir reporte completo" del modal de Avance por-obra (#modalAvance)
   — portado de node-Express 2026-08-29 (imprimirFichaCompleta, ver
   docs/pendientes.md #22), mismo criterio de reserva de espacio que
   #modalFichaResumen arriba, solo que aquí SIN texto en el botón mientras
   carga (a diferencia del prototipo, que reemplaza el ícono por
   "Cargando datos..." — el botón mide 44px fijos, no cabría el texto sin
   deformarse; el disabled/cursor ya deja claro que está trabajando). */
#modalAvance .modal-top {
  padding-right: 178px;
}

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

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

#modalAvance .modal-print:disabled {
  cursor: wait;
  opacity: .7;
}

/* Exportar Avance de Obra a PowerPoint (2026-09-25, portado del prototipo
   node-Express: exportarFichaCompletaPptx). Mismo círculo que "Imprimir
   reporte completo", una posición más a la izquierda. */
#modalAvance .modal-export-pptx {
  right: 124px;
  font-size: 20px;
}

/* "Imprimir"/"Exportar a PowerPoint" en Prioridad (2026-09-30, portado de
   node-Express: #prioPrint/#prioExportPptx/#prioGeneralPrint/
   #prioGeneralExportPptx) — mismo criterio de reserva de espacio y mismo
   círculo que #modalFichaResumen/#modalAvance de arriba. */
#modalPrioridad .modal-top,
#modalPrioridadGeneral .modal-top {
  padding-right: 244px;
}

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

#modalPrioridad .modal-print:hover,
#modalPrioridadGeneral .modal-print:hover {
  background: var(--vino);
}

#modalPrioridad .modal-print:disabled,
#modalPrioridadGeneral .modal-print:disabled {
  cursor: wait;
  opacity: .7;
}

#modalPrioridad .modal-export-pptx,
#modalPrioridadGeneral .modal-export-pptx {
  right: 188px;
  font-size: 20px;
}

#modalPrioridad .modal-export-excel,
#modalPrioridadGeneral .modal-export-excel {
  right: 128px;
  font-size: 20px;
}

/* Mapa + render del puente arriba de la tabla de Prioridad (2026-09-30,
   portado de node-Express: .prio-media-grid/.prio-media-col en
   edomex.html) — a diferencia del prototipo (imágenes estáticas), aquí el
   mapa es el visor real embebido (?compacto=1, ver visor-puentes.ejs) y el
   render viene de getMediaObra() (media.helper.js), igual que Ficha
   Resumen/"Imprimir reporte completo" de Avance de Obra. 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;
  border: 1px solid var(--line);
  background: #fafafa;
}

.prio-media-col iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.prio-media-col img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

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

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

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

.resumen-badge {
  flex: 1 1 160px;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
}

.resumen-badge span {
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}

.resumen-badge b {
  font-size: 20px;
  font-family: 'Archivo', sans-serif;
}

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

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

.resumen-izq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resumen-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}

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

.resumen-item p {
  margin: 0;
}

.resumen-mapa {
  width: 100%;
  height: 340px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

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

.resumen-permisos h2 {
  background: var(--vino-soft);
  color: var(--vino);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin: 0 0 10px;
}

.resumen-permisos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.resumen-permiso-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 130px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.resumen-permiso-card img {
  height: 24px;
  object-fit: contain;
}

.resumen-permiso-nombre {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

.resumen-permiso-estatus {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
}

.resumen-permiso-estatus-rojo    { background: var(--rojo); }
.resumen-permiso-estatus-ambar   { background: #C77D00; }
.resumen-permiso-estatus-amarillo{ background: var(--amarillo); color: var(--amarillo-text); }
.resumen-permiso-estatus-verde   { background: var(--verde); }
.resumen-permiso-estatus-gris    { background: #9AA0A6; }

/* No. de Bitácora/Oficio de la tarjeta (2026-09-XX, pedido explícito del
   usuario) — texto chico bajo el chip de estatus, mismo tono apagado que
   .resumen-permiso-nombre pero sin negritas. */
.resumen-permiso-bitacora {
  margin: 0;
  font-size: 10.5px;
  color: var(--ink-2);
}

/* "Otros Permisos" — subtítulo propio, un tono más discreto que el
   encabezado principal "Gestión de Permisos" (mismo .resumen-permisos
   h2), para separar visualmente SEMARNAT/CONAGUA/CFE del resto. */
.resumen-permisos-otros-titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 12px 0 8px;
}

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

.resumen-tramo th,
.resumen-tramo td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.resumen-tramo th {
  background: var(--vino);
  color: #fff;
}

/* Problemática Social (2026-09-08, ver CLAUDE.md) — bloque final de Ficha
   Resumen, mismo criterio visual que .resumen-permisos de arriba. */
.resumen-problematica {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}

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

.resumen-problematica-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: none;
}

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

.resumen-problematica-badge h3 {
  margin: 2px 0 0;
  font-size: 14px;
}

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

/* Resto de las clases "resumen-problematica-*" — portadas 1:1 del
   prototipo (node-Express/public/estilos.css), 2026-09-09, pedido
   explícito del usuario ("los mismos estilos que el prototipo") para el
   modal dedicado (#problematicaBody, ver problematica-social-modal.ejs).
   El prototipo usaba un iframe con anotaciones geo-referenciadas
   (".resumen-problematica-mapa") en vez de una imagen — aquí esa columna
   la ocupa la imagen subida (misma clase ".resumen-problematica-mapa"
   reusada sobre un <img>, decisión ya tomada de simplificar el mapa a
   estático, ver CLAUDE.md "Problemática Social"). */
#problematicaBody .resumen-problematica {
  margin-top: 0;
  padding-top: 0;
  border: none;
  padding: 0;
}
/* Badge más grande dentro del modal dedicado — en Ficha Resumen (donde
   .resumen-problematica-badge también vive, más arriba en este archivo)
   se queda compacto, es un bloque más entre varios en una tarjeta chica. */
#problematicaBody .resumen-problematica-badge {
  gap: 12px;
  margin-bottom: 18px;
}
#problematicaBody .resumen-problematica-badge img {
  width: auto;
  height: 52px;
}
#problematicaBody .resumen-problematica-badge span {
  font-size: 20px;
  letter-spacing: .04em;
}
#problematicaBody .resumen-problematica-badge h3 {
  margin: 4px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
}
.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 ahora es un <iframe> (visor-puentes.ejs, "MODO
   PROBLEMÁTICA SOCIAL"), no una <img> — un iframe sin "height" explícito se
   queda en el default ~150px del navegador sin importar "max-height", que
   solo pone un TOPE (2026-09-09, bug real reportado por el usuario: "el
   iframe no tiene buen alto"). */
.resumen-problematica-mapa {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 12px;
}
.resumen-problematica-caption {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}
.resumen-problematica-video-desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.resumen-problematica-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 640px;
  max-height: 480px;
  margin: 0 auto;
  border-radius: 12px;
  background: #000;
}
.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;
}
.resumen-problematica-vacio {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 30px 10px;
}
@media (max-width: 768px) {
  .resumen-problematica-layout,
  .resumen-problematica-video-layout {
    grid-template-columns: 1fr;
  }
}

/* Botón "Ver ficha resumen" en la tabla de Tramitología (2026-08-29,
   portado de node-Express, ver docs/pendientes.md #22). */
.tram-ficha-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

.tram-ficha-btn:hover {
  border-color: var(--vino);
  background: var(--vino-soft);
}

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

/* Botón de "Problemática Social" (columna propia de Tramitología) más
   grande que el resto de .tram-ficha-btn (2026-09-XX, pedido explícito
   del usuario) — mismo componente base, solo agranda tamaño+ícono. */
.tram-prob-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

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

/* ============================================================
   INDICADORES DE CAMPO EDITABLE (2026-09-08, pedido explícito
   del usuario: "indicador en los inputs de entrada de datos
   para todo lo que sea editar y agregar")
   ============================================================ */

/* 1) Contador de caracteres — lo inserta contador-caracteres.js como un
      <p> hermano justo DESPUÉS de cualquier input/textarea con maxlength
      (ver ese archivo). */
/* 9na ronda (2026-09-11, pedido explícito del usuario: "no podemos
   sustituir ese contador por una etiqueta <p>, así no ocupamos dibujarla?")
   — se volvió a un elemento en el FLUJO NORMAL del documento, decisión
   consciente del usuario a cambio de la robustez de las rondas 4-8
   (`position:fixed` + posición calculada en JS, que era inmune a cualquier
   `display` del padre real del campo). Si el contador vuelve a aparecer
   descuadrado en una tabla, un padre `inline`, o dentro de un `<details>`
   cerrado, ver el historial completo de rondas en
   contador-caracteres.js/git antes de rehacer el cálculo de posición desde
   cero. */
.cc-contador {
  display: block;
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Aviso al acercarse al tope (90%) y al llegar — sin esto, el usuario solo
   descubre el límite cuando el navegador deja de aceptar teclas. */
.cc-contador-cerca { color: var(--oro); font-weight: 700; }
.cc-contador-tope  { color: var(--rojo); font-weight: 700; }

/* 2) "Esto es editable": el borde punteado vino ya existía para .fx-input
      (modo edición de Ficha Técnica) y los campos de Avance — se extiende a
      los formularios que NO lo tenían: "Agregar nueva obra", los modales de
      Supervisión/Planos/Problemática Social, y el alta de dependencias y
      gestiones de Tramitología. Mismo look en los tres estados (normal,
      hover, foco) para que se lea como un solo sistema. */
#modalNuevaObra input:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
#modalNuevaObra textarea,
#modalNuevaObra select,
#modalSupervisionUpload input:not([type="file"]),
#modalSupervisionUpload select,
#modalPlanoPEEditar input:not([type="file"]),
#modalProblematica input:not([type="file"]),
#modalProblematica textarea,
#modalPermisoForm input:not([type="file"]),
#modalPermisoForm select,
#modalNuevaDep input:not([type="file"]) {
  border: 1.5px dashed var(--vino-2);
  border-radius: 4px;
  transition: background-color .15s, border-color .15s;
}

#modalNuevaObra input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):hover,
#modalNuevaObra textarea:hover,
#modalNuevaObra select:hover,
#modalSupervisionUpload input:not([type="file"]):hover,
#modalSupervisionUpload select:hover,
#modalPlanoPEEditar input:not([type="file"]):hover,
#modalProblematica input:not([type="file"]):hover,
#modalProblematica textarea:hover,
#modalPermisoForm input:not([type="file"]):hover,
#modalPermisoForm select:hover,
#modalNuevaDep input:not([type="file"]):hover,
#modalNuevaObra input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus,
#modalNuevaObra textarea:focus,
#modalNuevaObra select:focus,
#modalSupervisionUpload input:not([type="file"]):focus,
#modalSupervisionUpload select:focus,
#modalPlanoPEEditar input:not([type="file"]):focus,
#modalProblematica input:not([type="file"]):focus,
#modalProblematica textarea:focus,
#modalPermisoForm input:not([type="file"]):focus,
#modalPermisoForm select:focus,
#modalNuevaDep input:not([type="file"]):focus {
  background: var(--vino-soft);
  border-style: solid;
  border-color: var(--vino);
  outline: none;
}

/* Un campo deshabilitado (ej. Ganador/Monto mientras el estatus no sea
   "Adjudicado", ver _noSyncEstatus en ficha-tecnica.ejs) no debe verse como
   editable — el borde punteado ahí confundiría. */
#modalNuevaObra input:disabled,
#modalNuevaObra textarea:disabled,
#modalNuevaObra select:disabled {
  border-style: solid;
  border-color: var(--line);
  background: #f5f5f5;
  cursor: not-allowed;
}

/* Toda <textarea> del sitio: solo estirable verticalmente y con tope de alto
   — el resize por default del navegador (ambos ejes, sin límite) se podía
   arrastrar hasta romper el layout del modal que la contiene (desbordar el
   ancho fijo, empujar botones fuera de vista). */
textarea {
  resize: vertical;
  max-height: 340px;
}

/* Pestañas para elegir entre varios PDFs del mismo botón (Proyecto
   Ejecutivo → columna "Plano", 2026-09-09) — fila fija arriba del iframe,
   dentro del mismo modal de PDF. */
.pdf-modal-tabs {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--vino-soft);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.pdf-modal-tab {
  flex: none;
  border: 1px solid var(--vino);
  background: #fff;
  color: var(--vino-2);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.pdf-modal-tab:hover {
  background: var(--vino-soft);
}
.pdf-modal-tab.activo {
  background: var(--vino);
  color: #fff;
}

/* Aviso flotante para el botón "Compartir" (header.ejs) 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. Portado del prototipo node-Express 2026-09-25. */
.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);
}

/* ==================== DIRECTORIO (portado de node-Express, 2026-10-04) ==================== */
.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);
  }
}



/* ==================== ACCIONES DE PRIORIDAD (Excel / Correo / Compartir, 2026-10-04) ==================== */
.prio-accion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.prio-accion-btn img { width: 16px; height: 16px; }
.prio-accion-btn:hover { background: rgba(255,255,255,.25); }

/* ===== Ícono de borrar con fondo circular blanco (2026-10-05, pedido
   explícito del usuario: que se note sobre cualquier fondo) =====
   UNA sola regla para TODOS los usos de iconBorrar.png (36 en 12 archivos,
   incluidos los generados por JS) — selector por atributo `src`, sin tocar
   cada plantilla. `.icon-borrar-circulo` queda como alias por si algún día
   se quiere aplicar a otro <img>. Se usa `background` + `box-shadow` (anillo
   hacia AFUERA) en vez de `padding`: casi todos estos botones tienen tamaño
   fijo y el ícono ya sobresale de él, con padding el <img> crecería y
   descuadraría las filas. El borde con radio 50% recorta un poco las
   esquinas del PNG (mínimo, el trazo no llega a ellas). */
img[src$="/iconBorrar.png"],
.icon-borrar-circulo {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .35);
}
/* Botones que YA son un círculo blanco propio (.vp-item-quitar, quitar
   logo/foto/video de avance...) — sin esto se vería un círculo dentro de otro. */
.vp-item-quitar img[src$="/iconBorrar.png"],
button[style*="border-radius:50%"] > img[src$="/iconBorrar.png"] {
  background: none;
  box-shadow: none;
}

/* ===== Modal de Avance por puente — rediseño según boceto (2026-10-05,
   docs/disenos/modal-avance-boceto-1/2.png). Breakpoints del boceto:
   ≥1400 · ≥1200 · tablet · celular. ===== */

/* Avance Físico | Avance Financiero lado a lado */
.seg-paneles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1200px) {
  .seg-paneles { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.seg-panel .seg-title-center { margin-bottom: 0; }
.seg-2col-stats { align-items: stretch; }
.seg-2col-stats .seg-stat-box { display: flex; flex-direction: column; }
.seg-2col-stats .seg-stat-valor { flex: 1; display: flex; align-items: center; justify-content: center; }
.seg-2col-stats .seg-stat-input { margin: 10px; }

/* Historial: una sola barra desplegable, 3 columnas (1 en celular) */
.seg-historial-general > .seg-papelera-btn { display: block; }
.seg-historial-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px) {
  .seg-historial-3col { grid-template-columns: repeat(3, 1fr); }
}

/* Bloque "solo en modo edición": 4 columnas, 2 en tablet, 1 en celular */
.seg-solo-edicion .seg-resumen-4 {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .seg-solo-edicion .seg-resumen-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .seg-solo-edicion .seg-resumen-4 { grid-template-columns: repeat(4, 1fr); }
}

/* 3 tarjetas: Empleos / Habitantes / Ahorro de tiempo */
.seg-tarjetas3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .seg-tarjetas3 { grid-template-columns: repeat(3, 1fr); }
}
.seg-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(105, 27, 60, .08);
}
.seg-tarjeta .h5-oro { margin-bottom: 2px; }
.seg-tarjeta > p {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
  text-align: left;
}
.seg-tarjeta-cifra {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
}
.seg-empleos-barra {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--oro);
}
.seg-empleos-dir { display: block; height: 100%; background: var(--vino); }
.seg-empleos-split { display: flex; justify-content: space-between; gap: 8px; }
.seg-empleos-split .seg-empleo-cifra { display: inline; font-size: 18px; }
.seg-empleos-split .seg-empleo-label { display: inline; margin-left: 4px; }

/* Beneficios: cada viñeta es una celda de una cuadrícula */
.seg-benef-bloque .seg-benef-ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.seg-benef-bloque .seg-benef-ul li {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
}
@media (min-width: 640px)  { .seg-benef-bloque .seg-benef-ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .seg-benef-bloque .seg-benef-ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .seg-benef-bloque .seg-benef-ul { grid-template-columns: repeat(4, 1fr); } }

/* Fuerza de Trabajo | Maquinaria */
.seg-hdr-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vino-2);
  white-space: nowrap;
}
.seg-trabajo-maq { align-items: start; }
/* Los hijos del grid (Fuerza de Trabajo | Maquinaria) no deben ensancharse por
   su contenido: sin esto, en celular la tabla de frentes empujaba la columna
   más allá del modal y el total de personal quedaba fuera de pantalla. */
.seg-trabajo-maq > * { min-width: 0; }
.seg-hdr-count { flex: none; }

/* ===== Ajustes al rediseño del modal de Avance (2026-10-05, 2da ronda) ===== */

/* Títulos de los 2 paneles con ícono (como las demás secciones) */
.seg-panel .h5-oro { margin-bottom: 0; }

/* "Agregar avance de la semana": 3 columnas como el historial, 1 en celular */
.seg-semana-nueva-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px) {
  .seg-semana-nueva-cols { grid-template-columns: repeat(3, 1fr); }
}
.seg-semana-nueva-col {
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.seg-semana-nueva-col input { width: 100%; box-sizing: border-box; }

/* Línea de tiempo: inicio · término · fecha actual. La escala llega hasta lo
   que quede más lejos entre término y hoy, así que "Fecha actual" puede
   quedar DESPUÉS del punto de término (ese tramo se pinta en rojo). */
.seg-timeline-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.seg-timeline-top .seg-fecha-box.seg-fecha-inicio { text-align: left; }
.seg-timeline-top .seg-fecha-box.seg-fecha-termino { text-align: right; }
.seg-timeline-top .seg-fecha-termino h5 { flex-direction: row-reverse; }
.seg-timeline-bar {
  position: relative;
  height: 10px;
  margin: 46px 16px 58px;
  border-radius: 6px;
  background: #EDE6EA;
}
.seg-timeline-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--vino), var(--oro));
}
.seg-timeline-exceso {
  position: absolute;
  top: 0;
  height: 100%;
  background: #C0334B;
  border-radius: 0 6px 6px 0;
}
.seg-tl-punto-wrap {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.seg-tl-punto {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--vino);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.seg-tl-punto-termino { border-color: var(--oro); }
.seg-tl-punto-hoy { background: var(--vino); border-color: #fff; box-shadow: 0 0 0 2px var(--vino), 0 1px 4px rgba(0, 0, 0, .3); }
.seg-tl-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  color: var(--vino-2);
}
.seg-tl-label b { font-weight: 800; color: var(--ink); }
.seg-tl-abajo .seg-tl-label { top: 20px; }
.seg-tl-arriba .seg-tl-label { bottom: 20px; }
.seg-tl-hoy .seg-tl-label b { color: var(--vino); }
.seg-tl--ini .seg-tl-label { left: -6px; transform: none; text-align: left; }
.seg-tl--fin .seg-tl-label { left: auto; right: -6px; transform: none; text-align: right; }

/* Fuerza de Trabajo | Maquinaria: lado a lado desde 900px (antes desde 640) */
.seg-trabajo-maq { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .seg-trabajo-maq { grid-template-columns: 1fr 1fr; }
}

/* Lista de frentes con divs; en celular cada frente es una card */
.seg-frentes-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.seg-frentes-cab,
.seg-fi-item {
  display: grid;
  grid-template-columns: 40px 1fr 90px;
  gap: 10px;
  align-items: center;
}
.seg-frentes-cab {
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--ink-2);
}
.seg-frentes-cab span:last-child { text-align: right; }
.seg-fi-item {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.seg-fi-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vino);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.seg-fi-desc { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.seg-fi-pers {
  text-align: right;
  font-size: 16px;
  font-weight: 800;
  color: var(--vino);
  font-family: 'Archivo', sans-serif;
}
.seg-fi-unid { display: none; font-size: 11px; font-weight: 600; color: var(--ink-2); font-family: inherit; }
@media (max-width: 640px) {
  .seg-frentes-cab { display: none; }
  .seg-fi-item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "num pers" "desc desc";
    row-gap: 8px;
    padding: 12px 14px;
  }
  .seg-fi-num {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    grid-area: num;
    justify-self: start;
    width: auto;
    height: auto;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
  }
  .seg-fi-num::before { content: 'Frente #'; font-weight: 600; margin-right: 3px; }
  .seg-fi-desc { grid-area: desc; font-size: 14px; }
  .seg-fi-pers { grid-area: pers; }
  .seg-fi-unid { display: inline; }
}

/* Maquinaria: íconos más grandes (antes 34px); en celular, tarjeta vertical */
.seg-maq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.seg-maq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.seg-maq-card img {
  flex: none;
  width: 58px;
  height: 58px;
  padding: 4px;
  object-fit: contain;
  border-radius: 50%;
  background: #F4EEF1;
}
.seg-maq-nombre { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.seg-maq-cant {
  flex: none;
  min-width: 38px;
  padding: 4px 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--vino);
  border: 1px solid var(--vino);
  border-radius: 8px;
}
@media (max-width: 640px) {
  .seg-maq-card { flex-direction: column; text-align: center; gap: 6px; padding: 10px 8px; }
  .seg-maq-card img { width: 64px; height: 64px; }
}

/* ===== Tablas de "Permisos Requeridos" con DIVS (portado TAL CUAL de node-Express/public/estilos.css,
   2026-10-05): cada dependencia se dibuja con su propio constructor (tramitologia.ejs, ver
   PERMISOS_TABLA_DIV) a partir del JSON del estado. ===== */
/* 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;
}


/* ===== Modal "Seguimiento de acciones" — igual que el prototipo (2026-10-06) ===== */
.prio-obra-nombre {
  margin: 0 0 12px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  color: var(--vino);
}
.prio-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.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, #F4E4EA); }
.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; }
@media (max-width: 768px) {
  .prio-filtros { flex-direction: column; align-items: stretch; }
  .prio-enviar-correo-btn { justify-content: center; }
  .prio-filtro-responsable select { flex: 1 1 auto; }
}

/* Selects de filtro (Responsable del Seguimiento de acciones, "¿Qué tabla enviar?" del correo) — igual que el prototipo */
.mapa-select {
  border: 1.5px solid var(--vino-soft, #F4E4EA);
  background: var(--vino-soft, #F4E4EA);
  color: var(--vino);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  font-family: inherit;
}
.mapa-select:hover,
.mapa-select:focus {
  border-color: var(--vino-2);
  outline: none;
}


/* ===== Supervisión: tarjeta por puente + filtro por mes + 3 formas de ver los PDFs (2026-10-19) =====
   Reemplaza la tabla #tblSupervision (sus reglas de arriba quedaron sin uso). Los PDFs son SIEMPRE el mismo
   HTML (.sup-pdf > .pdf-card); la forma de verlos (lista / chips / tarjetas) solo cambia la clase
   .sup-vista-* del contenedor #supPuentes. No usar la etiqueta <header> en esta vista: este archivo le da
   position:sticky;z-index:40 a todo <header>. */
.sup-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 16px; margin: 4px 0 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.sup-filtro { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sup-filtro select {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: #FCFAFB;
}
.sup-barra { align-items: flex-start; }
.sup-nav-info { flex: 1 1 320px; min-width: 0; }
.sup-nav-info[hidden] { display: none; }
.sup-nav-tit { font-size: clamp(.95rem, 1.7vw, 1.15rem); font-weight: 800; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.sup-nav-sub { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.inf-barra {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.inf-barra[hidden] { display: none; }
.sup-chip {
  flex: none; min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 13px; font-weight: 800; color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; transition: all .12s;
}
.sup-chip:hover { background: var(--vino-soft); border-color: var(--vino); color: var(--vino); }
.sup-chip.activo { background: var(--vino); border-color: var(--vino); color: #fff; box-shadow: 0 0 0 3px rgba(168, 124, 54, .35), 0 6px 14px rgba(105, 27, 60, .28); transform: translateY(-1px); }
.sup-vistas { margin-left: auto; flex: none; display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sup-vistas button { display: inline-flex; align-items: center; gap: 6px; border: none; background: #fff; padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.sup-vistas button svg { width: 15px; height: 15px; }
.sup-vistas button + button { border-left: 1px solid var(--line); }
.sup-vistas button:hover { background: var(--vino-soft); }
.sup-vistas button.activo { background: var(--vino); color: #fff; }

.sup-carrusel { position: relative; }
.sup-flecha {
  position: absolute; top: 150px; z-index: 5; width: 44px; height: 44px; padding: 0 0 4px; border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--vino); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(59, 10, 32, .22); transition: all .12s;
}
.sup-flecha-prev { left: -56px; }
.sup-flecha-next { right: -56px; }
.sup-flecha:hover:not(:disabled) { background: var(--vino); color: #fff; }
.sup-flecha:disabled { opacity: .3; cursor: default; }
.sup-carrusel[data-vista="tarjetas"] .sup-flecha { display: none; }
@media (max-width: 1380px) { /* sin margen libre a los lados: las flechas se montan sobre los bordes del puente */
  .sup-flecha { width: 38px; height: 38px; font-size: 24px; background: rgba(255, 255, 255, .94); }
  .sup-flecha-prev { left: 6px; }
  .sup-flecha-next { right: 6px; }
}
.sup-puentes { display: grid; gap: 16px; }
.sup-puentes.sup-vista-lista {
  position: relative; display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 2px 2px 14px; margin: 0 -2px; scrollbar-width: thin; scrollbar-color: var(--vino-soft) transparent;
}
.sup-puentes.sup-vista-lista > .sup-puente { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; }
.sup-puente { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.sup-puente-cab {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(100deg, var(--vino-soft), #fff 70%);
}
.sup-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--vino); color: #fff; font-weight: 800; font-size: .9rem; }
.sup-puente-titulo { flex: 1; min-width: 0; }
.sup-nombre { font-weight: 800; font-size: 1rem; color: var(--ink); }
.sup-mun { font-size: 12px; color: var(--muted); }
.sup-contador { flex: none; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--vino-soft); font-size: 11.5px; font-weight: 700; color: var(--vino); }
.sup-add-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--vino);
  border-radius: 8px; background: #fff; color: var(--vino); font-size: 12px; font-weight: 700; cursor: pointer;
}
.sup-add-btn img { width: 15px; height: 15px; }
.sup-add-btn:hover { background: var(--vino); color: #fff; }
.sup-add-btn:hover img { filter: brightness(0) invert(1); }

.sup-cols { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); }
.sup-col { padding: 14px 18px 16px; min-width: 0; }
.sup-col + .sup-col { border-left: 1px solid var(--line); }
.sup-col-tit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.sup-n { padding: 1px 8px; border-radius: 999px; background: var(--vino-soft); color: var(--vino); }
.sup-n:empty { display: none; }
.sup-vacio { margin: 0; font-size: 12.5px; }
.sup-vacio[hidden], .sup-otros[hidden] { display: none; }
.sup-otros { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; color: var(--oro); }
.sup-pdf { position: relative; }
.pdf-card-sinfecha { font-weight: 500; font-style: italic; color: var(--muted); }

.sup-del {
  position: absolute; top: -6px; right: -6px; z-index: 2; width: 22px; height: 22px; padding: 0; border: none; background: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.sup-del img { width: 22px; height: 22px; }

/* Vista "Lista": el <article> tiene ALTO FIJO (así los botones numerados de abajo no se mueven) y cada columna
   desliza en vertical por dentro cuando los archivos no caben. El encabezado y el filtro de cada columna quedan fijos. */
.sup-puentes.sup-vista-lista { --sup-alto: clamp(400px, calc(100vh - 430px), 640px); align-items: stretch; }
.sup-vista-lista .sup-puente { height: var(--sup-alto); display: flex; flex-direction: column; }
.sup-vista-lista .sup-puente-cab { flex: none; }
.sup-vista-lista .sup-cols { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.sup-vista-lista .sup-col { display: flex; flex-direction: column; min-height: 0; }
.sup-vista-lista .sup-col-tit, .sup-vista-lista .sup-filtro { flex: none; }
.sup-vista-lista .sup-col .pdf-cards {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px;
}
@supports not selector(::-webkit-scrollbar) { /* Firefox */
  .sup-vista-lista .sup-col .pdf-cards { scrollbar-width: thin; scrollbar-color: var(--vino) var(--vino-soft); }
}
.sup-vista-lista .sup-col .pdf-cards::-webkit-scrollbar { width: 9px; }
.sup-vista-lista .sup-col .pdf-cards::-webkit-scrollbar-track { background: var(--vino-soft); border-radius: 999px; }
.sup-vista-lista .sup-col .pdf-cards::-webkit-scrollbar-thumb { background: var(--vino); border-radius: 999px; }
.sup-vista-lista .sup-vacio, .sup-vista-lista .sup-otros { flex: none; }

/* Vista "Lista": una fila por PDF */
.sup-vista-lista .pdf-cards { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.sup-vista-lista .pdf-card {
  width: 100%; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
  text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--vino); border-radius: 10px;
  background: #fff; box-shadow: none; cursor: pointer; font-family: inherit;
}
.sup-vista-lista .pdf-card-icono { margin: 0; width: 20px; height: 20px; flex: none; }
.sup-vista-lista .pdf-card-desc { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-clamp: 1; -webkit-line-clamp: 1; }
.sup-vista-lista .pdf-card-fecha { margin: 0; flex: none; font-size: 11px; }
.sup-vista-lista .pdf-card:hover { background: var(--vino-soft); color: var(--ink); border-color: var(--vino); box-shadow: none; transform: none; }
.sup-vista-lista .pdf-card:hover .pdf-card-fecha { color: var(--vino); }
.sup-vista-lista .sup-pdf-editable .pdf-card { padding-right: 38px; }
.sup-vista-lista .sup-del { top: 50%; right: 8px; transform: translateY(-50%); }

/* Vista "Tarjetas": las de siempre (.pdf-card), en cuadrícula que salta de línea */
.sup-vista-tarjetas .pdf-cards { flex-wrap: wrap; }

@media (max-width: 760px) {
  .sup-cols { grid-template-columns: 1fr; }
  .sup-col + .sup-col { border-left: none; border-top: 1px solid var(--line); }
  .sup-resumen { margin-left: 0; flex-basis: 100%; }
  .sup-puente-cab { flex-wrap: wrap; }
  .sup-puente-titulo { flex: 1 1 calc(100% - 60px); }
}


/* ===== Modal "Subir PDF de supervisión" rediseñado (2026-10-19) =====
   Los selectores llevan #modalSupervisionUpload para ganarle a la regla de "campo editable" (borde punteado) de más arriba. */
#modalSupervisionUpload .supv-card { max-width: 500px; }
#modalSupervisionUpload .supv-top { align-items: center; padding: 20px 76px 20px 22px; background: linear-gradient(120deg, #4a1129, var(--vino) 55%, var(--vino-2)); }
.supv-top-ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); }
.supv-top-ico svg { width: 22px; height: 22px; }
.supv-top-txt { flex: 1; min-width: 0; margin-right: auto; }
.supv-top-txt h3 { margin: 0; }
.supv-top-txt .mt-mun { margin: 3px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.supv-body { display: grid; gap: 16px; padding: 20px 22px 8px; overflow-y: auto; }
.supv-campo { display: grid; gap: 6px; margin: 0; }
.supv-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.supv-label em { margin-left: 6px; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.supv-ayuda { font-size: 11.5px; line-height: 1.35; color: var(--muted); }

#modalSupervisionUpload input.supv-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; color: var(--ink); background: #FCFAFB;
  border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s, box-shadow .15s, background .15s;
}
#modalSupervisionUpload input.supv-input:hover { background: #fff; border: 1px solid var(--vino-2); }
#modalSupervisionUpload input.supv-input:focus { background: #fff; border: 1px solid var(--vino); box-shadow: 0 0 0 3px var(--vino-soft); outline: none; }

.supv-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.supv-tipo {
  display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; font-family: inherit; color: var(--ink); transition: all .15s;
}
.supv-tipo b { font-size: 13px; }
.supv-tipo small { font-size: 11.5px; color: var(--muted); }
.supv-tipo:hover { border-color: var(--vino-2); background: var(--vino-soft); }
.supv-tipo.activo { border-color: var(--vino); background: var(--vino-soft); box-shadow: 0 0 0 3px rgba(105, 27, 60, .12); }
.supv-tipo.activo b { color: var(--vino); }

.supv-drop {
  display: grid; justify-items: center; gap: 3px; padding: 22px 16px; text-align: center; cursor: pointer;
  border: 2px dashed #CDB8C2; border-radius: 14px; background: #FCFAFB; color: var(--ink-2); transition: all .15s;
}
.supv-drop[hidden] { display: none; }
.supv-drop svg { width: 40px; height: 40px; color: var(--vino-2); margin-bottom: 4px; }
.supv-drop b { font-size: 14px; color: var(--ink); }
.supv-drop span { font-size: 12px; color: var(--muted); }
.supv-drop input { display: none; }
.supv-drop:hover, .supv-drop.arrastrando { border-color: var(--vino); background: var(--vino-soft); }
.supv-drop.arrastrando { transform: scale(1.01); }

.supv-archivo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--vino-soft); border-left: 4px solid var(--verde); border-radius: 12px; background: var(--verde-soft); }
.supv-archivo[hidden] { display: none; }
.supv-archivo > img { flex: none; width: 30px; height: 30px; }
.supv-archivo-info { flex: 1; min-width: 0; display: grid; }
.supv-archivo-info b { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supv-archivo-info small { font-size: 11.5px; color: var(--muted); }
.supv-quitar { flex: none; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: rgba(255, 255, 255, .75); cursor: pointer; display: grid; place-items: center; }
.supv-quitar img { width: 18px; height: 18px; }
.supv-quitar:hover { background: #fff; }

.supv-msg { margin: 0; min-height: 1.1em; font-size: 12.5px; font-weight: 600; color: var(--rojo); }
.supv-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; }
.supv-btn-sec, .supv-btn-pri { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .15s; }
.supv-btn-sec { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.supv-btn-sec:hover { border-color: var(--vino); color: var(--vino); }
.supv-btn-pri { flex: 1; max-width: 260px; background: var(--vino); color: #fff; border: 1px solid var(--vino); box-shadow: 0 6px 16px rgba(105, 27, 60, .28); }
.supv-btn-pri svg { width: 17px; height: 17px; }
.supv-btn-pri:hover:not(:disabled) { background: var(--vino-2); transform: translateY(-1px); }
.supv-btn-pri:disabled { opacity: .6; cursor: default; box-shadow: none; }
@media (max-width: 520px) { .supv-tipos { grid-template-columns: 1fr; } .supv-pie { flex-direction: column-reverse; } .supv-btn-pri { max-width: none; } }

/* Texto indicativo del selector de puentes (Supervisión › Lista) */
.inf-barra .inf-titulo { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 0 0 4px; }
.inf-barra .inf-titulo span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vino); }
.inf-barra .inf-titulo small { font-size: 11.5px; color: var(--muted); }

/* ===== Supervisión › Lista en celular: alto automático, flechas fuera del contenido y listas con scroll propio ===== */
@media (max-width: 760px) {
  .sup-puentes.sup-vista-lista { align-items: flex-start; }
  .sup-vista-lista .sup-puente { height: auto; display: block; }
  .sup-vista-lista .sup-cols { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; }
  .sup-vista-lista .sup-col { display: block; }
  .sup-vista-lista .sup-col .pdf-cards { max-height: 300px; }
  /* Las flechas ya no se montan sobre los archivos: van arriba del puente, una en cada esquina */
  .sup-carrusel { padding-top: 52px; }
  .sup-flecha { top: 0; width: 44px; height: 44px; font-size: 26px; background: #fff; }
  .sup-flecha-prev { left: 0; }
  .sup-flecha-next { right: 0; }
  .sup-carrusel::before { /* etiqueta entre las dos flechas */
    content: "Deslizar o usar las flechas"; position: absolute; top: 0; left: 52px; right: 52px; height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center;
  }
  .sup-carrusel[data-vista="tarjetas"] { padding-top: 0; }
  .sup-carrusel[data-vista="tarjetas"]::before { display: none; }
  .sup-nav-tit { font-size: 1rem; }
}

/* Galería de fichas (Ficha Técnica): diseño original + número sobre la franja vino + constructora completa */
.card .thumb{overflow:visible}
.card .thumb img{border-radius:14px 14px 0 0}
.card .num-puente{position:absolute;left:12px;bottom:0;z-index:2;min-width:38px;height:34px;padding:0 10px;display:grid;place-items:center;background:#691B3C;color:#fff;font:800 15px 'Archivo',sans-serif;border-radius:10px 10px 0 0}
.gal .card .body-top{height:auto;flex:1 1 auto}
.gal .card .body-top .emp{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;height:auto;min-height:65px;margin-top:auto}
.gal .card .body-top h4+.mun{margin-bottom:12px}
.gal .card .body-top .emp{padding:10px 14px 12px;font-size:12px;line-height:1.4;color:#F0E3C4}
.gal .card .body-top .emp span{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#C9A15A;margin-bottom:2px}
.gal .card .body-top .emp{font-size:10.5px;line-height:1.35}
.gal .card .body-top .emp span{font-size:9px}
/* chip año/etapa: año en blanco + etapa en bloque vino */
.gal .card .badge{display:inline-flex;align-items:stretch;padding:0;background:#fff;color:#691B3C;border:none;border-radius:7px;overflow:hidden;font-size:12.5px;font-weight:800;line-height:1;box-shadow:0 2px 8px rgba(59,10,32,.22);max-width:calc(100% - 130px)}
.gal .card .badge:not(:has(.badge-chico)){padding:6px 10px}
.gal .card .badge .badge-sep{display:none}
.gal .card .badge .badge-chico{display:block;margin-left:9px;padding:6px 10px;background:#691B3C;color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:1}
.gal .card .badge{padding-left:10px}
.gal .card .badge .badge-chico{align-self:stretch;display:flex;align-items:center}
.gal .card .badge{align-items:center}
/* chip año/etapa: cinta con punta, pegada al borde izquierdo */
.gal .card .badge,.gal .card .badge:not(:has(.badge-chico)){top:14px;left:0;display:flex;align-items:baseline;gap:7px;padding:7px 22px 7px 14px;background:#691B3C;color:#fff;border:none;border-radius:0;box-shadow:none;overflow:visible;font-size:14px;font-weight:800;letter-spacing:.01em;clip-path:polygon(0 0,100% 0,calc(100% - 11px) 50%,100% 100%,0 100%);max-width:calc(100% - 120px)}
.gal .card .badge .badge-chico{display:inline;margin:0;padding:0;background:none;color:#E0BFCC;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;align-self:auto}
/* chip estatus: cinta espejo (punta a la izquierda) pegada al borde derecho, color por estatus */
.gal .card .estb.chip{top:14px;right:0;padding:7px 14px 7px 24px;border:none;border-radius:0;box-shadow:none;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;gap:0;clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%)}
.gal .card .estb.chip::before{display:none}
.gal .card .estb.c-v{background:#1F7A52;color:#fff}
.gal .card .estb.c-o{background:#C77D00;color:#fff}
.gal .card .estb.c-r{background:#C0334B;color:#fff}
.gal .card .estb.c-g{background:#7A6A72;color:#fff}
.gal .card .estb.c-b{background:#1F4569;color:#fff}
/* tarjeta angular, a juego con las cintas */
.gal .card{border-radius:3px;border:none;box-shadow:0 2px 8px rgba(59,10,32,.14);transition:box-shadow .2s,transform .2s}
.gal .card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(59,10,32,.26)}
.card .thumb img{border-radius:0}
.gal .card .thumb{background:#EAE2E6}
.gal .card .num-puente{left:0;bottom:0;height:30px;min-width:0;padding:0 22px 0 14px;border-radius:0;font-size:14px;letter-spacing:.02em;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 100%,0 100%)}
.gal .card .body-top{border-top:3px solid #A87C36;background:#691B3C}
.gal .card .body-top h4{padding-top:4px}
.gal .card-add{border-radius:3px}
/* ajustes: esquinas de abajo, número como antes, sin línea dorada, body-top nuevo */
.gal .card{border-radius:3px 3px 14px 14px;overflow:hidden}
.gal .card .num-puente{left:12px;min-width:38px;height:34px;padding:0 10px;border-radius:10px 10px 0 0;clip-path:none;font-size:15px}
.gal .card .body-top{border-top:none;background:#691B3C;padding:16px 18px 0;position:relative}
.gal .card .body-top h4{padding-top:0;font-size:17px;font-weight:800;line-height:1.2;letter-spacing:-.005em}
.gal .card .body-top .mun{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:13px;color:#E6CD9A}
.gal .card .body-top .mun::before{content:"";flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6CD9A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.500C19 14.800 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.500' r='2.500'/%3E%3C/svg%3E") center/contain no-repeat}
.gal .card .body-top h4+.mun{margin-bottom:16px}
.gal .card .body-top .emp{padding:11px 18px 13px;width:calc(100% + 36px);margin-left:-18px;margin-right:-18px}
.gal .card .body-top .emp{padding-bottom:16px}
/* forma de U: esquinas de arriba rectas, chips pegados arriba; body claro + franja de constructora vino */
.gal .card{border-radius:0 0 14px 14px;background:#FBF7F9}
.gal .card .badge,.gal .card .badge:not(:has(.badge-chico)),.gal .card .estb.chip{top:0}
.gal .card .body-top{background:#FBF7F9}
.gal .card .body-top h4{color:#691B3C}
.gal .card .body-top .mun{color:#6F5F67}
.gal .card .body-top .mun::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A87C36' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.500C19 14.800 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.500' r='2.500'/%3E%3C/svg%3E") center/contain no-repeat}
.gal .card .body-top .emp{background:#691B3C;color:#fff}
.gal .card .body-top .emp span{color:#E6CD9A}
/* variante: cuerpo vino + franja de constructora crema */
.gal .card{background:#691B3C}
.gal .card .body-top{background:#691B3C}
.gal .card .body-top h4{color:#fff}
.gal .card .body-top .mun{color:#E6CD9A}
.gal .card .body-top .mun::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6CD9A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.500C19 14.800 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.500' r='2.500'/%3E%3C/svg%3E") center/contain no-repeat}
.gal .card .body-top .emp{background:#EFE3C8;color:#3B0A21;font-weight:700}
.gal .card .body-top .emp span{color:#8A6420}
/* ajustes: nombre más chico, municipio más visible, constructora sin franja (etiqueta en cinta) */
.gal .card .body-top h4{font-size:15px;font-weight:700}
.gal .card .body-top .mun{font-size:13px;font-weight:600;color:#F1DDE5}
.gal .card .body-top .emp{background:none;color:#F3E6EB;font-weight:500;border-top:1px dashed rgba(255,255,255,.28);padding:12px 18px 16px;font-size:11px}
.gal .card .body-top .emp span{display:inline-block;margin:0 0 6px -18px;padding:3px 16px 3px 18px;background:#C9A15A;color:#3B0A21;font-size:9px;font-weight:800;letter-spacing:.1em;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%)}
.gal .card .body-top .emp span{display:block;width:fit-content}
/* body-top con esquinas redondeadas sobre una franja de constructora oscura que asoma por detrás */
.gal .card{background:#3B0A21}
.gal .card .body-top{flex:0 0 auto;position:relative;z-index:1;border-radius:0 0 14px 14px;padding-bottom:16px}
.gal .card .body-top:last-child{flex:1 1 auto}
.gal .card .emp{flex:1 1 auto;display:block;position:relative;z-index:0;margin:-14px 0 0;padding:28px 18px 14px;width:auto;height:auto;min-height:0;overflow:visible;-webkit-line-clamp:unset;line-clamp:unset;background:#3B0A21;border-top:none;color:#F0E3C4;font-size:11px;line-height:1.4;font-weight:600;clip-path:none}
.gal .card .emp span{display:block;width:auto;margin:0 0 2px;padding:0;background:none;clip-path:none;color:#C9A15A;font-size:9px;font-weight:800;letter-spacing:.1em}
/* body-top redondeado también arriba (se monta sobre la foto), sombras y hover nuevos */
.gal .card .body-top{border-radius:14px;margin-top:-14px}
.gal .card .num-puente{bottom:14px;left:20px}
.gal .card{box-shadow:0 1px 2px rgba(59,10,32,.14),0 10px 22px -8px rgba(59,10,32,.3);transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s cubic-bezier(.2,.7,.3,1)}
.gal .card:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(59,10,32,.16),0 22px 36px -10px rgba(105,27,60,.5)}
.gal .card:active{transform:translateY(-2px);box-shadow:0 1px 3px rgba(59,10,32,.18),0 10px 20px -8px rgba(105,27,60,.4)}
.gal .card:hover .num-puente{background:#8A2A52}
.gal .card .num-puente{transition:background .25s}
/* sombra visible en reposo; hover sin movimiento: aro dorado + sombra un poco más fuerte */
.gal .card{transform:none;box-shadow:0 4px 14px rgba(59,10,32,.22);transition:box-shadow .2s}
.gal .card:hover,.gal .card:active{transform:none;box-shadow:0 0 0 2px #C9A15A,0 8px 22px rgba(59,10,32,.32)}
.gal .card:hover .num-puente{background:#691B3C}
.gal .card .thumb{aspect-ratio:2/1}
/* body-top de alto natural; la franja de constructora es la que se estira; foto de alto fijo por proporción */
.gal .card .body-top,.gal .card .body-top:last-child{flex:0 0 auto}
.gal .card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* sin constructora: no hay franja; la tarjeta se queda de alto natural */
.gal .card:not(:has(.emp)){align-self:start;background:#691B3C}
/* sin constructora: la franja se muestra vacía, del color del body-top (rellena el alto de la fila sin verse como hueco) */
.gal .card:not(:has(.emp)){align-self:stretch}
.gal .card .emp.emp-vacio{background:#691B3C;margin:0;padding:0;min-height:0}
.gal .card:has(.emp-vacio) .body-top{border-radius:14px 14px 0 0}
.gal .card .thumb{aspect-ratio:16/10}
/* Supervisión: etapas de un mismo puente dentro de una sola ficha (selector Año/etapa) */
.sup-etapa{display:contents}
.sup-etapa[hidden]{display:none}
/* Supervisión: barra de navegación sin título (el subtítulo toma su tamaño) y cabecera de cada puente en vino */
.sup-nav-sub{margin-top:0;font-size:clamp(.95rem,1.7vw,1.15rem);font-weight:800;line-height:1.2;color:var(--ink)}
.sup-puente-cab{background:var(--vino);border-bottom:none}
.sup-puente-cab .sup-num{background:transparent;border:2px solid #fff;color:#fff}
.sup-puente-cab .sup-nombre,.sup-puente-cab .sup-mun{color:#fff}
.sup-puente-cab .sup-mun{opacity:.85}
.sup-puente-cab .sup-contador,.sup-puente-cab .sup-chip-etapa{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);color:#fff;padding:5px 14px;font-size:13px;font-weight:800;border-radius:999px;flex:none;white-space:nowrap}
.sup-puente-cab .sup-chip-etapa::before{background:#fff}
.sup-puente-cab .sup-add-btn{border-color:#fff}
.sup-puente-cab .sup-contador,.sup-puente-cab .sup-chip-etapa{background:#fff;border:1px solid #fff;color:var(--vino)}
.sup-puente-cab .sup-chip-etapa::before{background:var(--vino)}
.sup-puente-cab .sup-num{background:#fff;border:1px solid #fff;color:var(--vino)}

/* Proyecto Ejecutivo: tarjetas por puente (reemplazan la tabla) */
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.pe-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.pe-cab{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--vino);color:#fff}
.pe-num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--vino);font-weight:800;font-size:.95rem}
.pe-titulo{flex:1;min-width:0}
.pe-nombre{font-weight:800;font-size:.98rem;line-height:1.2}
.pe-mun{font-size:12px;opacity:.85;margin-top:2px}
.pe-etapa{flex:none;padding:4px 12px;border-radius:999px;background:#fff;color:var(--vino);font-size:11.5px;font-weight:800;white-space:nowrap}
.pe-cuerpo{display:grid;gap:14px;padding:16px;flex:1}
.pe-lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pe-avance-fila{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pe-pct{font-size:1.7rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.pe-barra{height:9px;border-radius:6px;background:#EEE6EA;overflow:hidden;margin-top:8px}
.pe-relleno{height:100%;border-radius:6px}
.pe-dato{display:grid;gap:3px}
.pe-val{font-size:13px;color:var(--ink);font-weight:600}
.pe-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:#FBF7F9}
.pe-planos{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.pe-plano{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px;border:1px solid var(--vino);border-radius:8px;background:#fff;color:var(--vino);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.pe-plano img{width:16px;height:16px;object-fit:contain;flex:none}
.pe-plano span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.pe-plano:hover{background:var(--vino);color:#fff}
.pe-plano:hover img{filter:brightness(0) invert(1)}
.pe-editar{flex:none;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid var(--vino);border-radius:8px;background:#fff;color:var(--vino);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.pe-editar img{width:12px;height:12px}
.pe-editar:hover{background:var(--vino);color:#fff}
.pe-editar:hover img{filter:brightness(0) invert(1)}
@media (max-width:640px){.pe-grid{grid-template-columns:1fr}}

/* Proyecto Ejecutivo: cuerpo con anillo de avance + proyectista y planos (sin pie) */
.pe-cuerpo{display:flex;align-items:center;gap:18px;padding:18px 16px}
.pe-anillo{flex:none;position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),#EEE6EA 0)}
.pe-anillo::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.pe-anillo span{position:relative;font-size:1.35rem;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums}
.pe-anillo small{font-size:.8rem;font-weight:800}
.pe-info{flex:1;min-width:0;display:grid;gap:12px}
.pe-info .pe-editar{justify-self:start}
.pe-pie{display:none}

/* Proyecto Ejecutivo: fichas tipo hoja de plano (papel con cuadrícula, cabecera PE-NN y cajetín) */
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:22px}
.pe-hoja{position:relative;display:flex;flex-direction:column;padding:22px 24px 24px;background-color:#F4EDDD;background-image:linear-gradient(rgba(105,27,60,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(105,27,60,.07) 1px,transparent 1px);background-size:26px 26px;border:2px solid var(--vino);box-shadow:inset 0 0 0 6px #F4EDDD,inset 0 0 0 7px var(--vino),var(--shadow)}
.pe-esq{position:absolute;width:14px;height:14px;border:2px solid var(--oro)}
.pe-esq-a{top:-2px;left:-2px;border-right:none;border-bottom:none}
.pe-esq-b{top:-2px;right:-2px;border-left:none;border-bottom:none}
.pe-esq-c{bottom:-2px;left:-2px;border-right:none;border-top:none}
.pe-esq-d{bottom:-2px;right:-2px;border-left:none;border-top:none}
.pe-hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.pe-hoja-no{padding:4px 12px;background:var(--vino);color:#fff;font:800 .85rem ui-monospace,Consolas,monospace;letter-spacing:.12em}
.pe-etapa{padding:4px 12px;border:2px solid var(--vino);background:transparent;color:var(--vino);border-radius:0;font:800 .74rem ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.pe-hoja-nombre{font-family:'Archivo';font-weight:800;font-size:1.45rem;line-height:1.15;color:var(--vino)}
.pe-hoja-mun{margin-top:4px;font-size:.92rem;color:var(--ink-2)}
.pe-lbl{font:800 10.5px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pe-avance{display:flex;align-items:center;gap:18px;margin:20px 0 20px}
.pe-anillo{flex:none;position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),rgba(105,27,60,.14) 0)}
.pe-anillo::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#F4EDDD;box-shadow:0 0 0 2px rgba(105,27,60,.15)}
.pe-anillo span{position:relative;font:800 1.45rem/1 ui-monospace,Consolas,monospace;color:var(--c)}
.pe-anillo small{font-size:.8rem}
.pe-avance-txt{display:grid;gap:5px}
.pe-avance-txt b{font-size:1.02rem}
.pe-cajetin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);border:2px solid var(--vino);background:rgba(255,255,255,.55);margin-top:auto}
.pe-cel{display:grid;gap:8px;align-content:start;padding:14px 16px;border-right:2px solid var(--vino);border-bottom:2px solid var(--vino)}
.pe-cel:nth-child(2n){border-right:none}
.pe-cel:nth-last-child(-n+1),.pe-cel:nth-last-child(2):nth-child(odd){border-bottom:none}
.pe-cel-acc{grid-column:1/-1;border-right:none;border-top:none}
.pe-val{font-size:1.02rem;font-weight:700;color:var(--ink)}
.pe-planos{display:grid;gap:8px}
.pe-hojab{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:2px solid var(--vino);border-radius:0;background:#fff;color:var(--vino);cursor:pointer;font-family:inherit;text-align:left}
.pe-hojab img{width:22px;height:22px;object-fit:contain;flex:none}
.pe-hojab span{display:grid;min-width:0;line-height:1.2}
.pe-hojab b{font:800 .8rem ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.pe-hojab small{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-hojab:hover{background:var(--vino);color:#fff}
.pe-hojab:hover small{color:#E0BFCC}
.pe-hojab:hover img{filter:brightness(0) invert(1)}
.pe-sinplano{font-size:.88rem;color:var(--muted)}
.pe-editar{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:2px solid var(--oro);border-radius:0;background:transparent;color:var(--vino);font:800 .75rem ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pe-editar img{width:13px;height:13px}
.pe-editar:hover{background:var(--oro);color:#fff}
.pe-editar:hover img{filter:brightness(0) invert(1)}
@media (max-width:560px){
  .pe-grid{grid-template-columns:1fr}
  .pe-hoja{padding:18px 16px 20px}
  .pe-cajetin{grid-template-columns:1fr}
  .pe-cel{border-right:none}
}
/* Proyecto Ejecutivo: ficha blanca con la cabecera de Seguimiento y Supervisión (sin cuadrícula ni papel) */
.pe-hoja{padding:0;overflow:hidden;background:#fff;background-image:none;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.pe-cab{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--vino);color:#fff}
.pe-num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--vino);font-weight:800;font-size:.9rem}
.pe-titulo{flex:1;min-width:0}
.pe-nombre{font-weight:800;font-size:1rem;color:#fff}
.pe-mun{font-size:12px;color:#fff;opacity:.85}
.pe-cab .pe-etapa{flex:none;padding:5px 14px;border:1px solid #fff;border-radius:999px;background:#fff;color:var(--vino);font:800 13px/1.2 'Inter',system-ui,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap}
.pe-cuerpo{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.pe-hoja .pe-avance{margin-top:0}
.pe-anillo::before{background:#fff}
.pe-cajetin{background:#fff;border-color:var(--vino)}
.pe-hoja .pe-cuerpo{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
.pe-hoja .pe-cajetin{width:100%}
.pe-hoja .pe-avance{align-self:flex-start}
/* Proyecto Ejecutivo: una sola fila de cajetín = gráfica | proyectista | planos */
.pe-hoja .pe-cajetin{grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr)}
.pe-hoja .pe-cel{border-right:2px solid var(--vino);border-bottom:none}
.pe-hoja .pe-cel-planos{border-right:none}
.pe-hoja .pe-cel-acc{grid-column:1/-1;border-right:none;border-top:2px solid var(--vino)}
.pe-hoja .pe-cel-grafica{align-content:center;justify-items:center;padding:14px 18px}
.pe-hoja .pe-anillo{width:84px;height:84px}
.pe-hoja .pe-anillo::before{inset:9px}
@media (max-width:560px){
  .pe-hoja .pe-cajetin{grid-template-columns:1fr}
  .pe-hoja .pe-cel{border-right:none;border-bottom:2px solid var(--vino)}
  .pe-hoja .pe-cel-planos{border-bottom:none}
  .pe-hoja .pe-cel-acc{border-top:none}
}
.pe-hoja .pe-cajetin{grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr);margin-top:0}
/* Proyecto Ejecutivo: anillo con su leyenda a la izquierda + cajetín de dos celdas (proyectista | planos) */
.pe-hoja .pe-cuerpo{flex-direction:row;align-items:center;gap:20px}
.pe-hoja .pe-avance{flex:none;align-self:center;display:grid;justify-items:center;gap:10px;margin:0}
.pe-hoja .pe-avance-lbl{font:800 10.5px/1.35 ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.pe-hoja .pe-anillo{width:96px;height:96px}
.pe-hoja .pe-anillo::before{inset:10px}
.pe-hoja .pe-cajetin{flex:1;min-width:0;width:auto;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-self:stretch}
.pe-hoja .pe-cel-planos{border-right:none}
@media (max-width:560px){
  .pe-hoja .pe-cuerpo{flex-direction:column;align-items:stretch}
  .pe-hoja .pe-cajetin{grid-template-columns:1fr}
}
/* Proyecto Ejecutivo: sin celdas, solo separadores verticales vino (el borde queda solo en los botones de plano) */
.pe-hoja .pe-cajetin{border:none;background:transparent}
.pe-hoja .pe-cel{border:none;border-left:2px solid var(--vino);padding:6px 0 6px 18px}
.pe-hoja .pe-cel-acc{border-left:none;grid-column:1/-1;padding:4px 0 0}
@media (max-width:560px){
  .pe-hoja .pe-cel{border-left:none;border-top:2px solid var(--vino);padding:12px 0 0}
  .pe-hoja .pe-cel:first-child{border-top:none;padding-top:0}
}
.pe-hoja .pe-cel:not(.pe-cel-acc){padding-right:16px}
.pe-hoja .pe-cel-planos{padding-right:0}
.pe-hoja .pe-cel:not(.pe-cel-planos):not(.pe-cel-acc){align-content:center;justify-items:center;text-align:center}
.pe-hoja{box-shadow:0 4px 14px rgba(59,10,32,.22)}
/* Proyecto Ejecutivo: "Editar" como un botón más de plano + modal de planos (mismo lenguaje que el de Supervisión) */
.pe-hojab-editar{border-style:dashed;background:transparent}
.pe-hojab-editar img{width:20px;height:20px}
#modalPlanoPEEditar .supv-card{max-width:520px}
#modalPlanoPEEditar .supv-top{align-items:center;padding:20px 76px 20px 22px;background:linear-gradient(120deg,#4a1129,var(--vino) 55%,var(--vino-2))}
#modalPlanoPEEditar input.supv-input{width:100%;box-sizing:border-box;padding:10px 12px;font-size:14px;color:var(--ink);background:#FCFAFB;border:1px solid var(--line);border-radius:10px;transition:border-color .15s,box-shadow .15s,background .15s}
#modalPlanoPEEditar input.supv-input:hover{background:#fff;border:1px solid var(--vino-2)}
#modalPlanoPEEditar input.supv-input:focus{background:#fff;border:1px solid var(--vino);box-shadow:0 0 0 3px var(--vino-soft);outline:none}
.pem-contador{margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--vino);color:#fff;font-size:11px;letter-spacing:0}
.pem-contador:empty{display:none}
.pem-lista{display:grid;gap:8px}
.pem-lista[hidden]{display:none}
.pem-vacio{margin:0;padding:14px;border:1px dashed var(--line);border-radius:12px;font-size:13px;color:var(--muted);text-align:center}
.pem-plano,.pem-elegido{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--vino);border-radius:12px;background:#FCFAFB}
.pem-elegido{border-left-color:var(--verde);background:var(--verde-soft)}
.pem-plano>img,.pem-elegido>img{flex:none;width:26px;height:26px;object-fit:contain}
.pem-plano-txt{flex:1;min-width:0;display:grid;line-height:1.25}
.pem-plano-txt b{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pem-plano-txt small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pem-borrar{flex:none;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:rgba(255,255,255,.75);cursor:pointer;display:grid;place-items:center}
.pem-borrar img{width:18px;height:18px}
.pem-borrar:hover{background:#fff}
.pem-sep{height:1px;background:var(--line)}
/* Visor de PDF (#modalPdf) rediseñado: cabecera degradada con título en dos líneas, acciones con texto y pestañas numeradas */
#modalPdf{background:rgba(32,6,18,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pdf-modal-card{width:min(94vw,1100px);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pdf-modal-card .lightbox-topbar{justify-content:flex-start;gap:12px;padding:14px 16px 14px 18px;background:linear-gradient(120deg,#4a1129,var(--vino) 55%,var(--vino-2))}
.pdf-top-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.pdf-top-ico img{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
#pdfTitle{flex:1;min-width:0;display:grid;gap:1px;white-space:normal;font-size:inherit}
#pdfTitle small{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#E6CD9A}
#pdfTitle b{font-size:1.02rem;font-weight:800;color:#fff;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-modal-card .pdf-accion{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;width:auto;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;transition:background .15s}
.pdf-modal-card .pdf-accion svg{width:16px;height:16px}
.pdf-modal-card .pdf-accion:hover{background:rgba(255,255,255,.3)}
.pdf-modal-card .pdf-external-btn{display:inline-flex}
.pdf-modal-card .pdf-modal-tabs{gap:8px;padding:10px 16px;background:#F7F0F3;border-bottom:1px solid var(--line)}
.pdf-modal-card .pdf-modal-tab{display:inline-flex;align-items:center;gap:8px;max-width:260px;padding:5px 14px 5px 6px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);font-size:12.5px;font-weight:700}
.pdf-modal-card .pdf-modal-tab i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--vino-soft);color:var(--vino);font-style:normal;font-size:11px;font-weight:800}
.pdf-modal-card .pdf-modal-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-modal-card .pdf-modal-tab:hover{border-color:var(--vino);background:#fff}
.pdf-modal-card .pdf-modal-tab.activo{border-color:var(--vino);background:var(--vino);color:#fff}
.pdf-modal-card .pdf-modal-tab.activo i{background:#fff;color:var(--vino)}
@media (max-width:640px){
  .pdf-modal-card .pdf-accion span{display:none}
  .pdf-modal-card .pdf-accion{width:36px;padding:0;justify-content:center}
  .pdf-top-ico{display:none}
}
/* Color propio de MEXIGAS (antes caía en el de Gas Natural) */
.btn-gest-cat-mexigas { --gest-bg: #DDF0EA; --gest-text: var(--ink); --gest-hover-bg: #4E9C84; --gest-hover-text: #fff; }

/* ===== Tramitología (2026-10-20): tarjetas de Permisos Requeridos con borde superior vino + tabla con contenedor redondeado ===== */
.kpis-permisos .kpi-permiso { min-height: 78px; border-top: 3px solid var(--vino); border-radius: 12px; box-shadow: 0 2px 8px rgba(59, 10, 32, .1); }
.kpis-permisos .kpi-permiso:hover { border-color: var(--vino); border-top-color: var(--oro); box-shadow: 0 10px 22px rgba(59, 10, 32, .18); }
.tbl-wrap:has(.tram-tabla) { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }

/* ===== Chips de "Gestiones requeridas" (Tramitología): fondo propio de cada categoría + barra inferior gruesa = estatus ===== */
.tram-tabla .btn-gest-estatus-rojo, #modalFicha .btn-gest-estatus-rojo { --est: var(--rojo); }
.tram-tabla .btn-gest-estatus-ambar, #modalFicha .btn-gest-estatus-ambar { --est: var(--ambar); }
.tram-tabla .btn-gest-estatus-amarillo, #modalFicha .btn-gest-estatus-amarillo { --est: var(--amarillo); }
.tram-tabla .btn-gest-estatus-verde, #modalFicha .btn-gest-estatus-verde { --est: var(--verde); }
.tram-tabla .btn-gest-estatus-gris, #modalFicha .btn-gest-estatus-gris { --est: #9AA0A6; }
.tram-tabla .btn-gest-tram, #modalFicha .btn-gest-tram {
  border-left: none !important; border-bottom: 7px solid var(--est, #9AA0A6) !important; padding: 4px 8px 3px !important;
  box-shadow: 0 2px 4px rgba(59, 10, 32, .18), 0 1px 0 rgba(255, 255, 255, .6) inset;
  transition: box-shadow .15s ease, filter .15s ease;
}
.tram-tabla .btn-gest-tram, #modalFicha .btn-gest-tram { position: relative; overflow: hidden; }
.tram-tabla .btn-gest-tram::after, #modalFicha .btn-gest-tram::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); opacity: 0;
}
.tram-tabla .btn-gest-tram:hover:not(.btn-gest-disabled), #modalFicha .btn-gest-tram:hover:not(.btn-gest-disabled) {
  background: var(--gest-bg); color: var(--gest-text);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--est, #9AA0A6) 45%, transparent), 0 1px 3px rgba(59, 10, 32, .2);
}
.tram-tabla .btn-gest-tram:hover:not(.btn-gest-disabled)::after, #modalFicha .btn-gest-tram:hover:not(.btn-gest-disabled)::after { opacity: 1; animation: gestBrillo .6s ease-out; }
@keyframes gestBrillo { from { left: -60%; } to { left: 130%; } }
.tram-tabla .btn-gest-tram:active:not(.btn-gest-disabled), #modalFicha .btn-gest-tram:active:not(.btn-gest-disabled) { box-shadow: 0 1px 2px rgba(59, 10, 32, .25); }
.tram-tabla .btn-gest-tram .gest-txt, #modalFicha .btn-gest-tram .gest-txt { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tram-tabla .gest-ins, .tram-tabla .gest-cant, #modalFicha .gest-ins, #modalFicha .gest-cant { display: none; }

/* ===== Columna "Ubicación KMZ" (Tramitología): botón cuadrado redondeado con degradado, sombra y brillo al pasar el cursor ===== */
.tram-tabla .kmz-link, #modalFicha .kmz-link { width: 40px; height: 40px; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(145deg, #D4455D, #A8283E); box-shadow: 0 3px 6px rgba(168, 40, 62, .35), inset 0 1px 0 rgba(255, 255, 255, .35); transition: box-shadow .15s ease, background .15s ease; }
.tram-tabla .kmz-link img, #modalFicha .kmz-link img { width: 22px; height: 22px; position: relative; z-index: 1; transition: transform .2s ease; }
.tram-tabla a.kmz-link:hover, #modalFicha a.kmz-link:hover { background: linear-gradient(145deg, var(--vino), #4A1229); box-shadow: 0 4px 10px rgba(105, 27, 60, .45); }
.tram-tabla a.kmz-link:hover img { transform: scale(1.18) rotate(-12deg); }
.tram-tabla .kmz-link-disabled { background: #ECEBEC; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12); opacity: .7; }
.tram-tabla .kmz-link-disabled img { filter: grayscale(1) opacity(.6); }
.tram-tabla .descargar-kmz { margin-top: 4px; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--vino); }

/* ===== Columna "Problemática Social" (Tramitología): botón con anillo vino; en hover se rellena de vino, el ícono se vuelve blanco y late un halo ===== */
.tram-tabla .tram-prob-btn { width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--vino); background: #fff; box-shadow: 0 2px 5px rgba(59, 10, 32, .18); transition: background .18s ease, box-shadow .18s ease; }
.tram-tabla .tram-prob-btn img { transition: filter .18s ease; }
.tram-tabla .tram-prob-btn:hover:not(:disabled) { background: var(--vino); border-color: var(--vino); box-shadow: 0 5px 12px rgba(105, 27, 60, .4); }
.tram-tabla .tram-prob-btn:hover:not(:disabled) img { filter: brightness(0) invert(1); }
.tram-tabla .tram-prob-btn:active:not(:disabled) { background: #4A1229; }
.tram-tabla .tram-prob-btn:disabled { border-color: #D8D0D4; box-shadow: none; }

/* ===== Columna "Puente / Municipio" (Tramitología): nombre destacado en vino, municipio con pin y barra vino lateral en hover ===== */
.tram-tabla td.seleccion { padding-left: 16px; }
.tram-tabla td.seleccion:hover, .tram-tabla td.seleccion:active { background: transparent; }
.tram-tabla .puente-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--vino); transition: color .18s ease; }
.tram-tabla .puente-mun { margin-top: 4px; padding-left: 16px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A87C36'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat left center / 12px 12px; }
.tram-tabla .puente-name .chip { display: block; width: fit-content; margin: 3px 0 0; padding: 0 !important; background: none; border: none; border-radius: 0; font-size: 12px !important; font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.tram-tabla .puente-name .chip::before { display: none; }

/* ===== Columna "Seguimiento de Acciones" (Tramitología): botón con anillo dorado; en hover se rellena de dorado y el ícono crece ===== */
.tram-tabla .tram-acc-btn { width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--oro); background: #fff; box-shadow: 0 2px 5px rgba(59, 10, 32, .18); transition: background .18s ease, box-shadow .18s ease; }
.tram-tabla .tram-acc-btn img { width: 28px; height: 28px; transition: transform .2s ease; }
.tram-tabla .tram-acc-btn:hover { background: var(--oro-soft, #F4E9D3); border-color: var(--oro); box-shadow: 0 5px 12px rgba(168, 124, 54, .45); }
.tram-tabla .tram-acc-btn:hover img { transform: scale(1.15); }
.tram-tabla .tram-acc-btn:active { background: var(--oro); }

/* ===== Columna "Ficha" (Tramitología): botón con anillo gris pizarra; en hover se rellena de pizarra y el ícono pasa a blanco ===== */
.tram-tabla .tram-ficha-btn:not(.tram-acc-btn):not(.tram-prob-btn) { width: 46px; height: 46px; border-radius: 14px; border: 2px solid #3D4852; background: #fff; box-shadow: 0 2px 5px rgba(59, 10, 32, .18); transition: background .18s ease, box-shadow .18s ease; }
.tram-tabla .tram-ficha-btn:not(.tram-acc-btn):not(.tram-prob-btn) img { width: 26px; height: 26px; transition: transform .2s ease; }
.tram-tabla .tram-ficha-btn:not(.tram-acc-btn):not(.tram-prob-btn):hover { background: #F1F3F5; box-shadow: 0 0 0 4px rgba(61, 72, 82, .16), 0 4px 10px rgba(61, 72, 82, .25); }
.tram-tabla .tram-ficha-btn:not(.tram-acc-btn):not(.tram-prob-btn):hover img { transform: scale(1.18); }
.tram-tabla .tram-ficha-btn:not(.tram-acc-btn):not(.tram-prob-btn):active { background: #DDE1E5; }

/* ===== Columna "#" (Tramitología): número dentro de un círculo con anillo vino ===== */
.tram-tabla .rowno { text-align: center; }
.tram-tabla .tram-num { display: inline-block; color: var(--vino); font: 800 22px/1 'Archivo', sans-serif; letter-spacing: -.02em; }

/* ===== Cabecera de la tabla de Tramitología: degradado vino oscuro, texto blanco y línea dorada inferior ===== */
.tram-tabla thead th { background: linear-gradient(180deg, #7A2248, #5A1735); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-color: rgba(255, 255, 255, .14) !important; border-bottom: 3px solid var(--oro) !important; box-shadow: none; }

/* ===== Zebra de la tabla de Tramitología: crema y arena; el hover es un crema dorado más intenso ===== */
.tram-tabla tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td { background: #FFF8EC; }
.tram-tabla tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td { background: #F4E7D2; }
.tram-tabla tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover td,
.tram-tabla tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover td { background: #EBD5A8; }
.tram-tabla tbody tr td { border-bottom: 1px solid #E6D6BC; }

/* ===== Leyenda de estatus de Tramitología: franja de color solo a la izquierda y extremo derecho redondeado, texto negro ===== */
.tram-leyenda { gap: 10px; align-items: center; }
.tram-leyenda p { margin: 0 4px 0 0; }
.tram-leyenda .porcentaje { background: #fff; border: none; border-left: 12px solid var(--est, #9AA0A6); border-radius: 0 16px 16px 0; margin: 0; padding: 6px 16px 6px 12px; font-size: 12px; font-weight: 700; color: #000; box-shadow: 0 2px 4px rgba(59, 10, 32, .15); }
.tram-leyenda .porcentaje .estatus-dot { display: none; }
.tram-leyenda .porcentaje:nth-of-type(1) { --est: var(--verde); }
.tram-leyenda .porcentaje:nth-of-type(2) { --est: var(--amarillo); }
.tram-leyenda .porcentaje:nth-of-type(3) { --est: var(--ambar); }
.tram-leyenda .porcentaje:nth-of-type(4) { --est: var(--rojo); }
.tram-leyenda .porcentaje:nth-of-type(5) { --est: #9AA0A6; }

/* ===== Fichas de Proyecto Ejecutivo: fondo crema en degradado vertical (claro arriba, más intenso casi al fondo) ===== */
.pe-hoja { background: linear-gradient(180deg, #FFFDF8 0%, #FFF9EC 45%, #F8EDD3 100%); }

/* ===== Menú de pestañas rediseñado (2026-10-20): horizontal pulido + opción de menú vertical (barra lateral) ===== */
nav.tabs { background: linear-gradient(180deg, #2B0C1A, var(--ink)); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.tabs-in { gap: 4px; padding: 6px 12px 0; }
.tab { position: relative; padding: 11px 16px 13px; border-radius: 10px 10px 0 0; border-bottom: none; font-weight: 700; letter-spacing: .01em; transition: background .15s, color .15s; }
.tab-icon { width: 19px; height: 19px; opacity: .8; transition: opacity .15s, transform .15s; }
.tab:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.tab:hover .tab-icon { opacity: 1; transform: translateY(-1px); }
.tab.active { background: rgba(255, 255, 255, .12); color: #fff; border-bottom: none; }
.tab.active .tab-icon { opacity: 1; }
.tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--oro); }

/* ===== Fondo de la página rediseñado (2026-10-20): gris rosado con resplandores vino/dorado en las esquinas y una malla fina de puntos ===== */
body {
  background-color: #F4EFF2;
  background-image:
    radial-gradient(900px 520px at 0% 0%, rgba(105, 27, 60, .08), transparent 65%),
    radial-gradient(820px 520px at 100% 100%, rgba(168, 124, 54, .10), transparent 65%),
    radial-gradient(rgba(105, 27, 60, .09) 1px, transparent 1.3px);
  background-size: auto, auto, 24px 24px;
  background-attachment: fixed;
}
main { padding-top: 26px; }

/* ===== Encabezado de cada sección (botón Inicio, Compartir, título, subtítulo, "Corte al" y fecha) rediseñado 2026-10-20 ===== */
.view-head { align-items: center; margin-bottom: 22px; }
.view-head h2 { font-weight: 800; font-size: 27px; letter-spacing: -.4px; line-height: 1.15; color: var(--vino); padding-bottom: 9px; background: linear-gradient(var(--oro), var(--oro)) no-repeat left bottom / 64px 3px; }
.view-head p { margin-top: 8px; padding-left: 11px; border-left: 3px solid var(--oro); color: var(--ink-2); font-size: 14px; line-height: 1.45; max-width: 640px; }
.home-icon-link, .share-icon-btn { width: 38px; height: 38px; padding: 0; margin-right: 6px; vertical-align: -9px; border: 2px solid var(--vino); border-radius: 12px; background: #fff; color: var(--vino); box-shadow: 0 2px 5px rgba(59, 10, 32, .18); transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.share-icon-btn { margin-right: 10px; }
.home-icon-link:hover, .share-icon-btn:hover { background: var(--vino); border-color: var(--vino); color: #fff; box-shadow: 0 5px 12px rgba(105, 27, 60, .4); }
.periodo { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--oro); border-radius: 12px; box-shadow: var(--shadow); text-align: left; }
.periodo .corte-label, .periodo .corte-static-label { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.periodo .corte-label b { margin-top: 3px; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--vino); }
.periodo .corte-btn { border: none; border-radius: 8px; background: var(--vino-soft); color: var(--vino); font-weight: 800; font-size: 14px; padding: 7px 14px; }
.periodo .corte-btn:hover { background: var(--vino); color: #fff; }
@media (max-width: 640px) {
  .view-head h2 { font-size: 21px; }
  .view-head p { font-size: 12.5px; }
  .home-icon-link, .share-icon-btn { width: 34px; height: 34px; }
  .periodo { padding: 7px 12px; }
  .periodo .corte-label b, .periodo .corte-btn { font-size: 13px; }
}
.view-head h2 { display: flex; align-items: center; flex-wrap: wrap; }
.view-head h2 .home-icon-link, .view-head h2 .share-icon-btn { vertical-align: baseline; }

/* ===== Encabezado de sección, 2ª versión: botones circulares rellenos, título sin subrayado y "Corte al" como etiqueta de dos partes ===== */
.view-head h2 { background: none; padding-bottom: 0; }
.home-icon-link, .share-icon-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: linear-gradient(145deg, #7C2349, #5A1735); color: #fff; box-shadow: 0 3px 8px rgba(59, 10, 32, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-icon-link:hover, .share-icon-btn:hover { background: linear-gradient(145deg, #C29A52, #A87C36); border: none; color: #3B0A20; box-shadow: 0 5px 12px rgba(168, 124, 54, .55), inset 0 1px 0 rgba(255, 255, 255, .4); transform: scale(1.08); }
.periodo { display: inline-flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: #fff; border: 2px solid var(--vino); border-left: 2px solid var(--vino); border-radius: 10px; box-shadow: 0 2px 6px rgba(59, 10, 32, .15); }
.periodo .corte-label { display: flex; align-items: center; padding: 0 0 0 14px; background: var(--vino); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.periodo .corte-label b { margin: 0 0 0 12px; padding: 9px 16px; background: #fff; color: var(--vino); font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.periodo .corte-static-label { display: flex; align-items: center; padding: 0 12px 0 14px; background: var(--vino); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.periodo .corte-btn { border-radius: 0; background: #fff; color: var(--vino); font-size: 15px; padding: 8px 16px; }
.periodo .corte-btn:hover { background: var(--vino-soft); color: var(--vino); }
.periodo .corte-edit { padding: 4px 8px; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .home-icon-link, .share-icon-btn { width: 34px; height: 34px; }
  .periodo .corte-label b, .periodo .corte-btn { font-size: 13px; padding: 7px 12px; }
  .periodo .corte-label, .periodo .corte-static-label { font-size: 10px; }
}

/* ===== "Corte al" 3ª versión: icono de calendario en círculo + etiqueta pequeña y fecha grande, sin caja ===== */
.periodo { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; justify-content: end; padding: 0; overflow: visible; background: none; border: none; border-radius: 0; box-shadow: none; text-align: left; }
.periodo::before { content: ""; grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vino-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23691B3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat center / 22px 22px; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(59, 10, 32, .2); }
.periodo .corte-label { grid-column: 2; grid-row: 1 / span 2; display: block; padding: 0; background: none; color: var(--oro); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.periodo .corte-label b { display: block; margin: 3px 0 0; padding: 0; background: none; color: var(--vino); font-size: 17px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.periodo .corte-static-label { grid-column: 2; grid-row: 1; display: block; padding: 0; background: none; color: var(--oro); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.periodo .corte-btn { grid-column: 2; grid-row: 2; justify-self: start; padding: 2px 0; border: none; border-radius: 6px; background: none; color: var(--vino); font-size: 17px; font-weight: 800; }
.periodo .corte-btn:hover { background: var(--vino-soft); color: var(--vino); padding: 2px 8px; margin: 0 -8px; }
.periodo .corte-edit { grid-column: 2; grid-row: 2; padding: 0; }
@media (max-width: 640px) {
  .periodo::before { width: 36px; height: 36px; background-size: 18px 18px; }
  .periodo .corte-label b, .periodo .corte-btn { font-size: 14px; }
  .periodo .corte-label, .periodo .corte-static-label { font-size: 10px; }
}

/* ===== "Corte al" 4ª versión: sin icono, solo etiqueta dorada y fecha grande junto a una barra vertical dorada ===== */
.periodo { column-gap: 0; padding-left: 14px; border-left: 3px solid var(--oro); }
.periodo::before { display: none; }
.periodo .corte-label, .periodo .corte-static-label, .periodo .corte-btn, .periodo .corte-edit { grid-column: 1; }
@media (max-width: 640px) { .periodo { padding-left: 10px; } }

/* ===== Modal de Ficha Técnica rediseñado (2026-10-20): encabezado vino con línea dorada, mapa enmarcado y secciones como tarjetas sobre fondo gris rosado ===== */
#modalFicha .modal-card { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalFicha .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 76px 16px 26px; }
#modalFicha .modal-top h3 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
#modalFicha .modal-top .mt-mun { margin-top: 6px; padding-left: 18px; font-size: 13px; font-weight: 600; color: #F0D9E3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8C98E'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat left center / 13px 13px; }
#modalFicha .modal-scroll-area { background: #F4EFF2; padding-bottom: 22px; }
#modalFicha .modal-scroll-area .modal-body { background: transparent; }
#modalFicha .viewer { margin: 18px 18px 4px; border-radius: 16px; overflow: hidden; background: #fff; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(59, 10, 32, .18); }
#modalFicha .mbody-pad { margin: 14px 18px 0; padding: 20px 26px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalFicha .mbody-group, #modalFicha .mbody-group:first-child, #modalFicha .mbody-group:last-of-type { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
#modalFicha .blk { margin-bottom: 18px; }
#modalFicha .blk:last-child { margin-bottom: 0; }
#modalFicha .blk h5 { margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--vino); }
#modalFicha .ficha-row { align-items: center; gap: 16px; }
#modalFicha .ficha-row > .ficha-icono { position: static; transform: none; width: 46px; height: 46px; margin-top: 0; filter: drop-shadow(0 2px 3px rgba(59, 10, 32, .25)); }
#modalFicha .ficha-row > .ficha-row-body { border-left: 3px solid var(--oro); padding-left: 14px; }
#modalFicha .dt { border-radius: 12px; background: #FBF7F9; }
@media (max-width: 640px) {
  #modalFicha .modal-top h3 { font-size: 19px; }
  #modalFicha .viewer { margin: 12px 10px 2px; }
  #modalFicha .mbody-pad { margin: 10px 10px 0; padding: 16px 14px; }
  #modalFicha .ficha-row { gap: 10px; }
  #modalFicha .ficha-row > .ficha-icono { width: 36px; height: 36px; }
}

/* ===== Modo edición del modal de Ficha Técnica rediseñado (2026-10-21): botones en pastilla, campos con borde sólido y foco vino, contadores discretos, aviso "Modo edición" ===== */
#modalFicha .fx-topbtns { gap: 8px !important; margin-right: 14px !important; }
#modalFicha .fx-topbtns button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px !important; border-radius: 999px !important; font: 700 12.5px 'Inter', sans-serif !important; letter-spacing: .01em; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
#modalFicha .fx-topbtns button img { margin: 0 !important; vertical-align: baseline !important; }
#modalFicha .fx-topbtns .fx-edit { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .45) !important; }
#modalFicha .fx-topbtns .fx-edit img { filter: brightness(0) invert(1); }
#modalFicha .fx-topbtns .fx-edit:hover { background: #fff !important; color: var(--vino) !important; }
#modalFicha .fx-topbtns .fx-edit:hover img { filter: none; }
#modalFicha .fx-topbtns .fx-save { background: linear-gradient(145deg, #C9A25A, #A87C36) !important; color: #3B0A20 !important; border: none !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
#modalFicha .fx-topbtns .fx-save:hover { background: linear-gradient(145deg, #E0BA72, #B98A3E) !important; transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); }
#modalFicha .fx-topbtns .fx-save:disabled, #modalFicha .fx-topbtns .fx-cancel:disabled { opacity: .55; cursor: not-allowed; transform: none; }
#modalFicha .fx-topbtns .fx-cancel { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .55) !important; }
#modalFicha .fx-topbtns .fx-cancel:hover { background: rgba(255, 255, 255, .16) !important; }
#modalFicha .fx-topbtns .fx-borrar-obra { background: rgba(192, 51, 75, .92) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .35) !important; }
#modalFicha .fx-topbtns .fx-borrar-obra:hover { background: #D63B55 !important; }
#modalFicha .modal-card:has(.fx-save:not([style*="display"])) .modal-top h3::after { content: "MODO EDICIÓN"; display: inline-block; margin-left: 12px; padding: 4px 11px; border-radius: 999px; background: #E8C98E; color: #3B0A20; font: 800 10px 'Inter', sans-serif; letter-spacing: .12em; vertical-align: 4px; }
#modalFicha .modal-card:has(.fx-save:not([style*="display"])) .mbody-pad { border-color: #E3CE9F; box-shadow: 0 0 0 1px rgba(168, 124, 54, .25), var(--shadow); }
#modalFicha .fx-input { width: 100%; max-width: none; padding: 9px 12px !important; border: 1.5px solid #D9C3CE !important; border-radius: 10px !important; background: #fff; color: var(--ink); font: 500 14px/1.45 'Inter', sans-serif !important; box-shadow: inset 0 1px 2px rgba(59, 10, 32, .06); transition: border-color .15s, box-shadow .15s; }
#modalFicha .fx-input:hover { background-color: #fff; border-style: solid !important; border-color: var(--vino-2) !important; }
#modalFicha .fx-input:focus { background-color: #fff; border-style: solid !important; border-color: var(--vino) !important; box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
#modalFicha .fx-input:disabled { background-color: #F3ECF0; color: var(--muted); border-style: dashed !important; box-shadow: none; }
#modalFicha textarea.fx-input { max-width: none; min-height: 88px; line-height: 1.55; resize: vertical; }
#modalFicha select.fx-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 46px !important; color: var(--vino); font-weight: 700 !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23691B3C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px; }
#modalFicha select.fx-input:hover { background-color: #FBF5F8; }
#modalFicha select.fx-input option { font-weight: 600; color: var(--ink); }
#modalFicha .mbody-pad:has(> .fx-etapa-tabs) { margin-top: 16px; padding: 0 4px; background: none; border: none; box-shadow: none; }
#modalFicha .fx-etapa-tabs { gap: 8px !important; margin: 0 !important; flex-wrap: wrap; }
#modalFicha .fx-etapa-tab { flex: 0 0 auto !important; padding: 9px 22px !important; border-radius: 999px !important; border: 1.5px solid var(--vino) !important; background: #fff !important; color: var(--vino) !important; font: 800 12.5px 'Inter', sans-serif !important; letter-spacing: .02em; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
#modalFicha .fx-etapa-tab:hover { background: var(--vino-soft) !important; }
#modalFicha .fx-etapa-tab.fx-etapa-tab-activa { background: linear-gradient(145deg, #7C2349, #5A1735) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 3px 8px rgba(59, 10, 32, .3); }
#modalFicha .fx-etapa-tabs button[onclick^="abrirAgregarEtapa"] { padding: 9px 18px !important; border-radius: 999px !important; border: 1.5px dashed var(--oro) !important; background: transparent !important; color: #7A5A22 !important; font: 800 12.5px 'Inter', sans-serif !important; }
#modalFicha .fx-etapa-tabs button[onclick^="abrirAgregarEtapa"]:hover { background: var(--oro-soft) !important; border-style: solid !important; }
#modalFicha .vp-preview .supv-archivo { margin-top: 8px; }
#modalFicha .dt-estatus { align-items: stretch; }
#modalFicha .dt-estatus-info { align-self: stretch; }
#modalFicha .cc-contador { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: right; letter-spacing: .02em; }
#modalFicha input.fx-input:not(.fx-multi input) + .cc-contador { position: relative; height: 15px; margin: -28px 0 19px; padding: 0 14px 0 0; line-height: 15px; pointer-events: none; }
#modalFicha textarea.fx-input + .cc-contador { position: relative; height: 15px; margin: -22px 0 7px; padding: 0 16px 0 0; line-height: 15px; pointer-events: none; }
#modalFicha .fx-multi .cc-contador { margin-top: 4px; }
#modalFicha input.fx-input:not(.fx-multi input) { padding-right: 70px !important; }
#modalFicha textarea.fx-input { padding-bottom: 24px !important; }
#modalFicha .cc-contador-cerca { color: var(--ambar); }
#modalFicha .cc-contador-tope { color: var(--rojo); }
#modalFicha input[type="file"] { width: 100%; max-width: 100%; font-size: 12.5px; color: var(--ink-2); }
#modalFicha input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: none; border-radius: 999px; background: var(--vino-soft); color: var(--vino); font: 700 12.5px 'Inter', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
#modalFicha input[type="file"]::file-selector-button:hover { background: var(--vino); color: #fff; }
@media (max-width: 640px) {
  #modalFicha .fx-topbtns { flex-wrap: wrap; justify-content: flex-end; }
  #modalFicha .fx-topbtns button { height: 32px; padding: 0 12px !important; font-size: 11.5px !important; }
  #modalFicha .modal-card:has(.fx-save:not([style*="display"])) .modal-top h3::after { display: none; }
}
#modalFicha .modal-card:has(.fx-save:not([style*="display"])) .mbody-pad:has(> .fx-etapa-tabs) { border: none; box-shadow: none; }
.vp-preview .supv-archivo.vp-item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; max-width: none; height: auto; min-height: 0; margin: 8px 0 0; padding: 12px 14px; position: relative; overflow: visible; }
.vp-preview .supv-archivo.vp-item > img { width: 30px; height: 30px; margin: 0; object-fit: contain; }
.vp-preview .supv-archivo.vp-item .supv-archivo-info b { display: block; text-align: left; }
.vp-preview .supv-archivo.vp-item .supv-quitar { position: static; margin-left: auto; width: 32px; height: 32px; }

/* ===== Modal "Agregar etapa" rediseñado (2026-10-21): encabezado vino con línea dorada, aviso informativo, año grande y botones en pastilla ===== */
#modalAgregarEtapa .ae-card { max-width: 440px; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalAgregarEtapa .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 70px 16px 24px; }
#modalAgregarEtapa .modal-top h3 { font-size: 21px; font-weight: 800; letter-spacing: -.2px; }
#modalAgregarEtapa .modal-top .mt-mun { margin-top: 5px; font-size: 13px; font-weight: 600; color: #F0D9E3; }
#modalAgregarEtapa .ae-body { display: grid; gap: 12px; padding: 22px 24px 24px; background: #F4EFF2; }
#modalAgregarEtapa .ae-info { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--oro-soft); border-left: 4px solid var(--oro); }
#modalAgregarEtapa .ae-info svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #8A6428; }
#modalAgregarEtapa .ae-info p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
#modalAgregarEtapa .ae-label { margin-top: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vino); }
#modalAgregarEtapa .ae-anio { width: 100%; padding: 12px 16px; border: 1.5px solid #D9C3CE; border-radius: 12px; background: #fff; color: var(--vino); font: 800 28px/1.2 'Archivo', sans-serif; letter-spacing: .12em; text-align: center; box-shadow: inset 0 1px 2px rgba(59, 10, 32, .06); transition: border-color .15s, box-shadow .15s; }
#modalAgregarEtapa .ae-anio::placeholder { color: #CDB6C2; font-weight: 700; }
#modalAgregarEtapa .ae-anio:hover { border-color: var(--vino-2); }
#modalAgregarEtapa .ae-anio:focus { outline: none; border-color: var(--vino); box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); }
#modalAgregarEtapa .cc-contador { margin: -4px 0 0; text-align: center; }
#modalAgregarEtapa .ae-msg { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--rojo-soft); border-left: 4px solid var(--rojo); color: #8E1F33; font-size: 13px; font-weight: 600; }
#modalAgregarEtapa .ae-msg:empty { display: none; }
#modalAgregarEtapa .ae-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
#modalAgregarEtapa .ae-acciones button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 22px; border-radius: 999px; font: 800 13px 'Inter', sans-serif; cursor: pointer; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
#modalAgregarEtapa .ae-cancelar { border: 1.5px solid #C9B4BF; background: #fff; color: var(--ink-2); }
#modalAgregarEtapa .ae-cancelar:hover { background: #FBF5F8; border-color: var(--vino); color: var(--vino); }
#modalAgregarEtapa .ae-agregar { border: none; background: linear-gradient(145deg, #7C2349, #5A1735); color: #fff; box-shadow: 0 3px 8px rgba(59, 10, 32, .3); }
#modalAgregarEtapa .ae-agregar img { width: 16px; height: 16px; }
#modalAgregarEtapa .ae-agregar:hover { background: linear-gradient(145deg, #8E2A55, #691B3C); transform: translateY(-1px); box-shadow: 0 6px 12px rgba(59, 10, 32, .35); }
@media (max-width: 480px) { #modalAgregarEtapa .ae-acciones { flex-direction: column-reverse; } #modalAgregarEtapa .ae-acciones button { justify-content: center; } }

/* ===== Parámetros de Diseño rediseñado (2026-10-21): tarjeta redondeada con encabezados de color con brillo, primera columna tintada, filas limpias y editor con campos sólidos ===== */
#modalFicha .pd-wrap { border: none; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(59, 10, 32, .14); }
#modalFicha .pd-table { border-collapse: separate; border-spacing: 0; font-size: 12px; }
#modalFicha .pd-table th { padding: 12px 10px; background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .14)); border-right: 1px solid rgba(255, 255, 255, .2); }
#modalFicha .pd-table th:last-child { border-right: none; }
#modalFicha .pd-th-title { font-size: 10.5px; letter-spacing: .08em; }
#modalFicha .pd-th-sub { font-size: 10.5px; }
#modalFicha .pd-th-label { padding-left: 16px; font-size: 10.5px; letter-spacing: .1em; }
#modalFicha .pd-table td, #modalFicha .pd-table tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td { padding: 10px 10px; border-right: none; border-bottom: 1px solid #F0E7EB; background: #fff; font-size: 12.5px; color: var(--ink); }
#modalFicha .pd-table tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td { background: #FCF8FA; }
#modalFicha .pd-table tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover td, #modalFicha .pd-table tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover td { background: #FFF6E4; }
#modalFicha .pd-table tbody tr:last-child td { border-bottom: none; }
#modalFicha .pd-table td.pd-td-label, #modalFicha .pd-table tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td.pd-td-label, #modalFicha .pd-table tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td.pd-td-label { padding-left: 16px; background: #F6EEF2; color: var(--vino); font-size: 12px; font-weight: 800; border-right: 1px solid #EBDDE4; }
#modalFicha .pd-table-edit th.pd-th-edit { padding: 10px 8px; vertical-align: top; }
#modalFicha .pd-table-edit td { padding: 7px 8px; }
#modalFicha .pd-table-edit input[type="text"], #modalFicha .pd-edit-colhead select { padding: 7px 9px; border-radius: 8px; font-size: 12.5px; }
#modalFicha .pd-table-edit td input[type="text"] { border: 1.5px solid #D9C3CE !important; background: #fff; box-shadow: inset 0 1px 2px rgba(59, 10, 32, .05); }
#modalFicha .pd-table-edit td input[type="text"]:hover { background: #fff !important; border-style: solid !important; border-color: var(--vino-2) !important; }
#modalFicha .pd-table-edit td input[type="text"]:focus { background: #fff !important; border-style: solid !important; border-color: var(--vino) !important; box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
#modalFicha .pd-edit-colhead { gap: 6px; }
#modalFicha .pd-edit-colhead input[type="text"] { border: 1.5px solid transparent !important; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
#modalFicha .pd-edit-colhead input[type="text"]:hover, #modalFicha .pd-edit-colhead input[type="text"]:focus { background: #fff !important; border-style: solid !important; border-color: var(--oro) !important; box-shadow: 0 0 0 3px rgba(232, 201, 142, .5); }
#modalFicha .pd-edit-colhead select { border: none; color: var(--vino); font-weight: 800; text-transform: capitalize; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
#modalFicha .pd-edit-delcol { gap: 6px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(0, 0, 0, .18); font-size: 10.5px; font-weight: 700; transition: background .15s; }
#modalFicha .pd-edit-delcol:hover { background: #C0334B; border-color: #C0334B; }
#modalFicha .pd-add-col-btn { padding: 9px 4px; border: 1.5px dashed rgba(255, 255, 255, .6); border-radius: 12px; background: rgba(255, 255, 255, .12); font-size: 10px; transition: background .15s; }
#modalFicha .pd-add-col-btn:hover { background: rgba(255, 255, 255, .28); }
#modalFicha .pd-edit-rowdel button { width: 34px; height: 34px; border-radius: 50%; transition: background .15s; }
#modalFicha .pd-edit-rowdel button:hover { background: var(--rojo-soft); }
#modalFicha .pd-edit-addbtn, #modalFicha .pd-table-edit tr:last-child td [class*="addbtn"] { border-color: var(--oro); background: var(--oro-soft); color: #7A5A22; }
#modalFicha .pd-viewer { height: 340px; border: 3px solid #fff; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(59, 10, 32, .16); }
#modalFicha .pd-table-edit th.pd-th-edit-corner, #modalFicha .pd-table-edit td.pd-edit-rowdel { width: 78px; }
#modalFicha .pd-table-edit button[onclick="_pdAgregarFila()"] { width: 100%; padding: 11px 12px !important; border: 1.5px dashed var(--oro) !important; border-radius: 12px !important; background: var(--oro-soft) !important; color: #7A5A22 !important; font: 800 12.5px 'Inter', sans-serif !important; transition: background .15s, border-style .15s; }
#modalFicha .pd-table-edit button[onclick="_pdAgregarFila()"]:hover { background: #F0E2C4 !important; border-style: solid !important; }

/* ===== Render / Estudio de Tránsito / Render Video como tarjetas, iguales a "Vuelo de Reconocimiento con Dron" (2026-10-21) ===== */
#modalFicha .render-grid.render-grid-pad { margin: 14px 18px 0; padding: 0; gap: 14px; }
#modalFicha .render-item { gap: 10px; padding: 20px 26px; border-left: 1px solid var(--line); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalFicha .render-item > .ficha-icono { display: none; }
#modalFicha .render-label-row { padding: 0; }
#modalFicha .render-label { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vino); }
#modalFicha .render-item img, #modalFicha .render-item video, #modalFicha .render-viewer img, #modalFicha .render-viewer video { border-radius: 12px; }
@media (max-width: 640px) { #modalFicha .render-grid.render-grid-pad { margin: 10px 10px 0; } #modalFicha .render-item { padding: 16px 14px; } }

/* ===== Modal "Permisos Requeridos" rediseñado (2026-10-21): encabezado vino con línea dorada, fondo gris rosado y cada bloque (logo+leyenda+mapa, estatus por puente, detalle) como tarjeta ===== */
#modalPermisos .modal-card { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalPermisos .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 76px 16px 26px; }
#modalPermisos .modal-top h3 { font-size: 22px; font-weight: 800; letter-spacing: -.2px; }
#modalPermisos .permisos-print-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 12.5px 'Inter', sans-serif; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
#modalPermisos .permisos-print-btn img { margin: 0 6px 0 0 !important; vertical-align: baseline !important; transition: filter .18s ease; }
#modalPermisos .permisos-print-btn:hover { background: linear-gradient(145deg, #C9A25A, #A87C36); border-color: transparent; color: #3B0A20; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
#modalPermisos .permisos-print-btn:hover img { filter: brightness(0); }
#modalPermisos .gest-modal-body { background: #F4EFF2; padding: 18px; }
#modalPermisos .permisos-map-group { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalPermisos #permisosLeyenda .porcentaje { padding: 5px 13px 5px 8px; border: 1px solid #E7DCE2; border-radius: 999px; background: #FAF6F8; font-size: 12px; font-weight: 600; color: var(--ink); }
#modalPermisos .permisos-map { border: 3px solid #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 10px rgba(59, 10, 32, .2); }
#modalPermisos .permisos-tbl-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
#modalPermisos .tbl-permisos thead th { background: linear-gradient(180deg, #7C2349, #5A1735); color: #fff; border-color: rgba(255, 255, 255, .2) !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
#modalPermisos .tbl-permisos tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td { background: #fff; }
#modalPermisos .tbl-permisos tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td { background: #FCF8FA; }
#modalPermisos .tbl-permisos tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover td, #modalPermisos .tbl-permisos tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover td { background: #FFF6E4; }
#modalPermisos .tbl-permisos td { border-color: #F0E7EB; }
#modalPermisos .cg { border: none; font-size: 12px; color: var(--ink); }
#modalPermisos .cg-row + .cg-row, #modalPermisos .cg-grupo + .cg-grupo, #modalPermisos .cg-fila + .cg-fila { border-top: 1px solid #EDE2E8; }
#modalPermisos .cg-c { border-right: 1px solid #F0E6EB; padding: 9px 10px; }
#modalPermisos .cg-head { background: linear-gradient(180deg, #7C2349, #5A1735); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
#modalPermisos .cg-head .cg-c { border-right-color: rgba(255, 255, 255, .22); }
#modalPermisos .cg-row:not(.cg-head):nth-child(even) { background: #fff; }
#modalPermisos .cg-row:not(.cg-head):nth-child(odd) { background: #FCF8FA; }
#modalPermisos .cg-row:not(.cg-head):hover { background: #FFF6E4; }
@media (max-width: 640px) { #modalPermisos .gest-modal-body { padding: 10px; } #modalPermisos .modal-top h3 { font-size: 17px; } }
#modalPermisos #permDetalleWrap .tbl-scroll { max-height: none; overflow-y: visible; }
#modalPermisos .cg-no { width: 46px; padding-left: 2px; padding-right: 2px; }
#modalPermisos .cg-head { font-size: 10.5px; letter-spacing: .04em; }
#modalPermisos .cg-head .cg-c { padding-left: 6px; padding-right: 6px; }
#modalPermisos .cg-fec { width: 96px; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
#modalPermisos .cg--semarnat .cg-fec { width: 120px; }

/* ===== Lista "Estatus por puente" junto al mapa (modal Permisos Requeridos), antes una tabla angosta: ahora tarjetitas con número en círculo, nombre y pastilla de estatus ===== */
#modalPermisos .permisos-row .permisos-tbl-wrap::before { content: "Estatus por puente"; display: block; padding: 16px 18px 6px; color: var(--vino); font: 800 11.5px 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
#modalPermisos .permisos-row .permisos-tbl-wrap { width: 300px; }
#modalPermisos .permisos-row .permisos-tbl-wrap .tbl-scroll { padding: 4px 12px 14px; }
#modalPermisos #tblPermisosEstatus, #modalPermisos #tblPermisosEstatus tbody { display: block; width: 100%; height: auto; }
#modalPermisos #tblPermisosEstatus thead { display: none; }
#modalPermisos #tblPermisosEstatus tbody { display: flex; flex-direction: column; gap: 8px; }
#modalPermisos #tblPermisosEstatus tbody tr, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal), #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) { display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "num nombre" "num estatus"; column-gap: 12px; row-gap: 6px; align-items: center; padding: 10px 12px; border: 1px solid #EFE4EA; border-radius: 12px; background: #FAF6F8; transition: background .15s, border-color .15s; }
#modalPermisos #tblPermisosEstatus tbody tr:hover { background: #FFF6E4; border-color: #E8D3A4; }
#modalPermisos #tblPermisosEstatus tbody td, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td { display: block; width: auto; padding: 0; border: none; background: transparent; text-align: left; }
#modalPermisos #tblPermisosEstatus td.rowno { grid-area: num; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vino); color: #fff; font: 800 12px 'Archivo', sans-serif; }
#modalPermisos #tblPermisosEstatus td:nth-child(2) { grid-area: nombre; }
#modalPermisos #tblPermisosEstatus td:nth-child(2) .puente-name { font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--vino); }
#modalPermisos #tblPermisosEstatus td.permiso-estatus-cell { grid-area: estatus; }
#modalPermisos #tblPermisosEstatus .permiso-estatus { padding: 4px 10px; font-size: 10px; }
#modalPermisos #tblPermisosEstatus .permiso-fecha { display: inline-block; margin: 0 0 0 8px; font-size: 11px; }
#modalPermisos #tblPermisosEstatus td[colspan] { grid-column: 1 / -1; grid-area: auto; text-align: center; color: var(--muted); }
@media (max-width: 900px) { #modalPermisos .permisos-row .permisos-tbl-wrap { width: 100%; } }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td.rowno { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--vino); color: #fff; font: 800 12px 'Archivo', sans-serif; text-align: center; }

/* ===== Estatus por puente, 2ª versión: filas sin caja; el círculo del número lleva el color del estatus y el estatus va como texto pequeño con icono ===== */
#modalPermisos .permisos-row .permisos-tbl-wrap .tbl-scroll { padding: 2px 18px 14px; }
#modalPermisos #tblPermisosEstatus tbody { gap: 0; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal), #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) { padding: 10px 2px; border: none; border-bottom: 1px solid #F0E7EB; border-radius: 0; background: transparent; row-gap: 3px; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):last-child, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):last-child { border-bottom: none; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover { background: #FFF8EC; border-color: #F0E7EB; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal) td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) td.rowno { width: 32px; height: 32px; background: #9AA0A6; color: #fff; font-size: 12.5px; box-shadow: 0 2px 5px rgba(59, 10, 32, .22); }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal).pf-rojo td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal).pf-rojo td.rowno { background: var(--rojo); }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal).pf-ambar td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal).pf-ambar td.rowno { background: var(--ambar); }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal).pf-amarillo td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal).pf-amarillo td.rowno { background: var(--amarillo); color: #3B0A20; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal).pf-verde td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal).pf-verde td.rowno { background: var(--verde); }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal).pf-no_aplica td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal).pf-no_aplica td.rowno { background: #fff; color: var(--vino); box-shadow: inset 0 0 0 1.5px #CFC3CA; }
#modalPermisos #tblPermisosEstatus .permiso-estatus { padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: #6B5560 !important; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; gap: 5px; }
#modalPermisos #tblPermisosEstatus .permiso-estatus-icon { width: 12px; height: 12px; color: inherit !important; }
#modalPermisos #tblPermisosEstatus .pf-rojo .permiso-estatus { color: #B02A41 !important; }
#modalPermisos #tblPermisosEstatus .pf-ambar .permiso-estatus { color: #A86800 !important; }
#modalPermisos #tblPermisosEstatus .pf-amarillo .permiso-estatus { color: #8A6A00 !important; }
#modalPermisos #tblPermisosEstatus .pf-verde .permiso-estatus { color: #1F7A52 !important; }
#modalPermisos #tblPermisosEstatus .permiso-estatus-icon { display: none; }
#modalPermisos #tblPermisosEstatus .permiso-estatus { font-size: 11px; }
#modalPermisos #permisosLeyenda .estatus-dot-icon { display: none; }
#modalPermisos #permisosLeyenda .estatus-dot { width: 14px; height: 14px; }

/* ===== Fondo crema en las dos tablas del modal de Permisos (lista de estatus y detalle), como la tabla de Tramitología ===== */
#modalPermisos .permisos-tbl-wrap { background: #FFF8EC; border-color: #EBDDBF; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal), #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) { border-bottom-color: #EBDDBF; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover { background: #F4E7D2; border-color: #EBDDBF; }
#modalPermisos .cg { background: #FFF8EC; }
#modalPermisos .cg-row + .cg-row, #modalPermisos .cg-grupo + .cg-grupo, #modalPermisos .cg-fila + .cg-fila { border-top-color: #E9DAB8; }
#modalPermisos .cg-c { border-right-color: #EEE0C2; }
#modalPermisos .cg-row:not(.cg-head):nth-child(even) { background: #FFF8EC; }
#modalPermisos .cg-row:not(.cg-head):nth-child(odd) { background: #F6EBD3; }
#modalPermisos .cg-row:not(.cg-head):hover { background: #EBD5A8; }
#modalPermisos .permisos-row .permisos-tbl-wrap { background: #FFFCF6; border-color: #F0E6D2; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal), #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal) { border-bottom-color: #F0E6D2; }
#modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal):hover, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal):hover { background: #FAF1E0; border-color: #F0E6D2; }
#modalPermisos #tblPermisosEstatus tbody tr.pf-no_aplica td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(odd):not(.row-total):not(.row-Subtotal).pf-no_aplica td.rowno, #modalPermisos #tblPermisosEstatus tbody tr:nth-child(even):not(.row-total):not(.row-Subtotal).pf-no_aplica td.rowno { background: #9AA0A6; color: #fff; box-shadow: 0 2px 5px rgba(59, 10, 32, .22); }
#modalPermisos #tblPermisosEstatus .pf-no_aplica .permiso-estatus { color: #6B7076 !important; }

/* ===== Tabla de detalle del modal de Permisos: alto fijo con scroll interno y cabecera fija, sin hover y sin bordes verticales ===== */
#modalPermisos #permDetalleWrap .tbl-scroll { max-height: 430px; overflow: auto; }
#modalPermisos .cg { min-width: 960px; }
#modalPermisos .cg-head { position: sticky; top: 0; z-index: 3; }
#modalPermisos .cg-c, #modalPermisos .cg-head .cg-c { border-right: none; }
#modalPermisos .cg-head .cg-c { border-right: 1px solid rgba(255, 255, 255, .14); }
#modalPermisos .cg-head .cg-c:last-child, #modalPermisos .cg-head > .cg-est { border-right: none; }
#modalPermisos .cg-row:not(.cg-head):hover { background: inherit; }
#modalPermisos .cg-row:not(.cg-head):nth-child(even):hover { background: #FFF8EC; }
#modalPermisos .cg-row:not(.cg-head):nth-child(odd):hover { background: #F6EBD3; }
#modalPermisos .cg-row + .cg-row, #modalPermisos .cg-grupo + .cg-grupo, #modalPermisos .cg-fila + .cg-fila { border-top: 1px solid #EFE3C8; }
#modalPermisos #permDetalleWrap .tbl-scroll { max-height: 640px; }
#modalPermisos .cg-c { border-right: 1px solid #D9C48E; }
#modalPermisos .cg-fila > .cg-est, #modalPermisos .cg-row > .cg-est, #modalPermisos .cg-head > .cg-est { border-right: none; }
#modalPermisos .cg-row + .cg-row, #modalPermisos .cg-grupo + .cg-grupo, #modalPermisos .cg-fila + .cg-fila { border-top: 1px solid #D9C48E; }
#modalPermisos .cg { border: 1.5px solid #CDB777; }
#modalPermisos .cg-head .cg-c { border-right: 1px solid rgba(255, 255, 255, .3); }

/* ===== Modal "Ficha Resumen" (columna Ficha de Tramitología) rediseñado (2026-10-21): solo pantalla, la impresión usa sus propias reglas ===== */
#modalFichaResumen .modal-card1 { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalFichaResumen .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 138px 16px 26px; }
#modalFichaResumen .modal-top h3 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
#modalFichaResumen .modal-top .mt-mun { margin-top: 6px; padding-left: 18px; font-size: 13px; font-weight: 600; color: #F0D9E3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8C98E'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat left center / 13px 13px; }
#modalFichaResumen .modal-print { top: 18px; right: 70px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: none; transition: background .18s ease; }
#modalFichaResumen .modal-print:hover { background: linear-gradient(145deg, #C9A25A, #A87C36); border-color: transparent; }
#modalFichaResumen .modal-print:hover img { filter: brightness(0); }
#modalFichaResumen .gest-modal-body { background: #F4EFF2; padding: 18px; }
#modalFichaResumen .resumen-corte { display: inline-block; margin: 0 0 12px; padding: 6px 16px; border-radius: 999px; background: var(--oro-soft); border: 1px solid #E8D3A4; color: #7A5A22; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#modalFichaResumen .resumen-corte:empty { display: none; }
#modalFichaResumen .resumen-badges { gap: 12px; margin-bottom: 16px; }
#modalFichaResumen .resumen-badge { position: relative; overflow: hidden; padding: 14px 18px; border-radius: 16px; box-shadow: 0 4px 12px rgba(59, 10, 32, .2); }
#modalFichaResumen .resumen-badge::after { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
#modalFichaResumen .resumen-badge span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
#modalFichaResumen .resumen-badge b { font-size: 28px; font-weight: 800; line-height: 1.1; }
#modalFichaResumen .resumen-badge-verde { background: linear-gradient(145deg, #25915F, #1A6847); }
#modalFichaResumen .resumen-badge-vino { background: linear-gradient(145deg, #7C2349, #5A1735); }
#modalFichaResumen .resumen-badge-oro { background: linear-gradient(145deg, #C29A52, #94692A); }
#modalFichaResumen .resumen-layout { gap: 16px; padding: 18px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalFichaResumen .resumen-izq { gap: 12px; }
#modalFichaResumen .resumen-item { align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #F0E7EB; font-size: 13.5px; }
#modalFichaResumen .resumen-item:last-child { border-bottom: none; padding-bottom: 0; }
#modalFichaResumen .resumen-item img { width: 32px; height: 32px; margin: 0; filter: drop-shadow(0 2px 3px rgba(59, 10, 32, .22)); }
#modalFichaResumen .resumen-item p b { color: var(--vino); }
#modalFichaResumen .resumen-mapa { height: 100%; min-height: 340px; border: 3px solid #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(59, 10, 32, .2); }
#modalFichaResumen .resumen-permisos { padding: 16px 18px 18px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalFichaResumen .resumen-permisos h2 { margin: 0 0 12px; padding: 0; background: none; color: var(--vino); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#modalFichaResumen .resumen-permisos-otros-titulo { margin: 16px 0 10px; color: var(--vino); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
#modalFichaResumen .resumen-permisos-grid { gap: 12px; }
#modalFichaResumen .resumen-permiso-card { min-width: 150px; padding: 12px 14px; border: 1px solid #EFE4EA; border-radius: 14px; background: #FAF6F8; gap: 6px; }
#modalFichaResumen .resumen-permiso-card img { height: 28px; }
#modalFichaResumen .resumen-permiso-nombre { font-size: 12px; font-weight: 800; color: var(--vino); }
#modalFichaResumen .resumen-permiso-estatus { padding: 3px 12px; border-radius: 999px; font-size: 10.5px; }
#modalFichaResumen .resumen-tramo { margin-bottom: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalFichaResumen .resumen-tramo table { border-collapse: collapse; }
#modalFichaResumen .resumen-tramo th, #modalFichaResumen .resumen-tramo td { padding: 12px 18px; border: none; }
#modalFichaResumen .resumen-tramo th { background: linear-gradient(180deg, #7C2349, #5A1735); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
#modalFichaResumen .resumen-tramo td { background: #FFF8EC; color: var(--ink); line-height: 1.55; }
#modalFichaResumen .resumen-tramo td:first-child { border-right: 1px solid #E9DAB8; width: 28%; font-weight: 700; color: var(--vino); }
#modalFichaResumen .resumen-problematica { margin-top: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalFichaResumen .resumen-problematica-mapa { border: 3px solid #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(59, 10, 32, .2); }
@media (max-width: 640px) { #modalFichaResumen .gest-modal-body { padding: 10px; } #modalFichaResumen .modal-top h3 { font-size: 19px; } #modalFichaResumen .resumen-badge b { font-size: 22px; } }

/* Gestión de Permisos en dos columnas: principales (tarjetas) | Otros Permisos (una sola ficha con nombre y estatus). Base global: la usa también la ventana de impresión. */
.resumen-permisos-dos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.resumen-permisos-dos .resumen-permisos-col > h2 { margin-top: 0; }
.resumen-otros-ficha { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.resumen-otro { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #F0E7EB; font-size: 12.5px; }
.resumen-otro:last-child { border-bottom: none; }
.resumen-otro-nombre { font-weight: 800; color: var(--vino); }
@media (max-width: 760px) { .resumen-permisos-dos { grid-template-columns: 1fr; } }
/* Ajustes del rediseño de la Ficha Resumen (2ª ronda): sin pastilla en "Corte al", sin círculo en los avances */
#modalFichaResumen .resumen-badge::after { display: none; }
#modalFichaResumen .resumen-corte { display: block; margin: 0 0 14px; padding: 2px 0 2px 12px; border: none; border-left: 4px solid var(--oro); border-radius: 0; background: none; color: var(--vino); font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; }
#modalFichaResumen .resumen-permisos-dos .resumen-permisos-grid { gap: 10px; }
#modalFichaResumen .resumen-permisos-dos .resumen-permiso-card { min-width: 130px; flex: 1 1 130px; }
#modalFichaResumen .resumen-otros-ficha { border-color: #EFE4EA; background: #FAF6F8; border-radius: 14px; }
#modalFichaResumen .resumen-otro { padding: 12px 16px; border-bottom-color: #EBDDE4; }
#modalFichaResumen .resumen-otro .resumen-permiso-estatus { white-space: nowrap; }

/* ===== Modal "Problemática Social" con el mismo formato que la Ficha Resumen (2026-10-21) ===== */
#modalProblematica .modal-card1 { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalProblematica .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 138px 16px 26px; }
#modalProblematica .modal-top h3 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
#modalProblematica .modal-top .mt-mun { margin-top: 6px; padding-left: 18px; font-size: 13px; font-weight: 600; color: #F0D9E3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8C98E'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat left center / 13px 13px; }
#modalProblematica .modal-top .mt-mun:empty { display: none; }
#modalProblematica .modal-print { top: 18px; right: 70px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: none; transition: background .18s ease; }
#modalProblematica .modal-print:hover { background: linear-gradient(145deg, #C9A25A, #A87C36); border-color: transparent; }
#modalProblematica .modal-print:hover img { filter: brightness(0); }
#modalProblematica .gest-modal-body { background: #F4EFF2; padding: 18px !important; }
#modalProblematica .resumen-problematica { margin-top: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
#modalProblematica .resumen-problematica-mapa { border: 3px solid #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(59, 10, 32, .2); }
#modalProblematica .resumen-problematica-video { border-radius: 14px; }
@media (max-width: 640px) { #modalProblematica .gest-modal-body { padding: 10px !important; } #modalProblematica .modal-top h3 { font-size: 19px; } }

/* ===== Problemática Social: modo edición (2026-10-21) ===== */
#modalProblematica #problematicaBody:has(#probTitulo) { padding: 18px !important; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); margin: 0; }
#modalProblematica #problematicaBody:has(#probTitulo) > label { font: 800 12px 'Inter', sans-serif !important; color: var(--vino) !important; letter-spacing: .02em; margin-bottom: 14px !important; }
#modalProblematica #problematicaBody:has(#probTitulo) > label span { font-weight: 500 !important; color: var(--muted) !important; }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="text"],
#modalProblematica #problematicaBody:has(#probTitulo) textarea { width: 100%; padding: 9px 12px !important; border: 1.5px solid #D9C3CE !important; border-radius: 10px !important; background: #fff; color: var(--ink); font: 500 14px/1.45 'Inter', sans-serif; box-shadow: inset 0 1px 2px rgba(59, 10, 32, .06); transition: border-color .15s, box-shadow .15s; }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="text"]:hover,
#modalProblematica #problematicaBody:has(#probTitulo) textarea:hover { border-color: var(--vino-2) !important; }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="text"]:focus,
#modalProblematica #problematicaBody:has(#probTitulo) textarea:focus { border-color: var(--vino) !important; box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
#modalProblematica #problematicaBody:has(#probTitulo) textarea { min-height: 76px; line-height: 1.55; resize: vertical; padding-bottom: 24px !important; }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="text"] { padding-right: 70px !important; }
#modalProblematica #problematicaBody:has(#probTitulo) .cc-contador { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: right; letter-spacing: .02em; position: relative; height: 15px; margin: -28px 0 13px; padding: 0 14px 0 0; line-height: 15px; pointer-events: none; }
#modalProblematica #problematicaBody:has(#probTitulo) textarea + .cc-contador { margin-top: -22px; }
#modalProblematica #problematicaBody:has(#probTitulo) .cc-contador-cerca { color: var(--ambar); }
#modalProblematica #problematicaBody:has(#probTitulo) .cc-contador-tope { color: var(--rojo); }
#modalProblematica #probBulletsWrap > div { align-items: center; gap: 8px !important; margin-bottom: 8px !important; }
#modalProblematica #probBulletsWrap > div > input { margin: 0; }
#modalProblematica #probBulletsWrap > div > input + .cc-contador { display: none; }
#modalProblematica #probBulletsWrap > div > button { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50% !important; background: var(--vino-soft) !important; color: var(--vino) !important; font-weight: 800; transition: background .15s, color .15s; }
#modalProblematica #probBulletsWrap > div > button:hover { background: var(--rojo) !important; color: #fff !important; }
#modalProblematica #probBtnAddBullet, #modalProblematica #problematicaBody:has(#probTitulo) > button.pd-edit-addbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border: 1.5px dashed var(--oro); border-radius: 999px; background: var(--oro-soft); color: #7A5A22; font: 800 12.5px 'Inter', sans-serif; cursor: pointer; transition: background .15s; }
#modalProblematica #probBtnAddBullet:hover, #modalProblematica #problematicaBody:has(#probTitulo) > button.pd-edit-addbtn:hover { background: #F0E2C4; border-style: solid; }
#modalProblematica #problematicaBody:has(#probTitulo) > button.pd-edit-addbtn { width: 100%; margin-bottom: 14px !important; padding: 12px 18px; }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="file"] { width: 100%; padding: 10px 12px; border: 1.5px dashed #D9C3CE; border-radius: 12px; background: #FBF5F8; font-size: 12.5px; color: var(--ink-2); }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 16px; border: none; border-radius: 999px; background: var(--vino-soft); color: var(--vino); font: 700 12.5px 'Inter', sans-serif; cursor: pointer; transition: background .15s, color .15s; }
#modalProblematica #problematicaBody:has(#probTitulo) input[type="file"]::file-selector-button:hover { background: var(--vino); color: #fff; }
#modalProblematica #probVideoActualWrap { margin: 4px 0 14px !important; }
#modalProblematica #probVideoActualWrap .fx-video-quitar { position: static; width: auto; height: auto; display: inline-flex; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--rojo); border-radius: 999px; background: var(--rojo-soft); color: var(--rojo); font: 800 12px 'Inter', sans-serif; transition: background .15s, color .15s; }
#modalProblematica #probVideoActualWrap .fx-video-quitar:hover { background: var(--rojo); color: #fff; }
#modalProblematica #problematicaBody:has(#probTitulo) > div:has(> button[onclick="_probGuardar()"]) { gap: 10px !important; margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--line); }
#modalProblematica button[onclick="_probGuardar()"] { border-radius: 999px !important; border: none !important; background: linear-gradient(145deg, #C29A4F, #A87C36) !important; color: #fff !important; padding: 12px 20px !important; font: 800 13px 'Inter', sans-serif !important; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); transition: filter .15s; }
#modalProblematica button[onclick="_probGuardar()"]:hover { filter: brightness(1.08); }
#modalProblematica button[onclick="_probCancelarEdicion()"] { border-radius: 999px !important; border: 1.5px solid var(--vino) !important; background: #fff !important; color: var(--vino) !important; padding: 12px 20px !important; font: 800 13px 'Inter', sans-serif !important; transition: background .15s; }
#modalProblematica button[onclick="_probCancelarEdicion()"]:hover { background: var(--vino-soft) !important; }
#modalProblematica #problematicaBody:has(#probTitulo) > label[style*="margin-bottom:4px"] { margin-top: 8px; margin-bottom: 8px !important; }
#modalProblematica .resumen-problematica-lista-ancha { margin-bottom: 18px; }
#modalProblematica .resumen-problematica-video-layout { align-items: center; gap: 28px; }
#modalProblematica .resumen-problematica-video-layout .resumen-problematica-video { width: 100%; max-width: 340px; max-height: 600px; }
#modalProblematica .resumen-problematica-video-layout .resumen-problematica-mapa { height: 420px; }
#modalFichaResumen .resumen-problematica-lista-ancha { margin-bottom: 18px; }
#modalFichaResumen .resumen-problematica-video-layout { align-items: center; gap: 28px; }
#modalFichaResumen .resumen-problematica-video-layout .resumen-problematica-video { width: 100%; max-width: 340px; max-height: 600px; }
#modalFichaResumen .resumen-problematica-video-layout .resumen-problematica-mapa { height: 420px; }

/* ===== Seguimiento de acciones (individual y general): rediseño (2026-10-21) ===== */
#modalPrioridad .modal-card, #modalPrioridadGeneral .modal-card { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalPrioridad .modal-top, #modalPrioridadGeneral .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); }
#modalPrioridad .modal-top { padding: 18px 244px 16px 26px; }
#modalPrioridad .modal-top h3, #modalPrioridadGeneral .modal-top h3 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
#modalPrioridad .modal-print, #modalPrioridadGeneral .modal-print { top: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: none; transition: background .18s ease; }
#modalPrioridad .modal-print:hover, #modalPrioridadGeneral .modal-print:hover { background: linear-gradient(145deg, #C9A25A, #A87C36); border-color: transparent; }
#modalPrioridad .modal-body, #modalPrioridadGeneral .modal-body { background: #F4EFF2; padding: 18px !important; }
#modalPrioridad .prio-obra-nombre { margin: 0 0 14px; padding-left: 14px; border-left: 4px solid var(--oro); font-size: 19px; }
#modalPrioridad .prio-media-col { border: 3px solid #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(59, 10, 32, .2); }
#modalPrioridad .prio-filtros { padding: 12px 14px; margin-bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
#modalPrioridad .prio-enviar-correo-btn { padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 12.5px; transition: background .15s, color .15s; }
#modalPrioridad .prio-enviar-correo-btn:hover { background: var(--vino); color: #fff; }
#modalPrioridad .prio-enviar-correo-btn:hover img { filter: brightness(0) invert(1); }
#modalPrioridad .prio-filtro-responsable { margin-left: auto; }
#modalPrioridadGeneral .modal-body > div:first-child { padding: 12px 14px; margin-bottom: 14px !important; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
#modalPrioridad select, #modalPrioridadGeneral select, #modalPrioridadGeneral input[type="text"] { border: 1.5px solid #D9C3CE !important; border-radius: 999px !important; background-color: #fff; color: var(--ink); font: 600 12.5px 'Inter', sans-serif !important; padding: 8px 14px !important; transition: border-color .15s, box-shadow .15s; }
#modalPrioridad select:hover, #modalPrioridadGeneral select:hover { border-color: var(--vino-2) !important; }
#modalPrioridad select:focus, #modalPrioridadGeneral select:focus, #modalPrioridadGeneral input[type="text"]:focus { border-color: var(--vino) !important; box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
#modalPrioridad .tbl-archivos-gest-wrap, #modalPrioridad #prioObraEdicion, #modalPrioridadGeneral #prioGeneralVista { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
#modalPrioridad .tbl-archivos-gest-scroll, #modalPrioridadGeneral #prioGeneralVista { max-height: 60vh; }
#modalPrioridad thead th, #modalPrioridadGeneral thead th { background: linear-gradient(180deg, #7C2349, #691B3C) !important; border-color: rgba(255, 255, 255, .14) !important; letter-spacing: .05em; }
#modalPrioridad tbody td, #modalPrioridadGeneral tbody td { border-color: #EFE3E9 !important; }
#modalPrioridad tbody tr:not([data-header]) td, #modalPrioridadGeneral tbody tr:not([data-header]) td { background-color: #fff; transition: background-color .12s; }
#modalPrioridad tbody tr:not([data-header]):nth-child(even) td, #modalPrioridadGeneral tbody tr:not([data-header]):nth-child(even) td { background-color: #FBF6F8; }
#modalPrioridad tbody tr:not([data-header]):hover td, #modalPrioridadGeneral tbody tr:not([data-header]):hover td { background-color: #FFF8EC; }
#modalPrioridad tbody tr[data-header] td, #modalPrioridadGeneral tbody tr[data-header] td { padding: 7px 10px !important; letter-spacing: .08em !important; font-weight: 800 !important; }
#modalPrioridad tbody td[style*="font-weight:600"], #modalPrioridadGeneral tbody td[style*="font-weight:600"] { background-clip: padding-box; }
#modalPrioridad #prioObraToolbarVista button, #modalPrioridad #prioObraToolbarEdit button { border-radius: 999px !important; padding: 7px 16px !important; font: 800 12px 'Inter', sans-serif !important; }
#modalPrioridad #prioObraBtnGuardar { background: linear-gradient(145deg, #C29A4F, #A87C36) !important; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); }
#modalPrioridad #prioObraBtnCancelar { border: 1.5px solid var(--vino) !important; color: var(--vino); }
@media (max-width: 720px) { #modalPrioridad .modal-body, #modalPrioridadGeneral .modal-body { padding: 10px !important; } #modalPrioridad .modal-top h3, #modalPrioridadGeneral .modal-top h3 { font-size: 19px; } #modalPrioridad .prio-filtro-responsable { margin-left: 0; } }
#modalPrioridadGeneral thead th { letter-spacing: .02em; font-size: 9.5px; }
#modalPrioridadGeneral #prioGeneralVista, #modalPrioridad #prioObraEdicion { overflow-y: auto; overflow-x: hidden; }
#modalPrioridad .tbl-archivos-gest-scroll { overflow-y: auto; }
#modalPrioridad .prio-grupo-row td, #modalPrioridadGeneral .prio-grupo-row td { position: sticky; top: var(--prio-header-h, 34px); z-index: 2; }
#modalPrioridad .prio-filtro-responsable { order: -1; margin-left: 0; }
#modalPrioridad .prio-filtros .prio-enviar-correo-btn:first-of-type { margin-left: auto; }
@media (max-width: 720px) { #modalPrioridad .prio-filtros .prio-enviar-correo-btn:first-of-type { margin-left: 0; } }

/* ===== Enviar por correo: rediseño (2026-10-21) ===== */
#modalPrioCorreo .modal-card { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalPrioCorreo .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 80px 16px 26px; }
#modalPrioCorreo .modal-top h3 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
#modalPrioCorreo .modal-body { background: #F4EFF2; padding: 18px !important; }
#modalPrioCorreo .modal-body > * { max-width: 100%; }
#modalPrioCorreo #prioCorreoAlcance { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--oro-soft); color: #7A5A22 !important; font: 700 12px 'Inter', sans-serif; margin-bottom: 14px !important; }
#modalPrioCorreo .modal-body > label { font: 800 12px 'Inter', sans-serif !important; color: var(--vino) !important; letter-spacing: .02em; margin: 0 0 6px !important; }
#modalPrioCorreo input[type="text"], #modalPrioCorreo textarea, #modalPrioCorreo select { border: 1.5px solid #D9C3CE !important; border-radius: 12px !important; background-color: #fff; color: var(--ink); font: 500 14px/1.45 'Inter', sans-serif !important; padding: 10px 14px !important; box-shadow: inset 0 1px 2px rgba(59, 10, 32, .06); transition: border-color .15s, box-shadow .15s; }
#modalPrioCorreo select { font-weight: 700 !important; color: var(--vino); }
#modalPrioCorreo input[type="text"]:hover, #modalPrioCorreo textarea:hover, #modalPrioCorreo select:hover { border-color: var(--vino-2) !important; }
#modalPrioCorreo input[type="text"]:focus, #modalPrioCorreo textarea:focus, #modalPrioCorreo select:focus { border-color: var(--vino) !important; box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
#modalPrioCorreo #prioCorreoDestDropdownBtn { width: 46px !important; border: 1.5px solid var(--vino) !important; border-radius: 12px !important; background: #fff !important; transition: background .15s, color .15s; }
#modalPrioCorreo #prioCorreoDestDropdownBtn:hover { background: var(--vino) !important; color: #fff !important; }
#modalPrioCorreo #prioCorreoDestDropdownList { border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(59, 10, 32, .25) !important; overflow-x: hidden; padding: 4px; }
#modalPrioCorreo .prio-correo-dest-item { border: none !important; border-radius: 10px; padding: 8px 12px !important; transition: background .12s; }
#modalPrioCorreo .prio-correo-dest-item:hover { background: #FFF8EC; }
#modalPrioCorreo #prioCorreoPreview { background: #fff; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow); max-height: 260px !important; }
#modalPrioCorreo #prioCorreoPreview table { width: 100%; border-collapse: collapse; }
#modalPrioCorreo #prioCorreoPreview th { background: linear-gradient(180deg, #7C2349, #691B3C); color: #fff; border: 1px solid rgba(255, 255, 255, .14) !important; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; position: sticky; top: 0; z-index: 1; }
#modalPrioCorreo #prioCorreoPreview td { border: 1px solid #EFE3E9 !important; }
#modalPrioCorreo #prioCorreoPreview tr:nth-child(even) td { background-color: #FBF6F8; }
#modalPrioCorreo #prioCorreoMsg { font-weight: 700; }
#modalPrioCorreo .modal-body > div:last-child { gap: 10px !important; padding-top: 14px; border-top: 1px solid var(--line); }
#modalPrioCorreo .modal-body > div:last-child button { border-radius: 999px !important; padding: 11px 26px !important; font: 800 13px 'Inter', sans-serif !important; }
#modalPrioCorreo #prioCorreoEnviar { background: linear-gradient(145deg, #C29A4F, #A87C36) !important; color: #fff; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); transition: filter .15s; }
#modalPrioCorreo #prioCorreoEnviar:hover { filter: brightness(1.08); }
#modalPrioCorreo #prioCorreoEnviar:disabled { filter: grayscale(.4); opacity: .7; cursor: wait; }
#modalPrioCorreo .modal-body > div:last-child button:not(#prioCorreoEnviar) { border: 1.5px solid var(--vino) !important; color: var(--vino); transition: background .15s; }
#modalPrioCorreo .modal-body > div:last-child button:not(#prioCorreoEnviar):hover { background: var(--vino-soft) !important; }
@media (max-width: 640px) { #modalPrioCorreo .modal-body { padding: 10px !important; } #modalPrioCorreo .modal-top h3 { font-size: 19px; } }
#modalPrioCorreo #prioCorreoAsunto, #modalPrioCorreo #prioCorreoMensaje { margin-bottom: 0 !important; }
#modalPrioCorreo #prioCorreoAsunto { padding-right: 70px !important; }
#modalPrioCorreo #prioCorreoMensaje { padding-bottom: 24px !important; min-height: 76px; }
#modalPrioCorreo .cc-contador { position: relative; height: 15px; margin: -26px 0 12px; padding: 0 14px 0 0; line-height: 15px; font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: right; pointer-events: none; }
#modalPrioCorreo textarea + .cc-contador { margin-top: -22px; margin-bottom: 14px; }
#modalPrioCorreo .cc-contador-cerca { color: var(--ambar); }
#modalPrioCorreo .cc-contador-tope { color: var(--rojo); }
#modalPrioCorreo #prioCorreoPreview { max-height: 190px !important; }
#modalPrioCorreo .modal-card { max-height: 94vh; display: flex; flex-direction: column; }
#modalPrioCorreo .modal-body { overflow-y: auto; }
#modalPrioCorreo .modal-body > label { margin-top: 14px !important; }
#modalPrioCorreo .modal-body > #prioCorreoAlcance + label { margin-top: 0 !important; }
#modalPrioCorreo #prioCorreoPreview th { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-align: center; white-space: normal; word-break: break-word; padding: 8px 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
#modalPrioCorreo #prioCorreoPreview td { padding: 10px 10px; vertical-align: middle; }
#modalPrioCorreo #prioCorreoPreview tr[data-header] td { padding: 7px 10px !important; letter-spacing: .08em !important; font-weight: 800 !important; }
#modalPrioCorreo #prioCorreoPreview tr:not([data-header]) td { background-color: #fff; }
#modalPrioCorreo #prioCorreoPreview tr:not([data-header]):nth-child(even) td { background-color: #FBF6F8; }
#modalPrioCorreo #prioCorreoPreview .prio-grupo-row td { position: sticky; top: 45px; z-index: 1; }
#modalPrioCorreo #prioCorreoPreview td:last-child:not([colspan]) { text-align: left; }
#modalPrioCorreo[data-scope="general"] #prioCorreoPreview td:nth-child(2):not([colspan]), #modalPrioCorreo[data-scope="general"] #prioCorreoPreview td:nth-child(3):not([colspan]) { text-align: left; }
#modalPrioCorreo #prioCorreoPreview { max-height: 230px !important; }

/* ===== Modal de dependencia (Gestiones): rediseño (2026-10-22) ===== */
#modalGestiones .modal-card { border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 5, 16, .45); }
#modalGestiones .modal-top { background: linear-gradient(120deg, #7C2349 0%, #691B3C 55%, #4D1230 100%); border-bottom: 3px solid var(--oro); padding: 18px 80px 16px 26px; }
#modalGestiones .modal-top h3 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; line-height: 1.15; }
#modalGestiones .modal-top h4 { margin-top: 6px; padding-left: 18px; font-size: 13px; font-weight: 600; color: #F0D9E3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8C98E'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat left center / 13px; }
#modalGestiones .modal-top h4:empty { display: none; }
#modalGestiones .gest-modal-body { background: #F4EFF2; padding: 18px !important; }
#modalGestiones #gestBody > div:first-child:not(.view-porcentaje):not(.tram-agregar-gest):not(.tbl-archivos-gest-wrap) { padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); gap: 8px !important; align-items: center; margin-bottom: 14px !important; }
#modalGestiones #gestBody > div:first-child:not(.view-porcentaje):not(.tram-agregar-gest):not(.tbl-archivos-gest-wrap) button { border-radius: 999px !important; padding: 8px 18px !important; font: 800 12.5px 'Inter', sans-serif !important; transition: background .15s, color .15s, filter .15s; }
#modalGestiones #gestBody > div:first-child button[onclick^="_gestIntentarEditar"] { border: 1.5px solid var(--vino) !important; }
#modalGestiones #gestBody > div:first-child button[onclick^="_gestIntentarEditar"]:hover { background: var(--vino) !important; color: #fff !important; }
#modalGestiones #gestBtnGuardar { background: linear-gradient(145deg, #C29A4F, #A87C36) !important; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); }
#modalGestiones #gestBtnCancelar { border: 1.5px solid var(--vino) !important; color: var(--vino); }
#modalGestiones #gestBody > div:first-child button[onclick^="_gestIntentarAgregar"] { border: 1.5px dashed var(--oro) !important; background: var(--oro-soft) !important; }
#modalGestiones #gestBody > div:first-child button[onclick^="_gestEliminarDependencia"] { border: 1.5px solid var(--rojo) !important; background: var(--rojo-soft) !important; }
#modalGestiones #gestBody > div:first-child button[onclick^="_gestEliminarDependencia"]:hover { background: var(--rojo) !important; color: #fff !important; }
#modalGestiones .view-porcentaje { gap: 10px; margin: 0 0 14px; }
#modalGestiones .view-porcentaje p { margin: 0 4px 0 0; flex: none; font-weight: 800; color: var(--vino); }
#modalGestiones .view-porcentaje .porcentaje { background: #fff; border: none; border-left: 12px solid var(--est, #9AA0A6); border-radius: 0 16px 16px 0; margin: 0; padding: 6px 16px 6px 12px; font-size: 12px; font-weight: 700; color: #000; box-shadow: 0 2px 4px rgba(59, 10, 32, .15); }
#modalGestiones .view-porcentaje .porcentaje > :first-child { display: none; }
#modalGestiones .view-porcentaje .porcentaje:nth-of-type(1) { --est: var(--rojo); }
#modalGestiones .view-porcentaje .porcentaje:nth-of-type(2) { --est: var(--ambar); }
#modalGestiones .view-porcentaje .porcentaje:nth-of-type(3) { --est: var(--amarillo); }
#modalGestiones .view-porcentaje .porcentaje:nth-of-type(4) { --est: var(--verde); }
#modalGestiones .tbl-archivos-gest-wrap { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
#modalGestiones thead th { background: linear-gradient(180deg, #7C2349, #691B3C) !important; border-color: rgba(255, 255, 255, .14) !important; letter-spacing: .05em; text-align: center; }
#modalGestiones tbody td { border-color: #EFE3E9 !important; }
#modalGestiones tbody tr td { background-color: #fff; transition: background-color .12s; }
#modalGestiones tbody tr:nth-child(even) td { background-color: #FBF6F8; }
#modalGestiones tbody tr:hover td { background-color: #FFF8EC; }
#modalGestiones .tram-agregar-gest { background: #fff !important; border: 1.5px dashed var(--oro) !important; border-radius: 16px !important; padding: 16px !important; box-shadow: var(--shadow); }
#modalGestiones .tram-agregar-gest > b { font: 800 14px 'Inter', sans-serif !important; color: var(--vino) !important; }
#modalGestiones .tram-agregar-gest label { font: 800 11px 'Inter', sans-serif !important; color: var(--vino) !important; }
#modalGestiones input[type="text"], #modalGestiones input:not([type]), #modalGestiones select, #modalGestiones textarea { border: 1.5px solid #D9C3CE !important; border-radius: 10px !important; background-color: #fff; color: var(--ink); font-family: 'Inter', sans-serif; transition: border-color .15s, box-shadow .15s; }
#modalGestiones .tram-agregar-gest input, #modalGestiones .tram-agregar-gest select { padding: 8px 12px !important; font-size: 13px !important; font-weight: 500; }
#modalGestiones input:hover, #modalGestiones select:hover { border-color: var(--vino-2) !important; }
#modalGestiones input:focus, #modalGestiones select:focus { border-color: var(--vino) !important; box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
#modalGestiones #agGAgregarBtn { border-radius: 999px !important; }
#modalGestiones .tram-agregar-gest button[onclick^="_gestGuardarBorradores"] { border-radius: 999px !important; padding: 8px 20px !important; background: linear-gradient(145deg, #C29A4F, #A87C36) !important; font-weight: 800 !important; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); }
#modalGestiones .tram-agregar-gest button[onclick^="_gestNoGuardarBorradores"] { border-radius: 999px !important; padding: 8px 20px !important; border: 1.5px solid var(--vino) !important; color: var(--vino); font-weight: 800 !important; }
#modalGestiones input[type="file"] { max-width: 100%; font-size: 11px; }
#modalGestiones input[type="file"]::file-selector-button { margin-right: 8px; padding: 5px 12px; border: none; border-radius: 999px; background: var(--vino-soft); color: var(--vino); font: 700 11px 'Inter', sans-serif; cursor: pointer; }
#modalGestiones input[type="file"]::file-selector-button:hover { background: var(--vino); color: #fff; }
@media (max-width: 640px) { #modalGestiones .gest-modal-body { padding: 10px !important; } #modalGestiones .modal-top h3 { font-size: 19px; } }
#modalGestiones tbody td input.gest-in, #modalGestiones tbody td select.gest-in { width: 100% !important; max-width: 100%; box-sizing: border-box; padding: 6px 10px !important; font-size: 12px !important; font-weight: 500; }
#modalGestiones tbody td select.gest-in { padding-right: 26px !important; text-overflow: ellipsis; }
#modalGestiones tbody td .cc-contador { font-size: 10px; font-weight: 700; color: var(--muted); text-align: right; margin: 2px 4px 0 0; }
#modalGestiones tbody td input[type="file"] { width: 100%; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) { min-width: 1180px; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(3) { width: 130px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(4) { width: 170px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(5) { width: 110px !important; }
#modalGestiones .modal-top h4 { padding-left: 0; background: none; font-size: 16px; font-weight: 700; margin-top: 8px; }
#modalGestiones .estatus-badge .estatus-badge-icon { display: none; }
#modalGestiones tbody .estatus-badge { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 7px 10px; border: none; border-radius: 999px; font: 800 10.5px/1.2 'Inter', sans-serif !important; letter-spacing: .03em; text-transform: uppercase; text-align: center; color: #fff; box-shadow: 0 2px 5px rgba(59, 10, 32, .2); }
#modalGestiones tbody .estatus-badge.estatus-rojo { background: var(--rojo); }
#modalGestiones tbody .estatus-badge.estatus-ambar { background: var(--ambar); }
#modalGestiones tbody .estatus-badge.estatus-amarillo { background: var(--amarillo); color: #3B0A20; }
#modalGestiones tbody .estatus-badge.estatus-verde { background: var(--verde); }
#modalGestiones tbody .estatus-badge.estatus-gris { background: #9AA0A6; }
#modalGestiones tbody .estatus-badge { border-radius: 12px; }
#modalGestiones .tbl-archivos-gest:not(:has(thead th:nth-child(8))) thead th:nth-child(4) { width: 130px !important; }

/* ===== Modal de dependencia: segunda versión de Estatus y Documentación (2026-10-22) ===== */
#modalGestiones tbody .estatus-badge { display: block; width: 100%; padding: 8px 10px 8px 12px; border: none; border-left: 6px solid var(--est, #9AA0A6); border-radius: 0 12px 12px 0; background: var(--est-bg, #F1F1F2); color: var(--ink); box-shadow: none; font: 800 10.5px/1.25 'Inter', sans-serif !important; letter-spacing: .02em; text-transform: uppercase; text-align: left; }
#modalGestiones tbody .estatus-badge.estatus-rojo { --est: var(--rojo); --est-bg: var(--rojo-soft); background: var(--rojo-soft); color: #7A1D2E; }
#modalGestiones tbody .estatus-badge.estatus-ambar { --est: var(--ambar); --est-bg: var(--ambar-soft); background: var(--ambar-soft); color: #7A4A00; }
#modalGestiones tbody .estatus-badge.estatus-amarillo { --est: var(--amarillo); --est-bg: var(--amarillo-soft); background: var(--amarillo-soft); color: #5C4A00; }
#modalGestiones tbody .estatus-badge.estatus-verde { --est: var(--verde); --est-bg: var(--verde-soft); background: var(--verde-soft); color: #14543A; }
#modalGestiones tbody .estatus-badge.estatus-gris { --est: #9AA0A6; background: #F1F1F2; color: #5A5F66; }
#modalGestiones .tram-doc-pdfs { gap: 8px; margin-bottom: 8px; }
#modalGestiones .pdf-link-icono { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; border: 1.5px solid var(--oro); border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(59, 10, 32, .12); transition: background .15s, transform .15s; }
#modalGestiones .pdf-link-icono:hover { background: var(--oro-soft); transform: translateY(-2px); }
#modalGestiones .pdf-link-icono img { width: 24px !important; height: 24px !important; }
#modalGestiones .tram-doc-desc { padding: 7px 10px; border-left: 3px solid var(--oro); border-radius: 0 10px 10px 0; background: #FFF8EC; font-size: 11.5px; line-height: 1.4; color: var(--ink); }
#modalGestiones .tram-doc-desc b { display: block; margin-bottom: 1px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7A5A22; }
#modalGestiones tbody td .seg-vacio { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #F1ECEF; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }
#modalGestiones tbody td { font-size: 10.5px; }
#modalGestiones tbody td[style*="font-size:11px"] { font-size: 10px !important; }
#modalGestiones tbody td:has(> .estatus-badge) { padding: 0 !important; background-clip: padding-box; box-shadow: inset 6px 0 0 var(--est, #9AA0A6); }
#modalGestiones tbody td:has(> .estatus-rojo) { --est: var(--rojo); background-color: var(--rojo-soft) !important; }
#modalGestiones tbody td:has(> .estatus-ambar) { --est: var(--ambar); background-color: var(--ambar-soft) !important; }
#modalGestiones tbody td:has(> .estatus-amarillo) { --est: var(--amarillo); background-color: var(--amarillo-soft) !important; }
#modalGestiones tbody td:has(> .estatus-verde) { --est: var(--verde); background-color: var(--verde-soft) !important; }
#modalGestiones tbody td:has(> .estatus-gris) { background-color: #F1F1F2 !important; }
#modalGestiones tbody td > .estatus-badge { width: auto; padding: 8px 10px 8px 18px; border: none; border-radius: 0; background: transparent !important; font-size: 10px !important; text-align: center; }
#modalGestiones tbody td:nth-child(2), #modalGestiones tbody td:nth-child(3), #modalGestiones tbody td:nth-child(4) { text-align: center; vertical-align: middle; }
#modalGestiones tbody td:nth-child(4) > .estatus-badge { text-align: center; }
#modalGestiones tbody td { vertical-align: middle; }
#modalGestiones .pdf-link-icono:hover img { filter: none; }
#modalGestiones .tram-foto-icono { width: 66px; height: 66px; border: 2px solid #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(59, 10, 32, .25); }
#modalGestiones .tbl-archivos-gest:not(:has(thead th:nth-child(8))) thead th:nth-child(1) { width: 90px !important; }
#modalGestiones tbody td:nth-child(1) > div { justify-content: center; }

/* ===== Modal de dependencia: modo edición rediseñado (2026-10-22) ===== */
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) { min-width: 0; width: 100%; table-layout: fixed; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(1) { width: 104px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(2) { width: 170px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(3) { width: 122px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(4) { width: 150px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(5) { width: 100px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(6) { width: 170px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(7) { width: auto !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(8) { width: 56px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) tbody td { padding: 12px 10px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) tbody td:first-child { box-shadow: inset 4px 0 0 var(--oro); }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) tbody tr td { background-color: #FFFDF8; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) tbody tr:nth-child(even) td { background-color: #FBF6EC; }
#modalGestiones tbody td select.gest-in { border-radius: 999px !important; font-weight: 700 !important; color: var(--vino); background-color: #fff; cursor: pointer; }
#modalGestiones tbody td input.gest-in { border-radius: 12px !important; }
#modalGestiones tbody td input.gest-tipo-in { font-weight: 700; }
#modalGestiones tbody td input.gest-foto-inp, #modalGestiones tbody td input.gest-foto-inp::file-selector-button { font-size: 10.5px; }
#modalGestiones tbody td input.gest-foto-inp { color: transparent; width: 100%; }
#modalGestiones tbody td input.gest-foto-inp::file-selector-button { width: 100%; margin: 0; padding: 7px 8px; border: 1.5px dashed var(--oro); border-radius: 12px; background: var(--oro-soft); color: #7A5A22; }
#modalGestiones tbody td input.gest-foto-inp::file-selector-button:hover { background: #F0E2C4; }
#modalGestiones tbody td input.gest-pdf-inp { color: transparent; width: 100%; }
#modalGestiones tbody td input.gest-pdf-inp::file-selector-button { width: 100%; margin: 0; padding: 8px 10px; border: 1.5px dashed var(--vino-2); border-radius: 12px; background: var(--vino-soft); color: var(--vino); }
#modalGestiones tbody td label { font: 700 9.5px 'Inter', sans-serif !important; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2) !important; margin-top: 8px !important; }
#modalGestiones tbody td button[title="Eliminar trámite"] { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--rojo-soft) !important; transition: background .15s; }
#modalGestiones tbody td button[title="Eliminar trámite"]:hover { background: var(--rojo) !important; }
#modalGestiones tbody td button[title="Eliminar trámite"] img { width: 20px !important; height: 20px !important; }
#modalGestiones tbody td button[title="Eliminar trámite"]:hover img { filter: brightness(0) invert(1); }
#modalGestiones tbody td button[title="Eliminar PDF"] { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--rojo-soft) !important; }
#modalGestiones tbody td button[title="Eliminar PDF"]:hover { background: var(--rojo) !important; }
#modalGestiones tbody td .pdf-link.tram-pdf-nombre { border: 1.5px solid var(--oro); border-radius: 999px; background: #fff; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(2) { width: 150px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(3) { width: 138px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(4) { width: 176px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(5) { width: 112px !important; }
#modalGestiones .tbl-archivos-gest:has(thead th:nth-child(8)) thead th:nth-child(6) { width: 150px !important; }
#modalGestiones tbody td select.gest-in { padding: 6px 22px 6px 10px !important; font-size: 11px !important; background-position: right 8px center; background-size: 10px; text-overflow: clip; }

/* ===== Modal de dependencia: "Nueva gestión" rediseñado (2026-10-22) ===== */
#modalGestiones .tram-agregar-gest { position: relative; margin-bottom: 18px !important; padding: 0 !important; border: 1px solid var(--line) !important; border-top: 4px solid var(--oro) !important; border-radius: 16px !important; background: #fff !important; overflow: hidden; box-shadow: var(--shadow); }
#modalGestiones .tram-agregar-gest > b { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: linear-gradient(90deg, #FFF8EC, #fff); border-bottom: 1px solid var(--line); font: 800 15px 'Inter', sans-serif !important; color: var(--vino) !important; letter-spacing: -.1px; }
#modalGestiones .tram-agregar-gest > b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px var(--oro-soft); }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) { grid-template-columns: 2fr 1fr 1fr !important; gap: 14px 16px !important; margin: 0 !important; padding: 18px 20px 6px; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(1) { grid-column: 1 / 3; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(2) { grid-column: 3; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(3) { grid-column: 3; grid-row: 2; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
#modalGestiones .tram-agregar-gest label { font: 800 10px 'Inter', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; color: var(--vino) !important; }
#modalGestiones .tram-agregar-gest label span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
#modalGestiones .tram-agregar-gest input, #modalGestiones .tram-agregar-gest select { margin-top: 5px !important; border-radius: 12px !important; padding: 10px 14px !important; font-size: 13px !important; font-weight: 600; text-transform: none; letter-spacing: 0; }
#modalGestiones .tram-agregar-gest select { color: var(--vino); cursor: pointer; }
#modalGestiones .tram-agregar-gest .cc-contador { font-size: 10px; font-weight: 700; color: var(--muted); text-align: right; text-transform: none; letter-spacing: 0; margin-top: 2px; }
#modalGestiones #agGAgregarBtn { width: auto !important; min-width: 260px; margin: 10px 20px 18px auto !important; padding: 11px 28px !important; border: none !important; border-radius: 999px !important; background: linear-gradient(145deg, #C29A4F, #A87C36) !important; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); font: 800 13px 'Inter', sans-serif !important; transition: filter .15s; }
#modalGestiones #agGAgregarBtn:hover { filter: brightness(1.08); }
#modalGestiones .tram-agregar-gest > div:nth-of-type(2) { margin: 0 !important; padding: 16px 20px 18px; border-top: 1px solid var(--line) !important; background: #FBF6F8; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(2) > div:first-child { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--vino-soft); font: 800 10px 'Inter', sans-serif !important; letter-spacing: .06em; color: var(--vino) !important; margin-bottom: 10px !important; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(2) > p { margin: 0 !important; padding: 10px 14px; border: 1.5px dashed #D9C3CE; border-radius: 12px; background: #fff; text-align: center; font-size: 12px; color: var(--muted) !important; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(2) > div:not(:first-child) { padding: 9px 14px !important; border-left: 4px solid var(--oro); border-radius: 0 12px 12px 0 !important; background: #fff !important; box-shadow: 0 1px 4px rgba(59, 10, 32, .1); font-size: 12.5px !important; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(3) { margin: 0 !important; padding: 0 20px 18px; justify-content: flex-end; gap: 10px !important; background: #FBF6F8; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(3) button { padding: 10px 24px !important; font: 800 12.5px 'Inter', sans-serif !important; }

/* ===== Nueva gestión: selectores en pastilla y filas de borradores (2026-10-22) ===== */
#modalGestiones .tram-agregar-gest select.gest-select-oculto { display: none !important; }
#modalGestiones .gest-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#modalGestiones .gest-pill { flex: 1 1 auto; padding: 8px 12px; border: 1.5px solid #D9C3CE; border-radius: 999px; background: #fff; color: var(--ink-2); font: 800 10.5px/1.2 'Inter', sans-serif; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; text-align: center; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
#modalGestiones .gest-pill:hover { border-color: var(--vino-2); color: var(--vino); }
#modalGestiones .gest-pill.activo { color: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(59, 10, 32, .28); }
#modalGestiones .gest-pill-rojo.activo { background: var(--rojo); }
#modalGestiones .gest-pill-ambar.activo { background: var(--ambar); }
#modalGestiones .gest-pill-amarillo.activo { background: var(--amarillo); color: #3B0A20; }
#modalGestiones .gest-pill-verde.activo { background: var(--verde); }
#modalGestiones .gest-pill-alta.activo { background: var(--rojo); }
#modalGestiones .gest-pill-media.activo { background: var(--amarillo); color: #3B0A20; }
#modalGestiones .gest-pill-baja.activo { background: var(--verde); }
#modalGestiones .gest-pill-por-definir.activo { background: #9AA0A6; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) { grid-template-columns: 1fr 1fr !important; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(1) { grid-column: 1; grid-row: 1; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(4) { grid-column: 2; grid-row: 1; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(3) { grid-column: 1; grid-row: 3; }
#modalGestiones .tram-agregar-gest > div:nth-of-type(1) > label:nth-child(5) { grid-column: 2 !important; grid-row: 3; }
#modalGestiones .gest-borrador { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--oro); border-radius: 0 14px 14px 0; background: #fff; box-shadow: 0 1px 4px rgba(59, 10, 32, .1); }
#modalGestiones .gb-tipo { flex: 0 1 auto; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 13px 'Inter', sans-serif; color: var(--vino); }
#modalGestiones .gb-chip { flex: none; padding: 4px 11px; border-radius: 999px; background: #F1ECEF; color: var(--ink-2); font: 800 9.5px 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
#modalGestiones .gb-est-rojo { background: var(--rojo-soft); color: #7A1D2E; }
#modalGestiones .gb-est-ambar { background: var(--ambar-soft); color: #7A4A00; }
#modalGestiones .gb-est-amarillo { background: var(--amarillo-soft); color: #5C4A00; }
#modalGestiones .gb-est-verde { background: var(--verde-soft); color: #14543A; }
#modalGestiones .gb-sol { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
#modalGestiones .gb-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: none; cursor: pointer; transition: background .15s, color .15s; }
#modalGestiones .gb-btn-editar { padding: 7px 14px; border-radius: 999px; background: var(--vino-soft); color: var(--vino); font: 800 11px 'Inter', sans-serif; }
#modalGestiones .gb-btn-editar img { width: 12px; height: 12px; }
#modalGestiones .gb-btn-editar:hover { background: var(--vino); color: #fff; }
#modalGestiones .gb-btn-editar:hover img { filter: brightness(0) invert(1); }
#modalGestiones .gb-btn-quitar { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--rojo-soft); }
#modalGestiones .gb-btn-quitar img { width: 18px; height: 18px; }
#modalGestiones .gb-btn-quitar:hover { background: var(--rojo); }
#modalGestiones .gb-btn-quitar:hover img { filter: brightness(0) invert(1); }

/* ===== Larguillo: apariencia de la hoja original (2026-10-23) — plano, etiquetas a la derecha, línea verde entre secciones ===== */
.seg-lg-layout-nuevo { border: none; border-radius: 0; box-shadow: none; background: #fff; }
.seg-lg-info-contrato { padding: 6px 10px 4px; font-size: 11px; }
.seg-lg-leyenda { order: 99; align-self: flex-end; border: none; background: transparent; padding: 12px 16px 8px; gap: 6px 20px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #222; }
.seg-lg-leyenda-muestra { width: 22px; height: 14px; border: 1px solid #222; border-radius: 0; }
.seg-lg-seccion { border-bottom: 1.5px solid #7CB342; padding: 10px 12px 14px; margin-bottom: 0; }
.seg-lg-seccion:last-child { border-bottom: none; }
.seg-lg-seccion-titulo { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #111; }
.seg-lg-titulo-celda { grid-row: 1; grid-column: 1 / 2; align-self: end; justify-self: end; text-align: right; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #111; line-height: 1.15; padding: 0 10px 2px 4px; margin: 0; }
.seg-lg-grid-barras { row-gap: 5px; column-gap: 14px; }
.seg-lg-cab-numero, .seg-lg-cab-columna { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #111; align-self: end; }
.seg-lg-fila-etiqueta { justify-content: flex-end; text-align: right; padding: 0 10px 0 4px; font-size: 10px; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: #6b6b6b; }
.seg-lg-fila-etiqueta.seg-lg-negrita { font-size: 10px; font-weight: 800; color: #111; }
.seg-lg-celda-grid { border: 1px solid #222; border-radius: 0; min-height: 14px; }
.seg-lg-grupo-unidades { flex-wrap: nowrap; justify-content: stretch; gap: 0; }
.seg-lg-grupo-unidades .seg-lg-celda-grid { flex: 1 1 0; min-width: 3px; max-width: none; min-height: 14px; }
.seg-lg-grupo-unidades .seg-lg-celda-grid + .seg-lg-celda-grid { border-left: 1px solid #222; margin-left: -1px; }
.seg-lg-divisor-apoyo { width: 2px; background: #222; border-radius: 0; }
@media (max-width: 980px) { .seg-lg-fila-etiqueta { font-size: 8.5px; } .seg-lg-celda-grid { min-height: 12px; } }

/* ===== Permisos Requeridos: tabla de estatus por puente editable (2026-10-23) ===== */
.perm-estatus-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.perm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; font: 800 12px 'Inter', sans-serif; cursor: pointer; transition: background .15s, color .15s, filter .15s; }
.perm-btn img { width: 14px; height: 14px; }
.perm-btn-editar { border: 1.5px solid var(--vino); background: #fff; color: var(--vino); }
.perm-btn-editar:hover { background: var(--vino); color: #fff; }
.perm-btn-editar:hover img { filter: brightness(0) invert(1); }
.perm-btn-guardar { border: none; background: linear-gradient(145deg, #C29A4F, #A87C36); color: #fff; box-shadow: 0 3px 8px rgba(120, 84, 24, .35); }
.perm-btn-guardar img { filter: brightness(0) invert(1); }
.perm-btn-guardar:hover { filter: brightness(1.08); }
.perm-btn-guardar:disabled { opacity: .6; cursor: wait; }
.perm-btn-cancelar { border: 1.5px solid var(--vino); background: #fff; color: var(--vino); margin-left: 6px; }
.perm-btn-cancelar:hover { background: var(--vino-soft); }
.perm-btn-agregar { border: 1.5px dashed var(--oro); background: var(--oro-soft); color: #7A5A22; }
.perm-btn-agregar:hover { background: #F0E2C4; border-style: solid; }
.perm-estatus-msg { font-size: 11.5px; font-weight: 700; }
.perm-agregar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.perm-agregar select { flex: 1 1 180px; min-width: 0; padding: 8px 14px; border: 1.5px solid #D9C3CE; border-radius: 999px; background: #fff; font: 600 12px 'Inter', sans-serif; color: var(--vino); }
.tbl-permisos--editando .perm-sel { display: block; width: 100%; padding: 6px 28px 6px 10px; border: 1.5px solid #D9C3CE; border-radius: 999px; background-color: #fff; font: 700 11px 'Inter', sans-serif; color: var(--vino); cursor: pointer; }
.tbl-permisos--editando .perm-sel:focus, .perm-agregar select:focus, .tbl-permisos--editando .perm-fecha-inp:focus { border-color: var(--vino); box-shadow: 0 0 0 3px rgba(105, 27, 60, .16); outline: none; }
.tbl-permisos--editando .perm-fecha-inp { display: block; width: 100%; margin-top: 5px; padding: 5px 10px; border: 1.5px solid #D9C3CE; border-radius: 10px; background: #fff; font: 500 11px 'Inter', sans-serif; color: var(--ink); }
.tbl-permisos--editando th:last-child, .tbl-permisos--editando td.perm-quitar-cell { width: 44px; text-align: center; }
.tbl-permisos--editando th:nth-child(3), .tbl-permisos--editando td:nth-child(3) { width: auto; }
.perm-quitar { width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: var(--rojo-soft); cursor: pointer; display: inline-grid; place-items: center; transition: background .15s; }
.perm-quitar img { width: 17px; height: 17px; }
.perm-quitar:hover { background: var(--rojo); }
.perm-quitar:hover img { filter: brightness(0) invert(1); }
#modalPermisos #tblPermisosEstatus.tbl-permisos--editando tbody tr { grid-template-columns: 30px 1fr 34px !important; grid-template-areas: "num nombre quitar" "num estatus quitar" !important; }
#modalPermisos #tblPermisosEstatus td.perm-quitar-cell { grid-area: quitar; align-self: center; justify-self: end; width: auto; }
#modalPermisos #tblPermisosEstatus.tbl-permisos--editando .perm-fecha-inp { padding-right: 56px; }
#modalPermisos .perm-estatus-barra { padding: 0 2px; }
.tbl-permisos--editando .perm-sel { padding: 6px 22px 6px 9px; font-size: 10.5px; text-overflow: clip; background-position: right 7px center; background-size: 10px; }