/* BienTech · M0 · Identidad propia (el área de administración mantiene siempre identidad BienTech) */
:root {
  --tinta: #16323a; --tinta-suave: #4b6570; --fondo: #f4f6f5; --panel: #ffffff;
  --acento: #0e7c72; --acento-osc: #0a5f58; --linea: #dde5e3;
  --peligro: #b4373e; --aviso-fondo: #fdf6e7; --radio: 10px;
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--tinta); background: var(--fondo); }
.oculto { display: none !important; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0e3a3f 0%, #0e7c72 100%); padding: 1rem; }
.login-card { position: relative; background: var(--panel); border-radius: 14px; padding: 2.8rem 2.5rem; width: 100%; max-width: 448px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.login-card form { display: flex; flex-direction: column; gap: .95rem; }
/* Sello del fabricante (BeyondTech) en la esquina de la tarjeta; BienTech queda como título protagonista */
.marca-fabricante { position: absolute; top: 22px; left: 26px; height: 20px; width: auto; }
/* v128 · La barra de contexto de una empresa archivada se lee distinta: trabajar dentro de una
   empresa suspendida no puede parecerse a trabajar dentro de una activa. */
.ctx-empresa.ctx-archivada { border-left-color: #b08000; background: #fdf8ec; }
.aviso-archivada { margin: .6rem 0 0; font-size: .88rem; line-height: 1.5; color: #7a5a1e; }
.atenuado { opacity: .72; }
/* v129 · La marca de empresa archivada, en la barra superior y por tanto en todas las pantallas. */
.chip-archivada { display: inline-block; background: #fbf1d8; border: 1px solid #d9b64e; color: #7a5a1e;
  border-radius: 999px; padding: .18rem .7rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }
/* v129 · La línea de estado con su acción, el patrón de los centros llevado a la empresa. */
.linea-estado { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e6ebea; }
.linea-estado > span:first-child { flex: 1 1 22rem; line-height: 1.5; }
/* v129 · El rechazo que impide una acción se lee AL LADO del botón, no en una esquina de la pantalla. */
.error-junto { color: #a3282f; font-size: .88rem; line-height: 1.4; flex-basis: 100%; }
.error-junto:empty { display: none; }
.login-brand { text-align: center; margin: 1.4rem 0 1.9rem; }
.login-brand h1 { margin: .2rem 0 .35rem; letter-spacing: -.5px; font-size: 2.15rem; }
.tagline { color: var(--tinta-suave); font-size: .82rem; margin: 0; }
.logo-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--acento); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; }
.logo-mark.chico { width: 38px; height: 38px; font-size: 1.15rem; border-radius: 10px; flex: none; }
/* Logo real de BeyondTech (marca autora): color sobre fondo claro, símbolo blanco sobre la barra oscura */
.logo-beyond { height: 40px; width: auto; max-width: 100%; display: block; margin: 0 auto .9rem; }
.logo-simbolo { width: 34px; height: 34px; object-fit: contain; flex: none; }

/* Layout */
.app { display: flex; min-height: 100vh; }
/* v81 · El menú se queda a la vista por mucho que baje la pantalla. La del plan de acción llega a
   medir más de 20.000 píxeles: al bajar, los enlaces quedaban arriba, fuera de la ventana, y lo
   único que se veía era la franja oscura. Se pulsaba y no pasaba nada, que es exactamente
   «el menú no funciona». Con sticky y alto de ventana, la franja oscura que se ve SIEMPRE lleva
   sus enlaces dentro. */
.sidebar { width: 250px; flex: none; background: #10282e; color: #e8efee; display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.sidebar-brand { display: flex; gap: .65rem; align-items: center; padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand .mini { display: block; font-size: .6rem; color: #9db8b5; line-height: 1.35; margin-top: 2px; }
nav { flex: 1; padding: .6rem 0; }
nav a { display: block; padding: .6rem 1.1rem; color: #cfdedd; text-decoration: none; font-size: .92rem; border-left: 3px solid transparent; }
nav a:hover { background: rgba(255,255,255,.06); }
nav a.activo { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--acento); }
nav .nav-grupo { padding: .8rem 1.1rem .25rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #7f9a97; }
/* Menú de dos niveles (v12): cabecera de grupo desplegable + subapartados indentados */
nav .nav-grupo-cab { display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: 0;
  color: #dbe8e6; font: inherit; font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer;
  padding: .58rem 1.1rem; border-left: 3px solid transparent; }
nav .nav-grupo-cab:hover { background: rgba(255,255,255,.06); }
nav .nav-grupo-cab.abierto { color: #fff; }
nav .nav-grupo-cab .chev-nav { font-size: .7rem; width: .8rem; color: #8fb0ac; }
nav .nav-sub { padding: .1rem 0 .3rem; background: rgba(0,0,0,.14); }
nav .nav-sub a { padding-left: 2.3rem; font-size: .88rem; }
/* v108 · LAS ENTRADAS SUELTAS SE ALINEAN CON LOS GRUPOS (lo pidió Elena el 31-jul-2026). Una
   cabecera de grupo lleva delante su flecha, así que su texto empieza más a la derecha que el de una
   entrada suelta como «Resultados», y el menú se leía con dos márgenes izquierdos distintos en el
   mismo nivel. Las entradas sueltas reservan ahora el hueco de la flecha, sin pintarla: 1,1rem de
   margen más los 0,8rem de la flecha y los 0,45rem de separación, la misma cuenta que hace
   .nav-grupo-cab. Todos los rótulos de primer nivel caen en la misma vertical. */
nav a.nav-item { padding-left: calc(1.1rem + .8rem + .45rem); }
/* v109 · «Resultados» en negrita, con el mismo peso y el mismo color que las cabeceras de grupo
   (lo pidió Elena el 31-jul-2026). Es la única entrada de primer nivel sin desplegable que forma
   parte del recorrido de trabajo, y al lado de «Evaluación» y «Plan de acción» se leía más ligera,
   como si fuera de otro nivel. El bloque de abajo (Documentación, Catálogo de medidas y
   Administración) se queda como está, por decisión suya: eso se consulta, no se trabaja. */
nav a#nav-resultados { font-weight: 600; color: #dbe8e6; }
/* v65 · Separador sin rótulo. Mismo aire arriba y abajo que el que tiene hoy el rótulo BEYONDTECH,
   para que las dos separaciones del menú pesen igual, y el mismo color de línea que usa la barra
   lateral. Con margen lateral: no debe tocar los bordes. */
nav .nav-separador { height: 0; margin: .8rem 1.1rem; border-top: 1px solid rgba(255,255,255,.10); }
/* La que va justo encima del rótulo BEYONDTECH no pone aire por debajo: ya lo pone el propio
   rótulo, y así el hueco entre línea y texto es el mismo que en la otra separación. */
nav .nav-separador.junto-rotulo { margin-bottom: 0; }
.sidebar-user { padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; color: #cfdedd; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
/* Columna principal: barra superior fija de contexto + contenido (v31) */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem clamp(1rem, 3vw, 2.4rem); background: var(--panel); border-bottom: 1px solid var(--linea);
  min-height: 52px; position: sticky; top: 0; z-index: 20; }
.topbar-ctx { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.topbar-user { display: flex; align-items: center; gap: .9rem; font-size: .82rem; color: var(--tinta-suave); }
.topbar-user #usuario-info { text-align: right; line-height: 1.25; }
.topbar-user .btn.enlace { color: var(--acento-osc); font-weight: 600; font-size: .84rem; }
.modo-chip { display: inline-flex; align-items: center; gap: .3rem; background: #f3e8fb; color: #5a3080;
  border: 1px solid #e2d4f3; border-radius: 20px; padding: .22rem .7rem; font-size: .8rem; }
/* En modo gestora la barra cambia de color para dejar claro el contexto */
.en-modo-gestora .topbar { background: #f7f0fc; border-bottom-color: #e2d4f3; }
.btn.enlace.claro { color: #6c3e91; }
.btn.secundario { background: #fff; border-color: var(--acento); color: var(--acento-osc); font-weight: 600; }
.btn.secundario:hover { background: var(--acento); color: #fff; }
.ctx-acciones { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; align-items: flex-start; }
.contenido { flex: 1; padding: 1.6rem clamp(1rem, 3vw, 2.4rem); max-width: 1100px; }

/* Componentes */
h2.titulo { margin: 0 0 .25rem; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 1.2rem; font-size: .92rem; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.4rem; margin-bottom: 1.1rem; }
.tarjeta h3 { margin: 0 0 .8rem; font-size: 1.02rem; }
.fila-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: .8rem; align-items: end; }
label { display: flex; flex-direction: column; gap: .28rem; font-size: .82rem; color: var(--tinta-suave); font-weight: 600; }
input, select, textarea { padding: .55rem .65rem; border: 1px solid var(--linea); border-radius: 7px; font-size: .92rem; font-family: inherit; background: #fff; color: var(--tinta); }
/* v87 · Un campo de texto largo no debe obligar a leer por una rendija. Crece con lo que se escribe
   (lo ajusta autoAlto en app.js) y por eso lleva overflow:hidden: la barra de desplazamiento interna
   sobra cuando la casilla ya tiene el alto del contenido. `resize:vertical` deja además estirarla a
   mano. Es el mismo comportamiento que la pantalla de trabajo del plan ya tenía desde la v79. */
textarea.crece { resize: vertical; overflow: hidden; min-height: 2.4rem; line-height: 1.35; width: 100%; overflow-wrap: anywhere; }
/* Lo mismo para el texto ya escrito que se enseña sin poder editarlo: una tira larga sin espacios
   no debe empujar la tarjeta fuera de la pantalla. */
.plan-med, .med-trab, .plan-seguim { overflow-wrap: anywhere; }
.plan-med-form label, .plan-seguim label { min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.btn { border: 1px solid var(--linea); background: #fff; color: var(--tinta); padding: .5rem .95rem; border-radius: 8px; cursor: pointer; font-size: .88rem; font-family: inherit; }
.btn:hover { border-color: var(--acento); color: var(--acento-osc); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn.primario:hover { background: var(--acento-osc); color: #fff; }
/* v114 · UN BOTÓN APAGADO TIENE QUE PARECERLO. No había ninguna regla general para `disabled`, solo
   tres sueltas en pantallas concretas, así que un botón deshabilitado se seguía viendo verde y
   sólido: la persona lo pulsa, no pasa nada y parece que el sistema está roto. Lo detectó Elena el
   31-jul en el informe de varios centros, donde el botón se apaga hasta que hay dos evaluaciones
   marcadas. La regla es general porque el problema lo era. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { border-color: var(--linea); color: var(--tinta); }
.btn.primario:disabled:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.enlace { border: none; background: none; color: #9fc5c1; padding: 0; text-decoration: underline; }
.btn.peligro { color: var(--peligro); }
.btn.ancho { width: 100%; }
.error { background: #fbeaea; color: var(--peligro); border-radius: 7px; padding: .55rem .7rem; font-size: .85rem; margin-bottom: .7rem; }
.aviso { background: var(--aviso-fondo); border: 1px solid #ecd9a8; border-radius: 7px; padding: .55rem .7rem; font-size: .85rem; }
.etiqueta { display: inline-block; font-size: .72rem; padding: .12rem .5rem; border-radius: 20px; background: #e4efed; color: var(--acento-osc); font-weight: 600; }
.etiqueta.demo { background: #f3e8fb; color: #6c3e91; }
.etiqueta.gris { background: #eceff0; color: var(--tinta-suave); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); padding: .45rem .55rem; border-bottom: 2px solid var(--linea); }
td { padding: .5rem .55rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.lista-simple li.atenuado { opacity: .6; }
.acciones-fila { display: inline-flex; gap: .4rem; flex-shrink: 0; }
.opciones-empresa { display: flex; flex-direction: column; gap: .5rem; }
.opcion-check { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; }
.opcion-check input { width: auto; margin: 0; flex-shrink: 0; }
.modal-fondo { position: fixed; inset: 0; background: rgba(20,30,30,.45); display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; z-index: 50; overflow: auto; }
.modal-panel { background: #fff; border-radius: 12px; padding: 1.2rem 1.4rem; max-width: 720px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal-pie { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
/* v121 · El cuerpo de una confirmación que tiene algo que leer antes de decidir. */
.modal-cuerpo { margin-top: .7rem; font-size: .9rem; line-height: 1.5; }
.modal-cuerpo ul { margin: .6rem 0 0; }
.frase-motiva { margin: .9rem 0 0; font-style: italic; color: var(--tinta-suave); font-size: .92rem; line-height: 1.4; text-align: center; }
.placeholder { text-align: center; padding: 3.2rem 1rem; color: var(--tinta-suave); }
.placeholder .grande { font-size: 2rem; margin-bottom: .5rem; }
.color-muestra { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--linea); display: inline-block; vertical-align: middle; }
.logo-preview { max-height: 46px; max-width: 150px; border: 1px solid var(--linea); border-radius: 6px; padding: 3px; background: #fff; }
.pie-nota { font-size: .78rem; color: var(--tinta-suave); margin-top: .5rem; }

/* Móvil */
@media (max-width: 760px) {
  .app { flex-direction: column; }
  /* En móvil el menú va arriba en horizontal: ahí no se fija, se desplaza con la página. */
  .sidebar { width: 100%; position: static; height: auto; align-self: stretch; overflow: visible; }
  nav { display: flex; flex-wrap: wrap; padding: .2rem; }
  nav a { border-left: none; border-bottom: 3px solid transparent; padding: .5rem .7rem; font-size: .84rem; }
  nav a.activo { border-left: none; border-bottom-color: var(--acento); }
  nav .nav-grupo { display: none; }
  nav .nav-separador { display: none; }
  nav .nav-grupo-cab { width: auto; border-left: none; padding: .5rem .7rem; font-size: .84rem; }
  nav .nav-sub { width: 100%; display: flex; flex-wrap: wrap; padding: 0; background: rgba(0,0,0,.18); }
  nav .nav-sub a { padding-left: .9rem; }
  .contenido { padding: 1rem; }
  .ctx-fila { flex-direction: column; align-items: stretch; }
}

/* M3 · Resultados: barras de distribución por bandas */
.distri { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--linea); margin-top: .5rem; }
.distri span { display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 600; color: #fff; min-width: 0; }
.seg-bajo { background: #a9c3bb; color: #2e4a44 !important; }
.seg-atencion { background: #e2ae55; color: #4e3a10 !important; }
.seg-alto { background: #d97941; }
.seg-muy_alto { background: #b4373e; }
.chip-bajo, .chip-atencion, .chip-alto, .chip-muy_alto { display: inline-block; padding: .05rem .5rem; border-radius: 4px; font-size: .72rem; font-weight: 600; }
.chip-bajo { background: #a9c3bb; color: #2e4a44; }
.chip-atencion { background: #e2ae55; color: #4e3a10; }
.chip-alto { background: #d97941; color: #fff; }
.chip-muy_alto { background: #b4373e; color: #fff; }
.nivel-atencion { background: #f6e8cd; color: #7a5a14; }
.nivel-alto { background: #f4ddd0; color: #8a4520; }
.nivel-muy_alto { background: #f3d2d4; color: #7c1f26; }
.dim-card { border-left: 4px solid transparent; }
.dim-card.entra { border-left-color: var(--acento); }
.dim-cab { display: flex; justify-content: space-between; gap: 1rem; align-items: start; flex-wrap: wrap; }

/* M3+ · Mapa de las 16 dimensiones */
.matriz-dim { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.tile { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .6rem; border-radius: 9px; text-decoration: none;
  min-height: 64px; justify-content: center; border: 1px solid rgba(0,0,0,.06); transition: transform .12s; }
.tile:hover { transform: translateY(-2px); }
.tile strong { font-size: .78rem; opacity: .85; }
.tile span { font-size: .74rem; line-height: 1.25; font-weight: 600; }
.tile em { font-size: .64rem; font-style: normal; opacity: .85; }
.tile-bajo { background: #dfe9e5; color: #2e4a44; }
.tile-atencion { background: #e2ae55; color: #3d2d0a; }
.tile-alto { background: #d97941; color: #fff; }
.tile-muy_alto { background: #b4373e; color: #fff; }
.tile-nd { background: #eceff0; color: var(--tinta-suave); }

/* Pase de ligereza visual (petición Elena 18-jul): menos peso, más aire */
body { font-weight: 400; }
h2.titulo { font-weight: 600; letter-spacing: -.01em; }
.h-suave { font-weight: 600; font-size: .95rem; color: var(--tinta); }
label { font-weight: 500; font-size: .78rem; }
th { font-weight: 600; }
.tarjeta { padding: 1.25rem 1.5rem; margin-bottom: 1.2rem; box-shadow: 0 1px 2px rgba(22,50,58,.04); }
.tarjeta h3 { font-weight: 600; }
strong { font-weight: 600; }
.kpis { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: .9rem; }
/* v125 · LAS CIFRAS DE RESULTADOS NO SON BOTONES, Y NO DEBEN PARECERLO.
   Se llamaban `.kpi`, igual que los contadores de Seguimiento, que SÍ son botones y SÍ filtran. Como
   aquella regla se define después, ganaba: les prestaba la caja, el cursor de mano, el resaltado al
   pasar por encima y hasta el subrayado de puntos que allí significa «esto se pulsa». Elena las pulsó
   esperando que hicieran algo. Dos cosas distintas no pueden llamarse igual: aquí ni siquiera hacía
   falta cambiar comportamiento, solo dejar de mentir sobre él. */
.cifra-res { display: flex; flex-direction: column; }
.cifra-res .kpi-texto { display: flex; align-items: center; gap: .1rem; }
.kpi-cifra { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.kpi-texto { font-size: .74rem; color: var(--tinta-suave); }
.sumario-suave { cursor: pointer; font-weight: 500; font-size: .9rem; color: var(--tinta); }
.desglose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .4rem 1.4rem; margin-top: .5rem; }
.tabla-suave { font-size: .82rem; margin-top: .3rem; }
.tabla-suave td { padding: .3rem .4rem; border-bottom: 1px solid #eef2f1; font-weight: 400; }
.fila-filtrada td { background: #eef7f5; font-weight: 600; }
.tile span { font-weight: 500; }
.dim-card strong { font-weight: 600; }
@media (max-width: 760px) {
  :root { font-size: 14.5px; }
  body { font-weight: 400; }
  .kpis { gap: 1.1rem; }
  .tarjeta { padding: 1rem 1.05rem; }
}

/* Comparar colectivos */
.pestanas { display: flex; gap: .4rem; margin-bottom: 1rem; }
.pest { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: .38rem 1rem; font-size: .85rem; cursor: pointer; color: var(--tinta-suave); font-family: inherit; }
.pest.activa { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.tabla-cmp { min-width: 520px; }
.tabla-cmp td, .tabla-cmp th { font-size: .84rem; }
.fila-cmp { cursor: pointer; }
.fila-cmp:hover td:first-child { color: var(--acento-osc); }
.cmp-bajo { background: #eaf1ee; color: #2e4a44; }
.cmp-atencion { background: #f6e3bd; color: #4e3a10; }
.cmp-alto { background: #f0c4ab; color: #6e3517; }
.cmp-muy_alto { background: #ecb6ba; color: #6e1218; }
.cmp-nd { background: #f0f2f3; color: var(--tinta-suave); }
/* Icono de ayuda: globo emergente con el texto explicativo */
.ayuda { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #e4efed; color: var(--acento-osc);
  font-size: .72rem; font-weight: 700; cursor: help; vertical-align: middle; margin-left: .3rem; user-select: none; }
/* v117 · El globo cuelga del body en posición FIJA, no del icono. Dentro del icono lo recortaba
   cualquier contenedor con overflow por encima, y en la tabla de trabajo del plan había dos: el
   details de la dimensión y el desplazamiento horizontal de la propia tabla. Su sitio en pantalla
   lo calcula ayudaMostrar() en app.js, que además lo mantiene dentro de la ventana. */
.ayuda-globo { display: none; position: fixed; z-index: 200;
  width: min(22rem, 90vw); background: var(--tinta); color: #fff; font-size: .78rem; font-weight: 400;
  line-height: 1.45; padding: .55rem .7rem; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  white-space: normal; text-transform: none; letter-spacing: normal; text-align: left;
  pointer-events: none; }
.chip-candado { font-size: .72rem; padding: .12rem .5rem; border-radius: 20px; background: #f0f2f3; color: var(--tinta-suave); font-weight: 600; white-space: nowrap; }
/* v115 · nowrap: en las celdas estrechas de los índices de participación el rótulo «menos de 7»
   se partía en dos líneas y quedaba «menos de» / «7». Es el chip que sustituye al candado. */
/* Mapa de dimensiones en líneas: código + barra 0-100% + entrada al plan */
.mapa-lineas { display: flex; flex-direction: column; gap: .12rem; }
.fila-mapa { display: grid; grid-template-columns: 2.6rem 1fr 7.4rem; gap: .6rem; align-items: center;
  text-decoration: none; color: var(--tinta); padding: .16rem .3rem; border-radius: 6px; }
a.fila-mapa:hover { background: #eef3f1; }
.fila-mapa .cod-dim { font-size: .8rem; cursor: help; }
.fila-mapa .distri-mini { margin-top: 0; }
.barra-mapa { min-width: 0; }
.plan-mapa { text-align: right; }
/* Barras de distribución compactas (mapa de dimensiones y matriz comparativa) */
.distri-mini { height: 1rem; margin-top: .3rem; border-radius: 5px; }
.distri-mini span { font-size: .6rem; }
.tile-neutro { background: #fff; border: 1px solid var(--linea); color: var(--tinta); }
.celda-distri { min-width: 130px; }
.celda-distri .distri-mini { margin-top: 0; }
.n-mini { display: block; font-size: .62rem; color: var(--tinta-suave); margin-top: .12rem; }
/* Comparador de centros/evaluaciones en vertical (Elena 19-jul) */
.bloque-dim { border-top: 1px solid var(--linea); padding: .3rem 0 .4rem; }
.linea-dim { display: flex; align-items: center; cursor: pointer; padding: .2rem .2rem; border-radius: 6px; font-size: .9rem; }
.linea-dim:hover { background: #eef3f1; }
.linea-centro, .linea-subcentro, .linea-part { display: grid; grid-template-columns: 17rem 1fr; gap: .6rem; align-items: center; padding: .16rem .2rem; }
.linea-subcentro .nombre-linea { padding-left: 2.4rem; }
.nombre-linea { font-size: .78rem; color: var(--tinta-suave); padding-left: 1.2rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linea-part .nombre-linea { padding-left: 0; font-weight: 600; color: var(--tinta); }
.part-barra { display: flex; height: 1rem; border-radius: 5px; overflow: hidden; background: var(--linea); }
.part-barra span { display: flex; align-items: center; justify-content: center; background: var(--acento); color: #fff; font-size: .6rem; font-weight: 600; }
/* Desglose en sub-líneas (Comparar colectivos) */
.chev { cursor: pointer; display: inline-block; width: 1.05rem; color: var(--tinta-suave); user-select: none; }
.chev:hover { color: var(--acento-osc); }
.fila-sub td { font-size: .78rem; }
.fila-sub .sub-nombre { padding-left: 1.6rem; color: var(--tinta-suave); }
.fila-sub .celda-sub { opacity: .92; }

/* Campo de contraseña con botón de mostrar/ocultar */
.campo-clave { position: relative; display: block; }
.campo-clave input { width: 100%; padding-right: 5.2rem; }
.ver-clave {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--linea); background: #fff; color: var(--tinta-suave);
  font-size: .72rem; font-family: inherit; line-height: 1;
  padding: .3rem .5rem; border-radius: 4px; cursor: pointer;
}
.ver-clave:hover { color: var(--acento); border-color: var(--acento); }
.ver-clave:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Autocompletado CNAE */
.cnae-lista { display:flex; flex-direction:column; max-height:260px; overflow-y:auto; border:1px solid var(--linea); border-radius:6px; margin-top:.3rem; }
.cnae-lista:empty { display:none; }
.cnae-op { text-align:left; background:#fff; border:none; border-bottom:1px solid var(--linea); padding:.45rem .6rem; cursor:pointer; font:inherit; }
.cnae-op:last-child { border-bottom:none; }
.cnae-op:hover, .cnae-op:focus { background:var(--fondo-suave, #eef4f3); }

/* Módulo Evaluación (v12): barra de contexto compartida (centro + evaluación + crear) */
.ctx-eval { background: #eaf3f1; border: 1px solid var(--linea); border-left: 4px solid var(--acento);
  border-radius: var(--radio); padding: .7rem .9rem; margin-bottom: 1rem; }
.ctx-fila { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.ctx-fila label { font-size: .78rem; color: var(--tinta-suave); font-weight: 600; }
.ctx-fila select { min-width: 12rem; }

/* Indicador de contexto fijo en Resultados/Plan/Informe (qué centro/evaluación se mira) */
.ctx-indicador { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.ctx-tag { background: #eaf3f1; border: 1px solid var(--linea); border-radius: 999px;
  padding: .25rem .7rem; font-size: .82rem; color: var(--tinta-suave); }
.ctx-tag strong { color: var(--tinta); }

/* Contexto de empresa activa del superadmin (Beyondtech) */
.ctx-empresa { background: #f3eefb; border: 1px solid #e2d4f3; border-left: 4px solid #6c3e91;
  border-radius: var(--radio); padding: .7rem .9rem; margin-bottom: 1rem; }
.ctx-empresa select { min-width: 16rem; }

/* Descripción del CNAE (denominación de la actividad) bajo el código */
.cnae-desc { display: block; color: var(--tinta-suave); font-size: .85rem; margin-top: .15rem; }

/* M5 · Plan de acción */
.plan-versiones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.plan-dim { margin-top: 1rem; }
.plan-dim-cab { border-bottom: 1px solid var(--linea); padding-bottom: .5rem; margin-bottom: .6rem; }
.banda { display: inline-block; font-size: .72rem; padding: .1rem .5rem; border-radius: 20px; font-weight: 700; margin-left: .4rem; }
.banda.atencion { background: #fff3cd; color: #856404; }
.banda.alto { background: #ffe0b2; color: #a35200; }
.banda.muy_alto { background: #f8d7da; color: #a12028; }
.plan-med { border: 1px solid var(--linea); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .5rem; }
.plan-med-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.plan-med-acc { display: flex; gap: .3rem; flex-shrink: 0; }
.plan-med-datos { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.plan-med-datos > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.plan-med-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .5rem; }
.plan-med-form label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; gap: .2rem; }
.aviso-dedup { background: #fff3cd; border: 1px solid #ecd9a8; border-radius: 7px; padding: .5rem .7rem; font-size: .85rem; }
.aviso-obl { color: #a12028; font-weight: 600; }
.nota-motor { background: #eef6f4; border-left: 3px solid var(--acento); }
.ok-linea { color: var(--acento-osc); font-weight: 600; }

/* M5.1 · plan: chips de versión y seguimiento */
.plan-vchip { text-align: left; padding: .4rem .6rem; line-height: 1.2; border: 1px solid var(--linea); border-radius: 8px; background: #fff; cursor: pointer; }
.plan-vchip.activo { border-color: var(--acento); background: #eef6f4; }
.plan-vchip:disabled { opacity: .6; cursor: default; }
.plan-seguim { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; background: #f6faf9; border-radius: 8px; padding: .5rem .6rem; }
.plan-seguim label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 600; gap: .2rem; }
/* v87 · «Valor alcanzado» es donde se escribe el resultado real, y a veces es una frase. Se le da
   sitio para crecer a lo ancho antes de que tenga que crecer a lo alto. */
.plan-seguim .alc { flex: 0 1 260px; min-width: 180px; max-width: 320px; }
.btn.enlace.peligro { color: #a12028; }

/* M5.2 · plan: dimensiones plegables */
.plan-dim-head { display: flex; align-items: baseline; gap: .45rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 1rem; padding: .15rem 0; color: var(--tinta); }
.plan-dim-head .chev { color: var(--acento); font-weight: 700; }
.plan-dim-head:hover { color: var(--acento-osc); }
.plan-dim-body { margin-top: .6rem; }

/* M5.4 · correspondencia con factores psicosociales generales */
.plan-corr { margin:.5rem 0; padding:.5rem .7rem; background:#f3f7f6; border-left:3px solid var(--acento); border-radius:6px; }
.plan-corr strong { font-size:.9rem; }
.plan-corr p { margin:.3rem 0 0; font-size:.85rem; }

/* M5.4 · bloque consolidado dimensiones ↔ factores psicosociales */
.plan-corr-bloque { border-left: 3px solid var(--acento); }
.corr-fila { padding: .5rem 0; border-top: 1px solid var(--linea); }
.corr-fila:first-of-type { border-top: none; }
.corr-fila p { margin: .25rem 0 0; font-size: .87rem; }

/* M5.4 · bloque correspondencia: plegable y diferenciado por color */
.plan-corr-bloque { background: #eef2f7; border-left: 3px solid #5b7fa6; }
.plan-corr-head { display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 1rem; padding: .15rem 0; color: var(--tinta); }
.plan-corr-head .chev { color: #5b7fa6; font-weight: 700; }
.plan-corr-body { margin-top: .5rem; }

/* M5.4 · correspondencia: dimensiones plegables dentro del bloque + factores en bullets */
.corr-dim-head { display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: .35rem 0; font-size: .95rem; color: var(--tinta); }
.corr-dim-head:hover { color: var(--acento-osc); }
.corr-dim-head .chev { color: #5b7fa6; font-weight: 700; }
.corr-dim-body { padding: .1rem 0 .6rem 1.3rem; }
.corr-desc { margin: .2rem 0 .7rem; font-size: .87rem; }
.corr-fact-label { margin: .2rem 0 .25rem; font-weight: 600; font-size: .82rem; }
.corr-fact { margin: 0 0 .3rem 1.2rem; padding: 0; }
.corr-fact li { font-size: .84rem; margin: .2rem 0; }

/* M5.4 · acción general (evaluación psicosocial) diferenciada */
.plan-dim-ag { border-left: 3px solid #c8871f; background: #fdf7ec; }

/* ---- Dashboard cualitativo de comentarios (pestaña "Comentarios") ---- */
.aviso-cualif { background: #eef5f4; border: 1px solid #d3e3e0; border-left: 3px solid var(--acento); border-radius: 8px; padding: .7rem .9rem; font-size: .82rem; color: var(--tinta-suave); margin-bottom: 1.1rem; line-height: 1.45; }
/* v109 · Aquí vivían la textura emocional, el termómetro de tono, las palabras con más carga y
   la etiqueta de tono de cada comentario. Se van con el análisis de tono. Lo que queda del
   panel usa .mini-bar (las dimensiones), .lista-coment y .tag-dim. */
.mini-bar { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; }
.mini-lbl { flex: 0 0 42%; font-size: .82rem; color: var(--tinta); }
.mini-track { flex: 1; height: 10px; background: #eceff0; border-radius: 6px; overflow: hidden; }
.mini-track i { display: block; height: 100%; background: var(--acento); border-radius: 6px; }
.mini-n { flex: 0 0 auto; font-size: .78rem; color: var(--tinta-suave); font-weight: 600; min-width: 1.4rem; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-block; padding: .2rem .6rem; border-radius: 20px; background: #eef2f1; color: var(--tinta); font-size: .8rem; border: 1px solid var(--linea); }
.filtros-lectura { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-bottom: .8rem; }
.filtros-lectura label { font-size: .76rem; }
.filtros-lectura select { min-width: 9rem; }
.lista-coment { list-style: none; margin: 0; padding: 0; }
.lista-coment li { padding: .55rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; line-height: 1.45; }
.coment-tags { display: inline-flex; gap: .3rem; margin-right: .4rem; vertical-align: middle; }
.tag-dim { display: inline-block; padding: .05rem .4rem; border-radius: 4px; font-size: .68rem; font-weight: 700; background: #e4efed; color: var(--acento-osc); }

/* --- v51 · Confirmaciones flotantes ---------------------------------------------------------
   Los avisos de "guardado", "copiado" o de error vivían dentro del área de contenido, así que
   cualquier acción que redibujara la pantalla los borraba antes de que diera tiempo a leerlos.
   Ahora cuelgan del body y se posicionan fijos: ningún redibujado los alcanza. */
.tostada-zona { position: fixed; right: 1.4rem; bottom: 1.4rem;
  z-index: 60; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end;
  pointer-events: none; max-width: min(90vw, 26rem); }
.tostada { pointer-events: auto; border-radius: 9px; padding: .6rem .95rem; font-size: .87rem;
  box-shadow: 0 6px 22px rgba(20, 40, 45, .18); animation: tostada-entra .16s ease-out;
  background: var(--acento); color: #fff; border: none; }
.tostada.mal { background: #fbeaea; color: var(--peligro); border: 1px solid #f0cccc; }
/* v119 · El aviso se puede cerrar con un clic, y el que informa de datos tocados se queda hasta que
   lo cierren. Antes duraban 2,6 segundos todos por igual y los largos no daba tiempo a leerlos. */
/* v119 · EL NOMBRE DEL CENTRO Y SU UBICACIÓN, EN LÍNEAS DISTINTAS.
   Iban pegados con un espacio, así que un centro llamado «Delegación» con población «Madrid» se leía
   igual que otro llamado «Delegación Madrid»: dos centros con nombres distintos, indistinguibles en
   pantalla. Elena creyó que el sistema le había dejado duplicar un nombre, y lo que había era esto.
   El nombre es lo que manda (el acceso por centro y los resultados se distinguen por él), así que va
   solo en su línea y la ubicación debajo. */
.centro-linea { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.centro-nombre { font-weight: 600; }
.tostada { cursor: pointer; }
.tostada.fija { padding-bottom: .5rem; }
.tostada-x { display: block; margin-top: .45rem; background: transparent; border: 0; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 600; text-decoration: underline; cursor: pointer;
  color: inherit; opacity: .8; }
.tostada-x:hover { opacity: 1; }
.tostada strong { font-weight: 700; }
@keyframes tostada-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* En pantalla estrecha, centrado y a lo ancho: hay menos sitio para esquinas. */
@media (max-width: 620px) { .tostada-zona { left: .8rem; right: .8rem; bottom: .8rem; align-items: stretch; max-width: none; } }

/* Botón que acaba de completar su acción: "Guardar" pasa a "Guardado" durante un par de segundos.
   Es la confirmación donde la persona está mirando: el propio botón que ha pulsado. */
.btn.btn-hecho, button.btn-hecho { background: var(--acento) !important; color: #fff !important;
  border-color: var(--acento) !important; }

/* v57 · Tablas anchas (universo, listados con muchas variables).
   El número de columnas no tiene tope: la empresa puede añadir variables propias. Sin esto, la
   tabla empuja el marco de la aplicación hacia fuera. Con esto, el desbordamiento se queda dentro
   de su tarjeta: se desplaza a lo ancho, con la cabecera y la primera columna fijas de referencia. */
.tabla-ancha { overflow: auto; max-width: 100%; max-height: 65vh; border: 1px solid var(--linea); border-radius: 6px; }
.tabla-ancha table { width: auto; min-width: 100%; }
.tabla-ancha th, .tabla-ancha td { white-space: nowrap; }
.tabla-ancha thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.tabla-ancha th:first-child, .tabla-ancha td:first-child { position: sticky; left: 0; background: var(--panel); }
.tabla-ancha thead th:first-child { z-index: 3; }
.tabla-ancha td:first-child { border-right: 1px solid var(--linea); }

/* v62 · Kit de alta: los pasos numerados de «cómo se usa».
   v65 · Los pasos van dentro de su propia caja, con la numeración en círculo de la hoja de puesta en
   marcha, para que no queden colgando del final de la tarjeta. */
.pasos-caja { margin-top: 1rem; border: 1px solid var(--linea); border-radius: 8px; background: #fafcfb; }
.pasos-caja > summary { list-style: none; cursor: pointer; padding: .6rem .85rem;
  font-size: .88rem; font-weight: 600; color: var(--tinta); display: flex; align-items: center; gap: .5rem; }
.pasos-caja > summary::-webkit-details-marker { display: none; }
.pasos-caja > summary:hover { color: var(--acento-osc); }
.pasos-caja .chev-pasos { color: var(--acento); font-size: .75rem; transition: transform .15s; display: inline-block; }
.pasos-caja[open] .chev-pasos { transform: rotate(90deg); }
.pasos-caja[open] > summary { border-bottom: 1px solid var(--linea); }
.pasos-cuerpo { padding: .8rem .95rem 0; }
/* Remite a otro documento: no es un paso más, así que se separa en una franja propia al pie de la
   caja, centrada, para que se lea como una nota aparte y no como la coletilla del punto 7. */
.nota-remite { margin: .9rem -.95rem 0; padding: .6rem 1.1rem; text-align: center;
  border-top: 1px solid var(--linea); background: #f1f5f4; color: var(--tinta-suave);
  font-size: .78rem; line-height: 1.45; border-radius: 0 0 7px 7px; }
.pasos-kit { margin: 0; padding: 0; list-style: none; counter-reset: pk; font-size: .88rem; }
.pasos-kit li { counter-increment: pk; position: relative; padding: 0 0 .55rem 1.9rem; line-height: 1.45; }
.pasos-kit li:last-child { padding-bottom: 0; }
.pasos-kit li::before { content: counter(pk); position: absolute; left: 0; top: .05rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--acento); color: #fff;
  font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.25rem; }

/* v63 · Documentación: lista de manuales y material, con su botón a la derecha. */
.doc-lista { list-style: none; margin: .6rem 0 0; padding: 0; }
.doc-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.doc-fila:last-child { border-bottom: 0; }
.doc-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.doc-txt .pie-nota { margin: 0; }
/* v64 · Documentación: lo que sale hacia la empresa y lo que se queda dentro no pueden parecer lo
   mismo. La tarjeta interna se marca con una franja y un fondo apagado, sin gritar en rojo. */
.tarjeta.interna { border-left: 4px solid #7d8a86; background: #f6f8f8; }
.tarjeta.interna h3 { display: flex; align-items: baseline; gap: .6rem; }
.marca-interna { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #5c6b67; border: 1px solid #c3ceca; border-radius: 3px; padding: .1rem .4rem; font-weight: 600; }
/* v65 · El correo de solicitud de datos se ve entero y se puede retocar antes de copiarlo. Lo que
   se edita vale solo para ese envío: no se guarda. */
.correo-kit { display: block; width: 100%; margin-top: .6rem; padding: .7rem .8rem;
  border: 1px solid var(--linea); border-radius: 7px; background: #fff; color: var(--tinta);
  font-family: inherit; font-size: .88rem; line-height: 1.5; resize: vertical; }
.correo-kit:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }

/* v79 · Pantalla de trabajo del plan (miniespec v06 §3): el centro es una columna dentro de cada
   medida. Nada se pliega para esconder campos; lo que se pliega son dimensiones enteras. */
.cent-sel { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin:.2rem 0 .6rem; }
.cent-sel label { font-size:.83rem; display:flex; gap:.35rem; align-items:center;
  border:1px solid var(--linea); border-radius:20px; padding:.13rem .65rem; background:#fff; }
.cent-sel input { width:auto; }
.huecos-barra { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin:.1rem 0 .6rem; }
.huecos-barra button { border:1px solid var(--linea); background:#fff; border-radius:20px;
  padding:.22rem .68rem; font:inherit; font-size:.79rem; cursor:pointer; color:var(--tinta); }
.huecos-barra button:hover { border-color:var(--acento); color:var(--acento-osc); }
.huecos-barra button.on { background:var(--acento); color:#fff; border-color:var(--acento); }
.barra-trab { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
.barra-trab select, .barra-trab input { width:auto; display:inline-block; }
details.dim-trab { border:1px solid var(--linea); border-radius:10px; margin-bottom:.5rem; overflow:hidden; background:#fff; }
details.dim-trab > summary { cursor:pointer; padding:.55rem .75rem; background:#f7fafa; font-weight:600;
  font-size:.88rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
details.dim-trab > summary::-webkit-details-marker { display:none; }
details.dim-trab[open] > summary { border-bottom:1px solid var(--linea); }
/* v109 · Aquí estaba .ayuda-dim, el párrafo que encabezaba cada dimensión del plan. Retirado
   por decisión de Elena: repetido dieciséis veces ensuciaba más de lo que ayudaba. */
.med-trab { padding:.7rem .75rem; border-bottom:1px solid #eef2f3; }
.med-trab:last-child { border-bottom:none; }
.med-cab { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.2rem; font-size:.92rem; }
.med-desc { font-size:.83rem; color:var(--tinta-suave); margin:.1rem 0 .5rem; }
table.tabla-trab { width:100%; border-collapse:collapse; font-size:.85rem; }
table.tabla-trab th, table.tabla-trab td { border:1px solid var(--linea); padding:.25rem .35rem; vertical-align:top; }
table.tabla-trab th { background:#f7fafa; font-size:.78rem; text-align:left; }
/* La columna de rótulos pasa de 11 a 13,5 rem en el trozo 3. «Fecha comprometida» es más largo que
   «Plazo», y con 11 rem el rótulo partía y el signo de ayuda se quedaba solo en la segunda línea, que
   es exactamente el fallo que corrigió la v91. De paso deja de partirse «Valor objetivo (meta)», que
   ya lo hacía antes. Se arregla dando sitio al rótulo, no acortándolo: el rótulo dice lo que dice. */
table.tabla-trab td.dato { background:#fafcfc; font-size:.79rem; color:var(--tinta-suave); font-weight:600; width:13.5rem; padding-top:.5rem; }
table.tabla-trab td.vacio input, table.tabla-trab td.vacio textarea, table.tabla-trab td.vacio select { background:#fffaf8; border-color:#f0d6cf; }
table.tabla-trab td.noesta { background:#f6f8f8; text-align:center; color:var(--tinta-suave); font-size:.8rem; }
table.tabla-trab textarea { resize:vertical; min-height:2.2rem; overflow:hidden; line-height:1.35; width:100%; }
table.tabla-trab input, table.tabla-trab select { width:100%; }
.copiar-med { background:#f4f9f8; border:1px solid #cfe4e1; border-radius:8px; padding:.45rem .6rem;
  margin-top:.45rem; font-size:.83rem; display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.copiar-med select { width:auto; display:inline-block; }
.cp-lab { display:flex; gap:.25rem; align-items:center; font-size:.78rem; }
.cp-lab input { width:auto; }
/* Bloque B, trozo 3 · La casilla de fecha comprometida con sus botones rápidos. Es la MISMA pieza en
   las tres pantallas que la escriben (plan de un centro, trabajo conjunto y medida propia), así que
   su estilo vive en un solo sitio y no puede quedarse a medias en una de ellas.
   Los botones van DEBAJO de la casilla, no al lado: en la tabla de trabajo conjunto cada centro es
   una columna estrecha, y en fila se salían de la celda. */
.f-comp { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.f-comp input[type=date] { width:100%; }
.f-rap { display:flex; gap:.3rem; flex-wrap:wrap; }
/* Deliberadamente pequeños y sin color de acento: son un atajo, no la forma normal de rellenarlo.
   Si pesaran igual que la casilla, la fecha parecería tener que salir de uno de los cuatro. */
.f-rap button { font-size:.7rem; font-weight:400; padding:0; color:#5a6b6a; }
.f-rap button:hover { color:var(--acento); text-decoration:underline; }
/* v81 · La barra iba sin z-index, y las celdas fijas de la tabla de centros llevan z-index 2: la
   tabla se pintaba ENCIMA de la barra y se veían trozos de texto cruzados. Va por delante de todo
   lo de la pantalla, con fondo opaco y una sombra que la despega de lo que pasa por debajo. */
/* v106 · MÁS BAJA. Con el aviso del borrador dentro, la barra se comía el sitio de las medidas, que
   es a lo que se viene a esta pantalla. Se recorta el relleno y el margen, y el aviso pasa a ser una
   línea (ver `aviso-borrador`). */
.guardar-fijo { position:sticky; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--linea);
  padding:.35rem .2rem; display:flex; gap:.6rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-top:.3rem; box-shadow:0 -6px 10px -8px rgba(0,0,0,.25); }
/* El aviso de trabajo sin aplicar, en una sola línea. Lo que antes eran cuatro (título, párrafo de
   tres y botón) cabe aquí porque la explicación entera vive en el signo de ayuda. */
.aviso-borrador { flex:1 1 100%; margin:0 0 .25rem; padding:.3rem .5rem; font-size:.85rem;
  background:#f6fbfa; border-left:3px solid var(--acento); border-radius:6px;
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.aviso-borrador .pie-nota { margin:0; }
.aviso-borrador button { margin-left:auto; }
.guardar-fijo #trab-estado { flex:1 1 22rem; min-width:0; margin-top:0; }
/* v95 · La misma barra en el plan de un centro. Se apila en vertical porque aquí lleva dentro el
   panel de cierre (con su nota y sus botones), que no cabe en una línea; en la pantalla de trabajo la
   barra solo lleva botones y va en fila. Lo que comparten, que es lo que importa, es quedarse a la
   vista: `sticky bottom` y por delante del contenido. */
.guardar-fijo.plan-barra { display:block; }
.guardar-fijo.plan-barra .fila-form { margin-bottom:0; }
.guardar-fijo.plan-barra .pie-nota { margin:.35rem 0 0; }
/* El panel de cierre se despliega dentro de la barra, así que se le pone tope de alto: con la nota y
   el aviso de lo que se pierde, si no, tapa media pantalla. */
.guardar-fijo.plan-barra #plan-cerrar-caja { max-height:52vh; overflow-y:auto; }
.guardar-fijo .botones-fijo { flex:none; display:flex; gap:.5rem; }
/* Panel de cerrar la edición: sustituye al aviso del navegador y recoge la nota, que antes vivía
   en la barra y se solapaba con el texto de estado. */
#trab-cerrar-caja { flex:1 1 100%; }
#trab-cerrar-caja:empty { display:none; }
.cerrar-caja { border:1px solid var(--acento); background:#f6fbfa; border-radius:10px; padding:.8rem;
  margin:0 0 .2rem; }
.cerrar-caja p { margin:.2rem 0 .6rem; font-size:.9rem; }
/* v95 · Lo que se pierde al partir de una versión antigua. Va ARRIBA del panel y con el color de
   peligro: es lo único que hay que leer antes de decidir, y hasta ahora no estaba en ninguna parte. */
.cerrar-perdida { border:1px solid #f0d6cf; background:#fdf6f5; border-radius:8px;
  padding:.6rem .75rem; margin:0 0 .7rem; }
.cerrar-perdida strong { color:var(--peligro); }
.cerrar-perdida p { margin:.3rem 0 0; font-size:.87rem; }
/* Y el mismo aviso, en pequeño, durante toda la edición: no solo al cerrar. */
.aviso-desde { color:var(--peligro); font-weight:600; }
/* v96 · La medida que se va a quitar, nombrada entera y con el mismo peso que en su tarjeta. */
.quitar-medida { margin:.2rem 0 .7rem; font-size:.95rem; }
/* v97 · El alcance de la retirada, dicho antes de retirar. */
.quitar-alcance { background:#f4f9f8; border:1px solid #cfe4e1; border-radius:8px; padding:.5rem .65rem; margin:0 0 .7rem; }
.cerrar-caja label { display:block; font-size:.83rem; margin-bottom:.6rem; }
.cerrar-caja label input { display:block; width:100%; max-width:34rem; margin-top:.3rem; }
.panel-add { border:1px solid var(--acento); background:#f6fbfa; border-radius:10px; padding:.8rem; margin-bottom:.7rem; }
.panel-add h4 { margin:0 0 .5rem; font-size:.92rem; }

/* v80 · Con muchos centros, solo se desplaza la parte de los centros: la columna del dato se queda
   fija. Es lo que evita el problema de la tabla ancha, donde se perdía de vista de qué fila era
   cada casilla. */
.med-trab { overflow-x: auto; }
table.tabla-trab td.dato, table.tabla-trab th.dato { position: sticky; left: 0; z-index: 2; background: #fafcfc; }
table.tabla-trab th.dato { background: #f7fafa; }
table.tabla-trab th, table.tabla-trab td { min-width: 11rem; }
/* Trozo 3 · La de rótulos algo más ancha que las de los centros: es la única que tiene que caber en
   una línea, porque un rótulo partido deja su signo de ayuda solo debajo (lección de la v91). */
table.tabla-trab td.dato, table.tabla-trab th.dato { min-width: 13.5rem; }
.quitar-panel { background: #fdf6f5; border: 1px solid #f0d6cf; border-radius: 8px; padding: .55rem .7rem; margin-top: .5rem; }
.quitar-fila { display: grid; grid-template-columns: 14rem 1fr; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.quitar-fila label { display: flex; gap: .35rem; align-items: center; font-size: .85rem; }
.quitar-fila input[type=checkbox] { width: auto; }
/* v80 · Barra de vuelta al plan de la empresa, con el mismo patrón que el modo gestora. */
.barra-volver { background: #eef4f4; border: 1px solid var(--linea); border-radius: 9px;
  padding: .5rem .8rem; margin-bottom: .8rem; display: flex; gap: .7rem; align-items: center;
  justify-content: space-between; flex-wrap: wrap; font-size: .87rem; }

/* v80 · El interrogante de ayuda, al lado del botón. En una celda estrecha se envolvía debajo. */
.celda-accion { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
/* v80 · Con tres centros o más, las columnas no se estrechan: la tabla se desplaza y la columna del
   dato se queda fija. Antes se apretaban hasta ser ilegibles. */
table.tabla-trab th, table.tabla-trab td { min-width: 13rem; }
table.tabla-trab td.dato, table.tabla-trab th.dato { min-width: 13.5rem; }


/* v88 · La cabecera de una dimensión ES un botón, pero no lo parecía: se leía como un título. Se
   arregla con la forma y no con texto (decisión de Elena: sin añadir más letras). Tres señales, que
   es lo que distingue a un control de un rótulo: cambia al pasar por encima, tiene cursor de mano y
   su triángulo tiene color y tamaño de control. */
.plan-dim-head { cursor: pointer; width: 100%; text-align: left; border-radius: 8px; transition: background .12s; }
.plan-dim-head:hover { background: #eef4f4; }
.plan-dim-head:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.plan-dim-head .chev { display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 6px; background: #e4efed; color: var(--acento-osc);
  font-size: .8rem; flex: none; }
.plan-dim-head:hover .chev { background: var(--acento); color: #fff; }
#trab-lista summary { cursor: pointer; border-radius: 8px; }
#trab-lista summary:hover { background: #eef4f4; }

/* v88 · La vuelta atrás, en la barra superior: siempre a la vista, sin bajar a buscarla. */
#topbar-atras { display: flex; align-items: center; }
.btn.atras { border-color: var(--acento); color: var(--acento-osc); font-weight: 600; white-space: nowrap; }
.btn.atras:hover { background: var(--acento); color: #fff; }

/* v88 · El rótulo y su signo de ayuda son una sola línea. Sueltos dentro de una etiqueta en columna
   el navegador los apila, y el «?» aparecía debajo, leyéndose como un campo más. */
.rot { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* ===== Bloque B, trozo 4 · Plan de acción · Seguimiento =====
   Portado de Maqueta_Seguimiento_v02.html, que es lo validado. */

.seg-kpis { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.kpi { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: .7rem .95rem; cursor: pointer; min-width: 118px; text-align: left; font-family: inherit;
  color: var(--tinta); position: relative; }
.kpi:hover { border-color: var(--acento); }
.kpi.sel { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(14,124,114,.15); }
.kpi .n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.kpi .r { font-size: .75rem; color: var(--tinta-suave); }
.kpi.tarde .n { color: var(--peligro); }
/* El subrayado de puntos dice que el contador se pulsa. En la maqueta v01 filtraban y no se
   notaba, que a efectos prácticos es lo mismo que no filtrar. */
.kpi:not(.pct)::after { content: ''; position: absolute; left: .95rem; right: .95rem; bottom: .5rem;
  border-bottom: 1px dotted var(--tinta-suave); opacity: .45; }
.kpi:not(.pct):hover::after { border-color: var(--acento); opacity: 1; }
.kpi.pct { background: linear-gradient(160deg, #0e7c72, #0a5f58); color: #fff; border: none; cursor: default; }
.kpi.pct .r { color: #cfe7e4; }
.kpi.pct .ayuda { border-color: rgba(255,255,255,.45); background: transparent; color: #e4f2f0; }

.seg-nota { margin: 0 0 .8rem; }
/* v103 · LA BARRA SE ALINEA POR ABAJO, y todos sus controles miden lo mismo de alto. Antes cada uno
   traía su altura (la pastilla una, la casilla otra, los botones otra) y al añadir el desplegable de
   exportar se notó: la fila se veía escalonada. Alinear por abajo no basta si lo que se alinea no
   tiene la misma altura, porque los que llevan rótulo encima empiezan más arriba. */
.seg-barra { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .6rem; }
.seg-barra .seg-centro-sel { flex: 0 1 260px; }
.seg-barra .seg-centro-sel select { width: 100%; }
.seg-barra > .pastilla,
.seg-barra .btn,
.seg-barra input,
.seg-barra select { height: 2.35rem; }
.seg-barra .btn { display: inline-flex; align-items: center; justify-content: center; }
.seg-barra > .pastilla { flex: none; }
/* El signo de ayuda se centra CON los botones: alineado por abajo como todo lo demás, y subido la
   mitad de la diferencia de altura. Suelto, se quedaba flotando por encima de ellos. */
.seg-barra .ayuda { align-self: flex-end; margin-bottom: .65rem; }
.pastilla { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--linea);
  background: #fff; border-radius: 20px; padding: .42rem .85rem; font-size: .85rem; cursor: pointer;
  font-family: inherit; color: var(--tinta); }
.pastilla:hover { border-color: var(--acento); }
.pastilla.sel { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.seg-rotulo { font-size: .85rem; color: var(--tinta-suave); margin: 0 0 1rem; }
.seg-rotulo strong { color: var(--tinta); }
.seg-rojo { color: var(--peligro); font-weight: 600; }
.seg-verde { color: #2f8f5b; font-weight: 600; }
.seg-vacio { text-align: center; color: var(--tinta-suave); border-style: dashed; }

/* v107 · LAS DIMENSIONES SE PLIEGAN. Con dieciséis dimensiones y setenta medidas, la pantalla era
   una tira sin fin. El resumen de cada una (sin comenzar, fuera de plazo) va en la línea que se
   pulsa, así que plegada sigue diciendo cómo va. */
.seg-dim > summary { cursor: pointer; font-size: 1.02rem; font-weight: 700; color: var(--tinta);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; list-style: none; }
.seg-dim > summary::-webkit-details-marker { display: none; }
.seg-dim > summary::before { content: '▸'; color: var(--acento); font-weight: 400; }
.seg-dim[open] > summary::before { content: '▾'; }
.seg-dim[open] > summary { margin-bottom: .5rem; }
.seg-dim .seg-dimcod { display: inline-block; background: #e4efed; color: var(--acento-osc);
  border-radius: 6px; padding: .05rem .4rem; font-size: .85rem; }
.seg-dim .seg-dim-resumen { font-weight: 400; margin-left: auto; }
.seg-med { border-top: 1px solid var(--linea); padding: .85rem 0; }
.seg-med:first-of-type { border-top: none; }
.seg-med-cab { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.seg-med-cab .seg-cod { color: var(--acento-osc); font-weight: 700; font-size: .85rem; }
.seg-med-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.seg-centros { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; }

.seg-fila { background: #fafbfb; border: 1px solid var(--linea); border-radius: 8px;
  padding: .55rem .7rem; border-left: 4px solid #c9d5d3; }
.seg-fila.est-ejecutada { border-left-color: #2f8f5b; }
.seg-fila.est-en_curso { border-left-color: #c9962c; }
.seg-fila.est-aplazada { border-left-color: #8a6fb0; }
.seg-fila.est-no_procede { border-left-color: #9aa7a6; background: #f3f5f5; }
.seg-centro-nom { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: .35rem;
  display: flex; gap: .5rem; align-items: center; }

/* LA REJILLA DE COLUMNAS FIJAS. Cada campo tiene su columna asignada siempre, la use ese estado o
   no, y un estado que no la usa la deja vacía. Es lo que hace que cambiar de estado no mueva nada,
   ni dentro de la fila ni respecto de las de al lado. Una tira de campos colocados uno detrás de
   otro no puede convivir con enseñar campos distintos por estado. */
/* v105 · LA FILA SE ALINEA POR ARRIBA, no por abajo.
   Con `align-items: end`, una celda más alta que las demás empuja SU rótulo hacia arriba y esa
   columna se sale de la línea. Pasó al meter el previsto en el rótulo del gasto real, que en dos
   líneas descolocaba la columna entera. Alineando por arriba, los rótulos quedan siempre a la misma
   altura, que es lo que lee el ojo primero, y lo que se mueve es la casilla de esa celda y no toda
   la fila. La columna del gasto se ensancha para que el rótulo quepa casi siempre en una línea. */
.seg-campos { display: grid; grid-template-columns: 165px 195px 205px minmax(165px, 1fr) 180px;
  gap: .55rem; align-items: start; padding-right: .4rem; }
.seg-campos .c-estado { grid-column: 1; }
.seg-campos .c-fecha  { grid-column: 2; }
.seg-campos .c-valor  { grid-column: 3; }
.seg-campos .c-ancho  { grid-column: 4; }
.seg-campos .c-gasto  { grid-column: 5; }
/* v109 · MOTIVO ARRANCA EN LA PRIMERA COLUMNA LIBRE A SU IZQUIERDA Y SE ESTIRA HASTA EL FINAL.
   Las cinco columnas son fijas a propósito, para que un campo no cambie de sitio según el estado.
   Motivo es la excepción razonada: solo aparece en «Aplazada» y en «No procede», y en los dos deja
   columnas vacías por delante (la del valor alcanzado en el primero; esa y la de la fecha en el
   segundo), así que quedaba lejos de lo que hay que leer al lado y estrecho para lo que tiene que
   recoger. Ninguna otra columna se mueve. */
.seg-campos .c-motivo-2 { grid-column: 2 / -1; }
.seg-campos .c-motivo-3 { grid-column: 3 / -1; }
/* Los dos campos de texto largo de la fila crecen con lo escrito. Sin borde inferior de más ni
   barra de desplazamiento: la altura la fija autoAlto(). */
.seg-campos .cmp textarea.crece { min-height: 2.15rem; font-size: .9rem; }
.seg-campos .cmp { min-width: 0; display: flex; flex-direction: column; gap: .28rem;
  font-size: .82rem; color: var(--tinta-suave); font-weight: 600; }
.seg-ancho-total { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .seg-campos { grid-template-columns: 165px 195px 205px; }
  .seg-campos .c-ancho { grid-column: 1 / -1; }
  .seg-campos .c-motivo-2, .seg-campos .c-motivo-3 { grid-column: 1 / -1; }
  .seg-campos .c-gasto { grid-column: 1; }
}
.seg-caja { display: flex; align-items: center; gap: .35rem; }
/* v105 · La columna del gasto es estrecha, así que su cifra prevista va debajo y no al lado. Con la
   fila alineada por arriba, esa línea de más no mueve nada de lo que tiene alrededor. */
.seg-caja-abajo { flex-direction: column; align-items: stretch; gap: .18rem; }
.seg-caja-abajo .seg-objetivo { white-space: normal; }

/* La casilla de importe: la unidad al lado, para que se vea que van euros sin escribirlo cada vez. */
.f-imp { display: flex; align-items: center; gap: .3rem; min-width: 0; padding-right: .15rem; }
.f-imp input { flex: 1 1 auto; width: auto; min-width: 0; text-align: right; }
.f-imp-u { color: var(--tinta-suave); font-weight: 400; }
/* v105 · El aviso de importe: al lado de la casilla y en pequeño, para poder corregir sin perder de
   vista lo que se estaba escribiendo. */
.f-imp input.mal { border-color: var(--peligro); background: #fdf3f3; }
.f-imp-mal { display: block; font-size: .7rem; font-weight: 400; color: var(--peligro); margin-top: .12rem; }
.seg-objetivo { font-size: .75rem; color: var(--tinta-suave); font-weight: 400; white-space: nowrap; }
.seg-oblig { color: var(--peligro); font-weight: 600; font-size: .68rem; text-transform: uppercase; }
/* v108 · EL RÓTULO DE LA FILA TIENE ALTURA FIJA. Es lo que hace que las casillas caigan todas a la
   misma altura en «Aplazada», el estado que mezcla campos obligatorios con campos que no lo son.

   Se midió antes de escribir esto, y la causa NO era solo la marca «obligatorio», como se había
   supuesto: en una fila aplazada, «Estado» ocupaba 17 px de rótulo, «Fecha prevista revisada» 30
   (se parte en dos líneas: no cabe con su signo de ayuda en una columna de 195 px) y «Motivo» 15
   (no lleva signo de ayuda, y el signo hace la línea más alta). Tres alturas distintas, tres
   casillas a distinta altura.

   Por eso se fijan las dos cosas: el texto ocupa SIEMPRE dos líneas (`min-height`, con el
   interlineado escrito para que la cuenta salga y el signo de ayuda quepa dentro de la línea), y la
   marca ocupa SIEMPRE su renglón, invisible donde el campo no es obligatorio. Si algún día un
   rótulo necesitara tres líneas, esto volvería a descuadrar: lo caza test/evidencia_v108.py, que
   mide las CASILLAS de la fila, no los rótulos. */
.seg-campos .cmp > .rot { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; }
.seg-campos .cmp > .rot .rot-t { display: inline-flex; align-items: center; gap: .3rem;
  line-height: 1.15rem; min-height: 2.3rem; }
.seg-oblig-hueco { visibility: hidden; }
.seg-chip { font-size: .68rem; padding: .08rem .45rem; border-radius: 20px; font-weight: 600; }
.seg-chip-tarde { background: #fbeaea; color: var(--peligro); }
.seg-com { margin-top: .35rem; }
.seg-marca { font-weight: 400; font-size: .75rem; color: var(--tinta-suave); }
.seg-marca.bien { color: #2f8f5b; }
.seg-marca.mal { color: var(--peligro); }

/* v107 · Se retira el plegado de filas. Una medida que se enseña se enseña entera, con todos sus
   centros abiertos: lo que filtran los contadores son las medidas, no los centros de una medida.
   El estado plegado dejaba un botón «Guardar» suelto que no guardaba nada. */

.seg-copiar { margin-top: .4rem; }
.seg-panel-copia { margin-top: .4rem; border: 1px solid var(--linea); border-radius: 8px;
  padding: .6rem .7rem; background: #fff; max-width: 520px; }
.seg-panel-copia .pie-nota { margin: 0 0 .5rem; }
.seg-destino { display: flex; flex-direction: row; align-items: center; gap: .4rem; font-weight: 400;
  color: var(--tinta); font-size: .85rem; margin: .15rem 0; }
.seg-destino input { width: auto; }
.seg-acciones-copia { display: flex; gap: .5rem; margin-top: .6rem; }
.seg-hist { margin-top: .45rem; font-size: .8rem; }
/* v111 · El historial de cambios de una medida. Una línea por cambio, y el quién y el cuándo en
   pequeño detrás: lo que se viene a resolver aquí es «quién puso esta fecha», no un análisis. */
.hist-lista { list-style: none; margin: .4rem 0 0; padding: 0; }
.hist-lista li { padding: .3rem 0; border-bottom: 1px solid var(--linea); line-height: 1.4; }
.hist-lista li:last-child { border-bottom: none; }
.hist-lista .pie-nota { display: block; margin: .1rem 0 0; }
.seg-hist summary { cursor: pointer; color: var(--acento-osc); }
.seg-hist ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--tinta-suave); }
.seg-hist li { margin: .2rem 0; }

/* v108 · Aquí estaba el estilo de la entrada apagada (`a.futuro`), que servía para reservar sitio en
   el menú a un módulo sin construir. Se va con su único uso, el informe de ejecución. La regla que
   deja: el menú pinta lo que existe. */
.seg-marca.pendiente { color: #a4761c; }

/* v100 · La casilla del indicador, la misma en las tres pantallas. Se dimensiona según lo que le
   cabe: un porcentaje son tres caracteres, y una casilla ancha aleja el objetivo del número hasta
   no poder leerlos juntos. */
.ind-caja { display: inline-flex; align-items: center; gap: .3rem; }
.ind-num { width: 5.5rem; flex: none; text-align: right; }
.ind-sino { width: 8.6rem; }   /* «sin indicar» tiene que caber entero: recortado se lee «sin indica» */
.ind-fecha { width: 9.5rem; }
.ind-unidad { color: var(--tinta-suave); font-weight: 600; }
.seg-sin-objetivo { font-style: italic; }

/* El pie de cada fila: el botón de guardar y la marca de qué ha pasado. Nada se escribe hasta que
   se pulsa, así que el botón tiene que verse. */
.seg-pie { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.seg-guardar { padding: .32rem .8rem; font-size: .82rem; }
.seg-guardar:disabled { opacity: .45; cursor: default; }
.seg-guardar:disabled:hover { border-color: var(--acento); color: #fff; }
.seg-excel { display: flex; gap: .5rem; align-items: flex-end; margin-left: auto; }
.seg-excel .btn[disabled] { opacity: .5; cursor: not-allowed; }
.seg-excel a.btn { text-decoration: none; display: inline-block; }
.plan-seguim-lectura { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.ind-aviso { display: block; margin-top: .2rem; color: #a4761c; }
.ind-texto { }
.seg-formato { flex: none; min-width: 11.5rem; }
.seg-formato select { padding: .3rem .5rem; }

/* v113 · La vista previa del Excel de seguimiento que vuelve. Es una pantalla de comprobación: se
   entra a ella para decidir, así que cabe más y se lee de arriba abajo. */
.import-panel { max-width: 900px; }
.import-cuerpo { max-height: 62vh; overflow-y: auto; padding-right: .3rem; }
.import-resumen { margin: .6rem 0 .9rem; }
.import-medida { border: 1px solid var(--linea); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .4rem; }
.import-medida > summary { cursor: pointer; }
.import-medida.con-conflicto { border-color: #ecd9a8; background: var(--aviso-fondo); }
.import-medida .etiqueta.tarde { background: #fbeaea; color: var(--peligro); margin-left: .4rem; }
.import-cambios { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
.import-conflicto { border-top: 1px solid #ecd9a8; margin-top: .5rem; padding-top: .5rem; }
.import-rechazos { margin-top: .9rem; }
.import-rechazos h3 { color: var(--peligro); }
.import-rechazos td { font-size: .84rem; }

/* v114 · Informe de varios centros: elección de centros y de sus evaluaciones.
   El nombre del centro y su contador van DENTRO de un mismo span (.iamb-txt), no como dos elementos
   flex hermanos. Si son hermanos, cada uno se centra por su cuenta y, al tener tamaños de letra
   distintos, no comparten línea base y el texto pequeño queda descolgado. Lo mismo en la fila de la
   evaluación con su etiqueta de «vigente».
   El recuento de evaluaciones que acompañaba al nombre del centro se retiró el 31-jul: al marcar el
   centro sus evaluaciones se listan justo debajo, así que decir cuántas hay era repetirlo. */
.iamb-centro { border-bottom: 1px solid var(--linea, #eef1f0); padding: .45rem 0; }
.iamb-centro:last-of-type { border-bottom: 0; }
.iamb-cab { display: flex; flex-direction: row; align-items: center; gap: .45rem; font-weight: 400; margin: 0; }
.iamb-evals { margin: .35rem 0 .2rem 1.75rem; }
.iamb-ev { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; font-weight: 400; margin: 0 1.4rem .3rem 0; font-size: .92rem; }
.iamb-txt { display: inline; }

/* v114 · El fichero recién generado, ofrecido con un enlace a la vista. */
.listo-descarga { margin: .6rem 0 0; padding: .55rem .8rem; background: #eef4f2; border-left: 3px solid var(--acento, #1f6f5c); border-radius: 3px; }
.listo-descarga a { margin-left: .4rem; font-weight: 600; }
.listo-descarga .pie-nota { display: block; margin-top: .25rem; }


/* v135 · Franja del entorno de pruebas.
   Fija arriba y por encima de todo, para que no la tape ninguna pantalla ni se pierda al bajar. El
   ámbar es el mismo que usa el sistema para «esto pide tu atención», y no el rojo de error: no hay
   nada roto, hay que saber dónde se está. El cuerpo se desplaza hacia abajo lo que mide la franja,
   así que no tapa la barra superior ni el botón de salir. */
.franja-entorno {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #b45309; color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: .3rem .6rem; line-height: 1.3;
}
body.con-franja { padding-top: 1.6rem; }