/* Visor Forense de Conversacion - DYCOPTER INGENIERIA S.A.S.
 *
 * Sin tipografias remotas ni recursos externos: el visor debe abrir con doble
 * clic, sin internet y sin filtrar nada a ningun servidor (material reservado).
 *
 * Dos lenguajes visuales deliberadamente distintos:
 *   - El hilo imita WhatsApp, para que el abogado lea sin friccion.
 *   - Todo lo anadido por la Sociedad (marcas, transcripciones) usa color,
 *     tipografia y bordes propios, para que nunca se confunda con el original.
 */

:root {
  --wa-fondo:      #efeae2;
  --wa-entrante:   #ffffff;
  --wa-saliente:   #d9fdd3;
  --wa-texto:      #111b21;
  --wa-tenue:      #667781;
  --wa-barra:      #f0f2f5;
  --wa-borde:      #e9edef;
  --wa-verde:      #008069;

  --panel:         #ffffff;
  --linea:         #e5e7eb;
  --sombra:        0 1px 2px rgba(11,20,26,.13);

  --cat-pagos:     #2563eb;
  --cat-mora:      #ea580c;
  --cat-bloqueo:   #7c3aed;
  --cat-forense:   #dc2626;
  --cat-en_contra: #6b7280;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 15px;
  color: var(--wa-texto);
  background: var(--wa-barra);
  overflow: hidden;
}

button { font: inherit; cursor: pointer; }

/* --------------------------------------------------------------- acceso - */

body.bloqueado > #barra,
body.bloqueado > #cuerpo { display: none; }

#acceso {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #0b141a;
  padding: 20px;
  overflow-y: auto;
}
#acceso form {
  width: 100%; max-width: 430px;
  background: #fff; border-radius: 14px; padding: 30px 32px 26px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
#acceso h1 { font-size: 18px; margin: 0 0 5px; }
#acceso .ent { font-size: 12.5px; color: var(--wa-tenue); line-height: 1.5; margin: 0 0 22px; }
#acceso label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wa-tenue); margin-bottom: 5px;
}
#acceso input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--wa-barra);
}
#acceso input:focus { outline: 2px solid var(--wa-verde); outline-offset: -1px; background: #fff; }
#acceso button {
  width: 100%; margin-top: 12px; padding: 11px;
  background: var(--wa-verde); color: #fff; border: 0; border-radius: 8px;
  font-size: 14.5px; font-weight: 600;
}
#acceso button:hover:not(:disabled) { background: #026e5b; }
#acceso button:disabled { opacity: .6; cursor: default; }
#acceso #acceso-error:not(:empty) {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 7px;
  background: #fdeaea; color: #a01b1b; font-size: 12.5px; line-height: 1.45;
}
#acceso .lim {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linea);
  font-size: 11.5px; line-height: 1.55; color: var(--wa-tenue);
}
#acceso .lim strong { color: var(--wa-texto); }
#acceso code {
  background: var(--wa-barra); padding: 1px 4px; border-radius: 3px; font-size: 11px;
}

/* ---------------------------------------------------------------- barra -- */

#barra {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 18px;
  background: var(--wa-verde);
  color: #fff;
  position: relative;
  z-index: 30;
}
#barra h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: .01em; }
#barra .marca p { margin: 2px 0 0; font-size: 11.5px; opacity: .82; }

.interruptores { display: flex; gap: 18px; margin-left: auto; }
.sw { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; user-select: none; }
.sw input { accent-color: #fff; width: 15px; height: 15px; cursor: pointer; }

#barra .aviso {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -27px;
  background: #b3261e;
  color: #fff;
  font-size: 12px;
  padding: 4px 16px;
  border-radius: 0 0 8px 8px;
  letter-spacing: .02em;
  z-index: 31;
}

/* ---------------------------------------------------------------- cuerpo - */

/* minmax(0,1fr) en la fila y min-height:0 en las columnas: sin eso, las pistas
   de tamano automatico crecen hasta la altura total de los 78 meses, el hilo
   nunca recibe una altura limitada y no aparece la barra de desplazamiento. */
#cuerpo {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
  height: calc(100% - 58px);
}

#nav, #herramientas {
  background: var(--panel);
  overflow-y: auto;
  min-height: 0;
  font-size: 13.5px;
}
#nav { border-right: 1px solid var(--linea); }
#herramientas { border-left: 1px solid var(--linea); }

.nav-seccion { padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.pendiente {
  margin: 0; padding: 10px 12px;
  background: #f8fafc; border: 1px dashed var(--linea); border-radius: 8px;
  color: var(--wa-tenue); font-size: 12.5px;
}

/* ------------------------------------------------------------ buscador -- */

.busca-campo input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  background: var(--wa-barra);
}
.busca-campo input:focus { outline: 2px solid var(--wa-verde); outline-offset: -1px; background: #fff; }

.atajos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.atajos button {
  border: 1px solid var(--linea); background: #fff; border-radius: 20px;
  padding: 3px 10px; font-size: 11.5px; color: var(--wa-tenue);
}
.atajos button:hover { border-color: var(--wa-verde); color: var(--wa-verde); }

#filtros { margin-top: 11px; }
#filtros > summary {
  cursor: pointer; font-size: 12.5px; color: var(--wa-tenue);
  padding: 4px 0; user-select: none;
}
#filtros label { display: block; margin-top: 9px; font-size: 11.5px; color: var(--wa-tenue); }
#filtros select, #filtros input {
  display: block; width: 100%; margin-top: 3px;
  padding: 5px 7px; border: 1px solid var(--linea); border-radius: 6px;
  font: inherit; font-size: 12.5px; color: var(--wa-texto); background: #fff;
}
#filtros .par { display: flex; gap: 8px; }
#filtros .par label { flex: 1; }
#f-limpiar {
  margin-top: 11px; width: 100%; padding: 6px;
  border: 1px solid var(--linea); background: #fff; border-radius: 6px;
  font-size: 12.5px; color: var(--wa-tenue);
}
#f-limpiar:hover { border-color: var(--wa-verde); color: var(--wa-verde); }

/* ------------------------------------------------------- resultados ----- */

#resultados {
  position: absolute; inset: 0; top: 46px;
  background: var(--wa-barra);
  display: flex; flex-direction: column; min-height: 0;
  z-index: 10;
}
#resultados[hidden] { display: none; }
#centro { position: relative; }

.res-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; background: var(--panel);
  border-bottom: 1px solid var(--linea);
  font-size: 13px; color: var(--wa-tenue);
}
#res-cerrar {
  margin-left: auto; border: 1px solid var(--linea); background: #fff;
  border-radius: 6px; padding: 5px 12px; font-size: 12.5px; color: var(--wa-verde);
}
#res-cerrar:hover { border-color: var(--wa-verde); }

#res-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 30px; }

.res {
  background: var(--panel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 10px; cursor: pointer;
}
.res:hover { border-color: var(--wa-verde); }
.res-cab {
  font-size: 11.5px; color: var(--wa-tenue); margin-bottom: 6px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.res-cab .quien { font-weight: 700; color: var(--wa-texto); }
.res-cab .vent { color: var(--cat-mora); font-weight: 700; }
.res-ctx {
  font-size: 12.3px; color: #90a4ae; line-height: 1.4;
  padding: 1px 0 1px 10px; border-left: 2px solid var(--linea);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-hit {
  font-size: 14px; line-height: 1.4; padding: 4px 0 4px 10px;
  border-left: 2px solid var(--wa-verde);
  white-space: pre-wrap;
}
.res-hit mark { background: #ffe680; color: inherit; border-radius: 2px; padding: 0 1px; }
.res-hit .adj { color: var(--wa-tenue); font-style: italic; }
.res-trans {
  margin-top: 4px; font-size: 12.3px; font-style: italic; color: #3f3352;
  padding-left: 10px; border-left: 2px dashed #b9a6d6;
}
.res-vacio { color: var(--wa-tenue); font-size: 13.5px; padding: 20px 4px; }
.res-mas { color: var(--wa-tenue); font-size: 12.5px; text-align: center; padding: 10px; }

/* ------------------------------------------------------- arbol ano/mes --- */

#arbol { border-bottom: none; }
.anio > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 8px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
}
.anio > summary::-webkit-details-marker { display: none; }
.anio > summary:hover { background: var(--wa-barra); }
.anio > summary::before {
  content: "▸"; font-size: 11px; color: var(--wa-tenue);
  transition: transform .12s;
}
.anio[open] > summary::before { transform: rotate(90deg); }
.anio > summary .cuenta { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--wa-tenue); }

.mes-enlace {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 5px 8px 5px 26px;
  border: 0; background: none; border-radius: 6px;
  color: var(--wa-texto);
}
.mes-enlace:hover { background: var(--wa-barra); }
.mes-enlace.activo { background: #e7f4ef; font-weight: 600; }
.mes-enlace .nombre { text-transform: capitalize; }
.mes-enlace .puntos { margin-left: auto; color: var(--wa-verde); letter-spacing: -1px; font-size: 11px; }
.mes-enlace .vent { color: var(--cat-mora); font-size: 10px; font-weight: 700; }

/* ------------------------------------------------------ barra de tiempo -- */

#tiempo {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  padding: 6px 10px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}
.t-mes {
  flex: 1 1 0;
  min-width: 0;
  background: #cfd8dc;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  position: relative;
}
.t-mes:hover { background: var(--wa-verde); }
.t-mes.en-ventana { background: #f4a97a; }
.t-mes.en-ventana:hover { background: var(--cat-mora); }
.t-mes.activo { background: var(--wa-verde); }

/* ------------------------------------------------------------------ hilo - */

#centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

#hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 6%;
  outline: none;
  background-color: var(--wa-fondo);
  /* Trama tenue en vez del doodle de WhatsApp: se genera sin recursos externos. */
  background-image:
    radial-gradient(circle at 12% 22%, rgba(11,20,26,.030) 0 1.6px, transparent 1.7px),
    radial-gradient(circle at 62% 74%, rgba(11,20,26,.026) 0 1.4px, transparent 1.5px),
    radial-gradient(circle at 86% 34%, rgba(11,20,26,.022) 0 1.2px, transparent 1.3px);
  background-size: 128px 128px, 96px 96px, 152px 152px;
}

.mes { display: flow-root; }

.dia-sep {
  position: sticky;
  top: 4px;
  z-index: 5;
  text-align: center;
  margin: 14px 0 10px;
  pointer-events: none;
}
.dia-sep span {
  display: inline-block;
  background: #fff;
  color: #54656f;
  font-size: 12.2px;
  padding: 5px 13px;
  border-radius: 8px;
  box-shadow: var(--sombra);
  text-transform: capitalize;
}

.grupo { margin-bottom: 9px; display: flex; flex-direction: column; }
.grupo.izq { align-items: flex-start; }
.grupo.der { align-items: flex-end; }
.grupo .quien {
  font-size: 12px; font-weight: 600; color: var(--wa-verde);
  margin: 0 8px 3px;
}
.grupo.der .quien { color: #8d6e00; }

.burbuja {
  position: relative;
  max-width: 66%;
  min-width: 92px;
  margin-bottom: 2px;
  padding: 6px 9px 5px 10px;
  border-radius: 8px;
  box-shadow: var(--sombra);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  scroll-margin-top: 70px;
}
/* La hora va flotada a la derecha; sin esto el float no cuenta para la altura
   de la burbuja y el texto se sale por abajo. */
.burbuja::after { content: ""; display: block; clear: both; }
.izq .burbuja { background: var(--wa-entrante); border-top-left-radius: 8px; }
.der .burbuja { background: var(--wa-saliente); }
.izq .burbuja.primera { border-top-left-radius: 0; }
.der .burbuja.primera { border-top-right-radius: 0; }

/* La colita del primer mensaje de cada bloque. */
.burbuja.primera::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
}
.izq .burbuja.primera::before {
  left: -8px;
  background: var(--wa-entrante);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.der .burbuja.primera::before {
  right: -8px;
  background: var(--wa-saliente);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.texto { white-space: pre-wrap; line-height: 1.35; font-size: 14.6px; }
.meta {
  float: right;
  margin: 4px 0 -2px 10px;
  font-size: 11px;
  color: var(--wa-tenue);
  white-space: nowrap;
  user-select: none;
}
.meta .editado { font-style: italic; margin-right: 4px; }
.meta .num { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }

.burbuja.eliminado { background: #f2f2f2; }
.burbuja.eliminado .texto { color: #8696a0; font-style: italic; }
.burbuja.eliminado .texto::before { content: "🚫 "; font-style: normal; }

.sistema {
  text-align: center; margin: 16px auto; max-width: 78%;
}
.sistema span {
  display: inline-block; background: #ffeecd; color: #54656f;
  font-size: 12.4px; line-height: 1.4; padding: 8px 14px; border-radius: 8px;
  box-shadow: var(--sombra);
}

/* ------------------------------------------------------------- adjuntos -- */

.adj-img { display: block; max-width: 320px; width: 100%; border-radius: 6px; cursor: zoom-in; }
.adj-video { display: block; max-width: 320px; width: 100%; border-radius: 6px; }
.burbuja .leyenda { margin-top: 5px; }

.adj-doc {
  display: flex; align-items: center; gap: 10px;
  background: rgba(11,20,26,.045);
  border-radius: 6px; padding: 9px 11px;
  text-decoration: none; color: inherit;
  min-width: 240px;
}
.adj-doc:hover { background: rgba(11,20,26,.075); }
.adj-doc .icono { font-size: 22px; line-height: 1; }
.adj-doc .nombre { font-size: 13.4px; word-break: break-all; }
.adj-doc .peso { font-size: 11.5px; color: var(--wa-tenue); margin-top: 2px; }

.adj-audio { display: flex; align-items: center; gap: 9px; min-width: 260px; padding: 2px 0; }
.adj-audio audio { flex: 1; height: 34px; }

.sticker { background: none !important; box-shadow: none !important; padding: 0 !important; }
.sticker img { width: 118px; height: 118px; object-fit: contain; }
.sticker .meta { float: none; display: block; text-align: right; }
/* Los 96 stickers son ruido. Ocultos por defecto: la burbuja siempre, y el
   grupo entero cuando no contiene otra cosa (si no, quedaria el nombre del
   remitente flotando sin mensajes debajo). */
body:not(.con-stickers) .burbuja.es-sticker { display: none; }
body:not(.con-stickers) .grupo.solo-sticker { display: none; }

/* ------------------------------------------- capa anadida por la Sociedad */
/* Franja vertical a la izquierda de la burbuja y nada mas: el texto original
   no se altera, no se subraya y no se resalta el contenido. */

.burbuja.marcada { border-left: 4px solid var(--cat-pagos); padding-left: 10px; }
.burbuja.marcada[data-cat="mora"]      { border-left-color: var(--cat-mora); }
.burbuja.marcada[data-cat="bloqueo"]   { border-left-color: var(--cat-bloqueo); }
.burbuja.marcada[data-cat="forense"]   { border-left-color: var(--cat-forense); }
.burbuja.marcada[data-cat="en_contra"] { border-left-color: var(--cat-en_contra); border-left-style: dashed; }

.senal {
  position: absolute; top: 5px; right: -22px;
  font-size: 11px; opacity: .75; cursor: help; user-select: none;
}
.der .senal { right: auto; left: -22px; }

body.sin-marcado .burbuja.marcada { border-left: 0; padding-left: 10px; }
body.sin-marcado .senal,
body.sin-marcado .transcripcion { display: none; }

.transcripcion {
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px dashed #b9a6d6;
  border-radius: 6px;
  background: #faf7ff;
  font-size: 13px;
  font-style: italic;
  color: #3f3352;
}
.transcripcion .etiqueta {
  display: block;
  font-style: normal; font-weight: 700; font-size: 10px;
  letter-spacing: .05em; text-transform: uppercase;
  color: #7c3aed; margin-bottom: 3px;
}
.sin-transcribir {
  margin-top: 5px; font-size: 11.5px; color: var(--wa-tenue); font-style: italic;
}

.burbuja.resaltada { animation: pulso 1.9s ease-out; }
@keyframes pulso {
  0%, 62% { box-shadow: 0 0 0 3px #ffd54f, var(--sombra); }
  100%    { box-shadow: var(--sombra); }
}

/* ---------------------------------------------------------- herramientas - */

.herr-tabs { display: flex; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tab {
  flex: 1; padding: 11px 4px; border: 0; background: none;
  font-size: 12.5px; color: var(--wa-tenue); border-bottom: 2px solid transparent;
}
.tab:hover { background: var(--wa-barra); }
.tab.activa { color: var(--wa-verde); border-bottom-color: var(--wa-verde); font-weight: 600; }
.herr-panel { padding: 14px; }

.ficha { margin-bottom: 16px; }
.ficha h3 {
  margin: 0 0 7px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wa-tenue); font-weight: 700;
}
.ficha table { width: 100%; border-collapse: collapse; font-size: 12.7px; }
.ficha td { padding: 4px 0; vertical-align: top; }
.ficha td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ficha .hash {
  font-family: Consolas, "Courier New", monospace; font-size: 10.5px;
  word-break: break-all; color: var(--wa-tenue); text-align: left !important;
  background: var(--wa-barra); padding: 6px; border-radius: 5px; line-height: 1.5;
}
.nota {
  font-size: 11.8px; line-height: 1.5; color: var(--wa-tenue);
  border-left: 3px solid var(--linea); padding-left: 10px; margin: 12px 0 0;
}
.nota strong { color: var(--wa-texto); }

/* ------------------------------------------------------------ hallazgos - */

.tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tarjeta {
  background: var(--wa-barra); border-radius: 8px; padding: 9px 10px;
}
.tarjeta.ancha { grid-column: 1 / -1; }
.tarjeta .cifra { font-size: 21px; font-weight: 700; line-height: 1.1; }
.tarjeta .rotulo { font-size: 11px; color: var(--wa-tenue); margin-top: 2px; line-height: 1.35; }
.tarjeta.alerta { background: #fdeaea; }
.tarjeta.alerta .cifra { color: var(--cat-forense); }

.cat-bloque { margin-bottom: 18px; }
.cat-titulo {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wa-tenue); margin-bottom: 8px;
}
.cat-titulo .pip { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.cat-titulo .n { margin-left: auto; font-weight: 400; }

.hall {
  border-left: 3px solid var(--linea); padding: 2px 0 2px 10px;
  margin-bottom: 10px; cursor: pointer;
}
.hall:hover { background: var(--wa-barra); }
.hall.sin-salto { cursor: default; }
.hall.sin-salto:hover { background: none; }
.hall .fecha { font-size: 11px; color: var(--wa-tenue); }
.hall .cita { font-size: 13px; line-height: 1.4; margin: 2px 0; }
.hall .cita q { font-style: italic; }
.hall .porque { font-size: 11.5px; color: var(--wa-tenue); line-height: 1.4; }
.hall.destacada .cita { font-weight: 600; }

/* ------------------------------------------------------------ financiera */

#financiera {
  position: absolute; inset: 0; top: 46px;
  background: var(--wa-barra);
  display: flex; flex-direction: column; min-height: 0; z-index: 10;
}
#financiera[hidden] { display: none; }
#fin-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 40px; }

.fin-caja {
  background: var(--panel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.fin-caja > h2 { font-size: 14px; margin: 0 0 10px; }
.fin-caja > h2 .sub { font-weight: 400; color: var(--wa-tenue); font-size: 12.5px; }

table.matriz { width: 100%; border-collapse: collapse; font-size: 13px; }
table.matriz th, table.matriz td { padding: 6px 8px; border-bottom: 1px solid var(--linea); }
table.matriz th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-tenue); text-align: right; }
table.matriz th:first-child, table.matriz td:first-child { text-align: left; }
table.matriz td { text-align: right; font-variant-numeric: tabular-nums; }
table.matriz td:last-child { text-align: left; font-size: 12px; }
table.matriz tr.sin_recibo { background: #fdeaea; }
table.matriz tr.sin_recibo td { color: #a01b1b; font-weight: 600; }
table.matriz tr.total td { font-weight: 700; border-top: 2px solid #cfd8dc; background: #fffaeb; }

.episodio { border-left: 4px solid var(--cat-mora); }
.episodio > h2 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.episodio .num {
  background: var(--cat-mora); color: #fff; border-radius: 5px;
  padding: 1px 7px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.episodio .relato { font-size: 13px; line-height: 1.55; color: #37474f; margin: 0 0 12px; }

.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.col h3 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wa-tenue); margin: 0 0 7px; padding-bottom: 5px;
  border-bottom: 1px solid var(--linea);
}
.col.dian h3 { color: var(--cat-forense); }
.ancla {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--linea); border-radius: 7px; background: #fff;
  padding: 7px 9px; margin-bottom: 6px; font-size: 12.2px; line-height: 1.4;
}
.ancla:hover { border-color: var(--wa-verde); }
.ancla .cab { color: var(--wa-tenue); font-size: 10.5px; }
.ancla .glosa { color: #37474f; }
.ancla .cita { font-style: italic; margin-top: 2px; }
.ancla .arch { color: var(--wa-verde); font-size: 11px; margin-top: 2px; word-break: break-all; }

.recibo {
  display: block; border: 1px solid var(--linea); border-radius: 7px;
  padding: 7px 9px; margin-bottom: 6px; font-size: 12.2px;
  text-decoration: none; color: inherit; background: #fff;
}
.recibo:hover { border-color: var(--wa-verde); }
.recibo .val { float: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sin-recibo {
  border: 2px dashed var(--cat-forense); border-radius: 8px;
  padding: 14px 10px; text-align: center; background: #fdeaea;
}
.sin-recibo strong { color: var(--cat-forense); font-size: 15px; letter-spacing: .03em; }
.sin-recibo span { display: block; font-size: 11.5px; color: #7f1d1d; margin-top: 4px; }

table.cifras { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 12px; }
table.cifras td { padding: 4px 6px; border-bottom: 1px solid #f1f3f5; vertical-align: top; }
table.cifras td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cifras td.f { color: var(--wa-tenue); font-size: 10.5px; text-align: right; white-space: nowrap; }

.revision {
  border-left: 3px solid #f59e0b; background: #fffbeb;
  padding: 9px 12px; margin-top: 10px; border-radius: 0 7px 7px 0;
}
.revision .asunto { font-weight: 600; font-size: 12.5px; }
.revision .detalle { font-size: 12px; line-height: 1.5; color: #57534e; margin-top: 3px; }
.revision .fuente { font-size: 10.5px; color: var(--wa-tenue); margin-top: 4px; }

/* ------------------------------------------------------------- exportar - */

.exp-grupo { margin-bottom: 14px; }
.exp-grupo > label { display: block; font-size: 12.5px; margin-bottom: 5px; cursor: pointer; }
.exp-grupo input[type="radio"] { margin-right: 6px; }
.exp-sub { padding-left: 22px; }
.exp-sub input {
  width: 100%; margin-top: 4px; padding: 5px 7px;
  border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-size: 12.5px;
}
#exp-imprimir {
  width: 100%; padding: 9px; margin-top: 6px;
  background: var(--wa-verde); color: #fff; border: 0; border-radius: 7px;
  font-size: 13.5px; font-weight: 600;
}
#exp-imprimir:hover { background: #026e5b; }
#exp-estado { font-size: 12px; color: var(--wa-tenue); margin-top: 9px; line-height: 1.5; }

/* ------------------------------------------------------------- lightbox -- */

#lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11,20,26,.93);
  display: flex; align-items: center; justify-content: center;
}
#lightbox[hidden] { display: none; }
#lightbox figure { margin: 0; max-width: 88vw; max-height: 88vh; text-align: center; }
#lb-img { max-width: 88vw; max-height: 78vh; object-fit: contain; border-radius: 4px; }
#lb-pie { color: #e9edef; font-size: 12.5px; margin-top: 12px; }
.lb-cerrar, .lb-nav {
  position: absolute; background: rgba(255,255,255,.12); color: #fff;
  border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 26px; line-height: 1;
}
.lb-cerrar:hover, .lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-cerrar { top: 20px; right: 24px; }
.lb-prev { left: 24px; }
.lb-sig  { right: 24px; }

/* ------------------------------------------------------------ impresion - */
/* La exportacion a PDF se hace por la impresion del navegador (Guardar como
   PDF). Sin librerias ni dependencias de red, como exige la especificacion. */

#impresion { display: none; }

@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  #barra, #cuerpo, #lightbox { display: none !important; }
  #impresion { display: block; }

  @page { size: A4; margin: 16mm 14mm 18mm; }

  .imp-cab { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 16px; }
  .imp-cab h1 { font-size: 15pt; margin: 0 0 3px; }
  .imp-cab .quien { font-size: 10pt; color: #333; margin: 0 0 10px; }
  .imp-cab table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  .imp-cab td { padding: 2px 0; vertical-align: top; }
  .imp-cab td:first-child { width: 34%; color: #444; }
  .imp-cab .hash { font-family: Consolas, monospace; font-size: 7.5pt; word-break: break-all; }

  .imp-dia {
    font-size: 9.5pt; font-weight: 700; margin: 14px 0 6px;
    border-bottom: 1px solid #bbb; padding-bottom: 2px;
    break-after: avoid;
  }
  .imp-msg {
    font-size: 9.5pt; line-height: 1.4; margin-bottom: 5px;
    padding-left: 15mm; text-indent: -15mm;
    break-inside: avoid;
  }
  .imp-msg .hora { color: #555; font-variant-numeric: tabular-nums; }
  .imp-msg .quien { font-weight: 700; }
  .imp-msg .cuerpo { white-space: pre-wrap; }
  .imp-msg .adj { font-style: italic; color: #333; }
  .imp-msg .ln { color: #888; font-size: 7.5pt; }
  .imp-msg .marca { color: #7c3aed; font-size: 7.5pt; }
  .imp-msg.eliminado .cuerpo { font-style: italic; color: #666; }
  .imp-trans {
    margin: 2px 0 6px 15mm; padding: 4px 7px; border-left: 2px solid #999;
    font-size: 8.5pt; font-style: italic; break-inside: avoid;
  }
  .imp-trans b { font-style: normal; }

  .imp-pie {
    margin-top: 18px; padding-top: 8px; border-top: 1px solid #bbb;
    font-size: 8pt; color: #444; line-height: 1.5;
  }
}

/* --------------------------------------------------------------- angosto - */

@media (max-width: 1180px) {
  #cuerpo { grid-template-columns: 220px minmax(0, 1fr); }
  #herramientas { display: none; }
  #hilo { padding: 10px 3%; }
  .burbuja { max-width: 80%; }
}