/* Componentes de la marca que Bootstrap no trae (tarea 2.16, RB.5).

   Se pintan con las macros de app/templates/marca/componentes.html; una
   pantalla migrada no necesita CSS propio. Botones, campos, tablas, tarjetas,
   avisos y paginación son los de Bootstrap vestidos por liberos-bootstrap.css.
   Todo color y medida sale de liberos-tokens.css. */

/* --- Cabecera de página: migas, título, subtítulo y una acción -------------- */
.lb-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lb-space-4);
  margin-bottom: var(--lb-space-8);
}

.lb-cabecera__titulo {
  margin: 0;
  font-size: var(--lb-fs-title-1);
  line-height: var(--lb-lh-title-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lb-text-primary);
}

.lb-cabecera__subtitulo {
  margin: var(--lb-space-1) 0 0;
  font-size: var(--lb-fs-body);
  line-height: var(--lb-lh-body);
  color: var(--lb-text-secondary);
}

.lb-migas {
  --bs-breadcrumb-margin-bottom: var(--lb-space-2);
  --bs-breadcrumb-font-size: var(--lb-fs-body-sm);
  --bs-breadcrumb-divider-color: var(--lb-text-tertiary);
  --bs-breadcrumb-item-active-color: var(--lb-text-secondary);
}

/* --- Chip de estado (secciones 5.4 y 12.7): cápsula de 24 px, con punto ------ */
.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--lb-radius-full);
  font-size: var(--lb-fs-caption);
  line-height: var(--lb-lh-caption);
  font-weight: 500;
  white-space: nowrap;
  background: var(--lb-chip-bg);
  color: var(--lb-chip-texto);
}

.lb-chip__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--lb-radius-full);
  background: var(--lb-chip-punto);
}

.lb-chip--borrador {
  --lb-chip-bg: var(--lb-estado-borrador-bg);
  --lb-chip-texto: var(--lb-estado-borrador-texto);
  --lb-chip-punto: var(--lb-estado-borrador-punto);
}

.lb-chip--pendiente {
  --lb-chip-bg: var(--lb-estado-pendiente-bg);
  --lb-chip-texto: var(--lb-estado-pendiente-texto);
  --lb-chip-punto: var(--lb-estado-pendiente-punto);
}

.lb-chip--firmado {
  --lb-chip-bg: var(--lb-estado-firmado-bg);
  --lb-chip-texto: var(--lb-estado-firmado-texto);
  --lb-chip-punto: var(--lb-estado-firmado-punto);
}

.lb-chip--pagado {
  --lb-chip-bg: var(--lb-estado-pagado-bg);
  --lb-chip-texto: var(--lb-estado-pagado-texto);
  --lb-chip-punto: var(--lb-estado-pagado-punto);
}

.lb-chip--liquidado {
  --lb-chip-bg: var(--lb-estado-liquidado-bg);
  --lb-chip-texto: var(--lb-estado-liquidado-texto);
  --lb-chip-punto: var(--lb-estado-liquidado-punto);
}

.lb-chip--disputa {
  --lb-chip-bg: var(--lb-estado-disputa-bg);
  --lb-chip-texto: var(--lb-estado-disputa-texto);
  --lb-chip-punto: var(--lb-estado-disputa-punto);
}

/* Tonos para estados que no son del flujo de contratación (activo, archivado…) */
.lb-chip--exito {
  --lb-chip-bg: var(--lb-exito-bg);
  --lb-chip-texto: var(--lb-exito);
  --lb-chip-punto: var(--lb-exito);
}

.lb-chip--aviso {
  --lb-chip-bg: var(--lb-aviso-bg);
  --lb-chip-texto: var(--lb-aviso);
  --lb-chip-punto: var(--lb-aviso);
}

.lb-chip--error {
  --lb-chip-bg: var(--lb-error-bg);
  --lb-chip-texto: var(--lb-error);
  --lb-chip-punto: var(--lb-error);
}

.lb-chip--info {
  --lb-chip-bg: var(--lb-info-bg);
  --lb-chip-texto: var(--lb-info);
  --lb-chip-punto: var(--lb-info);
}

/* --- Métrica (sección 12.6): número grande en Noche, etiqueta pequeña ------- */
.lb-metrica {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-1);
}

.lb-metrica__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  font-size: var(--lb-fs-body-sm);
  line-height: var(--lb-lh-body-sm);
  color: var(--lb-text-secondary);
}

.lb-metrica__valor {
  font-size: var(--lb-fs-display-3);
  line-height: var(--lb-lh-display-3);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--lb-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Un importe se encoge con la tarjeta y no parte el símbolo del euro. */
.lb-metrica--importe {
  container-type: inline-size;
}

.lb-metrica--importe .lb-metrica__valor {
  white-space: nowrap;
  font-size: var(--lb-fs-title-1);
  font-size: min(var(--lb-fs-display-3), 15cqi);
  /* La misma altura que un recuento: las tarjetas de una fila quedan iguales. */
  line-height: calc(var(--lb-fs-display-3) * var(--lb-lh-display-3));
}

.lb-metrica__variacion {
  font-size: var(--lb-fs-caption);
  line-height: var(--lb-lh-caption);
  font-weight: 500;
  color: var(--lb-text-secondary);
}

.lb-metrica__variacion--sube { color: var(--lb-exito); }
.lb-metrica__variacion--baja { color: var(--lb-error); }

/* --- Estado vacío: qué falta y qué hacer ------------------------------------- */
.lb-vacio {
  padding: var(--lb-space-12) var(--lb-space-6);
  text-align: center;
  color: var(--lb-text-secondary);
}

.lb-vacio__icono {
  font-size: 32px;
  color: var(--lb-text-tertiary);
}

.lb-vacio__titulo {
  margin: var(--lb-space-3) 0 var(--lb-space-1);
  font-size: var(--lb-fs-title-3);
  line-height: var(--lb-lh-title-3);
  font-weight: 600;
  color: var(--lb-text-primary);
}

.lb-vacio__texto {
  max-width: 44ch;
  margin: 0 auto var(--lb-space-4);
  font-size: var(--lb-fs-body-sm);
  line-height: var(--lb-lh-body-sm);
}

/* --- Aviso con icono ---------------------------------------------------------- */
.lb-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--lb-space-3);
}

/* El destino de un enlace dentro del panel: queda debajo de la barra superior, que es fija
   (64 px), y no tapado por ella (AL-303). */
.lb-ancla {
  scroll-margin-top: calc(64px + var(--lb-space-4));
}

.lb-aviso__icono {
  flex: none;
  font-size: 20px;
  line-height: var(--lb-lh-body);
}

.lb-aviso__titulo {
  display: block;
  font-weight: 600;
}

/* El botón que va dentro del aviso, debajo del texto (`ui.aviso(..., accion=)`) */
.lb-aviso__accion {
  margin-top: var(--lb-space-2);
}

/* --- Tarjeta ------------------------------------------------------------------- */
.lb-tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-3);
  padding: var(--lb-space-5) var(--lb-space-6) 0;
}

/* La acción de la cabecera («Ver todas») no se parte: a 390 px el título largo
   la estrujaba hasta dejar «Ver» y «todas» en dos líneas. Si no caben los dos,
   la acción baja entera debajo del título. */
.lb-tarjeta__cabecera { flex-wrap: wrap; }
.lb-tarjeta__cabecera > :not(.lb-tarjeta__titulo) { flex-shrink: 0; white-space: nowrap; }

.lb-tarjeta__titulo {
  margin: 0;
  font-size: var(--lb-fs-title-3);
  line-height: var(--lb-lh-title-3);
  font-weight: 600;
  color: var(--lb-text-primary);
}

.lb-tarjeta__cuerpo {
  padding: var(--lb-space-5) var(--lb-space-6) var(--lb-space-6);
}

/* --- Matriz de permisos (RB.16): un rol por fila, un permiso por columna ----- */
.lb-matriz {
  font-size: var(--lb-fs-body-sm);
  line-height: var(--lb-lh-body-sm);
}

.lb-matriz th,
.lb-matriz td {
  vertical-align: middle;
}

.lb-matriz thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--lb-bg-surface);
}

.lb-matriz__area {
  text-align: center;
  font-weight: 600;
  color: var(--lb-text-primary);
  border-bottom: 2px solid var(--lb-accent);
}

.lb-matriz__permiso {
  min-width: 6rem;
  font-weight: 500;
  color: var(--lb-text-secondary);
}

.lb-matriz__rol {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  background: var(--lb-bg-surface);
}

.lb-matriz thead .lb-matriz__rol {
  z-index: 3;
}

.lb-matriz__celda {
  text-align: center;
}

/* Tipo de acceso de una celda: botón si el rol se puede cambiar, figura si no. */
.lb-acceso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--lb-radius-md);
  font-size: var(--lb-fs-body);
}

.lb-acceso--full {
  background: var(--lb-exito-bg);
  color: var(--lb-exito);
}

.lb-acceso--read_only {
  background: var(--lb-info-bg);
  color: var(--lb-info);
}

.lb-acceso--none {
  background: var(--lb-bg-surface-2);
  color: var(--lb-text-tertiary);
}

button.lb-acceso {
  cursor: pointer;
}

button.lb-acceso:hover {
  border-color: var(--lb-accent);
}

button.lb-acceso:focus-visible {
  outline: 2px solid var(--lb-focus);
  outline-offset: 2px;
}

.lb-acceso[aria-busy="true"] {
  opacity: 0.5;
}

.lb-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lb-space-4);
  margin: 0 0 var(--lb-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--lb-fs-body-sm);
  color: var(--lb-text-secondary);
}

.lb-leyenda li {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
}

/* --- Avatar: la foto de una persona o su inicial, en 32 px (RB.16) ------------- */
.lb-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--lb-radius-full);
  object-fit: cover;
  background: var(--lb-accent-subtle);
  color: var(--lb-accent-subtle-text);
  font-size: var(--lb-fs-caption);
  font-weight: 600;
}

/* --- Contenedor de una gráfica de ECharts: necesita altura (RB.16) ------------ */
.lb-grafica {
  width: 100%;
  height: 18rem;
}

/* --- Un icono en SVG con la rejilla de Phosphor (`ui.icono_instalar`, AL-299) ------------ */
.lb-icono-svg {
  flex: none;
  vertical-align: -0.125em;   /* como `.ph` */
}

/* --- El logotipo según el modo: el de fondo oscuro sólo en oscuro ----------------- */
.lb-logo {
  object-fit: contain;
}

.lb-logo--oscuro {
  display: none;
}

:root[data-theme="dark"] .lb-logo--claro {
  display: none;
}

:root[data-theme="dark"] .lb-logo--oscuro {
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lb-logo--claro {
    display: none;
  }

  :root:not([data-theme="light"]) .lb-logo--oscuro {
    display: inline-block;
  }
}

/* La marca de las cabeceras y del menú (AL-232): «LÍBEROS By OBAINC» a 48 px de alto, que es lo
   mínimo para que el endoso se lea (unos 7 px de altura de mayúscula; a 40 px quedaba en 5,8).
   Ajuste óptico: el endoso cuelga por debajo del logotipo, así que la caja centrada dejaba las
   letras de LÍBEROS más altas que el menú de al lado; se bajan 4 px. */
.lb-marca {
  line-height: 0;
}

.lb-marca img {
  width: auto;
  height: 48px;
  transform: translateY(4px);
}

/* En móvil, la compacta, sin endoso: a ese tamaño sería un endoso de 4 px. Sin endoso que
   compense, va centrada. */
@media (max-width: 575.98px) {
  .lb-marca--movil img {
    height: 26px;
    transform: none;
  }
}

/* --- Árbol: sangría por nivel, que la pantalla da en --lb-nivel (RB.17) --------- */
.lb-arbol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-arbol__rama {
  padding: var(--lb-space-1) 0 var(--lb-space-1) calc(var(--lb-nivel, 0) * var(--lb-space-5));
}

/* --- Editor de texto enriquecido ---------------------------------------------- */
/*
 * El editor propio (AL-117, vendor/editor-legal/editor-texto-*.min.js) sobre los
 * <textarea> de las ofertas y de la web. Sustituye a CKEditor (GPL, desde su CDN).
 * Con los colores de la marca en claro y en oscuro, y botones de 36 px con ratón y
 * 44 en pantallas táctiles, como todo objetivo táctil (T6 de la revisión final).
 */
.lb-editor-texto {
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-md);
  background: var(--lb-bg-surface);
  color: var(--lb-text-primary);
}

.lb-editor-texto.is-invalid {
  border-color: var(--lb-error);
}

.lb-editor-texto:focus-within {
  border-color: var(--lb-accent);
  box-shadow: var(--lb-focus-ring);
}

.lb-editor-texto__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-1);
  padding: var(--lb-space-1);
  border-bottom: 1px solid var(--lb-border-subtle);
  background: var(--lb-bg-surface-2);
  border-radius: var(--lb-radius-md) var(--lb-radius-md) 0 0;
}

.lb-editor-texto__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--lb-space-2);
  border: 0;
  border-radius: var(--lb-radius-sm);
  background: transparent;
  color: var(--lb-text-primary);
  font-size: 1.125rem;
}

.lb-editor-texto__boton:hover {
  background: var(--lb-bg-surface);
}

.lb-editor-texto__boton[aria-pressed="true"] {
  background: var(--lb-accent);
  color: var(--lb-text-on-accent);
}

.lb-editor-texto__boton:focus-visible {
  outline: 2px solid var(--lb-accent);
  outline-offset: 1px;
}

@media (pointer: coarse) {
  .lb-editor-texto__boton {
    min-width: 44px;
    min-height: 44px;
  }
}

.lb-editor-texto__enlace {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  align-items: center;
  padding: var(--lb-space-2);
  border-bottom: 1px solid var(--lb-border-subtle);
}

.lb-editor-texto__enlace[hidden] {
  display: none;
}

.lb-editor-texto__enlace .form-control {
  flex: 1 1 14rem;
}

.lb-editor-texto__contenido {
  min-height: 10rem;
  padding: var(--lb-space-3);
  outline: none;
}

.lb-editor-texto__contenido > :last-child {
  margin-bottom: 0;
}

/* Cada elemento de lista lleva su párrafo: sin esto, el margen de Bootstrap
   separa los elementos como si fueran párrafos sueltos. */
.lb-editor-texto__contenido li > p {
  margin-bottom: 0;
}

/* --- Tablas apiladas en el teléfono -------------------------------------------- */
/*
 * T4 de la revisión final. Por debajo de 576 px cada fila es un bloque y cada
 * celda lleva encima el nombre de su columna, que copia js/tablas-apiladas.js en
 * data-etiqueta. La primera celda hace de titular. Lo llevan ui.tabla y las tablas
 * de datos escritas a mano (facturas, extracto, resumen mensual).
 */
@media (max-width: 575.98px) {
  .lb-tabla-apilable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lb-tabla-apilable,
  .lb-tabla-apilable tbody,
  .lb-tabla-apilable tr,
  .lb-tabla-apilable td {
    display: block;
    width: 100%;
  }

  .lb-tabla-apilable tbody tr {
    padding: var(--lb-space-3) 0;
    border-top: 1px solid var(--lb-border-subtle);
  }

  .lb-tabla-apilable tbody tr:first-child {
    border-top: 0;
  }

  .lb-tabla-apilable > tbody > tr > td {
    padding: var(--lb-space-1) 0;
    border: 0;
  }

  .lb-tabla-apilable > tbody > tr > td:first-child {
    font-weight: 600;
  }

  /* Sólo el título va en negrita (AL-193): lo que lo acompaña en la celda (la referencia de un
     contrato, el CIF, el correo) vuelve a su peso. */
  .lb-tabla-apilable > tbody > tr > td:first-child :is(small, .small, .text-body-secondary, .text-muted) {
    font-weight: 400;
  }

  /* Las cifras van a la derecha en columna; apiladas, con su etiqueta. Bootstrap
     pone .text-end con !important: sólo así se anula. */
  .lb-tabla-apilable > tbody > tr > td.text-end {
    text-align: start !important;
  }

  .lb-tabla-apilable td[data-etiqueta]:not(:first-child)::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: var(--lb-fs-caption);
    font-weight: 400;
    color: var(--lb-text-secondary);
  }

  /* Una celda vacía no se apila: sólo quedaba su etiqueta sin nada debajo
     («Tarifa por hora» en la fila del total de una oferta de outsourcing). */
  .lb-tabla-apilable > tbody > tr > td:empty {
    display: none;
  }
}

/* Aprobar o rechazar un parte de horas: uno encima de otro y con sitio para el
   motivo, que se quedaba en «Mo» y dejaba la tarea en «Maq/ueta/r la». */
.lb-revisar-parte {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
  min-width: 13rem;
}

.lb-revisar-parte form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.lb-revisar-parte .form-control {
  flex: 1 1 10rem;
  min-width: 0;
}

.lb-revisar-parte .btn {
  white-space: nowrap;
}

/* Anular y corregir un parte (AL-56): plegados, como la excepción que son. */
.lb-revisar-parte > summary {
  cursor: pointer;
  font-size: var(--lb-fs-caption);
}

/* --- Contenido de un informe de célula: HTML saneado, sin clases (OP.5). Sin
   esto, los títulos salían más grandes que el de la tarjeta y la tabla sin
   separación: «Nombre Apellido1:30». ---------------------------------------- */
.lb-informe h2,
.lb-informe h3,
.lb-informe h4 {
  font-size: var(--lb-fs-title-3);
  font-weight: 600;
  margin: var(--lb-space-6) 0 var(--lb-space-2);
}

.lb-informe > :first-child {
  margin-top: 0;
}

.lb-informe > :last-child {
  margin-bottom: 0;
}

.lb-informe table {
  width: 100%;
  margin-bottom: var(--lb-space-4);
  border-collapse: collapse;
}

.lb-informe th,
.lb-informe td {
  padding: var(--lb-space-2) var(--lb-space-3);
  border-bottom: 1px solid var(--lb-border-subtle);
  text-align: start;
  vertical-align: top;
}

.lb-informe th {
  font-size: var(--lb-fs-caption);
  font-weight: 600;
  color: var(--lb-text-secondary);
}

/* --- Un desplegable (details) dentro de una tarjeta: su resumen medía 24 px de
   alto, por debajo de los 44 del área táctil (manual, sección 16). ------------ */
.lb-tarjeta__cuerpo summary {
  min-height: 44px;
  padding-block: var(--lb-space-2);
  cursor: pointer;
}

/* Filtros plegables (panel de horas, revisión de UX del PR 105): el resumen es el
   título de la tarjeta, con cuántos filtros hay activos al lado. */
.lb-filtros > summary { color: var(--lb-text-secondary); }
.lb-filtros[open] > summary { margin-bottom: var(--lb-space-4); }

/* --- La ficha de un servicio contratado en el teléfono (empresa, freelancer y
   equipo). En dos columnas, lo que se hace (el estado, la firma, pagar, aceptar
   la entrega, confirmar el cobro) va a la derecha; apiladas, quedaba debajo del
   contrato entero y del historial, a más de 3.000 px del principio. Por debajo
   de lg las columnas se deshacen (display: contents) y el contrato y el
   historial pasan al final; la firma, justo después del contrato, que es lo que
   se firma. -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .lb-ficha {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    flex-direction: column;
  }

  .lb-ficha > .lb-ficha__col { display: contents; }
  .lb-ficha__contrato { order: 1; }
  .lb-ficha__tras-contrato { order: 2; }
  .lb-ficha__historial { order: 3; }
}

/* --- La casilla de la firma («He leído el contrato y lo acepto»): 16 px y una
   etiqueta de 24 de alto, y se firma desde el teléfono. Casilla de 24 px y toda
   la fila pulsable, de 44 de alto (manual, sección 16). ------------------------ */
.lb-casilla-firma {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  min-height: 44px;
  padding-left: 0;
}

.lb-casilla-firma .form-check-input {
  flex: none;
  float: none;
  width: 24px;
  height: 24px;
  margin: 0;
}

.lb-casilla-firma .form-check-label {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* --- Lo que ya venció y sigue abierto (ui.vence): color de error, icono y la
   palabra, sin partirse en la columna «Vence». ------------------------------ */
.lb-vencida {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lb-error);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Configuración → Correo: la muestra del pie que saldrá con cada opción. --- */
.lb-pie-muestra {
  background: var(--lb-bg-surface-2);
  color: var(--lb-text-secondary);
}

/* --- Pestañas (AL-168): enlaces, con desplazamiento en el teléfono ------------- */
.lb-pestanas {
  scrollbar-width: thin;
}

.lb-pestanas .nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  min-height: 44px;
}

.lb-pestanas__cuenta {
  color: var(--lb-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Prioridad de una tarea: icono y palabra ------------------------------------ */
.lb-prioridad {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  font-size: var(--lb-fs-body-sm);
  color: var(--lb-text-secondary);
  white-space: nowrap;
}

.lb-prioridad--alta {
  color: var(--lb-text-primary);
  font-weight: 600;
}

.lb-prioridad--alta .ph {
  color: var(--lb-error);
}

/* --- Zonas del WorkHub (AL-168; G1 opción B) ------------------------------------
   Lo compartido y lo del cliente, limpios. Lo interno y lo privado, con banda a
   la izquierda, fondo rayado del tono de la zona y la cabecera fija al bajar. */
.lb-zona--compartido { --lb-zona: var(--lb-zona-compartido); --lb-zona-tono: var(--lb-zona-compartido-fondo); }
.lb-zona--cliente { --lb-zona: var(--lb-zona-cliente); --lb-zona-tono: var(--lb-zona-cliente-fondo); }
.lb-zona--interno { --lb-zona: var(--lb-zona-interno); --lb-zona-tono: var(--lb-zona-interno-fondo); }
.lb-zona--privado { --lb-zona: var(--lb-zona-privado); --lb-zona-tono: var(--lb-zona-privado-fondo); }

.lb-zona__cabecera {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  margin: 0 0 var(--lb-space-3);
  font-weight: 600;
  color: var(--lb-zona);
}

.lb-zona--restringida {
  padding: 0 var(--lb-space-4) var(--lb-space-4);
  border-left: 4px solid var(--lb-zona);
  border-radius: var(--lb-radius-sm);
  background: repeating-linear-gradient(135deg, var(--lb-zona-tono) 0 4px, transparent 4px 14px);
}

.lb-zona--restringida > .lb-zona__cabecera {
  position: sticky;
  /* Debajo de la barra superior del panel, que también es fija (64 px) */
  top: 64px;
  z-index: 2;
  margin: 0 calc(-1 * var(--lb-space-4)) var(--lb-space-3);
  padding: var(--lb-space-3) var(--lb-space-4);
  background: var(--lb-bg-canvas);
  border-bottom: 1px solid var(--lb-zona);
}

/* --- «Lo verá: …» --------------------------------------------------------------- */
.lb-lo-vera {
  display: flex;
  align-items: baseline;
  gap: var(--lb-space-2);
  margin: 0 0 var(--lb-space-2);
  font-size: var(--lb-fs-body-sm);
  color: var(--lb-text-secondary);
}

/* --- Conmutador Cliente │ Interno del Workspace (AL-168, G3) ----------------------
   Aquí y no en workspace.css: sale también en las fichas que hacen de Resumen,
   que no cargan la hoja del Workspace. */
.lb-ws-navegacion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 var(--lb-space-4);
}

.lb-ws-navegacion .lb-pestanas {
  flex: 1 1 auto;
  min-width: 0;
}

.lb-ws-conmutador {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--lb-space-4);
  padding: 2px;
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-full);
  background: var(--lb-bg-surface);
}

.lb-ws-conmutador__opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-2);
  min-height: 36px;
  padding: 0 var(--lb-space-4);
  border-radius: var(--lb-radius-full);
  color: var(--lb-text-secondary);
  font-weight: 500;
  text-decoration: none;
}

.lb-ws-conmutador__opcion:hover {
  color: var(--lb-text-primary);
}

.lb-ws-conmutador__opcion--cliente[aria-current] {
  background: var(--lb-zona-cliente-fondo);
  color: var(--lb-zona-cliente);
  box-shadow: inset 0 0 0 1px var(--lb-zona-cliente);
  font-weight: 600;
}

.lb-ws-conmutador__opcion--interno[aria-current] {
  background: var(--lb-zona-interno-fondo);
  color: var(--lb-zona-interno);
  box-shadow: inset 0 0 0 1px var(--lb-zona-interno);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .lb-ws-conmutador {
    width: 100%;
  }

  .lb-ws-conmutador__opcion {
    flex: 1 1 0;
    min-height: 44px;
  }
}

/* --- Resumen de tareas de una célula (AL-176) ------------------------------------
   Cuántas hay en cada estado, cada una con su enlace a Trabajo filtrado. Cinco
   casillas en escritorio; en el teléfono, una debajo de otra. */
.lb-resumen-tareas__nota {
  margin: 0 0 var(--lb-space-3);
  color: var(--lb-text-secondary);
  font-size: var(--lb-fs-body-sm);
}

.lb-resumen-tareas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--lb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-resumen-tareas__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
  min-height: 44px;
  padding: var(--lb-space-2) var(--lb-space-3);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-bg-surface-2);
  color: var(--lb-text-primary);
  text-decoration: none;
}

a.lb-resumen-tareas__fila:hover {
  border-color: var(--lb-border-strong);
}

.lb-resumen-tareas__fila--cero {
  color: var(--lb-text-secondary);
}

.lb-resumen-tareas__cuenta {
  font-size: var(--lb-fs-title-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Estado del análisis de un archivo (AL-169): el chip y lo que pasa ------------- */
.lb-estado-archivo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lb-space-1) var(--lb-space-2);
}

.lb-estado-archivo__texto {
  color: var(--lb-text-secondary);
  font-size: var(--lb-fs-body-sm);
}

/* --- Campo de fichero de la marca ------------------------------------------------- */
.lb-fichero .form-control {
  min-height: 44px;
}