/* ══════════════════════════════════════════════════════════════════════════
   Seguridad y Salud — estilos compartidos por todas las pantallas del módulo.

   Estaban dentro de un <style> de la pantalla de sucesos, así que solo existían
   mientras esa pantalla estuviera montada: la de entrega de EPI heredaba las
   clases sin las reglas y salía sin formato. Aquí viven una vez.

   La paleta es la de la señalización de seguridad y coincide con SstUi.cs:
   rojo prohíbe o daña, ámbar advierte, azul obliga, verde es condición segura.
   No se usan al revés en ninguna pantalla, y eso importa más que el tono
   concreto: quien trabaja en prevención lee ese código antes que el texto.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --sst-rojo: #c8102e;
    --sst-ambar: #b37400;
    --sst-azul: #005387;
    --sst-verde: #00693c;
    --sst-linea: #e2e8f0;
    --sst-tinta: #0f172a;
    --sst-suave: #64748b;
    --sst-tenue: #94a3b8;
}

/* ── Indicadores accionables ─────────────────────────────────────────────
   Cada uno filtra la lista. Un contador que no lleva a ninguna parte ocupa
   sitio y no cambia lo que hace nadie. */
/* Una sola fila, tenga la pantalla cuatro indicadores o siete. Con las cuatro
   columnas fijas que habia antes, psicosocial —que tiene cinco— dejaba el quinto
   solo en una segunda fila ocupando el ancho completo: parecia un error de
   maquetacion y robaba una franja entera a la lista, que es lo que se ha venido
   a ver. `grid-auto-flow: column` reparte lo que haya. */
.sst-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; }
.sst-kpi {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
    border: 1px solid var(--sst-linea); border-left: 4px solid var(--c); border-radius: 10px;
    background: #fff; cursor: pointer; text-align: left; width: 100%; min-width: 0;
    transition: box-shadow .15s, border-color .15s;
}
.sst-kpi:hover { box-shadow: 0 3px 14px rgba(15,23,42,.10); }
.sst-kpi:focus-visible { outline: 2px solid var(--sst-azul); outline-offset: 2px; }
.sst-kpi.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.sst-kpi__i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
}
.sst-kpi__i .rzi { font-size: 1.1rem; }
.sst-kpi__t { display: flex; flex-direction: column; min-width: 0; }
.sst-kpi__v { font-size: 1.3rem; font-weight: 800; line-height: 1.05; color: var(--sst-tinta); font-variant-numeric: tabular-nums; }
/* La etiqueta se corta con puntos suspensivos en vez de romper en dos lineas: con
   siete indicadores en fila, una etiqueta de dos lineas descuadra toda la banda.
   El texto completo sigue estando en el `title` del boton. */
.sst-kpi__l { font-size: .71rem; font-weight: 600; color: var(--sst-suave); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Índices de siniestralidad ───────────────────────────────────────── */
.sst-indices {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
    gap: 1px; background: var(--sst-linea); border: 1px solid var(--sst-linea);
    border-radius: 10px; overflow: hidden;
}
.sst-idx { background: #fff; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.sst-idx__k { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sst-suave); }
.sst-idx__v { font-size: 1.7rem; font-weight: 800; color: var(--sst-azul); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sst-idx__h { font-size: .68rem; color: var(--sst-tenue); line-height: 1.35; }
.sst-idx--param { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; background: #f8fafc; }

/* ── Lista de fichas ───────────────────────────────────────────────────
   Rejilla de tarjetas, no filas a lo ancho. Con filas de ancho completo
   entraban seis registros en pantalla y el 70 % de cada fila era hueco;
   en tarjetas entran doce o quince y se lee lo mismo. Lo comparten diez
   pantallas del modulo, asi que el cambio es uno solo.

   La barra de color pasa de canto izquierdo a franja superior: de canto,
   en una tarjeta estrecha, se confunde con el borde. */
/* Sin `align-items: start`: las tarjetas de una misma fila se igualan en alto. Con
   alturas libres, una ficha con titulo de dos lineas dejaba a sus vecinas cortadas a
   media altura y la rejilla parecia desalineada. */
.sst-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: .6rem; }
.sst-fila {
    display: grid; grid-template-rows: 4px 1fr; gap: 0;
    width: 100%; padding: 0;
    border: 1px solid var(--sst-linea); border-radius: 10px; background: #fff;
    cursor: pointer; text-align: left; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.sst-fila:hover { border-color: var(--c); box-shadow: 0 3px 14px rgba(15,23,42,.09); }
.sst-fila:focus-visible { outline: 2px solid var(--sst-azul); outline-offset: 2px; }
.sst-fila__barra { background: var(--c); width: 100%; }
.sst-fila__cuerpo { display: flex; flex-direction: column; gap: .35rem;
    padding: .75rem .9rem .8rem; min-width: 0; }
.sst-fila__cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sst-fila__grav {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem;
    font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c);
}
.sst-fila__grav .rzi { font-size: .95rem; }
.sst-fila__cod { font-size: .68rem; color: var(--sst-tenue); font-weight: 600; }
/* En tarjeta el titulo puede ocupar dos lineas: cortarlo con puntos suspensivos
   dejaba «Evaluacion de riesgos del puesto de sold…» en media docena de fichas. */
.sst-fila__tit {
    font-size: .92rem; font-weight: 620; color: var(--sst-tinta); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sst-fila__meta, .sst-fila__notif { display: flex; gap: .35rem .8rem; flex-wrap: wrap;
    font-size: .73rem; color: var(--sst-suave); }
.sst-fila__meta > span, .sst-fila__notif > span { display: inline-flex; align-items: center; gap: .3rem; }
.sst-fila__meta .rzi { font-size: .95rem; opacity: .75; }
.sst-fila__org { color: var(--sst-tenue); }
/* La flecha de «entrar» sobraba en tarjeta: la tarjeta entera ya es el boton, y
   una flecha suelta en la esquina se lee como una accion distinta. */
.sst-fila__ir { display: none; }

/* ── Distintivos ─────────────────────────────────────────────────────── */
.sst-chip {
    display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem;
    font-weight: 600; border: 1px solid; border-radius: 999px; padding: .1rem .5rem;
}
.sst-chip .rzi { font-size: .85rem; }

/* Sociedad del grupo. Es contexto, no estado: por eso va en gris y con menos peso que
   las pastillas que informan de un riesgo o de un incumplimiento. Compite con ellas por
   la misma linea y perder esa competicion es justo lo que tiene que hacer. */
.sst-chip--soc {
    background: #f1f5f9; color: #64748b; border-color: #e2e8f0;
    font-weight: 500; max-width: 12rem;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sst-chip--soc .rzi { opacity: .7; }

/* Ámbar avisa, rojo señala incumplimiento. Nunca al revés. */
.sst-urge { color: var(--sst-ambar); font-weight: 700; }
.sst-alerta { color: var(--sst-rojo); font-weight: 700; }

.sst-nota { font-size: .72rem; line-height: 1.55; color: var(--sst-tenue); max-width: 100ch; margin: .4rem 0 0; }

@media (max-width: 1100px) { .sst-indices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En pantalla estrecha la fila unica deja de caber: se vuelve a envolver. */
@media (max-width: 1200px) {
    .sst-kpis { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
@media (max-width: 760px) {
    .sst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sst-fila__tit { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .sst-kpi, .sst-fila { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FICHA DEL PUESTO  (pd- detalle · pn- panel · pc- controles · pe- EPI
                      px- expediente · dlg- dialogos)

   Sustituye al formulario de diez pestanas heredado del RGPD. El criterio de
   toda esta hoja: la barra de color de la izquierda de cada fila es el estado,
   y es lo unico que hace falta leer para saber si algo va bien.
   ══════════════════════════════════════════════════════════════════════════ */

.sstpd { display: flex; flex-direction: column; gap: 1rem; }

.sstpd-volver { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
    font-size: .82rem; font-weight: 600; color: var(--sst-tenue); text-decoration: none; }
.sstpd-volver:hover { color: #005387; }
.sstpd-volver .rzi { font-size: 1.05rem; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.sstpd-cab { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid #e8edf3; border-left: 4px solid var(--c, #64748b);
    border-radius: 12px; padding: 1rem 1.15rem; }
.sstpd-cab__ico { display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex: none; border-radius: 10px;
    background: color-mix(in srgb, var(--c, #64748b) 12%, transparent); color: var(--c, #64748b); }
.sstpd-cab__ico .rzi { font-size: 1.5rem; }
.sstpd-cab__id { flex: 1; min-width: 15rem; display: flex; flex-direction: column; gap: .35rem; }
.sstpd-cab__meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sstpd-cod { font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
    font-weight: 700; color: #005387; letter-spacing: .02em; }
.sstpd-cab__t { margin: 0; font-size: 1.22rem; font-weight: 680; color: #0f172a;
    line-height: 1.25; text-wrap: balance; }
.sstpd-cab__sub { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--sst-tenue); }
.sstpd-cab__acc { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Diagnostico ──────────────────────────────────────────────────────── */
.sstpd-diag { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: 1.25rem; align-items: start;
    background: #fff; border: 1px solid #e8edf3; border-radius: 12px; padding: 1rem 1.15rem; }
.sstpd-diag__lado { min-width: 0; }

.sstpd-ok { display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem;
    line-height: 1.6; color: #14532d; background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 8px; padding: .8rem .95rem; }
.sstpd-ok .rzi { color: #00693c; flex: none; }

.sstpd-avisos { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: .5rem; }
.sstpd-avisos li { display: flex; align-items: flex-start; gap: .55rem;
    font-size: .84rem; line-height: 1.55; color: #334155;
    background: color-mix(in srgb, var(--c) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--c) 26%, #fff);
    border-left: 3px solid var(--c); border-radius: 8px; padding: .65rem .8rem; }
.sstpd-avisos li .rzi { color: var(--c); flex: none; font-size: 1.05rem; }
.sstpd-avisos li > span { flex: 1; min-width: 0; }
.sstpd-avisos__ir { display: inline-flex; align-items: center; gap: .2rem; flex: none;
    border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .78rem;
    font-weight: 650; color: var(--c); padding: 0; }
.sstpd-avisos__ir .rzi { font-size: .95rem; }
.sstpd-avisos__ir:hover { text-decoration: underline; }

/* ── Navegacion de secciones ────────────────────────────────────────────
   Se queda pegada arriba al bajar: en un puesto con quince peligros y ocho
   equipos, la ficha mide varias pantallas y volver a subir para cambiar de
   seccion es el gesto que mas se repite.

   Cada pestana es una etapa del razonamiento preventivo, asi que llevan
   subrayado inferior en vez de pastilla rellena: la pastilla parecia un
   boton de accion y la gente esperaba que guardara algo. */
.sstpd-nav { position: sticky; top: 0; z-index: 5;
    display: flex; gap: .15rem; flex-wrap: wrap; background: #fff;
    border: 1px solid #e8edf3; border-radius: 10px; padding: .3rem .35rem 0;
    box-shadow: 0 1px 0 rgba(15,23,42,.04); }
.sstpd-nav__b { position: relative; display: inline-flex; align-items: center; gap: .45rem;
    border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 600; color: var(--sst-suave);
    padding: .55rem .75rem; border-radius: 7px 7px 0 0; margin-bottom: -1px;
    transition: background .13s ease, color .13s ease, border-color .13s ease; }
.sstpd-nav__b:hover { background: #f4f7fa; color: #0f172a; }
.sstpd-nav__b:focus-visible { outline: 2px solid var(--sst-azul); outline-offset: -2px; }
.sstpd-nav__b.on { color: var(--sst-azul); border-bottom-color: var(--sst-azul); background: #f4f9fc; }
.sstpd-nav__b .rzi { font-size: 1.05rem; opacity: .85; }
.sstpd-nav__b.on .rzi { opacity: 1; }
.sstpd-nav__n { font-style: normal; font-size: .7rem; font-weight: 700; line-height: 1.35;
    min-width: 1.15rem; text-align: center; color: var(--sst-suave);
    background: #eef2f7; border-radius: 999px; padding: 0 .35rem;
    font-variant-numeric: tabular-nums; }
.sstpd-nav__b.on .sstpd-nav__n { background: var(--sst-azul); color: #fff; }
/* El punto ambar avisa de que esa seccion tiene algo pendiente. Va arriba a la
   derecha, fuera del flujo, para no descuadrar la fila cuando aparece. */
.sstpd-nav__p { position: absolute; top: .3rem; right: .3rem; width: 6px; height: 6px;
    border-radius: 50%; background: var(--sst-ambar);
    box-shadow: 0 0 0 2px #fff; }

/* La altura minima es lo que evita el salto de scroll al cambiar de pestana: sin
   ella, pasar de «Peligros» (siete filas) a «Marco legal» (tres) encogia la pagina
   de golpe y el navegador reajustaba la posicion. Se nota como un tiron. */
.sstpd-panel { background: #fff; border: 1px solid #e8edf3; border-radius: 12px;
    padding: 1.1rem 1.15rem; min-height: 30rem; scroll-margin-top: 4rem; }

/* ── Panel generico ───────────────────────────────────────────────────── */
.sstpn { display: flex; flex-direction: column; gap: .9rem; }
.sstpn__intro { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--sst-tenue);
    max-width: 100ch; }

.sstpn-add { background: #f8fafc; border: 1px solid #e8eef5; border-radius: 10px; padding: .85rem; }
.sstpn-add__f { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.sstpn-add__f .rz-form-field { min-width: 0; }
.sstpn-add__vacio { margin: .6rem 0 0; display: flex; align-items: center; gap: .4rem;
    flex-wrap: wrap; font-size: .78rem; color: var(--sst-tenue); }
.sstpn-add__vacio .rzi { font-size: 1rem; }
.sstpn-add__vacio a { color: #005387; font-weight: 600; }

.sstpn-alerta { display: flex; align-items: flex-start; gap: .55rem; font-size: .84rem;
    line-height: 1.6; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa;
    border-left: 3px solid var(--sst-ambar); border-radius: 8px; padding: .75rem .9rem; }
.sstpn-alerta .rzi { color: var(--sst-ambar); flex: none; }
.sstpn-alerta strong { margin-right: .25rem; }

.sstpn-lista { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: .5rem; }
.sstpn-fila { display: flex; gap: .8rem; align-items: stretch; background: #fff;
    border: 1px solid #e8edf3; border-radius: 9px; overflow: hidden;
    padding: .8rem .9rem .8rem 0; }
.sstpn-fila__barra { width: 4px; flex: none; background: var(--c, #cbd5e1);
    border-radius: 9px 0 0 9px; }
.sstpn-fila__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.sstpn-fila__cab { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.sstpn-fila__cod { font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
    font-weight: 700; color: #005387; }
.sstpn-fila__t { margin: 0; font-size: .92rem; font-weight: 620; color: #0f172a; line-height: 1.4; }
.sstpn-fila__d { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--sst-tenue); }
.sstpn-fila__d .rzi { font-size: .9rem; vertical-align: -2px; }
.sstpn-fila__meta { margin: .1rem 0 0; display: flex; gap: .85rem; flex-wrap: wrap;
    font-size: .76rem; color: var(--sst-tenue); }
.sstpn-fila__meta span { display: inline-flex; align-items: center; gap: .25rem; }
.sstpn-fila__meta .rzi { font-size: .9rem; opacity: .8; }
.sstpn-fila__falta { color: var(--sst-ambar); font-weight: 600; }
.sstpn-fila__ok { margin: 0; display: inline-flex; align-items: center; gap: .3rem;
    font-size: .8rem; color: var(--sst-verde); }
.sstpn-fila__acc { display: flex; align-items: flex-start; gap: .1rem; flex: none; }
.sstpn-fila__ir { display: inline-flex; align-items: center; gap: .2rem; border: 0;
    background: transparent; cursor: pointer; font: inherit; font-size: .78rem;
    font-weight: 650; color: #005387; padding: 0; }
.sstpn-fila__ir:hover { text-decoration: underline; }
.sstpn-fila__ir .rzi { font-size: .95rem; }

.sstpn-fila__eval { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .15rem; }
.sstpn-eval { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem;
    color: var(--c); }
.sstpn-eval .rzi { font-size: .95rem; }
.sstpn-eval strong { font-weight: 700; }
.sstpn-eval__v { font-style: normal; font-weight: 700; color: var(--sst-rojo);
    border-left: 1px solid #e2e8f0; margin-left: .35rem; padding-left: .45rem; }

.sstpn-faltas { list-style: none; margin: .15rem 0 0; padding: 0; display: flex;
    flex-direction: column; gap: .2rem; }
.sstpn-faltas li { display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; color: var(--c); }
.sstpn-faltas li .rzi { font-size: .95rem; }

/* Cobertura de formacion */
.sstpn-cob { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .2rem; }
.sstpn-cob__barra { flex: 1; min-width: 8rem; max-width: 16rem; height: 6px; border-radius: 999px;
    background: #eef2f7; overflow: hidden; }
.sstpn-cob__barra i { display: block; height: 100%; border-radius: 999px; }
.sstpn-cob__t { font-size: .78rem; font-weight: 600; }

/* ── Controles: escalera de jerarquia ─────────────────────────────────── */
.sstpc-escala { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: .5rem; }
.sstpc-escala__p { display: flex; flex-direction: column; align-items: center; gap: .1rem;
    background: color-mix(in srgb, var(--c) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--c) 28%, #fff);
    border-top: 3px solid var(--c); border-radius: 8px; padding: .6rem .5rem; text-align: center; }
.sstpc-escala__p.vacio { background: #fafbfc; border-color: #e8edf3; border-top-color: #e2e8f0; }
.sstpc-escala__n { font-size: 1.15rem; font-weight: 750; color: var(--c);
    font-variant-numeric: tabular-nums; }
.sstpc-escala__p.vacio .sstpc-escala__n { color: #cbd5e1; }
.sstpc-escala__l { font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase; color: var(--sst-tenue); line-height: 1.3; }

.sstpc-grupo { display: flex; flex-direction: column; gap: .45rem; }
.sstpc-grupo__t { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0;
    font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c); }
.sstpc-grupo__t .rzi { font-size: 1rem; }
.sstpc-grupo__t em { font-style: normal; font-size: .7rem;
    background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 999px; padding: .05rem .4rem; }

/* ── EPI ──────────────────────────────────────────────────────────────── */
.sstpe { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: 1.35rem; align-items: start; }
.sstpe__lado { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.sstpe__filtro { margin: .6rem 0 0; display: flex; align-items: center; gap: .35rem;
    flex-wrap: wrap; font-size: .78rem; color: var(--sst-tenue); }
.sstpe__filtro .rzi { font-size: 1rem; }
.sstpe__filtro button { border: 0; background: transparent; cursor: pointer; font: inherit;
    font-size: .78rem; font-weight: 650; color: #005387; padding: 0; }
.sstpe__filtro button:hover { text-decoration: underline; }

/* ── Expediente ───────────────────────────────────────────────────────── */
.sstpn--exp { gap: 1.1rem; }
.sstpx { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.1rem; }
.sstpx-b { display: flex; flex-direction: column; gap: .6rem; }
.sstpx-b--ancho { grid-column: 1 / -1; border-top: 1px solid #eef2f6; padding-top: 1rem; }
.sstpx-b__t { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .76rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
.sstpx-b__t .rzi { font-size: 1rem; color: #005387; }
.sstpx-b__ayuda { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--sst-tenue); }
.sstpx-vacio { margin: 0; font-size: .8rem; color: #94a3b8; font-style: italic; }

.sstpx-linea { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 0; }
.sstpx-linea li { display: flex; gap: .7rem; padding-bottom: .85rem; position: relative; }
.sstpx-linea li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 26px;
    bottom: 0; width: 1px; background: #e2e8f0; }
.sstpx-linea__p { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 27px; height: 27px; border-radius: 50%; background: #eef4f8; color: #005387; }
.sstpx-linea__p .rzi { font-size: .95rem; }
.sstpx-linea__c { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.sstpx-linea__t { margin: 0; font-size: .86rem; font-weight: 650; color: #0f172a; }
.sstpx-linea__f { margin: 0; font-size: .72rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.sstpx-linea__d { margin: .2rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--sst-tenue); }

.sstpx-nota-add { display: flex; flex-direction: column; gap: .5rem; background: #f8fafc;
    border: 1px solid #e8eef5; border-radius: 9px; padding: .75rem; }
.sstpx-nota-add .rz-textarea { width: 100%; }
.sstpx-nota-add__pie { display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap; }
.sstpx-nota-add__pub { display: inline-flex; align-items: center; gap: .45rem;
    font-size: .76rem; color: var(--sst-tenue); cursor: pointer; }

.sstpx-notas { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: .5rem; }
.sstpx-notas li { background: #fff; border: 1px solid #e8edf3; border-radius: 9px; padding: .7rem .85rem; }
.sstpx-notas li.priv { background: #fafafa; border-style: dashed; }
.sstpx-notas__cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .3rem; }
.sstpx-notas__cab strong { font-size: .8rem; color: #0f172a; }
.sstpx-notas__cab span { font-size: .72rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.sstpx-notas li p { margin: 0; font-size: .84rem; line-height: 1.6; color: #334155;
    white-space: pre-wrap; }

/* ── Dialogos de asignacion ───────────────────────────────────────────── */
.sstdlg { display: flex; flex-direction: column; gap: .85rem; }
.sstdlg__ahora { margin: 0; font-size: .84rem; color: var(--sst-tenue); }
.sstdlg__ahora strong { color: #0f172a; }
.sstdlg__f2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; }
.sstdlg__f3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; }
.sstdlg__ayuda { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--sst-tenue); }
.sstdlg__sw { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.sstdlg__sw > span { display: flex; flex-direction: column; gap: .1rem; font-size: .78rem;
    line-height: 1.55; color: var(--sst-tenue); }
.sstdlg__sw strong { font-size: .84rem; color: #0f172a; font-weight: 620; }
.sstdlg__pie { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .3rem; }

@media (max-width: 1100px) {
    .sstpd-diag { grid-template-columns: minmax(0, 1fr); }
    .sstpe { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CATALOGOS MAESTROS  (cat-)
   Una pantalla para los veinticinco. El rail de la izquierda agrupa por el
   trabajo al que sirve cada catalogo, no por su nombre tecnico.
   ══════════════════════════════════════════════════════════════════════════ */

.sstcat { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.1rem; align-items: start; }

.sstcat-rail { display: flex; flex-direction: column; gap: .1rem; background: #fff;
    border: 1px solid #e8edf3; border-radius: 12px; padding: .6rem; position: sticky; top: .5rem;
    max-height: calc(100vh - 6rem); overflow-y: auto; }
.sstcat-rail__g { margin: .7rem 0 .25rem; padding: 0 .55rem; font-size: .64rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; }
.sstcat-rail__g:first-child { margin-top: .15rem; }
.sstcat-rail__b { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem;
    border-radius: 7px; font-size: .82rem; font-weight: 550; color: #334155;
    text-decoration: none; transition: background .12s ease, color .12s ease; }
.sstcat-rail__b:hover { background: #f1f5f9; color: #0f172a; }
.sstcat-rail__b.on { background: #005387; color: #fff; font-weight: 650; }
.sstcat-rail__b .rzi { font-size: 1.05rem; opacity: .85; }

.sstcat-main { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

.sstcat-cab { display: flex; gap: .85rem; align-items: flex-start; background: #fff;
    border: 1px solid #e8edf3; border-radius: 12px; padding: 1rem 1.15rem; }
.sstcat-cab__i { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.6rem; height: 2.6rem; border-radius: 9px; background: #eef4f8; color: #005387; }
.sstcat-cab__i .rzi { font-size: 1.35rem; }
.sstcat-cab__t { min-width: 0; }
.sstcat-cab__t h2 { margin: 0 0 .2rem; font-size: 1.08rem; font-weight: 680; color: #0f172a; }
.sstcat-cab__t p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--sst-tenue);
    max-width: 95ch; }

.sstcat-inact { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem;
    color: var(--sst-tenue); cursor: pointer; margin-right: .3rem; }

.sstcat-lista { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: .35rem; }
.sstcat-fila { background: #fff; border: 1px solid #e8edf3; border-radius: 9px; overflow: hidden; }
.sstcat-fila.off { background: #fafbfc; opacity: .72; }
.sstcat-fila__b { display: flex; align-items: center; gap: .8rem; width: 100%; border: 0;
    background: transparent; cursor: pointer; text-align: left; font: inherit;
    padding: .7rem .9rem; transition: background .12s ease; }
.sstcat-fila__b:hover { background: #f8fafc; }
.sstcat-fila__ico { display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.1rem; height: 2.1rem; border-radius: 7px;
    background: color-mix(in srgb, var(--c, #64748b) 13%, transparent); color: var(--c, #64748b); }
.sstcat-fila__ico .rzi { font-size: 1.1rem; }
.sstcat-fila__c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sstcat-fila__cab { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sstcat-fila__cod { font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
    font-weight: 700; color: #005387; }
.sstcat-fila__t { font-size: .88rem; color: #0f172a; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.sstcat-fila__b > .rzi { color: #cbd5e1; flex: none; }

/* Campos propios del editor */
.sstcat-campo { display: flex; flex-direction: column; }

/* Ayuda bajo un campo: por que existe y que pasa si se deja vacio. Un catalogo cuyo proposito
   no se entiende se rellena mal, y eso contamina todos los expedientes que lo citan. */
.sstcat-ayuda { margin: .25rem 0 0; font-size: .72rem; line-height: 1.45; color: var(--sst-tenue); }

/* ── Selector de icono ────────────────────────────────────────────────────
   Paleta y no caja de texto: solo se carga el juego CLASICO de Material Icons, asi que un
   nombre escrito a mano que no exista deja un hueco en blanco sin dar ningun error. */
.sstcat-icono { display: flex; flex-direction: column; gap: .35rem; }
.sstcat-icono > label { font-size: .74rem; font-weight: 600; color: var(--sst-tenue); }
.sstcat-icono__sel { display: flex; align-items: center; gap: .5rem;
    padding: .4rem .55rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.sstcat-icono__v { display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 7px; background: #fff;
    border: 1px solid #e2e8f0; color: #0f172a; }
.sstcat-icono__v .rzi { font-size: 1.25rem; }
.sstcat-icono__sel code { flex: 1; font-size: .74rem; color: #475569;
    font-family: ui-monospace, monospace; }
.sstcat-icono__g { margin: .45rem 0 .1rem; font-size: .64rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.sstcat-icono__p { display: flex; flex-wrap: wrap; gap: .25rem; }
.sstcat-icono__p button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 7px; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.sstcat-icono__p button .rzi { font-size: 1.15rem; }
.sstcat-icono__p button:hover { border-color: #94a3b8; background: #f1f5f9; transform: translateY(-1px); }
.sstcat-icono__p button:focus-visible { outline: 2px solid #005387; outline-offset: 1px; }
.sstcat-icono__p button.on { border-color: #005387; background: #e6f0f7; color: #005387;
    box-shadow: 0 0 0 1px #005387 inset; }

@media (prefers-reduced-motion: reduce) { .sstcat-icono__p button { transition: none; } }
.sstcat-color { display: flex; flex-direction: column; gap: .35rem; }
.sstcat-color > label { font-size: .74rem; font-weight: 600; color: var(--sst-tenue); }
.sstcat-color__f { display: flex; align-items: center; gap: .5rem; }
.sstcat-color__f input[type=color] { width: 2.6rem; height: 2.1rem; border: 1px solid #e2e8f0;
    border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }
.sstcat-color__m { flex: 1; height: 2.1rem; border-radius: 6px; border: 1px solid #e2e8f0; }

.sstcat-zona { display: flex; flex-direction: column; gap: .5rem; }
.sstcat-zona > label { font-size: .74rem; font-weight: 600; color: var(--sst-tenue); }

@media (max-width: 900px) {
    .sstcat { grid-template-columns: minmax(0, 1fr); }
    .sstcat-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
    .sstcat-rail__g { width: 100%; }
}