/* ============================================================
   CAJA · adaptador del sistema Wolfbite UI (sept 2026)
   Restyla las clases e ids heredados que el JavaScript de la app
   usa y NO se pueden renombrar (.chip .on .cd .bc .bg .mono .ub
   .msticky #mo #logw #app) y ajusta el layout de una columna.
   Requiere: fonts.css, tokens.css, base.css, components.css.
   ============================================================ */

/* ── Estados de pantalla que alterna el JS ────────────────── */
#logw.off{display:none}
#app{display:none}
#app.on{display:block}

/* ── Login en cianotipo (misma identidad que wolfbit.co) ──── */
.cj-login{
  position:fixed;inset:0;z-index:50;overflow:auto;
  display:grid;place-items:center;padding:20px;
  color:var(--wb-superficie);
  background:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    radial-gradient(900px 600px at 12% -8%,rgba(38,168,255,.30),transparent 62%),
    radial-gradient(700px 500px at 96% 18%,rgba(163,230,255,.14),transparent 60%),
    linear-gradient(165deg,#061737 0%,#0C3068 52%,#12457F 100%);
  background-size:48px 48px,48px 48px,auto,auto,auto;
}
.cj-login__card{width:100%;max-width:400px;background:var(--wb-superficie);color:var(--wb-tinta);border:var(--wb-borde) solid rgba(255,255,255,.85);padding:28px 22px 24px;position:relative}
.cj-login__card::before,.cj-login__card::after{content:'';position:absolute;width:12px;height:12px;border:0 solid #A3E6FF}
.cj-login__card::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.cj-login__card::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.cj-login__brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}
.cj-login__brand .wb-brand{font-size:var(--wb-t-2xl);padding:4px 12px}
.cj-login__sub{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--wb-cota)}
.cj-login__ft{margin-top:18px;font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);color:var(--wb-cota);letter-spacing:.03em}
.cj-pass{position:relative}
.cj-pass .wb-input{padding-right:52px}
.cj-eye{position:absolute;right:2px;top:2px;bottom:2px;width:44px;display:flex;align-items:center;justify-content:center;color:var(--wb-cota);font-size:1.05rem}
.cj-eye:hover{color:var(--wb-tinta)}
#le{margin-bottom:12px}

/* ── Barra de sesión (HTML estático sobre #root) ──────────── */
.ub{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px;font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.03em;color:var(--wb-cota);max-width:var(--wb-ancho-estrecho);margin:0 auto}
.ub strong{color:var(--wb-tinta);font-weight:500}
.ub>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Columna de la app ─────────────────────────────────────── */
#root{max-width:var(--wb-ancho-estrecho);margin:0 auto;padding:0 12px calc(var(--wb-s8) + 72px + var(--wb-safe-b))}
.cj-topbar{margin:0 -12px var(--wb-s3)}
.cj-clock{font-family:var(--wb-f-mono);font-size:var(--wb-t-sm);font-weight:500;color:var(--wb-tinta);white-space:nowrap}
.cj-clock span{font-size:var(--wb-t-xs);color:var(--wb-cota)}
.cj-tabs{margin-bottom:var(--wb-s4)}
.cj-tabs .wb-tab{flex:1;justify-content:center;padding:0 6px;font-size:.84rem}
.cj-sec{margin-bottom:var(--wb-s4)}
.cj-titulo{font-family:var(--wb-f-titulo);font-weight:600;font-size:.98rem;margin:var(--wb-s4) 0 var(--wb-s2)}
.cj-fecha{font-weight:600;text-transform:capitalize;margin-top:6px}
.cj-resultado{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:var(--wb-borde-fino) solid var(--wb-linea);background:var(--wb-papel);margin-top:10px}
.cj-resultado span:first-child{font-size:var(--wb-t-sm);font-weight:600;color:var(--wb-cota)}
.cj-linea{display:flex;gap:14px;font-size:var(--wb-t-sm);color:var(--wb-cota);flex-wrap:wrap;margin-top:8px}
.cj-linea strong{font-weight:500}

/* ── Tarjetas y migas heredadas (las genera el JS) ────────── */
.mono{font-family:var(--wb-f-mono);font-weight:700;font-variant-numeric:tabular-nums}
.cd{background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea-fuerte);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color var(--wb-dur) var(--wb-ease)}
.cd:hover{border-color:var(--wb-plano)}
.cd--hoy{border-color:var(--wb-ambar)}
.cd__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cd__t{font-family:var(--wb-f-titulo);font-weight:600;font-size:1.02rem;text-transform:capitalize;display:flex;align-items:center;gap:8px}
.cd__t.mono{font-family:var(--wb-f-mono);font-size:1.25rem}
.cd__monto{font-family:var(--wb-f-mono);font-weight:700;font-size:1.02rem;white-space:nowrap}
.cd__sub{display:flex;gap:14px;font-size:var(--wb-t-sm);flex-wrap:wrap}
.cd__meta{font-size:var(--wb-t-xs);font-family:var(--wb-f-mono);color:var(--wb-cota);margin-top:4px}
.bc{display:flex;align-items:center;gap:6px;padding:2px 0 12px;font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;color:var(--wb-cota)}
.bc span{cursor:pointer}
.bc span:hover{color:var(--wb-plano);text-decoration:underline;text-underline-offset:3px}
.bc .sep{cursor:default;color:var(--wb-cota-2);font-size:10px}
.bc .sep:hover{color:var(--wb-cota-2);text-decoration:none}
.bc .cur{color:var(--wb-tinta);font-weight:500;cursor:default}
.bc .cur:hover{color:var(--wb-tinta);text-decoration:none}

/* badges heredados: .bg-o = abierto/actual (ámbar) · .bg-c = cerrado (sólido) */
.bg{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;font-family:var(--wb-f-mono);font-weight:500;font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:var(--wb-borde-fino) solid var(--wb-linea);color:var(--wb-cota);background:var(--wb-papel)}
.bg-o{color:var(--wb-ambar);background:var(--wb-ambar-tinte);border-color:rgba(138,90,0,.35)}
.bg-c{color:var(--wb-superficie);background:var(--wb-tinta);border-color:var(--wb-tinta)}

/* chips de categoría / método (el JS alterna .on y pinta color de método) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;font-family:var(--wb-f-ui);font-weight:500;font-size:.9rem;color:var(--wb-tinta);background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea);cursor:pointer;white-space:nowrap;transition:border-color var(--wb-dur) var(--wb-ease),background-color var(--wb-dur) var(--wb-ease),color var(--wb-dur) var(--wb-ease)}
.chip:hover{border-color:var(--wb-tinta)}
.chip.on{background:var(--wb-tinta);border-color:var(--wb-tinta);color:var(--wb-superficie)}

/* método de pago: etiqueta pequeña en filas y color por método */
.cj-pm{display:inline-block;font-family:var(--wb-f-mono);font-size:.62rem;font-weight:500;letter-spacing:.04em;padding:1px 5px;border:1px solid currentColor;line-height:1.4}

/* ── Filas de movimientos (txR, bolsaR, gastos) ───────────── */
.cj-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:56px;padding:8px 12px;background:var(--wb-superficie);border:var(--wb-borde-fino) solid var(--wb-linea);border-top:0}
.cj-list{border-top:var(--wb-borde) solid var(--wb-linea-fuerte)}
.cj-list .cj-row:first-child{border-top:0}
.cj-row__ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:var(--wb-borde-fino) solid var(--wb-linea);background:var(--wb-papel);color:var(--wb-cota)}
.cj-row__ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.cj-row__ico--ok{color:var(--wb-ok);background:var(--wb-ok-tinte);border-color:rgba(21,128,61,.35)}
.cj-row__ico--bad{color:var(--wb-oxido);background:var(--wb-oxido-tinte);border-color:rgba(198,40,40,.35)}
.cj-row__ico--warn{color:var(--wb-ambar);background:var(--wb-ambar-tinte);border-color:rgba(138,90,0,.35)}
.cj-row__ico--info{color:var(--wb-plano);background:var(--wb-plano-tinte);border-color:rgba(27,75,140,.35)}
.cj-row__t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.95rem;font-weight:500;color:var(--wb-tinta)}
.cj-row__m{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);color:var(--wb-cota);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cj-row__monto{font-family:var(--wb-f-mono);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.cj-row__acc{display:flex;gap:2px}
.cj-ico-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--wb-cota);border:var(--wb-borde-fino) solid transparent}
.cj-ico-btn:hover{color:var(--wb-tinta);border-color:var(--wb-linea);background:var(--wb-papel)}
.cj-ico-btn--del:hover{color:var(--wb-oxido)}
.cj-ico-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ── Modal (#mo lo crea showM) ────────────────────────────── */
#mo{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;background:var(--wb-velo)}
#mo .wb-modal__bd{padding:18px 18px 4px}
.msticky{position:sticky;bottom:0;margin:8px -18px 0;padding:12px 18px calc(12px + var(--wb-safe-b));background:var(--wb-superficie);border-top:var(--wb-borde) solid var(--wb-linea-fuerte);z-index:2}
.cj-modal-fecha{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--wb-cota);text-align:center;padding:8px 12px;border:var(--wb-borde-fino) solid var(--wb-linea);background:var(--wb-papel);margin-bottom:14px}
.cj-modal-fecha strong{color:var(--wb-tinta);font-weight:500}
.cj-info{font-size:var(--wb-t-sm);color:var(--wb-cota);border:var(--wb-borde-fino) solid var(--wb-linea);background:var(--wb-papel);padding:10px 12px;line-height:1.5;margin-bottom:14px}
.cj-info strong{color:var(--wb-tinta);font-weight:500}
.cj-err{display:none;color:var(--wb-oxido);font-size:var(--wb-t-sm);font-weight:500;margin-bottom:10px;padding:8px 10px;border:var(--wb-borde-fino) solid var(--wb-oxido)}
.cj-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer;border:var(--wb-borde-fino) solid var(--wb-linea);background:var(--wb-papel);padding:11px 12px;font-size:var(--wb-t-sm);color:var(--wb-cota);line-height:1.45}
.cj-check input{width:20px;height:20px;accent-color:var(--wb-plano);flex-shrink:0;margin-top:1px}
.cj-check strong{color:var(--wb-tinta)}
@media(min-width:700px){
  #mo{align-items:center;padding:24px}
  #mo .wb-modal__card{max-width:480px;border:var(--wb-borde) solid var(--wb-linea-fuerte);box-shadow:none}
  .msticky{padding-bottom:12px}
}

/* ── Análisis: barras ─────────────────────────────────────── */
.cj-bar{height:6px;background:var(--wb-papel);border:var(--wb-borde-fino) solid var(--wb-linea);overflow:hidden;margin-top:4px}
.cj-bar div{height:100%;background:var(--wb-plano)}
.cj-bar--ok div{background:var(--wb-ok)}
.cj-bar--bad div{background:var(--wb-oxido)}
.cj-sw{display:inline-block;width:10px;height:10px;flex-shrink:0}

/* ── FAB centrado en la columna en escritorio ─────────────── */
@media(min-width:600px){.wb-fab{right:max(var(--wb-s4),calc(50% - var(--wb-ancho-estrecho)/2 + var(--wb-s4)))}}

/* ── reglas añadidas por el restyle ───────────────────────── */
.cj-buscar{display:flex;gap:8px;margin-bottom:14px}
.cj-buscar .wb-input{flex:1;min-width:0}
.is-warn{color:var(--wb-ambar)}
.cj-lock{display:inline-flex;color:var(--wb-cota)}
.cj-topbar .wb-topbar__in{padding-inline:12px}
.cj-row__t .bg{margin-left:2px}
.cj-row__t .cj-pm{margin-left:2px}
.cj-row__t{min-width:0}

/* ── ajustes tras la revisión visual ─────────────────────── */
/* topbar: nada se desborda en 360 */
.cj-topbar .wb-topbar__in{gap:8px}
.cj-topbar .wb-brand{min-width:0}
.cj-topbar .wb-topbar__acts{flex-shrink:0}
@media(max-width:420px){.cj-topbar .wb-brand small{display:none}.cj-clock{font-size:var(--wb-t-xs)}}
/* stats dentro de paneles: un monto de 11 cifras cabe en una línea a 360-390 */
.wb-panel .wb-stats .wb-stat__v{font-size:clamp(.98rem,4.3vw,1.3rem)}
/* filas: metadatos en varias líneas (nada se trunca), badges que envuelven, acciones compactas en móvil */
.cj-row__m{white-space:normal;overflow:visible;text-overflow:clip}
.cj-row .wb-badge{white-space:normal;line-height:1.25}
@media(max-width:420px){.cj-row{gap:8px;padding:8px 10px}.cj-ico-btn{width:32px;height:32px}.cj-row__monto{font-size:.95rem}}

/* ── opcional A: barra inferior en celular, tabs solo en PC ── */
@media(max-width:699px){.cj-tabs{display:none}}
.cj-bottomnav .wb-bottomnav__item{font-family:var(--wb-f-ui);background:none;border:0}

/* ── v1.2 · mesa cianotipo: lo que va directo sobre el fondo se escribe en claro ── */
body{overflow-x:clip}                                   /* la barra a todo el ancho usa 100vw: nunca scroll lateral */
.ub{color:var(--wb-fondo-texto-2)}
.ub strong{color:var(--wb-fondo-texto)}
/* botones de la barra de sesión (Actualizar · Reiniciar · Cerrar sesión) van sobre la mesa: el hover del sistema
   (fondo tinta al 6 %) los fundía con el azul; aquí se quedan en hoja blanca y avisan con el borde */
.ub .wb-btn{background:var(--wb-superficie);flex-shrink:0}
.ub .wb-btn:hover{background:var(--wb-superficie);color:var(--wb-plano);border-color:var(--wb-fondo-acento)}
.ub .wb-btn--danger-outline:hover{background:var(--wb-superficie);color:var(--wb-oxido-osc);border-color:var(--wb-oxido)}
.ub .wb-btn:focus-visible{outline-color:var(--wb-fondo-acento)}
.ub .wb-btn[hidden]{display:none!important}               /* Reiniciar solo aparece al admin */
/* analítica: ingresos y salidas en líneas y barras independientes */
.cj-anal{margin-bottom:14px}
.cj-anal:last-child{margin-bottom:0}
.cj-anal__n{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--wb-tinta)}
.cj-anal__l{font-size:.8rem;color:var(--wb-cota);margin-top:6px}
.cj-anal__l .mono{font-size:.85rem}
.cj-refresh svg{flex-shrink:0}
.cj-refresh span{margin-left:6px}
/* Cola de guardado: movimientos aún no confirmados por el servidor (es un botón: toca para reintentar) */
.cj-pend{flex-shrink:0;appearance:none;-webkit-appearance:none;border:1px solid var(--wb-ambar);border-radius:999px;background:var(--wb-superficie);color:var(--wb-ambar);font:inherit;font-weight:600;letter-spacing:.02em;line-height:1.2;padding:4px 10px;cursor:pointer;white-space:nowrap;max-width:48vw;overflow:hidden;text-overflow:ellipsis}
.cj-pend:hover{color:var(--wb-tinta)}
.cj-pend:focus-visible{outline:2px solid var(--wb-fondo-acento);outline-offset:2px}
.cj-pend[hidden]{display:none!important}
@media(max-width:480px){.ub{gap:6px;flex-wrap:wrap}.cj-ub-lbl{display:none}.cj-refresh{padding:0 10px}.cj-refresh span{display:none}
  .cj-pend{order:9;flex-basis:100%;max-width:none;white-space:normal;text-align:center;margin-top:2px}} /* en celular el aviso de pendientes baja a su propia línea: no empuja los botones */
/* barra superior: hoja blanca de borde a borde en todos los anchos, contenido alineado con la columna */
.cj-topbar{margin:0 calc(50% - 50vw) var(--wb-s3)}
.cj-topbar .wb-topbar__in{max-width:var(--wb-ancho-estrecho);padding-inline:12px}
/* pestañas (PC) sobre la mesa: línea fina clara, activo en cian */
.cj-tabs{border-bottom:1px solid var(--wb-fondo-linea)}
.cj-tabs .wb-tab{color:var(--wb-fondo-texto-2);margin-bottom:-1px}
.cj-tabs .wb-tab:hover{color:var(--wb-fondo-texto)}
.cj-tabs .wb-tab.is-active{color:#FFFFFF;border-bottom-color:var(--wb-fondo-acento)}
/* títulos de sección, fecha del detalle y migas: sobre la mesa */
.cj-titulo{color:var(--wb-fondo-texto)}
.wb-panel .cj-titulo,#mo .cj-titulo{color:var(--wb-tinta)}
.cj-sec>.cj-fecha{color:var(--wb-fondo-texto)}
.bc{color:var(--wb-fondo-texto-2)}
.bc span:hover{color:var(--wb-fondo-acento)}
.bc .sep,.bc .sep:hover{color:rgba(255,255,255,.45)}
.bc .cur,.bc .cur:hover{color:var(--wb-fondo-texto)}
/* resumen Ingresos/Salidas/Neto del día cerrado: pasa a hoja blanca (los montos en verde/óxido necesitan blanco detrás) */
.cj-sec>.wb-kv{background:var(--wb-superficie);border:var(--wb-borde) solid var(--wb-linea-fuerte);padding:12px 14px}
/* botón primario suelto sobre la mesa: borde claro para que no se funda con el azul */
.cj-sec>.wb-btn--primary{border-color:var(--wb-fondo-texto)}

/* ── sensación de carga: "Entrando…" en el botón y esqueleto mientras llega la caja ── */
.cj-login .wb-btn--primary .wb-spinner{width:18px;height:18px;border-color:rgba(255,255,255,.35);border-top-color:#FFFFFF;margin-right:10px}
.cj-login .wb-btn--primary:disabled{opacity:1}
.cj-cargando{margin-top:var(--wb-s3)}
.cj-cargando .wb-panel+.wb-panel{margin-top:12px}
.cj-cargando .wb-skeleton+.wb-skeleton{margin-top:10px}
.cj-cargando__t{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-family:var(--wb-f-mono);font-size:var(--wb-t-sm);letter-spacing:.03em;color:var(--wb-fondo-texto-2)}
.cj-cargando__t .wb-spinner{border-color:rgba(255,255,255,.3);border-top-color:var(--wb-fondo-acento)}

/* Usuario de solo consulta (29-sep-2026): ve todo, sin controles de cambio. El servidor también rechaza los cambios. */
body.cj-ro .wb-fab,
body.cj-ro [onclick*="mTxn("],
body.cj-ro [onclick*="delT("],
body.cj-ro [onclick*="delD("],
body.cj-ro [onclick*="mClose("],
body.cj-ro [onclick*="mBolsa("],
body.cj-ro [onclick*="mPrestamo("],
body.cj-ro [onclick*="mGV("],
body.cj-ro [onclick*="delBolsa("]{display:none!important}
.cj-ro-tag{display:inline-flex;align-items:center;margin-left:8px;padding:2px 7px;border:var(--wb-borde-fino) solid var(--wb-plano);color:var(--wb-plano);background:var(--wb-superficie);font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.cj-ro-tag[hidden]{display:none}
@media(max-width:480px){.cj-ro-tag{display:flex;width:max-content;margin:3px 0 0}}   /* en celular, debajo del nombre (la barra no le deja espacio al lado) */