/* ---------------------------------------------------------------------------
   Tesoreria: los gastos fijos por aprobar. Lo pinta tesoreria.js.

   Dos columnas: a la izquierda la lista por orden de llegada (hora,
   proveedor, su estado y cuanto se pide); a la derecha la elegida completa,
   con Rechazar y Aprobar fijos abajo. Al aprobar, se abre sola la que sigue.
   En el telefono no caben las dos: la lista, y al tocar una, su detalle a lo
   ancho con "Volver a la lista".

   La marca va en el azul de Aprobaciones Lark (#2563eb) con el logo de Lark:
   el boton de aprobar, lo elegido y la ficha. Lo que "cuadra" sigue en el
   verde azulado de Flowmo (como Lark marca lo aprobado). Ambar y rojo quedan
   solo para las advertencias.

   El movimiento es el de Bamboo AI: la franja de "Sincronizando…", el
   esqueleto con el brillo violeta-turquesa y la entrada escalonada con su
   curva (sale rapido, llega suave). Solo transform y opacity.
   --------------------------------------------------------------------------- */

/* ------------------------- la tarjeta del catalogo ------------------------ */
/* En el azul de Aprobaciones Lark y con el logo de Lark: es la bandeja de los
   approvals de Gastos Fijos. */
.application-card--tesoreria {
  --app-accent: #2563eb;
  --app-soft: #eff6ff;
  --app-ink: #1d4ed8;
}

.application-card-icon--tesoreria img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: contain;
}

.application-card-chip--tesoreria {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

/* ----------------------- el panel ocupando el area ------------------------ */
.applications-workspace.is-tesoreria-open {
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  gap: 0;
}

.applications-workspace.is-tesoreria-open .applications-hero,
.applications-workspace.is-tesoreria-open .applications-board {
  display: none;
}

.app-shell.tesoreria-central-lock {
  --assistant-side-size: 0px;
  --inbox-side-size: 0px;
  --swap-rail-size: 0px;
}

.app-shell.tesoreria-central-lock .workspace-slot[data-slot="side"],
.app-shell.tesoreria-central-lock .workspace-swap-rail,
.app-shell.tesoreria-central-lock .panel-swap-button,
.app-shell.tesoreria-central-lock .side-panel-collapse-button,
.app-shell.tesoreria-central-lock .assistant-float-toggle {
  display: none !important;
}

/* Los dialogos viven fuera del panel (en el body, ver tesoreria.js): su caja
   no pinta nada (display: contents) pero les hereda los mismos colores. */
.tesoreria-dialogos {
  display: contents;
}

.tesoreria-panel,
.tesoreria-dialogos {
  /* Los colores de Flowmo, lisos: el gris azulado de su fondo, el verde
     azulado de la marca, el texto en tonos pizarra y sombras suaves. Sin
     degradados. */
  --tes-fondo: #f4f7fb;
  --tes-papel: #ffffff;
  --tes-tinta: #0f172a;
  --tes-tinta-2: #475569;
  --tes-tinta-3: #64748b;
  --tes-linea: #e2e8f0;
  --tes-linea-2: #cbd5e1;
  --tes-borde-tarjeta: rgba(203, 213, 225, 0.88);
  --tes-marca: #2563eb;
  --tes-marca-oscura: #1d4ed8;
  --tes-marca-2: #3b82f6;
  --tes-marca-3: #60a5fa;
  --tes-marca-tinta: #1d4ed8;
  --tes-marca-suave: #eff6ff;
  --tes-cian: #22d3ee;
  --tes-lila: #8b5cf6;
  /* El renglon elegido: el azul de la marca muy claro, con su orilla. */
  --tes-activo: #eff6ff;
  --tes-activo-borde: rgba(59, 130, 246, 0.45);
  --tes-rojo: #dc2626;
  --tes-rojo-fuerte: #b91c1c;
  --tes-rojo-suave: #fef2f2;
  --tes-rojo-borde: #fecaca;
  --tes-ambar: #c2410c;
  --tes-ambar-punto: #f59e0b;
  --tes-ambar-suave: #fff7ed;
  --tes-ambar-borde: #fed7aa;
  /* "Verde" = lo que cuadra (como Lark marca lo aprobado): el verde azulado
     de Flowmo. La marca, los botones y lo elegido van en azul. */
  --tes-verde: #0f766e;
  --tes-verde-oscuro: #115e59;
  --tes-verde-punto: #14b8a6;
  --tes-verde-suave: #f0fdfa;
  --tes-verde-borde: #99f6e4;
  --tes-gris-suave: #f1f5f9;
  --tes-gris-borde: #e2e8f0;
  --tes-sombra: 0 12px 30px rgba(15, 23, 42, 0.06);
  --tes-sombra-alta: 0 26px 70px rgba(15, 23, 42, 0.14);
  --tes-radio: 16px;
  /* Tres columnas: los servicios, la lista y la abierta. */
  --tes-ancho: 1600px;
  --tes-hueco: 16px;
  --tes-curva: cubic-bezier(0.16, 0.84, 0.44, 1);
  min-height: 0;
  position: relative;
  background: var(--tes-fondo);
  color: var(--tes-tinta);
  font-variant-numeric: tabular-nums;
}

.applications-workspace.is-tesoreria-open .tesoreria-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}

/* El panel recibe el foco al abrir (para el teclado), pero sin marco. */
.tesoreria-panel:focus,
.tesoreria-panel:focus-visible {
  outline: none;
}

/* La barra de arriba y, debajo, la pantalla; la franja de "Sincronizando…"
   se pone encima de la pantalla, en la misma celda. */
.tesoreria-escena {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  container-type: inline-size;
  container-name: tes-escena;
}

.tes-pantalla {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  container-type: inline-size;
  container-name: tesoreria;
}

.tes-contenido {
  max-width: calc(var(--tes-ancho) + 48px);
  margin: 0 auto;
  padding: 4px 24px 48px;
}

/* Con solicitudes, la pantalla no se desplaza: lo hacen la lista y el
   detalle, cada uno por dentro. */
.tes-contenido--dos {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Arriba ya no van los menus (se mudaron a la barra): solo aire. */
  padding: 16px 24px 20px;
}

/* --------------------------------- la barra -------------------------------- */
.tes-barra-superior {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* La misma distancia entre todo lo de la barra (y entre los menus). */
  --tes-hueco-barra: 16px;
  gap: 12px var(--tes-hueco-barra);
  padding: 12px max(24px, calc((100% - var(--tes-ancho)) / 2));
  background: var(--tes-papel);
  border-bottom: 1px solid var(--tes-linea);
}

/* Cuantas hay por aprobar y por cuanto, junto al nombre (28-09), con una
   raya fina que los separa; y a su lado "Ver registro", la campanita de Lark
   (viendo Testing) y el orden (los muda ahi colocarHerramientas, en
   tesoreria.js). Con ancho de sobra todo va en el renglon del nombre; si no,
   bajan a su propio renglon. */
.tesoreria-escena .tes-barra-superior > .tes-marca {
  flex: none;
}

.tes-cuantas {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding-left: var(--tes-hueco-barra);
  border-left: 1px solid var(--tes-linea);
  /* Si los menus bajan, los botones de la derecha se van a la orilla. */
  margin-right: auto;
}

.tes-cuantas .tes-resumen-texto {
  white-space: nowrap;
}

.tes-herramientas {
  order: 5;
  flex: 1 1 100%;
  min-width: 0;
}

.tes-herramientas .tes-cabecera {
  flex-wrap: nowrap;
  gap: var(--tes-hueco-barra);
  padding: 0;
}

.tes-herramientas .tes-orden {
  flex: none;
  white-space: nowrap;
}

/* Con ancho, en el renglon del nombre; si lo de la lista no cabe entero (con
   la campanita y "Volver a mi cuenta" viendo Testing), baja a su renglon en
   vez de encimarse sobre los botones de la derecha (base: su contenido). */
@container tes-escena (min-width: 900px) {
  .tes-barra-superior > .tes-herramientas {
    order: 0;
    flex: 1 1 auto;
  }
}

/* Entre 900 y 1299 px: el botón de orden conserva su texto completo. */
@container tes-escena (min-width: 900px) and (max-width: 1299px) {
  .tes-herramientas .tes-orden {
    padding: 0 12px 0 14px;
  }
}

/* El icono como el de las fichas de Flowmo: fondo claro, orilla y el trazo en
   el verde azulado de la marca. */
.tes-cabeza-icono {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, 0.2);
  background: #eff6ff;
  color: var(--tes-marca);
}

.tes-cabeza-icono img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: contain;
}

.tes-cabeza-icono svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tes-marca {
  min-width: 0;
  flex: 1;
}

/* Como la ficha de Tesoreria en Aplicaciones: arriba lo que es ("CONTROL
   FINANCIERO", en mayusculas y en el verde de la marca) y el nombre en negro
   grueso. */
.tes-marca-etiqueta {
  display: block;
  margin: 0 0 1px;
  color: var(--tes-marca-tinta);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tes-marca h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tes-tinta);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tes-marca p {
  margin: 1px 0 0;
  color: var(--tes-tinta-3);
  font-size: 0.84rem;
  font-weight: 600;
}

.tes-sello {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fef3c7;
  color: #92400e;
  cursor: help;
}

.tes-icono-boton,
.tes-cerrar {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--tes-borde-tarjeta);
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.25s var(--tes-curva), color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tes-icono-boton:hover {
  color: var(--tes-marca-tinta);
  border-color: var(--tes-activo-borde);
  background: var(--tes-activo);
}

.tes-cerrar:hover {
  color: var(--tes-tinta);
  border-color: var(--tes-tinta-3);
  transform: rotate(90deg);
}

/* ----------------------------- sincronizando… ----------------------------- */
/* La franja de Bamboo: sale de debajo de la barra mientras se trae la lista,
   con lo que va haciendo y su linea de avance real. */
.tes-sincroniza {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  justify-self: center;
  z-index: 6;
  position: relative;
  width: min(var(--tes-ancho), calc(100% - 48px));
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 13px;
  border-radius: 12px;
  border: 1px solid var(--tes-linea);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.1);
  overflow: hidden;
  animation: tes-franja-entra 0.34s var(--tes-curva) both;
}

.tes-sincroniza.is-sale {
  animation: tes-franja-sale 0.28s ease-in both;
}

/* Lo que va haciendo, una frase a la vez en el mismo lugar: la que llega sube
   desde abajo y la anterior se va hacia arriba. */
.tes-sincroniza strong {
  flex: 0 1 auto;
  min-width: 0;
  display: grid;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 700;
}

.tes-sincroniza-frase {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: tes-frase-entra 0.34s var(--tes-curva) both;
}

.tes-sincroniza-frase.is-sale {
  animation: tes-frase-sale 0.26s ease-in both;
}

.tes-sincroniza.is-listo strong {
  color: var(--tes-marca);
}

.tes-sincroniza.is-listo .tes-sincroniza-punto::after {
  animation: none;
}

@keyframes tes-frase-entra {
  from { opacity: 0; transform: translateY(90%); }
}

@keyframes tes-frase-sale {
  to { opacity: 0; transform: translateY(-90%); }
}

.tes-sincroniza-detalle {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  color: var(--tes-tinta-3);
}

.tes-sincroniza-cifra {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6d5bd0;
}

.tes-sincroniza-punto {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tes-verde-punto);
}

.tes-sincroniza-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: tes-latido 1.4s ease-out infinite;
}

.tes-sincroniza-avance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #8270e5, #35decb);
  transform: scaleX(0.03);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--tes-curva);
}

@keyframes tes-franja-entra {
  from { opacity: 0; transform: translateY(-12px) scale(0.985); }
}

@keyframes tes-franja-sale {
  to { opacity: 0; transform: translateY(-10px); }
}

@keyframes tes-latido {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(2.8); opacity: 0; }
}

/* -------------------------------- esqueleto ------------------------------- */
/* Bloques con la forma de la pantalla y un brillo violeta-turquesa que los
   barre (el de Metas en Bamboo). El brillo arranca ya en camino para que se
   vea aunque la lista llegue pronto. */
.tes-sk {
  position: relative;
  display: block;
  overflow: hidden;
  height: 10px;
  border-radius: 7px;
  background: rgba(91, 112, 151, 0.12);
}

.tes-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(130, 112, 229, 0.26) 42%, rgba(53, 222, 203, 0.24) 56%, transparent 100%);
  transform: translateX(-110%);
  animation: tes-barrido 1.15s ease-in-out -0.35s infinite;
}

@keyframes tes-barrido {
  to { transform: translateX(110%); }
}

.tes-esqueleto {
  animation: tes-fundido 0.2s ease both;
}

.tes-sk-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px 14px;
}

.tes-sk--boton-grande {
  width: 230px;
  height: 44px;
  border-radius: 12px;
}

.tes-sk--hora {
  width: 34px;
  height: 10px;
}

.tes-sk-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f4;
}

.tes-sk-quien,
.tes-sk-pila {
  display: grid;
  gap: 8px;
}

.tes-sk--aviso {
  height: 64px;
  border-radius: 12px;
}

.tes-sk-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tes-sk--caja {
  height: 88px;
  border-radius: 12px;
}

/* --------------------------------- botones -------------------------------- */
.tes-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px;
  border-radius: 11px;
  border: 1px solid var(--tes-linea-2);
  background: var(--tes-papel);
  color: var(--tes-tinta);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tes-boton:active:not(:disabled) {
  transform: scale(0.97);
}

.tes-boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tes-boton:focus-visible,
.tes-icono-boton:focus-visible,
.tes-cerrar:focus-visible,
.tes-enlace:focus-visible,
.tes-volver:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 2px;
}

.tes-boton--grande {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.tes-boton--texto {
  border-color: transparent;
  background: transparent;
  color: var(--tes-tinta-2);
  padding: 0 10px;
}

.tes-boton--texto:hover:not(:disabled) {
  background: var(--tes-gris-suave);
  color: var(--tes-tinta);
}

/* Aprobar: el verde azulado de Flowmo, liso. */
.tes-boton--verde {
  border-color: var(--tes-marca);
  background: var(--tes-marca);
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.tes-boton--verde:hover:not(:disabled) {
  border-color: var(--tes-marca-oscura);
  background: var(--tes-marca-oscura);
}

.tes-boton--borde {
  border-color: rgba(37, 99, 235, 0.38);
  background: var(--tes-papel);
  color: var(--tes-marca-tinta);
}

.tes-boton--borde:hover:not(:disabled) {
  border-color: var(--tes-activo-borde);
  color: var(--tes-marca-tinta);
  background: var(--tes-activo);
}

.tes-boton--rojo {
  border-color: var(--tes-rojo-fuerte);
  background: var(--tes-rojo-fuerte);
  color: #fff;
}

.tes-boton--rojo:hover:not(:disabled) {
  border-color: #991b1b;
  background: #991b1b;
}

.tes-boton--rojo-suave {
  border-color: var(--tes-rojo-borde);
  background: var(--tes-papel);
  color: var(--tes-rojo-fuerte);
}

.tes-boton--rojo-suave:hover:not(:disabled) {
  border-color: #fca5a5;
  background: var(--tes-rojo-suave);
}

.tes-boton--ambar {
  border-color: #ea580c;
  background: #ea580c;
  color: #fff;
}

.tes-boton--ambar:hover:not(:disabled) {
  border-color: #c2410c;
  background: #c2410c;
}

.tes-enlace {
  border: 0;
  background: none;
  padding: 0;
  color: var(--tes-marca);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --------------------------------- arriba --------------------------------- */
/* Los menus del lugar y del servicio (se despliegan solo para elegir) y, a su
   lado, cuantas hay por aprobar ahi, por cuanto y el orden. */
.tes-cabecera {
  flex: none;
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 0 12px;
}

.tes-resumen {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 2px;
}

/* Cuantas y por cuanto, en negro grueso como las cifras de Flowmo pero a la
   medida de la lista (no un encabezado); el numero en el verde azulado de la
   marca. */
.tes-resumen-texto {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tes-tinta-3);
}

.tes-resumen-texto strong {
  color: var(--tes-tinta);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.tes-resumen-numero {
  display: inline-block;
  font-size: calc(1.12rem - 2px);
  color: var(--tes-marca);
}

.tes-resumen-separa {
  margin: 0 6px;
  color: var(--tes-linea-2);
}

.tes-resumen-accion {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* El orden de la lista: un boton que dice como van y las voltea. */
.tes-orden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 999px;
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tes-orden > .bi:first-child {
  color: var(--tes-marca-2);
}

.tes-orden:hover {
  border-color: var(--tes-activo-borde);
  color: var(--tes-marca-tinta);
  background: var(--tes-activo);
}

.tes-orden:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 2px;
}

.tes-orden-cambio {
  margin-left: 2px;
  font-size: 0.78rem;
  color: var(--tes-tinta-3);
}

/* Aprobando el lote: el boton se vuelve su barra de avance. */
.tes-progreso {
  display: grid;
  gap: 7px;
  width: min(320px, 70vw);
}

.tes-progreso-texto {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tes-verde);
}

.tes-progreso-barra {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  overflow: hidden;
}

.tes-progreso-barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tes-marca-2);
  transform: scaleX(0.03);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--tes-curva);
}

.tes-falta-control {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--tes-radio);
  border: 1px solid #f5d68a;
  background: #fffbeb;
  color: #6b4200;
}

.tes-falta-control > i {
  font-size: 1.4rem;
}

.tes-falta-control p {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ------------------------------ las dos columnas --------------------------- */
/* La lista y la abierta completa (los servicios van en su menu, arriba). */
.tes-dos {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, min(420px, 32%)) minmax(0, 1fr);
  gap: var(--tes-hueco);
}

/* Las tarjetas como las fichas de Flowmo: blancas, borde pizarra y una
   sombra suave. */
.tes-lista-lado,
.tes-detalle-lado {
  min-height: 0;
  background: var(--tes-papel);
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: var(--tes-radio);
  box-shadow: var(--tes-sombra);
}

.tes-lista-lado {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* El dia en que llegaron: una etiqueta en mayusculas (como las de las apps
   de Flowmo) que se queda arriba mientras se recorre ese dia. */
.tes-dia {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 6px 14px 5px;
  border-bottom: 1px solid #edf1f6;
  background: #f8fafc;
  color: var(--tes-tinta-3);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Un renglon de la lista: es un boton (clic, Enter, flechas). Dos lineas,
   para que quepan mas a lo alto. */
.tes-fila {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid #eef2f6;
  background: transparent;
  color: var(--tes-tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.tes-fila:hover {
  background: rgba(240, 249, 255, 0.7);
}

.tes-fila:focus-visible {
  outline: 2px solid var(--tes-marca-2);
  outline-offset: -2px;
}

/* La elegida, como el renglon activo de la barra lateral de Flowmo: su tono
   claro, su orilla y la raya a la izquierda. */
.tes-fila.is-elegida {
  background: var(--tes-activo);
  box-shadow: inset 0 0 0 1px var(--tes-activo-borde);
}

.tes-fila.is-elegida::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--tes-marca-2);
}

.tes-fila.is-ocupada {
  opacity: 0.55;
  pointer-events: none;
}

.tes-hora {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tes-tinta-3);
}

.tes-fila.is-elegida .tes-hora:not(.tes-fila-icono) {
  color: var(--tes-marca-tinta);
}

.tes-quien {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.tes-proveedor-linea {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Debajo del servicio, en una sola linea, el lugar (tenue) y su estado. Si
   no caben juntos, el estado baja a su propio renglon: ni el lugar se aplasta
   a una letra ni el estado se corta. */
.tes-fila-linea {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 8px;
}

.tes-fila-linea .tes-estado {
  flex: 0 1 auto;
  max-width: 100%;
}

.tes-lugar-linea {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
  font-weight: 600;
}

.tes-lugar-texto {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tes-proveedor {
  min-width: 0;
  color: var(--tes-tinta);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* La solicitud falsa de un simulacro: que nadie la confunda con una real. */
.tes-etiqueta-sim {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px dashed #c4a1f0;
  background: #f6f0ff;
  color: #6b3fb5;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Recien llegada (se vio sola, sin recargar) y sin abrir: "Nueva" en el verde
   azulado de la marca; al llegar, un brillo que se apaga solo. */
.tes-etiqueta-nueva {
  flex: none;
  padding: 0 7px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 999px;
  background: #eff6ff;
  color: var(--tes-marca-tinta);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}

.tes-fila.is-recien {
  animation: tes-llega 3.2s var(--tes-curva);
}

@keyframes tes-llega {
  0%, 45% { background: #eff6ff; box-shadow: inset 3px 0 0 var(--tes-marca-2); }
}

/* La abierta que se resolvio fuera: su aviso tranquilo y, abajo, "Ver la
   siguiente" en lugar de Rechazar y Aprobar. */
.tes-llamado.tes-llamado--fuera > i {
  color: var(--tes-marca-2);
}

.tes-detalle-pie--fuera .tes-siguiente {
  flex: 1;
}

/* Al volver de un simulacro, su renglon se ilumina un momento. */
.tes-fila.is-resaltada {
  animation: tes-resalta 2.6s var(--tes-curva);
}

@keyframes tes-resalta {
  0%, 55% { background: #f6f0ff; box-shadow: inset 0 0 0 2px #8270e5; }
}

/* El estado (o el "Cuadra") de cada una: lo unico con color. */
.tes-estado {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.79rem;
  font-weight: 700;
}

.tes-estado-texto {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tes-estado--verde { color: var(--tes-verde); }
.tes-estado--verde i { color: var(--tes-verde-punto); }
.tes-estado--ambar { color: var(--tes-ambar); }
.tes-estado--rojo { color: var(--tes-rojo-fuerte); }
.tes-estado--gris { color: var(--tes-tinta-3); font-weight: 600; }

.tes-estado--ambar i { color: var(--tes-ambar-punto); }

.tes-estado-mas {
  flex: none;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--tes-linea);
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.5;
}

.tes-cifra {
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}

.tes-cifra strong {
  color: var(--tes-tinta);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tes-cifra small {
  font-size: 0.72rem;
}

/* En una cuenta del Excel, debajo del ultimo pago, cuando fue. */

.tes-dif {
  font-weight: 700;
  color: var(--tes-tinta-3);
}

.tes-dif--ambar { color: var(--tes-ambar); }
.tes-dif--rojo { color: var(--tes-rojo-fuerte); }

/* ----------------------------- la elegida, completa ------------------------ */
.tes-detalle-lado {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tes-detalle-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 22px;
}

/* Las barras de desplazamiento, cuando hacen falta, delgadas y tenues. */
.tes-pantalla,
.tes-lista-lado,
.tes-detalle-cuerpo {
  scrollbar-width: thin;
  scrollbar-color: #cfd6de transparent;
}

.tes-volver {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin: -4px 0 -6px -6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tes-marca-tinta);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}

/* La cabeza: el nombre y, en su mismo renglon a la derecha, el comprobante,
   a la mano (si no cabe, baja debajo del nombre). Abajo, de donde es y quien
   la pidio, a todo lo ancho. */
.tes-detalle-cabeza {
  min-width: 0;
}

.tes-detalle-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  min-width: 0;
}

.tes-detalle-titulo h4 {
  flex: 1 1 auto;
  min-width: 0;
}

.tes-detalle-titulo > .tes-comprobantes,
.tes-detalle-titulo > .tes-sin-comprobante {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
}

.tes-detalle-titulo > .tes-comprobantes {
  justify-content: flex-end;
}

.tes-detalle-cabeza .tes-comprobante {
  max-width: 260px;
}

.tes-detalle-cabeza h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--tes-tinta);
  font-size: 1.36rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.tes-detalle-donde {
  margin: 3px 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--tes-tinta-2);
}

.tes-detalle-meta {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tes-tinta-3);
}

/* La razon social de la cuenta, completa (y si el Excel la escribe a medias
   o mal, como la escribe, en ambar: para corregirla alla). */
.tes-detalle-razon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 3px 0 0;
  color: var(--tes-tinta-3);
  font-size: 0.8rem;
  font-weight: 600;
}

.tes-detalle-razon strong {
  color: var(--tes-tinta-2);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.tes-razon-excel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tes-ambar);
  font-size: 0.74rem;
  font-weight: 700;
}

/* Que salto (o que cuadra), explicado en una frase: con el fondo claro de su
   color, su orilla y el icono en su ficha, como los avisos de Flowmo. */
.tes-llamado {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 14px 10px 11px;
  border: 1px solid;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
}

.tes-llamado > i {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-top: -2px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
}

.tes-llamado p {
  margin: 0;
}

.tes-llamado p + p {
  margin-top: 4px;
}

.tes-llamado-otro {
  font-size: 0.85rem;
  color: var(--tes-tinta-2);
}

/* Cada aviso con lo que se puede hacer ahi: el texto y, a su derecha, su
   boton ("Solucionar", "Notificar") o lo que ya se hizo ("Notificado hoy"). */
.tes-motivos {
  flex: 1 1 auto;
  min-width: 0;
}

.tes-motivo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tes-motivo > p {
  flex: 1 1 auto;
  min-width: 0;
}

.tes-motivo + .tes-motivo {
  margin-top: 5px;
}

.tes-motivo-acciones {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tes-motivo-boton {
  height: 27px;
  padding: 0 12px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 999px;
  background: #fff;
  color: var(--tes-marca-tinta);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tes-motivo-boton:hover {
  background: var(--tes-activo);
  border-color: rgba(59, 130, 246, 0.7);
}

.tes-motivo-boton:focus-visible,
.tes-motivo-enlace:focus-visible {
  outline: 2px solid var(--tes-marca-2);
  outline-offset: 2px;
}

.tes-motivo-hecho {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tes-marca-tinta);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.tes-motivo-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tes-tinta-3);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}

.tes-motivo-enlace:hover {
  color: var(--tes-tinta);
}

.tes-motivo-enlace:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Lo que se le aviso que faltaba y ya llego en su apartado de la solicitud
   (o en otra que la corrige): con su palomita, en el verde azulado. */
.tes-motivo--llego > p > .bi {
  margin-right: 5px;
  color: var(--tes-marca);
}

.tes-motivo--llego > p > strong {
  color: var(--tes-marca-tinta);
}

/* "Solucionar": las opciones como tarjetas; la elegida, como lo activo de
   Flowmo. */
.tes-opciones {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  max-height: min(48vh, 420px);
  overflow-y: auto;
  padding: 2px;
}

.tes-opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tes-opcion:hover {
  border-color: rgba(59, 130, 246, 0.45);
}

.tes-opcion:has(input:checked) {
  border-color: rgba(59, 130, 246, 0.6);
  background: var(--tes-activo);
}

.tes-opcion input {
  flex: none;
  margin: 3px 0 0;
  accent-color: var(--tes-marca);
}

.tes-opcion span {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 0.86rem;
}

.tes-opcion strong {
  color: var(--tes-tinta);
  font-weight: 800;
}

.tes-opcion small {
  color: var(--tes-tinta-3);
  font-size: 0.76rem;
  font-weight: 600;
}

.tes-casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--tes-tinta-2);
  font-size: 0.82rem;
  cursor: pointer;
}

.tes-casilla input {
  accent-color: var(--tes-marca);
}

/* En el telefono el boton del aviso va debajo de su texto. */
@container tesoreria (max-width: 720px) {
  .tes-motivo {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .tes-motivo-acciones {
    justify-content: flex-start;
  }
}

.tes-llamado--verde { background: #f0fdfa; border-color: #99f6e4; }
.tes-llamado--verde > i { color: var(--tes-verde-punto); }
.tes-llamado--verde strong { color: var(--tes-verde); }
.tes-llamado--ambar { background: var(--tes-ambar-suave); border-color: var(--tes-ambar-borde); }
.tes-llamado--ambar > i { color: var(--tes-ambar-punto); }
.tes-llamado--ambar strong { color: var(--tes-ambar); }
.tes-llamado--rojo { background: var(--tes-rojo-suave); border-color: var(--tes-rojo-borde); }
.tes-llamado--rojo > i,
.tes-llamado--rojo strong { color: var(--tes-rojo-fuerte); }
.tes-llamado--gris { background: #f8fafc; border-color: var(--tes-gris-borde); }
.tes-llamado--gris > i { color: var(--tes-tinta-3); }
.tes-llamado--gris strong { color: var(--tes-tinta-2); }

/* Un enlace chico ("Ver 3 movimientos anteriores", "Excel original"). */
.tes-enlace-chico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -4px -6px -4px 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--tes-marca-tinta);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.tes-enlace-chico:hover {
  background: var(--tes-activo);
}

.tes-enlace-chico:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 1px;
}

/* -------------------------- el estado de cuenta --------------------------- */
/* Como el estado de cuenta de un banco: en cada renglon que es y, debajo, su
   fecha y sus marcas; la celda del Excel; el monto a la derecha, con los
   centavos mas tenues, y el cambio contra el anterior en una etiqueta. Arriba
   la solicitud de ahora con la raya de su color; una division; el historial.
   Cualquier renglon se despliega ahi mismo con un clic. */
.tes-cuenta {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.tes-cuenta-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.tes-cuenta-cabeza h5 {
  margin: 0;
  flex: none;
  color: var(--tes-marca-tinta);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lo anotado en el renglon de la cuenta ("CTA MAESTRA"...): junto al titulo,
   en un renglon, y entero al pasar el mouse. */
.tes-cuenta-nota {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #92400e;
  font-size: 0.76rem;
  font-weight: 600;
}

.tes-cuenta-nota i {
  margin-right: 5px;
  color: #b45309;
}

.tes-libro {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 14px;
  overflow: hidden;
  background: var(--tes-papel);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.tes-libro thead th {
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--tes-linea);
  background: #f8fafc;
  color: var(--tes-tinta-3);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.tes-libro thead th:first-child {
  padding-left: 34px;
}

.tes-libro tbody th,
.tes-libro tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid #eef1f4;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.tes-libro tbody tr:last-child > * {
  border-bottom: 0;
}

.tes-libro .num {
  text-align: right;
  white-space: nowrap;
}

.tes-libro thead .num {
  text-align: right;
}

.tes-libro-fuente {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.tes-libro thead .tes-libro-fuente {
  text-align: right;
}

.tes-libro-cantidad {
  width: 1%;
}

.tes-libro .tes-libro-cambio-col {
  width: 78px;
  padding-left: 4px;
}

/* Que es: la flecha, el periodo y, debajo, la fecha y las marcas. Los
   renglones que no se despliegan dejan el hueco de la flecha para alinear. */
.tes-libro-abrir {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tes-libro-abrir > i {
  flex: none;
  width: 14px;
  color: #98a2b3;
  font-size: 0.68rem;
  text-align: center;
  transition: transform 0.18s var(--tes-curva), color 0.18s ease;
}

.tes-libro-abrir[aria-expanded="true"] > i {
  transform: rotate(90deg);
  color: var(--tes-marca-2);
}

.tes-libro-abrir:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 4px;
  border-radius: 6px;
}

.tes-libro-fijo {
  display: block;
  padding-left: 22px;
}

.tes-libro-que {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.22;
  text-align: left;
}

.tes-libro-periodo {
  color: var(--tes-tinta);
  font-weight: 700;
}

.tes-libro-que small {
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
}

.tes-libro-punto {
  color: #c3cad3;
}

/* Todo el renglon abre y cierra. */
.tes-libro tr[data-tes-accion] {
  cursor: pointer;
}

.tes-libro-mov {
  transition: background-color 0.15s ease;
}

.tes-libro-mov:hover {
  background: rgba(240, 249, 255, 0.7);
}

/* El monto: pesos a la vista, centavos tenues; las cifras alineadas. */
.tes-libro-monto {
  color: var(--tes-tinta);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.tes-centavos {
  color: var(--tes-tinta-3);
  font-size: 0.9em;
  font-weight: 400;
}

/* El cambio contra el anterior: "igual" tenue; lo que sube, en ambar. */
.tes-cambio {
  display: inline-block;
  min-width: 50px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.tes-cambio.is-igual {
  color: #98a2b3;
  font-weight: 500;
}

.tes-cambio.is-nada {
  color: #b3bac4;
}

.tes-cambio.is-periodos {
  background: var(--tes-activo);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
  color: var(--tes-marca-tinta);
}

/* Lo que sube o baja contra el pago de antes es un dato, no una alerta: la
   luz y el agua cambian mucho de un periodo a otro (la regla del monto esta
   apagada, ver REVISAR_CAMBIO_DE_MONTO). Los dos, en gris. */
.tes-cambio.is-sube,
.tes-cambio.is-baja {
  background: var(--tes-gris-suave);
  color: var(--tes-tinta-2);
}

/* El cambio debajo del monto: solo en el telefono, sin la columna "Cambio". */
.tes-libro-cambio-movil {
  display: none;
}

/* La de ahora: la raya y el fondo de su color, y su monto en grande. */
.tes-libro-ahora > * {
  padding-top: 9px;
  padding-bottom: 9px;
}

.tes-libro-ahora .tes-libro-periodo {
  font-weight: 800;
}

.tes-libro-ahora .tes-libro-monto strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tes-libro-ahora .tes-centavos {
  font-weight: 600;
}

.tes-libro-ahora.tes-libro--verde,
.tes-libro-ahora.tes-libro--verde + .tes-libro-detalle > td {
  background: var(--tes-verde-suave);
  box-shadow: inset 3px 0 0 var(--tes-verde-punto);
}

.tes-libro-ahora.tes-libro--ambar,
.tes-libro-ahora.tes-libro--ambar + .tes-libro-detalle > td {
  background: var(--tes-ambar-suave);
  box-shadow: inset 3px 0 0 var(--tes-ambar-punto);
}

.tes-libro-ahora.tes-libro--rojo,
.tes-libro-ahora.tes-libro--rojo + .tes-libro-detalle > td {
  background: var(--tes-rojo-suave);
  box-shadow: inset 3px 0 0 var(--tes-rojo);
}

.tes-libro-ahora.tes-libro--gris,
.tes-libro-ahora.tes-libro--gris + .tes-libro-detalle > td {
  background: #f8fafc;
  box-shadow: inset 3px 0 0 #94a3b8;
}

/* Las solicitudes con las que se puede confundir. */
.tes-libro-otra.tes-libro--rojo { background: #fffafa; }
.tes-libro-otra.tes-libro--rojo .tes-libro-periodo { color: var(--tes-rojo-fuerte); }
.tes-libro-otra.tes-libro--ambar { background: #fffdf6; }
.tes-libro-otra.tes-libro--ambar .tes-libro-periodo { color: var(--tes-ambar); }

/* La division entre la de ahora y lo que ya dice el Excel. Con max-width 0
   la hoja con nombre largo no ensancha la tabla: se corta con "…". */
.tes-libro .tes-libro-seccion > td {
  max-width: 0;
  padding: 14px 12px 6px 34px;
  background: var(--tes-papel);
  cursor: default;
}

.tes-libro-seccion-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.tes-libro-seccion-titulo {
  flex: none;
  color: var(--tes-marca-tinta);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tes-cuenta-fuente {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
}

/* Un movimiento marcado: la raya de su color a la izquierda; el que choca
   con esta solicitud, ademas, con fondo. Sus marcas en su color; "la vez
   pasada" se queda gris. */
.tes-libro-mov.tes-libro--rojo { box-shadow: inset 3px 0 0 var(--tes-rojo); }
.tes-libro-mov.tes-libro--ambar { box-shadow: inset 3px 0 0 var(--tes-ambar-punto); }

.tes-libro .tes-libro-mov.is-choca {
  background: #fff7f6;
  box-shadow: inset 3px 0 0 var(--tes-rojo);
}

.tes-libro-marca {
  font-weight: 700;
}

.tes-libro-mov.is-choca .tes-libro-marca,
.tes-libro-mov.tes-libro--rojo .tes-libro-marca {
  color: var(--tes-rojo-fuerte);
}

.tes-libro-mov.tes-libro--ambar:not(.is-choca) .tes-libro-marca {
  color: var(--tes-ambar);
}

/* La celda del Excel de donde sale el dato: una etiqueta discreta. */
.tes-libro-celda {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid var(--tes-linea);
  border-radius: 6px;
  background: var(--tes-papel);
  color: var(--tes-tinta-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.5;
}

.tes-libro-celda.is-anotada {
  border-color: rgba(20, 184, 166, 0.4);
  background: var(--tes-activo);
  color: var(--tes-marca-tinta);
  font-weight: 800;
}

.tes-libro-nueva {
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
  font-style: italic;
}

/* Un pago anterior aprobado en Lark (no esta en el Excel): en la columna de
   donde sale, "Lark" en el azul de Aprobaciones, como la celda del Excel. */
.tes-libro-lark {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 6px;
  background: #eff6ff;
  color: var(--tes-marca);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.5;
}

/* Tiene comprobantes (de Lark): se ven al desplegarlo. */
.tes-libro-clip {
  margin-right: 6px;
  color: var(--tes-tinta-3);
  font-size: 0.8rem;
}

/* Los comprobantes de un pago anterior, dentro de su renglon desplegado. */
.tes-mov-anteriores {
  display: grid;
  gap: 6px;
}

.tes-mov-buscando {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tes-libro-dudosa {
  margin-left: 4px;
  color: var(--tes-ambar-punto);
  font-size: 0.78rem;
  vertical-align: -1px;
}

/* Un movimiento con comentario en su celda: la esquina amarilla de Excel. */
.tes-libro-con-nota {
  margin-right: 6px;
  color: #d99a00;
  font-size: 0.8rem;
  vertical-align: -1px;
}

/* La nota de la celda de la solicitud de ahora: a la vista, en un renglon.
   Con max-width 0 la nota larga no ensancha la tabla: se corta con "…". */
.tes-libro-nota > td {
  max-width: 0;
  padding: 6px 12px 6px 34px;
  background: #fffbe6;
}

.tes-libro-nota-texto {
  display: flex;
  gap: 7px;
  margin: 0;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.tes-libro-nota-texto i {
  flex: none;
  color: #b45309;
}

.tes-libro-nota-texto span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tes-libro-nota-texto strong {
  color: #92400e;
}

/* La otra con la que se puede confundir, desplegada: esta y la otra lado a
   lado. Lo que coincide dice "igual" (tenue); lo distinto resalta en ambar,
   para ver de un vistazo en que se diferencian (en una duplicada, casi solo
   el folio). */
.tes-libro-otra.is-abierto > * {
  border-bottom-color: transparent;
}

.tes-libro-otra.tes-libro--rojo + .tes-libro-detalle > td { box-shadow: inset 3px 0 0 var(--tes-rojo); background: #fffafa; }
.tes-libro-otra.tes-libro--ambar + .tes-libro-detalle > td { box-shadow: inset 3px 0 0 var(--tes-ambar-punto); background: #fffdf6; }

.tes-compara {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--tes-linea);
  border-radius: 10px;
  background: var(--tes-papel);
  overflow: hidden;
  font-size: 0.8rem;
}

.tes-compara th,
.tes-compara td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f6;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tes-compara tbody tr:last-child > * {
  border-bottom: 0;
}

.tes-compara thead th {
  background: #f8fafc;
  color: var(--tes-tinta-3);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tes-compara thead th:first-child,
.tes-compara tbody th {
  width: 26%;
}

.tes-compara tbody th {
  color: var(--tes-tinta-3);
  font-weight: 700;
}

.tes-compara tbody td {
  color: var(--tes-tinta);
  font-weight: 700;
}

.tes-compara tr.is-distinto > * {
  background: #fffbeb;
}

.tes-compara tr.is-distinto td:last-child {
  color: #b45309;
  font-weight: 800;
}

.tes-compara-igual {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tes-tinta-3);
  font-weight: 600;
}

.tes-compara-igual i {
  color: var(--tes-marca-2);
}

.tes-compara-nada {
  color: var(--tes-tinta-3);
  font-weight: 600;
}

.tes-compara-archivos {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tes-compara-archivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 9px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 8px;
  background: var(--tes-papel);
  color: var(--tes-tinta);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tes-compara-archivo span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tes-compara-archivo i {
  flex: none;
  color: #dc2626;
}

.tes-compara-archivo:hover {
  border-color: var(--tes-activo-borde);
  background: var(--tes-activo);
}

.tes-compara-abrir {
  justify-self: start;
  height: 32px;
  border: 1px solid rgba(37, 99, 235, 0.38);
  background: var(--tes-papel);
  color: var(--tes-marca-tinta);
  font-size: 0.8rem;
}

.tes-compara-abrir:hover {
  border-color: var(--tes-activo-borde);
  background: var(--tes-activo);
}

/* La otra recien abierta desde su pareja: su renglon se ilumina un momento en
   el verde azulado de la marca, para que se note que ya es otra. */
.tes-fila.is-senalada {
  animation: tes-senala 2.6s var(--tes-curva);
}

@keyframes tes-senala {
  0%, 55% { background: #dbeafe; box-shadow: inset 0 0 0 2px var(--tes-marca-2); }
}

.tes-libro-vacio td {
  padding: 12px 12px 12px 34px;
  color: var(--tes-tinta-3);
  font-size: 0.84rem;
}

/* Lo que dice un renglon de cerca, debajo de el y con su mismo fondo: se
   leen como una sola pieza. */
.tes-libro-mov.is-abierto {
  background: #f7fbfd;
}

.tes-libro-mov.is-abierto > *,
.tes-libro-ahora.is-abierto > * {
  border-bottom-color: transparent;
}

.tes-libro-detalle > td {
  padding: 2px 14px 14px 34px;
  background: #f7fbfd;
  cursor: default;
}

.tes-libro-mov.tes-libro--rojo + .tes-libro-detalle > td { box-shadow: inset 3px 0 0 var(--tes-rojo); }
.tes-libro-mov.tes-libro--ambar + .tes-libro-detalle > td { box-shadow: inset 3px 0 0 var(--tes-ambar-punto); }
.tes-libro-mov.is-choca + .tes-libro-detalle > td { box-shadow: inset 3px 0 0 var(--tes-rojo); }

.tes-mov {
  display: grid;
  gap: 10px;
}

.tes-mov-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--tes-marca-tinta);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tes-mov-etiqueta i {
  color: var(--tes-marca-2);
  font-size: 0.82rem;
}

/* El titulo chico y, junto, de donde sale (la hoja con sus mayusculas). */
.tes-mov-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  min-width: 0;
}

.tes-mov-donde {
  min-width: 0;
  color: var(--tes-tinta-3);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

/* Si la solicitud ocupa varias celdas, cada texto lleva el nombre de la suya. */
.tes-mov-celda-ref {
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--tes-activo);
  color: var(--tes-marca);
  font-weight: 800;
}

/* Como esta escrito en el Excel, tal cual. */
.tes-mov-excel {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.tes-mov-celda {
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 10px;
  background: var(--tes-papel);
  color: var(--tes-tinta);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tes-mov-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
}

.tes-mov-datos div {
  min-width: 0;
}

.tes-mov-datos .tes-mov-ancho {
  grid-column: 1 / -1;
}

/* Lo de Lark: tantas columnas como quepan (cuatro en 1366); el concepto y
   la razon social, de dos. */
.tes-mov-datos--lark {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  grid-auto-flow: dense;
}

.tes-mov-datos--lark .tes-mov-ancho {
  grid-column: span 2;
}

.tes-mov-datos dt {
  color: var(--tes-tinta-3);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tes-mov-datos dd {
  margin: 2px 0 0;
  color: var(--tes-tinta);
  font-size: 0.84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tes-mov-chico {
  margin: 0;
  color: var(--tes-tinta-2);
  font-size: 0.8rem;
}

.tes-mov-chico strong {
  color: var(--tes-tinta);
  font-variant-numeric: tabular-nums;
}

/* La de ahora todavia no esta en el Excel: donde va a ir. */
.tes-mov-pendiente {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 11px;
  border: 1px dashed rgba(59, 130, 246, 0.45);
  border-radius: 10px;
  background: rgba(240, 253, 250, 0.6);
  color: var(--tes-tinta-2);
  font-size: 0.82rem;
  line-height: 1.4;
}

.tes-mov-pendiente i {
  color: var(--tes-marca-2);
}

/* Una solicitud con varios renglones en Lark: cada uno con su monto. */
.tes-mov-renglones {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 10px;
  background: var(--tes-papel);
}

.tes-mov-renglones li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 11px;
  border-bottom: 1px solid #eef1f4;
  font-size: 0.82rem;
}

.tes-mov-renglones li:last-child {
  border-bottom: 0;
}

.tes-mov-renglon-monto {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tes-mov-aviso,
.tes-mov-comentario {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.tes-mov-aviso--rojo { background: var(--tes-rojo-suave); box-shadow: inset 0 0 0 1px var(--tes-rojo-borde); }
.tes-mov-aviso--rojo i,
.tes-mov-aviso--rojo strong { color: var(--tes-rojo-fuerte); }
.tes-mov-aviso--ambar,
.tes-mov-aviso--info { background: var(--tes-ambar-suave); box-shadow: inset 0 0 0 1px var(--tes-ambar-borde); }
.tes-mov-aviso--ambar i,
.tes-mov-aviso--info i { color: var(--tes-ambar-punto); }
.tes-mov-aviso--ambar strong,
.tes-mov-aviso--info strong { color: var(--tes-ambar); }

/* El comentario de la celda, como la nota amarilla de Excel. */
.tes-mov-comentario {
  border-left: 3px solid #f5b400;
  border-radius: 0 8px 8px 0;
  background: #fffbe6;
  white-space: pre-line;
}

.tes-mov-comentario i {
  color: #b45309;
}

.tes-cuenta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Sin comprobante: se dice en la cabeza, donde iria. */
.tes-sin-comprobante {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px dashed #fdba74;
  border-radius: 11px;
  background: #fff7ed;
  color: var(--tes-ambar);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

/* El comprobante: se abre en el visor de Flowmo (el de Expedientes). */
.tes-comprobantes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.tes-comprobante {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 11px 4px 6px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 11px;
  background: var(--tes-papel);
  color: var(--tes-tinta);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* El icono del archivo en su ficha, como los adjuntos de Flowmo. */
.tes-comprobante i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 7px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.86rem;
}

.tes-comprobante span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tes-comprobante:hover {
  border-color: var(--tes-activo-borde);
  background: var(--tes-activo);
  color: var(--tes-marca-tinta);
}

.tes-comprobante:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 2px;
}

/* ----------------------- el visor propio del comprobante -------------------- */
/* Donde el navegador no pinta PDF dentro de la pagina (el telefono, o Chrome
   puesto a descargarlos): la misma barra blanca del visor de Expedientes y
   las hojas sobre gris oscuro, como el visor de PDF de Chrome. */
.tes-dialogo--visor {
  width: min(980px, calc(100vw - 32px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  overflow: hidden;
}

/* La columna mide lo que la ventana, no lo que el nombre del archivo: con uno
   largo ("recibo-sacmex-siapa-010001-sep.pdf") el visor se ensanchaba fuera
   de la pantalla y la X de cerrar quedaba fuera de vista. */
.tes-visor {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.tes-visor-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.tes-visor-cabeza strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}

.tes-visor-paginas {
  color: var(--tes-tinta-3);
  font-size: 0.82rem;
  white-space: nowrap;
}

.tes-visor-hoja {
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #525659;
  scrollbar-width: thin;
  scrollbar-color: #8a8d91 transparent;
}

.tes-visor-pagina,
.tes-visor-imagen {
  flex: none;
  max-width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.tes-visor-espera {
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 24px;
  color: #e8eaed;
  text-align: center;
}

.tes-visor-espera p {
  margin: 0;
}

.tes-visor-espera > i {
  font-size: 2rem;
}

/* El panel de cuando el documento no se pudo abrir: que paso y reintentar. */
.tes-dialogo--fallo {
  width: min(470px, calc(100vw - 32px));
}

.tes-fallo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  padding: 20px 22px 18px;
}

.tes-fallo-icono {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fef3f2;
  color: #d92d20;
  font-size: 1.25rem;
}

.tes-fallo-texto {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tes-fallo-texto strong {
  font-size: 1rem;
}

.tes-fallo-nombre {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tes-tinta-2);
  font-size: 0.86rem;
}

.tes-fallo-texto p {
  margin: 6px 0 0;
  color: var(--tes-tinta-2);
  font-size: 0.88rem;
}

.tes-fallo-botones {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 520px) {
  .tes-fallo-botones .tes-boton--verde {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* "Descargar" es un enlace (lo baja el navegador con su nombre), vestido de boton. */
.tes-visor-cabeza a.tes-boton {
  text-decoration: none;
}

/* En el telefono, a pantalla completa. Con dos clases: la regla general de
   .tes-dialogo (margenes y esquinas) va mas abajo en este archivo. */
@media (max-width: 720px) {
  .tes-dialogo.tes-dialogo--visor {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .tes-visor-cabeza {
    padding: 8px 8px 8px 14px;
    gap: 8px;
  }

  .tes-visor-cabeza .tes-boton span {
    display: none;
  }

  .tes-visor-hoja {
    padding: 10px;
    gap: 10px;
  }
}

.tes-tenue {
  margin: 0;
  color: var(--tes-tinta-3);
  font-size: 0.84rem;
}

/* Rechazar y Aprobar, siempre a la vista; y cual sigue despues. */
.tes-detalle-pie {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 22px;
  border-top: 1px solid var(--tes-linea);
  background: #f8fafc;
}

.tes-siguiente {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  color: var(--tes-tinta-3);
}

.tes-siguiente strong {
  color: var(--tes-tinta-2);
  font-weight: 600;
}

/* ------------------------- vacio, errores y avisos ------------------------ */
.tes-vacio {
  margin-top: 22px;
  text-align: center;
  padding: 56px 20px;
  border-radius: var(--tes-radio);
  border: 1px dashed var(--tes-linea-2);
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
}

.tes-vacio i {
  font-size: 2.2rem;
  color: var(--tes-verde-punto);
}

.tes-vacio h4 {
  margin: 10px 0 4px;
  font-size: 1.1rem;
  color: var(--tes-tinta);
}

.tes-vacio p {
  margin: 0;
}

.tes-error {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--tes-radio);
  border: 1px solid var(--tes-rojo-borde);
  background: var(--tes-rojo-suave);
  color: var(--tes-rojo-fuerte);
}

.tes-error i {
  font-size: 1.4rem;
}

.tes-error div {
  flex: 1;
}

.tes-error p {
  margin: 2px 0 0;
  color: var(--tes-tinta-2);
  font-size: 0.88rem;
}

.tes-error-texto {
  color: var(--tes-rojo-fuerte);
  font-size: 0.86rem;
}

.tes-cargando {
  margin: 0;
  color: var(--tes-tinta-3);
  font-size: 0.9rem;
}

/* El aviso de "aprobada" sale abajo a la IZQUIERDA, sobre la lista: abajo al
   centro tapaba Rechazar y Aprobar justo cuando se va a apretar la
   siguiente. Su orilla izquierda es la de la lista (la misma cuenta que la
   barra de arriba). */
.tes-aviso {
  position: absolute;
  left: max(24px, calc((100% - var(--tes-ancho)) / 2));
  bottom: 30px;
  z-index: 20;
  width: fit-content;
  max-width: 360px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--tes-tinta);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--tes-sombra-alta);
  animation: tes-aviso-sube 0.45s var(--tes-curva) both;
}

.tes-aviso--ok i { color: #5eead4; }
.tes-aviso--error i { color: #fda29b; }

@keyframes tes-aviso-sube {
  from { opacity: 0; transform: translateY(12px); }
}

.tes-giro {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--tes-marca);
  animation: tes-giro 0.7s linear infinite;
  vertical-align: -3px;
}

@keyframes tes-giro {
  to { transform: rotate(360deg); }
}

/* ---------------------- aprobada o rechazada: su sello --------------------- */
.tes-fila.is-aprobada,
.tes-fila.is-rechazada {
  opacity: 1;
}

.tes-fila.is-aprobada {
  background: var(--tes-verde-suave);
}

.tes-fila.is-rechazada {
  background: var(--tes-rojo-suave);
}

.tes-sello-accion {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.18);
  pointer-events: none;
  animation: tes-sello-pop 0.34s var(--tes-curva) both;
}

.tes-sello-accion svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tes-sello-accion circle,
.tes-sello-accion path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: tes-traza 0.4s var(--tes-curva) 0.06s forwards;
}

.tes-sello-accion path {
  animation-duration: 0.28s;
  animation-delay: 0.26s;
}

.tes-sello-accion path + path {
  animation-delay: 0.34s;
}

.tes-sello-accion--verde svg { stroke: var(--tes-verde-punto); }
.tes-sello-accion--rojo svg { stroke: var(--tes-rojo); }

@keyframes tes-sello-pop {
  from { opacity: 0; transform: scale(0.6); }
}

@keyframes tes-traza {
  to { stroke-dashoffset: 0; }
}

/* -------------------------------- dialogos -------------------------------- */
.tes-dialogo {
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: var(--tes-papel);
  color: var(--tes-tinta);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.26);
  max-width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  font-variant-numeric: tabular-nums;
}

.tes-dialogo[open] {
  animation: tes-dialogo-entra 0.34s var(--tes-curva) both;
}

.tes-dialogo::backdrop {
  background: rgba(15, 23, 42, 0.38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: tes-fundido 0.24s ease both;
}

@keyframes tes-dialogo-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}

@keyframes tes-fundido {
  from { opacity: 0; }
}

.tes-dialogo--confirmar {
  width: min(460px, calc(100vw - 32px));
}

.tes-dialogo--tarjeta {
  width: min(900px, calc(100vw - 32px));
}

.tes-dialogo-cuerpo {
  padding: 22px 24px;
}

.tes-dialogo-cargando {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
}

.tes-dialogo-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tes-dialogo-cabeza h4,
.tes-confirmar h4 {
  margin: 0;
  color: var(--tes-tinta);
  font-size: 1.16rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.tes-dialogo-cabeza p,
.tes-confirmar p {
  margin: 6px 0 0;
  color: var(--tes-tinta-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.tes-confirmar-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* Las leyendas de Daniel en la ventana de Aprobar: pastillas que escriben el
   comentario; la elegida, marcada. */
.tes-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.tes-pastilla {
  padding: 5px 12px;
  border: 1px solid var(--tes-linea);
  border-radius: 999px;
  background: var(--tes-papel, #fff);
  color: var(--tes-tinta-2);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tes-pastilla:hover {
  border-color: var(--tes-marca);
  color: var(--tes-marca);
}

.tes-pastilla[aria-pressed="true"] {
  border-color: var(--tes-marca);
  background: var(--tes-activo);
  color: var(--tes-marca);
}

.tes-pastilla:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 2px;
}

.tes-pastillas + .tes-comentario {
  margin-top: 10px;
}

.tes-comentario {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--tes-tinta-2);
}

.tes-comentario textarea {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--tes-borde-tarjeta);
  background: #fbfdff;
  resize: vertical;
  color: var(--tes-tinta);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tes-comentario textarea:focus {
  outline: none;
  border-color: var(--tes-marca-2);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.16);
}

.tes-comentario small {
  font-weight: 400;
  color: var(--tes-tinta-3);
}

.tes-comentario textarea::placeholder {
  color: var(--tes-tinta-3);
}

/* Los avisos por Lark: el de la manana a la izquierda, el simulacro a la
   derecha; cada uno con su tarjeta tal cual llega. */
.tes-avisos-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.tes-avisos-bloque {
  display: grid;
  align-content: start;
  gap: 10px;
}

.tes-avisos-bloque h5 {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tes-tinta-2);
}

.tes-avisos-bloque > .tes-boton {
  justify-self: start;
}

.tes-tarjeta-vista {
  padding: 14px;
  border-radius: 12px;
  background: #eef1f5;
}

.tes-campo {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tes-tinta-2);
}

.tes-campo select {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--tes-linea-2);
  background: var(--tes-papel);
  color: var(--tes-tinta);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}

.tes-campo select:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 1px;
}

.tes-simulacro-detalle {
  margin: 0;
  min-height: 2.6em;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--tes-tinta-2);
}

.tes-simulacro-resultado {
  display: grid;
  gap: 10px;
}

.tes-simulacro-resultado:empty {
  display: none;
}

.tes-simulacro-salto {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 0.88rem;
  color: var(--tes-verde);
}

.tes-envios-ultimos {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--tes-linea);
  font-size: 0.86rem;
}

.tes-envios-ultimos summary {
  cursor: pointer;
  color: var(--tes-tinta-2);
  font-weight: 600;
}

.tes-envios-ultimos .tes-envios {
  margin-top: 10px;
}

.tes-destinos,
.tes-envios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
}

.tes-destinos li,
.tes-envios li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tes-envios li i { color: var(--tes-verde); }
.tes-envios li.is-mal { color: var(--tes-rojo-fuerte); }
.tes-envios li.is-mal i { color: var(--tes-rojo); }

/* La prueba de que llego: la hora y el id que da Lark al entregarlo. */
.tes-envio-prueba {
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* Cuando Lark no deja escribirle a alguien: que hacer, paso por paso, y
   volver a intentar sin cerrar la ventana. */
.tes-ayuda-lark {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #f5d38a;
  border-radius: 12px;
  background: #fffaeb;
  color: var(--tes-tinta);
  font-size: 0.86rem;
}

.tes-ayuda-lark p,
.tes-ayuda-lark ol {
  margin: 0;
}

.tes-ayuda-lark ol {
  display: grid;
  gap: 4px;
  padding-left: 20px;
}

.tes-ayuda-lark .tes-boton {
  justify-self: start;
}

/* El aviso de Lark, imitado: mismos bloques que el JSON que se manda. */
.lk-marco {
  display: grid;
  gap: 8px;
}

.lk-remitente {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.lk-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--tes-marca);
  color: #fff;
  font-weight: 800;
}

.lk-hora {
  color: var(--tes-tinta-3);
}

.lk-tarjeta {
  max-width: 480px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dee0e3;
  box-shadow: 0 2px 6px rgba(31, 35, 41, 0.08);
  font-size: 0.88rem;
  line-height: 1.6;
  color: #1f2329;
}

.lk-cabeza {
  padding: 11px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.lk-cabeza--rojo { background: #f54a45; }
.lk-cabeza--ambar { background: #ff8800; }
.lk-cabeza--verde { background: #34c724; }
.lk-cabeza--azul { background: #3370ff; }

.lk-cuerpo {
  padding: 12px 14px 12px;
  display: grid;
  gap: 10px;
}

.lk-cuerpo hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #dee0e3;
  margin: 2px 0;
}

.lk-nota {
  font-size: 0.76rem;
  color: #8f959e;
}

.lk-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lk-boton {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid #d0d3d6;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2329;
  background: #fff;
}

.lk-boton--primary {
  background: #3370ff;
  border-color: #3370ff;
  color: #fff;
}

/* ===========================================================================
   Entradas (Bamboo): cada pieza con data-a sube escalonada por su --i cuando
   su contenedor lleva .is-entrando.
   =========================================================================== */
.is-entrando [data-a] {
  animation: tes-sube 0.46s var(--tes-curva) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}

@keyframes tes-sube {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
}

/* Cambia cuantas quedan: el numero da un saltito. */
.tes-resumen-numero.is-entrando {
  animation: tes-salto 0.5s var(--tes-curva);
}

@keyframes tes-salto {
  0% { transform: translateY(-8px) scale(1.2); color: var(--tes-verde); }
}

/* Al abrir otra a la derecha: sus partes suben una tras otra y los
   movimientos del estado de cuenta entran de arriba abajo. */
.tes-detalle-cuerpo.is-entrando [data-b] {
  animation: tes-sube 0.34s var(--tes-curva) both;
  animation-delay: calc(var(--j, 0) * 45ms);
}

.is-entrando .tes-libro tbody tr {
  animation: tes-sube 0.3s var(--tes-curva) both;
  animation-delay: 150ms;
}

/* La vista previa del aviso: la tarjeta entra por partes. */
.tes-tarjeta-vista.is-entrando .lk-cabeza {
  animation: tes-sube 0.4s var(--tes-curva) both;
}

.tes-tarjeta-vista.is-entrando .lk-cuerpo > * {
  animation: tes-sube 0.36s var(--tes-curva) both;
  animation-delay: calc(var(--i, 0) * 50ms + 60ms);
}

/* --------------------------------- la lista -------------------------------- */
.tes-dos {
  position: relative;
}

/* Nada por aprobar en lo elegido: una frase tranquila, en la lista y a la
   derecha, en el tono claro de la marca. */

.tes-detalle-vacio {
  justify-content: center;
}

.tes-vacio-detalle {
  margin: 0 auto;
  max-width: 340px;
  text-align: center;
  color: var(--tes-tinta-2);
  font-size: 0.9rem;
}

.tes-vacio-detalle i {
  width: 64px;
  height: 64px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: var(--tes-activo);
  color: var(--tes-marca-2);
  font-size: 1.9rem;
}

.tes-vacio-detalle p {
  margin: 10px 0 0;
}

.tes-vacio-detalle strong {
  color: var(--tes-tinta);
  font-weight: 900;
}

/* El lugar junto al servicio: en la cabeza de la solicitud y de la cuenta. */
.tes-lugar {
  color: var(--tes-tinta-3);
  font-weight: 500;
}

.tes-detalle-lugar {
  color: var(--tes-tinta-2);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* El esqueleto de los dos menus (lugar y servicio) y del resumen. */
.tes-cabecera .tes-sk-resumen {
  flex: 1 1 auto;
  padding: 0 2px;
}

.tes-sk--orden {
  width: 180px;
  height: 38px;
  border-radius: 999px;
}

/* Hasta 1279 px: la lista sin la hora (el dia ya las agrupa y la hora esta
   en la cabeza del detalle). */
@container tesoreria (max-width: 1279px) {
  .tes-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 14px;
  }

  .tes-fila .tes-hora {
    display: none;
  }
}

/* Hasta 1099 px: la lista un poco mas angosta, y vuelve a tener su hora. */
@container tesoreria (max-width: 1099px) {
  .tes-dos {
    grid-template-columns: minmax(270px, 350px) minmax(0, 1fr);
    gap: 12px;
  }

  .tes-fila {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding-inline: 14px;
  }

  .tes-fila .tes-hora {
    display: block;
  }

  .tes-detalle-cuerpo {
    padding: 16px 18px;
  }
}

/* --------------------------------- telefono -------------------------------- */
/* No caben las dos columnas: la lista, y al tocar una, su detalle a lo ancho
   con "Volver a la lista". */
@container tesoreria (max-width: 720px) {
  .tes-contenido {
    padding: 0 14px 40px;
  }

  .tes-contenido--dos {
    padding: 12px 12px 12px;
  }

  .tes-dos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .tes-dos .tes-detalle-lado,
  .tes-dos[data-movil-detalle="true"] .tes-lista-lado {
    display: none;
  }

  .tes-dos[data-movil-detalle="true"] {
    padding-top: 12px;
  }

  .tes-dos[data-movil-detalle="true"] .tes-detalle-lado {
    display: flex;
  }

  .tes-volver {
    display: inline-flex;
  }

  .tes-detalle-cuerpo {
    padding: 14px;
    gap: 16px;
  }

  .tes-detalle-cabeza h4 {
    font-size: 1.15rem;
  }

  /* El estado de cuenta a lo ancho del telefono: sin la columna del cambio
     (va debajo del monto) y con menos aire. */
  .tes-libro .tes-libro-cambio-col {
    display: none;
  }

  .tes-libro .tes-libro-cambio-movil {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  /* Lo anotado en el renglon baja a su propio renglon: junto al titulo y a
     de donde sale no cabe. */
  .tes-cuenta-cabeza {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .tes-cuenta-nota {
    order: 3;
    flex-basis: 100%;
  }

  /* Sin encabezado de columnas (los montos se explican solos) y con menos
     aire, para que quepa en 270 px; la celda doble ("Q49 R49") puede ir en
     dos renglones. */
  .tes-libro thead {
    display: none;
  }

  .tes-libro tbody th,
  .tes-libro td {
    padding-inline: 6px;
  }

  .tes-libro-abrir {
    gap: 6px;
  }

  .tes-libro-abrir > i {
    width: 12px;
  }

  .tes-libro-fijo {
    padding-left: 18px;
  }

  .tes-libro .tes-libro-seccion > td,
  .tes-libro-nota > td,
  .tes-libro-vacio td {
    padding-left: 24px;
  }

  .tes-libro-seccion-fila {
    flex-wrap: wrap;
    row-gap: 1px;
  }

  .tes-libro-fuente {
    white-space: normal;
  }

  /* Esta y la otra, a lo angosto: menos aire y el boton a lo ancho. */
  .tes-compara th,
  .tes-compara td {
    padding: 5px 6px;
  }

  .tes-compara thead th:first-child,
  .tes-compara tbody th {
    width: 30%;
  }

  .tes-compara-abrir {
    justify-self: stretch;
    white-space: normal;
  }

  .tes-mov-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
  }

  .tes-mov-datos--lark .tes-mov-ancho {
    grid-column: 1 / -1;
  }

  .tes-libro-detalle > td {
    padding-left: 14px;
  }

  .tes-detalle-cabeza .tes-comprobante {
    max-width: 100%;
  }

  .tes-detalle-pie {
    flex-wrap: wrap;
    padding: 12px;
  }

  .tes-siguiente {
    flex-basis: 100%;
  }

  .tes-detalle-pie .tes-boton {
    flex: 1;
    padding: 0 12px;
  }

  /* "Aprobar de todos modos" no cabe junto a Rechazar: basta "Aprobar" (la
     advertencia esta arriba, a la vista). */
  .tes-solo-ancho {
    display: none;
  }

  .tes-sk-detalle,
  .tes-sk--boton-grande {
    display: none;
  }

  .tes-falta-control {
    flex-wrap: wrap;
  }
}

@container tes-escena (max-width: 720px) {
  .tes-barra-superior {
    padding: 12px 14px;
    gap: 10px;
  }

  /* En el telefono: el nombre y sus botones; debajo, cuantas hay y por
     cuanto; y debajo los dos menus (mitad y mitad) con el orden. Con el
     detalle abierto a lo ancho, los menus no hacen falta. */
  .tesoreria-escena .tes-barra-superior > .tes-marca {
    flex: 1;
  }

  .tes-cuantas {
    order: 4;
    flex: 1 1 100%;
    min-height: 0;
    padding-left: 0;
    border-left: 0;
    margin-right: 0;
  }

  .tesoreria-escena:has(.tes-dos[data-movil-detalle="true"]) .tes-herramientas {
    display: none;
  }

  /* El orden, solo con sus flechas: cabe junto a cuantas hay. */
  .tes-orden {
    height: 36px;
    padding: 0 10px;
  }

  .tes-orden > span,
  .tes-orden-cambio {
    display: none;
  }

  .tes-cabeza-icono {
    width: 36px;
    height: 36px;
  }

  .tes-marca h3 {
    font-size: 1.08rem;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .tes-marca p {
    font-size: 0.82rem;
  }

  .tes-sincroniza {
    width: calc(100% - 28px);
  }

  .tes-sincroniza strong {
    font-size: 0.82rem;
  }

  .tes-sincroniza-detalle {
    display: none;
  }

  /* En el telefono los botones del detalle van abajo a lo ancho: el aviso
     sale arriba, sobre el contenido, para no taparlos. */
  .tes-aviso {
    position: relative;
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    justify-self: stretch;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 10px 12px 0;
  }
}

/* El dialogo vive en la capa de arriba, fuera de los contenedores: se acomoda
   por el ancho de la ventana. */
@media (max-width: 760px) {
  .tes-avisos-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .tes-dialogo-cuerpo {
    padding: 18px 16px;
  }
}

/* En el telefono Flowmo deja crecer la pagina entera y el que se desplaza es
   el cuerpo: la barra de arriba se iria con la lista y el aviso de "aprobada"
   quedaria al fondo, fuera de vista. Aqui el panel mide la pantalla y la
   lista se desplaza por dentro, igual que en escritorio. */
@media (max-width: 720px) {
  .applications-workspace.is-tesoreria-open .tesoreria-panel {
    height: 100vh;
    height: 100dvh;
  }
}

/* --------------------------------- tooltip -------------------------------- */
/* Uno solo, como el de Flowmo: tarjeta blanca con orilla verde azulado, su
   sombra y una flechita hacia lo que explica; arriba el titulo en negritas y
   debajo sus datos. Vive en el body (encima de todo) y no estorba al mouse.
   Liso, sin degradados. */
.tes-tip {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  max-width: min(340px, calc(100vw - 20px));
  display: grid;
  gap: 2px;
  padding: 9px 12px 10px;
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.tes-tip[data-lado="abajo"] {
  transform: translateY(-4px) scale(0.98);
}

.tes-tip.is-visible {
  opacity: 1;
  transform: none;
}

.tes-tip-titulo {
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 850;
}

.tes-tip::after {
  content: "";
  position: absolute;
  left: var(--flecha, 50%);
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(59, 130, 246, 0.32);
  border-bottom: 1px solid rgba(59, 130, 246, 0.32);
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
}

.tes-tip[data-lado="abajo"]::after {
  top: -6px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(59, 130, 246, 0.32);
  border-top: 1px solid rgba(59, 130, 246, 0.32);
}

/* ----------------------------- sin movimiento ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tesoreria-panel *,
  .tesoreria-panel *::before,
  .tesoreria-panel *::after,
  .tesoreria-dialogos *,
  .tes-dialogo,
  .tes-dialogo::backdrop {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------- "Ver como": la bandeja de otra cuenta ------------------ */
/* El boton sale solo a quien el servidor deja ver otra cuenta (la de Pruebas
   (Testing)); viendola, la franja azul dice de quien son y lo que cambia algo
   (aprobar, rechazar, avisar, solucionar) no se ensena: solo se ve. */
.tes-vista-boton {
  flex: none;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 10px;
  border-radius: 12px;
  border: 1px solid var(--tes-borde-tarjeta);
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tes-vista-boton img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: contain;
}

.tes-vista-boton:hover {
  color: var(--tes-marca-tinta);
  border-color: var(--tes-activo-borde);
  background: var(--tes-activo);
}

.tes-vista-boton.is-activa {
  border-color: var(--tes-marca);
  background: var(--tes-marca);
  color: #ffffff;
}

.tes-vista-boton.is-activa:hover {
  border-color: var(--tes-marca-oscura);
  background: var(--tes-marca-oscura);
  color: #ffffff;
}

.tes-vista-boton:focus-visible {
  outline: 2px solid var(--tes-marca-2);
  outline-offset: 2px;
}

/* Dentro de la barra, en su propio renglon al final (a lo ancho). */
.tes-barra-superior > .tes-vista-aviso {
  order: 9;
  flex: 1 0 100%;
}

.tes-vista-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.86rem;
  line-height: 1.35;
}

.tes-vista-aviso img {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: contain;
}

.tes-vista-aviso span {
  flex: 1;
  min-width: 0;
}

.tes-vista-aviso em {
  font-style: normal;
  font-weight: 750;
}

.tes-vista-aviso .tes-enlace {
  flex: none;
  font-weight: 750;
}

.tesoreria-escena[data-solo-ver] .tes-detalle-pie .tes-boton,
.tesoreria-escena[data-solo-ver] [data-tes-accion="notificar"],
.tesoreria-escena[data-solo-ver] [data-tes-accion="solucionar-razon"],
.tesoreria-escena[data-solo-ver] [data-tes-accion="deshacer-solucion"],
.tesoreria-escena[data-solo-ver] [data-tes-accion="simular-correccion"],
.tesoreria-escena[data-solo-ver] [data-tes-accion="reiniciar-demo"],
.tesoreria-escena[data-solo-ver] [data-tes-accion="tarjeta"] {
  display: none !important;
}

@container tes-escena (max-width: 720px) {
  .tes-vista-boton {
    padding: 0 10px;
  }

  .tes-vista-aviso {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Viendo otra cuenta ("Ver Testing"): un azul MUY tenue (apenas mas azul que
   el fondo de siempre, poco saturado) con los brillos de Flowmo (turquesa,
   violeta y azul, los de la pantalla de acceso y el asistente) muy suaves,
   para que se note sin cansar la vista. Las tarjetas siguen blancas. */
.tesoreria-panel.is-viendo-otra {
  --tes-fondo: #e8eff9;
  background:
    radial-gradient(760px 440px at 0% 0%, rgba(45, 212, 191, 0.06), transparent 70%),
    radial-gradient(820px 460px at 100% 0%, rgba(139, 92, 246, 0.05), transparent 70%),
    radial-gradient(1100px 620px at 50% 38%, rgba(96, 165, 250, 0.06), transparent 72%),
    var(--tes-fondo);
}

.tesoreria-panel.is-viendo-otra .tes-barra-superior {
  background: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(148, 163, 184, 0.24);
  backdrop-filter: blur(10px);
}

.tesoreria-panel.is-viendo-otra .tes-vista-aviso {
  border-color: rgba(148, 163, 184, 0.3);
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.05), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.04), transparent 42%),
    #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
  color: #3b4a66;
}

/* La lista que abre la campanita de Lark del pie: lo que Lark cerro despues
   del Excel, una por una. Flota junto a la campanita (va en el body, con los
   dialogos); en el telefono, hoja desde abajo. Blanca, lisa, de la casa. */
.tes-lark-panel {
  position: fixed;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 16px;
  background: var(--tes-papel);
  color: var(--tes-tinta);
  box-shadow: var(--tes-sombra-alta);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  transition: opacity 180ms var(--tes-curva, ease), transform 220ms var(--tes-curva, ease);
}

.tes-lark-panel.is-visible {
  opacity: 1;
  transform: none;
}

.tes-lark-panel.is-hoja {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78vh;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.28), 0 -12px 40px rgba(15, 23, 42, 0.16);
  transform: translateY(24px);
}

.tes-lark-panel.is-hoja.is-visible {
  transform: none;
}

.tes-lark-cabeza {
  flex: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 12px 12px 14px;
  border-bottom: 1px solid var(--tes-linea);
}

.tes-lark-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tes-activo);
}

.tes-lark-logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tes-lark-titulo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tes-lark-titulo strong {
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.25;
}

.tes-lark-titulo span {
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
  line-height: 1.35;
}

.tes-lark-cerrar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--tes-tinta-3);
  cursor: pointer;
}

.tes-lark-cerrar:hover {
  background: var(--tes-gris-suave);
  color: var(--tes-tinta);
}

.tes-lark-cerrar:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 1px;
}

.tes-lark-lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.tes-lark-mov {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #edf1f6;
}

.tes-lark-mov:last-child {
  border-bottom: 0;
}

.tes-lark-mov--cargando .tes-sk:first-child {
  border-radius: 999px;
}

.tes-lark-punto {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
  font-size: 0.78rem;
}

.tes-lark-mov--rechazada .tes-lark-punto {
  background: var(--tes-rojo-suave);
  color: var(--tes-rojo-fuerte);
}

.tes-lark-que {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tes-lark-que strong {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tes-lark-que span {
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
  line-height: 1.35;
}

.tes-lark-que .tes-lark-donde {
  color: var(--tes-tinta-2);
  font-weight: 600;
}

.tes-lark-mov--anotada .tes-lark-donde {
  color: var(--tes-marca-tinta);
}

.tes-lark-mov--revisar .tes-lark-donde {
  color: var(--tes-ambar);
}

.tes-lark-monto {
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.tes-lark-mov--rechazada .tes-lark-monto {
  color: var(--tes-tinta-3);
  text-decoration: line-through;
}

.tes-lark-vacio {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 30px 20px;
  color: var(--tes-tinta-2);
  font-size: 0.82rem;
  text-align: center;
}

.tes-lark-vacio .bi {
  color: var(--tes-tinta-3);
  font-size: 1.4rem;
}

.tes-lark-mas {
  flex: none;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--tes-linea);
  background: var(--tes-gris-suave);
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
  line-height: 1.4;
}

/* Quien la cerro en Lark: "Aprobo Daniel Guerrero", con su nombre en negritas. */
.tes-lark-que .tes-lark-quien {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tes-tinta-2);
}

.tes-lark-quien .bi {
  color: var(--tes-tinta-3);
  font-size: 0.8rem;
}

.tes-lark-quien b {
  color: var(--tes-tinta);
  font-weight: 650;
}

/* ---------------------------- "Ver registro" ------------------------------ */
/* Arriba, donde iban los menus del lugar y del servicio (29-09, lo pidio el
   usuario): el boton del registro en el verde azulado de Flowmo, tenue y
   liso; a su lado la campanita de Lark (solo viendo Testing) y el orden de
   la lista, todo a la misma distancia. El unico hueco de la barra queda
   entre esto (lo de la lista) y los botones de la cuenta (Ver Testing, X). */
.tes-registro-boton {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(20, 184, 166, 0.32);
  border-radius: 12px;
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tes-registro-boton .bi {
  font-size: 1rem;
}

.tes-registro-boton:hover {
  border-color: rgba(20, 184, 166, 0.5);
  background: #e3f8f4;
  color: var(--tes-verde-oscuro);
}

.tes-registro-boton:active {
  transform: scale(0.98);
}

.tes-registro-boton:focus-visible {
  outline: 2px solid var(--tes-verde-punto);
  outline-offset: 2px;
}

.tes-sk--registro {
  width: 136px;
  height: 38px;
  border-radius: 12px;
}

/* La campanita de Lark: el logo y la campana en una sola pieza, con cuantas
   van anotadas en su globito. Al darle, la lista de lo que Lark cerro. */
.tes-lark-campana {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 12px;
  background: var(--tes-activo);
  color: var(--tes-marca);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tes-lark-campana:hover,
.tes-lark-campana[aria-expanded="true"] {
  border-color: var(--tes-activo-borde);
  background: #e3edfd;
}

.tes-lark-campana:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 2px;
}

.tes-lark-campana img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
}

.tes-lark-campana .bi {
  font-size: 0.9rem;
  line-height: 1;
}

.tes-lark-campana-cuenta {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--tes-papel);
  border-radius: 999px;
  background: var(--tes-marca);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

/* Texto solo para quien usa un lector de pantalla. */
.tes-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* El registro: el Excel de control como en Excel (letras arriba, numeros a
   la izquierda, fijos al desplazarse), dentro de un cuadro de Flowmo. Lo que
   Flowmo anoto de Lark, en el azul claro de Lark; una celda con nota, con su
   esquinita; la tocada, en la orilla verde. Liso, sin degradados. */
.tes-dialogo--registro {
  width: min(1320px, calc(100vw - 32px));
  max-width: min(1320px, calc(100vw - 32px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  overflow: hidden;
}

.tes-reg {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

.tes-reg-cabeza {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(180px, 300px) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--tes-linea);
}

.tes-reg-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 11px;
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
  font-size: 1.1rem;
}

.tes-reg-titulo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tes-reg-titulo strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.tes-reg-titulo span {
  overflow: hidden;
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tes-reg-buscar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 12px;
  background: var(--tes-papel);
  color: var(--tes-tinta-3);
}

.tes-reg-buscar:focus-within {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.tes-reg-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--tes-tinta);
  font: inherit;
  font-size: 0.86rem;
}

.tes-reg-cerrar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--tes-tinta-3);
  cursor: pointer;
}

.tes-reg-cerrar:hover {
  background: var(--tes-gris-suave);
  color: var(--tes-tinta);
}

.tes-reg-cerrar:focus-visible,
.tes-reg-hoja:focus-visible,
.tes-reg-ir:focus-visible {
  outline: 2px solid var(--tes-verde-punto);
  outline-offset: 2px;
}

.tes-reg-cuerpo {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tes-reg-cuerpo > * {
  flex: none;
}

.tes-reg-cuerpo > .tes-reg-tabla-caja {
  flex: 1 1 auto;
}

.tes-reg-cargando {
  display: grid;
  gap: 14px;
  padding: 22px 20px;
}

/* Las hojas, como las pestanas de abajo de Excel, pero arriba y en pildoras. */
.tes-reg-hojas {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--tes-linea);
  scrollbar-width: thin;
}

.tes-reg-hoja {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tes-linea);
  border-radius: 999px;
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tes-reg-hoja:hover {
  border-color: rgba(20, 184, 166, 0.4);
  color: var(--tes-verde);
}

.tes-reg-hoja.is-activa {
  border-color: rgba(20, 184, 166, 0.45);
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
}

.tes-reg-hoja.is-sin {
  opacity: 0.5;
}

.tes-reg-hoja img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
}

.tes-reg-hoja-n {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tes-gris-suave);
  color: var(--tes-tinta-2);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.tes-reg-hoja.is-activa .tes-reg-hoja-n {
  background: var(--tes-papel);
  color: var(--tes-verde);
}

/* La celda tocada, entera (como la barra de Excel). */
.tes-reg-celda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 42px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--tes-linea);
  background: #f8fafc;
  font-size: 0.84rem;
}

.tes-reg-ref {
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--tes-linea);
  border-radius: 6px;
  background: var(--tes-papel);
  color: var(--tes-tinta-2);
  font-size: 0.74rem;
  font-weight: 800;
}

.tes-reg-celda-texto {
  color: var(--tes-tinta);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tes-reg-celda-ayuda,
.tes-reg-celda-nota,
.tes-reg-celda-lark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.tes-reg-celda-ayuda {
  color: var(--tes-tinta-3);
}

.tes-reg-celda-nota {
  color: var(--tes-ambar);
  overflow-wrap: anywhere;
}

.tes-reg-celda-lark {
  color: var(--tes-marca-tinta);
  font-weight: 600;
}

.tes-reg-celda-lark img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
}

.tes-reg-tabla-caja {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--tes-papel);
}

.tes-reg-tabla {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--tes-tinta);
  font-size: 0.78rem;
}

.tes-reg-tabla th,
.tes-reg-tabla td {
  padding: 5px 9px;
  border-right: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  white-space: nowrap;
}

.tes-reg-tabla td {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tes-reg-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: var(--tes-tinta-3);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.tes-reg-tabla tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 38px;
  background: #f8fafc;
  color: var(--tes-tinta-3);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: right;
}

.tes-reg-tabla thead .tes-reg-esquina {
  left: 0;
  z-index: 3;
}

.tes-reg-tabla td.num {
  text-align: right;
}

.tes-reg-tabla td:hover {
  background: #f8fafc;
}

.tes-reg-tabla td.is-lark {
  background: #eff6ff;
  color: var(--tes-marca-tinta);
  box-shadow: inset 2px 0 0 var(--tes-marca-3);
}

.tes-reg-tabla td.con-nota {
  position: relative;
}

.tes-reg-tabla td.con-nota::after,
.tes-reg-muestra.con-nota::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent var(--tes-ambar-punto) transparent transparent;
}

.tes-reg-tabla td.is-tapada {
  color: var(--tes-tinta-3);
  letter-spacing: 0.1em;
}

.tes-reg-tabla td.is-encontrada {
  background: #fef3c7;
}

.tes-reg-tabla tr.is-destacada th,
.tes-reg-tabla tr.is-destacada td {
  background: var(--tes-verde-suave);
}

.tes-reg-tabla tr.is-destacada th {
  color: var(--tes-verde);
  box-shadow: inset 3px 0 0 var(--tes-verde-punto);
}

.tes-reg-tabla td.is-elegida {
  outline: 2px solid var(--tes-verde-punto);
  outline-offset: -2px;
}

/* Los movimientos de Lark: una tabla normal, con su estado en una pildora. */
.tes-reg-tabla--movimientos {
  width: 100%;
}

.tes-reg-tabla--movimientos thead th {
  text-align: left;
}

.tes-reg-tabla--movimientos td {
  max-width: 280px;
  cursor: default;
}

.tes-reg-tabla--movimientos .num {
  text-align: right;
}

.tes-reg-estado {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
  font-size: 0.7rem;
  font-weight: 800;
}

.tes-reg-mov--rechazada .tes-reg-estado {
  background: var(--tes-rojo-suave);
  color: var(--tes-rojo-fuerte);
}

.tes-reg-ir {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tes-marca-tinta);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tes-reg-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 9px 16px;
  border-top: 1px solid var(--tes-linea);
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
}

.tes-reg-pie span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tes-reg-muestra {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 12px;
  border: 1px solid var(--tes-linea);
  border-radius: 3px;
  background: var(--tes-papel);
}

.tes-reg-muestra.is-lark {
  background: #eff6ff;
  box-shadow: inset 2px 0 0 var(--tes-marca-3);
}

.tes-reg-tapado {
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tes-reg-solo {
  margin-left: auto;
}

.tes-reg-vacio {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 20px;
  color: var(--tes-tinta-2);
  text-align: center;
}

.tes-reg-vacio p {
  margin: 0;
}

.tes-reg-vacio .bi {
  color: var(--tes-tinta-3);
  font-size: 1.5rem;
}

/* En el telefono: a pantalla completa, y el buscador en su propio renglon. */
@media (max-width: 720px) {
  .tes-dialogo.tes-dialogo--registro {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .tes-reg-cabeza {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 8px 10px 14px;
  }

  .tes-reg-icono {
    width: 36px;
    height: 36px;
  }

  .tes-reg-buscar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 42px;
  }

  .tes-reg-cerrar {
    width: 44px;
    height: 44px;
  }

  .tes-reg-hoja {
    height: 36px;
  }

  .tes-reg-solo {
    margin-left: 0;
  }
}

/* Que mes paga la solicitud, como lo leyo la IA de su texto (01-10): una
   linea tranquila con su marca "IA" en el lila de Flowmo (lo que hace la IA). */
.tes-mov-paga {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--tes-tinta-2);
  font-size: 0.8rem;
  line-height: 1.45;
}

.tes-mov-paga strong {
  color: var(--tes-tinta);
}

.tes-ia-marca {
  flex: none;
  padding: 1px 6px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 999px;
  background: #f5f3ff;
  color: #7c3aed;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ------------------------------------------------ Gastos Variables (06-10) */
/* Las pestañas de arriba: Gastos fijos / Gastos variables, en pildora (como
   el orden), la elegida en el azul de Lark; cada una con cuantas hay. */
.tes-tipos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 999px;
  background: var(--tes-papel);
}

.tes-tipo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tes-tinta-2);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tes-tipo:hover {
  background: var(--tes-activo);
  color: var(--tes-marca);
}

.tes-tipo.is-elegido {
  background: var(--tes-marca);
  color: #fff;
}

.tes-tipo:focus-visible {
  outline: 2px solid var(--tes-marca);
  outline-offset: 2px;
}

.tes-tipo-cuenta {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tes-activo);
  color: var(--tes-marca);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}

.tes-tipo.is-elegido .tes-tipo-cuenta {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* El detalle de una de Gastos Variables: sus apartados como el estado de
   cuenta (misma tarjeta), uno debajo del otro. */
.tes-var + .tes-var {
  margin-top: 14px;
}

.tes-var-cuerpo {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 14px;
  background: var(--tes-papel);
}

.tes-var-datos {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tes-var-distinto dd {
  color: var(--tes-rojo-fuerte);
  font-weight: 800;
}

.tes-var-tabla th[scope="row"] {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.tes-var-tabla th[scope="row"] small {
  color: var(--tes-tinta-3);
  font-size: 0.74rem;
  font-weight: 600;
}

.tes-var-proveedor {
  font-weight: 800;
}

.tes-var-cuenta {
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
}

.tes-var-marca {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tes-activo);
  color: var(--tes-marca);
  font-size: 0.68rem;
  font-weight: 800;
}

.tes-var-marca--barata {
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
}

.tes-var-factura {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tes-verde-suave);
  color: var(--tes-verde);
  font-size: 0.66rem;
  font-weight: 800;
}

.tes-var-anteriores {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tes-var-anteriores > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--tes-linea);
}

.tes-var-anteriores > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.tes-var-anteriores .tes-comprobantes {
  grid-column: 1 / -1;
}

.tes-var-anterior-que {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tes-var-anterior-que small {
  color: var(--tes-tinta-3);
  font-size: 0.76rem;
}

/* En el Excel: donde esta (o va) y lo que se pago ahi; su propio renglon,
   marcado. */
.tes-var-excel-llamado {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  color: var(--tes-tinta-2);
  font-size: 0.84rem;
  font-weight: 600;
}

.tes-var-excel-llamado > i {
  color: var(--tes-marca);
}

.tes-var-excel-llamado--esta > i {
  color: var(--tes-verde);
}

.tes-var-excel .tes-var-fecha {
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
  white-space: nowrap;
}

.tes-var-excel tr.tes-var-esta > * {
  background: var(--tes-activo);
}

/* En el telefono las pestañas ocupan su renglon, cada una la mitad. */
@container tes-escena (max-width: 720px) {
  .tes-tipos {
    order: 5;
    flex: 1 1 100%;
  }

  .tes-tipo {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* Si la barra no alcanza (ventanas de hasta ~1500 px de contenido), las
   pestañas dicen solo "Fijos" / "Variables" (el subtitulo dice cual es). */
.tes-tipo-corto {
  display: none;
}

/* Con tres pestañas (07-10, Viaticos) los nombres cortos desde 1700. */
@container tes-escena (max-width: 1700px) {
  .tes-tipo-largo {
    display: none;
  }

  .tes-tipo-corto {
    display: inline;
  }
}

/* Ventanas medianas: la linea del nombre se queda como estaba (cabe entera,
   tambien viendo Testing a 1366) y las pestañas bajan a su propia linea,
   justo debajo, antes de la franja de Testing. En pantallas anchas van junto
   a cuantas hay. (El ::after es el salto de linea de la barra.) */
@container tes-escena (min-width: 721px) and (max-width: 1500px) {
  .tes-barra-superior::after {
    content: "";
    order: 7;
    flex: 0 0 100%;
    height: 0;
  }

  .tes-barra-superior > .tes-tipos {
    order: 8;
    margin-top: -12px;
  }
}

/* ------------------------------------------------------------ Viaticos (07-10)
   El detalle: las tablas por dia y de lo comprobado; el renglon sin
   comprobante, marcado; el estado de cada viaje en una linea de color. */
.tes-via-tabla td.num,
.tes-via-tabla th.num {
  white-space: nowrap;
}

.tes-via-tabla tr.tes-via-sin > * {
  background: var(--tes-rojo-suave);
}

.tes-via-estado {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--tes-tinta-3);
}

.tes-via-estado--rojo { color: var(--tes-rojo-fuerte); }
.tes-via-estado--ambar { color: var(--tes-ambar); }
.tes-via-estado--verde { color: var(--tes-verde); }

/* El seguimiento: un dialogo como el del registro, con una sola lista por
   vendedor (lo atrasado arriba) que se despliega en sus folios. */
.tes-dialogo--seguimiento {
  width: min(1100px, calc(100vw - 32px));
  max-width: min(1100px, calc(100vw - 32px));
}

.tes-seg-cuerpo {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 20px;
}

.tes-seg-aviso {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--tes-activo);
  color: var(--tes-marca);
  font-size: 0.82rem;
  font-weight: 700;
}

.tes-seg-resumen {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tes-tinta);
}

.tes-seg-dato--rojo {
  color: var(--tes-rojo-fuerte);
}

/* 3 Mini KPI cards de Viaticos: sobrias, colores institucionales de FlowMo */
.tes-seg-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 4px;
}

.tes-seg-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--tes-borde-tarjeta);
  background: var(--tes-papel);
}

.tes-seg-kpi-etiqueta {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tes-tinta-3);
}

.tes-seg-kpi-valor {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--tes-tinta);
}

.tes-seg-kpi-nota {
  font-size: 0.74rem;
  color: var(--tes-tinta-3);
}

.tes-seg-kpi--rojo {
  border-color: var(--tes-rojo-borde);
  background: var(--tes-rojo-suave);
}
.tes-seg-kpi--rojo .tes-seg-kpi-etiqueta,
.tes-seg-kpi--rojo .tes-seg-kpi-nota {
  color: var(--tes-rojo-fuerte);
}
.tes-seg-kpi--rojo .tes-seg-kpi-valor {
  color: var(--tes-rojo);
}

.tes-seg-kpi--azul {
  border-color: var(--tes-borde-tarjeta);
  background: var(--tes-gris-suave);
}
.tes-seg-kpi--azul .tes-seg-kpi-valor {
  color: var(--tes-tinta);
}

.tes-seg-kpi--ambar {
  border-color: var(--tes-ambar-borde);
  background: var(--tes-ambar-suave);
}
.tes-seg-kpi--ambar .tes-seg-kpi-etiqueta,
.tes-seg-kpi--ambar .tes-seg-kpi-nota {
  color: var(--tes-ambar);
}
.tes-seg-kpi--ambar .tes-seg-kpi-valor {
  color: var(--tes-ambar);
}

/* Herramientas de seguimiento: Buscador instantaneo y regla */
.tes-seg-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 2px;
}

.tes-seg-buscador {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  max-width: 460px;
}

.tes-seg-buscador i {
  position: absolute;
  left: 12px;
  color: var(--tes-tinta-3);
  font-size: 0.85rem;
  pointer-events: none;
}

.tes-seg-buscador input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border-radius: 10px;
  border: 1px solid var(--tes-borde-tarjeta);
  background: var(--tes-papel);
  color: var(--tes-tinta);
  font: inherit;
  font-size: 0.83rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tes-seg-buscador input:focus {
  outline: none;
  border-color: var(--tes-marca);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.tes-seg-regla {
  margin: 0;
  font-size: 0.78rem;
  color: var(--tes-tinta-3);
}

.tes-seg-lista {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.tes-seg-item {
  border: 1px solid var(--tes-borde-tarjeta);
  border-radius: 14px;
  background: var(--tes-papel);
  overflow: hidden;
}

.tes-seg-vendedor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tes-seg-vendedor:hover {
  background: var(--tes-activo);
}

.tes-seg-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tes-gris-borde);
  flex-shrink: 0;
}

.tes-seg-punto--rojo { background: var(--tes-rojo); }
.tes-seg-punto--rojo-suave { background: var(--tes-rojo-fuerte); opacity: 0.75; }
.tes-seg-punto--ambar { background: var(--tes-ambar-punto); }
.tes-seg-punto--gris { background: var(--tes-gris-borde); }

.tes-seg-quien {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tes-seg-quien strong {
  font-size: 0.92rem;
  color: var(--tes-tinta);
}

.tes-seg-quien small {
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
}

.tes-seg-cuantos {
  color: var(--tes-tinta-3);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.tes-seg-flecha {
  color: var(--tes-tinta-3);
  transition: transform 0.18s ease;
}

.tes-seg-item.is-abierto .tes-seg-flecha {
  transform: rotate(180deg);
}

.tes-seg-folios {
  padding: 0 14px 12px;
  border-top: 1px solid var(--tes-linea);
}

.tes-seg-tabla th[scope="row"] {
  font-weight: 700;
}

.tes-seg-paso {
  display: block;
  color: var(--tes-tinta-3);
  font-size: 0.72rem;
}

.tes-seg-accion {
  text-align: right;
  white-space: nowrap;
}

/* El dialogo vive fuera de la escena: por el ancho de la ventana. */
@media (max-width: 720px) {
  .tes-seg-kpis {
    grid-template-columns: 1fr;
  }

  .tes-seg-vendedor {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tes-seg-cuantos {
    display: none;
  }
}

/* Gastos Variables, "Como en Lark" (07-10, lo pidio Daniel): el formulario
   completo en el orden de Lark. */
.tes-lark-seccion {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--tes-linea);
  color: var(--tes-marca);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tes-lark-seccion:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tes-lark-datos {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tes-lark-nota {
  margin: 0;
}

.tes-lark-etiqueta {
  display: block;
  margin-bottom: 4px;
  color: var(--tes-tinta-3);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tes-lark-tabla-caja {
  overflow-x: auto;
}

.tes-lark-tabla td,
.tes-lark-tabla th {
  white-space: nowrap;
  font-size: 0.8rem;
}

.tes-lark-archivo {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--tes-tinta-2);
  font-size: 0.8rem;
}

/* Tres pestañas (07-10, Viaticos): en el telefono se aprietan para caber. */
@container tes-escena (max-width: 720px) {
  .tes-tipos {
    min-width: 0;
    max-width: 100%;
  }

  .tes-tipo {
    min-width: 0;
    gap: 5px;
    padding: 0 8px;
    font-size: 0.8rem;
  }

  .tes-tipo-cuenta {
    min-width: 18px;
    padding: 0 5px;
  }
}

/* ---------------------------------------------- la barra en un renglon (07-10)
   Lo pidio el usuario: "que siempre la X para cerrar se mantenga en la parte
   superior derecha... que no se recorra la X ni los elementos en doble fila".
   1. La X va fija arriba a la derecha (con su lugar apartado): nunca baja.
   2. Para que quepa todo en el renglon del nombre: las pestañas con su
      nombre corto (el subtitulo dice cual es), el orden solo con sus
      flechas y, en ventanas medianas, «Ver registro», «Seguimiento» y «Ver
      Testing» solo con su icono (su tooltip dice que son). Solo en ventanas
      angostas (menos de 1100 px de escena) las pestañas bajan a su renglon. */
.tes-barra-superior {
  --tes-orilla-barra: max(24px, calc((100% - var(--tes-ancho)) / 2));
  padding-right: calc(var(--tes-orilla-barra) + 38px + var(--tes-hueco-barra));
}

.tes-barra-superior > .tes-cerrar {
  position: absolute;
  top: 20px;
  right: var(--tes-orilla-barra);
}

.tes-tipo-largo {
  display: none;
}

.tes-tipo-corto {
  display: inline;
}

.tes-herramientas .tes-orden {
  padding: 0 12px 0 14px;
}

@container tes-escena (max-width: 1799px) {
  .tes-herramientas .tes-registro-boton {
    padding: 0 10px;
  }

  .tes-herramientas .tes-registro-boton > span {
    display: none;
  }

  .tes-vista-boton > span {
    display: none;
  }

  .tes-vista-boton {
    padding: 0 10px;
  }
}

/* Antes las pestañas bajaban desde 1500 px; ahora solo en lo angosto. */
@container tes-escena (min-width: 721px) and (max-width: 1500px) {
  .tes-barra-superior::after {
    display: none;
  }

  .tes-barra-superior > .tes-tipos {
    order: 0;
    margin-top: 0;
  }
}

@container tes-escena (min-width: 721px) and (max-width: 1099px) {
  .tes-barra-superior::after {
    display: block;
  }

  .tes-barra-superior > .tes-tipos {
    order: 8;
    margin-top: -12px;
  }
}

@container tes-escena (max-width: 720px) {
  .tes-barra-superior {
    --tes-orilla-barra: 14px;
  }

  .tes-barra-superior > .tes-cerrar {
    top: 12px;
  }
}

/* Ventanas medianas: un poco menos de aire entre piezas, el sello de datos de
   prueba mas chico y "por aprobar" solo con el numero (su tooltip lo dice). */
@container tes-escena (min-width: 721px) and (max-width: 1499px) {
  .tes-barra-superior {
    --tes-hueco-barra: 12px;
  }

  .tes-sello {
    padding: 2px 7px;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
}

@container tes-escena (min-width: 721px) and (max-width: 1299px) {
  .tes-resumen-por {
    display: none;
  }
}

/* Muy justo (escena de menos de 1200 px): un poco menos de aire. */
@container tes-escena (min-width: 721px) and (max-width: 1199px) {
  .tes-barra-superior {
    --tes-hueco-barra: 10px;
  }
}

/* "Como en Lark": cada renglon de una lista (cada cotizacion) en su tarjeta,
   con sus datos a la vista (sin barra a los lados). */
.tes-lark-lista {
  display: grid;
  gap: 8px;
}

.tes-lark-fila {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--tes-linea);
  border-radius: 12px;
  background: var(--tes-fondo);
}

.tes-lark-fila-numero {
  color: var(--tes-marca);
  font-size: 0.72rem;
  font-weight: 800;
}

/* Con un comentario largo (la politica de comprobacion), la ventana mas ancha
   y el cuadro a la medida de lo escrito (07-10, lo pidio el usuario). */
.tes-dialogo--confirmar.tes-dialogo--amplio {
  width: min(760px, calc(100vw - 32px));
}

.tes-dialogo--amplio .tes-comentario textarea {
  min-height: 220px;
  max-height: 60vh;
  line-height: 1.45;
}

/* El seguimiento no trae buscador: la X en la esquina de arriba a la derecha. */
.tes-seg .tes-reg-cabeza {
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.tes-via-tabla tr.tes-via-fuera > * {
  background: var(--tes-ambar-suave);
}

.tes-seg-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0 6px;
}

.tes-seg-aviso-aqui {
  display: block;
  margin-top: 2px;
  color: var(--tes-marca);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Las tablas de Viaticos y del seguimiento (07-10, la prueba en el telefono y
   en ventanas medianas): miden su propio ancho; angostas, cada renglon se
   apila con la etiqueta junto a cada monto y nada se sale de su tarjeta. */
.tes-via-envoltura {
  container-type: inline-size;
  min-width: 0;
}

.tes-via-tabla th[scope="row"],
.tes-seg-tabla th[scope="row"] {
  min-width: 0;
  overflow-wrap: anywhere;
}

@container (max-width: 600px) {
  .tes-via-tabla--dias,
  .tes-seg-tabla {
    display: block;
  }

  .tes-via-tabla--dias thead,
  .tes-seg-tabla thead {
    display: none;
  }

  .tes-via-tabla--dias tbody,
  .tes-seg-tabla tbody {
    display: block;
  }

  .tes-via-tabla--dias tr,
  .tes-seg-tabla tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f4;
  }

  .tes-via-tabla--dias tbody tr:last-child,
  .tes-seg-tabla tbody tr:last-child {
    border-bottom: 0;
  }

  .tes-via-tabla--dias tbody th,
  .tes-via-tabla--dias tbody td,
  .tes-seg-tabla tbody th,
  .tes-seg-tabla tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .tes-via-tabla--dias tbody th[scope="row"],
  .tes-seg-tabla tbody th[scope="row"],
  .tes-seg-tabla tbody td[data-etiqueta="En qué va"],
  .tes-via-tabla--dias tbody td.tes-via-total,
  .tes-seg-tabla tbody td.tes-seg-accion {
    grid-column: 1 / -1;
  }

  .tes-seg-tabla tbody td[data-etiqueta="En qué va"] {
    display: block;
  }

  .tes-seg-tabla tbody td.tes-seg-accion {
    justify-content: flex-start;
    white-space: normal;
  }

  .tes-seg-tabla tbody td.tes-seg-accion:empty {
    display: none;
  }

  .tes-via-tabla--dias tbody td[data-etiqueta]::before,
  .tes-seg-tabla tbody td.num[data-etiqueta]::before {
    content: attr(data-etiqueta);
    color: var(--tes-tinta-3);
    font-size: 0.74rem;
    font-weight: 700;
  }

  .tes-via-tabla--dias tbody td.tes-via-total {
    padding-top: 4px;
    border-top: 1px dashed var(--tes-linea);
  }
}

/* Lo comprobado (gasto y monto): el nombre del gasto y sus archivos se
   parten; el monto nunca. */
@container (max-width: 420px) {
  .tes-via-tabla:not(.tes-via-tabla--dias) thead {
    display: none;
  }

  .tes-via-tabla:not(.tes-via-tabla--dias) th[scope="row"] .tes-comprobante {
    max-width: 100%;
  }
}

/* El aviso de "listo" o de error con una ventana abierta: encima de todo. */
.tes-aviso--flotante {
  position: fixed;
  inset: auto auto 28px 50%;
  transform: translateX(-50%);
  margin: 0;
  border: 0;
  max-width: min(420px, calc(100vw - 32px));
  overflow: visible;
  /* Vive en el body, fuera de la app: sus colores no heredan las variables. */
  background: var(--tes-tinta, #0f172a);
  color: #fff;
  box-shadow: var(--tes-sombra-alta, 0 18px 44px rgba(15, 23, 42, 0.28));
  animation: tes-aviso-sube 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* En el telefono (la prueba del 07-10): el nombre tiene su renglon entero (con
   el sello de prueba completo) y los botones de arriba (Testing, y en la local
   la campana y reiniciar) van junto a cuantas hay por aprobar. */
@container tes-escena (max-width: 720px) {
  .tesoreria-escena .tes-barra-superior > .tes-marca {
    flex: 1 1 calc(100% - 36px - var(--tes-hueco-barra));
    min-width: 0;
  }

  .tes-barra-superior > .tes-cuantas {
    flex: 1 1 auto;
  }

  .tes-barra-superior > .tes-vista-boton,
  .tes-barra-superior > [data-tes-solo-prueba] {
    order: 4;
  }

  .tes-barra-superior .tes-sello {
    white-space: nowrap;
  }
}

/* Apilado, cada monto con su etiqueta a la izquierda y la cifra entera (sus
   centavos pegados) a la derecha. */
@container (max-width: 600px) {
  .tes-via-tabla--dias tbody td.num,
  .tes-seg-tabla tbody td.num {
    display: block;
    text-align: right;
  }

  .tes-via-tabla--dias tbody td.num::before,
  .tes-seg-tabla tbody td.num::before {
    float: left;
    margin-right: 8px;
  }
}

/* Lo comprobado: el boton de cada factura se encoge (su nombre con "…") y la
   tabla nunca se sale de su tarjeta (800 px, la prueba del 07-10). */
.tes-via-tabla:not(.tes-via-tabla--dias) {
  table-layout: fixed;
}

.tes-via-tabla:not(.tes-via-tabla--dias) td.num,
.tes-via-tabla:not(.tes-via-tabla--dias) th.num {
  width: 9.5em;
}

.tes-via-tabla th[scope="row"] .tes-comprobante {
  max-width: 100%;
  min-width: 0;
}

.tes-via-tabla th[scope="row"] .tes-comprobante > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 721-899 px de escena: el orden y el seguimiento van junto a las pestañas
   (no en un renglon para ellos solos). */
@container tes-escena (min-width: 721px) and (max-width: 899px) {
  .tes-barra-superior > .tes-herramientas {
    order: 9;
    flex: 0 1 auto;
    margin-top: -12px;
  }
}

/* En el telefono el motivo de la lista se lee entero (hasta dos renglones),
   no «Comprob…». */
@container tes-escena (max-width: 720px) {
  .tes-estado-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow: hidden;
  }
}

@container tes-escena (max-width: 720px) {
  .tes-fila-linea .tes-estado {
    flex: 1 1 100%;
  }
}

@container tes-escena (max-width: 720px) {
  .tes-fila-linea .tes-estado {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .tes-fila-linea .tes-estado-texto {
    flex: 1 1 calc(100% - 22px);
  }
}

/* Tres pestañas en un telefono angosto (360 px): cada una a su medida (no
   tercios iguales) y un poco mas juntas, para que su numero no se corte. */
@container tes-escena (max-width: 720px) {
  .tes-tipos {
    gap: 2px;
  }

  .tes-tipo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 9px;
    gap: 5px;
  }
}

@container tes-escena (max-width: 340px) {
  .tes-tipo {
    padding: 0 6px;
    gap: 4px;
    font-size: 0.78rem;
  }

  .tes-tipo-cuenta {
    min-width: 18px;
    padding: 0 4px;
  }
}

/* (Corrige lo de arriba: los renglones nunca pasan de 76 px.) El motivo en un
   solo renglon a todo lo ancho, sin «+1 más» (el detalle dice todos). */
@container tes-escena (max-width: 720px) {
  .tes-estado-texto {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tes-fila-linea .tes-estado {
    flex-wrap: nowrap;
  }

  .tes-fila-linea .tes-estado-texto {
    flex: 1 1 auto;
  }

  .tes-fila-linea .tes-estado-mas {
    display: none;
  }
}

/* Lo que leyo Luna junto a cada archivo (07-10): chico y tenue; en ambar si
   no cuadra con Lark. */
.tes-con-luna {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
}

.tes-luna {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--tes-tinta-3);
  font-size: 0.72rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tes-luna i {
  font-size: 0.8rem;
}

.tes-luna--cuadra i {
  color: var(--tes-verde-punto, #16a34a);
}

.tes-luna--no_cuadra,
.tes-luna--no_es {
  color: var(--tes-ambar);
}