:root {
  --azul: #1f4e79;
  --azul-claro: #2d6cdf;
  --topbar-bg: #1f4e79;
  --gris-bg: #f4f6f9;
  --gris-borde: #dde3ea;
  --superficie: #ffffff;
  --superficie-alt: #f0f3f7;
  --hover: #fafbfd;
  --entrada-bg: #ffffff;
  --secundario-bg: #eef2f7;
  --sup-amarillo: #fbf6e3;
  --sup-rojo: #fbe3e0;
  --sup-azul: #eef6ff;
  --texto: #1f2933;
  --texto-suave: #66727f;
  --verde: #1f9d55;
  --rojo: #c0392b;
  --amarillo: #b8860b;
  --radio: 8px;
  /* Lo que mide de alto la barra de arriba. La barra NO se toca —la
     escribe su propia regla con el número— y esto es solo para que la
     cabecera de una tabla larga sepa a qué altura quedarse pegada.
     Si algún día la barra cambia de alto, este número la sigue. */
  --alto-topbar: 56px;
  color-scheme: light;
}

/* Tema oscuro: se activa con data-tema="oscuro" en <html> (ver base.html). */
:root[data-tema="oscuro"] {
  --azul: #6ea8ff;
  --azul-claro: #5b8def;
  --topbar-bg: #15243a;
  --gris-bg: #0f1620;
  --gris-borde: #2c3a4d;
  --superficie: #1a2432;
  --superficie-alt: #212d3d;
  --hover: #202b3a;
  --entrada-bg: #131c28;
  --secundario-bg: #26344a;
  --sup-amarillo: rgba(224,182,74,.13);
  --sup-rojo: rgba(224,106,92,.13);
  --sup-azul: rgba(110,168,255,.10);
  --texto: #e6ebf1;
  --texto-suave: #9aa7b5;
  --verde: #35c07a;
  --rojo: #e06a5c;
  --amarillo: #e0b64a;
  color-scheme: dark;  /* controles nativos (desplegable de <select>, scrollbars) en oscuro */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--gris-bg);
  color: var(--texto);
  font-size: 14px;
}
a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Barra superior */
/* La barra se queda arriba al desplazar. Antes se iba con la página y en una
   lista de cuatrocientas facturas había que subir del todo para buscar algo,
   crear algo o cambiar de empresa: justo lo que está en ella.

   `sticky` y no `fixed`: sticky sigue ocupando su sitio en el flujo, así que no
   hay que compensar 56 px de altura con un relleno en el cuerpo —y ese relleno
   es lo que se olvida al imprimir o en una pantalla estrecha—. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  gap: 24px;
}
/* En papel no se pega a nada: la barra no se imprime, y una regla de pantalla
   que se cuele en la impresión deja un hueco en lo alto de cada hoja. */
@media print { .topbar { position: static; } }
.topbar .marca { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  color: #dfe8f5; padding: 8px 14px; border-radius: var(--radio); font-weight: 500;
}
.topbar nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.topbar nav a.activo { background: rgba(255,255,255,.2); color: #fff; }

/* Menú desplegable "Herramientas" */
.menu-tools { position: relative; display: inline-flex; align-items: center; }
.menu-btn {
  color: #dfe8f5; background: none; border: 0; font: inherit; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radio); cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px;
}
.menu-btn:hover { background: rgba(255,255,255,.12); }
.menu-btn.activo { background: rgba(255,255,255,.2); color: #fff; }
.menu-btn .chev { font-size: 11px; opacity: .8; transition: transform .15s; }
.menu-tools.abierto .menu-btn .chev { transform: rotate(180deg); }
.menu-pop {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; z-index: 60;
  display: none;
}
.menu-tools.abierto .menu-pop, .menu-tools:hover .menu-pop { display: block; }
.topbar nav .menu-pop a {
  display: block; padding: 8px 11px; border-radius: 6px; color: var(--texto);
  font-weight: 500;
}
.topbar nav .menu-pop a:hover { background: var(--hover); color: var(--texto); text-decoration: none; }
.topbar nav .menu-pop a.activo { background: var(--secundario-bg); color: var(--azul-claro); }
/* Los semáforos de una fila: qué pasó con la DIAN y con el correo del cliente.
   El color NO puede ser la única información —quien no distingue el verde del
   gris se quedaría sin ella—, así que cada uno lleva su texto en el `title` y
   el cursor de ayuda que invita a pararse encima. */
.iconos-fila { display: inline-flex; align-items: center; gap: 8px; }
.iconos-fila .ico { display: inline-flex; cursor: help; }
.iconos-fila .ico svg { width: 17px; height: 17px; display: block; }
.iconos-fila .ico.si { color: var(--verde); }
.iconos-fila .ico.no { color: var(--gris-borde); }
.iconos-fila .ico.mal { color: var(--rojo); }
.iconos-fila a.ico { cursor: pointer; color: var(--suave); }
.iconos-fila a.ico:hover { color: var(--azul); }
/* El sobre, cuando hay algo que enviar, es un botón. Se ve igual que los demás
   iconos a propósito: lo que cambia es que se puede pulsar, y eso lo dice el
   cursor y su propio texto, no un dibujo distinto. */
.iconos-fila form { display: inline-flex; margin: 0; }
.iconos-fila button.ico {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
}
.iconos-fila button.ico:hover { opacity: .7; }

/* El menú de tres puntos de una fila de tabla. Reusa el desplegable de la barra
   —misma caja, misma sombra— pero sus opciones se pintan aquí: las de la barra
   están escritas para el azul del encabezado y en una tabla blanca no se leen.

   Se abre hacia la IZQUIERDA porque vive en la última columna: hacia la derecha
   se saldría de la pantalla y la mitad de las opciones quedaría fuera. */
.menu-fila { position: relative; display: inline-flex; }
.menu-fila .menu-punt {
  background: none; border: 0; font: inherit; color: var(--suave);
  padding: 2px 8px; border-radius: 6px; cursor: pointer; line-height: 1;
  font-size: 18px; letter-spacing: 1px;
}
.menu-fila .menu-punt:hover { background: var(--hover); color: var(--texto); }
.menu-fila .menu-pop { left: auto; right: 0; min-width: 220px; text-align: left; }
.menu-fila.abierto .menu-pop { display: block; }
.menu-fila .menu-pop a,
.menu-fila .menu-pop button {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; background: none; font: inherit; color: var(--texto);
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.menu-fila .menu-pop a:hover,
.menu-fila .menu-pop button:hover { background: var(--hover); text-decoration: none; }
.menu-fila .menu-pop button.peligro { color: var(--rojo); }
.menu-fila .menu-pop hr {
  border: 0; border-top: 1px solid var(--gris-borde); margin: 5px 2px;
}
.menu-fila .menu-pop form { margin: 0; }

/* La cabecera de una LISTA: «+ Nuevo …» azul y «Más opciones ▾» gris, con
   las acciones de apoyo y «Exportar a Excel» dentro. Lo pidió el usuario el
   14-oct-2026 para todos los catálogos, como en Alegra: el botón de crear
   escondido entre otros cinco no se veía. Es el mismo patrón del Admin
   (`templates/admin/base_site.html`).

   Va con <details>: abre y cierra sin JavaScript. El de base.html solo cierra
   el que quede abierto al pulsar fuera o con Escape. Abre hacia la izquierda
   desde su borde, para no salirse de la pantalla en un móvil. */
.acciones-lista { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
                  margin-bottom: 14px; }
.mas-opciones { position: relative; display: inline-block; }
.mas-opciones > summary { list-style: none; user-select: none; }
.mas-opciones > summary::-webkit-details-marker { display: none; }
.mas-opciones > summary .chev { font-size: 11px; margin-left: 4px; }
.mas-opciones .menu-opciones {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; z-index: 60;
}
.mas-opciones .menu-opciones a,
.mas-opciones .menu-opciones button {
  display: block; width: 100%; text-align: left; padding: 8px 11px;
  border: 0; background: none; font: inherit; color: var(--texto);
  border-radius: 6px; cursor: pointer; white-space: nowrap; font-weight: 500;
}
.mas-opciones .menu-opciones a:hover,
.mas-opciones .menu-opciones button:hover { background: var(--hover); text-decoration: none; }
.mas-opciones .menu-opciones form { margin: 0; }
/* Verde, como todo lo que se lleva un archivo; con su raya, porque es otra
   clase de cosa que lo de arriba. */
.mas-opciones .menu-opciones a.exportar { color: var(--verde); font-weight: 600; }
.mas-opciones .menu-opciones * + a.exportar {
  border-top: 1px solid var(--gris-borde); border-radius: 0 0 6px 6px; margin-top: 4px;
  padding-top: 10px;
}
@media print { .acciones-lista { display: none; } }

.menu-sec {
  display: block; padding: 8px 11px 3px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
}
.menu-sec:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--gris-borde); padding-top: 9px; }
.topbar .derecha { display: flex; align-items: center; gap: 12px; }
.topbar .derecha form { margin: 0; }
.topbar select {
  padding: 6px 10px; border-radius: var(--radio); border: none; font-size: 13px; max-width: 260px;
}
.topbar .usuario { color: #cfe0f2; font-size: 13px; }

/* Botón de tema (sol/luna) */
.btn-tema {
  background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.btn-tema:hover { background: rgba(255,255,255,.24); }

.contenedor { max-width: 1120px; margin: 24px auto; padding: 0 20px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 24px 0 10px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 20px; }

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 16px 18px;
}
.tarjeta .num { font-size: 28px; font-weight: 700; color: var(--azul); }
.tarjeta .etq { color: var(--texto-suave); font-size: 13px; margin-top: 2px; }
.tarjeta.alerta .num { color: var(--amarillo); }
.tarjeta.ok .num { color: var(--verde); }

/* Paneles */
.panel {
  background: var(--superficie); border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 20px; margin-bottom: 18px;
}

/* Botones. El color dice PARA QUÉ SIRVE el botón, no cuál se ve mejor:
     azul  = la acción principal de esta pantalla (guardar, crear, emitir)
     gris  = apoyo, no cambia nada (filtrar, buscar, volver, cancelar)
     verde = te llevas un archivo (descargar, exportar)
     rojo  = destruye algo (borrar, eliminar, anular)
   Un color que significa dos cosas no significa ninguna: el verde llegó a ser a
   la vez «descargar» y «guardar», y dejó de avisar de nada. */
.btn {
  display: inline-block; background: var(--azul-claro); color: #fff; border: none;
  padding: 9px 16px; border-radius: var(--radio); cursor: pointer; font-size: 14px; font-weight: 600;
}
.btn:hover { background: #245bbf; text-decoration: none; }
.btn.secundario { background: var(--secundario-bg); color: var(--azul); }
.btn.secundario:hover { background: #dde5ef; }
.btn.verde { background: var(--verde); }
.btn.verde:hover { background: #187f44; }
.btn.rojo { background: var(--rojo); }
.btn.rojo:hover { background: #a33227; }
.btn.gris { background: #8895a3; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* En oscuro las variables de color son CLARAS —están pensadas para texto sobre
   fondo oscuro—, así que de fondo de un botón con letra blanca no contrastan.
   Por eso el verde y el rojo de los botones se fijan aparte. */
:root[data-tema="oscuro"] .btn.secundario:hover { background: #30415c; }
:root[data-tema="oscuro"] .btn.verde { background: #1f9d55; }
:root[data-tema="oscuro"] .btn.verde:hover { background: #24b062; }
:root[data-tema="oscuro"] .btn.rojo { background: #b0473c; }
:root[data-tema="oscuro"] .btn.rojo:hover { background: #c4544a; }

/* Tablas */
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--gris-borde); }
th { background: var(--superficie-alt); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); }
tr:hover td { background: var(--hover); }
tr.sin-clasificar td { background: var(--sup-amarillo); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Una franja de controles dentro de la cabecera —el filtro de una tabla, una
   ayuda— NO es un título de columna: heredaba de `th` las mayúsculas y el
   espaciado, y el texto de ayuda salía a gritos. */
th.controles { text-transform: none; letter-spacing: 0; font-weight: normal; }

/* Una tabla larga con su encabezado congelado, que se queda debajo de la barra
   de arriba mientras se baja por la lista.

   DOS COSAS que cuestan un rato entender, y por eso están escritas:

   1. El envoltorio NO puede llevar `overflow`. `position: sticky` se pega al
      antepasado que se desplaza, y cualquier `overflow` distinto de `visible`
      —incluido `overflow-x: auto`, porque el otro eje pasa a `auto` solo—
      convierte al envoltorio en ESE antepasado. Sin altura no se desplaza
      nunca, así que la cabecera no se pega a nada y parece que la regla se
      ignora. Es el error clásico de esta receta.
   2. Se pega el `th`, no el `thead`: en una tabla, el que admite `sticky` es la
      celda. Y necesita fondo opaco —lo hereda de `th`— o se le transparentan
      las filas por debajo.

   El precio de quitar el `overflow-x` es que una tabla más ancha que la ventana
   desplaza la página entera en vez de su propio panel. Se acepta aquí: son
   siete columnas, y el encabezado quieto vale más en una lista de cuatro mil
   filas que un desplazamiento horizontal que casi nunca hace falta. */
/* `table` de más en el selector a propósito: las tablas de columnas
   ajustables le ponen `position: relative` a su `th` para colgar el agarre, y
   con la misma especificidad ganaba la que estuviera más abajo en el archivo
   —la cabecera se quedaba sin pegar y no había forma de verlo salvo probándolo—.
   `sticky` también sirve de referencia al agarre, así que no se pierde nada. */
.tabla-fija table thead th { position: sticky; top: var(--alto-topbar); z-index: 2; }

/* Etiquetas de estado. No se parten: «Aportes en Línea» partido en dos
   renglones se lee como dos etiquetas. */
.badge { padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
         white-space: nowrap; }
.badge.verde { background: #e3f6ec; color: var(--verde); }
.badge.amarillo { background: #fbf0d6; color: var(--amarillo); }
.badge.rojo { background: #fbe3e0; color: var(--rojo); }
.badge.gris { background: var(--secundario-bg); color: var(--texto-suave); }
.badge.azul { background: #e0ecfb; color: #1a5fb4; }

/* Un dato que se copia de un clic —el NIT, el documento del representante—. La
   clase es GLOBAL porque el mismo dato se copia desde la pantalla de documentos
   y desde la lista de empresas; el comportamiento está en `copiar.js`. */
.copiable { font: inherit; cursor: pointer; padding: 1px 8px; border-radius: 14px;
            border: 1px solid var(--gris-borde); background: var(--secundario-bg);
            color: var(--texto); font-variant-numeric: tabular-nums; }
.copiable:hover { filter: brightness(.97); }
.copiable.copiado { border-color: var(--verde); color: var(--verde); }
.aviso-copia { color: var(--texto-suave); font-size: 12px; }

/* La nota que corrige una factura, o la factura a la que corrige una nota. La
   clase es GLOBAL porque el trozo que la pinta (`_correccion.html`) se incluye
   en pantallas que no comparten estilos locales: el listado de documentos, el
   de eventos y el detalle. Con una clase por pantalla, la misma frase saldría
   de tres tamaños distintos. */
.correccion { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }
:root[data-tema="oscuro"] .badge.verde { background: rgba(53,192,122,.18); }
:root[data-tema="oscuro"] .badge.amarillo { background: rgba(224,182,74,.18); }
:root[data-tema="oscuro"] .badge.rojo { background: rgba(224,106,92,.18); }
:root[data-tema="oscuro"] .badge.azul { background: rgba(110,168,255,.18); color: #9cc2ff; }

/* Mensajes */
.mensajes { margin-bottom: 16px; }
.msg { padding: 11px 16px; border-radius: var(--radio); margin-bottom: 8px; border-left: 4px solid; }
.msg.success { background: #e9f7ef; border-color: var(--verde); }
.msg.error { background: #fbe9e7; border-color: var(--rojo); }
.msg.warning { background: #fcf3e0; border-color: var(--amarillo); }
.msg.info { background: #e7f0fb; border-color: var(--azul-claro); }
:root[data-tema="oscuro"] .msg.success { background: rgba(53,192,122,.12); }
:root[data-tema="oscuro"] .msg.error { background: rgba(224,106,92,.12); }
:root[data-tema="oscuro"] .msg.warning { background: rgba(224,182,74,.12); }
:root[data-tema="oscuro"] .msg.info { background: rgba(110,168,255,.12); }

/* Formularios */
.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
/* Una casilla y su texto en la misma línea, dentro de un .campo. */
.campo label.campo-check { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.campo label.campo-check input[type=checkbox] { width: auto; margin: 0; }
/* `search` va con los demás: un buscador es una caja de texto, y sin esto se
   quedaba con el estilo del navegador —21 px de alto contra los 38 de un
   desplegable al lado—. El buscador de arriba tiene su propia regla, más
   específica, así que sigue mandando la suya. */
input[type=text], input[type=search], input[type=password], input[type=file], select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--gris-borde);
  border-radius: var(--radio); font-size: 14px;
  background: var(--entrada-bg); color: var(--texto);
}
.fila-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* El siguiente número de cada tipo en World Office o en Siigo, debajo de
   «Exportar»: se ve y se cambia ahí, sin ir al portal. Ocupa su propio renglón. */
.siguientes-al-exportar { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center;
                          gap: 6px 14px; margin: 6px 0 0; }
.siguientes-al-exportar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.siguientes-al-exportar input[type="number"] { width: 7.5em; }

/* Login */
.login-wrap { max-width: 380px; margin: 8vh auto; }
.login-wrap .panel { padding: 32px; }
.login-wrap h1 { text-align: center; color: var(--azul); }
/* Logo del login: se muestra la versión que contrasta con el tema activo. */
.logo-login { display: block; max-width: 240px; width: 100%; height: auto; margin: 0 auto 14px; }
.logo-en-oscuro { display: none; }
:root[data-tema="oscuro"] .logo-en-claro { display: none; }
:root[data-tema="oscuro"] .logo-en-oscuro { display: block; }

.vacio { text-align: center; color: var(--texto-suave); padding: 40px; }
.pendiente { color: var(--amarillo); font-weight: 600; }

/* Desplegables con búsqueda (Tom Select) */
.ts-wrapper { min-width: 230px; font-size: 13px; }
.ts-wrapper.single .ts-control { padding: 7px 10px; }
.ts-dropdown { font-size: 13px; }
table .ts-wrapper { min-width: 150px; }
.ts-wrapper.single .ts-control { padding: 6px 8px; }
/* Columnas Centro de costo y Negocio más estrechas */
td.col-cc { width: 110px; }
td.col-cc .ts-wrapper { min-width: 105px; width: 105px; }
/* Centro de costo un poco más ancha */
td.col-centro { width: 190px; }
td.col-centro .ts-wrapper { min-width: 185px; width: 185px; }
/* Tabla del asiento compacta para que quepa sin scroll horizontal */
#tabla-asiento { font-size: 12.5px; }
#tabla-asiento th, #tabla-asiento td { padding: 6px 8px; }
#tabla-asiento .ts-control { font-size: 12px; }
/* Opciones de texto largo —la actividad de riesgos es la del decreto entera,
   de hasta 1.500 letras—: lo escogido va en una línea y cortado, y entero se
   lee en la lista al abrirla. Sin esto la casilla crecía hasta media pantalla.
   La contención es lo que impide que esa línea le dé su ancho a la columna:
   sin ella, en el teléfono la ficha medía 2.600 px. */
.ts-wrapper.texto-largo { contain: inline-size; }
.ts-wrapper.texto-largo .ts-control { flex-wrap: nowrap; }
.ts-wrapper.texto-largo .ts-control > .item { min-width: 0; white-space: nowrap;
                                              overflow: hidden; text-overflow: ellipsis; }

/* Tom Select en tema oscuro (incluye el estado ENFOCADO/abierto y las opciones) */
:root[data-tema="oscuro"] .ts-control,
:root[data-tema="oscuro"] .ts-wrapper.focus .ts-control,
:root[data-tema="oscuro"] .ts-wrapper.dropdown-active .ts-control,
:root[data-tema="oscuro"] .ts-dropdown,
:root[data-tema="oscuro"] .ts-dropdown .option {
  background: var(--entrada-bg); color: var(--texto); border-color: var(--gris-borde);
}
:root[data-tema="oscuro"] .ts-dropdown .active,
:root[data-tema="oscuro"] .ts-dropdown .option.active {
  background: var(--secundario-bg); color: var(--texto);
}
:root[data-tema="oscuro"] .ts-control input,
:root[data-tema="oscuro"] .ts-control input::placeholder { color: var(--texto); }
:root[data-tema="oscuro"] .ts-wrapper.single .ts-control .item { color: var(--texto); }

/* La ventana de crear un tercero sin salir del documento que se está llenando.
   La usan la factura de venta y el documento soporte; `dialog` la centra y la
   oscurece sola. */
dialog.ventana { border: 1px solid var(--gris-borde); border-radius: var(--radio);
                 background: var(--superficie); color: var(--texto);
                 max-width: 640px; width: 92%; padding: 0; }
dialog.ventana::backdrop { background: rgba(0, 0, 0, .45); }
.ventana-cabeza { display: flex; justify-content: space-between; align-items: center;
                  padding: 12px 16px; border-bottom: 1px solid var(--gris-borde); }
.ventana-cuerpo { padding: 16px; max-height: 70vh; overflow: auto; }
.ventana-pie { padding: 12px 16px; border-top: 1px solid var(--gris-borde);
               display: flex; gap: 10px; justify-content: flex-end; }
/* El plan de cuentas como árbol, dentro de la ventana: un renglón por cuenta,
   con el NOMBRE delante y el código detrás y en pequeño. Las que son de
   movimiento —las que se pueden escoger— se distinguen de las que solo se
   abren. */
/* El botón que abre el plan, pegado bajo su casilla de cuenta. */
.btn-plan { margin-top: 4px; padding: 3px 9px; font-size: 12px; }
.plan-nodos { list-style: none; margin: 0; padding: 0; }
.plan-nodo { display: flex; justify-content: space-between; align-items: baseline;
             gap: 12px; width: 100%; text-align: left; padding: 8px 10px;
             border: 0; border-radius: var(--radio); background: transparent;
             color: var(--texto); font: inherit; cursor: pointer; }
.plan-nodo:hover { background: var(--secundario-bg); }
.plan-nodo::after { content: "›"; color: var(--texto-suave); }
.plan-nodo.es-hoja::after { content: ""; }
.plan-nodo.es-hoja .plan-nombre { color: var(--azul-claro); }
.plan-nombre { flex: 1; }
.plan-codigo { color: var(--texto-suave); font-size: 12px; }

.aviso-dian { background: var(--sup-amarillo); border-radius: var(--radio);
              padding: 8px 10px; font-size: 13px; margin-bottom: 12px; }
/* Un aviso que el usuario tiene que leer antes de fiarse de lo que ve. Mismo
   fondo que el de la DIAN, sin atarlo a ese módulo. */
.aviso { background: var(--sup-amarillo); border-radius: var(--radio);
         padding: 8px 10px; font-size: 13px; margin-bottom: 12px; }
.icono { background: none; border: 1px solid var(--gris-borde); color: var(--texto-suave);
         border-radius: 6px; cursor: pointer; padding: 3px 7px; line-height: 1.2; }
.icono:hover { color: var(--rojo); border-color: var(--rojo); }

/* ─────────────────────────────────────────────────────────────────────────
   IMPRESIÓN

   `no-print` se usaba en cuatro pantallas y no estaba definido en ninguna
   parte: solo funcionaba dentro del calendario, que traía su propia copia. Al
   imprimir el resto salían la barra de navegación y el formulario de filtros,
   que en papel no sirven para nada y se comen media hoja.

   Vive aquí y no en cada pantalla porque lo que se esconde es lo mismo en
   todas: la barra, los filtros, los avisos. Lo que cada informe ajusta —cuánto
   apretar para caber— sí es suyo.
   ───────────────────────────────────────────────────────────────────────── */
/* La barrita de peso que va debajo del nombre en las listas de «quién pesa
   más». La usan el informe de ventas y el monitor de renta: estaba dentro del
   primero y el segundo no la veía. */
.pctbar { height: 5px; background: var(--secundario-bg); border-radius: 3px;
          overflow: hidden; margin-top: 3px; }
.pctbar span { display: block; height: 100%; }

/* ── El membrete del papel (`panel/_membrete.html`) ────────────────────────
   Lo usan varios informes. Estaba copiado dentro de uno y de ahí no lo veía el
   siguiente; vive aquí para que los dos digan lo mismo.

   `.membrete` va SIN `display` fuera del bloque de impresión, a propósito: si
   se le pusiera `display:flex`, pisaría al `.solo-print{display:none}` —las dos
   son una clase, gana la última— y el membrete saldría también en pantalla,
   duplicando el título. */
.solo-print { display: none; }
.membrete { justify-content: space-between; align-items: flex-start;
            gap: 18px; padding: 0 0 9px; margin: 0 0 12px;
            border-bottom: 2px solid var(--azul); }
.mb-emisor { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mb-emisor img { max-height: 19mm; max-width: 52mm; object-fit: contain; }
.mb-datos { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.mb-datos b { font-size: 12.5px; color: var(--azul); }
.mb-datos span { font-size: 9px; color: #555; }
.mb-doc { text-align: right; display: flex; flex-direction: column;
          line-height: 1.35; white-space: nowrap; }
.mb-doc b { font-size: 11px; }
.mb-doc span { font-size: 9px; color: #555; }
.mb-doc .mb-fecha { margin-top: 4px; font-size: 8px; color: #777; }

@media print {
  /* EN PAPEL SE IMPRIME EN CLARO, venga la pantalla como venga.

     Quien tiene puesto el tema oscuro imprimía una hoja de fondo negro: se lee
     mal, gasta un cartucho y no es lo que nadie espera al pulsar imprimir. Se
     restituye la paleta clara en vez de forzar `background:#fff`, para que los
     verdes y los rojos —que dicen si algo suma o resta— sigan siendo los del
     tema claro y no los aclarados para pantalla oscura, que sobre blanco se
     ven lavados. */
  :root, :root[data-tema="oscuro"] {
    --azul: #1f4e79; --azul-claro: #2d6cdf; --topbar-bg: #1f4e79;
    --gris-bg: #ffffff; --gris-borde: #c9d2dc; --superficie: #ffffff;
    --superficie-alt: #f4f6f9; --hover: #ffffff; --entrada-bg: #ffffff;
    --secundario-bg: #eef2f7; --sup-amarillo: #fbf6e3; --sup-rojo: #fbe3e0;
    --sup-azul: #eef6ff; --texto: #1f2933; --texto-suave: #55606d;
    --verde: #157a41; --rojo: #a53124; --amarillo: #8a6508;
    color-scheme: light;
  }
  html, body { background: #ffffff !important; color: var(--texto) !important; }
  /* Ni la barra de arriba ni la de la izquierda: en papel, un menú es tinta
     gastada. Y sin quitarle el margen, la hoja saldría con 218 px en blanco a la
     izquierda y el contenido corrido —que es lo que pasaba al imprimir el
     calendario en cuanto se encendió la lateral. */
  .topbar, .lateral, .no-print, .mensajes, .pantalla { display: none !important; }
  body:has(.lateral) .topbar,
  body:has(.lateral) main,
  body:has(.lateral) .contenido,
  body:has(.lateral) .contenedor { margin-left: 0 !important; }
  /* Lo que solo tiene sentido en papel: el encabezado con la empresa y el
     periodo, que en pantalla los dice la barra y aquí desaparecen. */
  .solo-print { display: block !important; }
  .contenedor { max-width: none; padding: 0; }
  .panel { border: none; box-shadow: none; padding: 0; margin-bottom: 8px;
           background: none; }
  /* Un bloque partido entre dos hojas se lee dos veces y se entiende ninguna. */
  .panel, table { page-break-inside: avoid; }
  tr { page-break-inside: avoid; }
  /* La dirección detrás de cada enlace es ruido en papel. */
  a[href]:after { content: ""; }
  a { color: #000 !important; text-decoration: none; }
}

/* ---------------------------------------------------------- menú lateral
   La navegación a la izquierda, agrupada por lo que hace el contador. Convive
   con la barra de arriba: la enciende `MENU_LATERAL` en los ajustes, y mientras
   esté apagada nada de aquí llega a la pantalla.

   Va con `position: fixed` porque el menú de un ERP es largo —diez grupos y
   cuarenta pantallas— y tiene que seguir ahí cuando el informe de abajo mida
   tres pantallas de alto. */
.lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: 218px;
  background: var(--topbar-bg); color: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto; z-index: 30;
}
.lateral-cabecera {
  display: flex; align-items: center; gap: 6px; padding: 12px 10px 10px 14px;
}
/* El logo se ajusta al ancho de la barra en vez de recortarse: a 40 px de alto
   mide 234 px y la barra tiene 218. Con `max-width` manda el ancho y la altura
   se calcula sola. */
.lateral .marca-lateral { display: block; flex: 1; min-width: 0; }
.lateral .marca-lateral img { max-width: 100%; height: auto; display: block; }

.lateral-plegar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: #c3d4e6;
}
.lateral-plegar:hover { background: rgba(255,255,255,.14); color: #fff; }
.lateral-plegar svg { width: 17px; height: 17px; }
.lateral nav { display: flex; flex-direction: column; padding: 4px 8px 20px; }

.lateral .lat {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; margin: 1px 0;
  color: #dbe6f2; text-decoration: none; font-size: 14px;
  background: none; border: 0; border-radius: var(--radio);
  text-align: left; cursor: pointer; font-family: inherit;
}
.lateral .lat:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.lateral .lat.activo { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }
.lateral .chev { font-size: 11px; opacity: .75; transition: transform .15s; }
.lateral .lat-grupo.abierto > .lat .chev { transform: rotate(180deg); }

/* Los grupos se despliegan hacia abajo, dentro de la propia barra, en vez de
   flotar encima: así se ve a la vez dónde estás y qué más hay en ese grupo. */
.lateral .lat-pop { display: none; padding: 2px 0 6px 10px; }
.lateral .lat-grupo.abierto .lat-pop { display: block; }
.lateral .lat-pop a {
  display: block; padding: 7px 12px; margin: 1px 0;
  color: #c3d4e6; text-decoration: none; font-size: 13px;
  border-left: 2px solid rgba(255,255,255,.18); border-radius: 0 var(--radio) var(--radio) 0;
}
.lateral .lat-pop a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.lateral .lat-pop a.activo { background: rgba(255,255,255,.18); color: #fff; border-left-color: #fff; }
.lateral .lat-sec {
  display: block; padding: 9px 12px 3px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: rgba(255,255,255,.55);
}

/* Con la lateral puesta, arriba solo queda la empresa y el usuario. */
.topbar.con-lateral { justify-content: flex-end; }
body:has(.lateral) .topbar,
body:has(.lateral) main,
body:has(.lateral) .contenido { margin-left: 218px; }

@media (max-width: 900px) {
  .lateral { position: static; width: auto; }
  body:has(.lateral) .topbar,
  body:has(.lateral) main,
  body:has(.lateral) .contenido { margin-left: 0; }
}

/* ------------------------------------------------- tarjetas de la cartera
   Lo que se debe, lo vencido y lo que aún no vence, separado. Es lo primero que
   mira quien cobra: en un total único hay que sumarlo de cabeza. El color sigue
   la regla de la casa —rojo lo que duele, ámbar lo que avisa— y no decora. */
.tarjetas-cartera { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 18px; }
.tarjetas-cartera .tarjeta {
  flex: 1 1 180px; padding: 12px 16px; border-radius: var(--radio);
  border: 1px solid var(--gris-borde); background: var(--superficie-alt);
}
.tarjetas-cartera .cifra { display: block; font-size: 20px; font-weight: 700; }
.tarjetas-cartera .rotulo {
  display: block; margin-top: 2px; font-size: 12px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .4px;
}
.tarjetas-cartera .t-total   { background: var(--sup-azul); }
.tarjetas-cartera .t-vencido { background: var(--sup-rojo); }
.tarjetas-cartera .t-vencido .cifra { color: var(--rojo); }
.tarjetas-cartera .t-porvencer { background: var(--sup-amarillo); }
.tarjetas-cartera .t-porvencer .cifra { color: var(--amarillo); }
.listado .vencida { color: var(--rojo); font-weight: 600; }

/* La cartera por edades tiene ocho columnas y no cabe en una pantalla estrecha.
   Se desplaza ella sola en vez de estirar la página entera. */
.tabla-ancha { overflow-x: auto; }

/* ------------------------------------ el buscador y el botón de crear de arriba
   Van en la barra superior, así que se ven desde cualquier pantalla. El buscador
   se estira con el hueco que quede: en una pantalla ancha se agradece, y en una
   estrecha se encoge en vez de empujar al selector de empresa fuera de la vista. */
/* El buscador y el botón de crear van juntos y en el MEDIO de la barra: es
   donde la vista los busca, y así no compiten con la marca ni con el nombre de
   la empresa, que viven en los extremos.

   Se centran de verdad —respecto a la barra entera— con `left:50%`, no dejando
   que el hueco sobrante los coloque: a la derecha hay medio kilo de barra
   —tema, empresa, usuario, salir— y a la izquierda nada, así que repartir el
   hueco los dejaría claramente escorados. Cuando la barra se estrecha y ya no
   caben sin pisar lo de la derecha, vuelven a la fila normal: es preferible que
   se desplacen a que se solapen. */
.topbar .centro {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0; justify-content: center;
}
/* La condición se le pregunta a la BARRA y no a la ventana, porque no es lo
   mismo: el menú lateral se pliega, y con él la barra crece doscientos y pico
   píxeles sin que la ventana cambie ni un dedo. Preguntándole a la ventana, el
   centro se solapaba con el bloque de la derecha justo en las anchuras de en
   medio.
   `position: sticky` ya sirve de referencia a lo que se coloca dentro, así que
   aquí NO se toca: cambiársela a `relative` despegaba la barra al desplazar,
   que es lo contrario de lo que se pidió. */
.topbar { container-type: inline-size; }
/* Ojo con el número: una consulta al contenedor mide su CAJA DE CONTENIDO, así
   que estos 1520 son la barra sin sus 20 de relleno a cada lado —1560 de barra—. */
@container (min-width: 1520px) {
  /* El ancho va escrito porque, sacada de la fila, la caja se encoge hasta lo
     que mide su propio texto: son los 380 del campo más el hueco y el botón.
     Y el corte de arriba sale de esa cuenta: por debajo de él, un centro de
     verdad se metería encima del bloque de la derecha. */
  .topbar .centro { position: absolute; left: 50%; transform: translateX(-50%);
                    width: 424px; }
}

.buscador-arriba { position: relative; display: flex; align-items: center;
                   flex: 0 1 380px; }
.buscador-arriba input[type=search] {
  /* Hueco a la derecha para la lupa, que va dentro del campo. */
  width: 100%; padding: 7px 36px 7px 12px; font-size: 14px;
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  background: var(--entrada-bg); color: var(--texto);
}
/* La equis de limpiar que pinta el propio navegador cae justo donde va la lupa
   y se ven las dos encima. La que se queda es la lupa, que es la que dice para
   qué sirve la caja. */
.buscador-arriba input[type=search]::-webkit-search-cancel-button { display: none; }
/* La lupa va DENTRO del campo y sin fondo propio: un botón macizo pegado al
   lado se lee como otro control, no como el final de la caja. */
.buscador-arriba button {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--texto-suave); border-radius: 0 var(--radio) var(--radio) 0;
}
.buscador-arriba button svg { width: 16px; height: 16px; display: block; }
.buscador-arriba button:hover { color: var(--azul); }

.menu-crear { position: relative; }
.crear-btn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 21px; line-height: 1; font-weight: 600;
  border: none; background: var(--azul-claro); color: #fff;
}
.crear-btn:hover { filter: brightness(1.08); }
.crear-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0;
  min-width: 240px; padding: 6px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.crear-pop a { display: block; padding: 8px 12px; border-radius: 6px;
               color: var(--texto); text-decoration: none; font-size: 14px; }
.crear-pop a:hover { background: var(--superficie-alt); }
/* Los rótulos que separan los grupos del desplegable: no son enlaces y no deben
   parecerlo. */
.crear-pop .crear-sec { display: block; padding: 9px 12px 4px;
                        font-size: 11px; text-transform: uppercase;
                        letter-spacing: .4px; color: var(--texto-suave); }

.titulo-grupo { margin: 0 0 8px; font-size: 15px; }

@media print { .buscador-arriba, .menu-crear { display: none !important; } }

/* ------------------------------------------------- la barra de filtros de un informe
   La clase `filtros` la llevan diez pantallas y no tenía UNA sola regla, así que
   cada caja salía al 100 % de ancho —es lo que vale un `input` en esta hoja— y
   una fila de cuatro filtros ocupaba media pantalla antes de enseñar un dato.
   Aquí van en línea, cada una con el ancho de lo que se escribe dentro: una
   fecha ocupa lo que una fecha y un código de cuenta, mucho menos. */
.filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
           margin: 0 0 14px; }
.filtros label { display: flex; flex-direction: column; gap: 3px;
                 font-size: 12px; color: var(--texto-suave); }
.filtros label input[type=text], .filtros label input[type=date],
.filtros label select { width: auto; padding: 6px 9px; font-size: 13px; }
/* Una casilla de marcar no es un campo con su etiqueta encima: va en línea con
   su texto. Se reconoce por lo que TIENE dentro y no por una clase que haya que
   acordarse de poner: son diez pantallas y la que se olvide sale con la casilla
   flotando encima de su propia frase. */
.filtros label:has(input[type=checkbox]) {
  flex-direction: row; align-items: center; gap: 6px;
  font-size: 13px; color: var(--texto); }
/* Ojo con la especificidad: `.filtros .corto input` PIERDE contra la regla de
   arriba, que lleva el mismo número de clases y un elemento más. Escrito así
   —con la clase en el propio `label` y el selector de tipo— gana, que es la
   diferencia entre una caja de siete caracteres y una de ciento ochenta píxeles. */
.filtros label.corto input[type=text] { width: 7em; }
.filtros label.medio select { max-width: 15em; }
/* Los periodos de un clic (`_atajos_periodo.html`), al final de la barra y a
   la derecha, como en el informe de ventas y compras. */
.filtros .atajos { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.filtros .atajos a { font-size: 12px; padding: 5px 10px; }

/* --------------------------------------------- columnas que el usuario ajusta
   Un informe con nombres de proveedor de sesenta letras al lado de una columna
   de cifras no se puede repartir bien de antemano: lo que a uno le sobra a otro
   le falta. Con esto, quien mira arrastra el borde de la cabecera y la deja como
   la necesita; el ancho se guarda en su navegador y sigue ahí al volver.

   La tabla pasa a ancho FIJO. Es la parte que no se puede saltar: con el reparto
   automático el navegador decide por su cuenta según lo que haya en las celdas,
   así que el ancho elegido duraba hasta el primer nombre largo. */
table.tabla-ajustable { table-layout: fixed; }
table.tabla-ajustable th { position: relative; }
table.tabla-ajustable td { overflow: hidden; text-overflow: ellipsis; }

/* El agarre vive en el borde derecho de la cabecera y se sale un poco hacia
   fuera, para que se pueda coger sin apuntar al píxel. */
table.tabla-ajustable th .agarre {
  position: absolute; top: 0; right: -3px; z-index: 2;
  width: 7px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none;
}
table.tabla-ajustable th .agarre:hover,
table.tabla-ajustable th .agarre.arrastrando { background: var(--azul); opacity: .45; }
/* Mientras se arrastra, el puntero es el mismo en toda la página y no se
   selecciona texto por el camino. */
body.ajustando-columna, body.ajustando-columna * { cursor: col-resize !important; }
body.ajustando-columna { user-select: none; }

/* --------------------------------------------------- ficha de un tercero
   Pestañas para no repartir en cuatro pantallas lo que se mira de una persona:
   quién es, lo que nos debe, lo que le debemos y su movimiento. */
.pestanas {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 2px solid var(--gris-borde); margin: 16px 0 18px;
}
.pestanas a {
  padding: 9px 14px; text-decoration: none; color: var(--texto-suave);
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radio) var(--radio) 0 0; margin-bottom: -2px;
}
.pestanas a:hover { background: var(--hover); text-decoration: none; }
.pestanas a.activo {
  color: var(--texto); font-weight: 600;
  background: var(--superficie); border-color: var(--gris-borde);
  border-bottom: 2px solid var(--superficie);
}
/* La cifra dentro de la pestaña: dice cuánto hay ahí sin tener que entrar. */
.pestanas .chip {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 11px; font-weight: 600;
  background: var(--secundario-bg); border-radius: 10px; color: var(--texto);
}
.ficha { border-collapse: collapse; }
.ficha th {
  text-align: left; font-weight: 600; color: var(--texto-suave);
  padding: 6px 18px 6px 0; vertical-align: top; white-space: nowrap;
}
.ficha td { padding: 6px 0; }

/* Los iconos del menú lateral. Van DELANTE del texto, nunca en su lugar: un
   icono solo se adivina, y hay pantallas —«Integraciones», «Herramientas»— que no
   tienen dibujo evidente. El tamaño se fija aquí y no en el SVG para que un
   cambio no haya que repetirlo once veces. */
.lateral .ico {
  width: 17px; height: 17px; flex: 0 0 17px; opacity: .85;
}
.lateral .lat { gap: 10px; }
.lateral .lat > span:first-of-type { flex: 1; }
.lateral .lat.activo .ico { opacity: 1; }
/* El texto del grupo empuja al chevron al extremo, como antes. */
.lateral .lat-btn { justify-content: flex-start; }
.lateral .lat-btn .chev { margin-left: auto; }

/* ---------------------------------------------------- el menú plegado
   Deja el ancho para lo que se está mirando: los informes del libro tienen ocho
   columnas y con la barra abierta no caben en un portátil. Se queda la columna
   de iconos para no perder de vista dónde está uno. */
.lateral.plegada { width: 56px; }
.lateral.plegada .marca-lateral,
.lateral.plegada .lat > span,
.lateral.plegada .lat-sec,
.lateral.plegada .chev { display: none; }
.lateral.plegada .lateral-cabecera { padding: 12px 0 10px; justify-content: center; }
.lateral.plegada .lat { justify-content: center; padding: 10px 0; }
.lateral.plegada .lat-pop { display: none; }
.lateral.plegada .ico { flex-basis: auto; }
body:has(.lateral.plegada) .topbar,
body:has(.lateral.plegada) main,
body:has(.lateral.plegada) .contenido { margin-left: 56px; }

@media (max-width: 900px) {
  .lateral.plegada { width: auto; }
  body:has(.lateral.plegada) .topbar,
  body:has(.lateral.plegada) main,
  body:has(.lateral.plegada) .contenido { margin-left: 0; }
}

/* ------------------------------------------------------------ paso a paso
   Tres cosas en orden —bajar de la DIAN, subirlas, contabilizarlas— en vez de
   tres botones sueltos: quien llega nuevo no sabe cuál va primero. El número lo
   pone el navegador con la lista ordenada, así que añadir o quitar un paso no
   obliga a renumerar a mano. */
.pasos { list-style: none; counter-reset: paso; margin: 6px 0 0; padding: 0; }
.pasos > li {
  counter-increment: paso;
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px;
  align-items: start; padding: 12px 0;
  border-top: 1px solid var(--gris-borde);
}
.pasos > li:first-child { border-top: 0; padding-top: 4px; }
.pasos > li::before {
  content: counter(paso);
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--azul); color: #fff; font-weight: 700; font-size: 13px;
}
.pasos .paso-texto { color: var(--texto); }
.pasos > li > *:not(.paso-texto):not(::before) { grid-column: 2; }