/* =============================================================================
   Selector de Trenes PTAR — sistema visual
   Tipografía: Archivo (anchos variables) · Paleta: agua tratada sobre papel técnico
   ============================================================================= */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations'), url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'), url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --papel: #F3F5F4;
  --superficie: #FFFFFF;
  --superficie-2: #F8FAF9;
  --tinta: #12262A;
  --tinta-2: #46595D;
  --tinta-3: #78898C;
  --linea: #D8E0DF;
  --linea-2: #E7ECEB;
  --agua: #0E5E68;
  --agua-oscuro: #0A464E;
  --agua-claro: #E0EDEE;
  --rail: #0C353B;
  --rail-tinta: #CFE1E2;

  --e-datos: #5B6B72;
  --e-pre: #2E6E9E;
  --e-pri: #B07A12;
  --e-sec: #3F7D3A;
  --e-ter: #1F8A8A;
  --e-fin: #0E3B43;

  --ok: #2D7A4C;   --ok-bg: #E6F2EA;
  --lim: #8E5C06;  --lim-bg: #FBF0D9;
  --err: #A9342A;  --err-bg: #F8E4E1;
  --info: #2C5D8A; --info-bg: #E6EEF6;
  --nd: #66716F;   --nd-bg: #EEF1F0;

  --r-1: 6px;
  --r-2: 10px;
  --sombra: 0 1px 2px rgba(18, 38, 42, .06), 0 8px 24px -12px rgba(18, 38, 42, .18);
  --fuente: 'Archivo', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --foco: 0 0 0 3px rgba(14, 94, 104, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 15px/1.55 var(--fuente); font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { font-stretch: 112%; line-height: 1.2; margin: 0 0 .5em; color: var(--tinta); }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 .8em; }
a { color: var(--agua); text-underline-offset: 2px; }
a:hover { color: var(--agua-oscuro); }
code { font: 500 .9em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--agua-claro); padding: .15em .35em; border-radius: 4px; }
small { font-size: .85em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--agua); color: #fff; padding: 8px 14px; border-radius: var(--r-1); z-index: 100; }
.saltar:focus { left: 8px; }
:focus-visible { outline: none; box-shadow: var(--foco); }
.icono { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------------------------------------------ Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: 600 14px/1 var(--fuente); padding: .72em 1.1em; border-radius: var(--r-1);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-primario { background: var(--agua); color: #fff; }
.boton-primario:hover:not(:disabled) { background: var(--agua-oscuro); color: #fff; }
.boton-sutil { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
.boton-sutil:hover { border-color: var(--agua); color: var(--agua); }
.boton-peligro { background: var(--superficie); color: var(--err); border-color: #E7C2BD; }
.boton-peligro:hover { background: var(--err-bg); }
.boton-chico { font-size: 13px; padding: .5em .75em; }
.boton-ancho { width: 100%; }
.boton-icono { background: transparent; border-color: transparent; color: var(--tinta-2); padding: .45em .65em; font-size: 18px; }
.boton-icono:hover { background: var(--linea-2); }

/* ------------------------------------------------------------------ Formularios */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; font-size: 13.5px; }
.campo > span:first-child { font-weight: 600; color: var(--tinta-2); }
input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], input:not([type]), select, textarea {
  font: 400 15px/1.3 var(--fuente); color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-1); padding: .62em .75em; width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--agua); box-shadow: var(--foco); }
input:disabled, select:disabled { background: var(--superficie-2); color: var(--tinta-3); }
input[aria-invalid=true] { border-color: var(--err); }
.casilla { display: inline-flex; gap: .5em; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.casilla input { margin-top: .25em; accent-color: var(--agua); width: 16px; height: 16px; }
.campo-password { position: relative; display: block; }
.campo-password input { padding-right: 76px; }
.ver-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--agua); font: 600 13px var(--fuente); cursor: pointer; padding: 6px 8px; border-radius: 4px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.nota-pequena { font-size: 13px; color: var(--tinta-3); margin: 0; }

/* ------------------------------------------------------------------ Avisos */
.aviso { border-radius: var(--r-1); padding: 12px 16px; font-size: 14px; margin: 0 0 16px; border-left: 4px solid; }
.aviso ul { margin: .4em 0 0; padding-left: 1.2em; }
.aviso-ok { background: var(--ok-bg); border-color: var(--ok); color: #1E5A37; }
.aviso-error { background: var(--err-bg); border-color: var(--err); color: #7E241C; }
.aviso-info { background: var(--info-bg); border-color: var(--info); color: #1F4467; }
.aviso-adv { background: var(--lim-bg); border-color: #C58A1B; color: #6B4605; }
.clave { font-size: 1.05em; padding: .2em .5em; user-select: all; }

/* ------------------------------------------------------------------ Tarjetas */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2); padding: 22px 24px; margin-bottom: 20px; }
.tarjeta > h2:first-child { margin-bottom: 14px; }
.tarjeta-angosta { max-width: 520px; }

/* ------------------------------------------------------------------ Marca */
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: 110%; text-decoration: none; color: inherit; font-size: 15px; line-height: 1.15; }
.marca-simbolo {
  width: 30px; height: 30px; border-radius: 7px; flex: none; position: relative;
  background: linear-gradient(180deg, #8FD3E0 0 46%, #0E5E68 46% 100%);
}
.marca-simbolo::before, .marca-simbolo::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: #fff; border-radius: 2px; opacity: .9; }
.marca-simbolo::before { top: 9px; }
.marca-simbolo::after { top: 19px; opacity: .55; }

/* ------------------------------------------------------------------ Shell */
.shell { background: linear-gradient(to right, var(--rail) 236px, transparent 236px); display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-tinta); display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; }
.rail .marca { color: #fff; padding: 4px 8px 22px; }
.rail-nav { display: grid; gap: 2px; }
.rail-nav a, .rail-usuario, .rail-salir {
  display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: var(--r-1);
  color: var(--rail-tinta); text-decoration: none; font-weight: 500; font-size: 14.5px;
}
.rail-nav a:hover, .rail-usuario:hover, .rail-salir:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rail-nav a.activo { background: rgba(143, 211, 224, .14); color: #fff; box-shadow: inset 3px 0 0 #8FD3E0; }
.rail-pie { margin-top: auto; display: grid; gap: 2px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; }
.rail-usuario b { display: block; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2; }
.rail-usuario small { color: #8EAAAD; font-size: 12px; }
.rail-usuario.activo { background: rgba(143, 211, 224, .14); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #8FD3E0; color: var(--rail); display: grid; place-items: center; font-weight: 700; flex: none; }
.rail-salir { background: none; border: 0; width: 100%; cursor: pointer; font: inherit; font-size: 14px; }
.rail-abrir { display: none; }
.contenido { padding: 28px 36px 60px; min-width: 0; }
.aviso-flash { max-width: 1100px; }

.cabecera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.cabecera-pagina h1 { margin-bottom: 4px; }
.subtitulo { color: var(--tinta-2); margin: 0; }
.creditos { color: var(--tinta-3); font-size: 12.5px; margin-top: 36px; max-width: 760px; }

/* ------------------------------------------------------------------ Dashboard */
.filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtros .campo-buscar { flex: 1 1 280px; max-width: 420px; }
.filtros select { width: auto; min-width: 220px; }
.segmentado { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--r-1); overflow: hidden; background: var(--superficie); }
.segmentado a { padding: .6em 1em; font-size: 14px; text-decoration: none; color: var(--tinta-2); font-weight: 500; }
.segmentado a.activo { background: var(--agua); color: #fff; }

.tabla-proyectos { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2); }
.tp-fila { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(220px, 1.6fr) minmax(130px, .9fr) auto; gap: 18px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--linea-2); }
.tp-fila:first-child { border-top: 0; }
.tp-cabecera { font-size: 12.5px; color: var(--tinta-3); font-weight: 600; padding-top: 11px; padding-bottom: 11px; background: var(--superficie-2); border-radius: var(--r-2) var(--r-2) 0 0; }
.tp-nombre a { font-weight: 650; font-size: 15.5px; text-decoration: none; color: var(--tinta); }
.tp-nombre a:hover { color: var(--agua); }
.tp-nombre small, .tp-avance small { display: block; color: var(--tinta-3); margin-top: 2px; }
.tp-fecha { font-size: 13.5px; color: var(--tinta-2); }
.tp-acciones { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

.mini-tren { display: flex; gap: 3px; align-items: center; }
.mini-tren i { display: block; height: 8px; flex: 1; max-width: 18px; border-radius: 2px; background: var(--linea-2); }
.mini-tren i.hecho.e-datos { background: var(--e-datos); }
.mini-tren i.hecho.e-pre { background: var(--e-pre); }
.mini-tren i.hecho.e-pri { background: var(--e-pri); }
.mini-tren i.hecho.e-sec { background: var(--e-sec); }
.mini-tren i.hecho.e-ter { background: var(--e-ter); }
.mini-tren i.hecho.e-fin { background: var(--e-fin); }

.menu-acciones { position: relative; }
.menu-acciones summary { list-style: none; }
.menu-acciones summary::-webkit-details-marker { display: none; }
.menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-1); box-shadow: var(--sombra); min-width: 210px; padding: 6px; display: grid; }
.menu-lista a, .menu-lista button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 5px; font: 500 14px var(--fuente); color: var(--tinta); text-decoration: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.menu-lista a:hover, .menu-lista button:hover { background: var(--agua-claro); }
.menu-lista .peligro { color: var(--err); }
.menu-lista .peligro:hover { background: var(--err-bg); }

.vacio { text-align: center; padding: 56px 24px; background: var(--superficie); border: 1px dashed var(--linea); border-radius: var(--r-2); }
.vacio svg { width: 140px; margin-bottom: 12px; fill: var(--agua-claro); stroke: var(--agua); stroke-width: 1.5; }
.vacio .vacio-tubo { stroke: #8FD3E0; stroke-width: 4; }
.vacio p { color: var(--tinta-2); max-width: 520px; margin: 0 auto; }

/* ------------------------------------------------------------------ Tablas simples */
.tabla-simple-envoltura { overflow-x: auto; }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-simple th { text-align: left; font-size: 12.5px; color: var(--tinta-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.tabla-simple td { padding: 10px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.tabla-simple tr.inactivo td { color: var(--tinta-3); }
.tabla-simple .num { text-align: right; }
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; padding: .2em .6em; border-radius: 999px; background: var(--linea-2); color: var(--tinta-2); }
.etiqueta-admin { background: var(--agua-claro); color: var(--agua-oscuro); }
.etiqueta-inactivo { background: var(--err-bg); color: var(--err); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }

/* ------------------------------------------------------------------ Login */
.pagina-login { background: var(--superficie); }
.login { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); min-height: 100vh; }
.login-arte { background: var(--rail); color: #DCEBEC; padding: 56px 56px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; overflow: hidden; }
.login-arte-texto { max-width: 560px; }
.login-kicker { color: #8FD3E0; font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.login-arte h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.1rem); font-stretch: 118%; font-weight: 750; letter-spacing: -.02em; margin-bottom: 18px; }
.login-arte p { font-size: 16.5px; color: #B9D2D4; max-width: 470px; }
.login-tren { width: 100%; max-width: 640px; }
.login-tren .estacion rect, .login-tren .estacion circle, .login-tren .estacion path { fill: none; stroke: #8FD3E0; stroke-width: 2; }
.login-tren .estacion rect, .login-tren .estacion > circle:first-child { fill: rgba(143, 211, 224, .06); }
.login-tren .etiquetas text { fill: #7FA3A6; font: 500 12px var(--fuente); text-anchor: middle; }
.login-formulario { padding: 56px clamp(28px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; }
.login-formulario .marca { margin-bottom: 44px; }
.login-formulario h2 { font-size: 1.6rem; margin-bottom: 20px; }
.login-pie { margin-top: 18px; }
.login-creditos { margin-top: 40px; font-size: 12px; }

/* ------------------------------------------------------------------ Instalador */
.pagina-instalador { background: var(--papel); }
.instalador { max-width: 820px; margin: 0 auto; padding: 40px 20px 60px; }
.instalador-cabecera { margin-bottom: 26px; }
.instalador-cabecera .marca { margin-bottom: 26px; }
.instalador form h2 { margin-top: 10px; }
.lista-requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-requisitos li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; font-size: 14.5px; }
.lista-requisitos small { display: block; color: var(--tinta-3); font-size: 12.5px; }
.lista-requisitos .indicador { width: 10px; height: 10px; border-radius: 50%; }
.lista-requisitos .cumple .indicador { background: var(--ok); }
.lista-requisitos .falla .indicador { background: var(--err); }
.lista-requisitos .falla b { color: var(--err); }

/* =============================================================================
   ESPACIO DE TRABAJO DEL PROYECTO
   ============================================================================= */
.pagina-proyecto .contenido { padding: 0; }
.espacio { min-height: 100vh; display: flex; flex-direction: column; }
.cargando { padding: 60px; color: var(--tinta-3); }

.ws-cabecera { background: var(--superficie); border-bottom: 1px solid var(--linea); padding: 16px 32px 0; position: sticky; top: 0; z-index: 10; }
.ws-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ws-volver { color: var(--tinta-3); display: inline-flex; padding: 6px; border-radius: var(--r-1); }
.ws-volver:hover { background: var(--linea-2); color: var(--tinta); }
.ws-titulo { flex: 1 1 260px; min-width: 0; }
.ws-titulo h1 { font-size: 1.3rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-titulo small { color: var(--tinta-3); font-size: 13px; }
.ws-guardado { font-size: 12.5px; color: var(--tinta-3); display: inline-flex; align-items: center; gap: 6px; }
.ws-guardado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ws-guardado.guardando::before { background: #C58A1B; }
.ws-guardado.error { color: var(--err); }
.ws-guardado.error::before { background: var(--err); }
.ws-informes { display: flex; gap: 6px; }
.ws-informes .boton { padding: .55em .8em; font-size: 13px; }

/* Tubería: los 14 bloques como estaciones de un tren */
.tuberia { display: flex; gap: 0; margin-top: 14px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.tub-etapa { flex: var(--n, 1) 1 0; min-width: calc(var(--n, 1) * 56px); position: relative; padding: 0 2px; }
.tub-etapa-nombre { font-size: 11.5px; font-weight: 650; font-stretch: 92%; color: var(--c); padding: 0 8px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tub-estaciones { display: flex; position: relative; }
.tub-estaciones::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 4px; background: var(--linea-2); }
.tub-estaciones.lleno::before { background: color-mix(in srgb, var(--c) 55%, white); }
.estacion-b {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 4px 9px 10px;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--tinta-3); flex: 1 1 0; min-width: 0;
  border-bottom: 3px solid transparent;
}
.estacion-b .nodo { width: 30px; height: 30px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linea); display: grid; place-items: center; font: 700 12.5px var(--fuente); color: var(--tinta-3); transition: background-color .2s, border-color .2s; }
.estacion-b .lbl { font-size: 11.5px; font-stretch: 88%; line-height: 1.15; max-width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estacion-b.hecho .nodo { background: var(--c); border-color: var(--c); color: #fff; }
.estacion-b.disponible .nodo { border-color: var(--c); color: var(--c); }
.estacion-b.actual { color: var(--tinta); border-bottom-color: var(--c); }
.estacion-b.actual .nodo { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.estacion-b.bloqueado { cursor: not-allowed; opacity: .55; }
.estacion-b:not(.bloqueado):hover .lbl { color: var(--tinta); }

.ws-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding: 26px 32px 60px; align-items: start; max-width: 1480px; width: 100%; }
.ws-principal { min-width: 0; }
.ws-lateral { position: sticky; top: 170px; display: grid; gap: 16px; }

.bloque-cabecera { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.bloque-num { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--c); color: #fff; display: grid; place-items: center; font: 750 19px var(--fuente); font-stretch: 112%; }
.bloque-cabecera h2 { font-size: 1.45rem; margin: 2px 0 2px; }
.bloque-cabecera p { margin: 0; color: var(--tinta-2); font-size: 14px; }
.bloque-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Registro de decisiones */
.registro { display: grid; gap: 10px; }
.reg { border-radius: var(--r-1); padding: 11px 15px; font-size: 14.2px; line-height: 1.5; border: 1px solid transparent; }
.reg ul { margin: .4em 0 0; padding-left: 1.2em; }
.reg small { color: inherit; opacity: .85; }
.reg-info { background: var(--info-bg); color: #24486B; }
.reg-calc { background: var(--superficie); border-color: var(--linea); color: var(--tinta); position: relative; padding-left: 40px; }
.reg-calc::before { content: '='; position: absolute; left: 13px; top: 9px; width: 18px; height: 18px; border-radius: 4px; background: var(--agua-claro); color: var(--agua); font: 700 13px/18px var(--fuente); text-align: center; }
.reg-adv { background: var(--lim-bg); color: #6B4605; }
.reg-crit { background: var(--err-bg); color: #7E241C; border-color: #EBC4BE; }
.reg-ok { background: var(--ok-bg); color: #1E5A37; border-left: 4px solid var(--ok); }
.reg-fin { background: var(--nd-bg); color: #4A5452; border-left: 4px solid #9AA6A4; }
.reg-torre { background: #E7EDF7; color: #263F66; border-left: 4px solid #4A6FA8; }
.reg-homog { background: #FCEBDD; color: #7A3E12; border-left: 4px solid #C8682A; }
.reg-param { background: var(--lim-bg); color: #6B4605; font-size: 13.5px; }
.reg-resumen { background: var(--agua-oscuro); color: #E3F0F1; padding: 15px 18px; }
.reg-resumen b { color: #fff; }
.reg-flujo { background: var(--agua-claro); color: var(--agua-oscuro); font-weight: 600; text-align: center; padding: 14px 18px; font-size: 13.5px; }
.reg-html { padding: 0; }

.reg-q { background: var(--superficie); border: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; }
.reg-q .q-texto { color: var(--tinta-2); }
.reg-q .q-fuente { grid-column: 1; font-size: 12.5px; color: var(--tinta-3); font-style: italic; }
.reg-q .q-resp { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; padding: .3em .75em; border-radius: 999px; background: var(--agua-claro); color: var(--agua-oscuro); max-width: 260px; text-align: right; }
.chip-auto { background: var(--superficie-2); color: var(--tinta-2); border: 1px dashed var(--linea); font-weight: 600; }
.cambiar { font: 500 12.5px var(--fuente); color: var(--agua); background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.cambiar:hover { text-decoration: underline; }

/* Pregunta pendiente */
.pendiente { background: var(--superficie); border: 2px solid var(--c, var(--agua)); border-radius: var(--r-2); padding: 20px 22px; box-shadow: var(--sombra); scroll-margin-top: 190px; }
.pendiente .p-etq { font-size: 12.5px; font-weight: 650; color: var(--c, var(--agua)); margin-bottom: 6px; }
.pendiente .p-texto { font-size: 16.5px; font-weight: 600; line-height: 1.45; margin-bottom: 6px; }
.pendiente .p-texto small { font-weight: 400; }
.pendiente .p-fuente { font-size: 13px; color: var(--tinta-3); font-style: italic; margin-bottom: 14px; }
.pendiente .p-ayuda { font-size: 13.5px; color: var(--tinta-2); background: var(--superficie-2); padding: 9px 12px; border-radius: var(--r-1); margin-bottom: 14px; }
.p-sino { display: flex; gap: 10px; flex-wrap: wrap; }
.p-sino .boton { min-width: 120px; font-size: 15px; }
.boton-si { background: var(--agua); color: #fff; }
.boton-si:hover { background: var(--agua-oscuro); color: #fff; }
.boton-no { background: var(--superficie); color: var(--tinta); border-color: var(--tinta-3); }
.boton-no:hover { border-color: var(--tinta); }
.p-opciones { display: grid; gap: 8px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-1); background: var(--superficie); font: 500 14.5px/1.4 var(--fuente); color: var(--tinta); cursor: pointer; transition: border-color .15s, background-color .15s; }
.opcion:hover { border-color: var(--agua); background: var(--agua-claro); }
.opcion .marca-op { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea); flex: none; margin-top: 1px; }
.opcion.check .marca-op { border-radius: 4px; }
.opcion[aria-checked=true] { border-color: var(--agua); background: var(--agua-claro); }
.opcion[aria-checked=true] .marca-op { border-color: var(--agua); background: var(--agua); box-shadow: inset 0 0 0 3px var(--agua-claro); }
.p-grupo { margin-top: 14px; }
.p-grupo h4 { font-size: 14.5px; margin: 0 0 8px; padding: 8px 12px; background: var(--info-bg); color: #24486B; border-radius: var(--r-1); }
.p-grupo .p-nota { font-size: 13px; background: var(--lim-bg); color: #6B4605; padding: 7px 12px; border-radius: var(--r-1); margin-bottom: 8px; }
.p-acciones { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.p-numero { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.p-numero .campo { width: 200px; }
.p-error { color: var(--err); font-size: 13.5px; }

.bloque-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.estado-bloque { font-size: 13.5px; color: var(--tinta-2); display: inline-flex; gap: 8px; align-items: center; }
.estado-bloque::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--linea); }
.estado-bloque.hecho::before { background: var(--ok); }

/* Tabla Res. 0631 */
.t0631 { width: 100%; border-collapse: collapse; font-size: 13.8px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-1); overflow: hidden; }
.t0631 th { text-align: left; background: var(--superficie-2); color: var(--tinta-3); font-size: 12px; font-weight: 650; padding: 9px 12px; border-bottom: 1px solid var(--linea); }
.t0631 td { padding: 9px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.t0631 tr.grupo td { background: var(--superficie-2); font-weight: 650; font-size: 12.5px; color: var(--tinta-2); padding: 7px 12px; }
.t0631 .valor { font-weight: 650; white-space: nowrap; }
.t0631-envoltura { overflow-x: auto; margin-top: 10px; }
.estado-pill { display: inline-block; font-weight: 650; font-size: 12.5px; padding: .2em .65em; border-radius: 999px; white-space: nowrap; }
.estado-pill.cumple { background: var(--ok-bg); color: var(--ok); }
.estado-pill.limite { background: var(--lim-bg); color: var(--lim); }
.estado-pill.nocumple { background: var(--err-bg); color: var(--err); }
.estado-pill.reporte { background: var(--info-bg); color: var(--info); }
.estado-pill.nodispo { background: var(--nd-bg); color: var(--nd); }
.t0631 .msg { display: block; color: var(--tinta-3); font-size: 12.5px; margin-top: 3px; }
.leyenda { font-size: 12.5px; color: var(--tinta-3); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.resumen-0631 { border-radius: var(--r-1); padding: 13px 16px; font-size: 14.5px; }
.resumen-0631.err { background: var(--err-bg); color: #7E241C; }
.resumen-0631.adv { background: var(--lim-bg); color: #6B4605; }
.resumen-0631.ok { background: var(--ok-bg); color: #1E5A37; }

/* Consolidaciones */
.secciones { display: grid; gap: 0; border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--superficie); overflow: hidden; }
.seccion-c { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 13px 16px; border-top: 1px solid var(--linea-2); }
.seccion-c:first-child { border-top: 0; }
.seccion-c .orden { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 12.5px var(--fuente); margin-top: 1px; }
.seccion-c .orden.vacio-o { background: var(--linea); color: var(--tinta-3); }
.seccion-c h4 { margin: 0; font-size: 14.5px; }
.seccion-c ul { margin: 0; padding-left: 1.1em; font-size: 14px; color: var(--tinta-2); }
.seccion-c .sin { font-size: 13.5px; color: var(--tinta-3); font-style: italic; }

/* Diagrama del tren (bloque 14) */
.diagrama { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2); padding: 20px; overflow-x: auto; }
.diag-fila { display: flex; align-items: stretch; gap: 0; min-width: max-content; }
.diag-extremo { display: grid; place-items: center; padding: 0 6px; }
.diag-extremo span { writing-mode: vertical-rl; transform: rotate(180deg); font: 650 12px var(--fuente); letter-spacing: .02em; color: var(--tinta-2); background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 999px; padding: 12px 6px; }
.diag-flecha { display: flex; align-items: center; padding: 0 4px; color: var(--tinta-3); }
.diag-flecha svg { width: 26px; height: 14px; }
.diag-etapa { border-radius: var(--r-2); padding: 10px; background: color-mix(in srgb, var(--c) 9%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); display: flex; flex-direction: column; gap: 6px; min-width: 190px; max-width: 240px; }
.diag-etapa h4 { margin: 0 0 2px; font-size: 12px; color: #fff; background: var(--c); border-radius: 5px; padding: 5px 9px; text-align: center; font-stretch: 108%; }
.diag-unidad { background: var(--superficie); border: 1.5px solid var(--c); border-radius: var(--r-1); padding: 7px 10px; font-size: 12.5px; line-height: 1.3; font-weight: 550; position: relative; }
.diag-unidad + .diag-unidad::before { content: ''; position: absolute; left: 50%; top: -8px; width: 1.5px; height: 6px; background: var(--c); }
.diag-unidad.sin { border-style: dashed; color: var(--tinta-3); font-style: italic; font-weight: 400; }
.cobertura { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--superficie); border: 1px solid var(--linea); }
.cobertura th { text-align: left; background: var(--agua-oscuro); color: #fff; font-weight: 600; padding: 9px 12px; font-size: 13px; }
.cobertura td { padding: 9px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.subtitulo-seccion { font-size: 1.05rem; margin: 22px 0 10px; }

/* Lateral */
.lat-tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2); padding: 16px 18px; }
.lat-tarjeta h3 { font-size: 14.5px; margin-bottom: 10px; }
.lat-datos { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 13.5px; margin: 0; }
.lat-datos dt { color: var(--tinta-3); }
.lat-datos dd { margin: 0; font-weight: 600; text-align: right; }
.tren-vivo { display: grid; gap: 10px; }
.tv-etapa { border-left: 3px solid var(--c); padding-left: 11px; }
.tv-etapa h4 { margin: 0 0 3px; font-size: 12.5px; color: var(--c); font-stretch: 106%; }
.tv-etapa ol { margin: 0; padding-left: 1.2em; font-size: 13px; color: var(--tinta-2); }
.tv-etapa ol li { margin: 1px 0; }
.tv-etapa .pend { font-size: 12.5px; color: var(--tinta-3); font-style: italic; }

/* Formulario del bloque 1 */
.f1-seccion { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-2); padding: 20px 22px; margin-bottom: 16px; }
.f1-seccion > h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.02rem; margin-bottom: 4px; }
.f1-seccion > h3 .n { color: var(--agua); font-weight: 750; }
.f1-seccion > p { font-size: 13.5px; color: var(--tinta-3); margin-bottom: 14px; }
.f1-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.f1-rejilla .ancho { grid-column: 1 / -1; }
.param-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.param { display: grid; gap: 5px; }
.param-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.param-cab b { color: var(--tinta-2); font-weight: 600; }
.param-cab label { font-size: 12.5px; color: var(--tinta-3); display: inline-flex; gap: 5px; align-items: center; cursor: pointer; white-space: nowrap; }
.param-cab label input { accent-color: var(--agua); }
.param-entrada { display: flex; align-items: stretch; }
.param-entrada input { border-radius: var(--r-1) 0 0 var(--r-1); }
.param-entrada .unidad { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--linea); border-left: 0; border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--superficie-2); color: var(--tinta-3); font-size: 13px; min-width: 56px; }
.param small { color: var(--tinta-3); font-size: 12px; line-height: 1.35; }
.param.nd input { background: var(--superficie-2); color: var(--tinta-3); }
.radio-lista { display: grid; gap: 6px; }
.radio-lista label { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r-1); cursor: pointer; }
.radio-lista label:has(input:checked) { border-color: var(--agua); background: var(--agua-claro); }
.radio-lista input { accent-color: var(--agua); margin-top: .2em; }
.f1-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--papel) 30%); padding: 18px 0 6px; }
.calculo-vivo { font-size: 13px; color: var(--tinta-2); background: var(--agua-claro); border-radius: var(--r-1); padding: 8px 12px; }

.toast { position: fixed; right: 20px; bottom: 20px; background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: var(--r-1); font-size: 14px; box-shadow: var(--sombra); z-index: 50; max-width: 360px; }
.toast.error { background: var(--err); }

/* ------------------------------------------------------------------ Responsivo */
@media (max-width: 1180px) {
  .ws-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ws-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .rail { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s; z-index: 40; }
  .rail.abierto { transform: none; box-shadow: var(--sombra); }
  .rail-abrir { display: inline-flex; position: fixed; left: 12px; top: 12px; z-index: 30; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-1); padding: 8px; color: var(--tinta); cursor: pointer; }
  .contenido { padding: 64px 16px 48px; }
  .pagina-proyecto .contenido { padding-top: 0; }
  .ws-cabecera { padding: 14px 16px 0 64px; position: static; }
  .ws-cuerpo { padding: 18px 16px 48px; }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-arte { padding: 36px 24px 28px; }
  .login-tren { display: none; }
  .tp-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .tp-cabecera { display: none; }
  .tp-avance { grid-column: 1 / -1; grid-row: 2; }
  .tp-fecha { display: none; }
  .param-lista, .f1-rejilla, .rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  .reg-q { grid-template-columns: minmax(0, 1fr); }
  .reg-q .q-resp { grid-column: 1; grid-row: auto; justify-items: start; }
  .bloque-cabecera { flex-wrap: wrap; }
  .bloque-acciones { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .rail, .rail-abrir, .ws-informes, .tuberia, .bloque-acciones, .cambiar, .bloque-pie { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}

.reg-ok .u-nombre { font-weight: 700; }
.reg-ok .u-det { font-weight: 400; }
.boton[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .f1-pie .nota-pequena { display: none; } .ws-informes { flex-wrap: wrap; } }