/* Generado por tools/compilar_diseno.py desde «panel-fondo.dc.html» para «fondo». No editar a mano. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fuentes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fuentes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,'Helvetica Neue',sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;--fm:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,sans-serif;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--bg:#f5f5f7;--card:#fff;--side:#fbfbfd;--line:#e1e1e6;--line2:#eeeef1;--ink:#1d1d1f;--ink2:#3a3a3c;--ink3:#6e6e73;--mut:#86868b;--mut2:#aeaeb2;--red:#d70015;--redbg:#fff0f0;--green:#1d8738;--greenbg:#e9f6ec;--amber:#b25000;--amberbg:#fff5e6;--blue:#0071e3;--bluebg:#e8f1fd;--track:#e8e8ed;--btn:#0071e3;--btnink:#fff;--chip:#f2f2f5;--in:#fff;--shadow:0 1px 1px rgba(0,0,0,.03),0 2px 10px rgba(0,0,0,.045);--shadow-lg:0 22px 70px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.06)}
/* `.tema-oscuro`: la vista previa de la marca cuando el fondo eligió el tema oscuro para sus
   clientes. El panel sigue claro; sólo esa caja toma los tokens oscuros. */
body.dark,.tema-oscuro{--bg:#000;--card:#1c1c1e;--side:#111113;--line:#3a3a3c;--line2:#2c2c2e;--ink:#f5f5f7;--ink2:#d1d1d6;--ink3:#a1a1a6;--mut:#8e8e93;--mut2:#636366;--red:#ff453a;--redbg:#3a1613;--green:#30d158;--greenbg:#0e2c16;--amber:#ff9f0a;--amberbg:#352407;--blue:#0a84ff;--bluebg:#0a2644;--track:#2c2c2e;--btn:#0a84ff;--btnink:#fff;--chip:#2c2c2e;--in:#1c1c1e;--shadow:0 0 0 1px rgba(255,255,255,.05);--shadow-lg:0 22px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06)}
/* ── Sistema de diseño del panel ─────────────────────────────────────────────
   Estilo Apple: SF Pro con cifras tabulares (no monoespaciada) para los números, tarjetas
   blancas sobre #f5f5f7, jerarquía por tamaño y peso antes que por mayúsculas, y el azul del
   sistema como único color de acción. Rojo, verde y ámbar quedan para estado.

   Las clases de abajo son el vocabulario de las pantallas. Una pantalla nueva se arma con
   ellas y no con estilos sueltos: así el panel se ve como un solo sistema y un ajuste acá
   llega a todas. `--fm` es la tipografía de las CIFRAS (tabulares); `--mono` es para lo que
   de verdad es código: ids, hashes, URLs, claves. */
a{color:var(--blue);text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{outline:none}
::selection{background:color-mix(in srgb,var(--blue) 22%,transparent)}
/* El anillo de foco, que es la otra mitad de poder usar el panel con el teclado: los
   controles son `<span>` y `comun/teclado.js` los hace tabulables, pero si el foco no se
   ve, tabular es adivinar donde esta parado uno. `:focus-visible` y no `:focus`: con el
   mouse no aparece, asi que no cambia nada de lo que ya se ve. */
[data-click]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
/* ── Estructura: barra lateral + contenido ── */
/* `min-width:1280px` es una decisión escrita, no un olvido: ver
   `test_el_panel_del_fondo_SIGUE_pidiendo_1280_px_y_es_una_decision`. Con la barra lateral
   quedan 1048 px de contenido, que es el piso con el que se diseñó cada pantalla. */
.app{display:flex;min-height:100vh;min-width:1280px;color:var(--ink)}
.side{position:sticky;top:0;height:100vh;width:232px;flex:none;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:16px 12px 14px;background:var(--side);border-right:1px solid var(--line);overflow-y:auto;z-index:25}
.side-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;min-width:0}
.logo{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.side-name{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;user-select:none;white-space:nowrap}
.nav:hover{background:var(--chip)}
.nav svg{width:19px;height:19px;flex:none}
.side-sec{font-size:11.5px;font-weight:600;color:var(--mut);padding:14px 10px 6px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line2)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topw{position:sticky;top:0;z-index:20}
.top{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 32px;box-sizing:border-box;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.page{box-sizing:border-box;width:100%;max-width:1360px;margin:0 auto;padding:6px 32px 64px}
/* Angosta pero pegada a la izquierda: centrada, el título saltaba de lugar al pasar de una
   pantalla ancha a una angosta. */
.page-n{max-width:980px;margin-left:0}
.head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:10px 0 22px}
.head-t{flex:1;min-width:240px}
.crumb{font-size:13px;color:var(--ink3);margin-bottom:4px}
.crumb a{color:var(--ink3)}
.h1{font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.024em;margin:0}
.lead{font-size:15px;color:var(--ink3);margin-top:5px;line-height:1.45}
.h2{font-size:20px;font-weight:650;letter-spacing:-.018em;margin:0}
.h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.sec{font-size:13px;font-weight:600;color:var(--ink3)}
/* ── Superficies ── */
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;box-sizing:border-box;min-width:0}
.card-0{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:24px}
/* Un botón de texto en la fila del título queda al ras del borde, alineado con las cifras de abajo. */
.card-h .btn3{margin-right:-8px}
.card-t{font-size:15px;font-weight:600;letter-spacing:-.01em}
.inset{background:var(--chip);border-radius:12px;padding:14px 16px}
.stack{display:flex;flex-direction:column;gap:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hr{height:1px;background:var(--line2);margin:14px 0}
.spacer{flex:1}
/* ── Cifras ── */
.kpi-l{font-size:13px;font-weight:500;color:var(--ink3);display:flex;align-items:center;gap:6px}
.kpi-v{font-size:26px;font-weight:650;letter-spacing:-.022em;margin-top:6px;white-space:nowrap;line-height:1.1}
.kpi-s{font-size:13px;color:var(--ink3);margin-top:4px}
.big{font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1.05}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Una cifra de tabla que baja de renglón en vez de pisar la columna de al lado. `.num` no
   parte nunca, y en una columna angosta eso encimaba «0,00071953 / 0,00071953» sobre
   «83.398,10» (la ficha de un cliente de Crossing, 28/9/2026). Parte primero en los espacios
   y, si una cifra sola no entra, adentro de la cifra: nunca afuera de su celda. Va con una
   columna `minmax(…)` y no con un ancho de contenido, que desalinearía las filas. */
.numw{font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.up{color:var(--green)}.down{color:var(--red)}.warn{color:var(--amber)}
.muted{color:var(--ink3)}.faint{color:var(--mut)}
.mono{font-family:var(--mono);font-size:.9em;letter-spacing:0}
.small{font-size:12.5px}
.trunc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Listas y tablas ── */
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2);min-width:0}
.row:last-child{border-bottom:0}
.rowc{cursor:pointer;margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:10px;border-bottom-color:transparent}
.rowc:hover{background:var(--chip)}
.t-main{font-size:14px;font-weight:500;color:var(--ink)}
.t-sub{font-size:12.5px;color:var(--ink3);margin-top:1px}
.thead{display:grid;align-items:end;gap:12px;font-size:12px;font-weight:500;color:var(--mut);padding:0 0 8px;border-bottom:1px solid var(--line)}
.trow{display:grid;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:13.5px;min-width:0}
.trow:last-child{border-bottom:0}
.r{text-align:right;justify-content:flex-end}
.scroll-x{overflow-x:auto}
/* ── Controles ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;user-select:none;box-sizing:border-box;background:var(--btn);color:var(--btnink);text-decoration:none;border:0}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn2{background:var(--chip);color:var(--ink)}
.btn2:hover{filter:none;background:var(--track)}
.btn3{background:transparent;color:var(--blue);padding:0 8px}
.btn3:hover{filter:none;background:var(--bluebg)}
.btnx{background:var(--redbg);color:var(--red)}
.btnx:hover{filter:none;background:color-mix(in srgb,var(--red) 16%,transparent)}
.btnX{background:var(--red);color:#fff}
.sm{height:28px;padding:0 12px;font-size:13px;border-radius:8px}
.lg{height:44px;padding:0 22px;font-size:15px;border-radius:12px}
.wide{display:flex;width:100%}
.seg{display:inline-flex;background:var(--track);border-radius:9px;padding:2px;gap:2px;box-sizing:border-box}
.seg>span{white-space:nowrap;user-select:none}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1;padding:4px 9px;border-radius:99px;white-space:nowrap;background:var(--chip);color:var(--ink2)}
.tag-ok{background:var(--greenbg);color:var(--green)}
.tag-warn{background:var(--amberbg);color:var(--amber)}
.tag-bad{background:var(--redbg);color:var(--red)}
.tag-info{background:var(--bluebg);color:var(--blue)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--track);color:var(--ink3);font-size:10px;font-weight:700;cursor:help;flex:none;vertical-align:1px;line-height:1}
.bar{flex:1;height:6px;background:var(--track);border-radius:99px;overflow:hidden;min-width:24px}
.bar>div{height:100%;border-radius:99px;background:var(--blue)}
/* ── Formularios ── */
.lbl{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:6px}
.inp{box-sizing:border-box;width:100%;height:36px;padding:0 12px;font-size:14px;color:var(--ink);background:var(--in);border:1px solid var(--line);border-radius:10px}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.inp::placeholder{color:var(--mut2)}
textarea.inp{height:auto;padding:9px 12px;line-height:1.45;resize:vertical}
.hint{font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.45}
.field{min-width:0}
/* ── Avisos ── */
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--chip);color:var(--ink2);font-size:13.5px;line-height:1.5}
.note-bad{background:var(--redbg);color:var(--red)}
.note-warn{background:var(--amberbg);color:var(--amber)}
.note-info{background:var(--bluebg);color:var(--blue)}
.note-ok{background:var(--greenbg);color:var(--green)}
.empty{padding:32px 16px;text-align:center;color:var(--ink3);font-size:14px;line-height:1.5}
.empty b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:4px}
/* ── Hojas (modales) ── sin animación a propósito: `pintar()` rearma el DOM en cada tecla y
   una animación de entrada se repetiría con cada una. */
.veil{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.sheet{background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);padding:26px 28px;box-sizing:border-box;max-width:100%;max-height:88vh;overflow:auto}
.sheet-t{font-size:20px;font-weight:650;letter-spacing:-.018em}
.sheet-d{font-size:14px;color:var(--ink3);margin-top:6px;line-height:1.5}
.sheet-f{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px}
/* ── actividad ── la línea de tiempo: un ícono redondo por evento y el separador corrido hasta
   el texto, como las listas de iOS. `.evc` es el renglón de un grupo, que se despliega. */
.ev-dia{display:flex;align-items:baseline;gap:8px;margin:26px 4px 10px}
.ev{display:flex;align-items:flex-start;gap:14px;padding-top:12px}
.evc{cursor:pointer;margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:12px}
.evc:hover{background:var(--chip)}
.ev-i{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.ev-b{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;padding:5px 0 12px;border-bottom:1px solid var(--line2)}
.ev:last-child .ev-b{border-bottom-color:transparent}
.ev-h{margin-top:2px;white-space:nowrap}
.ev-x{margin-left:46px;padding:0 0 12px;border-bottom:1px solid var(--line2)}
.ev-x:last-child{border-bottom-color:transparent}
.ev-xl{border-left:2px solid var(--line);padding:2px 0 2px 14px}
.ev-xr{display:flex;align-items:baseline;gap:12px;padding:5px 0;font-size:13px}

/* ── config ── */
/* El alta del segundo factor es un módulo de `comun/` (`dosfactores.js`) que comparten el portal y
   el admin de Sharpz, y trae su propio marco. En Configuración el marco es la tarjeta del panel:
   se le saca el suyo y se lo acomoda como un renglón de Ajustes —rótulo a la izquierda, botón a
   la derecha— sin tocar el módulo. Los `!important` le ganan a su estilo en línea.
   ⚠️ **Cada regla va con `#dosfactores.card`, no con `#dosfactores` solo.** Este CSS se compila
   a `comun/estilo.css`, que también carga el admin de Sharpz, y el admin monta el mismo módulo
   en un `<div id="dosfactores">` sin clase. Sin el `.card`, allá la caja perdía el borde, el
   fondo y el ancho, y «Activar» quedaba flotando a la derecha de la pantalla.
   ⚠️ **El módulo trae su propia `.card`** (la `caja` de `dosfactores.js`), y `app.js` la monta
   dentro de un envoltorio que sobrevive al repintado: `#dosfactores.card > div > .card`. Por eso
   se la busca como `.card` descendiente y no por profundidad. Las reglas viejas contaban
   `>div>div>div`: le sacaban el borde a la caja pero no la sombra —una tarjeta adentro de
   otra— y ponían en 14 px y negrita la fila entera, bajada incluida. La fila se lee igual que
   «Claves de API»: sin el ícono en recuadro, título de 14 px, bajada gris y el botón chico. */
#dosfactores.card .card{max-width:none!important;padding:0!important;box-shadow:none!important;background:none!important;border-radius:0!important}
#dosfactores.card .card>div:first-child{align-items:center!important;gap:20px!important}
#dosfactores.card .card>div:first-child>span:first-child{display:none!important}
#dosfactores.card .card>div:first-child>div>div:first-child>span:first-child{font-size:14px!important;font-weight:600!important;letter-spacing:0!important}
#dosfactores.card .card>div:first-child>div>div:nth-child(2){font-size:12.5px!important;font-weight:400!important;color:var(--ink3)!important;margin-top:1px!important;line-height:1.45!important}
#dosfactores.card #empezar{height:28px;padding:0 12px;font-size:13px;border-radius:8px;margin:0}
#dosfactores.card #reemplaza{margin:2px 0 0!important;font-size:12.5px!important;line-height:1.45!important}
#dosfactores.card button:disabled{opacity:.5;cursor:default}
/* «Otro color»: el `<input type=color>` como un círculo más, con la rueda de colores de macOS
   alrededor del elegido. */
.cfg-color{-webkit-appearance:none;appearance:none;width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;background:conic-gradient(#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d55,#ff3b30)}
.cfg-color::-webkit-color-swatch-wrapper{padding:4px}
.cfg-color::-webkit-color-swatch{border:0;border-radius:50%}
.cfg-color::-moz-color-swatch{border:0;border-radius:50%}
/* ── modales-b: altas de esquema, clave de API y cliente ── */
/* La inicial en mayúscula sin tocar el texto: los rótulos de chips que vienen de las pantallas
   («mensual», «que elija él», los permisos) los fijan los tests tal cual, en minúscula. */
.mayus1::first-letter{text-transform:uppercase}
/* ── trading ── */
/* El campo grande del ticket escribe en 24 px; el «escribí el %» vacío se ve en el tamaño
   de un texto de ayuda, no como una cifra puesta. */
.tr-cant::placeholder{font-size:15px;font-weight:500;letter-spacing:0}
/* ── la lectura por la URL del webhook (0094) ── */
/* El interruptor de macOS: verde prendido, gris apagado, la perilla blanca que corre. Es el
   único del panel; un checkbox se lee como «elegir», y esto es «prendido o apagado». */
.sw{position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:var(--mut2);cursor:pointer;transition:background .15s}
.sw[aria-checked="true"]{background:var(--green)}
.sw-b{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.sw[aria-checked="true"] .sw-b{left:18px}
.hv0:hover{background:var(--chip)}
.hv1:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.hv2:hover{color:var(--blue)}