/* Identidad del proyecto (2026-09-28): Ampliación y mejoramiento de la Ruta 1 San José – San Ramón y Radial Río Segundo.
   Tema claro de alto contraste para el trabajo diario (el oscuro no se recomienda en un proceso de esta magnitud).
   Paleta propia tomada de los entes: azul vía (MOPT), ocre (mapa de Costa Rica) solo en la línea de la vía y detalles de
   marca, teal (TOPYTUR) para acciones y enlaces. Semáforo con contraste AA sobre blanco. */
:root {
  --via: #1c2b4a; --via-2: #2a3d63; --ocre: #b8902f; --accion: #0b6f7c;
  --fondo: #f2f4f7; --papel: #ffffff; --papel-2: #f4f6f9; --tinta: #18212f; --gris: #475467; --suave: #5f6b7b; --linea: #d5dbe3; --linea-2: #e6eaf0;
  --verde: #1f6b2e; --verde-bg: #e4f2e6; --ambar: #8a5300; --ambar-bg: #fdf0d8; --rojo: #b42318; --rojo-bg: #fdecea; --azul: #0b6f7c; --azul-bg: #e0f1f3;
  --r: 6px;
  --letra: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --rotulo: 'Barlow Semi Condensed', 'Segoe UI Semibold', 'Arial Narrow', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.55 var(--letra); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 5px 12px; }
button:hover { background: var(--papel-2); }
button.pri { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 5px 8px; }
textarea { width: 100%; min-height: 54px; resize: vertical; }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.marca b { font-size: 20px; letter-spacing: -.5px; }
.sello { font-size: 12px; background: var(--verde-bg); color: var(--verde); padding: 2px 8px; border-radius: var(--r); margin-left: 4px; }
.fuente { font-size: 12px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 1180px; margin: 0 auto; padding: 18px 20px 60px; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; overflow-x: auto; } /* tablas anchas: se desplazan dentro, no la página */
.sub { color: var(--gris); font-size: 12px; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cont { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; }
.cont b { display: block; font-size: 24px; font-weight: 600; }
.cont.alta { background: var(--rojo-bg); border-color: transparent; color: var(--rojo); }
.cont.media { background: var(--ambar-bg); border-color: transparent; color: var(--ambar); }
.cont.ok { background: var(--verde-bg); border-color: transparent; color: var(--verde); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filtros button.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--gris); padding: 6px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
tbody tr.clic { cursor: pointer; }
tbody tr.clic:hover td { background: var(--papel-2); }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.pto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.pto.alta { background: #d33a2c; } .pto.media { background: #b8730d; } .pto.ok { background: #4c8a1f; }
.chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: var(--r); white-space: nowrap; background: var(--papel-2); color: var(--gris); }
.chip.en_proceso, .chip.en_curso { background: var(--ambar-bg); color: var(--ambar); }
.chip.firmado, .chip.hecha { background: var(--verde-bg); color: var(--verde); }
.chip.aprobado { background: var(--azul-bg); color: var(--azul); }
.chip.negado { background: var(--rojo-bg); color: var(--rojo); }
.cab { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; margin: 10px 0 4px; }
.cab b { font-size: 17px; font-weight: 600; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin: 12px 0 16px; overflow-x: auto; }
.pestanas button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--gris); padding: 8px 12px; }
.pestanas button.on { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.celda { background: var(--papel-2); border-radius: var(--r); padding: 9px 11px; }
.celda b { display: block; font-weight: 600; }
.alerta { display: grid; grid-template-columns: 14px 1fr; gap: 8px; padding: 8px 11px; border-radius: var(--r); margin-bottom: 6px; }
.alerta.alta { background: var(--rojo-bg); color: var(--rojo); }
.alerta.media { background: var(--ambar-bg); color: var(--ambar); }
.alerta.info { background: var(--papel-2); color: var(--gris); }
h3 { font-size: 13px; font-weight: 600; color: var(--gris); margin: 18px 0 8px; text-transform: none; }
/* Estado del AEP: insignia del estado vigente + «Cambiar a…» (no son pestañas). Color = semáforo del estado. */
.aep-estado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.aep-estado-actual, .aep-estado-cambiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.e-en_proceso { --e: var(--ambar); --e-bg: var(--ambar-bg); } .e-firmado { --e: var(--verde); --e-bg: var(--verde-bg); }
.e-aprobado { --e: var(--azul); --e-bg: var(--azul-bg); } .e-negado { --e: var(--rojo); --e-bg: var(--rojo-bg); } .e-no_aplica { --e: var(--gris); --e-bg: var(--papel-2); }
.estado-insignia { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px; border-radius: 99px; background: var(--e-bg); color: var(--e); font-family: var(--rotulo); font-weight: 700; font-size: 17px; }
.estado-insignia i, .estado-op i { width: 9px; height: 9px; border-radius: 50%; background: var(--e); flex: none; }
.estado-op { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 3px 12px; font-size: 13px; }
.estado-op:hover, .estado-op.elegido { border-color: var(--e); color: var(--e); background: var(--e-bg); }
.estado-op.elegido { font-weight: 600; }
.form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; background: var(--papel-2); border-radius: var(--r); padding: 10px 12px; margin-top: 10px; }
.form label { display: grid; gap: 3px; font-size: 12px; color: var(--gris); }
.tareas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tarea { border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--r); padding: 10px 12px; display: grid; gap: 6px; transition: background .15s, border-color .15s; }
/* Semáforo de tareas (suave): pendiente rojo · en curso ámbar · hecha verde · no aplica gris. Borde izquierdo + fondo tenue. */
.tarea.s-pendiente { border-left-color: #d33a2c; background: color-mix(in srgb, var(--rojo-bg) 45%, transparent); }
.tarea.s-en_curso  { border-left-color: #b8730d; background: color-mix(in srgb, var(--ambar-bg) 55%, transparent); }
.tarea.s-hecha     { border-left-color: #4c8a1f; background: color-mix(in srgb, var(--verde-bg) 60%, transparent); }
.tarea.s-no_aplica { border-left-color: var(--suave); background: var(--papel-2); }
.tarea.s-hecha select { border-color: #4c8a1f; color: var(--verde); font-weight: 600; }
.tarea.s-en_curso select { border-color: #b8730d; color: var(--ambar); font-weight: 600; }
.tarea.s-pendiente select { border-color: color-mix(in srgb, #d33a2c 55%, var(--linea)); }
.designado td { background: var(--azul-bg); }
.evento { display: grid; grid-template-columns: 128px 160px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea-2); }
.vacio { color: var(--suave); font-style: italic; padding: 10px 0; }
.carpeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
.aviso { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: var(--papel); padding: 9px 16px; border-radius: var(--r); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.aviso.mal { background: var(--rojo); color: #fff; }
@media (max-width: 720px) { .evento { grid-template-columns: 1fr; gap: 2px; } main { padding: 12px; } }
.nw { white-space: nowrap; }
/* Semáforo de procesos (AEP · ES · TC · E1 · E2): suave pero distintivo; mismos tonos que las tareas. */
.procs { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.proc { display: inline-block; min-width: 30px; text-align: center; font-size: 12px; font-weight: 600; line-height: 18px; padding: 0 5px; border-radius: 5px;
  border: 1.5px solid transparent; font-style: normal; vertical-align: middle; }
i.proc { min-width: 12px; width: 12px; height: 12px; padding: 0; line-height: 0; }
.proc.s-listo { background: var(--verde-bg); color: var(--verde); border-color: #4c8a1f; }
.proc.s-en_curso { background: var(--ambar-bg); color: var(--ambar); border-color: #b8730d; }
.proc.s-bloqueado { background: var(--rojo-bg); color: var(--rojo); border-color: #d33a2c; }
.proc.s-pendiente { background: transparent; color: var(--gris); border-color: var(--suave); }
.proc.s-no_aplica, .proc.s-no_solicitado { background: transparent; color: var(--suave); border-color: var(--linea-2); border-style: dashed; opacity: .55; }
.leyenda-proc { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gris); margin-top: 10px; }
.leyenda-proc span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-proc .sigla { font-size: 12px; color: var(--tinta); border: 1px solid var(--linea); border-radius: 5px; padding: 0 5px; }
.procesos-cont { grid-column: span 2; }
/* Franja debajo de las tarjetas de los predios: etiqueta, procesos y Herramientas en una línea (se parte en pantallas angostas) */
.procesos-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -4px 0 14px; }
.procesos-fila .procs-res { margin-top: 0; }
.procs-res { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.proc-res { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border: 1px solid var(--linea); border-radius: var(--r); background: transparent; font-size: 13px; }
.proc-res.abre { cursor: pointer; border-color: var(--suave); }
.proc-res.abre:hover { background: var(--papel-2); }
.proc-res .proc-n { font-weight: 600; font-size: 12px; color: var(--gris); }
.proc-res b { font-size: 15px; }
.titulo-proc { font-size: 18px; margin: 12px 0; }
.carpeta { flex-wrap: wrap; } .carpeta > div:first-child { flex: 1 1 260px; min-width: 0; } /* en angosto los botones bajan */
.carpeta.salida { background: var(--papel); margin-bottom: 14px; }
.carpeta .ruta { font-weight: 600; word-break: break-all; }
a { color: var(--azul); }
/* Pestañas de Tochi: Registral, Catastral, Plano y derrotero, Entorno */
button.ir { font-size: 12px; padding: 1px 8px; background: transparent; border-color: currentColor; color: inherit; white-space: nowrap; }
.lindero { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linea-2); }
.genealogia { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }
.genealogia .nodo { border: 1px solid var(--linea); border-radius: var(--r); padding: 8px 10px; text-align: center; }
.genealogia .nodo.fuerte { border-color: var(--tinta); }
.genealogia .flecha { color: var(--suave); transform: rotate(-90deg); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dos.entorno { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.plano-img { width: 100%; max-height: 520px; object-fit: contain; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); }
.tabla-leida { max-height: 520px; overflow: auto; }
.tabla-leida td, .tabla-leida th { padding: 4px 8px; font-variant-numeric: tabular-nums; }
tr.inactiva td { color: var(--suave); text-decoration: line-through; }
hr.sep { border: 0; border-top: 1px solid var(--linea); margin: 22px 0 16px; }
.madre { display: grid; gap: 4px; background: var(--papel-2); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
.madre b { font-size: 16px; }
.mapa { width: 100%; height: auto; max-height: 420px; background: var(--papel-2); border-radius: var(--r); }
.mapa polygon, .mapa path { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.m-predio { fill: rgba(24, 95, 165, .30); stroke: var(--azul); stroke-width: 2.2 !important; }
.m-pedido { fill: rgba(239, 159, 39, .25); stroke: #ba7517; }
.m-colindante { fill: rgba(138, 137, 131, .16); stroke: var(--suave); }
.m-pres { fill: rgba(226, 75, 74, .10); stroke: #d33a2c; stroke-dasharray: 5 3; }
.m-siri { fill: rgba(138, 137, 131, .15); stroke: var(--suave); stroke-dasharray: 5 3; }
.m-derrotero { fill: rgba(99, 153, 34, .22); stroke: #3b6d11; stroke-width: 2.2 !important; }
.m-txt { font-size: 12px; text-anchor: middle; dominant-baseline: middle; fill: var(--tinta); paint-order: stroke; stroke: var(--papel-2); stroke-width: 3px; font-weight: 600; }
.m-t-pres { fill: #d33a2c; font-size: 12px; }
.m-escala line { stroke: var(--tinta); stroke-width: 2; } .m-escala text, .m-norte { font-size: 12px; fill: var(--gris); }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--gris); margin: 6px 0; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1.5px solid; }
.l-predio { background: rgba(24, 95, 165, .30); border-color: var(--azul) !important; } .l-pedido { background: rgba(239, 159, 39, .25); border-color: #ba7517 !important; }
.l-colindante { background: rgba(138, 137, 131, .16); border-color: var(--suave) !important; } .l-pres { border-style: dashed !important; border-color: #d33a2c !important; }
.l-siri { border-style: dashed !important; border-color: var(--suave) !important; } .l-derrotero { background: rgba(99, 153, 34, .22); border-color: #3b6d11 !important; }
@media (max-width: 820px) { .dos, .dos.entorno { grid-template-columns: 1fr; } .genealogia { grid-template-columns: 1fr; } .genealogia .flecha { transform: none; text-align: center; } }
[hidden] { display: none !important; }
.leyenda-proc i.proc { opacity: 1; border-color: var(--suave); } .leyenda-proc i.proc.s-listo { border-color: #4c8a1f; } .leyenda-proc i.proc.s-en_curso { border-color: #b8730d; } .leyenda-proc i.proc.s-bloqueado { border-color: #d33a2c; }
/* Estudio situacional */
.es-revision { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.es-revision.con-bloqueos { border-color: #d33a2c; }
.es-revision.sin-bloqueos { border-color: #b8730d; }
.es-revision.listo { border-color: #4c8a1f; background: color-mix(in srgb, var(--verde-bg) 45%, transparent); }
.es-rev-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.es-datos label input { width: 130px; }
.es-bloque { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 6px; }
.es-bloque-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.es-bloque textarea { min-height: 80px; font-size: 13.5px; line-height: 1.5; }
.es-bloque-pie { display: flex; justify-content: space-between; align-items: center; }
.es-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.es-tres p { margin: 4px 0 0; white-space: pre-wrap; font-size: 13px; }
.consulta { border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--r); padding: 8px 12px; margin-bottom: 8px; }
.consulta.abierta { border-left-color: #b8730d; }
.consulta.respondida { border-left-color: #4c8a1f; }
.consulta.por-revisar { border-left-color: #d33a2c; }
.consulta p { margin: 6px 0 0; white-space: pre-wrap; }
.insignia { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #d33a2c; color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.es-deptos { margin-top: 22px; }
.es-avisos summary { cursor: pointer; color: var(--ambar); font-size: 13px; margin: 6px 0; }
.cambios { background: var(--azul-bg); color: var(--azul); border-radius: var(--r); padding: 8px 12px; margin: 10px 0 4px; font-size: 13px; }
/* Precarga del ES y anexos */
.precarga { border: 1px dashed var(--suave); border-radius: var(--r); padding: 8px 12px; margin-bottom: 12px; background: var(--papel-2); }
.precarga summary { cursor: pointer; }
.pre-sec { border-top: 1px solid var(--linea-2); padding: 8px 0; }
.pre-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.pre-cab button { margin-left: auto; font-size: 12px; padding: 2px 10px; }
.pre-l { font-size: 13px; padding-left: 10px; }
.pre-falta { font-size: 12.5px; padding-left: 10px; color: var(--ambar); font-style: italic; }
.sin-guardar { color: var(--rojo) !important; font-weight: 600; }
.anexos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px; }
.anexo { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--linea); border-radius: var(--r); padding: 5px 10px; font-size: 13px; }
.anexo.falta { color: var(--suave); }
/* Datos del estudio: Tochi · variación de Catastro · vigente */
.tabla-var td { vertical-align: middle; }
.tabla-var input, .tabla-var select { width: 150px; }
.tabla-var tr.varia td { background: color-mix(in srgb, var(--ambar-bg) 45%, transparent); }
.motivo { display: grid; gap: 4px; font-size: 12px; color: var(--gris); margin-top: 10px; }
/* Material de análisis: semáforo por efecto (suave) */
.analisis { margin-bottom: 14px; }
.punto { border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--r); padding: 8px 12px; margin-bottom: 8px; }
.punto .form { background: transparent; padding: 6px 0 2px; margin-top: 4px; }
.punto-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; }
.punto.e-nada { border-left-color: var(--suave); }
.punto.e-sin_efecto { border-left-color: #4c8a1f; background: color-mix(in srgb, var(--verde-bg) 40%, transparent); }
.punto.e-atrasa, .punto.e-gestion { border-left-color: #b8730d; background: color-mix(in srgb, var(--ambar-bg) 45%, transparent); }
.punto.e-impide { border-left-color: #d33a2c; background: color-mix(in srgb, var(--rojo-bg) 45%, transparent); }
.precarga.insumos h4 { margin: 10px 0 2px; font-size: 13px; color: var(--gris); }
/* Expediente de expropiación (dato del predio; el de mayor rango al final del proceso) */
.expediente { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.expediente.con { border-color: var(--azul); background: color-mix(in srgb, var(--azul-bg) 50%, transparent); }
.exp-cab { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.exp-num { font-size: 18px; }
.expediente details summary { cursor: pointer; margin-top: 6px; }
.exp-chip { background: var(--azul-bg); color: var(--azul); border-radius: var(--r); padding: 0 8px; }
.exp-chip .sub { color: var(--azul); }
.exp-fila { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--linea-2); }
.exp-fila:first-of-type { border-top: 0; }
.vigente-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--papel-2); border-radius: var(--r); padding: 8px 12px; margin: 8px 0 4px; font-size: 13.5px; }
.punto.e-cancelar { border-left-color: var(--azul); background: color-mix(in srgb, var(--azul-bg) 50%, transparent); }
.punto-arch { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.punto-arch button { font-size: 12px; padding: 2px 10px; }
.boton-excel { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--azul); text-decoration: none; border: 1px solid var(--azul); border-radius: var(--r); padding: 3px 10px; }
.boton-excel:hover { background: var(--azul-bg); }

/* ══ Capa de identidad del proyecto ══════════════════════════════════════════════════════════════════════════════════
   Una sola pieza memorable: la banda azul vía con la línea central discontinua ocre (demarcación de carretera). Lo demás,
   sobrio: jerarquía por borde y peso tipográfico, no por sombras. Rótulos, cifras y pestañas en Barlow Semi Condensed
   (inspirada en la rotulación vial); texto en Atkinson Hyperlegible (máxima legibilidad). */
.via { background: var(--via); color: #fff; }
/* La banda azul queda fija arriba (usuario, 2026-10-08: «que la parte azul se mantenga fija ahí así como está»). Su alto
   real lo da app.js en --alto-via: lo usan los demás elementos fijos para quedar debajo de ella. */
header.via { position: sticky; top: 0; z-index: 1100; }
html { scroll-padding-top: calc(var(--alto-via, 0px) + 8px); }
.via-fila { max-width: none; margin: 0 auto; padding: 12px 20px 10px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.via-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.r1 { display: grid; place-items: center; width: 42px; height: 46px; background: #fff; color: var(--via); font: 700 22px/1 var(--rotulo);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); padding-bottom: 8px; box-shadow: inset 0 -4px 0 var(--ocre); }
.via-titulo { display: block; font: 600 20px/1.15 var(--rotulo); letter-spacing: .1px; }
.via-sub { display: block; font-size: 13px; color: #c9d3e6; }
.via-entes { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #dbe3f0; }
.via-entes span + span { border-left: 1px solid #50638a; padding-left: 14px; }
.via-entes b { color: #fff; font-weight: 700; }
.linea-via { height: 6px; background: var(--via-2) repeating-linear-gradient(90deg, var(--ocre) 0 34px, transparent 34px 58px) center / 100% 2px no-repeat; }
.via-fuente { background: var(--papel); border-bottom: 1px solid var(--linea); }

/* Navegación (usuario, 2026-09-30: «este menú es poco visible o entendible»): el carril de la banda, bajo la línea
   discontinua. Trabajo y consulta a la izquierda; administración y cuenta a la derecha. La sección abierta lleva la línea
   ocre CONTINUA (la demarcación de la vía): es el único acento. Rótulos en Barlow, como la señalización. */
.via-nav { background: var(--via); }
/* Encabezado a todo el ancho en todas las vistas, como en los tableros (usuario, 2026-09-30). */
.via-nav-fila { max-width: none; margin: 0 auto; padding: 0 10px; display: flex; align-items: stretch; gap: 18px; }
.nav-izq { display: flex; align-items: stretch; gap: 18px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-izq::-webkit-scrollbar { display: none; }
.nav-grupo { display: flex; align-items: stretch; }
.nav-der { display: flex; align-items: stretch; gap: 14px; flex: none; position: relative; }
.via-nav .nav-l { position: relative; display: flex; align-items: center; gap: 6px; padding: 9px 11px 11px; color: #c9d3e6; text-decoration: none;
  font: 600 16px/1.1 var(--rotulo); letter-spacing: .1px; white-space: nowrap; border-radius: 4px 4px 0 0; }
.via-nav .nav-l:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.via-nav .nav-l[aria-current="page"] { color: #fff; }
.via-nav .nav-l[aria-current="page"]::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; background: var(--ocre); }
.via-nav .nav-l:focus-visible, .nav-cuenta summary:focus-visible { outline: 2px solid var(--ocre); outline-offset: -2px; }
.via-nav .insignia { background: var(--rojo); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; }
.nav-caja { display: flex; align-items: stretch; }
.via-nav button.nav-l { background: none; border: 0; cursor: pointer; }
.nav-flecha { width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); opacity: .8; margin-left: 2px; }
.nav-desp[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-desp[aria-expanded="true"] .nav-flecha { transform: rotate(-135deg) translateY(-1px); }
/* Panel del menú: papel con el borde ocre arriba (sale del carril); cada opción con su nombre y qué es. */
.nav-panel { position: fixed; z-index: 70; width: 340px; max-height: 72vh; overflow: auto; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-top: 3px solid var(--ocre); border-radius: 0 0 8px 8px; padding: 6px; box-shadow: 0 12px 28px rgba(24, 33, 47, .18); }
.nav-panel a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 4px; color: var(--tinta); text-decoration: none; }
.nav-panel a b { font: 600 15.5px/1.2 var(--rotulo); color: var(--via); }
.nav-panel a span { font-size: 12.5px; line-height: 1.35; color: var(--gris); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--papel-2); outline: none; }
.nav-panel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ocre); background: var(--papel-2); }
.nav-panel .nav-panel-todo { font-size: 13px; font-weight: 600; color: var(--accion); border-bottom: 1px solid var(--linea-2); border-radius: 4px 4px 0 0; margin-bottom: 4px; }
/* Cargar pedido: la zona para soltar la carpeta lleva el borde discontinuo de la vía; la barra de avance, el ocre. */
.carga-zona { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 18px; border: 2px dashed var(--ocre);
  border-radius: 10px; background: var(--papel-2); }
.carga-zona > b { font: 600 19px/1.2 var(--rotulo); color: var(--via); }
.carga-zona .sub { max-width: 640px; }
.carga-zona.sobre { background: #fbf3dd; border-style: solid; }
.carga-elegir { display: inline-block; cursor: pointer; margin-left: 4px; padding: 7px 16px; border-radius: var(--r); background: var(--tinta); color: var(--papel); font-weight: 600; }
.carga-elegir:hover { background: var(--via); }
.carga-elegir:focus-within { outline: 2px solid var(--ocre); outline-offset: 2px; }
/* Zona homogénea en lote: barra de avance (una sola cosa se mueve: el avance). */
.zh-lote-barra { height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; margin: 6px 0 10px; max-width: 520px; }
.zh-lote-barra > i { display: block; height: 100%; background: var(--accion); transition: width .4s; }
.zhl-todos span { display: flex; align-items: center; gap: 6px; color: var(--tinta); font-size: 14px; padding-bottom: 6px; }
/* Respaldos de la base (src/respaldo.js). */
.seg h3 { margin: 0 0 8px; }
.seg code { background: var(--papel); padding: 1px 6px; border-radius: 4px; font-size: 13px; word-break: break-all; }
.carga-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 14px; }
.carga-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gris); }
.carga-form p { flex-basis: 100%; margin: 0; }
.carga-revision { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--linea); border-left: 4px solid var(--via); border-radius: 6px; background: var(--papel); }
.carga-revision h3 { margin: 0 0 6px; }
.carga-lista { margin: 0 0 10px; padding-left: 18px; }
.carga-lista li { margin: 4px 0; }
.carga-lista-ok { border-left-color: var(--verde); }
.carga-barra { height: 8px; border-radius: 4px; background: var(--linea-2); overflow: hidden; margin-top: 10px; }
.carga-barra i { display: block; height: 100%; background: var(--ocre); transition: width .2s; }
@media (prefers-reduced-motion: reduce) { .carga-barra i { transition: none; } }
/* Portadas de Herramientas y Ayuda: una tarjeta por cada una, con su nombre y qué es. */
.herr-portada { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.herr-tarjeta { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--via);
  border-radius: 6px; color: var(--tinta); text-decoration: none; }
.herr-tarjeta b { font: 600 18px/1.2 var(--rotulo); color: var(--via); }
.herr-tarjeta span { font-size: 13.5px; color: var(--gris); }
.herr-tarjeta:hover, .herr-tarjeta:focus-visible { border-left-color: var(--ocre); outline: none; background: var(--papel-2); }
.nav-admin { padding-left: 14px; border-left: 1px solid #3a4e78; margin: 6px 0; }
.nav-admin .nav-l { margin: -6px 0; }
/* Cuenta: iniciales en el escudo ocre, nombre y rol; el menú se abre debajo. */
.nav-cuenta { position: relative; display: flex; align-items: center; }
.nav-cuenta > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: 6px; cursor: pointer; color: #fff; }
.nav-cuenta > summary::-webkit-details-marker { display: none; }
.nav-cuenta > summary::after { content: ''; width: 7px; height: 7px; border: solid #c9d3e6; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.nav-cuenta > summary:hover, .nav-cuenta[open] > summary { background: rgba(255, 255, 255, .08); }
.nav-ini { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ocre); color: var(--via); font: 700 13px/1 var(--rotulo); flex: none; }
.nav-yo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nav-yo b { font: 600 14.5px/1.15 var(--rotulo); max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-yo small { font-size: 12px; color: #c9d3e6; }
.nav-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 220px; background: var(--papel); color: var(--tinta); border: 1px solid var(--linea);
  border-top: 3px solid var(--ocre); border-radius: 0 0 8px 8px; padding: 6px; display: flex; flex-direction: column; }
.nav-menu .nav-correo { margin: 2px 8px 6px; font-size: 12.5px; color: var(--gris); overflow-wrap: anywhere; }
.nav-menu a { padding: 7px 8px; border-radius: 4px; color: var(--tinta); text-decoration: none; font-weight: 600; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--papel-2); outline: none; }
/* Con el menú DABI (fase 4) la fila queda justa en pantallas de 1440: menos relleno y un punto menos de letra. */
@media (max-width: 1600px) { .via-nav .nav-l { padding: 9px 8px 11px; font-size: 15px; } .via-nav .nav-l[aria-current="page"]::after { left: 8px; right: 8px; } .nav-izq, .via-nav-fila { gap: 12px; } }
@media (max-width: 720px) {
  .nav-yo { display: none; }
  .nav-admin { padding-left: 8px; }
  .via-nav .nav-l { padding: 9px 8px 11px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) { .via-nav .nav-l, .nav-cuenta > summary { transition: background-color .12s, color .12s; } }
.via-fuente .fuente { max-width: none; margin: 0 auto; padding: 5px 20px; }

/* Texto y títulos */
h2, h3, .titulo-proc, th, .pestanas button, .cont b, .cab b, .exp-num, .proc, .proc-res b, .insignia { font-family: var(--rotulo); }
h3 { font-size: 16px; font-weight: 600; color: var(--via); margin: 20px 0 8px; }
h3 .sub { font-family: var(--letra); font-weight: 400; }
.titulo-proc { font-size: 24px; font-weight: 600; color: var(--via); }
.sub { color: var(--gris); }
a { color: var(--accion); }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }

/* Botones: blanco con borde; la acción principal en azul vía */
button { background: var(--papel); border-color: #c3ccd8; color: var(--tinta); }
button:hover { background: var(--papel-2); border-color: var(--via-2); }
button.pri { background: var(--via); border-color: var(--via); color: #fff; font-weight: 700; }
button.pri:hover { background: var(--via-2); }
input, select, textarea { border-color: #c3ccd8; }
input:focus, select:focus, textarea:focus { border-color: var(--accion); outline: none; box-shadow: 0 0 0 3px var(--azul-bg); }

/* Superficies */
.tarjeta { border-radius: 8px; }
.cont { border-radius: 6px; border-color: var(--linea); }
.cont b { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cont.alta { background: var(--papel); border-color: var(--linea); border-left: 5px solid var(--rojo); color: var(--rojo); }
.cont.media { background: var(--papel); border-color: var(--linea); border-left: 5px solid #b8730d; color: var(--ambar); }
.cont.ok { background: var(--papel); border-color: var(--linea); border-left: 5px solid var(--verde); color: var(--verde); }

/* Tablas: encabezado de rótulo, filas con línea fina */
th { font-size: 13.5px; font-weight: 600; color: var(--gris); background: var(--papel-2); border-bottom: 1px solid var(--linea); }
td { border-bottom-color: var(--linea-2); }
tbody tr.clic:hover td { background: #eef3f8; }

/* Pestañas: carril activo con la raya ocre de la vía */
.pestanas { border-bottom: 1px solid var(--linea); }
.pestanas button { font-size: 15px; font-weight: 500; color: var(--gris); border-bottom-width: 3px; }
.pestanas button.on { color: var(--via); border-bottom-color: var(--ocre); font-weight: 700; }
.pestanas button:hover { background: transparent; color: var(--via); }

/* Encabezado de la ficha */
.cab b { font-size: 20px; font-weight: 600; color: var(--via); }
.exp-chip { background: var(--via); color: #fff; }
.exp-chip .sub { color: #c9d3e6; }
.exp-chip b { color: #fff; } /* .cab b lo dejaba azul sobre azul: no se leía el número */
.expediente.con { border-color: var(--via-2); background: #f1f4fa; }

/* Chips y alertas con contraste AA sobre blanco */
.chip { border-radius: 4px; font-weight: 600; }
.alerta.alta { background: var(--rojo-bg); color: var(--rojo); border-left: 4px solid var(--rojo); }
.alerta.media { background: var(--ambar-bg); color: var(--ambar); border-left: 4px solid #b8730d; }
.alerta.info { background: var(--papel-2); color: var(--gris); border-left: 4px solid var(--linea); }
.alerta { border-radius: 4px; }

/* Semáforo de procesos: mismos tonos sobre fondo claro */
.proc { border-radius: 4px; font-size: 12px; }
.proc.s-en_curso { border-color: #b8730d; }
.proc.s-pendiente { border-color: #737e8e; color: var(--gris); }
.filtros button.on { background: var(--via); border-color: var(--via); color: #fff; }
.aviso { background: var(--via); }
.aviso.mal { background: var(--rojo); }
.insignia { background: var(--rojo); }

@media (max-width: 720px) { .via-entes { display: none; } .via-titulo { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* Cifras y códigos (fincas, planos, áreas, ID): Barlow con cifras tabulares; el cero de Atkinson lleva barra y ensucia
   los números de finca y plano. */
td.nw, td.r, td b, .celda b, .rejilla b, .exp-num, .cab b, .vigente-linea b, .tabla-var td:nth-child(2), .tabla-var td:nth-child(4) { font-family: var(--rotulo); font-variant-numeric: tabular-nums; }
td.nw, td.r { font-size: 15px; }
.linea-via { height: 8px; background: var(--via-2) repeating-linear-gradient(90deg, var(--ocre) 0 36px, transparent 36px 60px) center / 100% 3px no-repeat; }
.mapa text, .madre b, .fuente, .punto-cab b, .exp-fila, .es-tres p, .pre-l, .procs-res { font-family: var(--rotulo); font-variant-numeric: tabular-nums; }
.pre-l, .es-tres p { font-family: var(--letra); } /* texto corrido: legibilidad; solo cifras sueltas en rótulo */
.mapa text { font-size: 13px; }

/* ══ Auditoría UI UX Pro Max (tabla de prioridades, 2026-09-28) ═════════════════════════════════════════════════════ */
/* P6 texto: secundario a 13 px (nada por debajo de 12 px) */
.sub { font-size: 13px; }
/* P1 no depender solo del color: el semáforo lleva forma además de color (✓ listo, ✕ bloqueado; en curso relleno,
   pendiente solo contorno, no solicitado punteado) */
.proc.s-listo::before { content: '✓ '; }
.proc.s-bloqueado::before { content: '✕ '; }
i.proc.s-listo::before, i.proc.s-bloqueado::before { content: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* P1 teclado: filas navegables */
tr.clic:focus-visible td { background: var(--azul-bg); outline: none; }
tr.clic:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--accion); }
/* P2 aviso de carga en el botón que guarda */
button.guardando { opacity: .7; cursor: progress; }
/* P8 error junto al lugar donde ocurrió */
.error-campo { flex-basis: 100%; color: var(--rojo); background: var(--rojo-bg); border-left: 3px solid var(--rojo); padding: 5px 10px; border-radius: 3px; font-size: 13.5px; margin-top: 6px; }
/* P2 objetivos táctiles de 44 px solo con puntero táctil (en escritorio se mantiene compacto) */
@media (pointer: coarse) { button, select, input:not([type=radio]):not([type=checkbox]), .pestanas button { min-height: 44px; } }

/* ══ Tablero de revisión del ES: una tarjeta por capítulo, en el orden del estudio, unidas como tramos de la vía ══ */
.rev-tablero { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 4px 0 8px; position: relative; }
.rev-cap { position: relative; background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--linea); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rev-cap:not(:last-child)::after { content: ''; position: absolute; right: -13px; top: 30px; width: 14px; border-top: 3px dashed var(--ocre); } /* la vía une los capítulos */
.rev-cap.con { border-top-color: var(--rojo); }
.rev-cap.al-dia { border-top-color: var(--verde); }
.rev-cap.listo { border-top-color: var(--verde); background: color-mix(in srgb, var(--verde-bg) 45%, var(--papel)); }
.rev-cap.emitir { background: var(--papel-2); }
.rev-cab { display: flex; flex-direction: column; line-height: 1.2; }
.rev-cab b { font-family: var(--rotulo); font-size: 17px; color: var(--via); }
.rev-estado { font-size: 13.5px; }
.rev-estado b { font-family: var(--rotulo); font-size: 22px; color: var(--rojo); }
.ok-txt { color: var(--verde); font-weight: 700; }
.rev-grupos { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.rev-g { text-align: left; font-size: 13px; line-height: 1.3; padding: 5px 8px; border-radius: 4px; border: 1px solid; background: var(--papel); }
.rev-g.alta { border-color: color-mix(in srgb, var(--rojo) 45%, var(--linea)); color: var(--rojo); background: var(--rojo-bg); }
.rev-g.media { border-color: color-mix(in srgb, #b8730d 45%, var(--linea)); color: var(--ambar); background: var(--ambar-bg); }
.rev-g:hover { filter: brightness(.97); }
/* Más específica que button.ir (que no deja partir el texto): «Abrir Viabilidad (conjunta)» se salía del borde. */
button.ir.rev-abrir { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: break-word; line-height: 1.3; padding: 2px 8px; }
.rev-cap { min-width: 0; }
.rev-g { overflow-wrap: anywhere; }
.rev-cap.emitir button { margin-top: auto; }
/* Ventana explicativa (popover nativo: se cierra con Esc o al hacer clic fuera) */
.rev-pop { border: 1px solid var(--linea); border-top: 4px solid var(--via); border-radius: 8px; padding: 14px 16px; max-width: min(560px, 92vw); color: var(--tinta); background: var(--papel); box-shadow: 0 12px 40px rgba(28, 43, 74, .25); }
.rev-pop::backdrop { background: rgba(28, 43, 74, .25); }
.rev-pop-cab { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.rev-pop-cab b { font-family: var(--rotulo); font-size: 18px; color: var(--via); }
.rev-x { border: 0; background: transparent; font-size: 16px; padding: 2px 6px; }
.rev-pop-por { color: var(--gris); margin: 6px 0 8px; }
.rev-pop ul { margin: 0 0 12px; padding-left: 20px; max-height: 45vh; overflow: auto; }
.rev-pop li { margin: 3px 0; }
@media (max-width: 1280px) { .rev-tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rev-cap:nth-child(4n)::after { display: none; } }
@media (max-width: 980px) { .rev-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rev-cap::after { display: none; } }
@media (max-width: 520px) { .rev-tablero { grid-template-columns: 1fr; } }

/* ══ Campo: evidencia del predio (fotos, libreta, croquis) y levantamientos ══ */
.campo-sec { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: var(--papel); }
.campo-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.campo-cab b, .lev-cab b { font-family: var(--rotulo); font-size: 16px; color: var(--via); }
.campo-cab .boton-subir { margin-left: auto; }
.boton-subir { display: inline-block; cursor: pointer; border: 1px solid var(--accion); color: var(--accion); border-radius: var(--r); padding: 4px 12px; font-size: 13.5px; background: var(--papel); font-weight: 600; }
.boton-subir:hover { background: var(--azul-bg); }
.boton-subir:focus-within { outline: 2px solid var(--accion); outline-offset: 2px; }
.zona-soltar { border: 2px dashed transparent; border-radius: 6px; padding: 6px; margin-top: 6px; transition: background .15s; }
.zona-soltar.encima { border-color: var(--accion); background: var(--azul-bg); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.foto { margin: 0; border: 1px solid var(--linea-2); border-radius: 6px; overflow: hidden; background: var(--papel-2); display: flex; flex-direction: column; }
.foto img, .foto .doc { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--linea-2); }
.foto .doc { border: 0; border-radius: 0; font-family: var(--rotulo); font-size: 24px; color: var(--via); }
.foto figcaption { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.foto .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.foto input { font-size: 12.5px; padding: 3px 6px; }
.foto .acciones, .lev .acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.foto .acciones button, .lev-arch button { font-size: 12px; padding: 1px 8px; }
.subida-estado { font-size: 13px; color: var(--gris); margin-top: 6px; }
.subida-estado:empty { display: none; }
.lev { border: 1px solid var(--linea); border-left: 4px solid var(--accion); border-radius: 6px; padding: 10px 12px; margin: 10px 0; background: var(--papel); display: flex; flex-direction: column; gap: 4px; }
.lev.proyecto { border-left-color: var(--via); }
.lev-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lev-arch { list-style: none; margin: 4px 0; padding: 0; }
.lev-arch li { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--linea-2); font-size: 13.5px; }
.lev-arch .nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chip.vinc button { border: 0; background: transparent; padding: 0 2px; color: var(--rojo); font-size: 12px; }
.f-vinc { display: inline-flex; gap: 6px; margin: 0; }
.campo-nuevo { margin: 12px 0; }
.campo-nuevo summary { cursor: pointer; font-weight: 700; color: var(--accion); }
.alcance { flex-basis: 100%; border: 1px solid var(--linea-2); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.alcance legend { font-size: 13px; color: var(--gris); padding: 0 4px; }
.alcance label { display: flex; flex-direction: row; gap: 6px; align-items: center; }
.lev .acciones > button { font-size: 13.5px; padding: 4px 12px; }
button.peligro { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, var(--linea)); }
button.peligro:hover { background: var(--rojo-bg); }
.exif-op { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 8px; font-size: 14px; }

/* ══ Pericial, fase 2: formulario del perito de oficina por secciones del capítulo 3 (varias columnas, pocas filas) ══ */
.per-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; }
.per-pre { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 8px 12px; background: var(--papel-2); border: 1px solid var(--linea); border-radius: 6px; font-size: 14px; }
.per-sec { border: 1px solid var(--linea); border-top: 3px solid var(--via); border-radius: 0; padding: 8px 12px 12px; margin: 0; background: var(--papel);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; align-content: start; }
.per-sec legend { padding: 0 6px; font-family: var(--rotulo); font-weight: 600; color: var(--via); font-size: 15px; }
.per-num { display: inline-block; min-width: 2.2em; font-variant-numeric: tabular-nums; color: var(--accion); }
.per-sec label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gris); }
.per-sec label > input, .per-sec label > select, .per-sec label > textarea { font-size: 14px; color: var(--tinta); }
.per-ancho { grid-column: 1 / -1; }
.per-sec.ancha { grid-column: 1 / -1; }
.per-et { font-size: 13px; color: var(--gris); }
.per-alertas-cab { display: flex; align-items: baseline; gap: 10px; }
.per-alertas-n { font: 600 13px/1 var(--rotulo); color: var(--suave); }
.per-alertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 6px; }
/* Señal preventiva: sin marcar, un rótulo sobrio; marcada, ámbar con el rombo (la forma de la señal de advertencia). */
.per-alertas .alerta { position: relative; flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 6px;
  background: var(--papel); color: var(--tinta); font-size: 14px; line-height: 1.3; cursor: pointer; }
.per-alertas .alerta input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.alerta-rombo { flex: none; width: 13px; height: 13px; transform: rotate(45deg); border: 2px solid var(--linea); border-radius: 2px; background: var(--papel); }
.per-alertas .alerta:hover { border-color: var(--ambar); }
.per-alertas .alerta:has(input:checked) { background: var(--ambar-bg); border-color: var(--ambar); color: #5c3700; font-weight: 600; }
.per-alertas .alerta:has(input:checked) .alerta-rombo { background: #f2b230; border-color: #5c3700; }
.per-alertas .alerta:has(input:focus-visible) { outline: 2px solid var(--accion); outline-offset: 2px; }
.per-auto { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--suave); font-style: italic; }
.per-calc { font-family: var(--rotulo); font-size: 16px; color: var(--tinta); padding: 5px 0; font-variant-numeric: tabular-nums; }
.per-lista { margin: 2px 0 0; padding-left: 18px; font-size: 14px; }
.per-pie { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; position: sticky; bottom: 0; padding: 8px 0; background: var(--fondo); }
.per-pie .sin-guardar { color: var(--ambar); font-weight: 600; }
@media (max-width: 900px) { .per-form { grid-template-columns: 1fr; } }

/* ══ Pericial, fase 3: 3.4 construcciones, tabla resumen y presupuestos ══ */
.const h3 { margin-top: 18px; }
.tabla-resumen table { font-size: 13.5px; }
.tabla-resumen tfoot td { border-top: 2px solid var(--via); }
details.est { border: 1px solid var(--linea); border-left: 4px solid var(--accion); border-radius: 0; background: var(--papel); margin: 6px 0; }
details.est.nueva { border-left-color: var(--via); }
details.est > summary { cursor: pointer; padding: 7px 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.est > summary .est-vrn { margin-left: auto; font-family: var(--rotulo); font-variant-numeric: tabular-nums; }
.est-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; padding: 4px 12px 12px; }
.est-form label, .pres-cab label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gris); }
.est-form .w2, .pres-cab .w2 { grid-column: span 2; }
.est-form .ancho { grid-column: 1 / -1; }
.est-form .acciones, .pres-form .acciones { display: flex; gap: 8px; }
.est-form:not([data-metodo="ont"]):not([data-metodo="incluida"]) .solo-ont { display: none; }
.est-form[data-metodo="ont"] .no-ont { display: none; } /* con tipología ONT el nombre lo asigna la tipología */
.est-form:not([data-metodo="presupuesto"]) .solo-pres { display: none; }
.est-form:not([data-metodo="incluida"]) .solo-incl { display: none; }
.ont-cascada { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.3fr) minmax(260px, 2.4fr); gap: 8px 12px; }
.ont-cascada select { width: 100%; }
.ont-cascada .ont-elegido { grid-column: 1 / -1; }
@media (max-width: 760px) { .ont-cascada { grid-template-columns: 1fr; } }
.est-calc { margin: 0; font-size: 14px; }
.aviso-campo { color: var(--ambar); font-size: 13px; }
.pres-form { padding: 4px 12px 12px; }
.pres-cab { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.pres-cab label.chk { flex-direction: row; align-items: center; gap: 6px; padding-top: 18px; }
.pres-lineas { width: 100%; font-size: 13.5px; }
.pres-lineas td { padding: 2px 4px; }
.pres-lineas td:first-child input { width: 100%; }
.pres-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.pres-calc { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pres-nuevo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.pres-nuevo label { display: flex; flex-direction: column; font-size: 13px; color: var(--gris); }

/* ══ Pericial, fase 4: tipos del proyecto y fotos ══ */
.est-form:not([data-metodo="tipo_propio"]) .solo-tipo { display: none; }
.est-form label.chk { flex-direction: row; align-items: center; gap: 6px; padding-top: 18px; color: var(--tinta); }
details.est.tipo { border-left-color: var(--ocre); }
.tipo-form { padding: 4px 12px 12px; }
.pres-a-tipo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0; padding: 6px 8px; background: var(--papel-2); }
.pres-a-tipo label { display: flex; flex-direction: column; font-size: 13px; color: var(--gris); }
.tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tira { border: 1px solid var(--linea); background: var(--papel); padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.tira-tit { flex-basis: 100%; font-family: var(--rotulo); font-weight: 600; color: var(--via); font-size: 14px; }
.foto-p { margin: 0; width: 120px; border: 1px solid var(--linea-2); background: var(--papel-2); }
.foto-p.repetida { border-color: #b8730d; }
.foto-p img, .foto-p .doc, .sel-foto img, .sel-foto .doc { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--linea-2); }
.foto-p .doc, .sel-foto .doc { display: grid; place-items: center; font-family: var(--rotulo); color: var(--via); }
.foto-p figcaption { padding: 3px 4px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.foto-p input { font-size: 12px; padding: 2px 4px; }
.foto-p .acciones { display: flex; gap: 3px; } .foto-p .acciones button { font-size: 11px; padding: 0 5px; }
.foto-mas { align-self: center; font-size: 13px; }
.foto-sel { width: min(820px, 94vw); }
.sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; margin-top: 6px; }
.sel-foto { padding: 0; text-align: left; font-size: 12px; display: flex; flex-direction: column; overflow: hidden; }
.sel-foto span { padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ Referencias reales de estructuras (ES entregados) ══ */
.ref-linea { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ref-pop { width: min(860px, 94vw); }
#ref-cuerpo { max-height: 70vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ref { border: 1px solid var(--linea); border-left: 4px solid var(--ocre); padding: 8px 10px; }
.ref p { margin: 4px 0; }
.ref-cab { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ref-fotos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.ref-fotos img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--linea-2); }

/* ══ Ayuda: Manual de alertas y campos · Historia y decisiones ══ */
/* Sesión en el encabezado (fase 1 del acceso) */
.sesion-rol { font: 600 11px/1 var(--rotulo); color: #fff; background: var(--via); padding: 2px 6px; border-radius: 99px; margin-left: 3px; vertical-align: 1px; }
.cuenta { max-width: 560px; }
/* Usuarios (fase 2 del acceso) */
.usuarios h3 { margin-top: 22px; }
.us-solicitud { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; border-left: 4px solid var(--ambar); }
.us-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.us-motivo { margin: 0; padding: 6px 10px; background: var(--papel-2); border-radius: var(--r); font-style: italic; }
.us-fila { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.us-equipos { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.us-equipos label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; white-space: nowrap; }
.us-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.us-tabla { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); }
.us-tabla th, .us-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea-2); text-align: left; vertical-align: top; }
.us-tabla tr.us-admin td { background: var(--azul-bg); }
.us-crear { margin-top: 18px; }
/* Para campo: KMZ y Google Maps (Herramientas) */
.campo-kml { display: flex; flex-direction: column; gap: 12px; }
.ck-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ck-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--gris); }
.ck-ids { flex: 1; min-width: 220px; }
.ck-capas { display: flex; flex-direction: column; gap: 4px; }
.ck-capas .chk { display: flex; gap: 6px; align-items: baseline; }
.ck-descargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 6px; }
.ck-bloque { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px; background: var(--papel); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ck-bloque h4 { margin: 0; }
.ck-bloque ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ck-ayuda { margin-top: 10px; }
.ck-whatsapp { grid-column: 1 / -1; border-left: 4px solid var(--ocre); }
.ck-whatsapp ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ck-ayuda summary { cursor: pointer; color: var(--accion); font-weight: 700; }
.ck-id { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.ck-bloque a.boton, .ck-id a.boton { display: inline-block; padding: 5px 12px; border: 1px solid var(--linea); border-radius: var(--r); color: var(--via); background: var(--papel); text-decoration: none; font: 600 14px/1.3 var(--rotulo); }
.ck-bloque a.boton:hover, .ck-id a.boton:hover { border-color: var(--accion); color: var(--accion); }
.ck-bloque a.boton.pri { background: var(--accion); border-color: var(--accion); color: #fff; font-size: 15px; padding: 7px 16px; }
.ck-bloque a.boton.pri:hover { background: #09606b; color: #fff; }
.an-version { font-size: 12px; padding: 2px 6px; }
.us-org { font: 600 11px/1 var(--rotulo); padding: 3px 7px; border-radius: 99px; border: 1px solid var(--linea); color: var(--gris); background: var(--papel-2); vertical-align: 1px; }
.us-org-topytur { color: var(--accion); border-color: var(--accion); }
.us-org-ue, .us-org-dabi { color: var(--via); border-color: var(--via); }
.sin-vista { max-width: 620px; margin: 40px auto; border-top: 4px solid var(--ocre); }
.us-crear summary { cursor: pointer; color: var(--accion); font-weight: 700; }
.us-temporal { border: 1px solid var(--linea); border-radius: 10px; padding: 20px 22px; max-width: 460px; box-shadow: 0 12px 40px rgba(28, 43, 74, .25); }
.us-temporal::backdrop { background: rgba(28, 43, 74, .45); }
.us-temporal h3 { margin: 0 0 10px; }
.us-clave { display: flex; align-items: center; gap: 10px; }
.us-clave code { font-size: 22px; letter-spacing: 1px; background: var(--papel-2); padding: 6px 12px; border-radius: var(--r); border: 1px dashed var(--linea); user-select: all; }
.cuenta-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cuenta-form label { display: flex; flex-direction: column; gap: 4px; }
.via-fuente .fuente::after { content: ''; display: block; clear: both; }
.manual-uso-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 12px; }
.manual-descargar { display: inline-block; background: var(--via); color: #fff; font-weight: 700; text-decoration: none; padding: 8px 16px; border-radius: var(--r); border-bottom: 3px solid var(--ocre); }
.manual-descargar:hover { filter: brightness(1.15); }
.manual-uso { display: block; width: 100%; height: calc(100vh - 210px); min-height: 560px; border: 1px solid var(--linea, #d9dde6); border-radius: 8px; background: #fff; }
.doc-ayuda { max-width: 980px; line-height: 1.6; }
.doc-ayuda h2 { font-family: var(--rotulo); color: var(--via); font-size: 26px; margin: 18px 0 6px; }
.doc-ayuda h3 { font-family: var(--rotulo); color: var(--via); border-bottom: 3px solid var(--ocre); padding-bottom: 3px; margin-top: 26px; }
.doc-ayuda h4 { font-family: var(--rotulo); color: var(--accion); margin: 18px 0 4px; font-size: 16px; }
.doc-ayuda blockquote { margin: 10px 0; padding: 8px 12px; background: var(--papel-2); border-left: 4px solid var(--accion); }
.doc-ayuda .tarjeta { margin: 8px 0 14px; }
.doc-ayuda table td, .doc-ayuda table th { vertical-align: top; }
.doc-ayuda li.sub-li { margin-left: 18px; list-style: circle; }
.doc-ayuda code { font-size: 13px; background: var(--papel-2); padding: 0 4px; }
.doc-ayuda hr { border: 0; border-top: 1px solid var(--linea); margin: 20px 0; }

/* ── Herramientas del proyecto ─────────────────────────────────────────────────────────────────────────────────────── */
.herr { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; margin: 12px 0; scroll-margin-top: 12px; }
.herr > h3:first-child { margin-top: 2px; }
.herr-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.herr-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.herr-chips button { font-size: 13px; padding: 2px 10px; }
.herr-buscar { display: flex; flex-direction: column; gap: 4px; max-width: 520px; font-size: 13px; color: var(--gris); }
.ont-desc td { border-top: 0; padding-top: 0; }

/* ── Documentos del AEP: AEP firmado y cédula del firmante ─────────────────────────────────────────────────────────── */
.aep-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 18px; }
.aep-docs h4 { margin: 4px 0 6px; font: 600 15px var(--rotulo); color: var(--via); }
.aep-ranura { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; background: var(--papel); }
.aep-ranura .campo-cab b { font-size: 14.5px; }
.aep-cedula { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 10px; }
.aep-ranura .galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.doc-aep img { object-fit: contain; background: var(--papel-2); }
.doc-aep a.doc { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.aep-avisos { margin: 4px 0 12px; padding: 8px 12px 8px 28px; background: var(--ambar-bg); color: var(--ambar); border-radius: var(--r); font-size: 13.5px; }

/* ── Ficha situacional (pestaña del ES y Herramientas) ─────────────────────────────────────────────────────────────── */
.ficha-sit .carpeta { align-items: flex-start; }
.ficha-sit .acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ficha-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .ficha-grid { grid-template-columns: 1fr; } }
.ficha-form fieldset { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px 10px; margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.ficha-form legend { font: 600 14px var(--rotulo); color: var(--via); padding: 0 4px; }
.ficha-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--gris); }
.ficha-form label.w2, .ficha-form > label { grid-column: 1 / -1; }
.ficha-form > label { margin-bottom: 10px; }
.ficha-form input, .ficha-form textarea { width: 100%; box-sizing: border-box; color: var(--tinta); font-size: 14px; }
.ficha-form .acciones { display: flex; gap: 10px; align-items: center; }
.mono { font-family: Consolas, 'Cascadia Mono', monospace; font-size: 13px; }
.ficha-vista { position: sticky; top: calc(var(--alto-via, 0px) + 12px); border: 1px solid var(--linea); border-radius: 8px; background: var(--papel-2); padding: 8px; min-height: 180px; }
.ficha-vista img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ficha-base td { font-size: 13.5px; }
.ficha-base td:first-child { color: var(--gris); white-space: nowrap; }
.rojo { color: var(--rojo); }
#ficha-herr td .nw button, #ficha-herr td button { font-size: 12.5px; padding: 2px 8px; margin: 0 2px 2px 0; }

/* ── Manual ONT completo (Herramientas): familia → subfamilia → tipos ──────────────────────────────────────────────── */
.ont-barra { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 4px 0 10px; }
.ont-barra .herr-buscar { flex: 1 1 320px; }
.ont-fam { border: 1px solid var(--linea); border-radius: 8px; margin: 0 0 8px; background: var(--papel); }
.ont-fam > summary { cursor: pointer; padding: 8px 12px; list-style-position: inside; }
.ont-fam > summary b { font: 600 16px var(--rotulo); color: var(--via); }
.ont-fam[open] > summary { border-bottom: 1px solid var(--linea-2); background: var(--papel-2); border-radius: 8px 8px 0 0; }
.ont-sub { padding: 6px 12px 10px; overflow-x: auto; }
.ont-sub h4 { margin: 6px 0 4px; font: 600 14px var(--rotulo); color: var(--ocre); }
.ont-tabla { width: 100%; }
.ont-tabla td, .ont-tabla th { padding: 4px 8px; font-size: 13px; }
.ont-tabla td.ont-d { color: var(--tinta); line-height: 1.4; }
.ont-tabla td button { font-size: 12px; padding: 1px 8px; white-space: nowrap; }

/* ── Remanente contra la normativa del cantón (Pericial 3.5) y catálogo en Herramientas ───────────────────────────── */
.rem-norma { border: 1px solid var(--linea); border-left: 4px solid var(--ocre); border-radius: 6px; padding: 8px 12px; background: var(--papel-2); margin-bottom: 8px; }
.rem-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.rem-cab b { font: 600 15px var(--rotulo); color: var(--via); }
.rem-datos { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 6px 0; }
.rem-datos label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--gris); }
.rem-avisos { margin: 6px 0; padding: 6px 10px 6px 26px; background: var(--ambar-bg); color: var(--ambar); border-radius: var(--r); font-size: 13.5px; }
.rem-ok { color: var(--verde); }
.norma-tabla { width: 100%; margin: 6px 0; }
.norma-tabla td, .norma-tabla th { font-size: 12.5px; padding: 4px 6px; }
.norma-tabla tr.no-verif td { color: var(--gris); }
.norma-lista { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; }
.norma-canton { border: 1px solid var(--linea); border-radius: 8px; margin: 0 0 8px; background: var(--papel); }
.norma-canton > summary { cursor: pointer; padding: 8px 12px; }
.norma-canton > summary b { font: 600 16px var(--rotulo); color: var(--via); }
.norma-canton > div { padding: 4px 12px 10px; overflow-x: auto; }

/* ── Fotos de una estructura nueva y árboles (Catastro) ─────────────────────────────────────────────────────────────── */
.tira-nueva .fotos-elegidas { display: inline-flex; gap: 6px; }
.tira-nueva .fotos-elegidas img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }
.arbol-tabla td { padding: 4px 6px; }
.arbol-tabla input, .arbol-tabla select { font-size: 13px; padding: 3px 6px; }
.arbol-tabla td button { font-size: 12.5px; padding: 2px 8px; margin-right: 3px; }
.arbol-pegar { margin: 8px 0 12px; }
.arbol-pegar textarea { width: 100%; box-sizing: border-box; }

/* ── Textos fijos del ES (4.3 Declaraciones y alcances…) ─────────────────────────────────────────────────────────── */
.texto-fijo { border: 1px solid var(--linea); border-left: 4px solid var(--via); border-radius: 6px; background: var(--papel); padding: 10px 14px; margin: 12px 0; }
.texto-fijo h3 { margin: 0 0 6px; }
.texto-fijo p { margin: 6px 0; max-width: 90ch; }
.texto-viejo { border-top: 1px dashed var(--linea); margin-top: 6px; padding-top: 4px; color: var(--gris); }

/* ── Word del ES (fase 6): el estudio tal como saldrá, con lo que falta resaltado y corrección por párrafo ─────────── */
mark.falta { background: #fff1a8; color: #5c4700; font-style: italic; padding: 0 2px; border-radius: 2px; }
.dw { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 14px 22px; margin: 10px 0; max-width: 920px; }
.dw-h { font-family: var(--rotulo); color: var(--via); margin: 16px 0 6px; }
h3.dw-h { font-size: 19px; border-bottom: 2px solid var(--linea); padding-bottom: 3px; }
h4.dw-h { font-size: 16px; }
h5.dw-h { font-size: 14.5px; }
.dw-p { margin: 4px 0; }
.dw-p > p { margin: 3px 0; text-align: justify; }
p.dw-p { text-align: justify; }
.dw-p.corregido { border-left: 3px solid var(--ambar); padding-left: 8px; }
.dw-p.desact { border-left: 3px solid var(--rojo); padding-left: 8px; background: var(--rojo-bg); }
.dw-acc { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.dw-acc button { font-size: 12px; padding: 1px 8px; }
.dw-p:not(:hover):not(:focus-within) .dw-acc button:not(.pri) { opacity: .35; }
.dw-fijo { font-size: 11.5px; opacity: .6; }
.dw-gen { background: var(--papel-2); padding: 4px 8px; border-radius: 4px; }
.dw-editar { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
.dw-editar textarea { width: 100%; box-sizing: border-box; font: 14px/1.5 var(--letra); color: var(--tinta); }
.dw-l { margin: 2px 0 6px; }
.dw-fig { color: var(--gris); font-size: 13px; font-style: italic; margin: 4px 0; }
.dw-portada { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; padding: 8px; border-bottom: 1px dashed var(--linea); }
.dw-portada > b { font: 700 22px var(--rotulo); color: var(--via); }
.dw-cuerpo { text-align: center; color: var(--via); }
.dw-firmas { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0; font-size: 13px; }
.dw-t td, .dw-t th { font-size: 12px; }
.dw-t tr.total td { font-weight: 700; }
.dw-pres td.num { text-align: right; white-space: nowrap; }

/* ── Servicios y equipamiento en tres estados (migración 023): Sí / No / Sin verificar ── */
.per-tri { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 4px 18px; margin-top: 4px; }
.per-tri .tri { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--linea-2); padding: 3px 0; }
.per-tri .tri > span { flex: 1; font-size: 14px; color: var(--tinta); }
.per-tri .tri label { flex-direction: row; align-items: center; gap: 3px; font-size: 12.5px; padding: 2px 7px; border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; color: var(--suave); }
.per-tri .tri input { margin: 0; accent-color: var(--accion); }
.per-tri .tri label.tri-si:has(input:checked) { background: var(--verde-bg); color: var(--verde); border-color: var(--verde); }
.per-tri .tri label.tri-no:has(input:checked) { background: var(--rojo-bg); color: var(--rojo); border-color: var(--rojo); }
.per-tri .tri label.tri-sv:has(input:checked) { background: var(--ambar-bg); color: var(--ambar); border-color: var(--ambar); }
.per-tri .tri-resto { grid-column: 1 / -1; justify-self: start; margin-top: 4px; font-size: 13px; }

/* ── Personas del predio (AEP, migración 033) y su lectura en el 1.2 del ES ── */
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 10px; margin: 8px 0 10px; }
.persona { border: 1px solid var(--linea); border-left: 4px solid var(--via); border-radius: var(--r); background: var(--papel); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.persona.rep { border-left-color: var(--ocre); margin-left: 18px; }
.persona.designado { border-color: var(--accion); border-left-color: var(--accion); background: var(--azul-bg); }
.persona-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.persona-cab .designar { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--suave); padding: 2px 8px; border: 1px solid var(--linea); border-radius: 99px; background: var(--papel); cursor: pointer; }
.persona.designado .persona-cab .designar { color: var(--accion); border-color: var(--accion); font-weight: 600; }
.persona-cab .p-nombre { flex: 1; min-width: 160px; font-weight: 600; }
.persona-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 10px; align-items: end; }
.persona-campos label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--gris); }
.persona-campos label.chk { flex-direction: row; align-items: center; gap: 6px; }
.persona-campos .ancho { grid-column: 1 / -1; }
.persona-pie { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-end; }
.persona-pie .usos { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.uso { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--papel-2); border: 1px solid var(--linea-2); color: var(--gris); }
.uso.firma { background: var(--accion); border-color: var(--accion); color: #fff; }
.agregar-persona summary { cursor: pointer; color: var(--accion); font-weight: 600; margin: 4px 0; }
.contacto-ver { margin-bottom: 10px; }
.contacto-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.contacto-ver dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 0; }
.contacto-ver dt { color: var(--suave); font-size: 13px; }
.contacto-ver dd { margin: 0; }
@media (max-width: 640px) { .personas { grid-template-columns: 1fr; } .persona.rep { margin-left: 8px; } .per-tri { grid-template-columns: 1fr; } }

/* ── Analítica del avance (usuario, 2026-09-29): gráficas SVG propias y mapa Leaflet ── */
/* Columna del valor con ancho fijo: así todas las barras de una sección miden lo mismo */
.an-fila { display: grid; grid-template-columns: 52px minmax(0, 1fr) 168px; align-items: center; gap: 10px; margin: 6px 0; }
.an-fila:has(.an-et-ancha) { grid-template-columns: 150px minmax(0, 1fr) 96px; }
.an-et { font-family: var(--rotulo); font-weight: 600; color: var(--gris); font-size: 14px; }
.an-val { font-size: 13px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-val b { color: var(--tinta); font-size: 15px; }
.an-barra { display: block; width: 100%; height: 14px; border-radius: 3px; overflow: hidden; }
.an-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--gris); }
.an-leyenda i, .an-leyenda-mapa i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.an-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.an-tabla th, .an-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--linea-2); text-align: left; }
.an-tabla .an-celda { min-width: 110px; }
.an-tabla .an-celda .an-barra { height: 10px; margin-bottom: 2px; }
.an-curva { width: 100%; height: auto; display: block; }
.an-grid { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 3 3; }
.an-eje { font-size: 11px; fill: var(--suave); font-family: var(--rotulo); }
.an-dos { display: grid; grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1fr); gap: 18px; }
.an-dona { width: 150px; height: 150px; display: block; margin: 0 auto; }
.an-dona-n { font-family: var(--rotulo); font-weight: 600; font-size: 20px; fill: var(--tinta); }
.an-det summary { cursor: pointer; font-size: 13.5px; margin-top: 8px; color: var(--accion); }
.an-top { margin: 6px 0 0 18px; padding: 0; font-size: 13.5px; }
.an-mapa-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.an-mapa-cab h3 { margin: 0; }
.an-mapa-cab label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris); }
.an-mapa { height: clamp(420px, calc(100vh - 250px), 900px); border-radius: 6px; border: 1px solid var(--linea); background: #e9edf2; }
.an-estado { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--gris); padding: 6px 2px 0; font-variant-numeric: tabular-nums; }
.an-leyenda-mapa { background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 6px 9px; font-size: 12px; line-height: 1.6; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); display: flex; flex-direction: column; }
.an-pop { font-family: var(--letra); font-size: 13px; line-height: 1.45; }
.an-pop table { border-collapse: collapse; margin-top: 4px; }
.an-pop th, .an-pop td { font-size: 12px; text-align: left; padding: 1px 6px 1px 0; vertical-align: top; }
.an-pop th { color: var(--suave); font-weight: 600; }
.an-pop-procs { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.an-capa { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--linea-2); }
.an-capa .chk { display: flex; align-items: center; gap: 6px; }
.an-capa-ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.an-capa-ctl label { display: flex; align-items: center; gap: 6px; }
.an-capa-ctl input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--linea); border-radius: 4px; }
.an-url { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.an-capa-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; margin-top: 10px; align-items: end; }
.an-capa-form .ancho { grid-column: 1 / -1; }
.an-capa-form label { display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 640px) { .an-dos { grid-template-columns: 1fr; } .an-fila { grid-template-columns: 44px minmax(0, 1fr) 128px; } .an-fila:has(.an-et-ancha) { grid-template-columns: 110px minmax(0, 1fr) 80px; } }

/* ══ Analítica como tablero (usuario, 2026-09-29): pantalla completa, barra lateral, carretera de avance, cajón de
   configuración. Lo único llamativo es la carretera; lo demás, sobrio. ══ */
body.en-tablero main { max-width: none; padding: 0; }
.tb { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 110px); }

/* Barra lateral: azul vía, filtros arriba, secciones y configuración */
.tb-lado { position: sticky; top: var(--alto-via, 0px); align-self: start; max-height: calc(100vh - var(--alto-via, 0px)); overflow-y: auto; box-sizing: border-box;
  background: var(--via); color: #fff; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 9px; }
.tb-volver { color: #cfd8e8; font-size: 13.5px; text-decoration: none; }
.tb-volver:hover, .tb-volver:focus-visible { color: #fff; text-decoration: underline; }
.tb-titulo { font-family: var(--rotulo); font-weight: 600; font-size: 22px; line-height: 1.1; margin: 0; color: #fff; }
.tb-fecha { margin: -5px 0 0; font-size: 12px; line-height: 1.35; color: #aebbd2; }
.tb-filtros { display: flex; flex-direction: column; gap: 6px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tb-filtros label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #cfd8e8; }
.tb-filtros select { width: 100%; background: #fff; color: var(--tinta); border: 0; border-radius: 5px; padding: 4px 8px; font: inherit; font-size: 13.5px; }
.tb-filtro-res { margin: 2px 0 0; font-size: 13.5px; color: #dfe6f1; }
.tb-filtro-res b { color: #fff; font-family: var(--rotulo); font-size: 17px; }
.tb-limpiar { align-self: flex-start; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.tb-nav { display: flex; flex-direction: column; gap: 2px; }
.tb-nav button { text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; color: #cfd8e8; padding: 4px 10px; font: 600 15.5px var(--rotulo); cursor: pointer; border-radius: 0 5px 5px 0; }
.tb-nav button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.tb-nav button[aria-current="true"] { color: #fff; border-left-color: var(--ocre); background: rgba(255, 255, 255, .08); }
.tb-config { text-align: left; background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; padding: 7px 12px; font: 600 15px var(--rotulo); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.tb-config:hover { background: rgba(255, 255, 255, .12); }
.tb-config span { font: 400 12.5px var(--letra); color: #aebbd2; }
.tb-lado :focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }

/* Cuerpo: carretera, mapa + avance, gráficos */
.tb-cuerpo { padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tb-panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 14px 16px; min-width: 0; scroll-margin-top: 12px; }
.tb-panel h3 { margin: 0 0 10px; font-family: var(--rotulo); font-weight: 600; font-size: 17px; color: var(--via); }
.tb-panel h3 .sub { font-family: var(--letra); font-weight: 400; font-size: 12.5px; margin-left: 4px; }
.tb-panel h4 { margin: 12px 0 6px; font-family: var(--rotulo); font-weight: 600; font-size: 15px; color: var(--gris); }
.tb-panel h4:first-child { margin-top: 0; }

/* La carretera de avance: asfalto, bordes blancos y línea central ocre; lo listo en verde, lo en curso en ámbar */
.tb-carretera { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n via"; gap: 10px 22px; align-items: center; scroll-margin-top: 12px; }
.tb-via-caja { grid-area: via; min-width: 0; }
.tb-via-nota { margin: 5px 0 0; font-size: 12.5px; color: var(--gris); }
.tb-avance-n { grid-area: n; display: flex; flex-direction: column; }
.tb-avance-n b { font-family: var(--rotulo); font-weight: 600; font-size: 46px; line-height: 1; color: var(--via); font-variant-numeric: tabular-nums; }
.tb-avance-n span { font-size: 13.5px; color: var(--gris); }
.tb-via { position: relative; height: 34px; display: flex; background: #2d3444; border-top: 3px solid #e9e4d4; border-bottom: 3px solid #e9e4d4; overflow: hidden; }
/* Un tramo por ID sobre el asfalto. El verde (i) llena solo lo listo del ID; la marca del borde de abajo (::before) dice
   su estado; el corte entre ID es un mojón corto en el borde de arriba (::after), que no cruza la línea central. */
.tb-seg { flex: 1 1 0; position: relative; }
.tb-seg i { position: absolute; left: 0; top: 0; bottom: 0; background: #4c8a1f; }
.tb-seg::before { content: ''; position: absolute; left: 3px; right: 3px; bottom: 0; height: 5px; }
.tb-seg.e-en_curso::before { background: #e0a23a; } .tb-seg.e-bloqueado::before { background: #e5483a; } .tb-seg.e-listo::before { background: #9ed36a; }
.tb-seg + .tb-seg::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 7px; background: #e9e4d4; }
.tb-ley { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.tb-ley i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.tb-ley i.l-listo { background: #4c8a1f; } .tb-ley i.l-curso { background: #e0a23a; height: 4px; } .tb-ley i.l-bloq { background: #e5483a; height: 4px; }
.tb-via::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--ocre) 0 26px, transparent 26px 46px); }
/* Datos del pedido en la barra lateral: debajo de las secciones y encima de la configuración */
.tb-datos { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); gap: 7px 10px; }
.tb-dato { min-width: 0; }
.tb-dato dt { font-size: 11.5px; color: #aebbd2; }
.tb-dato dd { margin: 0; font-size: 11.5px; line-height: 1.3; color: #cfd8e8; }
.tb-dato dd b { font-family: var(--rotulo); font-weight: 600; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.tb-dato dd span { display: block; }

.tb-principal { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); gap: 14px; align-items: start; }
.tb-columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tb-mapa { padding: 12px 12px 8px; }
.tb-graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; scroll-margin-top: 12px; }
.tb-columna .an-tabla + .an-tabla { margin-top: 12px; }

/* Cajón de configuración del mapa (capas de ArcGIS Online) */
.tb-velo { position: fixed; inset: 0; background: rgba(28, 43, 74, .38); z-index: 1100; }
.tb-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); box-sizing: border-box; overflow-y: auto; z-index: 1101;
  background: var(--papel); border-left: 4px solid var(--via); padding: 18px 20px 28px; transform: translateX(100%); transition: transform .22s ease-out; }
.tb-cajon.abierto { transform: none; }
.tb-cajon-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tb-cajon-cab h3 { margin: 0; font-family: var(--rotulo); font-size: 21px; color: var(--via); }
.tb-cerrar { background: transparent; border: 1px solid var(--linea); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.tb-cajon h4 { font-family: var(--rotulo); font-size: 16px; margin: 14px 0 4px; }
@media (prefers-reduced-motion: reduce) { .tb-cajon { transition: none; } }

@media (max-width: 1280px) { .tb-principal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) {
  .tb { grid-template-columns: 1fr; }
  .tb-lado { position: static; height: auto; }
  .tb-filtros { flex-direction: row; flex-wrap: wrap; } .tb-filtros label { flex: 1 1 160px; }
  .tb-nav { flex-direction: row; flex-wrap: wrap; } .tb-nav button { border-left: 0; border-bottom: 3px solid transparent; border-radius: 5px 5px 0 0; }
  .tb-nav button[aria-current="true"] { border-bottom-color: var(--ocre); }
  .tb-config { margin-top: 0; }
  .tb-graficos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tb-cuerpo { padding: 12px 12px 30px; }
  .tb-carretera { grid-template-columns: 1fr; grid-template-areas: "n" "via" "datos"; }
  .an-mapa { height: 60vh; }
}
/* Dentro de «Predios» (dos columnas) la columna del valor es más angosta, para que la barra no desaparezca */
.an-dos .an-fila { grid-template-columns: 76px minmax(40px, 1fr) 116px; }
.an-dos .an-et { overflow-wrap: anywhere; }

/* Configuración del mapa: archivos (SHP, DXF, DWG) */
.an-subir { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; }
.an-subir span { background: var(--via); color: #fff; border-radius: 6px; padding: 7px 14px; font: 600 14px var(--rotulo); }
.an-subir input { font-size: 12.5px; max-width: 220px; }
.an-subir:focus-within span { outline: 2px solid var(--ocre); outline-offset: 2px; }
.an-aviso-arch { grid-column: 1 / -1; margin: 2px 0; font-size: 12.5px; color: var(--ambar); background: var(--ambar-bg); border-radius: 4px; padding: 3px 7px; }
@media (max-width: 1000px) { .tb-datos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* ══ Programación (usuario, 2026-09-29): inicio, final y prioridad 1–7 por ID, con el mismo tablero de la Analítica ══ */
.tb-config { text-decoration: none; }
.pg-cuerpo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(610px, 1fr); gap: 14px; align-items: start; }
.pg-mapa { position: sticky; top: calc(var(--alto-via, 0px) + 12px); }
.pg-mapa .an-mapa { height: clamp(380px, calc(100vh - 200px), 860px); }
.pg-tabla-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pg-tabla-cab h3 { margin: 0; }
.pg-tabla-cab label { display: flex; align-items: center; gap: 6px; }
.pg-tabla-caja { overflow-x: auto; }
.pg-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pg-tabla th { text-align: left; font: 600 13px var(--rotulo); color: var(--gris); padding: 6px 6px; border-bottom: 2px solid var(--linea); white-space: nowrap; }
.pg-tabla td { padding: 5px 6px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
.pg-tabla tr.pg-elegida td { background: color-mix(in srgb, var(--accion) 7%, transparent); }
.pg-tabla tr.pg-foco td { background: color-mix(in srgb, var(--ocre) 22%, transparent); }
.pg-tabla input[type=date] { font: inherit; font-size: 13px; padding: 3px 4px; border: 1px solid var(--linea); border-radius: 4px; width: 122px; }
.pg-id { display: block; background: none; border: 0; padding: 0; font: 600 15px var(--rotulo); color: var(--via); cursor: pointer; text-align: left; }
.pg-id:hover, .pg-id:focus-visible { text-decoration: underline; }
.pg-tabla td .sub { font-size: 11.5px; white-space: nowrap; }
.pg-sel { font: 600 13px var(--rotulo); border: 1px solid var(--linea); border-radius: 5px; padding: 3px 6px; min-width: 112px; }
.pg-plazo { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 2px 7px; border-radius: 999px; }
.pg-plazo.k-vencido { background: var(--rojo-bg); color: var(--rojo); } .pg-plazo.k-en { background: var(--azul-bg); color: var(--accion); }
.pg-plazo.k-por { background: var(--papel-2); color: var(--gris); } .pg-plazo.k-ok { background: var(--verde-bg); color: var(--verde); } .pg-plazo.k-sin { color: var(--suave); font-weight: 400; }
.pg-prio { display: inline-block; font: 600 12.5px var(--rotulo); padding: 1px 8px; border-radius: 4px; margin: 3px 0; }
.pg-prio-sin { background: #6b7a90; color: #fff; }
.pg-lote { position: sticky; top: var(--alto-via, 0px); z-index: 5; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; background: var(--via); color: #fff; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.pg-lote label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #cfd8e8; }
.pg-lote input, .pg-lote select { font: inherit; font-size: 13px; border: 0; border-radius: 4px; padding: 4px 6px; }
.pg-lote button { border-radius: 5px; }
/* Nomenclatura de prioridades en la barra lateral */
.pg-nomen { display: flex; flex-direction: column; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pg-nomen-t { margin: 0 0 2px; font: 600 14px var(--rotulo); color: #fff; }
.pg-nomen-t span { font: 400 11.5px var(--letra); color: #aebbd2; margin-left: 4px; }
.pg-nomen-f { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: #dfe6f1; }
.pg-nomen-f i { font-style: normal; font: 600 12.5px var(--rotulo); text-align: center; border-radius: 4px; line-height: 20px; }
.pg-nomen-f b { font-family: var(--rotulo); color: #fff; }
@media (max-width: 1280px) { .pg-cuerpo { grid-template-columns: 1fr; } .pg-mapa { position: static; } .pg-mapa .an-mapa { height: 50vh; } }

/* Capas privadas de ArcGIS Online (las consulta el servidor con la credencial del proyecto) */
.an-privada { background: var(--via); color: #fff; border-radius: 3px; padding: 0 5px; font-size: 11px; }
.an-cred { margin: 2px 0 8px; }

/* Capas del proyecto para ArcGIS Online y rótulos «ID · plano» */
.tb-rotulo { background: rgba(255, 255, 255, .88); border: 1px solid var(--via); border-radius: 3px; box-shadow: none; padding: 1px 5px;
  font: 600 11px/1.25 'Barlow Semi Condensed', sans-serif; color: var(--via); text-align: center; white-space: nowrap; }
.tb-rotulo::before { display: none; }
.an-proy .an-capa-ctl { flex-wrap: wrap; }
.an-proy a.boton { display: inline-block; padding: 3px 9px; border: 1px solid var(--linea); border-radius: 4px; color: var(--via); text-decoration: none; font-size: 13px; background: #fff; }
.an-proy a.boton:hover, .an-proy a.boton:focus-visible { border-color: var(--accion); color: var(--accion); }
.an-proy .ancho { grid-column: 1 / -1; }
.an-proy-op h5 { margin: 12px 0 2px; font: 600 14px/1.3 "Barlow Semi Condensed", sans-serif; color: var(--via); border-bottom: 2px solid var(--ocre); padding-bottom: 2px; }
/* Rótulos con fondo del color del avance del ID (mismos colores que C_ESTADO de analitica.js). El ámbar y el gris llevan
   texto oscuro: el blanco no alcanza contraste a 11 px. */
.tb-rotulo.av-listo { background: #4c8a1f; border-color: #3a6b17; color: #fff; }
.tb-rotulo.av-en_curso { background: #b8730d; border-color: #8a5609; color: #18212f; }
.tb-rotulo.av-bloqueado { background: #d33a2c; border-color: #a32a1f; color: #fff; }
.tb-rotulo.av-pendiente { background: #9aa4b2; border-color: #7a8492; color: #18212f; }
/* Estado de avance en el popup del predio (mismos colores que los rótulos). */
.tb-av { display: inline-block; padding: 0 6px; border-radius: 3px; font-weight: 600; border: 1px solid transparent; }
.tb-av.av-listo { background: #4c8a1f; border-color: #3a6b17; color: #fff; }
.tb-av.av-en_curso { background: #b8730d; border-color: #8a5609; color: #18212f; }
.tb-av.av-bloqueado { background: #d33a2c; border-color: #a32a1f; color: #fff; }
.tb-av.av-pendiente { background: #9aa4b2; border-color: #7a8492; color: #18212f; }

/* ══ Analítica en una pantalla (usuario, 2026-09-29): el avance y la carretera en la franja de arriba, el mapa completo
   sin desplazar la página, la columna derecha con su propio desplazamiento y «Gráficos» como otra pantalla. ══ */
.tb-franja { display: none; }
body.en-analitica .via-fuente .fuente { display: flex; align-items: center; gap: 14px; overflow: visible; padding-top: 6px; padding-bottom: 6px; }
body.en-analitica #fuente { display: none; }
body.en-analitica .tb-franja { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.tb-franja-n { font-family: var(--rotulo); font-weight: 600; font-size: 26px; line-height: 1; color: var(--via); font-variant-numeric: tabular-nums; }
.tb-franja-t { font-size: 12.5px; color: var(--gris); }
.tb-franja .tb-via { flex: 1 1 auto; min-width: 140px; height: 20px; border-top-width: 2px; border-bottom-width: 2px; }
.tb-franja .tb-seg::before { height: 4px; }
.tb-franja-ley { font-size: 11.5px; color: var(--gris); display: inline-flex; }
.tb-franja-ley .tb-ley { margin-right: 8px; }
.tb-principal[hidden], .tb-graficos[hidden] { display: none !important; }
@media (max-width: 1400px) { .tb-franja-ley { display: none; } }
@media (min-width: 1101px) and (min-height: 600px) {
  body.en-analitica { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  body.en-analitica main { flex: 1 1 auto; min-height: 0; }
  body.en-analitica .tb { height: 100%; min-height: 0; }
  body.en-analitica .tb-lado { position: static; height: 100%; max-height: none; }
  body.en-analitica .tb-cuerpo { height: 100%; box-sizing: border-box; padding: 12px 16px; overflow: hidden; }
  body.en-analitica .tb-principal { grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); flex: 1 1 auto; min-height: 0; height: 100%; align-items: stretch; }
  body.en-analitica .tb-mapa { display: flex; flex-direction: column; min-height: 0; }
  body.en-analitica .tb-mapa .an-mapa { flex: 1 1 auto; height: auto; min-height: 0; }
  body.en-analitica .tb-columna { overflow-y: auto; min-height: 0; padding-right: 4px; }
  body.en-analitica .tb-graficos { overflow-y: auto; min-height: 0; height: 100%; align-content: start; }
}
.an-herencias { margin: 6px 0 2px; font-size: 13px; } .an-herencias summary { cursor: pointer; color: var(--via); font-weight: 600; } .an-herencias ul { margin: 4px 0 0; padding-left: 18px; }
.an-global { margin: 4px 0 10px; padding: 10px 12px; background: var(--papel-2); border: 1px solid var(--linea-2); border-radius: 6px; }
.an-global a.boton { display: inline-block; padding: 6px 12px; border-radius: 5px; background: var(--via); color: #fff; text-decoration: none; font: 600 14px var(--rotulo); }
.an-global a.boton:hover, .an-global a.boton:focus-visible { background: var(--accion); }
.an-global p { margin: 6px 0 0; } .an-global ul { margin: 4px 0 0; padding-left: 18px; }
.an-proy-op h5 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.an-dxf-op { font: 600 12.5px var(--letra); padding: 2px 9px; border: 1px solid var(--linea); border-radius: 4px; color: var(--via); text-decoration: none; background: #fff; }
.an-dxf-op:hover, .an-dxf-op:focus-visible { border-color: var(--accion); color: var(--accion); }
/* Zona homogénea automática (fase 7) */
.zh-auto { display: flex; flex-direction: column; gap: 8px; }
.zh-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.zh-marca { background: var(--ocre); color: #fff; border-radius: 3px; padding: 0 5px; font-size: 11px; }
.zh-varias { margin: 0; padding: 6px 10px; background: #fdf3e1; border-left: 3px solid var(--ocre); font-size: 13px; }
.zh-cuerpo { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.zh-img { width: 320px; max-width: 100%; aspect-ratio: 1; border: 1px solid var(--linea); border-radius: 4px; }
.zh-tabla { border-collapse: collapse; font-size: 12.5px; }
.zh-tabla th, .zh-tabla td { border: 1px solid var(--linea); padding: 3px 8px; text-align: right; }
.zh-tabla th:first-child, .zh-tabla td:first-child { text-align: left; color: var(--gris); }
.zh-tabla thead th { background: var(--papel-2); }
.zh-cuerpo .zh-tabla { width: auto; flex: 1 1 360px; max-width: 640px; }

/* ── Capítulo 2 que se llena en Campo (2.6 y árboles), visto desde Catastro ── */
.de-campo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; margin: 8px 0 14px; border: 1px dashed var(--linea); border-radius: var(--r); background: var(--papel-2); }
.campo-sec + .fotos-per { margin: -2px 0 12px; padding: 8px 12px 10px; border: 1px solid var(--linea-2); border-top: 3px solid var(--ocre); border-radius: 0 0 var(--r) var(--r); background: var(--papel); }
.campo-sec + .fotos-per h3 { margin-top: 2px; }

/* ── Bitácora (fase 3 del acceso): quién, qué y cuándo ── */
.bitacora .form label { display: grid; gap: 2px; font-size: 12px; color: var(--gris); }
.bitacora .form a.boton { align-self: end; padding: 5px 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); color: var(--tinta); text-decoration: none; }
.bit-tabla { margin-top: 12px; font-size: 13.5px; }
.bit-tabla td.bit-cuando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bit-tabla td.bit-cambios { min-width: 320px; max-width: 640px; overflow-wrap: anywhere; }
.bit-tabla del { color: #8a1f11; background: #fbe9e7; text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
.bit-tabla ins { color: #1d5b2c; background: #e5f3e8; text-decoration: none; padding: 0 2px; border-radius: 3px; }
.bit-accion { display: inline-block; font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: var(--r); background: var(--papel-2); color: var(--gris); }
.bit-alta .bit-accion { background: #e5f3e8; color: #1d5b2c; }
.bit-baja .bit-accion { background: #fbe9e7; color: #8a1f11; }
.bit-cambio .bit-accion { background: color-mix(in srgb, var(--ocre) 18%, var(--papel)); color: #6b5217; }
.bit-acceso td { background: var(--papel-2); }
.bit-fallo .bit-accion { background: #fbe9e7; color: #8a1f11; }

/* ── Notas del ES (fase 4 del acceso) ── */
.es-bloque-cab .nota-acciones { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.nota-nueva { font-size: 12px; padding: 2px 10px; }
.nota-marca { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--papel-2); color: var(--gris); }
.nota-marca.pend { background: color-mix(in srgb, var(--ocre) 22%, var(--papel)); color: #6b5217; border-color: color-mix(in srgb, var(--ocre) 55%, var(--linea)); font-weight: 600; }
h3 .nota-nueva { margin-left: 10px; vertical-align: middle; }
.nota-tarjeta { border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: var(--r); padding: 10px 12px; margin: 8px 0; background: var(--papel); display: grid; gap: 6px; }
.nota-tarjeta.e-abierta { border-left-color: var(--ocre); }
.nota-tarjeta.e-recibida { border-left-color: var(--accion); }
.nota-tarjeta.e-resuelta { border-left-color: #2f7d45; background: var(--papel-2); }
.nota-tarjeta.e-descartada { border-left-color: var(--suave); background: var(--papel-2); opacity: .85; }
.nota-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.nota-cita { margin: 0; padding: 6px 10px; border-left: 3px solid var(--ocre); background: color-mix(in srgb, var(--ocre) 8%, var(--papel)); font-style: italic; white-space: pre-wrap; }
.nota-cita.cambio { border-left-color: var(--suave); }
.nota-texto { margin: 0; white-space: pre-wrap; }
.nota-resp { margin-left: 14px; padding: 4px 10px; border-left: 2px solid var(--linea); white-space: pre-wrap; }
.nota-fin { padding: 4px 10px; border-radius: var(--r); background: #e5f3e8; white-space: pre-wrap; }
.nota-pie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nota-pie textarea { flex: 1 1 240px; min-height: 30px; }
dialog.nota-dialogo { width: min(720px, 94vw); max-height: 86vh; border: 1px solid var(--linea); border-radius: 12px; padding: 14px 18px; }
dialog.nota-dialogo::backdrop { background: rgba(24, 33, 47, .35); }
dialog.est-dlg { width: min(1000px, 96vw); max-height: 90vh; border: 1px solid var(--linea); border-left: 4px solid var(--accion); border-radius: 12px; padding: 14px 18px; }
dialog.est-dlg::backdrop { background: rgba(24, 33, 47, .35); }
.tabla-resumen .est-agregar { padding: 8px 12px 12px; }
.tabla-resumen .est-acc { text-align: right; }
.nota-dlg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nota-dlg-cab h3 { margin: 0; }
.nota-form { display: grid; gap: 10px; }
.nota-form label { display: grid; gap: 4px; }
.nota-para { border: 1px solid var(--linea); border-radius: var(--r); padding: 6px 10px 8px; margin: 0; display: grid; gap: 6px; min-width: 0; }
.nota-para legend { padding: 0 4px; }
.nota-para-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; max-height: 220px; overflow: auto; }
.nota-form label.nota-para-op { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; cursor: pointer; }
.nota-para-op input { margin-top: 3px; }
.nota-para-op > span { display: grid; line-height: 1.25; }
.nota-todas { margin-left: auto; font-size: 13px; color: var(--gris); display: inline-flex; gap: 6px; align-items: center; }
.chip.azul { background: var(--azul-bg); color: var(--azul); }

/* Ayuda «?» junto a un valor (relación, inconsistencias, modificaciones, tipo de vía, tipología ONT): se abre al pasar el
   puntero o al enfocarla con Tab. app.js la ubica en posición fija dentro de la pantalla (arriba o abajo según el lugar),
   así ningún contenedor ni diálogo la recorta; se puede pasar el puntero sobre ella para leerla y desplazarla. */
.ayuda-q { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%;
  border: 1.5px solid var(--accion); color: var(--accion); font: 700 11px/1 var(--rotulo); cursor: help; vertical-align: 1px; flex: none; }
.ayuda-q:hover, .ayuda-q:focus-visible { background: var(--accion); color: #fff; outline: none; }
.ayuda-q-texto { display: none; position: fixed; z-index: 1000; width: max-content; max-width: min(360px, calc(100vw - 16px)); max-height: 60vh; overflow: auto;
  padding: 10px 12px; background: var(--via); color: #fff; border-radius: var(--r); box-shadow: 0 6px 18px rgba(28, 43, 74, .25);
  font: 400 13px/1.45 var(--letra); text-align: left; white-space: normal; cursor: auto; overscroll-behavior: contain; }
.ayuda-q.ancha .ayuda-q-texto { max-width: min(460px, calc(100vw - 16px)); }
.ayuda-q:hover .ayuda-q-texto, .ayuda-q:focus-visible .ayuda-q-texto { display: block; }
/* Puente invisible sobre el espacio entre el «?» y la ayuda: al mover el puntero hacia ella no se cierra. */
.ayuda-q:hover::after { content: ''; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px; }
.ayuda-q-titulo { display: block; margin-bottom: 4px; color: #fff; font-family: var(--rotulo); font-size: 14px; }
.ayuda-q-linea { display: block; margin-top: 3px; }
.ayuda-q-linea b { color: #fff; }
.ayuda-q-fuente { display: block; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .25); color: #c9d3e6; font-size: 11.5px; }

/* Documentos del predio (Estudio situacional): botón fijo abajo a la derecha, siempre a mano, con la franja ocre de la
   carretera; abre un visor a dos columnas: la lista por grupo y el documento en el navegador. */
.docs-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 15px; border: 0; border-left: 5px solid var(--ocre); border-radius: 999px; background: var(--via); color: #fff;
  font: 600 15px/1 var(--rotulo); letter-spacing: .2px; box-shadow: 0 6px 20px rgba(28, 43, 74, .28); cursor: pointer; }
.docs-flotante:hover { background: var(--accion); }
.docs-flotante:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
@media (max-width: 640px) { .docs-flotante span { display: none; } .docs-flotante { padding: 13px; border-left-width: 4px; } }
dialog.docs-dlg { width: min(1180px, 96vw); height: min(88vh, 900px); padding: 0; border: 1px solid var(--linea); border-top: 4px solid var(--ocre); border-radius: 12px; overflow: hidden; }
dialog.docs-dlg[open] { display: flex; flex-direction: column; }
dialog.docs-dlg::backdrop { background: rgba(24, 33, 47, .45); }
.docs-cab { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.docs-cab h3 { margin: 0; color: var(--via); }
.docs-cab form { margin-left: auto; }
.docs-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 1fr; }
.docs-lista { overflow: auto; padding: 10px 10px 16px; border-right: 1px solid var(--linea); background: var(--papel); }
.docs-grupo h4 { margin: 12px 4px 6px; font: 700 13px/1.2 var(--rotulo); color: var(--via); letter-spacing: .3px; }
.docs-grupo:first-child h4 { margin-top: 2px; }
.docs-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; margin-bottom: 3px; border: 1px solid transparent; border-radius: var(--r);
  background: transparent; text-align: left; font-size: 14px; line-height: 1.3; cursor: pointer; }
.docs-item:hover { background: #fff; border-color: var(--linea); }
.docs-item[aria-current="true"] { background: #fff; border-color: var(--accion); box-shadow: inset 3px 0 0 var(--accion); }
.docs-item:disabled { opacity: .55; cursor: not-allowed; }
.docs-item img { width: 42px; height: 32px; object-fit: cover; border-radius: 4px; flex: none; }
.docs-tipo { flex: none; min-width: 36px; padding: 3px 0; border-radius: 4px; background: var(--via); color: #fff; font: 700 10.5px/1 var(--rotulo); text-align: center; letter-spacing: .5px; }
.docs-nada { margin: 0 4px 4px; font-size: 13px; }
.docs-visor { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #e9edf3; }
.docs-visor-cab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--linea); }
.docs-visor-cab > div { margin-right: auto; display: flex; flex-direction: column; min-width: 0; }
.docs-visor-cab .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-visor-cab .boton { display: inline-block; padding: 5px 12px; border: 1px solid var(--linea); border-radius: var(--r); color: var(--via); background: var(--papel); text-decoration: none; font: 600 14px/1.3 var(--rotulo); white-space: nowrap; }
.docs-visor-cab .boton:hover { border-color: var(--accion); color: var(--accion); }
.docs-img { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 12px; }
.docs-img img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 2px 10px rgba(28, 43, 74, .15); }
.docs-pdf { flex: 1; width: 100%; border: 0; background: #fff; }
.docs-vacio { margin: auto; color: var(--suave); }
.docs-donde { margin: 0; padding: 7px 14px; font-size: 12.5px; color: var(--gris); background: #fff; border-top: 1px solid var(--linea); overflow-wrap: anywhere; }
.docs-donde code { background: var(--papel); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 760px) { .docs-cuerpo { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; } .docs-lista { border-right: 0; border-bottom: 1px solid var(--linea); } }
#contenido:has(.docs-flotante) { padding-bottom: 76px; } /* que el botón no tape lo último del estudio */

/* Franja de una base que no es la de trabajo (gemela local): siempre visible, imposible de confundir */
.franja-instancia{position:sticky;top:0;z-index:2000;padding:6px 16px;text-align:center;font:700 13px/1.4 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.04em;color:#1c2b4a;
  background:repeating-linear-gradient(135deg,#e8c25a 0 18px,#f2d68a 18px 36px);border-bottom:2px solid #b8902f}

/* Indicador de la copia a Google Drive (administrador) */
.nav-drive{font-variant-numeric:tabular-nums;white-space:nowrap}
.nav-drive[hidden]{display:none}
.nav-disco{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ocre)}
.nav-disco.alto{color:#b42318;font-weight:600}

/* Cruces entre pedidos: aviso en el Resumen del ID */
.cruces-id{margin:0 0 12px;padding:10px 12px;border:1px solid #e0b64a;border-left:4px solid #b8902f;border-radius:8px;background:#fdf7e6;color:#4a3a10;display:grid;gap:4px}
.cruces-id a{color:#0b6f7c}

/* Conciliación (etapa 1): solicitudes en el Resumen del ID y su bandeja */
.conciliacion { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); }
.conciliacion.con { border-left: 4px solid var(--ocre); }
.conc-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; border-top: 1px dashed var(--linea-2); }
.conc-fila:first-of-type { border-top: 0; }
.conciliacion .form .ancho { flex: 1 1 100%; }
.chip.conc-pendiente { background: #fbecd3; color: #8a5a0b; }
.chip.conc-hecha { background: #e1f0e3; color: #2f7a3d; }
.chip.conc-rechazada { background: #f7e1e1; color: #a3262a; }
.conc-filtro button { margin-right: 4px; }
.form label[hidden] { display: none; }

/* Conciliación, etapa 3: la figura del ID en la capa del pedido (solo el administrador) */
.figura-arcgis { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--linea); border-left: 4px solid var(--ocre); border-radius: var(--r); background: var(--papel); }
#h-arcgis .tarjeta { margin-bottom: 12px; }

/* Visor de la imagen del plano: zoom, mover, girar; la tabla leída al lado (2026-10-06) */
.plano-abrir { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.plano-abrir .plano-lupa { position: absolute; right: 8px; bottom: 8px; padding: 3px 10px; border-radius: var(--r); background: var(--via); color: #fff; font: 600 .82rem var(--rotulo); opacity: .88; }
.plano-abrir:hover .plano-lupa, .plano-abrir:focus-visible .plano-lupa { opacity: 1; background: var(--accion); }
body.con-visor { overflow: hidden; }
.visor-plano { position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column; background: var(--fondo); }
.visor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; background: var(--via); color: #fff; border-bottom: 3px dashed var(--ocre); }
.visor-barra b { font-family: var(--rotulo); font-size: 1.05rem; margin-right: auto; }
.visor-barra .visor-zoom { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; opacity: .85; }
.visor-barra a { color: #fff; margin: 0 6px; }
.visor-barra button { min-width: 2.4em; }
.visor-cuerpo { flex: 1; display: flex; min-height: 0; }
.visor-lienzo { flex: 1; position: relative; overflow: hidden; background: #e9ecf1; cursor: grab; touch-action: none; }
.visor-lienzo.moviendo { cursor: grabbing; }
.visor-lienzo img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; background: #fff; box-shadow: 0 1px 8px rgba(28, 43, 74, .25); }
.visor-lienzo .vacio { padding: 24px; }
.visor-lado { width: min(420px, 38vw); overflow: auto; padding: 12px 14px; background: var(--papel); border-left: 1px solid var(--linea); }
.visor-lado .tabla-leida { max-height: none; }
.visor-plano.sin-lado .visor-lado { display: none; }
@media (max-width: 760px) {
  .visor-cuerpo { flex-direction: column; }
  .visor-lado { width: auto; max-height: 38vh; border-left: 0; border-top: 1px solid var(--linea); }
}

/* Corregir la tabla del derrotero (2026-10-06) */
.der-corregir { margin-left: 8px; font-size: .85rem; vertical-align: middle; }
.chip.der-corregida { background: var(--ambar-bg); color: var(--ambar); }
.visor-plano.con-editor .visor-lado { width: min(600px, 50vw); }
.der-editor h3 { margin-top: 0; }
.der-editor label { display: block; margin: 8px 0; }
.der-editor select { margin-left: 6px; }
.der-tabla { max-height: 42vh; overflow: auto; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); margin-bottom: 8px; }
.der-tabla table { width: 100%; border-collapse: collapse; }
.der-tabla th { position: sticky; top: 0; background: var(--papel-2); font: 600 .85rem var(--rotulo); padding: 4px; }
.der-tabla td { padding: 2px 3px; }
.der-tabla input:not([type]) { width: 100%; box-sizing: border-box; padding: 3px 5px; font-variant-numeric: tabular-nums; }
.der-tabla input.num { text-align: right; min-width: 3.4em; }
.der-tabla input.corto { min-width: 2.6em; }
.der-tabla [data-quitar] { padding: 0 7px; }
.der-resultado { margin: 10px 0; }
.der-comparar { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.der-comparar th, .der-comparar td { padding: 4px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
.der-comparar td.mejor { color: var(--verde); font-weight: 600; }
.der-comparar td.peor { color: var(--rojo); font-weight: 600; }
.der-nota textarea { width: 100%; box-sizing: border-box; margin-top: 4px; }
.der-acciones { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) { .visor-plano.con-editor .visor-lado { width: auto; max-height: 55vh; } }

/* Croquis comparativo (2026-10-06) */
.croquis-comp .cc-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 8px 0 10px; }
.croquis-comp .cc-form label { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.croquis-comp .cc-form select { min-width: 260px; max-width: 420px; }
.croquis-comp .cc-form input[type=number] { width: 6em; }
.croquis-comp .cc-svg { border: 1px solid var(--linea); border-radius: var(--r); background: #fff; overflow: hidden; }
.croquis-comp .cc-svg svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .croquis-comp .cc-form select { min-width: 0; width: 100%; } .croquis-comp .cc-form label { width: 100%; } }

/* Lista del pedido: prioridad y fecha de entrega (2026-10-07) */
.filtros-prog { flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.filtros-prog .f-rango { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.prio-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 .78rem var(--rotulo); white-space: nowrap; }
.entrega-vencida { color: var(--rojo); font-weight: 600; }
.pg-exportar { display: inline-block; margin: 2px 0 10px; }
/* AEP: «no se ha presentado» (2026-10-07) */
.aep-nopres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.aep-nopres-btn { margin: 6px 0; font-size: .88rem; }

/* Campana de notas (2026-10-07) */
.campana { position: relative; display: inline-flex; align-items: center; margin-right: 6px; }
.campana-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; }
.campana-btn:hover, .campana-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.campana-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rojo); color: #fff; font: 700 11px/18px var(--rotulo); text-align: center; }
.campana-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: min(460px, calc(100vw - 24px)); max-height: 72vh; overflow: auto;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--r); box-shadow: 0 10px 30px rgba(28, 43, 74, .25); }
.campana-cab { position: sticky; top: 0; display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.campana-cab .campana-todas { margin-left: auto; }
.campana-lista { display: grid; gap: 8px; padding: 10px; }
.campana-item { position: relative; }
.campana-item.nueva .nota-tarjeta { border-left: 4px solid var(--ocre); }
.campana-nueva { position: absolute; top: 8px; right: 10px; z-index: 1; font: 700 11px var(--rotulo); color: var(--ocre); }

/* Programación: sector (2026-10-07) */
.pg-sector { min-width: 3.6em; }

/* Cambio de orden de pedido (2026-10-07) */
.cambio-pedido { margin: 14px 0 0; padding: 8px 12px; border: 1px dashed var(--linea, #ccd); border-radius: 6px; }
.cp-cab { margin-left: 6px; padding: 1px 8px; font-size: .78rem; vertical-align: 1px; }
.cp-dialogo { max-width: 720px; }
.cp-dialogo .cp-op { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.cp-dialogo h4 { margin: 12px 0 4px; }
.cp-dialogo ul { margin: 0; padding-left: 20px; }
.cp-dialogo li { margin: 3px 0; }
.cp-botones { display: flex; justify-content: flex-end; margin-top: 12px; }

.pg-cambiar-op { margin-left: auto; }
.cp-dialogo details.cp-id { margin: 6px 0; padding: 4px 8px; border: 1px solid var(--linea, #dde); border-radius: 6px; }
.cp-dialogo details.cp-id summary { cursor: pointer; }

/* Programación: plazo del pedido (2026-10-07, 052) */
.pg-ped { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.pg-ped.sin { border-style: dashed; }
.pg-ped .sub { color: rgba(255,255,255,.78); } .pg-ped .sub b { color: #fff; }
.pg-ped-t { margin: 0 0 6px; font-weight: 700; }
.pg-ped-d { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0 0 6px; }
.pg-ped-d dt { font-size: .75rem; opacity: .75; } .pg-ped-d dd { margin: 0; font-weight: 600; }
.pg-ped-d dd.mal, .pg-dlg .mal { color: #ffb4ab; }
.pg-ped-b { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-ped-b button { font-size: .8rem; padding: 4px 8px; }
.pg-tabla tr.pg-fuera td { background: #fbe4e1; }
.pg-tabla tr.pg-exc td:first-child { box-shadow: inset 4px 0 0 #6d3fa0; }
.pg-plazo.k-fuera { background: #b3261e; color: #fff; }
.pg-entrega { white-space: nowrap; font-size: .85rem; }
.pg-holgura { font-size: .75rem; font-weight: 700; color: #2f7d4f; } .pg-holgura.poca { color: #b07a00; } .pg-holgura.neg { color: #b3261e; }
.pg-dlg { max-width: 820px; }
.pg-dlg .mal { color: #b3261e; }
.pg-form { margin-top: 8px; }
.pg-form label.pg-chk { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.pg-ev { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 6px 0 10px; }
.pg-ev th, .pg-ev td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #e3e6ec; vertical-align: top; }
.pg-ev tr.anulado td { text-decoration: line-through; opacity: .6; }
.pg-prop { position: relative; margin: 10px 0; padding-right: 4px; }
.pg-prop-fin { position: absolute; right: 0; top: -16px; font-size: .7rem; color: #b3261e; font-weight: 700; }
.pg-prop-f { display: grid; grid-template-columns: 52px 1fr 215px; align-items: center; gap: 8px; font-size: .8rem; margin: 2px 0; }
.pg-prop-eje { position: relative; height: 12px; background: #eef0f4; border-right: 3px solid #b3261e; }
.pg-prop-eje i { position: absolute; top: 0; bottom: 0; background: #1c2b4a; border-radius: 2px; }
.pg-prop-f.fuera .pg-prop-eje i { background: #b3261e; }

/* Programación TOPYTUR (2026-10-08): una tabla clara para organizar; el color va en los departamentos. */
.tp { display: grid; gap: 12px; }
.tp-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 14px; background: #fff; border: 1px solid #e1e4ea; border-radius: 10px; border-bottom: 3px solid #b8902f; }
.tp-barra h2 { margin: 0 12px 2px 0; font-size: 1.35rem; }
.tp-barra label, .tp-lote label { display: grid; gap: 2px; font-size: .78rem; color: #5b6475; }
.tp-barra select { min-width: 8em; }
.tp-lote { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 14px; background: #f4ead2; border-radius: 10px; }
.tp-lote b { align-self: center; }
.tp-avisos { display: grid; gap: 4px; }
.tp-av { display: flex; gap: 10px; padding: 6px 10px; border-radius: 6px; background: #fbe4e1; font-size: .86rem; }
.tp-av b { flex: none; }
.tp-caja { background: #fff; border: 1px solid #e1e4ea; border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.tp-tabla { border-collapse: collapse; width: 100%; font-size: .86rem; font-variant-numeric: tabular-nums; }
.tp-tabla th { text-align: left; font-size: .78rem; color: #5b6475; font-weight: 700; border-bottom: 2px solid #b8902f; padding: 6px 8px; white-space: nowrap; }
.tp-tabla td { padding: 4px 8px; border-bottom: 1px solid #edf0f4; white-space: nowrap; }
.tp-tabla tr.tp-idf td { background: #f6f7f9; font-weight: 700; padding-top: 8px; }
.tp-tabla tr.tp-mal td { background: #fbe4e1; }
.tp-tabla input[type="date"] { font-size: .82rem; padding: 2px 4px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tp-chip::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.tp-exc { font-style: normal; font-size: .72rem; background: #6d3fa0; color: #fff; padding: 0 6px; border-radius: 999px; }
.tp-tabla tr.tp-sec td { background: #fff; border-bottom: 2px solid #b8902f; padding-top: 16px; font-weight: 700; font-size: 1.1rem; color: #1d2330; }
.tp-prio { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.tp-tabla input.tp-pasa { border-color: #b3261e; background: #fbe4e1; color: #8e1b12; font-weight: 700; }
.tp-esp { flex: 1; }

/* Agenda de trabajo (2026-10-08): la tabla de la Programación TOPYTUR, solo lectura, para todo el equipo; mapa plegable. */
.ag-chk { display: flex !important; flex-direction: row; align-items: center; gap: 6px; font-size: .85rem !important; color: #1d2330 !important; }
.ag-idb { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; color: #1d2330; }
.ag-idb:hover { text-decoration: underline; }
.ag-hoyc { display: inline-block; font-style: normal; font-size: .72rem; font-weight: 700; background: #b8902f; color: #fff; padding: 0 7px; border-radius: 999px; }
.tp-tabla tr.ag-hoyf td { background: #fbf3df; }
.tp-tabla td.ag-f { font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-tabla tr.ag-vacia td { color: #9aa3b2; }
.ag-dos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ag-der { position: sticky; top: calc(var(--alto-via, 0px) + 10px); display: grid; gap: 6px; }
.ag-mapa-box { height: calc(100vh - 230px); min-height: 360px; }
.tp-tabla tr.ag-sel td { box-shadow: inset 0 2px 0 #b8902f, inset 0 -2px 0 #b8902f; }
@media (max-width: 1100px) { .ag-dos { grid-template-columns: 1fr; } .ag-der { position: static; } .ag-mapa-box { height: 50vh; } }
/* Lista: sector (2026-10-08) */
.sector-chip { display: inline-block; min-width: 2.2em; padding: 1px 6px; border-radius: 999px; background: #eef1f6; color: #1c2b4a; font-weight: 700; font-size: .78rem; text-align: center; }
.ag-der .tb-config { background: #fff; color: #1d2330; border: 1px solid #d5dae3; margin-top: 8px; }
.ag-der .tb-config [data-config-n] { color: #5b6475; }
body.ag-ancho main { max-width: none; padding: 14px 18px 40px; }
.ag-izq .tp-tabla td, .ag-izq .tp-tabla th { padding: 4px 6px; }

/* Auditoría de revisión (2026-10-08; public/auditoria.js): lista de chequeo por ID, automática y editable con motivo. */
.au-ley { margin: 8px 2px; }
.au-prom { display: flex; align-items: center; gap: 8px; }
.au-barra { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: #e7eaf0; overflow: hidden; vertical-align: middle; }
.au-barra i { display: block; height: 100%; background: var(--b, #8a96aa); }
.au-ok { --b: #2f7d4f; } .au-medio { --b: #b8902f; } .au-bajo { --b: #b3261e; } .au-na { --b: #c9ced8; }
.au-pct { font-variant-numeric: tabular-nums; margin-left: 6px; min-width: 3em; display: inline-block; }
.au-tabla .au-fila { cursor: pointer; }
.au-tabla .au-fila:hover td { background: #fbf3df; }
.au-celda { font-weight: 700; color: var(--b); font-variant-numeric: tabular-nums; }
.au-man { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 999px; background: #6d3fa0; color: #fff; font-size: .75rem; font-weight: 700; }
.au-det td { background: #fafbfc; white-space: normal; }
.au-det ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; }
.au-est { display: inline-block; min-width: 6.4em; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.au-completo { background: #dcefe2; color: #1f5c38; } .au-parcial { background: #f4ead2; color: #7a5a12; }
.au-falta { background: #fbe4e1; color: #8e1b12; } .au-no_aplica { background: #eceef2; color: #5b6475; } .au-sin_revisar { background: #e6eefa; color: #1c3f73; }
.au-id-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; }
.au-id-cab h3 { margin: 0; }
.au-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; }
.au-g { background: #fff; border: 1px solid #e1e4ea; border-top: 4px solid var(--c); border-radius: 10px; padding: 8px 12px 10px; }
.au-g h4 { display: flex; justify-content: space-between; margin: 2px 0 6px; }
.au-g-pct { font-variant-numeric: tabular-nums; color: #5b6475; font-weight: 600; }
.au-p { padding: 7px 0; border-top: 1px solid #edf0f4; display: grid; gap: 3px; }
.au-p-cab { display: flex; align-items: center; gap: 8px; }
.au-p-det { font-size: .82rem; color: #3d4556; }
.au-p-man-t { font-size: .8rem; background: #f1ebf8; border-left: 3px solid #6d3fa0; padding: 4px 8px; border-radius: 4px; }
.au-btn { font-size: .78rem; padding: 2px 10px; }
.au-form { display: grid; gap: 6px; background: #f6f7f9; padding: 8px; border-radius: 6px; }
.au-form label { display: grid; gap: 2px; font-size: .78rem; color: #5b6475; }
.au-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.au-form-b { display: flex; gap: 8px; }
.au-hist { margin-top: 14px; }
.au-hist .au-mot { white-space: normal; min-width: 18em; }
.us-aud { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-size: .85rem; }

/* AEP del pedido para la UE (2026-10-08): descarga de los PDF y carga en lote de los firmados por la UE. */
.aep-ue { margin-top: 18px; }
.aep-ue-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 10px 0; }
.aep-ue-barra label { display: grid; gap: 2px; font-size: .8rem; color: #5b6475; }
.aep-ue-plan { background: #f4ead2; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.aep-ue-plan table { background: #fff; }

/* Notas al costado del ES (2026-10-08): la página se ensancha y las notas quedan a la derecha, fijas al desplazar. */
body.es-ancho main { max-width: 1680px; }
.es-con-notas { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.es-izq { min-width: 0; }
/* El recuadro de la ficha tiene overflow:auto, que anula el sticky del panel: con el panel adentro, se libera. */
.tarjeta:has(.es-con-notas) { overflow: visible; }
.es-notas { position: sticky; top: calc(var(--alto-via, 0px) + 10px); max-height: calc(100vh - var(--alto-via, 0px) - 20px); overflow-y: auto;
  /* Marca de agua TOPYTUR (usuario, 2026-10-08): el logo al pie y el símbolo repartido; las notas van encima, opacas. */
  background: url(/img/topytur_marca_logo.png) center bottom 14px / 86% auto no-repeat, url(/img/topytur_marca_mosaico.png) 0 0 / 150px 150px repeat, var(--papel-2, #f6f7f9);
  min-height: 360px; border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 12px 110px; }
.es-notas-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.es-notas-cab h3 { margin: 0; }
.es-notas > p.sub { margin: 4px 0 8px; font-size: .8rem; }
.es-notas-filtro { margin-bottom: 8px; }
.nota-pleg { border: 1px solid var(--linea); border-left: 5px solid var(--linea); border-radius: var(--r); background: var(--papel); margin: 8px 0; }
.nota-pleg.e-abierta { border-left-color: var(--ocre); }
.nota-pleg.e-recibida { border-left-color: var(--accion); }
.nota-pleg.e-resuelta { border-left-color: #2f7d45; }
.nota-pleg.e-descartada { border-left-color: var(--suave); opacity: .85; }
.nota-pleg > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 8px 10px; align-items: baseline; }
.nota-pleg > summary::-webkit-details-marker { display: none; }
.nota-pleg > summary .sub { grid-column: 1 / -1; font-size: .76rem; }
.nota-pleg-t { font-weight: 600; overflow-wrap: anywhere; }
.nota-pleg[open] > summary { border-bottom: 1px solid var(--linea); }
.nota-pleg[open] .nota-pleg-t, .nota-pleg[open] > summary .sub { display: none; }
.nota-pleg .nota-tarjeta { border: 0; margin: 0; border-radius: 0 0 var(--r) var(--r); }
.nota-pleg .nota-cab .chip { display: none; }
.nota-pleg.e-resuelta > summary, .nota-pleg.e-descartada > summary { background: var(--papel-2, #f6f7f9); }
@media (max-width: 1280px) { .es-con-notas { grid-template-columns: minmax(0, 1fr); } .es-notas { position: static; max-height: none; } }

/* Avisos legales del pedido (2026-10-08) */
.rojo-t { color: #b3261e; }

/* Proceso DABI (seguimiento DABI, fase 1, 2026-10-09): catálogo del proceso de expropiación. */
.px-cab p { margin: 0 0 8px; }
.px-tabla td { vertical-align: top; }
.px-fase td { background: var(--papel-2); font: 700 1rem var(--rotulo); color: var(--via, #1c2b4a); border-top: 2px solid #b8902f; padding-top: 10px; }
.px-t { cursor: pointer; }
.px-t:hover td, .px-t.abierta td { background: #fbf3df; }
.px-t:focus-visible { outline: 2px solid #b8902f; outline-offset: -2px; }
.px-t-tpt td:first-child { box-shadow: inset 4px 0 0 #b8902f; }
.px-id { font: 700 .95rem var(--rotulo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-papel { display: inline-block; font: 700 .72rem var(--rotulo); background: #b8902f; color: #fff; padding: 0 7px; border-radius: 999px; margin-left: 4px; }
.px-actor { display: inline-block; font-size: .76rem; padding: 0 7px; border: 1px solid var(--linea); border-radius: 999px; margin: 1px 0; background: var(--papel); white-space: nowrap; }
.px-actor.px-tpt { border-color: #b8902f; background: #fbf3df; color: #7a5a12; font-weight: 700; }
.px-flecha { color: #b8902f; font-weight: 700; margin: 0 2px; }
.px-flujo { min-width: 220px; }
.px-dim { display: inline-block; font: 700 .72rem var(--rotulo); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.px-dim-administrativo { background: #e7ecf6; color: #1c2b4a; } .px-dim-judicial { background: #f1ebf8; color: #5b3b86; }
.px-dim-financiero { background: #e3f2ea; color: #1f5c38; } .px-dim-posesion { background: #fbe9dc; color: #8a3b0c; } .px-dim-registral { background: #e2f1f3; color: #0b6f7c; }
.px-mas { color: var(--gris); }
.px-t.abierta .px-mas { transform: rotate(90deg); }
.px-det td { background: var(--papel); border-top: 0; }
.px-det-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin-bottom: 6px; }
.px-sub { margin: 6px 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.px-control { background: #fbf3df; border-left: 3px solid #b8902f; padding: 4px 8px; margin: 6px 0; }
.px-check { display: flex !important; flex-direction: row; align-items: center; gap: 6px; }
.px-calc #px-vence { align-self: center; }
.px-aviso { color: #8a5a00; font-size: .85rem; }
.px-otro td { color: var(--gris); }

/* Expediente DABI del ID (seguimiento DABI, fase 2, 2026-10-09). */
.xd { display: grid; gap: 14px; }
.xd-bloque, .xd-exp { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 12px 16px; }
.xd-exp { border-top: 4px solid #1c2b4a; }
.xd-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xd-cab h3 { margin: 0; font: 700 1.3rem var(--rotulo); }
.xd-chip { font: 700 .74rem var(--rotulo); padding: 1px 8px; border-radius: 999px; background: #e7ecf6; color: #1c2b4a; }
.xd-chip.xd-gris { background: #eceef2; color: #5b6475; } .xd-chip.xd-ocre { background: #fbf3df; color: #7a5a12; }
.xd-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; margin-top: 8px; }
.xd-dos h4, .xd-exp > h4 { margin: 10px 0 4px; font: 700 1rem var(--rotulo); }
.xd-lista { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 4px; }
.xd-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.xd-btn { font-size: .78rem; padding: 1px 8px; }
.xd-tiempo { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 0; border-left: 3px solid var(--linea); }
.xd-act { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 12px; padding: 8px 10px; border-bottom: 1px solid var(--linea); position: relative; }
.xd-act::before { content: ""; position: absolute; left: -7px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: #1c2b4a; border: 2px solid var(--papel); }
.xd-dim-judicial::before { background: #5b3b86; } .xd-dim-financiero::before { background: #2f7d45; } .xd-dim-posesion::before { background: #c2410c; } .xd-dim-registral::before { background: #0b6f7c; }
.xd-act-f { font: 700 .95rem var(--rotulo); font-variant-numeric: tabular-nums; }
.xd-flujo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0; }
.xd-doc { font-weight: 600; margin-left: 6px; }
.xd-nota { font-size: .88rem; background: var(--papel-2); padding: 3px 8px; border-radius: 4px; margin-top: 3px; }
.xd-anulada { opacity: .6; } .xd-anulada b { text-decoration: line-through; }
.xd-anul { color: #8e1b12; font-size: .85rem; }
.xd-det { margin-top: 8px; } .xd-det > summary { cursor: pointer; font-weight: 700; color: #0b6f7c; }
.xd-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 8px 0; }
.xd-form label { display: grid; gap: 2px; font-size: .8rem; color: #5b6475; }
.xd-form .xd-ancho { flex: 1 1 100%; } .xd-form .xd-ancho input, .xd-form .xd-ancho select { width: 100%; }

/* Matriz de expedientes DABI (seguimiento DABI, fase 3; public/matriz-dabi.js) */
.mx-tit { margin: 18px 0 4px; font: 700 1.15rem var(--rotulo); }
.mx-cifras { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: #5b6475; }
.mx-cifras b { color: #1c2b4a; font-variant-numeric: tabular-nums; }
.mx-tabla td { vertical-align: top; }
.mx-tabla tr.mx-cnc td:first-child { border-left: 3px solid #b8902f; }
.mx-texto { font-family: var(--rotulo); }
.mx-tabla td:nth-child(3) { white-space: nowrap; }
.mx-inc { margin: 0; padding-left: 16px; font-size: .85rem; color: #7a5a12; }
.mx-prop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 3px; }
.mx-otro { display: flex; gap: 4px; margin-top: 4px; }
.mx-check { display: flex !important; align-items: center; gap: 6px; flex-direction: row; }
.mx-fila-control td { background: #f6f7fa; }
.mx-control { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; align-items: end; padding: 6px 2px; }
.mx-control label { display: grid; gap: 2px; font-size: .8rem; color: #5b6475; }
.mx-control .mx-ancho { grid-column: span 2; }
@media (max-width: 760px) { .mx-control { grid-template-columns: 1fr; } .mx-control .mx-ancho { grid-column: auto; } }

/* Siembra DABI (sección DABI v2, fase 2; public/siembra-dabi.js) */
.sd-lista { display: grid; gap: 4px; }
.sd-alias { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sd-alias .boton { padding: 1px 8px; font-size: .8rem; }
.sd-alertas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 320px; overflow: auto; font-size: .88rem; }
.sd-alto { max-height: 480px; overflow: auto; }

/* Seguimiento DABI, fase 4: estado calculado del expediente (public/expediente-dabi.js) y tablero #/dabi (public/tablero-dabi.js) */
.xd-et { font: 700 .72rem var(--rotulo); letter-spacing: .04em; text-transform: uppercase; color: #5b6475; margin-right: 4px; }
.xd-estado { display: grid; gap: 8px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 8px; background: #f4f6fa; border-left: 4px solid #1c2b4a; }
.xd-estado.xd-n-medio { border-left-color: #b8902f; background: #fbf7ec; }
.xd-estado.xd-n-alto { border-left-color: #b3261e; background: #fbecea; }
.xd-pelota b { font: 700 1.1rem var(--rotulo); color: #1c2b4a; }
.xd-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.xd-dims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.xd-dim { background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 6px 8px; font-size: .85rem; min-width: 0; }
.xd-dim .xd-et { display: block; }
.xd-dim-vacia { opacity: .55; }
.xd-relojes-ab, .xd-alertas { margin: 0; padding-left: 18px; font-size: .88rem; }
.xd-relojes-ab .xd-dias { font: 700 .8rem var(--rotulo); padding: 0 6px; border-radius: 999px; background: #e7ecf6; color: #1c2b4a; }
.xd-r-por_vencer .xd-dias { background: #fbf1dc; color: #8a5a00; }
.xd-r-vencido .xd-dias { background: #fbe4e1; color: #8e1b12; }
.xd-a-alto { color: #8e1b12; font-weight: 700; } .xd-a-medio { color: #8a5a00; } .xd-a-info { color: #5b6475; }
.xd-relojes { display: grid; gap: 4px; }
.xd-relojes > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
@media (max-width: 900px) { .xd-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dx-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.dx-cifra { display: grid; gap: 2px; text-align: left; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; cursor: pointer; }
.dx-cifra b { font: 700 1.6rem var(--rotulo); color: #1c2b4a; font-variant-numeric: tabular-nums; }
.dx-cifra span { font-size: .8rem; color: #5b6475; }
.dx-cifra.dx-alto b { color: #b3261e; } .dx-cifra.dx-medio b { color: #8a5a00; }
.dx-cifra.on { border-color: #1c2b4a; box-shadow: inset 0 -3px 0 #b8902f; }
.dx-dos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 12px; }
.dx-dos h3 { margin: 0 0 6px; font: 700 1rem var(--rotulo); }
.dx-barras, .dx-fases, .dx-venc { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.dx-barras button, .dx-fases button { width: 100%; display: grid; align-items: center; gap: 8px; border: 0; background: none; padding: 3px 4px; border-radius: 4px; cursor: pointer; text-align: left; font: inherit; }
.dx-barras button { grid-template-columns: minmax(0, 11rem) 1fr 2.2rem; }
.dx-fases button { grid-template-columns: 1fr 2.2rem; }
.dx-barras button:hover, .dx-fases button:hover { background: #f1f3f7; }
.dx-barras button.on, .dx-fases button.on { background: #e7ecf6; }
.dx-b-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.dx-b-barra { height: 10px; background: #eceef2; border-radius: 3px; overflow: hidden; }
.dx-b-barra i { display: block; height: 100%; background: #1c2b4a; }
.dx-b-barra i.dx-tpt { background: #0b6f7c; }
.dx-barras b, .dx-fases b { text-align: right; font-variant-numeric: tabular-nums; }
.dx-fases .dx-cero { color: #8a93a3; }
.dx-venc li { padding: 3px 0 3px 8px; border-left: 3px solid #d5dae3; font-size: .88rem; }
.dx-venc li.dx-r-por_vencer { border-left-color: #b8902f; } .dx-venc li.dx-r-vencido { border-left-color: #b3261e; }
.dx-tabla td { vertical-align: top; }
.dx-tabla tr.dx-n-alto td:first-child { box-shadow: inset 3px 0 0 #b3261e; }
.dx-tabla tr.dx-n-medio td:first-child { box-shadow: inset 3px 0 0 #b8902f; }
.dx-plazo { font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-plazo.dx-r-vencido { color: #b3261e; } .dx-plazo.dx-r-por_vencer { color: #8a5a00; }
.dx-tpt-t { color: #0b6f7c; }
.dx-al { display: inline-block; font: 700 .72rem var(--rotulo); padding: 1px 7px; border-radius: 999px; background: #eceef2; color: #5b6475; margin: 1px 0; }
.dx-al-alto { background: #fbe4e1; color: #8e1b12; } .dx-al-medio { background: #fbf1dc; color: #8a5a00; }
@media (max-width: 1000px) { .dx-dos { grid-template-columns: 1fr; } }
.xd-dim { border-top: 3px solid #1c2b4a; }
.xd-dim.xd-dim-judicial { border-top-color: #5b3b86; } .xd-dim.xd-dim-financiero { border-top-color: #2f7d45; }
.xd-dim.xd-dim-posesion { border-top-color: #c2410c; } .xd-dim.xd-dim-registral { border-top-color: #0b6f7c; }
.xd-form .xd-relojes > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.xd-form .xd-relojes label.px-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; font-size: .88rem; color: var(--tinta); }
.xd-form .xd-relojes .xd-et { min-width: 11rem; }
.xd-form .xd-relojes input[type="checkbox"] { width: auto; flex: none; }

/* Conciliación con el Registro (seguimiento DABI, fase 5) */
a.dx-cifra { text-decoration: none; color: inherit; }
.dx-sep { flex: 1 1 auto; }
.dx-pest { display: flex; gap: 4px; border-bottom: 2px solid var(--linea); margin: 10px 0 8px; }
.dx-pest a { padding: 6px 12px; text-decoration: none; color: #5b6475; border-bottom: 3px solid transparent; margin-bottom: -2px; font: 600 .95rem var(--rotulo); }
.dx-pest a.on { color: #1c2b4a; border-bottom-color: #b8902f; }
.rg-atender { display: flex; gap: 4px; } .rg-atender input { min-width: 12rem; }

/* Propuesta de conformación por titular (seguimiento DABI, fase 6) */
.pp-tarjeta { border: 1px solid var(--linea); border-left: 4px solid #b8902f; border-radius: 8px; padding: 10px 14px; margin: 10px 0; background: var(--papel); }
.pp-tarjeta.pp-coincide { border-left-color: #2f7d45; } .pp-tarjeta.pp-mezcla, .pp-tarjeta.pp-dividido { border-left-color: #b3261e; }
.pp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pp-cab h3 { margin: 0; font: 700 1.15rem var(--rotulo); }
.pp-cod { font: 700 .85rem var(--rotulo); color: #5b6475; font-variant-numeric: tabular-nums; }
.pp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 8px 20px; margin-top: 6px; }
.pp-que { margin: 6px 0 0; font-weight: 600; color: #1c2b4a; }
@media (max-width: 900px) { .pp-cuerpo { grid-template-columns: 1fr; } }

/* Productos DABI (seguimiento DABI, fase 7) */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pd-card { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px; background: var(--papel); display: grid; gap: 6px; align-content: start; min-width: 0; }
.pd-card > * { min-width: 0; }
.pd-card h4 { margin: 0; font: 700 1.02rem var(--rotulo); color: #1c2b4a; }
.pd-card p { margin: 0; }
.pd-ancha { margin-top: 10px; }
.pd-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pd-fila select { width: 100%; max-width: 100%; min-width: 0; }
.pd-acuerdo { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; margin: 6px 0 2px; }
.pd-minuta summary { cursor: pointer; }
@media (max-width: 900px) { .pd-acuerdo { grid-template-columns: 1fr; } }

/* Estado del ES para el DABI (063) */
.dx-es { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--linea); }
.dx-es h3 { margin: 0 0 4px; font: 700 1.15rem var(--rotulo); }
.dx-cifras-es { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Cola de DWG (src/cola-dwg.js): el aviso queda hasta «Entendido»; en el panel del mapa, lo que espera o falló. */
.aviso-cola { position: fixed; right: 18px; bottom: 18px; z-index: 2000; max-width: min(420px, calc(100vw - 36px)); background: var(--papel);
  color: var(--tinta); border: 1px solid var(--linea, #d5dbe3); border-left: 4px solid var(--ocre); border-radius: var(--r); padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); display: grid; gap: 6px; }
.aviso-cola p { margin: 0; overflow-wrap: anywhere; }
.aviso-cola p.mal { color: var(--rojo, #a8461f); }
.aviso-cola-acc { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.an-cola { display: grid; gap: 6px; margin: 8px 0; }
.an-cola-item { border: 1px dashed var(--linea, #d5dbe3); border-radius: var(--r); padding: 6px 8px; overflow-wrap: anywhere; }
.an-cola-item.mal { border-color: var(--rojo, #a8461f); }
.an-cola-item button { margin-top: 4px; }

/* Memos del pedido (066): recordatorios con su fecha (vencido en rojo, hoy en ocre) y observaciones; franja en la lista. */
.memos .memo-ops { margin: 10px 0 12px; flex-wrap: wrap; }
.memo-form { display: grid; gap: 8px; margin-bottom: 14px; border-left: 4px solid var(--ocre); }
.memo-tipo { display: flex; flex-wrap: wrap; gap: 14px; }
.memo-tipo label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.memo-txt { display: grid; gap: 4px; }
.memo-txt textarea { width: 100%; resize: vertical; }
.memo-form-pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.memo-fecha { display: inline-flex; gap: 6px; align-items: center; }
.memo-seccion { display: grid; gap: 8px; margin-top: 14px; }
.memo-seccion h3 { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.memo-card { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 14px; display: grid; gap: 6px; }
.memo-card.nuevo { border-color: var(--ocre); box-shadow: inset 3px 0 0 var(--ocre); }
.memo-card.vencido { box-shadow: inset 3px 0 0 var(--rojo); }
.memo-card.archivado { background: var(--papel-2); color: var(--suave); }
.memo-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.memo-nuevo { font: 700 12px var(--rotulo); color: var(--ocre); text-transform: uppercase; letter-spacing: .04em; }
.memo-texto { margin: 0; white-space: pre-wrap; }
.memo-pie { display: flex; gap: 6px; justify-content: flex-end; }
.memo-fecha-chip { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--azul-bg); color: var(--azul); font: 600 13px var(--rotulo); }
.memo-fecha-chip.vencido { background: var(--rojo-bg); color: var(--rojo); }
.memo-fecha-chip.hoy { background: var(--ambar-bg); color: var(--ambar); }
.memo-arch { margin: 12px 0 0; }
.memos-franja { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 2px; padding: 7px 12px; border-radius: var(--r); background: var(--papel-2); border-left: 4px solid var(--ocre); }
.memos-franja[hidden] { display: none; }
.memos-franja a { margin-left: auto; font-weight: 600; }

/* 2.7 Pronunciamiento técnico expreso (067): una tarjeta por pregunta; la respuesta que condiciona el proceso, en ámbar. */
.pron { display: grid; gap: 10px; margin: 14px 0; padding: 12px 14px; background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--via); border-radius: var(--r); }
.pron h3 { margin: 0; }
.pron-preg { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--linea-2); border-radius: var(--r); background: var(--papel-2); }
.pron-preg.condiciona { border-color: var(--ambar); background: var(--ambar-bg); }
.pron-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.pron-texto { margin: 0; }
.pron-ops { display: grid; gap: 3px; }
.pron-ops label, .pron-req label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.pron-ops input, .pron-req input { margin-top: 4px; }
.pron-ops label.pron-alerta { color: var(--ambar); }
.pron-req { display: grid; gap: 3px; padding-left: 22px; }
.pron-req[hidden] { display: none; }
.pron-fund { display: grid; gap: 3px; }
.pron-fund textarea { width: 100%; resize: vertical; }
.pron-pie { display: flex; justify-content: flex-end; }

/* Sección DABI v2, fase 3 (public/seccion-dabi.js): tablero con la estructura del reporte del DABI y ficha del expediente.
   Una paleta por fase del proceso: el trámite va del azul claro al azul vía (MOPT), adquirido verde, cerrado gris,
   devuelto a la UE ocre (TOPYTUR responde). */
:root { --f0: #e3e7ee; --f1: #b9c9dc; --f2: #8eabca; --f3: #5f86b0; --f4: #3a6491; --f5: #1c2b4a; --f6: #2f7a3d; --f7: #8a909b; --f8: #b8902f; }
.sx-f0 { background: var(--f0); color: #475467; } .sx-f1 { background: var(--f1); color: #1c2b4a; } .sx-f2 { background: var(--f2); color: #13203a; }
.sx-f3 { background: var(--f3); color: #fff; } .sx-f4 { background: var(--f4); color: #fff; } .sx-f5 { background: var(--f5); color: #fff; }
.sx-f6 { background: var(--f6); color: #fff; } .sx-f7 { background: var(--f7); color: #fff; } .sx-f8 { background: var(--f8); color: #1d1606; }
.sx-frase { font: 600 1.05rem/1.4 var(--rotulo); color: var(--via); margin: 2px 0 12px; max-width: 70ch; }
.sx-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--via); margin-bottom: 14px; }
.sx-tabs button { border: 0; border-radius: var(--r) var(--r) 0 0; background: var(--papel-2); font: 600 .9rem var(--rotulo); padding: 6px 12px; color: var(--gris); }
.sx-tabs button[aria-selected="true"] { background: var(--via); color: #fff; }
.sx-tramos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -8px 0 14px; }
.sx-tramos button { font: 500 .78rem var(--rotulo); padding: 1px 8px; border-radius: 99px; }
.sx-tramos button span { font-variant-numeric: tabular-nums; color: var(--gris); }
.sx-tramos button[aria-pressed="true"] { background: var(--ocre); border-color: var(--ocre); color: #1d1606; }
.sx-tramos button[aria-pressed="true"] span { color: inherit; }
.sx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1000px) { .sx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-kpi { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--linea); border-top: 3px solid var(--via); border-radius: var(--r); background: var(--papel); }
.sx-kpi:nth-child(2) { border-top-color: var(--f6); } .sx-kpi:nth-child(4) { border-top-color: var(--f7); } .sx-kpi:nth-child(5), .sx-kpi:nth-child(6) { border-top-color: var(--ocre); }
.sx-kpi.sx-clic { cursor: pointer; } .sx-kpi.sx-clic:hover, .sx-kpi.sx-clic:focus-visible { background: var(--papel-2); outline: 2px solid var(--accion); outline-offset: -2px; }
.sx-kt { font: 600 .78rem var(--rotulo); color: var(--gris); }
.sx-kpi b { font: 700 1.5rem/1.1 var(--rotulo); color: var(--via); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-kpi b.sx-largo { font-size: 1.15rem; line-height: 1.45rem; }
.sx-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-carta { border: 1px solid var(--linea); border-radius: var(--r); padding: 12px 14px; background: var(--papel); margin-bottom: 14px; min-width: 0; }
.sx-rejilla .sx-carta { margin-bottom: 0; } .sx-ancha { grid-column: 1 / -1; }
.sx-carta h3 { margin: 0 0 2px; font: 700 1.05rem var(--rotulo); color: var(--via); }
.sx-barras { display: grid; gap: 4px; margin-top: 8px; }
.sx-barra { display: grid; grid-template-columns: minmax(130px, 34%) 1fr auto; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 4px; text-align: left; border-radius: 4px; }
.sx-barra:hover, .sx-barra:focus-visible { background: var(--papel-2); }
.sx-bl { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-bb { display: block; height: 16px; background: var(--papel-2); border-radius: 3px; overflow: hidden; }
.sx-bb > i { display: block; height: 100%; }
.sx-bv { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .85rem; }
.sx-pila { display: flex; height: 16px; border-radius: 3px; overflow: hidden; width: 100%; }
.sx-pila > span { min-width: 2px; font: 600 .68rem/16px var(--rotulo); text-align: center; overflow: hidden; }
.sx-pila.sx-mini { height: 10px; }
.sx-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .75rem; color: var(--gris); }
.sx-leyenda i, .sx-pt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sx-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sx-tabla th { text-align: left; font: 600 .78rem var(--rotulo); color: var(--gris); border-bottom: 2px solid var(--linea); padding: 4px 6px; white-space: nowrap; }
.sx-tabla td { border-bottom: 1px solid var(--linea-2); padding: 4px 6px; vertical-align: top; }
.sx-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.sx-tabla-alta { max-height: 640px; overflow: auto; }
.sx-tabla-alta thead th { position: sticky; top: 0; background: var(--papel); }
.sx-matriz .sx-calor { background: rgba(28, 43, 74, var(--a)); }
.sx-matriz .sx-total td { font-weight: 700; border-top: 2px solid var(--via); }
.sx-vertical { vertical-align: bottom; height: 150px; }
.sx-vertical span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; }
.sx-est { display: inline-block; font: 600 .78rem/1.3 var(--rotulo); padding: 1px 7px; border-radius: 4px; }
.sx-est.sx-grande { font-size: 1rem; padding: 3px 10px; }
.sx-estados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sx-estado { display: grid; gap: 1px; min-width: 150px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); text-align: left; color: inherit; text-decoration: none; }
.sx-estado b { font: 700 1.25rem var(--rotulo); color: var(--via); }
.sx-estado.on { outline: 2px solid var(--accion); }
.sx-estado.sx-vacio { opacity: .5; }
.sx-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 6px 0 10px; }
.sx-filtros label { display: grid; gap: 2px; font-size: .78rem; color: var(--gris); }
.sx-filtros input[name="q"] { min-width: 260px; }
.sx-check { display: flex !important; align-items: center; gap: 6px; }
.sx-x { border: 0; background: transparent; padding: 0 4px; color: var(--rojo); font-weight: 700; }
.sx-aviso td { background: var(--ambar-bg); }
.sx-al { color: var(--ambar); font-size: .78rem; }
.sx-pie { margin-top: 18px; }
.sx-oficio { font-size: .78rem; white-space: nowrap; }
/* Ficha del expediente */
.sx-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: flex-start; margin: 4px 0 10px; }
.sx-cab h2 { margin: 0; font: 700 1.6rem var(--rotulo); color: var(--via); }
.sx-prop { margin: 2px 0 0; font-weight: 700; }
.sx-cab-est { display: grid; gap: 4px; justify-items: end; text-align: right; }
.sx-proceso { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; }
.sx-proceso span { display: flex; align-items: center; gap: 4px; font: 500 .75rem var(--rotulo); color: var(--gris); padding: 2px 8px; border: 1px solid var(--linea); border-radius: 99px; }
.sx-proceso span i { width: 8px; height: 8px; border-radius: 50%; }
.sx-proceso span.paso { color: var(--via); border-color: var(--f2); }
.sx-proceso span.on { color: var(--via); font-weight: 700; border: 2px solid var(--via); }
.sx-siguiente { padding: 8px 12px; border-left: 4px solid var(--accion); background: var(--azul-bg); border-radius: 0 var(--r) var(--r) 0; margin-bottom: 10px; }
.sx-siguiente.fin { border-left-color: var(--f6); background: var(--verde-bg); }
.sx-dueno { font: 600 .72rem var(--rotulo); color: var(--gris); margin-left: 6px; }
.sx-alertas { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.sx-alertas li { padding: 4px 8px; border-radius: var(--r); font-size: .88rem; }
.sx-n-alta { background: var(--rojo-bg); }
.sx-n-alta .chip { background: var(--rojo); color: #fff; }
.sx-n-media { background: var(--ambar-bg); }
.sx-n-media .chip { background: var(--ambar); color: #fff; }
.sx-n-baja { background: var(--papel-2); }
.sx-obs { padding: 6px 10px; background: var(--papel-2); border-radius: var(--r); font-size: .9rem; }
.sx-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.sx-bloque { border: 1px solid var(--linea); border-radius: var(--r); padding: 10px 14px; min-width: 0; }
.sx-b-dabi { border-top: 4px solid var(--via); }
.sx-b-tpt { border-top: 4px solid var(--ocre); }
.sx-bloque h3 { margin: 0 0 6px; font: 700 1.05rem var(--rotulo); }
.sx-bloque h4 { margin: 12px 0 4px; font: 700 .88rem var(--rotulo); color: var(--gris); }
.sx-lista { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: .88rem; }
.sx-cerrada { opacity: .6; }
.sx-fincas { display: grid; gap: 8px; }
.sx-finca { border: 1px solid var(--linea-2); border-left: 3px solid var(--ocre); border-radius: var(--r); padding: 6px 10px; font-size: .86rem; }
.sx-finca p { margin: 0 0 2px; }
.sx-fuente { display: inline-block; font: 600 .68rem var(--rotulo); padding: 0 5px; border-radius: 3px; background: var(--papel-2); color: var(--gris); border: 1px solid var(--linea-2); }
.sx-fu-dabi { color: var(--via); border-color: var(--f2); }
.sx-fu-topytur { color: #7a5a12; border-color: var(--ocre); }
.sx-form { margin: 6px 0; }
.sx-form summary { cursor: pointer; font-size: .85rem; color: var(--accion); }
.sx-form form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 8px 0; align-items: end; }
.sx-form label { display: grid; gap: 2px; font-size: .78rem; color: var(--gris); }
.sx-form .sx-ancho { grid-column: 1 / -1; }
.sx-cerrar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sx-cerrar input[name="motivo"] { flex: 1; min-width: 160px; }
.sx-linea { margin-top: 16px; }
.sx-linea h3 { font: 700 1.05rem var(--rotulo); margin: 0 0 6px; }
.sx-linea ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linea); display: grid; gap: 6px; }
.sx-linea li { display: grid; grid-template-columns: 86px 86px 1fr auto; gap: 8px; align-items: baseline; position: relative; font-size: .88rem; }
.sx-linea li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--papel); border: 2px solid var(--f3); }
.sx-linea .sx-lt-estado::before { background: var(--via); border-color: var(--via); }
.sx-lt-f { font-variant-numeric: tabular-nums; }
.sx-lt-t { font: 600 .78rem var(--rotulo); color: var(--gris); }
.dx-estado-dabi { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 760px) {
  .sx-rejilla, .sx-dos, .sx-form form { grid-template-columns: 1fr; }
  .sx-barra { grid-template-columns: 1fr auto; }
  .sx-barra .sx-bb { grid-column: 1 / -1; grid-row: 2; }
  .sx-linea li { grid-template-columns: 1fr auto; }
  .sx-lt-x { grid-column: 1 / -1; }
  .sx-cab-est { justify-items: start; text-align: left; }
}
/* Sección DABI v2, fase 4: quién escribe qué, abrir un expediente, ID en lectura */
.sx-quien { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--ocre); background: var(--papel-2); border-radius: 0 var(--r) var(--r) 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.sx-nuevo { margin: 0 0 12px; }
.sx-nuevo form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .sx-nuevo form { grid-template-columns: 1fr; } }
.sx-ficha > .sx-bloque { margin-top: 12px; }
.sx-pron { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .9rem; }

/* Devolver desde la bitácora (src/deshacer.js; solo el administrador) */
.bit-devolver { margin-top: 4px; font-size: .78rem; padding: 2px 8px; }
.bit-dev-campo { border: 0; background: transparent; color: var(--accion); font-weight: 700; padding: 0 4px; cursor: pointer; }
.bit-devuelto { margin-top: 3px; font-size: .75rem; color: var(--verde); }
tr.bit-deshacer td { background: var(--verde-bg); }
tr.bit-error td { background: var(--ambar-bg); }

/* Gestoría por cortes (2026-10-16): en manos de quién y días sin cambio */
.sx-quieto { color: var(--rojo); font-weight: 700; }
.sx-gestoria { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: var(--r); font-size: .9rem; }

.sx-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.sx-gestion-ue { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--linea); border-left: 4px solid var(--accion); border-radius: var(--r); }
.sx-gestion-ue h3 { margin: 0 0 6px; font: 700 1rem var(--rotulo); }
.sx-gestion-ue form { display: grid; gap: 6px; justify-items: start; }
.sx-gestion-ue textarea { width: 100%; }

/* 3.2 Acceso del remanente (migración 073) */
.rem-acceso { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--linea); border-left: 4px solid var(--ocre); border-radius: var(--r); background: var(--papel-2); }
.rem-acceso-tit { margin: 0; }
.rem-acceso-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }
.rem-acceso-campos label { min-width: 0; }
.rem-verif { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.rem-verif .per-et { width: 100%; }
.per-sec .rem-verif label.per-check { display: inline-flex; flex-direction: row; gap: 6px; align-items: center; font-size: 13.5px; color: var(--tinta); }

/* Auditoría por requisitos (2026-10-19): por apartado del ES, con fuentes y «observado por la UE» */
.au-filtros { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 10px; font-size: .85rem; }
.au-filtros label { display: inline-flex; gap: 6px; align-items: center; }
.au-aps { display: grid; gap: 12px; }
.au-ap-sec { background: #fff; border: 1px solid #e1e4ea; border-top: 4px solid var(--via); border-radius: 10px; padding: 8px 14px 10px; }
.au-ap-sec h4 { display: flex; justify-content: space-between; margin: 2px 0 6px; font-family: var(--rotulo); }
.au-ap { font: 600 .8rem var(--rotulo); color: #5b6475; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.au-p-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .78rem; }
.au-f { display: inline-block; padding: 1px 7px; border-radius: 4px; background: #eef1f5; color: #3d4556; font-size: .74rem; }
.au-f-ue { background: #f6e7c4; color: #6b4a00; font-weight: 700; }
.au-f-dabi { background: #e2eefb; color: #1c3f73; }
.au-p-ue { border-left: 3px solid var(--ocre); padding-left: 8px; }
.au-preg { font-size: .85rem; background: #f3f6fb; border-left: 3px solid #1c3f73; padding: 5px 9px; border-radius: 4px; }

/* Ficha del cantón para el análisis del remanente (2026-10-19) */
.nf { display: grid; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel-2); }
.nf h4 { margin: 0; }
.nf-b { background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; padding: 8px 10px; display: grid; gap: 4px; }
.nf-b h5 { margin: 0; font: 700 .95rem var(--rotulo); }
.nf-b p { margin: 0; }
.nf-rn summary { cursor: pointer; }

/* Oficios de la UE, matriz de cumplimiento y observaciones por caso (auditoría por requisitos, fases 2 y 4; 2026-10-20). */
.ue-est { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ue-pendiente { background: #fbe4e1; color: #8e1b12; } .ue-atendida { background: #dcefe2; color: #1f5c38; }
.ue-no_procede { background: #eceef2; color: #3d4556; } .ue-est.ue-anulada { background: #eceef2; color: #8a93a3; text-decoration: line-through; }
.ue-caja { background: #fff; border: 1px solid #e1e4ea; border-left: 5px solid #2f7d4f; border-radius: 10px; padding: 8px 14px 10px; margin: 0 0 14px; }
.ue-caja-pend { border-left-color: #b3261e; background: #fffaf9; }
.ue-caja h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.ue-obs { border-top: 1px solid #edf0f4; padding: 8px 0; display: grid; gap: 4px; }
.ue-obs.ue-anulada { opacity: .6; }
.ue-obs-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ue-obs-t { margin: 0; max-width: 95ch; }
.ue-reqs { display: flex; flex-wrap: wrap; gap: 4px; }
.ue-req { font-size: .75rem; background: #eef1f6; border-radius: 6px; padding: 1px 7px; color: #1c2b4a; }
.ue-req b { color: #8a5a00; }
.ue-alc { font-size: .78rem; font-weight: 700; color: #1c2b4a; } .ue-gen { color: #5b6475; }
.ue-hist ul, .ue-hist-l { margin: 4px 0; padding-left: 18px; font-size: .8rem; color: #3d4556; }
.ue-of { margin-top: 12px; } .ue-of h3 { margin: 2px 0 4px; }
.ue-nueva { margin-top: 8px; } .ue-nueva summary { cursor: pointer; color: #0b6f7c; font-weight: 600; }
.ue-fila { display: flex; flex-wrap: wrap; gap: 8px 12px; } .ue-fila label { flex: 1 1 12em; }
.ue-sel { display: grid; gap: 4px; }
.ue-sel-l { max-height: 260px; overflow-y: auto; border: 1px solid #e1e4ea; border-radius: 6px; padding: 4px 8px; background: #fff; }
.ue-sel-l fieldset { border: 0; padding: 2px 0; margin: 0; } .ue-sel-l legend { font-weight: 700; font-size: .8rem; color: #1c2b4a; padding: 4px 0 0; }
.ue-sel-l label { display: block; font-size: .82rem; color: #1d2330; padding: 1px 0; }
.ue section.tp-caja { margin-top: 12px; }
.ue .tp-tabla td.ue-celda-t, .ue-mat td { white-space: normal; vertical-align: top; }
.ue .tp-tabla td.ue-celda-t { min-width: 12em; max-width: 42ch; }
.ue-pid { border-top: 1px solid #edf0f4; padding: 6px 0; } .ue-pid summary { cursor: pointer; }
.ue-pid ul { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.ue-met-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.ue-met h4 { margin: 4px 0; }
.ue-met-g > div { min-width: 0; overflow-x: auto; }
.ue-met .tp-tabla td:first-child { white-space: normal; }

/* Excel básico del pedido en la barra de filtros de la lista (2026-10-21). */
.filtros .f-excel { margin-top: 0; align-self: center; white-space: nowrap; }

/* Ruta del expediente del DABI y reporte quincenal (2026-10-22): quién actúa, próximo paso, plazo y de quién es la finca. */
.sx-sit { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: #eceef2; color: #3d4556; }
.sx-sit-fuera { background: #fbe4e1; color: #8e1b12; } .sx-sit-sobre { background: #f4ead2; color: #7a5a12; } .sx-sit-ok { background: #dcefe2; color: #1f5c38; }
.sx-sit-na { background: #eef1f6; color: #5b6475; font-weight: 600; } .sx-sit-fin { background: #e7eaf0; color: #5b6475; }
.sx-ruta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 18px; background: #fff; border: 1px solid #e1e4ea; border-left: 5px solid #0b6f7c; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.sx-ruta.fin { border-left-color: #8a93a3; }
.sx-ruta > div { display: grid; gap: 3px; align-content: start; min-width: 0; }
.sx-ruta-quien b { font-size: 1.15rem; color: #1c2b4a; }
.sx-ruta-prox p { margin: 0; font-weight: 600; color: #1d2330; }
.sx-base { background: #f6f7f9; border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; font-size: .88rem; }
.sx-gestiones { margin: 10px 0; }
.sx-gestiones h3 { margin: 4px 0; }
.sx-q-cab { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; }
.sx-q-cab p { flex: 1 1 32em; margin: 0; }
.sx-q-filtro { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.sx-q-filtro button { border: 1px solid #d5dae3; background: #fff; border-radius: 999px; padding: 3px 10px; font-size: .82rem; cursor: pointer; }
.sx-q-filtro button[aria-pressed="true"] { background: #1c2b4a; color: #fff; border-color: #1c2b4a; }
.sx-q-filtro button span { font-weight: 700; margin-left: 4px; }
.sx-rojo { color: #8e1b12; }

/* Planos etapa 2 (077/078): resumen por estado, tabla, ficha y bitácora con anulaciones. */
.e2-res { display: flex; flex-wrap: wrap; gap: 8px; }
.e2-res .activo { border-color: var(--via); background: var(--papel-2); }
.e2-tabla td.r, .e2-tabla th.r { text-align: right; }
.e2-tabla .nw { white-space: nowrap; }
.e2-obs-a { color: var(--ambar); font-weight: 600; }
/* Planos etapa 1 (079): misma tabla que E2; avisos de la lectura de la capa encima de la tabla. */
.aviso-e1 { margin: 0 0 10px; color: var(--ambar); font-size: 13px; }
.aviso-e1.rojo { color: var(--rojo); }
.e2-res .ambar { color: var(--ambar); }
.e2-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.e2-datos > div { display: grid; gap: 2px; min-width: 0; }
.e2-datos-obs { grid-column: 1 / -1; }
.e2-fila { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.e2-bit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.e2-bit > li { padding: 6px 8px; border-left: 3px solid var(--ocre, #b8902f); background: var(--papel-2); border-radius: 4px; }
.e2-bit > li.e2-anulado { border-left-color: var(--linea); opacity: .75; }
.e2-bit > li.e2-anulado > div:first-child { text-decoration: line-through; }
.e2-anul-m { color: var(--rojo); font-size: .82rem; }
.e2-apt h4 { margin: 10px 0 4px; }
.e2-apt-l { margin-top: 8px; }
.e2-apt-l ul { margin: 4px 0; padding-left: 18px; font-size: .82rem; }
.e2-apt-no summary { color: var(--ambar); font-weight: 600; }
/* Planos E1, fase 2 (080): registrar por lote marcando los ID; los que no pueden pasar al movimiento elegido, atenuados. */
.e1-tabla .e1-marca { width: 2rem; text-align: center; }
.e1-tabla tr.e1-no { opacity: .5; }
.e1-nota input { width: 100%; margin-top: 4px; font-size: .85rem; }
.e1-lote .e1-ancho, #e1-mov .e1-ancho { flex: 1 1 100%; }
/* Campo Pericial (081): inspecciones de campo en la pestaña Pericial y su comparación con el estudio. */
.insp-lista table { width: 100%; }
.insp-dlg { width: min(980px, 96vw); max-height: 90vh; }
.insp-tabla { width: 100%; border-collapse: collapse; }
.insp-tabla td, .insp-tabla th { padding: 4px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; text-align: left; }
.insp-tabla tr.insp-distinto { background: #fbf3df; }
.insp-tabla tr.insp-igual td { color: var(--gris, #5b6475); }
.insp-op { display: inline-flex; gap: 3px; margin-right: 8px; white-space: nowrap; }
.insp-est { display: grid; gap: 6px; }
/* F3: fotos y notas de voz de la inspección en la revisión de la oficina. */
.insp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.insp-fotos figure { margin: 0; display: grid; gap: 4px; }
.insp-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 1px solid var(--linea); }
.insp-fotos figcaption { font-size: .85rem; }
.insp-voz { list-style: none; padding: 0; display: grid; gap: 8px; }
.insp-voz audio { width: 100%; max-width: 420px; display: block; }
.insp-acta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.chip-insp { display: inline-block; margin-top: 3px; font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: var(--ambar-bg); color: var(--ambar); border: 1px solid #efd29a; }