/* ═══════════════════════════════════════════════════════════════════════════
 * lhm.css — lo propio de LHM Litigios, SIEMPRE por encima del tema.
 *
 * Regla de oro: no se toca ni un byte de `assets/css/*.min.css` ni de
 * `assets/js/app.js`. Todo lo nuestro se añade aquí, después. Así una
 * actualización de la plantilla no borra nuestro trabajo, y un test comprueba
 * por checksum que esos ficheros siguen intactos.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
 * 1 · El color de marca de cada cliente
 *
 * 🔴 Por qué esta sección existe: el tema compila sus componentes con colores
 * LITERALES, no con variables. Por ejemplo:
 *
 *     .badge-soft-primary{color:#5156be;background-color:rgba(81,86,190,.18)}
 *     .btn-primary{--bs-btn-bg:#5156be; …}
 *
 * De modo que hacer `setProperty('--bs-primary', color)` desde JavaScript
 * recolorea los enlaces y poco más: los botones primarios y toda la familia
 * `soft-*` se quedan con el violeta de la plantilla. Aquí se redeclaran en
 * términos de la variable, que es lo que hace que la marca del cliente llegue
 * de verdad a la pantalla.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  --lhm-primario: #5156be;
  --lhm-primario-rgb: 81, 86, 190;
  --lhm-primario-oscuro: #414598;
}

.btn-primary {
  --bs-btn-bg: var(--lhm-primario);
  --bs-btn-border-color: var(--lhm-primario);
  --bs-btn-hover-bg: var(--lhm-primario-oscuro);
  --bs-btn-hover-border-color: var(--lhm-primario-oscuro);
  --bs-btn-active-bg: var(--lhm-primario-oscuro);
  --bs-btn-active-border-color: var(--lhm-primario-oscuro);
  --bs-btn-disabled-bg: var(--lhm-primario);
  --bs-btn-disabled-border-color: var(--lhm-primario);
  --bs-btn-focus-shadow-rgb: var(--lhm-primario-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--lhm-primario);
  --bs-btn-border-color: var(--lhm-primario);
  --bs-btn-hover-bg: var(--lhm-primario);
  --bs-btn-hover-border-color: var(--lhm-primario);
  --bs-btn-active-bg: var(--lhm-primario);
  --bs-btn-active-border-color: var(--lhm-primario);
}
.badge-soft-primary { color: var(--lhm-primario); background-color: rgba(var(--lhm-primario-rgb), .18); }
.btn-soft-primary   { color: var(--lhm-primario); background-color: rgba(var(--lhm-primario-rgb), .10); }
.btn-soft-primary:hover,
.btn-soft-primary:focus { color: #fff; background-color: var(--lhm-primario); }
.bg-primary         { background-color: var(--lhm-primario) !important; }
.text-primary       { color: var(--lhm-primario) !important; }
.border-primary     { border-color: var(--lhm-primario) !important; }
.bg-primary-subtle  { background-color: rgba(var(--lhm-primario-rgb), .12) !important; }
.text-bg-primary    { background-color: var(--lhm-primario) !important; color: #fff !important; }
a { color: var(--lhm-primario); }
a:hover { color: var(--lhm-primario-oscuro); }
.page-item.active .page-link { background-color: var(--lhm-primario); border-color: var(--lhm-primario); }
.form-check-input:checked { background-color: var(--lhm-primario); border-color: var(--lhm-primario); }
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--lhm-primario-rgb), .5);
  box-shadow: 0 0 0 .15rem rgba(var(--lhm-primario-rgb), .25);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 2 · Contraste
 *
 * El `--bs-secondary-color` del tema no llega a AA sobre los fondos claros que
 * usa la aplicación (4,41:1 sobre #F7F8FB). Este sí, y está medido.
 * ─────────────────────────────────────────────────────────────────────────── */
.text-muted { color: #5A6274 !important; }

/* ───────────────────────────────────────────────────────────────────────────
 * 3 · Un dato que no se tiene se DICE
 *
 * Un hueco en blanco y un cero no son lo mismo, y en un expediente esa
 * diferencia importa: «sin fecha de fallo» no es «fallo el 00/00/0000».
 * ─────────────────────────────────────────────────────────────────────────── */
.sin-dato { color: #8A91A3; font-style: italic; }

/* ───────────────────────────────────────────────────────────────────────────
 * 4 · Utilidades propias
 *
 * Aquí viven las medidas que de otro modo irían en un atributo `style=`, para
 * no depender de `style-src 'unsafe-inline'`.
 * ─────────────────────────────────────────────────────────────────────────── */
.lhm-scroll-230  { max-height: 230px; }
.lhm-truncada-18 { max-width: 18rem; }
.lhm-truncada-26 { max-width: 26rem; }
.lhm-truncada-28 { max-width: 28rem; }
.lhm-celda-dia   { height: 6.5rem; vertical-align: top; }
.lhm-vacio-img   { max-width: 260px; opacity: .9; }

/* La franja de la cabecera de una ficha, con el color del cliente. */
.lhm-ficha-cabecera { background-color: rgba(var(--lhm-primario-rgb), .10); }

/* Fila de tabla que enlaza a su ficha: el cursor lo anuncia. */
.lhm-fila-enlace { cursor: pointer; }
.lhm-barra-fuerza { height: 4px; }

/* Prosa devuelta por la IA: conserva los saltos de línea del modelo sin
   interpretarlos como HTML (el texto se escapa antes de insertarse). */
.lhm-prosa { white-space: pre-wrap; line-height: 1.7; }

/* Línea de tiempo de actuaciones: 50 hechos no caben en pantalla, así que la
   lista hace su propio scroll y el resto de la ficha sigue accesible. */
.lhm-scroll-560 { max-height: 560px; overflow-y: auto; }

/* La ilustración de la página de error, acotada para que no domine la pantalla. */
.lhm-error-img { max-width: 260px; }

/* El avatar de la ficha monta sobre la banda de color de la cabecera.
   🔴 Aquí estuvo `mt-n4`, que no existe: este build de Bootstrap no genera las
   utilidades de margen negativo, así que la clase se ignoraba en silencio y el
   avatar quedaba debajo de la banda en vez de encima. */
.lhm-solapa { margin-top: -1.5rem; }

/* Choices esconde el `<select>`, así que el estado inválido se pinta sobre su
   propia caja: el borde rojo tiene que estar donde el usuario mira. */
.choices.is-invalid .choices__inner { border-color: #f56e6e; }

/* Choices trae `margin-bottom: 24px` de serie, y en una fila con el botón al
   lado eso lo dejaba medio centímetro más abajo que el campo. El hueco lo pone
   la rejilla del formulario, no el componente. */
.gpa-fila-choices .choices, .row.g-3 .choices, .row.g-2 .choices { margin-bottom: 0; }

/* La campana de avisos.
   🔴 `overflow-x: hidden` explícito: sin él, un título largo ensancha el
   contenido y SimpleBar dibuja una barra horizontal en un panel de 320 px —se
   ve una barra que nadie quiere arrastrar y el texto queda cortado—. */
.lhm-scroll-320 { max-height: 320px; overflow-y: auto; overflow-x: hidden; }

/* Un título de aviso cabe en dos líneas: a una se pierde la mitad de las
   actuaciones, y sin límite una sola ocupa el panel entero. */
.lhm-dos-lineas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* Un hijo de flex no se encoge por debajo de su contenido salvo que se le diga:
   sin esto, `text-truncate` no trunca nada dentro de un `.flex-grow-1`. */
.min-w-0 { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════════
   El skin activo.

   Las variables las emite el servidor en el `<html>` (App\Core\Tema). Aquí solo
   se USAN: el tema de la plantilla compila sus componentes con colores
   literales, así que cambiar `--bs-primary` recolorea los enlaces y poco más —
   esta capa es la otra mitad, y las dos son necesarias.
   ════════════════════════════════════════════════════════════════════════ */

body { font-family: var(--lhm-tipografia, inherit); }

/* El fondo del tema. `#f8f8fb` de Minia contra el crema de LHM 2026. */
body, .main-content, .page-content { background-color: var(--lhm-fondo, #f8f8fb); }

/* El menú lateral oscuro toma el color del tema. */
[data-sidebar="dark"] .vertical-menu,
[data-sidebar="dark"] .navbar-brand-box { background: var(--lhm-sidebar, #2a3042); }

/* 🔴 El acento SOLO como texto en su versión legible. `--lhm-acento` es el
   color de marca —vale para un filete, un fondo o un icono sobre color— y
   `--lhm-acento-texto` es el que cumple 4,5:1 sobre fondo claro. Usar el
   primero para texto es escribir algo que alguien no va a poder leer. */
.lhm-acento        { color: var(--lhm-acento-texto, #8a6410); }
.lhm-acento-fondo  { background-color: var(--lhm-acento, #f1b44c); }
.lhm-acento-borde  { border-color: var(--lhm-acento, #f1b44c); }
/* Sobre el menú oscuro y sobre cualquier fondo azul o negro, el otro tono. */
[data-sidebar="dark"] .lhm-acento,
.bg-primary .lhm-acento { color: var(--lhm-acento-oscuro, #f1b44c); }

/* El logotipo de LHM 2026 es dorado sobre el azul del menú. */
[data-tema="lhm2026"] .logo-txt { letter-spacing: .02em; font-weight: 600; }

/* Las muestras de skin: un menú, una barra y dos líneas. Se elige viendo el
   azul al lado del violeta, no leyendo dos nombres propios. */
.lhm-tema-opcion {
  /* 🔴 `flex` en columna y `height: 100%`, no `block`: las descripciones tienen
     distinta longitud —una línea en «Minia», dos en «LHM 2026»— y en una rejilla
     eso deja tres fichas de tres alturas. La muestra de color queda a distinta
     altura en cada una y la comparación, que es para lo que están, se vuelve
     incómoda. La columna que las contiene también estira. */
  display: flex; flex-direction: column; cursor: pointer; width: 100%; height: 100%;
  border: 2px solid var(--bs-border-color, #e9e9ef); border-radius: .5rem;
  padding: .75rem; margin-bottom: 0; transition: border-color .15s, box-shadow .15s;
}
.lhm-tema-opcion:hover  { border-color: var(--lhm-primario, #5156be); }
.lhm-tema-opcion.activa { border-color: var(--lhm-primario, #5156be);
                          box-shadow: 0 0 0 .2rem rgba(var(--lhm-primario-rgb, 81,86,190), .18); }
.lhm-tema-opcion input[type=radio] { float: right; margin-left: .5rem; }

.lhm-tema-muestra { display: flex; height: 76px; border-radius: .375rem; overflow: hidden;
                    border: 1px solid rgba(0,0,0,.08); }
.lhm-tema-menu   { width: 26%; display: block; }
.lhm-tema-cuerpo { width: 74%; display: block; position: relative; padding: 8px; }
.lhm-tema-barra  { display: block; height: 10px; width: 46%; border-radius: 3px; }
.lhm-tema-punto  { display: block; width: 12px; height: 12px; border-radius: 50%;
                   position: absolute; top: 8px; right: 8px; }
.lhm-tema-linea  { display: block; height: 6px; width: 72%; border-radius: 3px;
                   background: rgba(0,0,0,.10); margin-top: 9px; }
.lhm-tema-linea.corta { width: 48%; margin-top: 6px; }

/* El aviso de contraste bajo cada color. Es un gancho de JS, pero se le da
   estilo propio para que no dependa de una excepción en el gate de clases. */
.lhm-contraste { min-height: 1.2em; }

/* Menú horizontal.
   🔴 El tema calcula el margen izquierdo del contenido a partir de
   `data-sidebar-size`, que sigue puesto aunque no haya menú lateral: sin esto,
   con el menú arriba queda una franja vacía de 250 px a la izquierda. */
[data-layout="horizontal"] .main-content { margin-left: 0 !important; }
[data-layout="horizontal"] .page-content { padding-top: 1rem; }
/* Y el botón de plegar el lateral no tiene nada que plegar. */
[data-layout="horizontal"] #vertical-menu-btn { display: none; }

/* 🔴 `arrow-none` la usa el markup de Minia y NO está en su CSS compilado: sin
   definirla, cada ítem del menú horizontal sale con DOS flechas —la `::after`
   que Bootstrap añade a todo `.dropdown-toggle` y la `.arrow-down` del tema—.
   `navbar-light` tampoco existe (Bootstrap 5.3 la retiró) y se quitó del markup
   en vez de inventarle un estilo. */
.topnav .dropdown-toggle.arrow-none::after { display: none; }

/* El disparador del menú horizontal es un `<button>` (ver el comentario de
   `topnav.php`): se le quita la apariencia de botón para que se lea como lo que
   es, un ítem de menú. */
.topnav .navbar-nav > .nav-item > button.nav-link {
  background: none; border: 0; text-decoration: none;
  display: flex; align-items: center;
}
.topnav .navbar-nav > .nav-item > button.nav-link:focus-visible {
  outline: 2px solid var(--lhm-primario, #5156be); outline-offset: -2px;
}

/* Con el menú arriba, la caja de marca del topbar mostraba solo el símbolo: el
   tema oculta el logotipo largo según el tamaño del menú LATERAL, que aquí no
   existe. Con el menú horizontal hay sitio de sobra para el nombre.

   🔴 Y hay que ACOTAR su altura. El tema la calcula para acompañar al menú
   lateral —140 px— dentro de un topbar de 70: sin límite, la caja se derrama
   por debajo del topbar y, como este lleva `z-index: 1054` contra el 100 del
   menú de arriba, **tapa los primeros ítems**. En un móvil eso era un menú que
   se abría, se veía y no respondía al pulsarlo: el peor fallo posible, porque
   parece que el sistema está roto. */
[data-layout="horizontal"] .navbar-brand-box .logo-sm { display: none; }
[data-layout="horizontal"] .navbar-brand-box .logo-lg { display: inline-block; }
[data-layout="horizontal"] .navbar-brand-box {
  width: auto; padding-right: 1.25rem;
  height: 70px; overflow: hidden;
  display: flex; align-items: center;
}

/* El código QR de vinculación: legible sin ocupar la pantalla entera. */
.lhm-qr { max-width: 280px; border: 1px solid var(--bs-border-color, #e9e9ef); border-radius: .5rem; }

/* ── El recorrido guiado ──────────────────────────────────────────────────
   Sin librería: una capa oscura, un elemento resaltado y un globo. Traer una
   dependencia entera para esto sería pagar 40 KB por un rectángulo. */
.lhm-tour-capa {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(17, 24, 35, .55);
}
.lhm-tour-globo {
  position: fixed; z-index: 1082; width: min(340px, calc(100vw - 24px));
  background: #fff; border-radius: .5rem; padding: 1rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
.lhm-tour-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
/* 🔴 El elemento señalado sube POR ENCIMA de la capa oscura y se recorta con un
   halo: si solo se le pusiera un borde, seguiría atenuado bajo la capa y el
   recorrido señalaría algo que no se ve. */
.lhm-tour-destacado {
  position: relative; z-index: 1081;
  border-radius: .375rem;
  box-shadow: 0 0 0 4px rgba(var(--lhm-primario-rgb, 81, 86, 190), .55),
              0 0 0 9999px rgba(17, 24, 35, .55);
}

/* 🔴 Un `.badge` mide `0.75em`: RELATIVO a su padre. Dentro de un contenedor a
   13px queda en 9,75, y dentro de uno a 12 en 9 — justo el tamaño de las
   etiquetas que llevan el dato que más importa («en 9 días», «venció hace 16»).
   Nadie lo escribió así: sale de multiplicar dos decisiones razonables por
   separado.
   El suelo se pone aquí, en el sistema, y no vista por vista: el patrón se
   repite en cada tarjeta que combine texto pequeño con una etiqueta. */
.badge { font-size: max(0.75em, 11px); }

/* ── La disposición del menú ──────────────────────────────────────────────
   Los dos menús están en el DOM y aquí se decide cuál se ve. Así el cambio
   desde el panel de apariencia surte efecto al instante, sin recargar y sin
   pasar por un estado intermedio en el que no hay ninguno —o hay dos—. */
[data-layout="vertical"]   .topnav        { display: none !important; }
[data-layout="horizontal"] .vertical-menu { display: none !important; }

/* Cada disposición enseña su propio botón de menú. */
[data-layout="vertical"]   .lhm-solo-horizontal { display: none !important; }
[data-layout="horizontal"] .lhm-solo-vertical   { display: none !important; }
/* En pantalla ancha el menú de arriba está siempre desplegado: su botón sobra. */
@media (min-width: 992px) {
  [data-layout="horizontal"] .lhm-solo-horizontal { display: none !important; }
}

/* ── Procedencia de un análisis de IA ──────────────────────────────────────
   El detalle de con qué se hizo un análisis va plegado: quien solo quiere
   leerlo no tiene que pasar por encima, y quien necesita contrastarlo lo tiene
   a un clic. El triángulo por defecto del navegador queda pequeño y descolgado
   junto al icono, así que se sustituye por el propio. */
.lhm-procedencia > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  user-select: none;
}
.lhm-procedencia > summary::-webkit-details-marker { display: none; }
.lhm-procedencia > summary::after {
  content: "\ea4a";                 /* boxicons: chevron-down */
  font-family: "boxicons";
  font-size: 1.1em;
  transition: transform .15s ease;
}
.lhm-procedencia[open] > summary::after { transform: rotate(180deg); }
.lhm-procedencia > summary:hover { text-decoration: underline; }
.lhm-procedencia > summary:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Área táctil de los indicadores del carrusel ───────────────────────────
   El tema los deja en 10×10 px (`carousel-indicators-rounded button`, con
   `!important`). WCAG 2.2 «Target Size» (AA) pide 24×24 px, y era el fallo de
   accesibilidad más caro de esta pantalla.

   🔴 Un pseudo-elemento MÁS GRANDE no sirve: el área que cuenta es la del
   elemento clicable, y ni Lighthouse ni el dedo del usuario ven un `::after`
   que sobresale. Hay que invertirlo — el BOTÓN pasa a medir 24×24 px y es
   transparente, y el punto visible de 10 px lo dibuja el pseudo-elemento
   centrado dentro. Se ve igual; lo que cambia es dónde se puede pulsar.

   Los `!important` son obligados: el tema los usa en esa misma regla. */
.carousel-indicators .lhm-indicador {
  width: 24px !important;
  height: 24px !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background-color: transparent !important;
  position: relative;
}
.carousel-indicators .lhm-indicador::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

/* ── DataTables 3 ──────────────────────────────────────────────────────────
   Detecta el tipo de cada columna y alinea a la DERECHA las de fecha y número
   (`dt-type-date`, `dt-type-numeric`), con el icono de orden a la izquierda del
   título. La primera columna del listado —radicado con su fecha en
   `data-order`— cae en «fecha» y salía pegada al borde derecho, distinta de
   las demás. Aquí todo se lee de izquierda a derecha, como siempre. */
table.dataTable th.dt-type-date, table.dataTable td.dt-type-date,
table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric { text-align: left; }
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-header { flex-direction: row; }

/* ── El centro de ayuda y el manual por familia ───────────────────────────
   Sobre las tarjetas y utilidades del tema; solo lo que Minia no trae: los
   bloques «razón de ser / para qué sirve / cómo se usa», el flujo numerado, la
   figura ampliable, el índice pegajoso y la versión impresa. */
.lhm-man-hero { border-left: 4px solid var(--bs-primary); }
.lhm-man-tarjeta { transition: box-shadow .15s ease, transform .15s ease; text-decoration: none; }
.lhm-man-tarjeta:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12); transform: translateY(-2px); }
.lhm-man-lista li { line-height: 1.7; }
.lhm-man-lista .bx { vertical-align: -2px; }
.lhm-man-busca { flex: 1 1 220px; max-width: 320px; }
.lhm-man-toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
.lhm-man-toc .nav-link { padding: .3rem .5rem; font-size: .8125rem; color: var(--bs-body-color); border-left: 2px solid transparent; }
.lhm-man-toc .nav-link.active { color: var(--bs-primary); border-left-color: var(--bs-primary); background: var(--bs-primary-bg-subtle, rgba(81, 86, 190, .08)); }
.lhm-man-toc .nav-link .bx { vertical-align: -2px; margin-right: .25rem; }
.lhm-man-progreso { height: 4px; }
.lhm-man-seccion { scroll-margin-top: 90px; }
.lhm-man-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: .9rem; font-weight: 600;
  background: var(--bs-primary); color: #fff; vertical-align: middle; margin-right: .25rem;
}
.lhm-man-bloque { border-left: 3px solid var(--bs-border-color); padding: .6rem .9rem; margin-bottom: .9rem; border-radius: 0 .375rem .375rem 0; background: var(--bs-tertiary-bg, #f8f9fa); }
.lhm-man-bloque h6 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .4rem; }
.lhm-man-bloque h6 .bx { vertical-align: -2px; margin-right: .2rem; }
.lhm-man-por-que  { border-left-color: var(--bs-warning); }
.lhm-man-para-que { border-left-color: var(--bs-success); }
.lhm-man-como     { border-left-color: var(--bs-primary); }
.lhm-man-faq      { border-left-color: var(--bs-info); }
.lhm-man-pasos { padding-left: 1.2rem; }
.lhm-man-pasos li { margin-bottom: .3rem; }
.lhm-man-flujo { display: grid; gap: .6rem; }
.lhm-man-paso { display: flex; gap: .6rem; align-items: flex-start; }
.lhm-man-paso-num {
  flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .8rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; background: var(--bs-primary); color: #fff;
}
.lhm-man-figura { margin: 0 0 1rem; }
.lhm-man-figura img { border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); cursor: zoom-in; }
.lhm-man-figura figcaption { margin-top: .35rem; }
.lhm-man-nota .bx { vertical-align: -2px; }
.lhm-man-barra { position: sticky; top: 70px; z-index: 5; }

/* Impreso o guardado en PDF: sin menú, sin topbar, sin índice, sin botones;
   cada sección empieza en página nueva y las figuras no se parten. */
@media print {
  .vertical-menu, #page-topbar, .topnav, .footer, .lhm-man-barra, .lhm-man-toc, .page-title-box, .d-print-none { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
  .lhm-man-seccion { break-before: page; box-shadow: none; border: 0; }
  .lhm-man-seccion:first-of-type { break-before: auto; }
  .lhm-man-figura, .lhm-man-bloque, .lhm-man-paso { break-inside: avoid; }
  .col-xl-7, .col-xl-5 { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .lhm-man-figura img { cursor: default; box-shadow: none; }
}

/* El aviso de privacidad en la pantalla de entrada: texto legal legible, no un muro. */
.lhm-privacidad { max-width: 640px; margin: 0 auto; text-align: left; line-height: 1.6; }
.lhm-privacidad p { margin-bottom: .75rem; }

/* Informe a medida: grupos de columnas elegibles */
.lhm-grupo-columnas {
  border: 1px solid var(--bs-border-color, #e9e9ef);
  border-radius: .5rem;
  padding: .75rem 1rem;
}
.lhm-grupo-columnas > legend {
  float: none;
  width: auto;
  padding: 0 .5rem;
  margin-bottom: .25rem;
}