/* ────────────────────────────────────────────────────────────────────────────
   Lenguaje visual común de CIVIL QC 360.

   Papel claro y azul marino profundo, con el ámbar del logotipo como única
   señal de acento. El fondo es claro porque estas pantallas se usan a pleno sol
   en una obra: un tema oscuro sería ilegible al mediodía. La monoespaciada se
   reserva para lo que es dato —medidas, códigos, tiempos— y la sans para prosa,
   como en un plano técnico.

   Los nombres de las variables no cambian aunque sí sus valores: las diecisiete
   pantallas ya se apoyan en ellos, y renombrarlos habría obligado a repasar
   cada archivo a mano para no dejar ninguno con el color viejo.
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  --papel:#F7F4EF;         /* fondo de página */
  --ancho-barral:364px;    /* el menú lateral desplegado (29-sep-2026: la proporción de la maqueta, ningún rótulo partido) */
  --papel-alto:#FFFFFF;    /* tarjeta */
  --papel-hondo:#EFEAE1;   /* relleno de pista, fondo de campo apagado */
  --tinta:#16233A;         /* azul marino: títulos y acción principal */
  --tinta-media:#4A5A72;
  --tinta-suave:#8593A6;
  --linea:#E4DED3;
  --senal:#C8944B;         /* ámbar del logotipo: lo activo y lo que avisa */
  --senal-suave:#FBF1E2;
  /* El ámbar NO se puede escribir sobre el ámbar suave: da 2.1:1. Este es el
     mismo tono oscurecido hasta 5.4:1, y es el que hay que usar para texto sobre
     --senal-suave.

     Existía ya sin nombre, escrito a mano como «#8A6420» en 19 sitios repartidos
     por 12 pantallas —píldoras de estado, cifras de aviso, chapas de borrador—.
     Nadie decidió que fuera un token: se copió doce veces.

     Y con OTRO valor, «#8A6A00», en 6 sitios más de otras 6 pantallas. Esas seis
     se reconocen porque en todas el ámbar era el único literal de un conjunto
     donde el resto de estados sí usaban variable —`var(--nivel)` para lo
     conforme, `var(--oxido)` para lo no conforme y un hex suelto en medio—:
     quien las escribió quería una variable y no había ninguna lo bastante oscura
     para texto. Al unificarlas el tono se mueve un punto (el contraste sobre
     blanco sube de 5.07:1 a 5.35:1); lo que se gana es que seis pantallas dejen
     de decir lo mismo en dos ámbares.

     Y con un TERCER valor, «7A5A18» en hexadecimal, en 7 sitios más —incluidos
     dos de esta misma hoja—. Al unificar se toma ESE y no el anterior, porque es el que mejor
     lee sobre los dos fondos donde vive este color: 6.36:1 sobre el blanco de la
     tarjeta contra 5.35, y 5.69:1 sobre --senal-suave contra 4.79. El anterior
     aprobaba por poco margen; este aprueba con holgura, y ninguna de las 32
     apariciones va sobre fondo oscuro, así que oscurecerlo no rompe ninguna.
     El nombre en C# del mismo color lo decía ya: `SobreSenal`.

     Las 32 apuntan aquí. Si aparece otro hex de esta familia suelto, es que
     alguien volvió a copiarlo en vez de pedirlo. */
  --senal-texto:#7A5A18;

  /* Crítico NO es «no conforme más fuerte»: es otro escalón. --oxido dice que
     algo incumple; esto dice que además no puede esperar —una NCR crítica, un
     pendiente que bloquea la entrega—. Se separan porque una pantalla que pinta
     los dos niveles del mismo color deja de tener dos niveles.
     Y hay una razón dura además de la semántica: --oxido sobre este rojizo da
     4.25:1, por debajo del mínimo; este da 7.13:1. Estaba escrito a mano como
     «#8B1E1E» junto a su fondo «#F6DEDE» en tres pantallas. */
  --oxido-critico:#8B1E1E;
  --oxido-critico-suave:#F6DEDE;
  /* El marino un punto más claro, para el estado «el dedo está encima». Estaba
     escrito literal en button:hover y copiado en las pantallas que visten un
     enlace de botón —un <a> no lo alcanza la regla de `button`—. */
  --tinta-hover:#1E2E4A;
  --azul:#2F5D8C;          /* el dato medido: barras, curvas, anillos */
  --azul-suave:#E8F0F8;
  --nivel:#2E7D4F;         /* conforme */
  --nivel-suave:#E6F1EA;
  --oxido:#C0392B;         /* no conforme */
  --oxido-suave:#FBE9E7;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:12px;
  --radio-chico:9px;
  --sombra:0 1px 2px rgba(22,35,58,.05), 0 4px 14px rgba(22,35,58,.06);
  /* Ancho del contenido. En escritorio sube a 1835 porque la suite va al 85 % (ver `zoom`
     más abajo): 1835 × 0,85 = 1560 px en pantalla, el mismo ancho que antes de escalar. */
  --ancho:1560px;
  /* Una centésima del alto de la ventana. Con `zoom`, Chromium multiplica también las
     unidades de ventana (medido: con zoom .5, `100vh` ocupa media ventana), así que en
     escritorio se divide por el factor para que 100 × --vh siga llenando la pantalla. */
  --zoom:1;
  --vh:calc(1dvh / var(--zoom));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
/* Retícula de plano, apenas insinuada. Da fondo de taller sin competir con el
   dato: al 12 % se percibe como textura, no como cuadrícula que hay que leer. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:40px 40px;opacity:.45;
}
/* Un solo ancho de contenido para toda la suite (22-sep-2026). Con 1240 px, en una pantalla de
   1920 al 100 % quedaba un tercio vacío y cada pantalla que lo ampliaba elegía el suyo
   (1440, 1560): la misma información se veía con tres anchos distintos. */
main{position:relative;z-index:1;max-width:var(--ancho);margin:0 auto;padding:0 20px 190px}

/* Cabecera de pantalla: el título manda y las acciones se van al margen
   derecho, donde se buscan. El filete ámbar bajo el título es el único adorno
   y viene del logotipo. */
header{
  position:relative;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0 16px;margin-bottom:18px;
}
/* Filete ámbar bajo el título, tomado del logotipo. Se ancla al borde inferior
   de la cabecera y no a una distancia contada desde arriba: el título ocupa una
   o dos líneas según el ancho, y un margen fijo lo dejaría suelto en medio. */
header::after{
  content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;
  background:var(--senal);border-radius:2px;
}
/* Logotipo: el símbolo, y al lado el nombre en dos líneas como en la marca.
   La palabra CIVIL manda y QC 360 la matiza; apiladas ocupan lo que ocupaba el
   texto de antes, así que la cabecera no crece por llevar marca. */
.marca{display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--tinta)}
.marca img{display:block;flex:none}
.marca-texto{display:flex;flex-direction:column;line-height:1;font-family:var(--sans)}
.marca-texto b{font-size:15px;font-weight:700;letter-spacing:.10em}
.marca-texto i{font-size:10.5px;font-style:normal;font-weight:600;letter-spacing:.18em;
  color:var(--tinta-media);margin-top:2px}
h1{font-size:clamp(24px,4.4vw,31px);margin:0;font-weight:680;letter-spacing:-.022em;line-height:1.12}
.sub{font-size:13px;color:var(--tinta-media);margin-left:auto;text-align:right}
.sub a{color:var(--tinta);font-weight:600}

/* ── Pasos ───────────────────────────────────────────────────────────────────
   Se numeran porque aquí el orden ES información: no se puede medir sin haber
   elegido el elemento, ni juzgar sin haber medido. El paso hecho lleva un visto
   y no su número: el número dice dónde estás, el visto dice qué ya no tienes que
   volver a mirar. */
.cotas{display:flex;align-items:flex-start;margin:0 0 24px;gap:0}
/* Aquí no hay nada que arreglar, y conviene dejarlo escrito: una medición de «¿algo se sale
   de su caja?» marca esta regla con +37 px en un teléfono, y son los de `::before` —la línea
   que une un paso con el siguiente, que se cuelga fuera a propósito (ver debajo)—. La fila
   `.cotas` mide 344 en 344 y la página no se desplaza. Se revisó el 24-sep-2026 y se dejó
   como estaba. */
.cota{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:2px 4px 0;font-size:13px;color:var(--tinta-suave);text-align:center}

/* La línea une un círculo con el siguiente y se corta en el último. Va detrás de
   los círculos, no entre ellos, para que no dependa del ancho de la etiqueta. */
.cota::before{content:"";position:absolute;top:15px;left:calc(50% + 20px);right:calc(-50% + 20px);
  height:2px;background:var(--linea)}
.cota:last-child::before{display:none}

.cota-n{display:grid;place-items:center;width:31px;height:31px;border-radius:99px;
  background:var(--papel-alto);border:2px solid var(--linea);
  font-size:13px;font-weight:700;color:var(--tinta-suave);position:relative;z-index:1}

.cota.activa{color:var(--tinta);font-weight:650}
.cota.activa .cota-n{background:var(--tinta);border-color:var(--tinta);color:#fff}

.cota.hecha{color:var(--nivel)}
.cota.hecha .cota-n{background:var(--nivel);border-color:var(--nivel);color:#fff;font-size:0}
.cota.hecha .cota-n::after{content:"✓";font-size:15px;line-height:1}
.cota.hecha::before{background:var(--nivel)}

/* ── Pestañas dentro de una pantalla ────────────────────────────────────────
   Separan vistas del MISMO asunto —CAPA y punch list, roles y personas—, no
   destinos distintos. Por eso son planas y con el subrayado ámbar del resto del
   sistema, y no llevan icono: el icono ya lo puso la navegación de arriba.

   Vivían copiadas en cinco pantallas, cada una con su matiz. Además se llamaban
   igual que las de la navegación, así que se pisaban entre ellas: la tira de
   arriba salía en versales monoespaciadas y estas, en columna. Definidas aquí
   una sola vez, eso no puede volver a pasar. */
/* Envuelven en varias filas, no se deslizan. Antes era un carrusel: las que no cabían se
   quedaban fuera y la del borde salía partida por la mitad —«Contratistas y p»—, que es
   peor que no verla, porque parece un fallo de pintado. Medido en Catálogos generales:
   1922 px de pestañas en 1137 de ancho, cuatro cortadas a la vez.
   Ninguna barra de esta aplicación enseña media palabra: si no caben en una fila, bajan a
   la siguiente. Las flechas de deslizar se quedan quietas solas —solo aparecen cuando hay
   desbordamiento, y con wrap ya no lo hay—, así que no hay que retirarlas a mano. */
.pestanas{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:18px;
  border-bottom:1px solid var(--linea)}
/* 44 px de alto mínimo: es el objetivo táctil de WCAG 2.2 AA y lo que decide si
   una pestaña se acierta con guante. Medía 42 —11 de relleno arriba y abajo más
   la línea— y por dos píxeles no cumplía. El alto se fija con min-height y no
   subiendo el relleno para que el texto no se despegue del subrayado. */
.pestana{white-space:nowrap;flex:none;padding:11px 15px;min-height:44px;
  display:inline-flex;align-items:center;font-size:14px;font-weight:600;
  color:var(--tinta-suave);cursor:pointer;user-select:none;background:none;border:0;
  border-bottom:3px solid transparent;margin-bottom:-1px;border-radius:9px 9px 0 0}
.pestana:hover{color:var(--tinta-media);background:var(--papel-hondo)}

/* La puesta se rellena, no solo se subraya.
   Antes se distinguía por dos señales flojas: el subrayado dorado y un texto un
   punto más oscuro que el de al lado. En una tira de nueve pestañas eso obliga a
   comparar tonos para saber dónde se está. Con el relleno se ve de un vistazo, y
   el texto pasa a papel para que el contraste sea de 14:1 en vez de depender de
   la diferencia entre dos grises. */
.pestana.puesta{color:var(--papel);font-weight:650;background:var(--tinta);
  border-bottom-color:var(--senal)}
.pestana.puesta:hover{color:var(--papel);background:var(--tinta)}
.pestana.puesta svg{fill:var(--papel)}

/* El foco se marca en dorado y por fuera. En tinta y con desplazamiento negativo
   dibujaba un recuadro del MISMO color que la letra sobre la pestaña puesta: el
   texto se perdía dentro de su propio indicador de foco. */
.pestana:focus-visible{outline:2px solid var(--senal);outline-offset:2px}

/* Tarjeta: blanca sobre el crema, con sombra corta. La elevación separa el dato
   del fondo sin necesidad de recuadrarlo con líneas gruesas. */
.bloque{background:var(--papel-alto);border:1px solid var(--linea);border-radius:var(--radio);
  padding:20px;margin-bottom:18px;box-shadow:var(--sombra)}
.bloque h2{font-size:15px;letter-spacing:-.01em;
  margin:0 0 14px;color:var(--tinta);font-weight:650;display:flex;align-items:center;gap:10px}
.bloque h2::after{content:"";flex:1;height:1px;background:var(--linea)}

label{display:block;font-size:13px;font-weight:600;
  color:var(--tinta-media);margin:0 0 6px}
/* `max-width` y `min-width` no sobran junto a `width:100%`: hay controles que piden su
   propio ancho y lo imponen. El de fecha de Safari en iOS es uno —dibuja el control del
   sistema y pide unos 230 px—, y en una rejilla de dos columnas de un teléfono eso empujaba
   la columna por encima de la pantalla: el buscador de «Partes diarios» salía con «Desde»
   cortado por el borde derecho y «Hasta» pintado por debajo de «Estado». No se reproduce con
   el navegador de escritorio, que dibuja la fecha como una caja de texto normal y encoge sin
   quejarse; se reproduce dándole al campo el ancho que pide en el teléfono. */
input,select,textarea{width:100%;max-width:100%;min-width:0;
  padding:12px 13px;font-family:var(--sans);font-size:16px;
  background:#fff;color:var(--tinta);border:1px solid var(--linea);border-radius:var(--radio-chico)}
textarea{font-size:15px;line-height:1.65;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}

/* ── Los controles los dibuja la suite, no el sistema operativo ───────────────
   Estas reglas ya daban a input, select y textarea el mismo relleno, tipografía
   y borde, pero sin `appearance` el MARCO lo ponía la hoja y el INTERIOR lo
   ponía Windows o el navegador: la flecha del desplegable, el icono de
   calendario y el triangulito del plegable venían con su propio gris, su propio
   radio y su propio tamaño. Al lado de un botón cuidado, ese control parece de
   otra aplicación — y hay 110 desplegables, 17 fechas y 7 plegables repartidos
   por 25 pantallas, así que la disparidad se ve en casi toda la suite.

   No se introduce ningún color: la flecha y el calendario van en #4A5A72, que
   es `--tinta-media` escrito a mano porque una imagen `data:` no puede leer una
   variable CSS. Si esa variable cambia, hay que cambiarlos aquí también. */

select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  /* Sitio para la flecha, para que un texto largo no se le meta debajo. */
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234A5A72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  cursor:pointer;
}

/* El desplegable deshabilitado no debe invitar a pulsarlo ni fingir que se abre. */
select:disabled{cursor:not-allowed;opacity:.62;background-image:none}

/* El icono de calendario de Chrome se sustituye por uno del mismo trazo que la
   flecha. Se estira sobre el hueco reservado para que TODO ese lado sea zona de
   pulsación, no solo los 14 px del dibujo nativo. */
input[type="date"],input[type="time"],input[type="datetime-local"]{padding-right:38px}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  width:16px;height:16px;margin:0;padding:0;cursor:pointer;opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.4' y='2.8' width='13.2' height='11.8' rx='1.8' fill='none' stroke='%234A5A72' stroke-width='1.5'/%3E%3Cpath d='M1.4 6.4h13.2M5 1.4v2.6M11 1.4v2.6' fill='none' stroke='%234A5A72' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:16px 16px;
}

/* Firefox no expone ese pseudo-elemento; al menos que la fecha no se salga del
   alto común por culpa de su propio relleno interno. */
@supports (-moz-appearance:none){
  input[type="date"],input[type="time"],input[type="datetime-local"]{padding-right:13px}
}

/* Safari de iPhone (30-sep-2026, capturas del dueño): dibuja la fecha con SU ancho —no atiende
   al min-width:0 de arriba— y más alta que los desplegables, y en «Partes diarios» la fecha
   «Hasta» se salía de la tarjeta. Se hace lo mismo que con el desplegable: la dibuja la suite,
   con su calendario del mismo trazo, y el selector de fecha del sistema se sigue abriendo al
   tocarla. Acotado a iOS: en el escritorio la fecha ya estaba bien y no se toca. */
@supports (-webkit-touch-callout:none){
  input[type="date"],input[type="time"],input[type="datetime-local"]{
    -webkit-appearance:none;appearance:none;display:block;min-height:calc(1.2em + 26px);
    line-height:1.2;text-align:left;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.4' y='2.8' width='13.2' height='11.8' rx='1.8' fill='none' stroke='%234A5A72' stroke-width='1.5'/%3E%3Cpath d='M1.4 6.4h13.2M5 1.4v2.6M11 1.4v2.6' fill='none' stroke='%234A5A72' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}
  input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.2em}
}

/* Un enlace que hace de botón secundario (30-sep-2026, «Escribir el parte de hoy»): la misma
   cara que button.suave. Clase nueva a propósito —no existía en ninguna pantalla—, para no
   heredar nada de otra. */
a.boton-enlace{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 20px;border-radius:var(--radio-chico);border:1px solid var(--linea);background:#fff;
  color:var(--tinta);font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none}
a.boton-enlace:hover{background:var(--papel);border-color:var(--tinta-suave);text-decoration:none}
a.boton-enlace:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* El plegable: fuera el triángulo del sistema, dentro una punta que gira. El
   `list-style` cubre Firefox y el pseudo-elemento `-webkit-details-marker`,
   Safari; hacen falta los dos. */
details > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
}
details > summary::-webkit-details-marker{display:none}
details > summary::before{
  content:"";width:9px;height:9px;flex:none;
  border-right:1.8px solid var(--tinta-media);
  border-bottom:1.8px solid var(--tinta-media);
  transform:rotate(-45deg);
  transition:transform .16s ease;
}
details[open] > summary::before{transform:rotate(45deg)}

/* Quien pide menos movimiento no recibe el giro, solo el estado final. */
@media (prefers-reduced-motion:reduce){
  details > summary::before{transition:none}
}
/* `min-width:0` porque un campo casi siempre vive dentro de una rejilla o de una fila, y ahí
   el mínimo de una casilla es, por defecto, lo que pida su contenido: basta un control que
   pida más que su columna para que la columna crezca, se salga de la pantalla y arrastre a
   la de al lado. Quien necesite un ancho mínimo de verdad lo declara en su pantalla. */
.campo{margin-bottom:15px;min-width:0}
.fila{display:flex;gap:10px;flex-wrap:wrap}

button{font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;
  padding:12px 20px;border-radius:var(--radio-chico);border:1px solid var(--tinta);
  background:var(--tinta);color:#fff;transition:transform .08s ease,background .12s ease}
button:hover{background:var(--tinta-hover)}
button:active{transform:translateY(1px)}
button.suave{background:#fff;color:var(--tinta);border-color:var(--linea)}
button.suave:hover{background:var(--papel);border-color:var(--tinta-suave)}
button.nivel{background:var(--nivel);border-color:var(--nivel);color:#fff}
button.nivel:hover{background:#276B44}
button.oxido{background:#fff;border-color:var(--oxido);color:var(--oxido)}
button.oxido:hover{background:var(--oxido-suave)}
button:disabled{opacity:.42;cursor:not-allowed}
/* Deshabilitado no reacciona al puntero: conserva SU propio fondo. La regla decía
   `var(--tinta)` a secas —el fondo del botón por defecto—, así que apuntar a un `.suave`
   o un `.oxido` apagados los ponía azul tinta, que es lo contrario de «está gris». Medido
   con la hoja real el 21-sep-2026: rgb(22,35,58) al 42%. Se notó al apagar «Registrar
   elemento nuevo» para quien no administra elementos; afecta a toda variante apagada. */
button:disabled:hover{background:var(--tinta)}
button.suave:disabled:hover,
button.oxido:disabled:hover{background:#fff}
button.nivel:disabled:hover{background:var(--nivel)}

/* La barra de acciones se apoya SOBRE la navegación inferior, no debajo: si ocupara
   el mismo sitio, el botón de guardar quedaría tapado por los destinos justo al
   terminar de rellenar la ficha. --nav-alto lo declara la propia navegación. */
.barra{position:fixed;left:0;right:0;bottom:var(--nav-alto,0px);z-index:20;background:var(--papel-alto);
  border-top:2px solid var(--tinta);padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.barra-inner{max-width:calc(var(--ancho) - 40px);margin:0 auto;display:flex;align-items:center;gap:14px}

/* ────────────────────────────────────────────────────────────────────────────
   Navegación: la misma que la app de campo, pieza por pieza.

   Arriba, una tira de pestañas con el icono encima y la etiqueta debajo, con un
   subrayado grueso bajo la activa. Abajo, los destinos. Es la misma geometría
   que TiraSuperior/BarraInferior en el teléfono, con los MISMOS trazados de
   icono, para que quien pasa del móvil al portátil no tenga que reaprender
   dónde está: cambia la pantalla, no la aplicación.

   El subrayado es lo que hace legible la selección a pleno sol. Teñir el texto
   de otro color obliga a comparar dos grises; una barra de 3 px se ve de reojo.
   Por eso la activa además engorda la letra: el contraste de FORMA sobrevive al
   reflejo, el de color no siempre. Los colores son los de la solución —papel,
   tinta y señal—, sin excepción.
   ──────────────────────────────────────────────────────────────────────────── */
/* Barra de marca: el logotipo y quién está dentro. Va por encima de la cinta de
   navegación y se queda fija: en una tabla larga de inspecciones, perder de
   vista en qué obra se está mirando es la forma más fácil de leer mal un dato. */
.barra-marca{position:relative;z-index:6;background:var(--tinta);border-bottom:0}
.barra-marca-inner{max-width:var(--ancho);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:20px;min-height:58px}
.barra-marca .marca{flex:none}

/* El logotipo va en blanco sobre el marino. El simbolo se aclara con un filtro
   en vez de servir un segundo archivo: son dos ficheros que se separan en cuanto
   alguien retoque uno, y la marca acabaria siendo distinta segun el fondo. */
.barra-marca .marca img{filter:brightness(0) invert(1)}
.barra-marca .marca-texto b{color:#fff}
.barra-marca .marca-texto i{color:rgba(255,255,255,.62)}

/* Los destinos, dentro de la misma franja. Antes eran una fila aparte debajo:
   tres barras apiladas dejaban el contenido empezando a un tercio de la altura. */
.barra-marca .destinos{display:none}
@media (min-width:900px){
  .barra-marca .destinos{display:flex;gap:2px;margin-left:8px;align-self:stretch;
    /* Las siete secciones se desplazan DENTRO de su barra, nunca arrastrando la página.
       Al pasar de «Ejecutar» y «Corregir» a «Trabajo en obra» y «No conformidades», la
       fila creció de 700 a 1123 px y empezó a empujar el ancho del documento: aparecía
       una barra horizontal abajo y el contenido se desplazaba en bloque al tocarla. El
       nombre largo es el que se pidió y es el que se entiende; lo que se corrige es
       dónde se absorbe el exceso. */
    min-width:0;overflow-x:auto;scrollbar-width:none}
  .barra-marca .destinos::-webkit-scrollbar{display:none}
  .barra-marca .destino{flex:none}
}
/* Todo lo de la cuenta cuelga del icono de perfil. El nombre y «Salir» sueltos en la
   barra ocupaban el sitio donde va lo de la obra, y en un teléfono empujaban el
   logotipo fuera de la pantalla. */
.barra-marca .perfil{margin-left:auto;position:relative}


.avatar{width:32px;height:32px;border-radius:99px;background:var(--tinta);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
button.avatar{border:0;cursor:pointer;padding:0;font-family:inherit;
  box-shadow:0 0 0 0 var(--senal);transition:box-shadow .12s ease}
button.avatar:hover,button.avatar[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(200,148,75,.45)}
/* Sobre el marino de la barra, un avatar marino desaparece. */
.barra-marca button.avatar{background:var(--senal);color:var(--tinta)}
button.avatar:focus-visible{outline:2px solid var(--senal);outline-offset:2px}
.avatar.grande{width:40px;height:40px;font-size:15px}

.menu-perfil{position:absolute;top:calc(100% + 9px);right:0;z-index:20;
  min-width:246px;background:var(--papel-alto);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:0 10px 30px rgba(22,35,58,.16);
  padding:7px;display:flex;flex-direction:column}
.menu-perfil[hidden]{display:none}

.menu-perfil .quien-es{display:flex;align-items:center;gap:11px;padding:9px 10px 12px;
  border-bottom:1px solid var(--linea);margin-bottom:6px}
.menu-perfil .quien-es b{display:block;font-size:14px;color:var(--tinta);font-weight:650;
  line-height:1.35}
.menu-perfil .quien-es i{display:block;font-style:normal;font-size:12.5px;
  color:var(--tinta-suave);line-height:1.4;word-break:break-word}

.menu-perfil a,.menu-perfil button{display:block;width:100%;text-align:left;
  padding:9px 10px;border:0;background:none;border-radius:7px;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--tinta-media);text-decoration:none}
.menu-perfil a:hover,.menu-perfil button:hover,
.menu-perfil a:focus-visible,.menu-perfil button:focus-visible{
  background:var(--papel-hondo);color:var(--tinta);outline:none}

/* Salir va separado y en color de aviso: es lo único del menú que no se deshace. */
/* Un rótulo de grupo dentro del menú de la cuenta (Ayuda): no se pulsa. */
.menu-perfil .menu-perfil-grupo{margin:6px 0 0;padding:8px 10px 2px;border-top:1px solid var(--linea);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-media)}
.menu-perfil .salir{margin-top:5px;border-top:1px solid var(--linea);border-radius:0 0 7px 7px;
  padding-top:11px;color:var(--oxido);font-weight:600}
.menu-perfil .salir:hover,.menu-perfil .salir:focus-visible{background:var(--oxido-suave);
  color:var(--oxido)}

@media (max-width:640px){
  .menu-perfil{min-width:min(84vw,270px)}
}

/* ── Los cuatro estados de un bloque con datos ─────────────────────────────
   Cargando, vacío, sin permiso y roto. Ver pintarCargando/pintarError en
   sesion.js: los estilos van aquí para que las veintitrés pantallas los tengan
   sin repetirlos, que es como empezaron a divergir. */

/* Texto que solo existe para quien usa lector de pantalla. No se puede usar
   display:none ni visibility:hidden: eso lo retira también del árbol de
   accesibilidad, que es justo a quien va dirigido. */
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Casillas y opciones: 24 px de lado, que es el mínimo de WCAG 2.2 AA (SC 2.5.8).
   Sin esto salían con el tamaño que da el navegador —13, 15 o 16 px según la página— y
   eso es lo que había: ocho controles por debajo del listón.

   No es una cuestión de norma. Esta aplicación se usa en obra, con guante y a pleno sol,
   sobre un teléfono que se sujeta con una mano mientras la otra sostiene un plano. Una
   casilla de 13 px no se falla de vez en cuando: se falla siempre, y quien la falla no
   dice «qué pequeña», dice «esto no funciona».

   Va en la hoja común y no en cada pantalla, que es como se coló la de 15 px de
   integración: una regla local no puede proteger a las páginas que no la tienen. */
input[type="checkbox"],input[type="radio"]{
  width:24px;height:24px;flex:none;accent-color:var(--tinta);cursor:pointer}

/* Por qué esta pantalla está en solo lectura.
   Es informativo, no un error: a quien solo consulta no le ha fallado nada, sencillamente
   su papel no incluye esta acción. Por eso lleva el tono de aviso —ámbar— y no el de fallo
   —óxido—, y por eso dice a quién pedirlo en vez de limitarse a negar. */
.aviso-permiso{background:var(--senal-suave);border:1px solid var(--senal);
  border-left-width:4px;border-radius:4px;padding:11px 14px;margin-bottom:16px;
  font-size:14px;line-height:1.5;color:var(--tinta-media)}
.aviso-permiso b{color:var(--tinta);font-weight:650}

/* Un bloque entero que esta cuenta no puede usar. Se atenúa y se apaga, pero NO se
   esconde: quitarlo dejaría a la persona sin saber que la función existe ni a quién
   pedirla, y el hueco se lee como que a la pantalla le falta algo. Atenuado y con su
   motivo al lado dice las dos cosas: qué hay aquí y por qué no es suyo.
   El aviso conserva su color; si se atenuara con el resto, se perdería justo la frase
   que explica lo que está pasando. */
.bloque.sin-permiso{opacity:.55}
.bloque.sin-permiso h2{color:var(--tinta-media)}
.bloque.sin-permiso .aviso-permiso{opacity:1}
.bloque.sin-permiso :is(input,select,textarea,button){cursor:not-allowed}

/* El rol del sistema y el cargo, en la ficha de cuenta. Van uno debajo del otro y con
   peso distinto porque son cosas distintas: el rol lo decide el servidor a partir de los
   accesos vigentes; el cargo lo teclea quien da de alta a la persona y no otorga nada.
   Confundirlos —enseñar el cargo donde se busca el rol— es lo que hacía que alguien con
   la configuración avanzada abierta leyera «Ingeniero de Control de Calidad». */
.rol-sistema{color:var(--tinta);font-style:normal;font-weight:600}
.rol-sistema:empty{display:none}
.cargo{color:var(--tinta-suave);font-style:normal}

/* Un campo que no se puede tocar tiene que PARECER que no se puede tocar. Un input
   deshabilitado con el mismo aspecto que uno editable invita a escribir en él, y
   descubrir que no admite texto se lee como que la página está rota. */
.meta-campo input:disabled,input.solo-lectura{background:var(--papel-hondo);
  color:var(--tinta-suave);cursor:not-allowed;border-style:dashed}

.esqueleto{display:flex;flex-direction:column;gap:9px;padding:4px 0}
.esqueleto-linea{display:block;height:14px;border-radius:7px;
  background:linear-gradient(90deg,var(--papel-hondo) 25%,var(--linea) 37%,var(--papel-hondo) 63%);
  background-size:400% 100%;animation:esqueleto-onda 1.4s ease-in-out infinite}
.esqueleto-linea:nth-child(3){width:78%}
.esqueleto-linea:last-child{width:56%}
@keyframes esqueleto-onda{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Quien pide menos movimiento no debería recibir una onda en bucle en cada
   bloque de cada pantalla. Se queda el hueco, que es a lo que sirve. */
@media (prefers-reduced-motion:reduce){
  .esqueleto-linea{animation:none;background:var(--papel-hondo)}
}

.estado-error{padding:14px;border:1px solid var(--oxido-suave);border-radius:var(--radio);
  background:var(--oxido-suave);color:var(--tinta)}
.estado-error p{margin:0 0 10px;font-size:14px}
.estado-error p:last-child{margin-bottom:0}

/* 44×44 de área táctil: es el mínimo de WCAG 2.2 AA y el que decide si un botón
   se puede pulsar con guante en un andamio. El relleno hace el área; la letra
   no tiene que crecer con ella. */
.reintentar{min-height:44px;min-width:44px;padding:0 18px;border:1px solid var(--tinta-media);
  border-radius:9px;background:#fff;color:var(--tinta);font:inherit;font-size:14px;
  font-weight:600;cursor:pointer}
.reintentar:hover{background:var(--papel-hondo)}
.reintentar:focus-visible{outline:2px solid var(--senal);outline-offset:2px}

.nav-sup{position:relative;z-index:5;background:var(--papel-alto);
  border-bottom:1px solid var(--linea);box-shadow:0 1px 3px rgba(22,35,58,.04)}
/* Por la misma razón que las pestañas: con nueve entradas, «Catálogos generales» salía
   cortada contra el borde derecho y no había ni barra de desplazamiento que lo delatara
   —estaba oculta a propósito—. Envolviendo, la sección más larga ocupa dos filas y se lee
   entera. */
.nav-sup-inner{max-width:var(--ancho);margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:center;padding:0 8px}

/* Alias de transición. Quien tenga el sesion.js anterior guardado en el navegador
   sigue pintando la tira con la clase vieja, y sin esto vería la navegación sin
   formato hasta que su caché caducara. Va acotado a .nav-sup-inner para no tocar
   las pestañas internas de las pantallas, que se llaman igual.
   Se puede retirar cuando no queden navegadores con la versión de agosto de 2026. */
.nav-sup-inner > .pestana,
.nav-pestana{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 18px 0;text-decoration:none;color:var(--tinta-suave);
  background:none;border:0;font-family:var(--sans);cursor:pointer}
.nav-sup-inner > .pestana svg,
.nav-pestana svg{width:26px;height:26px;fill:currentColor;display:block}
/* El subrayado ciñe la ETIQUETA, no la celda: repartir la fila a partes iguales
   y subrayar la celda entera daría una raya de medio palmo en pantalla ancha,
   que ya no señala una pestaña sino un trozo de pantalla. */
.nav-sup-inner > .pestana span,
.nav-pestana span{font-size:12px;line-height:1.2;white-space:nowrap;position:relative;
  padding-bottom:8px}
/* La raya existe siempre y solo se tiñe: si apareciera y desapareciera, la fila
   entera daría un salto de 3 px al cambiar de pestaña. */
.nav-sup-inner > .pestana span::after,
.nav-pestana span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:transparent;border-radius:2px}
.nav-sup-inner > .pestana:hover,
.nav-pestana:hover{color:var(--tinta-media)}
.nav-sup-inner > .pestana[aria-current="page"],
.nav-pestana[aria-current="page"]{color:var(--tinta);font-weight:650}
/* Ámbar y no marino: sobre la cinta oscura el marino desaparecería, y en la
   clara el subrayado ámbar es el mismo gesto del logotipo. */
.nav-sup-inner > .pestana[aria-current="page"] span::after,
.nav-pestana[aria-current="page"] span::after{background:var(--senal)}
.nav-sup-inner > .pestana:focus-visible,
.nav-pestana:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}

/* En el teléfono se reparte el ancho, como en la app: con pocas pestañas
   quedarían apelotonadas en el centro y el pulgar tendría que apuntar. */
@media (max-width:640px){
  .nav-sup-inner{justify-content:flex-start}
  /* 68 px es lo que permite que cinco pestañas quepan en un teléfono de 375 px
     sin desplazar. Cuando una sección tenga más, la fila se desplaza en lugar de
     encoger la letra: ilegible con guantes no es una opción. */
  .nav-pestana{flex:1 0 auto;min-width:68px;padding-left:4px;padding-right:4px}
  .nav-pestana span{font-size:11.5px}
}

.nav-inf{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--papel-alto);
  border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom)}
.nav-inf-inner{max-width:calc(var(--ancho) - 40px);margin:0 auto;display:flex}
/* `min-width:0` NO es defensivo: sin él una celda flexible no baja de su ancho de
   contenido, y con el texto en una sola línea eso significa que la fila entera crece
   hasta lo que midan los rótulos y se sale de la pantalla por la derecha, en silencio.
   Así se perdían veintiséis entradas del menú en el teléfono (ver comun.css, «El menú
   en el teléfono»). Con esto, de sobrar ancho se recorta el rótulo, que se ve. */
.destino{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px 6px;text-decoration:none;color:var(--tinta-suave);position:relative}
.destino svg{width:25px;height:25px;fill:currentColor;display:block}
/* Una sola línea, siempre: si una etiqueta se partiera en dos, esa celda
   crecería y descuadraría la fila entera. */
.destino span{font-size:11px;line-height:1.2;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.destino[aria-current="page"]{color:var(--tinta);font-weight:650}
.destino:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
/* Aviso sobre el icono: lo que falta se ve sin entrar a mirar. */
.destino .punto{position:absolute;top:4px;left:50%;margin-left:4px;background:var(--oxido);
  color:var(--papel-alto);font-family:var(--mono);font-size:10px;font-weight:700;
  line-height:1;padding:2px 5px;border-radius:99px}

/* En pantalla ancha los destinos suben a una cinta marino y la barra inferior
   sobra: el ratón no tiene el problema de alcance que tiene el pulgar.

   La cinta va en marino y no en claro porque es la que ordena la jornada —dónde
   estoy dentro del ciclo de calidad— y merece leerse antes que el resto de la
   página. Debajo, sobre blanco, van las pantallas de esa etapa. */
@media (min-width:900px){
  .nav-inf{display:none}
  .nav-sup{background:var(--papel-alto);border-bottom:0}

  .barra-marca .destinos .destino{flex:0 0 auto;flex-direction:row;gap:8px;
    align-items:center;min-width:0;padding:0 14px;color:rgba(255,255,255,.72);
    border-bottom:3px solid transparent}
  .barra-marca .destinos .destino svg{width:18px;height:18px}
  .barra-marca .destinos .destino span{font-size:13.5px}
  .barra-marca .destinos .destino:hover{color:#fff}
  .barra-marca .destinos .destino[aria-current="page"]{color:#fff;font-weight:650;
    border-bottom-color:var(--senal)}

  /* Las pestañas de la sección cuelgan de la barra, sobre blanco. */
  .nav-sup-inner{background:var(--papel-alto);border-bottom:1px solid var(--linea);
    max-width:none;padding:0;justify-content:flex-start}
  /* Se alinean con el contenido de la página, no con el borde del navegador. */
  .nav-sup-inner > .nav-pestana:first-child{margin-left:max(20px,calc((100vw - 1240px)/2 + 20px))}
}

/* La franja de sub-pestañas ya no se retira nunca (20-sep-2026).
   Un destino con una sola pantalla la pinta a ella, marcada como actual: antes se
   escondía la fila entera —era un eco del destino ya marcado arriba— y el precio era
   que la pantalla empezaba a dos alturas distintas y el contenido saltaba 64 px al ir
   de una sección con pestañas a otra sin ellas. La regla que la escondía se queda
   escrita para que nadie la reponga sin leer esto. */
.nav-pestana.sola{cursor:default}
.nav-pestana.sola:hover{color:var(--tinta)}

.aviso{border-left:4px solid var(--senal);background:var(--senal-suave);padding:12px 15px;font-size:14px;
  border-radius:var(--radio-chico);margin-bottom:14px}
.aviso.malo{border-left-color:var(--oxido);background:var(--oxido-suave)}
.aviso.bien{border-left-color:var(--nivel);background:var(--nivel-suave)}
.nota{font-size:13px;color:var(--tinta-media);margin:10px 0 0}

/* ── El estado vacío ─────────────────────────────────────────────────────────
   `CivilQc.pintarVacio` —el ayudante de la casa— emite `class="vacio"` para
   CUALQUIER pantalla, pero la clase no estaba aquí: se declaraba a mano en 22
   páginas y en ninguna hoja compartida. Consecuencias de eso, las dos medidas:

   · La portada no la declara, así que su «Su cuenta no tiene ninguna obra
     asignada» salía sin estilo — texto suelto a la izquierda donde el resto de
     la suite pone un mensaje centrado y en tinta media. Igual en mi-acceso.
   · Las 22 copias ya habían derivado: mismo color y tamaño, pero rellenos de
     20, 22, 24, 26 y 30 px, y una en cursiva. Nadie lo decidió; se copió.

   Esta queda como la de la casa. No pisa a ninguna de las 22: el `<style>` de
   cada página va después del enlace a esta hoja, así que la suya sigue ganando
   donde exista. Lo que cambia es que ya no hace falta declararla para que un
   estado vacío se vea como los demás. */
.vacio{text-align:center;color:var(--tinta-media);padding:24px 10px;font-size:14px}

/* ── La nota que acota lo que se puede hacer ─────────────────────────────────
   Dice hasta dónde llega lo editable en esta pantalla, o dónde se hace el resto.
   Tres decisiones, y las tres se tomaron después de verlas mal:

   VA DEBAJO. Encima obliga a leer una advertencia antes de saber sobre qué advierte,
   y empuja hacia abajo la tabla —que es a lo que se venía—. Debajo se lee cuando ya
   se ha visto el contenido y la pregunta «¿y esto por qué no se deja tocar?» ya existe.

   VA EN ÁMBAR, que en esta suite es «lo que avisa»: el mismo de una tolerancia al
   límite o un plazo por vencer. No en azul — el azul es el color de la marca y de lo
   pulsable, así que un párrafo azul enmarcado se lee como un enlace que no responde,
   y eso era justo lo que pasaba con las bandas que había antes.

   LLEVA SÍMBOLO. El triángulo la identifica sin leerla, que es lo que hace que se lea
   la que importa y se ignore la que no.

   Y sin fondo fuerte ni recuadro cerrado: no es un error ni algo que atender ahora, es
   una aclaración. Pintarla como alarma haría que se dejara de mirar. */
.nota-limite{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:11px 14px;
  border-left:3px solid var(--senal);background:var(--senal-suave);border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.5;color:var(--senal-texto)}
.nota-limite svg{width:17px;height:17px;fill:var(--senal);flex:none;margin-top:1px}
.nota-limite a{color:var(--senal-texto);font-weight:650}

/* ── Migas de pan ───────────────────────────────────────────────────────────
   Solo para las pantallas que cuelgan de otra —el asistente cuelga de
   Configuración—. En las siete secciones del menú sobran: el menú ya dice
   dónde se está, y repetirlo debajo es ocupar una línea para no añadir nada.
   El último tramo no es enlace: llevar a donde ya se está es una promesa que
   no se cumple, y quien la pulsa cree que la pantalla no responde. */
.migas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;
  color:var(--tinta-media);margin:0 0 16px}
.migas a{color:var(--tinta-media);text-decoration:none;border-bottom:1px solid var(--linea);
  display:inline-flex;align-items:center;min-height:24px}
.migas a:hover{color:var(--tinta);border-bottom-color:var(--tinta)}
.migas a:focus-visible{outline:2px solid var(--senal);outline-offset:2px}
.migas [aria-current="page"]{color:var(--tinta);font-weight:600}
.oculto{display:none!important}
.dato{font-family:var(--mono)}

/* ────────────────────────────────────────────────────────────────────────────
   Piezas de tablero
   ──────────────────────────────────────────────────────────────────────────── */

/* Rejilla de indicadores: se acomoda sola. Con cuatro tarjetas y una pantalla
   ancha caben en fila; en el teléfono se apilan sin que nadie lo programe. */
.rejilla{display:grid;gap:16px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
/* `min(320px,100%)` y no `320px` a secas: `minmax(320px,1fr)` NO baja de 320, así que en
   una columna de 298 —un teléfono— la celda se sale 22 px en vez de encogerse. `auto-fit`
   solo decide CUÁNTAS columnas caben; el mínimo sigue siendo un suelo duro. Se veía en el
   tablero, en BIM y en correo, que comparten esta rejilla. */
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

.indicador{background:var(--papel-alto);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px;box-shadow:var(--sombra)}
.indicador h3{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--tinta-media)}
.indicador-cuerpo{display:flex;align-items:center;gap:16px}
.indicador-cifra{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.indicador-cifra small{font-size:16px;font-weight:600;margin-left:2px;color:var(--tinta-media)}
.indicador-pie{font-size:13px;color:var(--tinta-media);margin-top:5px}

/* Anillo: la proporción se ve antes de leerse el número, que es de lo que se
   trata cuando alguien mira el tablero de pasada. El hueco del anillo lleva la
   cifra porque separarlos obligaría a emparejarlos con la vista. */
.anillo{position:relative;width:104px;height:104px;flex:none}
.anillo svg{transform:rotate(-90deg);display:block}
.anillo-pista{stroke:var(--papel-hondo)}
.anillo-valor{stroke:var(--azul);stroke-linecap:round;transition:stroke-dasharray .6s ease}
.anillo-valor.bien{stroke:var(--nivel)}
.anillo-valor.aviso{stroke:var(--senal)}
.anillo-valor.malo{stroke:var(--oxido)}
.anillo-centro{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.anillo-cifra{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1}
.anillo-cifra small{font-size:12px;font-weight:600;color:var(--tinta-media)}

/* Variación contra el periodo anterior. La flecha dice la dirección y el color
   dice si esa dirección es buena, que no siempre coinciden: más hallazgos
   críticos sube, y subir ahí es malo. */
.variacion{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;
  margin-top:10px;color:var(--tinta-media)}
.variacion b{font-weight:700}
.variacion.mejora{color:var(--nivel)}
.variacion.empeora{color:var(--oxido)}

/* Estado en píldora: se lee de un vistazo en una tabla larga. */
.estado{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:650;
  background:var(--papel-hondo);color:var(--tinta-media);white-space:nowrap}
.estado.bien{background:var(--nivel-suave);color:var(--nivel)}
.estado.aviso{background:var(--senal-suave);color:var(--senal-texto)}
.estado.malo{background:var(--oxido-suave);color:var(--oxido)}
.estado.azul{background:var(--azul-suave);color:var(--azul)}

/* Fila de lista con acceso: el bloque entero es el objetivo táctil, no solo el
   texto. En obra se pulsa con guantes. */
.hilera{display:flex;align-items:center;gap:13px;padding:13px 2px;
  border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}
.hilera:last-child{border-bottom:0}
a.hilera:hover{background:var(--papel);border-radius:var(--radio-chico)}
.hilera-texto{flex:1;min-width:0}
.hilera-texto b{display:block;font-weight:600;font-size:15px}
.hilera-texto small{display:block;color:var(--tinta-media);font-size:13px}
.hilera-flecha{color:var(--tinta-suave);flex:none;font-size:18px;line-height:1}

/* Barra de comparación, para «calidad por disciplina» y similares. */
.barra-dato{display:flex;align-items:center;gap:12px;padding:8px 0}
/* 170 y no 120: el nombre lleva al lado cuánto se midió de esa dimensión, y a 120 se partía
   en dos líneas —«Productividad» y debajo «67% medido»—, con lo que su barra se descolgaba
   del resto de la columna. */
.barra-dato-nombre{width:170px;flex:none;font-size:14px}
.barra-dato-pista{flex:1;height:11px;background:var(--papel-hondo);border-radius:99px;overflow:hidden}
/* display:block es lo que hace que esta barra exista. Era un <span> y el ancho en % que le
   pone el guion NO SE APLICA a un elemento en línea: las seis barras se pintaban vacías, con
   su color y su porcentaje correctos en el atributo y cero píxeles en pantalla. No daba
   ningún error y la pista de fondo, que sí tiene caja, disimulaba el hueco. */
.barra-dato-relleno{display:block;height:100%;background:var(--azul);border-radius:99px}
.barra-dato-relleno.bien{background:var(--nivel)}
.barra-dato-relleno.aviso{background:var(--senal)}
.barra-dato-relleno.malo{background:var(--oxido)}
.barra-dato-valor{width:52px;text-align:right;flex:none;font-size:14px;font-weight:650}
/* Los gráficos en 3D (14-oct-2026): la barra de un dato como prisma y el pastel como rosca. */
.barra-dato-3d{flex:1;min-width:0}
.barra-dato-3d .medidor3d{display:block;width:100%;height:20px}
.rosca3d{position:relative;flex:none;max-width:100%}
.rosca3d .g3d{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(22,35,58,.14))}
.rosca3d-cifra{position:absolute;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:22px;font-weight:800;color:var(--tinta);pointer-events:none}

/* ── Diálogos ──────────────────────────────────────────────────────────────
   El primero es el de cambiar la contraseña, que puede abrirse desde cualquier
   pantalla. Se apoya en <dialog> nativo: el navegador ya se encarga del foco
   atrapado dentro y de cerrar con Escape, que es justo lo que suele quedar mal
   cuando se imita una ventana modal con un div. */
dialog{border:none;padding:0;background:transparent;max-width:min(460px,92vw)}
dialog::backdrop{background:rgba(22,35,58,.55)}
dialog .bloque{max-height:calc(88 * var(--vh));overflow:auto}

/* Las ventanas de la suite: las que sustituyeron a `confirm()` y `prompt()` del
   navegador. Aquellas salían rotuladas con el nombre del dominio —«civilqc.vista-mip.com
   dice»—, que es exactamente el aspecto de una ventana fraudulenta, y no permitían
   distinguir lo grave de lo rutinario ni pedir una fecha como fecha.

   El estilo vive aquí y no en cada pantalla porque la pieza es una sola: `datos.html`
   tenía sus propios botones de ficha (`.boton-fino`) y nadie más los conocía, así que
   una ventana compartida que se apoyara en ellos saldría sin estilo en las otras trece. */
dialog.dialogo-suite{max-width:min(520px,94vw)}
.dialogo-suite .bloque{padding:20px 22px;display:block}
.dialogo-suite h3{margin:0 0 8px;font-size:17px;letter-spacing:-.01em}
.dialogo-cuerpo{margin:0 0 14px;color:var(--tinta-media);font-size:14px;line-height:1.55;
  white-space:pre-line}
.dialogo-cuerpo b{color:var(--tinta);font-weight:650}
.dialogo-campo{margin-bottom:13px}
.dialogo-ayuda{display:block;margin-top:5px;color:var(--tinta-media);font-size:12.5px}
/* La misma ayuda, en un formulario de pantalla y no de ventana. */
.campo-ayuda{display:block;margin-top:5px;color:var(--tinta-media);font-size:12.5px;line-height:1.35}
.dialogo-error{margin:0 0 12px;padding:9px 12px;font-size:13.5px;border-radius:var(--radio-chico);
  border-left:4px solid var(--oxido);background:var(--oxido-suave);color:var(--tinta)}
.dialogo-pie{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.dialogo-pie button{font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;
  padding:9px 16px;border-radius:var(--radio-chico);
  border:1px solid var(--linea-fuerte);background:var(--papel);color:var(--tinta-media)}
.dialogo-pie button:hover{border-color:var(--tinta-media);color:var(--tinta)}
.dialogo-pie button.principal{background:var(--tinta);border-color:var(--tinta);color:#fff}
.dialogo-pie button.principal:hover{opacity:.9}
/* El rojo se reserva para lo que retira o destruye algo. Si todo fuera rojo, dejaría
   de avisar: es el mismo motivo por el que el barral no usa el color de alarma. */
.dialogo-pie button.principal.peligro{background:var(--oxido);border-color:var(--oxido)}

/* ── SIGNATURE: el barral de mando ─────────────────────────────────────────
   Oscuro a la izquierda, papel claro a la derecha. El contraste no es estético:
   separa «dónde estoy» de «qué estoy haciendo», y en una jornada de ocho horas
   mirando tablas eso reduce el ruido más que cualquier decoración.

   El color de alarma se reserva. Naranja y rojo aparecen SOLO en la insignia de
   no conformidades; el resto del barral es tinta y blanco. Un menú que usa el
   rojo de adorno se queda sin forma de decir «esto arde».

   Solo desde 960 px. En un teléfono el barral se comería la mitad del ancho, y
   ahí sigue mandando la barra inferior de siempre.
   ──────────────────────────────────────────────────────────────────────── */
.barral{display:none}

@media (min-width:960px){
  .barral{
    display:flex;flex-direction:column;
    position:fixed;inset:0 auto 0 0;z-index:8;
    width:var(--ancho-barral);background:var(--tinta);color:#fff;
    transition:width .18s ease}

  .barral.cerrado{width:68px}

  .con-barral{padding-left:var(--ancho-barral);transition:padding-left .18s ease}
  .con-barral:has(.barral.cerrado){padding-left:68px}

  /* Los 190 px de aire al pie de `main` son del TELÉFONO: dejan sitio a la barra inferior de
     navegación. En escritorio esa barra no existe (el barral la sustituye), y el hueco empujaba
     cada pantalla 190 px por debajo de la ventana: con 1905×945 a 100 %, «Mis pendientes»
     necesitaba desplazarse solo para enseñar ese vacío (22-sep-2026). Donde hay una barra de
     acciones fija al pie (`div.barra` hija del cuerpo) se deja lo justo para no taparla. */
  .con-barral main{padding-bottom:36px}

  /* Densidad de escritorio: la suite entera, al 85 % (22-sep-2026).
     ─────────────────────────────────────────────────────────────────────────
     Con 1905×945 a 100 % —un monitor de 1920 con la barra del navegador— las pantallas se
     salían por abajo aun vacías: letra de 16, campos de 46 px de alto, títulos de 31. Quien
     las usa las miraba al 80 % para verlas enteras. Reducir tamaño a tamaño en treinta y
     nueve páginas, cada una con su hoja propia, dejaría proporciones a medias; `zoom` en la
     raíz hace lo mismo que el zoom del navegador y conserva la relación entre todo.
     Solo desde 960 px: en el teléfono la letra de 16 en los campos evita que iOS amplíe la
     página al tocarlos.
     Dos efectos del zoom que hay que tener presentes (medidos en Chromium 131):
     `getBoundingClientRect` da píxeles de PANTALLA pero `scrollTop` y `offsetHeight` dan
     píxeles de PÁGINA —sesion.js divide por el factor real al desplazar el menú—, y las
     unidades de ventana encogen con el factor: por eso existe `--vh`. */
  :root{--zoom:.85;--ancho:1835px}
  html{zoom:var(--zoom)}
  /* En pantallas más bajas, la misma regla con su altura (dueño, 8-oct-2026, en una MacBook
     Pro: «le falta muy poca parte para que entre en la pantalla completa al 100 %»). El 85 %
     se midió con 945 px de ventana; con unos 865 de alto el equivalente es el 78 %, y por
     debajo de 800 el 72 %. Medido a 1440×780: Inspecciones sobraba 103 px y cabe; Materiales
     pasa de 172 a 22. El ancho se compensa igual que arriba (≈ 1560 px en pantalla). */
  @media (max-height:900px){ :root{--zoom:.78;--ancho:2000px} }
  @media (max-height:800px){ :root{--zoom:.72;--ancho:2167px} }
  /* El hueco de la barra se reserva siempre (29-sep-2026): con barras visibles, que aparezca o
     desaparezca cambiaba el ancho, y el paginador medía otra página cada vez. */
  html{scrollbar-gutter:stable}
  .con-barral:has(> div.barra) main{padding-bottom:78px}

  /* Con barral, la franja superior y la inferior sobran: repetían lo mismo. */
  .con-barral .barra-marca,
  .con-barral .nav-inf{display:none}

  /* La barra de acciones empieza donde empieza el contenido.
     ─────────────────────────────────────────────────────────────────────────
     `.barra` nace con `left:0` —tiene que ser así en el teléfono, donde no hay
     menú lateral—, y con el barral desplegado eso la hace pasar POR ENCIMA del
     pie del menú: justo donde vive la cuenta de quien está dentro. El síntoma
     no se lee como «una barra mal puesta» sino como **«desapareció mi avatar»**,
     y se reportó así desde producción el 17-sep-2026: el bloque estaba en el
     DOM, visible y en su sitio (medido: arriba en 642 px, alto 78, con la
     ventana en 720), pero debajo de una barra opaca.

     Estaba arreglado en DOS páginas, cada una con su clase propia
     (`.pm-pie` en admin y en puesta-en-marcha). Las otras cinco que usan
     `.barra` —inspección, datos, configuración, dictado y tablero— lo
     arrastraban. Por eso la corrección vive aquí: la próxima pantalla que use
     la barra de la casa nace bien sin que nadie se acuerde. */
  .con-barral .barra{left:var(--ancho-barral)}
  .con-barral:has(.barral.cerrado) .barra{left:68px}
  /* Con barra lateral, la fila de la sección se CENTRA en el ancho que queda.
     ─────────────────────────────────────────────────────────────────────────
     Sin esto se veía corrida a la derecha, con un hueco muerto al principio. La causa
     estaba dos reglas más arriba: la primera pestaña lleva `margin-left` calculado como
     (100vw - 1240)/2 + 20, que alinea la fila con el contenido centrado de la página
     cuando NO hay lateral. Con lateral, el contenido ya no empieza ahí —empieza donde
     acaba la barra—, así que ese margen deja 144 px vacíos a la izquierda y 14 a la
     derecha: la fila entera desplazada y un hueco que se lee como que falta algo.
     Medido a 1440 px: 120 del cálculo + 24 de este relleno.

     Se anula el margen y se centra. `justify-content` hay que repetirlo porque la regla
     de la barra de marca lo fija en flex-start, y esa gana por ir en un media query. */
  .con-barral .nav-sup-inner{padding-left:24px;padding-right:24px;justify-content:center}
  .con-barral .nav-sup-inner > .nav-pestana:first-child,
  .con-barral .nav-sup-inner > .pestana:first-child{margin-left:0}
}

/* Aquí acaba lo que es SOLO de escritorio —dónde se coloca el barral y qué le cede sitio—
   y empieza cómo se ve por dentro, que sirve en los dos anchos.
   ─────────────────────────────────────────────────────────────────────────────────────
   Estas reglas estaban también dentro del media query de 960, y esa era la causa de que
   en el teléfono no hubiera menú: el árbol de secciones existe en el DOM desde siempre,
   pero sin un solo estilo aplicable. Ahora el mismo menú se abre como panel de mano
   (ver «El menú en el teléfono», más abajo). Siguen sangradas por no reescribir 165
   líneas de una pieza; no cuelgan de ninguna condición. Y no pintan nada de más mientras
   el panel está cerrado: solo alcanzan a `.barral-*`, que vive dentro de `.barral`, que
   sin la clase `demano` sigue en `display:none`. */

  .barral-marca{display:flex;align-items:center;gap:8px;padding:16px 14px 10px;min-height:60px}
  .barral-marca .marca{flex:1;min-width:0;overflow:hidden}
  .barral-marca .marca img{filter:brightness(0) invert(1);width:26px;height:26px}
  .barral-marca .marca-texto b{color:#fff;font-size:14px;letter-spacing:.1em}
  .barral-marca .marca-texto i{color:rgba(255,255,255,.55);font-size:9.5px;letter-spacing:.2em}
  .barral.cerrado .barral-marca .marca-texto{display:none}

  .barral-plegar{flex:none;width:26px;height:26px;padding:0;border:none;border-radius:7px;
    background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);display:grid;place-items:center}
  .barral-plegar:hover{background:rgba(255,255,255,.16);color:#fff}
  .barral-plegar svg{width:16px;height:16px;fill:currentColor}
  .barral.cerrado .barral-plegar svg{transform:rotate(180deg)}

  /* El buscador no es un adorno: con treinta pantallas, escribir es más rápido
     que navegar. Se enseña la combinación de teclas para que se aprenda sola. */
  .barral-buscar{display:flex;align-items:center;gap:9px;margin:4px 12px 14px;padding:8px 10px;
    width:calc(100% - 24px);border:1px solid rgba(255,255,255,.14);border-radius:9px;
    background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:13px;text-align:left}
  .barral-buscar:hover{background:rgba(255,255,255,.1);color:#fff}
  .barral-buscar svg{width:15px;height:15px;fill:currentColor;flex:none}
  .barral-buscar kbd{margin-left:auto;font-family:var(--mono);font-size:10px;
    border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 5px;color:rgba(255,255,255,.55)}
  .barral.cerrado .barral-buscar{justify-content:center;padding:8px}
  .barral.cerrado .barral-buscar span,
  .barral.cerrado .barral-buscar kbd{display:none}

  /* ── Registrar ────────────────────────────────────────────────────────────
     El único botón dorado de la columna, y a propósito: es la acción, y todo lo
     demás son sitios a los que ir. En una barra donde todo pesa igual, lo que se
     hace todos los días se busca igual que lo que se toca una vez al año. */
  .barral-crear{position:relative;margin:0 12px 16px}
  .barral-registrar{display:flex;align-items:center;gap:9px;width:100%;padding:11px 12px;
    border:0;border-radius:10px;background:var(--senal);color:var(--tinta);
    font-family:var(--sans);font-size:14.5px;font-weight:700;text-align:left;cursor:pointer}
  .barral-registrar:hover{background:#D8A45B}
  .barral-registrar:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .barral-registrar > svg:first-child{width:17px;height:17px;fill:currentColor;flex:none}
  .barral-registrar .barral-flecha{width:14px;height:14px;margin-left:auto;flex:none;
    transition:transform .12s}
  .barral-registrar[aria-expanded="true"] .barral-flecha{transform:rotate(180deg)}
  .barral.cerrado .barral-registrar{justify-content:center;padding:11px 8px}
  .barral.cerrado .barral-registrar span,
  .barral.cerrado .barral-registrar .barral-flecha{display:none}

  /* Cuelga a la DERECHA de la columna y no debajo: debajo empujaría el menú entero
     hacia abajo cada vez que se abre, y lo que se buscaba cambiaría de sitio. */
  .menu-registrar{position:absolute;top:0;left:calc(100% + 8px);z-index:40;min-width:212px;
    background:#fff;border:1px solid var(--linea);border-radius:12px;
    box-shadow:0 12px 34px rgba(22,35,58,.22);padding:6px;display:flex;flex-direction:column}
  /* Sin esta línea el desplegable está SIEMPRE abierto. El guion lo cierra con el atributo
     `hidden`, pero `display:flex` de arriba es una regla de clase y gana a la de `[hidden]`:
     el atributo se pone, el menú no se entera, y nada avisa. Estuvo así desde que se añadió
     el botón, tapando la pestaña abierta de la pantalla en las capturas del manual. La casa
     ya lo había resuelto una vez para `.menu-perfil`; faltaba repetirlo aquí. */
  .menu-registrar[hidden]{display:none}

  .menu-registrar a{display:flex;align-items:center;gap:11px;padding:10px 12px;min-height:44px;
    border-radius:8px;text-decoration:none;color:var(--tinta);font-size:14px}
  .menu-registrar a:hover{background:var(--papel-alto)}
  .menu-registrar a:focus-visible{outline:2px solid var(--senal);outline-offset:-2px}
  .menu-registrar svg{width:17px;height:17px;fill:var(--tinta-media);flex:none}
  .menu-registrar a:hover svg{fill:var(--tinta)}

  /* Se desplaza igual, pero sin barra visible (14-oct-2026), como en el teléfono. */
  .barral-nav{flex:1;overflow-y:auto;padding:0 12px 12px;scrollbar-width:none;-ms-overflow-style:none}
  .barral-nav::-webkit-scrollbar{display:none}
  /* Cada sección es un grupo que se despliega (19-sep-2026). El rótulo conserva la letra de
     antes —versalitas pequeñas, que se leen como encabezado y no como una entrada más— pero
     ahora es un botón: más claro, con su flecha y un alto que se acierta con el dedo. */
  .barral-grupo{margin-top:4px}
  .barral-seccion{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;margin:0;
    padding:0 10px;border:none;border-radius:8px;background:none;cursor:pointer;text-align:left;
    font:inherit;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;
    color:rgba(255,255,255,.58)}
  .barral-seccion span{flex:1;min-width:0}
  .barral-seccion:hover{background:rgba(255,255,255,.06);color:#fff}
  .barral-seccion:focus-visible{outline:2px solid #fff;outline-offset:-2px}
  .barral-seccion[aria-expanded="true"]{color:rgba(255,255,255,.88)}
  .barral-chevron{width:14px;height:14px;flex:none;opacity:.7;transition:transform .15s}
  .barral-seccion[aria-expanded="true"] .barral-chevron{transform:rotate(180deg)}
  /* La insignia del rótulo es la de lo que esconde: desplegado, ya se ve dentro. */
  .barral-seccion .barral-insignia{letter-spacing:0}
  .barral-seccion[aria-expanded="true"] .barral-insignia{display:none}
  .barral-grupo-items{padding-bottom:6px}
  .barral-corte{border:0;border-top:1px solid rgba(255,255,255,.12);margin:10px 10px 6px}
  /* Plegado el menú (Ctrl+B) quedan solo los iconos, TODOS: un grupo cerrado se llevaría
     los suyos sin ningún rótulo que lo dijera. El rótulo queda como separador y no se
     alcanza con el tabulador: no hay nada que desplegar. */
  .barral.cerrado .barral-seccion{visibility:hidden;min-height:0;height:10px;padding:0;margin:8px 0 2px}
  .barral.cerrado .barral-grupo-items[hidden]{display:block}

  /* 44 px de alto mínimo (WCAG 2.2 AA). Medían 40: el menú principal es lo primero
     que se toca al entrar y lo que más se usa desde una tableta en obra. */
  .barral-item{display:flex;align-items:center;gap:11px;padding:9px 10px;min-height:44px;
    border-radius:9px;color:rgba(255,255,255,.72);font-size:14px;text-decoration:none;
    position:relative}
  .barral-item svg{width:18px;height:18px;fill:currentColor;flex:none}
  /* El nombre baja de línea antes que cortarse. Con `nowrap` y puntos suspensivos, «Centro
     de preparación de la obra» se leía «Centro de preparación de…» —210 px de texto en 175—
     y quien busca una sección por su nombre no la reconoce por la mitad. El alto mínimo de
     44 px se mantiene, así que una entrada de dos líneas no descuadra la fila ni deja de
     acertarse con guante. */
  .barral-item span{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.25}
  .barral-item:hover{background:rgba(255,255,255,.08);color:#fff}

  /* La cápsula del activo es discreta a propósito: marca dónde estoy sin competir
     con la insignia de alarma, que es lo único que debe saltar a la vista. */
  .barral-item.puesto{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
  .barral.cerrado .barral-item{justify-content:center;padding:10px}
  .barral.cerrado .barral-item span{display:none}

  .barral-insignia{flex:none;min-width:20px;height:19px;padding:0 6px;border-radius:99px;
    background:var(--senal);color:var(--tinta);font-size:11px;font-weight:700;font-style:normal;
    display:grid;place-items:center;font-family:var(--mono)}
  /* Sin esto la burbuja se ve SIEMPRE, y vacía: nace con `hidden` y el guion se lo quita
     cuando llega la cuenta, pero `display:grid` de la clase gana al atributo. Lo que se
     veía era un punto ámbar sin número junto a «Mi atención» —una señal de aviso que no
     avisa de nada—, y como el hueco donde va la cifra es del ancho de un dígito, tampoco
     desencajaba el menú. Mismo caso que `.menu-perfil` y `.menu-registrar`. */
  .barral-insignia[hidden]{display:none}
  .barral-insignia.critica{background:var(--oxido);color:#fff}
  .barral.cerrado .barral-insignia{position:absolute;top:4px;right:4px;min-width:16px;height:16px;
    font-size:9.5px;padding:0 4px}

  .barral-pie{border-top:1px solid rgba(255,255,255,.1);padding:10px 12px;position:relative}
  .barral-yo{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:none;
    border-radius:9px;background:transparent;color:#fff;text-align:left}
  .barral-yo:hover{background:rgba(255,255,255,.08)}
  .barral-yo .avatar{width:30px;height:30px;flex:none;border-radius:99px;background:var(--senal);
    color:var(--tinta);display:grid;place-items:center;font-size:12px;font-weight:700}
  /* La flecha: sin ella el nombre se lee como una etiqueta y nadie sospecha que
     abra nada. Costó que alguien no encontrara «Salir del sistema» —estaba ahí, a
     un clic— porque el único indicio era el cursor, y el cursor solo lo ve quien
     ya ha decidido pasar el ratón por encima. Gira al abrirse, así que también
     dice si el menú está desplegado. */
  .barral-flecha{margin-left:auto;flex:none;opacity:.6;transition:transform .15s,opacity .15s}
  .barral-yo:hover .barral-flecha{opacity:1}
  .barral-yo[aria-expanded="true"] .barral-flecha{transform:rotate(180deg);opacity:1}
  .barral.cerrado .barral-flecha{display:none}

  .barral-quien{min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .barral-quien b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barral-quien i{font-size:11px;font-style:normal;color:rgba(255,255,255,.55);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barral.cerrado .barral-quien{display:none}
  .barral.cerrado .barral-yo{justify-content:center;padding:7px}

  /* «top:auto» NO sobra: es lo único que hace visible este menú.
     ─────────────────────────────────────────────────────────────
     La regla general de .menu-perfil ancla por ARRIBA (top:calc(100% + 9px)) porque
     allí el botón está en una barra superior. Aquí el botón es el último de la
     columna, así que este menú se ancla por ABAJO. Cambiar el borde de anclaje
     exige soltar el anterior: con top y bottom puestos a la vez, el navegador
     coloca la caja por «top» y deduce su alto de la resta.
     Sin esta línea el menú SÍ se abría, con «Salir del sistema» dentro, pero se
     pintaba a 9 px por debajo del borde inferior de la ventana y aplastado a 14 px
     de alto. Nadie lo vio nunca. Y no dio ningún síntoma: ni error, ni hueco, ni
     nada que mirar — el nombre respondía al clic y no pasaba nada. */
  .barral-pie .menu-perfil{position:absolute;top:auto;bottom:calc(100% + 6px);left:12px;right:12px;
    background:#fff;color:var(--tinta);border:1px solid var(--linea);border-radius:10px;
    padding:6px;z-index:9;box-shadow:0 8px 28px rgba(22,35,58,.18)}
  .barral-pie .menu-perfil a,
  .barral-pie .menu-perfil button{display:block;width:100%;text-align:left;padding:8px 10px;
    border:none;background:transparent;border-radius:7px;font-size:13.5px;color:var(--tinta);
    text-decoration:none}
  .barral-pie .menu-perfil a:hover,
  .barral-pie .menu-perfil button:hover{background:var(--papel)}
  .barral-pie .menu-perfil .salir{color:var(--oxido)}

/* ── El menú quieto al pasar de página (28-sep-2026) ───────────────────────────
   «Cada vez que entro a una opción el menú se refresca entero, y hace un efecto muy feo».
   Cada opción es una página nueva: el navegador borraba la pantalla y la volvía a pintar.
   Con la transición de vista entre documentos (mismo origen) el navegador guarda la imagen
   de la página que se deja y cambia a la nueva sin pasar por el blanco: el menú, que es su
   propio grupo, se queda donde está sin animarse, y solo el contenido se funde, muy corto.
   Un navegador que no la entienda ignora estas reglas y navega como siempre. */
@view-transition{navigation:auto}
.barral{view-transition-name:barral-lateral}
::view-transition-group(barral-lateral),
::view-transition-old(barral-lateral),
::view-transition-new(barral-lateral){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* Al cargar, las transiciones de plegado del menú no se disparan: el contenido se deslizaba
   de 0 a su sitio cada vez que el guion ponía el menú. sesion.js quita la clase tras pintar. */
html.sin-transicion .barral,html.sin-transicion .con-barral,
html.sin-transicion .con-barral .barra{transition:none!important}

/* ── El menú lateral, rediseño (28-sep-2026) ───────────────────────────────────
   «Tal cual la maqueta»: marca con el símbolo en oro y CIVIL / QC 360 espaciados; un
   buscador «Ir a una sección…»; Registrar como botón de oro a lo ancho; iconos de LÍNEA
   (svgContorno) en vez de siluetas; cada grupo con su icono y su nombre en letra normal;
   las entradas de un grupo sangradas con una guía vertical; la actual en oro con su filete;
   el rótulo «Gestión del proyecto» y el lema al pie. Va aquí, después de las reglas de
   siempre, para ganarles por orden sin tocarlas: el plegado (Ctrl+B) y el panel del
   teléfono siguen funcionando con lo suyo. */
.barral{background:linear-gradient(180deg,#1B2C47 0%,#16233A 52%,#121E33 100%)}
.barral svg.contorno{fill:none;stroke:currentColor}

.barral-marca{padding:22px 16px 14px;min-height:78px}
.barral-marca .marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.barral-marca .marca img{width:42px;height:42px;
  filter:brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(640%) hue-rotate(356deg) brightness(96%)}
.barral-marca .marca-texto{display:flex;flex-direction:column;line-height:1.05}
.barral-marca .marca-texto b{color:#fff;font-size:21px;font-weight:600;letter-spacing:.22em}
.barral-marca .marca-texto i{color:#E3B46C;font-size:12.5px;font-style:normal;font-weight:500;
  letter-spacing:.34em;margin-top:4px}

.barral-buscar{margin:6px 14px 14px;width:calc(100% - 28px);padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  font-size:14px;color:rgba(255,255,255,.62)}
.barral-buscar svg{width:18px;height:18px}
.barral-buscar kbd{display:none}

.barral-crear{margin:0 14px 18px}
.barral-registrar{justify-content:center;gap:10px;padding:12px;border-radius:10px;
  background:linear-gradient(180deg,#EEC482 0%,#E1AF63 100%);color:#16233A;
  font-size:15.5px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px rgba(0,0,0,.6)}
.barral-registrar:hover{background:linear-gradient(180deg,#F3CD90 0%,#E7B96F 100%)}
.barral-registrar > svg:first-child{width:18px;height:18px}
.barral-registrar .barral-flecha{display:none}

.barral-nav{padding:0 14px 12px}

/* Sueltas (Inicio, Mis pendientes, Indicadores, Centro de ayuda) y rótulos de grupo: la
   misma letra, grande y clara, con su icono de 22 px. */
.barral-nav > .barral-item{gap:14px;padding:9px 10px;font-size:15.5px;color:rgba(255,255,255,.9)}
.barral-nav > .barral-item svg{width:22px;height:22px}
.barral-seccion{gap:14px;min-height:44px;padding:0 10px;font-size:15.5px;letter-spacing:0;
  text-transform:none;font-weight:600;color:rgba(255,255,255,.92)}
.barral-seccion svg.contorno{width:22px;height:22px;flex:none}
.barral-seccion[aria-expanded="true"]{color:#fff}
.barral-chevron{width:16px;height:16px;opacity:.75}

/* Las de dentro, sangradas bajo el icono del grupo y colgadas de una guía. */
.barral-grupo{margin-top:2px}
.barral-grupo-items{margin:0 0 6px 21px;padding:2px 0 4px 14px;border-left:1px solid rgba(255,255,255,.17)}
.barral-grupo-items .barral-item{gap:12px;padding:8px 10px;font-size:14.5px;color:rgba(255,255,255,.74)}
.barral-grupo-items .barral-item svg{width:19px;height:19px}

.barral-item:hover{background:rgba(255,255,255,.07);color:#fff}
.barral-item.puesto{background:rgba(227,180,108,.12);color:#EAC07B;font-weight:600;
  box-shadow:inset 3px 0 0 #E3B46C}

.barral-rotulo{display:flex;align-items:center;gap:12px;margin:12px 10px 6px;font-size:11px;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.barral-rotulo::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.barral-hueco{height:8px}
.barral-corte,.barral-filete{border:0;border-top:1px solid rgba(255,255,255,.16);margin:12px 10px 10px}
.barral-lema{margin:10px 0 0;text-align:center;font-size:11.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.45)}

/* Plegado: solo iconos, sin rótulo, sin guía y sin lema. */
.barral.cerrado .barral-rotulo,.barral.cerrado .barral-lema{display:none}
.barral.cerrado .barral-grupo-items{margin-left:0;padding-left:0;border-left:0}
.barral.cerrado .barral-marca .marca img{width:32px;height:32px}
.barral.cerrado .barral-registrar > svg:first-child{margin:0}

/* ── El menú como la maqueta, segunda pasada (29-sep-2026) ─────────────────────────
   «Necesito que el menú sea 100 % igual a este»: el diseño, no las opciones. Más ancho —en la
   maqueta ningún rótulo se parte, y aquí «Responsables y reglas de aprobación» iba en dos
   líneas—, marca, buscador y «Registrar» más grandes, filas con más aire, y el chevrón como
   en la maqueta: abajo el grupo abierto, de lado el cerrado. El botón de plegar no está en la
   maqueta: aparece al pasar por el menú y plegar sigue funcionando, también con Ctrl+B.
   Los tamaños van SOLO en escritorio: en el panel del teléfono (278 px) partían los nombres de los
   grupos. El chevrón sí vale en los dos anchos: es un significado, no un tamaño. */
.barral-seccion[aria-expanded="true"] .barral-chevron{transform:none}
.barral-seccion[aria-expanded="false"] .barral-chevron{transform:rotate(-90deg)}
@media (min-width:960px){
.barral-marca{padding:26px 20px 16px;min-height:92px}
.barral-marca .marca img{width:52px;height:52px}
.barral-marca .marca-texto b{font-size:25px;letter-spacing:.24em}
.barral-marca .marca-texto i{font-size:14px;letter-spacing:.36em;margin-top:5px}
.barral-plegar{opacity:0;transition:opacity .15s}
.barral:hover .barral-plegar,
.barral-plegar:focus-visible,
.barral.cerrado .barral-plegar{opacity:1}

.barral-buscar{margin:4px 18px 16px;width:calc(100% - 36px);padding:13px 14px;font-size:15.5px}
.barral-buscar svg{width:20px;height:20px}
.barral-crear{margin:0 18px 22px}
.barral-registrar{padding:15px 12px;font-size:17px}
.barral-registrar > svg:first-child{width:20px;height:20px}

.barral-nav{padding:0 14px 14px}
.barral-nav > .barral-item{gap:16px;padding:11px 10px;min-height:48px;font-size:16.5px;font-weight:500}
.barral-nav > .barral-item svg{width:24px;height:24px}
.barral-seccion{gap:16px;min-height:50px;font-size:16.5px}
.barral-seccion svg.contorno{width:24px;height:24px}
.barral-chevron{width:18px;height:18px}

.barral-grupo-items{margin:0 0 8px 21px;padding:2px 0 6px 12px}
.barral-grupo-items .barral-item{gap:13px;padding:9px 10px;min-height:44px;font-size:14.5px}
.barral-grupo-items .barral-item svg{width:20px;height:20px}
.barral-item.puesto{border-radius:9px}

.barral-rotulo{margin:18px 10px 10px;font-size:12px}
.barral-corte,.barral-filete{margin:14px 10px}
.barral-lema{font-size:12.5px;letter-spacing:.18em}
.barral.cerrado .barral-marca{padding:22px 10px 14px}
}

/* ── El menú en el teléfono (24-sep-2026) ──────────────────────────────────
   Hasta hoy la barra inferior llevaba las TREINTA Y UNA entradas del menú, una al
   lado de otra: 3 204 px de fila dentro de una caja de 375, sin desplazamiento y sin
   desbordamiento visible. Se veían las cinco primeras —la quinta ya cortada— y las
   veintiséis restantes no eran alcanzables desde un teléfono por ningún camino:
   inspecciones, no conformidades, planos, usuarios. Reportado desde producción.

   Y no daba ninguna señal: el desbordamiento estaba DENTRO de la barra, así que la
   página no tenía desplazamiento horizontal. Cualquier comprobación de «¿se sale algo?»
   medida sobre el documento salía limpia.

   El remedio no es encoger la letra ni dejar la fila desplazarse —treinta y un iconos en
   una tira horizontal no son un menú—. Abajo se quedan los destinos que el propio menú
   declara sueltos, que son a los que se vuelve, y el resto se alcanza por el mismo árbol
   de secciones del escritorio, abierto como panel. Un solo menú en los dos anchos: si
   aquí se listaran las entradas a mano, cada pantalla nueva nacería fuera del teléfono.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:959.98px){
  .barral.demano{
    display:flex;flex-direction:column;
    position:fixed;inset:0 auto 0 0;z-index:60;
    width:min(86vw,320px);background:var(--tinta);color:#fff}

  /* Plegar el menú es un gesto de escritorio —un panel de 68 px sería una columna de
     iconos sin nombre—, así que al abrirlo de mano se le quita la clase `cerrado` desde
     el guion. Neutralizarla aquí con `display:revert`, que fue el primer intento, es una
     trampa: `revert` devuelve el valor del NAVEGADOR y no el de esta hoja, de modo que
     `.barral-quien` —declarado `display:flex`— volvía a `inline`, y dentro de una caja
     inline no funcionan `overflow:hidden` ni `text-overflow`. El cargo de la cuenta salía
     243 px fuera del panel. */
  .barral.demano .barral-plegar{display:none}

  /* El panel deja ver la pantalla que hay detrás.
     ─────────────────────────────────────────────────────────────────────────
     A 320 px ocupaba el 83 % de un teléfono de 384 y el azul se leía como una pantalla
     nueva, no como un menú abierto encima de la anterior. Con algo menos de ancho, la
     esquina redondeada y la sombra, se ve de dónde se ha venido y por dónde se cierra. */
  .barral.demano{width:min(74vw,300px);
    border-radius:0 16px 16px 0;box-shadow:0 0 40px rgba(9,16,30,.45)}

  /* El desplegable de «Registrar» se ancla al LADO del menú (`left:calc(100% + 8px)`),
     que es lo correcto con el barral estrecho del escritorio. Abierto desde el panel de
     mano se iba 144 px fuera de la pantalla: «No conformidad» y «Material recibido»
     quedaban cortados por el borde y no se podían leer ni pulsar. Aquí cuelga del botón,
     hacia abajo y dentro del panel. */
  .barral.demano .menu-registrar{top:calc(100% + 8px);left:0;right:0;min-width:0}

  /* El dedo no acierta en 36 px con guante: las filas del panel crecen. */
  .barral.demano .barral-item{min-height:48px;padding:11px 12px}
  .barral.demano .barral-nav{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

  .velo-menu{position:fixed;inset:0;z-index:59;border:0;padding:0;
    background:rgba(9,16,30,.55);cursor:pointer}

  /* El botón vive en la barra inferior y se pinta como un destino más, porque es uno:
     lleva al resto del sistema. */
  .destino.abre-menu{background:none;border:0;font:inherit;cursor:pointer}
  .destino.abre-menu[aria-expanded="true"]{color:var(--tinta);font-weight:650}
}

/* ── La paleta de comandos ─────────────────────────────────────────────────
   Va arriba y no centrada: al escribir, la mirada ya está en la parte alta de
   la pantalla, y una caja centrada obliga a bajar los ojos justo cuando se está
   tecleando. */
.paleta{border:none;padding:0;border-radius:14px;width:min(560px,92vw);
  margin-top:calc(12 * var(--vh));background:#fff;box-shadow:0 24px 60px rgba(22,35,58,.28)}
.paleta::backdrop{background:rgba(22,35,58,.45)}
.paleta input{width:100%;border:none;border-bottom:1px solid var(--linea);border-radius:14px 14px 0 0;
  padding:16px 18px;font-size:16px;font-family:var(--sans);outline:none}
.paleta-lista{max-height:calc(46 * var(--vh));overflow-y:auto;padding:6px}
.paleta-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  text-decoration:none;color:var(--tinta);font-size:14.5px}
.paleta-item svg{width:17px;height:17px;fill:var(--tinta-media);flex:none}
.paleta-item span{flex:1}
.paleta-item i{font-style:normal;font-size:11.5px;color:var(--tinta-suave);
  letter-spacing:.04em;text-transform:uppercase}
.paleta-item.marcado{background:var(--papel)}
.paleta-item.marcado svg{fill:var(--tinta)}
.paleta-nada{padding:22px;text-align:center;color:var(--tinta-media);font-size:14px;margin:0}

/* País y obra LADO A LADO en la cabecera de las pantallas que eligen la obra arriba a la
   derecha —Entrega, Inicio, ITP, Pendientes— (27-sep-2026). Apilados, el bloque crecía hacia
   abajo, empujaba el título y dejaba un hueco a la izquierda. Los hijos quedan como País
   (rótulo, selector) y Obra (rótulo, caja): en dos filas y por columnas, cada rótulo cae sobre
   su control. En el teléfono vuelven a apilarse. */
.obra-elige.con-pais{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;
  grid-template-columns:minmax(150px,210px) minmax(0,1fr);column-gap:12px;width:min(680px,100%)}
.obra-elige.con-pais > select{width:100%;min-width:0;min-height:50px;font-size:15px;box-shadow:var(--carta-sombra)}
/* Cada control dentro de su columna: en Inicio el selector traía su propio ancho y el del país
   se montaba 135 px sobre la caja de la obra (medido el 27-sep-2026). */
.obra-elige.con-pais > .obra-caja{min-width:0}
@media (max-width:560px){
  .obra-elige.con-pais{grid-auto-flow:row;grid-template-columns:1fr}
}

/* ── Cabecera de pantalla con País y Obra (27-sep-2026) ───────────────────────
   El modelo es el Acta de entrega, a pedido del dueño y «sin excepción»: título y bajada a
   la izquierda; País y Obra lado a lado arriba a la derecha, a la altura del título. Cada
   pantalla pone <header class="cab-obra"> con .cab-titulos y .obra-elige, y sesion.js le
   añade el País delante. */
header.cab-obra{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;
  flex-wrap:wrap;padding:14px 0 18px;margin:0 0 4px}
header.cab-obra::after{display:none}
.cab-titulos{flex:1 1 340px;min-width:0}
.cab-titulos h1{font-size:clamp(24px,4.4vw,31px);font-weight:760;letter-spacing:-.025em;margin:0}
.cab-titulos p{margin:6px 0 0;font-size:16.5px;color:var(--tinta-media)}
.cab-obra .obra-elige{width:min(480px,100%)}
.cab-obra .obra-elige label{display:block;font-size:13px;color:var(--tinta-media);margin-bottom:5px}
.cab-obra .obra-caja{position:relative;min-width:0}
.cab-obra .obra-caja > svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--tinta-media);pointer-events:none}
.cab-obra .obra-caja select{width:100%;padding-left:48px;min-height:50px;font-size:15px;
  box-shadow:var(--carta-sombra)}

/* ── Paginación de las listas largas (27-sep-2026) ────────────────────────────
   La misma de la bandeja de Integración con el ERP en toda la suite: «Mostrando X de Y» a la
   izquierda y ‹ 1 2 3 › a la derecha. La pinta CivilQc.paginar, que en escritorio pone las
   filas que caben en la ventana. */
.pie-tabla{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.pie-tabla .cuantos{font-size:13.5px;color:var(--tinta-media)}
.pie-paginas{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pie-paginas button{min-width:36px;min-height:36px;padding:0 10px;background:#fff;color:var(--tinta);
  border:1px solid var(--linea);border-radius:var(--radio-chico);font-size:14px;font-weight:600;box-shadow:none}
.pie-paginas button.puesta{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.pie-paginas button:disabled{opacity:.4}
.pie-paginas .pie-salto{min-width:20px;text-align:center;color:var(--tinta-media)}
/* Con el País delante, la cabecera ensancha la caja a 680 px: la regla de .cab-obra .obra-elige
   (480) iba después con la misma especificidad y la anulaba, y el nombre de la obra salía
   recortado a ~258 px (medido el 27-sep-2026). */
.cab-obra .obra-elige.con-pais{width:min(680px,100%)}

/* País, Proyecto y Obra, siempre con su icono y por rango (dueño, 27-sep-2026): primero el
   País, después el Proyecto y al final la Obra. La caja con icono vale también fuera de la
   cabecera (.caja-icono); dentro, mandan las medidas de .cab-obra .obra-caja. Con Proyecto
   son tres columnas en vez de dos. */
.caja-icono{position:relative;min-width:0}
.caja-icono > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  color:var(--tinta-media);pointer-events:none}
.caja-icono select{width:100%;padding-left:44px}
.obra-elige.con-pais.con-proyecto{grid-template-columns:minmax(150px,200px) minmax(170px,250px) minmax(0,1fr)}
.cab-obra .obra-elige.con-pais.con-proyecto{width:min(900px,100%)}
@media (max-width:560px){
  .obra-elige.con-pais.con-proyecto{grid-template-columns:1fr}
}

/* ── El logotipo del menú, como el de la pantalla de sala (9-oct-2026) ─────────────
   «Cambia el logo del menú por el mismo de la pantalla de presentación del plano»: el símbolo
   con sus colores en un círculo blanco, y CIVIL / QC 360 en blanco. El símbolo es tinta oscura;
   el disco blanco es lo que le deja leerse sobre el marino, sin teñirlo con filtros. */
.barral-marca .marca img{filter:none;background:#fff;border-radius:50%;padding:7px;box-sizing:border-box;object-fit:contain;
  box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.barral-marca .marca-texto i{color:#fff}
@media (min-width:960px){
.barral-marca .marca img{width:58px;height:58px;padding:8px}
}
.barral.cerrado .barral-marca .marca img{width:38px;height:38px;padding:5px}

/* Botones de crear un registro («+ Nueva partida», «+ Imputar un costo»…): todos del mismo
   ancho (dueño, 9-oct-2026), para que en una pantalla con varios bloques no salga cada uno
   de su tamaño según lo largo del texto. */
button[id^="nuevo-"],button[id^="nueva-"],button[id^="btn-nuevo"],button[id^="btn-nueva"]{min-width:260px;justify-content:center;text-align:center}