/* ==========================================================================
   Libro de cuentas: hoja de estilos
   Guarda este archivo junto a contabilidad-autonomo.html. Cambia lo que
   quieras, guarda y recarga la app (Ctrl+R o Cmd+R) para ver el resultado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía Urbanist
   Va incluida en la carpeta «fuentes» (fuente variable), así funciona sin
   internet. Inter sigue disponible: cambia --fuente si la prefieres.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Urbanist App";font-style:normal;font-weight:100 900;font-display:swap;src:url("fuentes/Urbanist-latin.woff2") format("woff2-variations"),url("fuentes/Urbanist-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}
@font-face{font-family:"Urbanist App";font-style:normal;font-weight:100 900;font-display:swap;src:url("fuentes/Urbanist-latin-ext.woff2") format("woff2-variations"),url("fuentes/Urbanist-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 App";font-style:normal;font-weight:100 900;font-display:swap;src:url("fuentes/Inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Inter App";font-style:normal;font-weight:100 900;font-display:swap;src:url("fuentes/Inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F}

/* --------------------------------------------------------------------------
   2. Personaliza aquí
   Casi todo el aspecto de la app sale de estas variables.
   -------------------------------------------------------------------------- */
:root{
  /* Tipografía: la primera que esté disponible gana */
  --fuente:"Urbanist App","Urbanist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fuente-cifras:"Urbanist App","Urbanist",ui-sans-serif,system-ui,sans-serif; /* cifras grandes */
  --espaciado-letras:0;
  --tamano-texto:14px;

  /* Color principal, en formato R G B (sin comas) */
  --acento:31 79 209;          /* botones principales, enlaces, gráficos (azul cobalto) */
  --acento-texto:31 79 209;    /* enlaces */

  /* Fondo de pantalla: cuatro manchas de color sobre un color base */
  --fondo-base:#EEF2F9;
  --fondo-1:#BFDCFF;           /* arriba a la izquierda */
  --fondo-2:#DCD3FF;           /* arriba a la derecha */
  --fondo-3:#C6F1E6;           /* abajo a la derecha */
  --fondo-4:#FFDCCB;           /* abajo a la izquierda */

  /* Cristal */
  --cristal-opacidad:.58;      /* 0 = transparente, 1 = blanco sólido */
  --cristal-desenfoque:26px;   /* cuánto se difumina lo de detrás */

  /* Formas y medidas */
  --radio-panel:22px;          /* esquinas de bloques y tablas */
  --radio-boton:999px;         /* 999px = cápsula; prueba 8px para botones rectos */
  --ancho-barra:268px;         /* ancho de la barra lateral */
  --ancho-barra-plegada:76px;  /* ancho con la barra lateral plegada */
}
/* Colores en modo oscuro (botón luna de la barra lateral) */
:root[data-theme="dark"]{
  --acento-texto:143 176 255;  /* enlaces en oscuro: más claros para que se lean */
  --fondo-base:#0B0F1A;
  --fondo-1:#16305E;
  --fondo-2:#2A1F55;
  --fondo-3:#0E3B3A;
  --fondo-4:#3B2418;
  --cristal-opacidad:.5;
}

/* --------------------------------------------------------------------------
   3. Estilos de la app
   No hace falta tocar nada de aquí para abajo, pero puedes hacerlo.
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light;
  --font:var(--fuente);
  --rounded:var(--fuente-cifras);
  /* canales (HIG, modo claro) */
  --c-bg:242 242 247;--c-surface:255 255 255;--c-sidebar:236 236 241;--c-field:255 255 255;--c-btn:255 255 255;
  --c-label:0 0 0;--c-label2:60 60 67;--c-sep:60 60 67;--c-fill:120 120 128;
  --c-blue:var(--acento);--c-tint:var(--acento-texto);--c-indigo:97 85 245;--c-green:52 199 89;--c-orange:255 141 40;--c-red:255 56 60;
  --c-green-t:0 137 50;--c-orange-t:197 83 0;--c-red-t:233 21 45;
  /* roles */
  --label:rgb(var(--c-label)/.88);--label-2:rgb(var(--c-label2)/.64);--label-3:rgb(var(--c-label2)/.36);
  --sep:rgb(var(--c-sep)/.18);--sep-strong:rgb(var(--c-sep)/.28);
  --shadow-group:0 0 0 .5px rgb(0 0 0/.07),0 1px 3px rgb(0 0 0/.05);
  /* alias usados por el código */
  --ink:var(--label);--ink-2:var(--label-2);--muted:var(--label-2);--rule:var(--sep);--rule-2:var(--sep-strong);
  --red:rgb(var(--c-red-t));--blue:rgb(var(--c-tint));--green:rgb(var(--c-green-t));--amber:rgb(var(--c-orange-t));
  --white:rgb(var(--c-surface));--paper:rgb(var(--c-bg));--tab:rgb(var(--c-fill)/.16);--desk:rgb(var(--c-bg));--blue-soft:rgb(var(--c-blue)/.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:rgb(var(--c-bg));color:var(--label);font:var(--tamano-texto)/1.45 var(--font);letter-spacing:var(--espaciado-letras);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:rgb(var(--c-tint));text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid rgb(var(--c-blue)/.55);outline-offset:1px;border-radius:7px}
.n,.num,.ledger,.statement,.tax,.tot,.big,.parts,input[inputmode=decimal]{font-variant-numeric:tabular-nums}

/* ventana */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:20px 10px 12px;background:rgb(var(--c-sidebar)/.78);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-right:.5px solid var(--sep-strong);z-index:10}
.sb-title{display:flex;gap:10px;align-items:center;padding:0 8px 18px}
.app-icon{width:34px;height:34px;flex:none;border-radius:9px;background:linear-gradient(180deg,rgb(var(--acento)/.75),rgb(var(--acento)));display:grid;place-items:center;box-shadow:0 1px 2px rgb(0 0 0/.2),inset 0 .5px 0 rgb(255 255 255/.35)}
.app-icon svg{width:20px;height:20px;color:#fff}
.sb-title strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.012em;line-height:1.2}
.sb-title span{display:block;font-size:11.5px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.sb-sec{font-size:11px;font-weight:600;color:var(--label-3);padding:0 10px 4px}
.binder{display:flex;flex-direction:column;gap:2px}
.binder button{all:unset;display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--label)}
.binder button svg{width:18px;height:18px;flex:none;color:rgb(var(--c-blue))}
.binder button:hover{background:rgb(var(--c-fill)/.12)}
.binder button:active{background:rgb(var(--c-fill)/.2)}
.binder button.active{background:rgb(var(--c-blue));color:#fff}
.binder button.active svg{color:#fff}
.binder button:focus-visible{outline-offset:-2px}
.filebox{margin-top:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:7px;font-size:12px;line-height:1.35;color:var(--label-2);background:rgb(var(--c-surface)/.7);border-radius:11px;padding:11px 12px;box-shadow:var(--shadow-group)}
.filebox>span:nth-child(2){flex:1;min-width:0}
.filebox .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgb(var(--c-orange));margin-right:6px;vertical-align:0}
.filebox .dot.ok{background:rgb(var(--c-green))}
.filebox b{color:var(--label);font-weight:600;word-break:break-all}
.filebox .btn{width:100%;justify-content:center}
.content{padding:8px 40px 64px;min-width:0;width:100%}

/* tipografía */
h2{font-size:28px;line-height:1.15;font-weight:700;letter-spacing:.004em;margin:22px 0 4px}
.toolbar h2{margin:0}
h3{font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.016em;margin:0 0 10px}
.lede{color:var(--label-2);margin:0 0 6px;max-width:68ch;font-size:13.5px}
.muted{color:var(--label-2)}
.small{font-size:12.5px}
.hint{font-size:12px;color:var(--label-2);margin-top:5px;line-height:1.4}
.neg{color:rgb(var(--c-red-t))}
b,strong{font-weight:600}

/* barra de herramientas con material */
.toolbar{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 -40px 14px;padding:12px 40px;background:rgb(var(--c-bg)/.78);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.toolbar .grow,.mf .grow{flex:1}
.toolbar select{width:auto}

/* botones */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13.5px;font-weight:500;line-height:1.1;min-height:30px;padding:6px 13px;border:none;border-radius:8px;background:rgb(var(--c-btn));color:var(--label);box-shadow:0 0 0 .5px rgb(0 0 0/.16),0 1px 1.5px rgb(0 0 0/.08);cursor:pointer;white-space:nowrap;transition:transform .1s ease-out,filter .1s ease-out}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:scale(.97);filter:brightness(.92)}
.btn.primary{background:rgb(var(--c-blue));color:#fff;box-shadow:0 1px 2px rgb(0 80 200/.3),inset 0 .5px 0 rgb(255 255 255/.25)}
.btn.danger{color:rgb(var(--c-red-t))}
.btn.sm{min-height:26px;padding:5px 11px;font-size:12.5px}
.btn:disabled{opacity:.4;cursor:default;transform:none;filter:none}
.lnk{all:unset;cursor:pointer;color:rgb(var(--c-tint));font-weight:500;font-size:13px;padding:3px 7px;border-radius:6px;transition:background .1s}
.lnk:hover{background:rgb(var(--c-blue)/.1)}
.lnk:active{background:rgb(var(--c-blue)/.2)}
.lnk.red{color:rgb(var(--c-red-t))}
.lnk.red:hover{background:rgb(var(--c-red)/.1)}
.acts{white-space:nowrap;text-align:right}

/* listas (tablas) */
.tablewrap{overflow-x:auto;background:rgb(var(--c-surface));border-radius:12px;box-shadow:var(--shadow-group)}
.ledger{width:100%;border-collapse:collapse}
.ledger th{font-size:11.5px;font-weight:600;color:var(--label-2);text-align:left;padding:11px 14px 8px;border-bottom:.5px solid var(--sep);white-space:nowrap}
.ledger td{padding:10px 14px;border-bottom:.5px solid var(--sep);vertical-align:middle}
.ledger tbody tr:last-child td{border-bottom:none}
.ledger tbody tr:hover td{background:rgb(var(--c-fill)/.06)}
.ledger .n{text-align:right;white-space:nowrap}
.ledger tr.sum td{font-weight:700;background:rgb(var(--c-fill)/.07)}
.ledger tr.sum:hover td{background:rgb(var(--c-fill)/.07)}
.num{font-weight:600}
.ledger td.num{white-space:nowrap}
.empty{padding:52px 20px;text-align:center;color:var(--label-2);background:rgb(var(--c-surface));border-radius:12px;box-shadow:var(--shadow-group)}
.empty p{margin:0 0 14px;font-size:15px}

/* estados */
.stamp{display:inline-flex;align-items:center;gap:5px;border:none;border-radius:999px;padding:2px 9px 2px 8px;font:600 11.5px/1.5 var(--font);white-space:nowrap;background:rgb(var(--c-fill)/.14);color:var(--label-2)}
.stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.stamp.ok{background:rgb(var(--c-green)/.15);color:rgb(var(--c-green-t))}
.stamp.due{background:rgb(var(--c-red)/.13);color:rgb(var(--c-red-t))}
.stamp.pend{background:rgb(var(--c-orange)/.16);color:rgb(var(--c-orange-t))}
.stamp.info{background:rgb(var(--c-blue)/.13);color:rgb(var(--c-tint))}
button.stamp{cursor:pointer;transition:transform .1s ease-out}
button.stamp:active{transform:scale(.95)}

/* grupos */
.block{background:rgb(var(--c-surface));border-radius:14px;padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-group)}
.block .tablewrap{box-shadow:none;border-radius:0 0 14px 14px;margin:6px -20px -18px;border-top:.5px solid var(--sep)}
.block-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.block-h h3{margin:0}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;margin-bottom:18px}
.split>.block{margin:0}

/* panel */
.statement{width:100%;border-collapse:collapse;font-size:14.5px}
.statement td{padding:11px 0;border-bottom:.5px solid var(--sep)}
.statement td.n{text-align:right}
.statement .op{width:22px;color:var(--label-3);font-weight:600}
.statement tr.res td{border-bottom:none;font-weight:700;font-size:17px;padding-top:13px}
.reserve{display:flex;gap:24px;align-items:center}
.ring{width:136px;height:136px;flex:none}
.ring .rq{font:700 22px var(--rounded);fill:var(--label)}
.ring .rs{font:500 12px var(--font);fill:var(--label-2)}
.reserve .lbl{font-size:13px;font-weight:600;color:var(--label-2)}
.reserve .big{font-family:var(--rounded);font-size:40px;font-weight:700;letter-spacing:-.005em;line-height:1.05;margin:4px 0 14px}
.reserve .parts{display:flex;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--label-2)}
.reserve .parts i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.reserve .parts b{display:block;color:var(--label);font-size:15px;margin-top:1px}
.deadline{margin-top:14px;font-size:12.5px;color:var(--label-2)}
.deadline b{color:var(--label)}
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.steps li{display:flex;gap:9px;align-items:center;padding:10px 12px;border-radius:10px;background:rgb(var(--c-fill)/.08);font-size:13.5px}
.steps li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--label-3)}
.steps li.done{color:var(--label-2)}
.steps li.done::before{box-shadow:none;background:rgb(var(--c-green)) url("img/bbacd0ce7824.svg") center/18px no-repeat}

/* gráfico */
.chart{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:170px;align-items:end;border-bottom:.5px solid var(--sep-strong);padding-top:8px}
.chart .m{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.chart .b{width:36%;max-width:16px;border-radius:4px 4px 1px 1px;background:rgb(var(--c-blue));min-height:2px}
.chart .b.g{background:rgb(var(--c-orange))}
.chart-l{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font-size:11px;color:var(--label-2);text-align:center;margin-top:6px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--label-2)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* control segmentado */
.qtabs{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:rgb(var(--c-fill)/.14)}
.qtabs button{all:unset;cursor:pointer;padding:5px 14px;border-radius:7px;font-weight:500;font-size:13px;color:var(--label)}
.qtabs button:active{background:rgb(var(--c-fill)/.12)}
.qtabs button.active{background:rgb(var(--c-btn));box-shadow:0 0 0 .5px rgb(0 0 0/.1),0 2px 5px rgb(0 0 0/.1);font-weight:600}

/* impuestos */
.tax{width:100%;border-collapse:collapse}
.tax td,.tax th{padding:9px 0;border-bottom:.5px solid var(--sep);text-align:left}
.tax th{font-size:11.5px;font-weight:600;color:var(--label-2);padding-top:16px}
.tax th.n,.tax td.n{text-align:right;white-space:nowrap;padding-left:14px}
.tax .cas{display:inline-block;font-size:10.5px;font-weight:600;color:var(--label-2);background:rgb(var(--c-fill)/.12);border-radius:5px;padding:0 5px;margin-left:7px;vertical-align:1px}
.tax tr.res td{font-weight:700;font-size:16px;border-bottom:none;padding-top:13px}
.tax-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start;margin-bottom:18px}
.tax-cols>.block{margin:0}

/* formularios */
label,.lbl-f{display:block;font-size:12.5px;font-weight:500;color:var(--label-2);margin:0 0 5px}
input,select,textarea{width:100%;min-height:32px;padding:6px 10px;border:none;border-radius:8px;font:inherit;font-size:14px;background:rgb(var(--c-field));color:var(--label);box-shadow:inset 0 0 0 .5px var(--sep-strong),0 .5px 1px rgb(0 0 0/.04);transition:box-shadow .12s ease-out}
input::placeholder,textarea::placeholder{color:var(--label-3)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:inset 0 0 0 1px rgb(var(--c-blue)),0 0 0 3.5px rgb(var(--c-blue)/.3)}
input:disabled,select:disabled{opacity:.5}
select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;background-image:url("img/20eef9f67acb.svg");background-repeat:no-repeat;background-position:right 9px center;background-size:10px 14px}
.toolbar select{background-color:rgb(var(--c-btn));box-shadow:0 0 0 .5px rgb(0 0 0/.16),0 1px 1.5px rgb(0 0 0/.08);font-weight:500;font-size:13.5px;min-height:30px}
textarea{resize:vertical;line-height:1.4}
input[type=checkbox]{width:16px;height:16px;min-height:0;accent-color:rgb(var(--c-blue));margin:0;box-shadow:none}
.check{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--label);font-size:14px;margin-top:6px}
.g2,.g3,.g4{display:grid;gap:14px;margin-bottom:14px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:6px}
.fs{border:none;margin:0 0 16px;padding:14px 18px 4px;background:rgb(var(--c-surface));border-radius:12px;box-shadow:var(--shadow-group);min-width:0}
.fs legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:13px;font-weight:600;color:var(--label)}
.fs legend+*{clear:both}
.note{background:rgb(var(--c-orange)/.12);color:var(--label);padding:10px 14px;font-size:13px;margin:0 0 14px;border-radius:10px;line-height:1.45}
.note.blue{background:rgb(var(--c-blue)/.1)}
.attach{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--sep-strong);border-radius:11px;padding:12px 14px;margin-bottom:12px}
.attach.has{border-style:solid;border-width:.5px;background:rgb(var(--c-fill)/.05)}
.attach .fi{width:32px;height:38px;flex:none;border-radius:4px 10px 4px 4px;background:rgb(var(--c-red));color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:800;letter-spacing:.02em}
.attach:not(.has) .fi{background:none;box-shadow:inset 0 0 0 1.5px var(--label-3);color:var(--label-2)!important;border-style:solid!important;font-size:16px}
.attach .grow{flex:1;min-width:0}
.attach .grow div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* líneas de factura */
table.lines{width:100%;border-collapse:collapse;margin:4px 0 8px}
table.lines th{font-size:11.5px;font-weight:600;color:var(--label-2);text-align:left;padding:6px 4px;border-bottom:.5px solid var(--sep)}
table.lines td{padding:6px 4px;vertical-align:top}
table.lines .n{text-align:right}
table.lines input.n{text-align:right}
table.lines textarea{min-height:34px}
table.lines td.imp{padding-top:12px;font-weight:600}
.tot{margin:12px 0 16px auto;width:320px;font-size:14px;background:rgb(var(--c-fill)/.06);border-radius:11px;padding:6px 14px}
.tot div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:.5px solid var(--sep)}
.tot div:last-child{border-bottom:none}
.tot .t{font-weight:700;font-size:17px}

/* hoja modal */
.modal-bg{position:fixed;inset:0;background:rgb(0 0 0/.3);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:50;animation:dim .22s ease-out}
.modal{background:rgb(var(--c-bg));border-radius:16px;width:100%;max-width:680px;box-shadow:0 0 0 .5px rgb(0 0 0/.2),0 28px 70px rgb(0 0 0/.3);animation:sheet .34s cubic-bezier(.32,.72,0,1);transform-origin:50% 0}
.modal.wide{max-width:960px}
@keyframes sheet{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dim{from{opacity:0}to{opacity:1}}
.mh{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px}
.mh h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em}
.x{all:unset;cursor:pointer;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgb(var(--c-fill)/.16);color:var(--label-2);font-size:17px;line-height:1;transition:transform .1s}
.x:hover{background:rgb(var(--c-fill)/.24)}
.x:active{transform:scale(.92)}
.mb{padding:2px 22px 14px}
.mf{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 22px 16px;flex-wrap:wrap}
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,10px) scale(.96);background:rgb(var(--c-surface)/.82);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);color:var(--label);padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:0 0 0 .5px rgb(0 0 0/.12),0 10px 30px rgb(0 0 0/.18);opacity:0;transition:opacity .2s ease-out,transform .32s cubic-bezier(.32,.72,0,1);pointer-events:none;z-index:99}
#toast.on{opacity:1;transform:translate(-50%,0) scale(1)}#toast.err{color:rgb(var(--c-red-t))}
.preview{background:#fff;border-radius:10px;padding:36px 40px;max-height:68vh;overflow:auto;box-shadow:var(--shadow-group)}

/* factura (siempre clara) */
.inv{font-family:var(--font);font-size:12.5px;line-height:1.5;color:#1d1d1f;letter-spacing:-.005em}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:20px;border-bottom:.75px solid #d2d2d7}
.inv-logo{max-height:60px;max-width:190px;display:block;margin-bottom:12px}
.inv-em{color:#424245}
.inv-em strong{font-size:15px;font-weight:700;display:block;margin-bottom:2px;color:#1d1d1f}
.inv-tt{text-align:right}
.inv-tt .k{font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1}
.inv-tt .nr{font-size:15px;font-weight:600;color:#0066cc;margin-top:7px}
.inv-mid{display:flex;justify-content:space-between;gap:30px;padding:20px 0 26px}
.inv-to{color:#424245}
.inv-to .l,.inv-dates .l{font-weight:600;color:#86868b;font-size:11px;margin-bottom:4px}
.inv-to strong{font-size:14px;font-weight:600;color:#1d1d1f}
.inv-dates table{border-collapse:collapse}
.inv-dates td{padding:2px 0 2px 18px;text-align:right}
.inv-dates td:first-child{color:#86868b}
.inv-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.inv-lines th{font-weight:600;font-size:11px;color:#86868b;text-align:left;padding:8px 10px;background:#f5f5f7}
.inv-lines th:first-child{border-radius:8px 0 0 8px}.inv-lines th:last-child{border-radius:0 8px 8px 0}
.inv-lines td{padding:10px;border-bottom:.75px solid #e8e8ed;white-space:pre-line;vertical-align:top}
.inv-lines .n{text-align:right;white-space:nowrap}
.inv-tot{width:290px;margin:18px 0 0 auto;font-variant-numeric:tabular-nums}
.inv-tot div{display:flex;justify-content:space-between;padding:4px 10px;color:#424245}
.inv-tot .t{font-size:16px;font-weight:700;color:#fff;background:#1d1d1f;border-radius:9px;padding:9px 10px;margin-top:8px}
.inv-foot{margin-top:36px;font-size:11.5px;color:#6e6e73}
.inv-foot p{margin:0 0 9px}
.inv-legal{background:#f5f5f7;border-radius:8px;padding:9px 12px;color:#1d1d1f}
.inv-foot b{color:#1d1d1f}

#print{display:none}
@media print{
  @page{size:A4;margin:0}
  #print .inv{padding:15mm}
  html,body{background:#fff!important}
  body{background:#fff}
  .app,#modal-root,#toast{display:none!important}
  #print{display:block}
  .inv{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}.sidebar{min-width:0}
  .sidebar{position:sticky;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-right:none;border-bottom:.5px solid var(--sep-strong)}
  .sb-title{padding:0 4px;flex:1}.sb-sec{display:none}
  .binder{flex-direction:row;overflow-x:auto;width:100%;order:3;scrollbar-width:none}
  .binder button{white-space:nowrap}
  .filebox{margin:0;order:2;flex-direction:row;align-items:center;flex-wrap:wrap;padding:8px 10px}.filebox .btn{width:auto}
  .content{padding:4px 16px 48px}.toolbar{margin:0 -16px 12px;padding:10px 16px;top:0}
  .split,.tax-cols,.g3,.g4{grid-template-columns:1fr}
  h2{font-size:25px}.reserve{flex-direction:column;align-items:flex-start}.reserve .big{font-size:34px}.tot{width:100%}
}
@media screen and (max-width:700px){.inv-top,.inv-mid{flex-direction:column;gap:14px}.inv-tt{text-align:left}}
@media (max-width:560px){.g2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.modal{animation:dim .2s ease-out}#toast{transition:opacity .2s}.btn,.x,button.stamp{transition:none}.btn:active{transform:none}}
@media (prefers-reduced-transparency:reduce){.sidebar{background:rgb(var(--c-sidebar))}.toolbar{background:rgb(var(--c-bg))}#toast{background:rgb(var(--c-surface))}.sidebar,.toolbar,#toast{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){:root{--sep:rgb(var(--c-sep)/.45);--sep-strong:rgb(var(--c-sep)/.7)}.btn,.toolbar select{box-shadow:0 0 0 1px var(--label-2)}}
/* ===== Capa de cristal (Liquid Glass) ===== */
:root{
  color-scheme:light;
  --gl:255 255 255;
  --glass:rgb(var(--gl)/var(--cristal-opacidad));--glass-strong:rgb(var(--gl)/calc(var(--cristal-opacidad) + .14));--glass-soft:rgb(var(--gl)/calc(var(--cristal-opacidad) - .18));
  --glass-blur:blur(var(--cristal-desenfoque)) saturate(190%);
  --glass-edge:rgb(var(--gl)/.75);
  --glass-shadow:inset 0 1px 0 rgb(var(--gl)/.95),inset 0 -1px 0 rgb(var(--gl)/.3),0 10px 34px -8px rgb(40 60 110/.16),0 1px 2px rgb(40 60 110/.08);
  --sep:rgb(60 60 67/.12);--sep-strong:rgb(60 60 67/.2);
  --shadow-group:var(--glass-shadow);
}
body{background:
  radial-gradient(900px 700px at 8% -8%,var(--fondo-1) 0%,transparent 62%),
  radial-gradient(800px 640px at 96% 4%,var(--fondo-2) 0%,transparent 60%),
  radial-gradient(900px 760px at 78% 104%,var(--fondo-3) 0%,transparent 60%),
  radial-gradient(760px 620px at -6% 96%,var(--fondo-4) 0%,transparent 58%),
  var(--fondo-base);background-attachment:fixed}
.app{grid-template-columns:var(--ancho-barra) minmax(0,1fr)}
.sidebar{margin:12px 0 12px 12px;height:calc(100vh - 24px);top:12px;border-radius:24px;border:1px solid var(--glass-edge);border-right:1px solid var(--glass-edge);background:linear-gradient(160deg,rgb(var(--gl)/.62),rgb(var(--gl)/.36));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);padding:18px 12px 12px}
.binder button{border-radius:13px;padding:8px 12px}
.binder button:hover{background:rgb(var(--gl)/.55)}
.binder button.active{background:linear-gradient(180deg,rgb(var(--c-blue)/.8),rgb(var(--c-blue)));box-shadow:inset 0 1px 0 rgb(var(--gl)/.35),0 4px 14px -4px rgb(0 110 240/.55)}
.filebox{background:rgb(var(--gl)/.5);border:1px solid var(--glass-edge);border-radius:14px;box-shadow:inset 0 1px 0 rgb(var(--gl)/.9)}
.content{padding:12px 32px 64px}
.toolbar{top:12px;margin:0 -12px 16px;padding:10px 14px;border-radius:20px;background:var(--glass-soft);border:1px solid rgb(var(--gl)/.6);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.toolbar h2{padding-left:4px}
h2{margin-top:18px}

.block,.tablewrap,.empty,.fs,.reserve{background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.block{border-radius:var(--radio-panel);padding:20px 22px}
.block .tablewrap{background:transparent;border:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;margin:6px -22px -20px;border-radius:0 0 var(--radio-panel) var(--radio-panel);border-top:1px solid var(--sep)}
.tablewrap,.empty{border-radius:calc(var(--radio-panel) - 2px)}
.ledger th{background:rgb(var(--gl)/.35)}
.ledger tbody tr:hover td{background:rgb(var(--gl)/.55)}
.ledger tr.sum td,.ledger tr.sum:hover td{background:rgb(var(--gl)/.45)}
.reserve{position:relative;overflow:hidden;background:linear-gradient(140deg,rgb(var(--gl)/.72),rgb(236 240 255/.5) 55%,rgb(226 236 255/.42))}
.reserve::before{content:"";position:absolute;inset:-40% 40% auto -20%;height:120%;background:radial-gradient(closest-side,rgb(120 150 255/.22),transparent);pointer-events:none}
.reserve>*{position:relative}
.steps li{background:rgb(var(--gl)/.5);border:1px solid rgb(var(--gl)/.7);border-radius:14px}
.tot{background:rgb(var(--gl)/.5);border:1px solid rgb(var(--gl)/.7);border-radius:16px}
.note{background:rgb(255 236 214/.62);border:1px solid rgb(var(--gl)/.7);border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.note.blue{background:rgb(214 232 255/.62)}
.attach{border-radius:16px;background:rgb(var(--gl)/.35)}
.attach.has{background:rgb(var(--gl)/.55);border:1px solid var(--glass-edge)}
.fs{border-radius:calc(var(--radio-panel) - 2px)}

/* controles de cristal, en cápsula */
.btn,.toolbar select{border-radius:var(--radio-boton);background-color:rgb(var(--gl)/.62);border:1px solid rgb(var(--gl)/.85);box-shadow:inset 0 1px 0 rgb(var(--gl)/.9),0 2px 8px -2px rgb(40 60 110/.18),0 0 0 .5px rgb(40 60 110/.1);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);padding-left:15px;padding-right:15px}
.toolbar select{padding-right:32px;background-color:rgb(var(--gl)/.62)}
.btn:hover{background:rgb(var(--gl)/.82);filter:none}
.btn.primary{background:linear-gradient(180deg,rgb(var(--acento)/.78),rgb(var(--acento)));border-color:rgb(var(--gl)/.35);color:#fff;box-shadow:inset 0 1px 0 rgb(var(--gl)/.45),inset 0 -1px 0 rgb(0 40 120/.2),0 6px 16px -6px rgb(0 113 232/.7)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{min-height:26px}
.lnk:hover{background:rgb(var(--gl)/.6)}
.qtabs{background:rgb(var(--gl)/.4);border:1px solid rgb(var(--gl)/.7);border-radius:999px;padding:3px;box-shadow:inset 0 1px 2px rgb(40 60 110/.08)}
.qtabs button{border-radius:999px;padding:5px 15px}
.qtabs button.active{background:rgb(var(--gl)/.92);box-shadow:inset 0 1px 0 #fff,0 3px 10px -2px rgb(40 60 110/.22)}
.stamp{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
input,select,textarea{background-color:rgb(var(--gl)/.66);border-radius:12px;box-shadow:inset 0 0 0 1px rgb(var(--gl)/.8),inset 0 1px 2px rgb(40 60 110/.08),0 0 0 .5px rgb(40 60 110/.12)}
input:focus,select:focus,textarea:focus{background-color:rgb(var(--gl)/.9);box-shadow:inset 0 0 0 1px rgb(var(--c-blue)),0 0 0 4px rgb(var(--c-blue)/.22)}
.chart .b{background:linear-gradient(180deg,#5AB0FF,rgb(var(--c-blue)))}
.chart .b.g{background:linear-gradient(180deg,#FFB466,rgb(var(--c-orange)))}

/* hoja modal de cristal */
.modal-bg{background:rgb(30 45 80/.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal{background:linear-gradient(170deg,rgb(250 252 255/.8),rgb(240 244 252/.72));border:1px solid rgb(var(--gl)/.85);border-radius:28px;-webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%);box-shadow:inset 0 1px 0 #fff,0 40px 90px -20px rgb(30 45 90/.35),0 0 0 .5px rgb(40 60 110/.12)}
.modal .fs{background:rgb(var(--gl)/.6);-webkit-backdrop-filter:none;backdrop-filter:none}
.modal .tablewrap{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(var(--gl)/.6)}
.preview{border-radius:18px}
.x{background:rgb(var(--gl)/.7);border:1px solid rgb(var(--gl)/.9);box-shadow:0 1px 3px rgb(40 60 110/.15)}
#toast{background:rgb(var(--gl)/.66);border:1px solid rgb(var(--gl)/.85);box-shadow:inset 0 1px 0 #fff,0 14px 40px -10px rgb(30 45 90/.35)}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{margin:10px 10px 0;height:auto;top:0;border-radius:22px;position:relative}
  .content{padding:8px 14px 48px}.toolbar{top:8px;margin:0 -4px 12px}
}
@media (prefers-reduced-transparency:reduce){
  .sidebar,.toolbar,.block,.tablewrap,.empty,.fs,.reserve,.modal,#toast,.btn,.toolbar select,.note{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .btn.primary{background:rgb(var(--c-blue))!important}
}

/* Impresión: la factura siempre sobre blanco */
@media print{html,body{background:#fff!important}}

/* Modo prueba: aviso arriba y marca de agua en las facturas */
.test-banner{position:sticky;top:12px;z-index:6;margin:12px 0 4px;padding:10px 16px;border-radius:16px;background:rgb(255 214 10/.85);color:#3d2e00;font-size:13px;border:1px solid rgb(255 255 255/.7);box-shadow:0 8px 24px -10px rgb(160 120 0/.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.inv{position:relative}
.inv-prueba{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:120px;font-weight:800;color:rgb(0 0 0/.06);transform:rotate(-24deg);pointer-events:none}

/* Selector de entorno (barra lateral) */
.envswitch{display:flex;gap:2px;padding:3px;margin:auto 0 10px;border-radius:999px;background:rgb(var(--gl)/.45);border:1px solid rgb(var(--gl)/.75);box-shadow:inset 0 1px 2px rgb(40 60 110/.08)}
.envswitch button{all:unset;flex:1;text-align:center;cursor:pointer;padding:6px 0;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--label-2);transition:background .15s,color .15s}
.envswitch button:hover{color:var(--label)}
.envswitch button.active{background:rgb(var(--gl)/.95);color:var(--label);box-shadow:inset 0 1px 0 #fff,0 2px 8px -2px rgb(40 60 110/.25)}
.envswitch button.active.test{background:rgb(255 214 10);color:#3d2e00}
.envswitch+.filebox{margin-top:0}
body.env-test .sidebar{border-color:rgb(255 214 10/.9);box-shadow:var(--glass-shadow),0 0 0 2px rgb(255 214 10/.55)}

/* Presupuesto: zona de firma */
.inv-sign{display:flex;justify-content:flex-end;margin:26px 0 18px}
.inv-sign>div{width:260px;font-size:11px;color:#6e6e73}
.inv-sign span{display:block;color:#1d1d1f;font-weight:600;margin-bottom:34px}
.inv-sign i{display:block;border-bottom:.75px solid #86868b;margin-bottom:4px}

/* Barra lateral plegable */
.app{transition:grid-template-columns .28s cubic-bezier(.32,.72,0,1)}
.sb-title{position:relative}
.sb-toggle{all:unset;cursor:pointer;margin-left:auto;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--label-2);transition:background .12s}
.sb-toggle:hover{background:rgb(var(--gl)/.6);color:var(--label)}
.sb-toggle:active{transform:scale(.94)}
.sb-toggle svg{width:18px;height:18px}
.envswitch .short{display:none}
body.sb-collapsed .app{grid-template-columns:var(--ancho-barra-plegada) minmax(0,1fr)}
body.sb-collapsed .sidebar{padding:16px 10px 12px;align-items:center}
body.sb-collapsed .sb-title{flex-direction:column;gap:12px;padding:0 0 14px}
body.sb-collapsed .sb-title>div:not(.app-icon),body.sb-collapsed .sb-sec,body.sb-collapsed .binder span,body.sb-collapsed .filebox{display:none}
body.sb-collapsed .sb-toggle{margin:0}
body.sb-collapsed .sb-toggle svg{transform:scaleX(-1)}
body.sb-collapsed .binder{align-items:center}
body.sb-collapsed .binder button{justify-content:center;width:22px;padding:9px 12px}
body.sb-collapsed .envswitch{flex-direction:column;width:100%;border-radius:16px}
body.sb-collapsed .envswitch .full{display:none}
body.sb-collapsed .envswitch .short{display:inline}
@media (max-width:900px){.sb-toggle{display:none}body.sb-collapsed .app{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.app{transition:none}}
.sb-title>div:nth-child(2){flex:1;min-width:0}
.sb-title span{max-width:100%}

/* Botón de tema y selector de entorno plegado */
.sb-theme .i-sun{display:none}
:root[data-theme="dark"] .sb-theme .i-sun{display:grid}
:root[data-theme="dark"] .sb-theme .i-moon{display:none}
.sb-toggle span{display:grid;place-items:center}
.sb-theme{margin-left:auto}
.sb-theme+.sb-toggle{margin-left:0}
.envswitch .env-one{display:none}
body.sb-collapsed .envswitch{padding:3px;width:auto;border-radius:999px}
body.sb-collapsed .envswitch>button:not(.env-one){display:none}
body.sb-collapsed .env-one{all:unset;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:13px;font-weight:700;background:rgb(var(--gl)/.95);color:var(--label);box-shadow:inset 0 1px 0 rgb(var(--gl)/1),0 2px 8px -2px rgb(40 60 110/.25);transition:transform .12s}
body.sb-collapsed .env-one.test{background:rgb(255 214 10);color:#3d2e00}
body.sb-collapsed .env-one:active{transform:scale(.92)}

/* Panel: bienvenida y métricas */
.hello-bar h2{letter-spacing:-.01em}
.lede.hello{font-size:14px;max-width:none;margin:2px 4px 18px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);border-radius:calc(var(--radio-panel) - 4px);padding:15px 18px 14px;min-width:0}
.kpi.link{cursor:pointer;transition:transform .12s ease-out}
.kpi.link:hover{background:rgb(var(--gl)/calc(var(--cristal-opacidad) + .12))}
.kpi.link:active{transform:scale(.985)}
.kpi-l{font-size:12.5px;font-weight:500;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-family:var(--rounded);font-size:25px;font-weight:700;letter-spacing:-.01em;margin:4px 0 2px;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-s{font-size:12px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-d{font-family:var(--font);font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:999px}
.kpi-d.up{background:rgb(var(--c-green)/.15);color:rgb(var(--c-green-t))}
.kpi-d.down{background:rgb(var(--c-red)/.12);color:rgb(var(--c-red-t))}
.split.wide{grid-template-columns:1.6fr 1fr}
.hbars{display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:1fr 44px;gap:5px 12px;align-items:center}
.hbar-t{display:flex;justify-content:space-between;gap:10px;font-size:13px;grid-column:1}
.hbar-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-t b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar-track{grid-column:1;height:8px;border-radius:999px;background:rgb(var(--c-fill)/.14);overflow:hidden}
.hbar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,rgb(var(--c-blue)/.7),rgb(var(--c-blue)))}
.hbar-track i.g{background:linear-gradient(90deg,rgb(var(--c-orange)/.7),rgb(var(--c-orange)))}
.hbar-p{grid-column:2;grid-row:1/span 2;text-align:right;font-size:12px;color:var(--label-2);font-variant-numeric:tabular-nums}
.plazos,.activity{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.plazos li{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--sep)}
.plazos li:last-child{border-bottom:none}
.pz-date{width:46px;flex:none;text-align:center;border-radius:12px;background:rgb(var(--gl)/.6);border:1px solid var(--glass-edge);padding:5px 0 4px;line-height:1.1}
.pz-date b{display:block;font-family:var(--rounded);font-size:18px}
.pz-date span{font-size:11px;color:var(--label-2)}
.pz-txt{flex:1;min-width:0;font-size:13.5px}
.activity li{display:flex;align-items:center;gap:12px;padding:8px 8px;margin:0 -8px;border-radius:12px;cursor:pointer}
.activity li:hover{background:rgb(var(--gl)/.55)}
.a-ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center}
.a-ico svg{width:17px;height:17px}
.a-ico.f{background:rgb(var(--c-blue)/.13);color:rgb(var(--c-tint))}
.a-ico.g{background:rgb(var(--c-orange)/.16);color:rgb(var(--c-orange-t))}
.a-ico.p{background:rgb(var(--c-indigo)/.14);color:rgb(var(--c-indigo))}
.a-txt{flex:1;min-width:0;font-size:13.5px}
.a-txt div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:1300px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.split.wide{grid-template-columns:1fr}}

/* ==========================================================================
   Modo oscuro
   ========================================================================== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --gl:34 38 52;
  --c-bg:11 15 26;--c-surface:28 30 40;--c-sidebar:20 22 30;--c-field:40 44 58;--c-btn:52 56 72;
  --c-label:255 255 255;--c-label2:235 235 245;--c-sep:120 125 145;--c-fill:150 150 165;
  --c-indigo:125 122 255;--c-green:48 209 88;--c-orange:255 159 10;--c-red:255 69 58;
  --c-green-t:74 222 128;--c-orange-t:255 179 64;--c-red-t:255 120 112;
  --label:rgb(255 255 255/.92);--label-2:rgb(235 235 245/.62);--label-3:rgb(235 235 245/.34);
  --sep:rgb(120 125 145/.22);--sep-strong:rgb(120 125 145/.34);
  --glass-edge:rgb(255 255 255/.09);
  --glass-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 14px 38px -12px rgb(0 0 0/.6),0 1px 2px rgb(0 0 0/.3);
}
:root[data-theme="dark"] .reserve{background:linear-gradient(140deg,rgb(40 46 66/.7),rgb(32 34 60/.55) 55%,rgb(26 34 58/.5))}
:root[data-theme="dark"] .reserve::before{background:radial-gradient(closest-side,rgb(90 120 255/.25),transparent)}
:root[data-theme="dark"] .note{background:rgb(120 70 10/.35);color:var(--label)}
:root[data-theme="dark"] .note.blue{background:rgb(20 70 140/.35)}
:root[data-theme="dark"] .modal{background:linear-gradient(170deg,rgb(30 34 48/.88),rgb(22 25 36/.85));border-color:rgb(255 255 255/.1);box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 40px 90px -20px rgb(0 0 0/.7)}
:root[data-theme="dark"] .modal-bg{background:rgb(0 0 0/.45)}
:root[data-theme="dark"] .btn.danger,:root[data-theme="dark"] .lnk.red{color:rgb(var(--c-red-t))}
:root[data-theme="dark"] .qtabs button.active,:root[data-theme="dark"] .envswitch button.active:not(.test){background:rgb(70 76 98);box-shadow:0 2px 8px -2px rgb(0 0 0/.5)}
:root[data-theme="dark"] .binder button.active{box-shadow:0 4px 14px -4px rgb(0 110 240/.6)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
:root[data-theme="dark"] .test-banner{background:rgb(255 204 0/.88)}
:root[data-theme="dark"] .preview{box-shadow:0 0 0 1px rgb(255 255 255/.08)}
:root[data-theme="dark"] body.sb-collapsed .env-one:not(.test){background:rgb(70 76 98);color:#fff}
.app,.sidebar,.block,.kpi,.toolbar{transition-property:grid-template-columns,background-color,border-color;transition-duration:.28s}

.sb-title{gap:8px}
.sb-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.sb-title .sb-toggle{width:26px;height:26px}

/* Pie de la barra lateral: entorno + tema */
.sb-foot{display:flex;align-items:center;gap:8px;margin:auto 0 10px}
.sb-foot .envswitch{flex:1;margin:0}
.sb-theme{all:unset;cursor:pointer;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--label-2);background:rgb(var(--gl)/.45);border:1px solid var(--glass-edge);transition:background .12s,transform .1s}
.sb-theme:hover{color:var(--label);background:rgb(var(--gl)/.8)}
.sb-theme:active{transform:scale(.93)}
.sb-theme span{display:grid;place-items:center}
.sb-theme svg{width:18px;height:18px}
.sb-title .sb-toggle{margin-left:auto}
body.sb-collapsed .sb-foot{flex-direction:column;gap:10px}
body.sb-collapsed .sb-foot .envswitch{flex:none}
.sb-foot+.filebox{margin-top:0}

/* Icono de la app */
.app-icon{background:none!important;box-shadow:none!important;border-radius:9px;overflow:visible}
.app-icon img{display:block;width:34px;height:34px;filter:drop-shadow(0 2px 4px rgb(0 60 160/.25))}

/* ==========================================================================
   Módulos ampliados (catálogo, recurrentes, banco, proyectos, informes, IA)
   ========================================================================== */
.binder .sb-sec{padding:12px 12px 4px;font-size:11px;font-weight:600;color:var(--label-3)}
.binder .sb-sec:first-child{padding-top:2px}
.sb-sep{height:1px;margin:10px 12px;background:var(--sep)}
.sidebar{overflow-y:auto;scrollbar-width:none}
.binder button{padding:7px 12px}
.sb-search{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;margin:0 2px 10px;padding:8px 12px;border-radius:12px;font-size:13px;color:var(--label-2);background:rgb(var(--gl)/.5);border:1px solid var(--glass-edge)}
.sb-search:hover{color:var(--label);background:rgb(var(--gl)/.8)}
.sb-search svg{width:16px;height:16px;flex:none}
.sb-search span{flex:1}
.sb-search kbd{font:600 10.5px var(--font);padding:2px 6px;border-radius:6px;background:rgb(var(--c-fill)/.14);color:var(--label-2)}
body.sb-collapsed .binder .sb-sec{display:none}
body.sb-collapsed .sb-sep{margin:8px 6px}
body.sb-collapsed .sb-search{justify-content:center;width:22px;padding:9px 12px;margin:0 0 8px}
body.sb-collapsed .sb-search span,body.sb-collapsed .sb-search kbd{display:none}
.crumbs{font-size:12.5px;color:var(--label-2);margin:14px 4px 2px}
.crumbs span{margin:0 4px;color:var(--label-3)}
.sep-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--label-3);margin:0 10px;vertical-align:middle}
.pos{color:rgb(var(--c-green-t))}
.sel-inline{width:auto;min-height:28px;font-size:13px;padding:3px 30px 3px 12px}
.lines-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lnk.ia,.ia-btn{display:inline-flex;align-items:center;gap:6px}
.ico-ia{width:15px;height:15px;color:rgb(var(--c-indigo))}
.btn.ia-btn{background:linear-gradient(180deg,rgb(var(--c-indigo)/.12),rgb(var(--c-indigo)/.06)),rgb(var(--gl)/.62);border-color:rgb(var(--c-indigo)/.3)}
.btn.ia-btn:disabled .ico-ia{opacity:.5}
.ia-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.spin{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:giro .7s linear infinite;vertical-align:-2px}
@keyframes giro{to{transform:rotate(360deg)}}
.loading{opacity:.85}

/* Avisos del panel */
.alerts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.alert{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;font-size:13px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.al-dot{width:8px;height:8px;border-radius:50%;background:rgb(var(--c-blue));flex:none}
.alert.due .al-dot{background:rgb(var(--c-red))}

/* Proyectos */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pcard{cursor:pointer;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--radio-panel);padding:16px 18px;display:grid;gap:12px;transition:transform .12s}
.pcard:active{transform:scale(.99)}
.pc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pc-n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pc-n span{display:block;font-size:11.5px;color:var(--label-2)}
.pc-n b{font-size:15px;font-variant-numeric:tabular-nums}
.pc-a{display:flex;gap:8px;flex-wrap:wrap}
#timerpill{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;font-size:13px;background:rgb(var(--gl)/.75);border:1px solid var(--glass-edge);box-shadow:0 12px 32px -10px rgb(30 45 90/.4);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
#timerpill b{font-variant-numeric:tabular-nums;font-size:14px}
.tp-dot{width:9px;height:9px;border-radius:50%;background:rgb(var(--c-red));animation:latido 1.4s ease-in-out infinite}
@keyframes latido{50%{opacity:.35}}
.tp-name{all:unset;cursor:pointer;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-ico.c{background:rgb(var(--c-green)/.15);color:rgb(var(--c-green-t))}

/* Banco */
.mov-c{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger td.acts.mov-a{white-space:normal;text-align:right}
.mov-a .btn{margin:2px 0}
.muted-l{color:var(--label-2)!important}
.fc-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;height:170px;align-items:end}
.fc-col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.fc-v{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-track{flex:1;width:56%;display:flex;align-items:flex-end}
.fc-track i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#5AB0FF,rgb(var(--c-blue)))}
.fc-track i.neg{background:linear-gradient(180deg,#FF8A80,rgb(var(--c-red)))}
.fc-l{font-size:11.5px;color:var(--label-2);text-align:center}

/* Informes */
.ledger.pyg td,.ledger.pyg th{padding:8px 10px;font-size:12.5px}
.ledger.pyg td:first-child{white-space:nowrap}
.pyg-cat td{color:var(--label-2)}
.pyg-ing td,.pyg-gas td{font-weight:600}
.chart .b.prev{background:rgb(var(--c-fill)/.45)}

/* Asistente */
.chat{display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - 330px);padding:6px 4px 14px}
.msg{max-width:min(760px,86%);padding:11px 15px;border-radius:18px;font-size:14px;line-height:1.55}
.msg.user{align-self:flex-end;background:rgb(var(--c-blue));color:#fff;border-bottom-right-radius:6px;white-space:pre-wrap}
.msg.assistant{align-self:flex-start;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom-left-radius:6px}
.msg p{margin:0 0 8px}.msg p:last-child{margin:0}
.msg ul{margin:4px 0 8px;padding-left:20px}
.chat-empty{margin:auto;text-align:center;max-width:620px;color:var(--label-2)}
.ce-ico{width:56px;height:56px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;background:rgb(var(--c-indigo)/.12)}
.ce-ico .ico-ia{width:28px;height:28px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.chip{all:unset;cursor:pointer;padding:8px 14px;border-radius:999px;font-size:13px;color:var(--label);background:rgb(var(--gl)/.6);border:1px solid var(--glass-edge)}
.chip:hover{background:rgb(var(--gl)/.9)}
.chat-in{position:sticky;bottom:14px;display:flex;gap:10px;align-items:flex-end;padding:10px;border-radius:22px;background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.chat-in textarea{min-height:40px;max-height:160px;border-radius:14px}

/* Revisión fiscal */
.rev{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rv{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;padding:9px 12px;border-radius:12px;background:rgb(var(--gl)/.45)}
.rv-i{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:rgb(var(--c-blue))}
.rv.err .rv-i{background:rgb(var(--c-red))}.rv.warn .rv-i{background:rgb(var(--c-orange))}.rv.ok .rv-i{background:rgb(var(--c-green))}
.rv-t{flex:1}
.rev-ia{margin-top:14px;padding-top:12px;border-top:1px solid var(--sep)}

/* Búsqueda */
.q-res{margin-top:12px;max-height:56vh;overflow:auto}
.q-g{font-size:11.5px;font-weight:600;color:var(--label-3);margin:12px 4px 4px}
.q-it{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;font-size:13.5px}
.q-it:hover,.q-it:focus-visible{background:rgb(var(--c-blue)/.1)}
.q-it span{color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.fc-bars{height:140px}.pc-n{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.spin,.tp-dot{animation:none}}
.tablewrap+.note,.tablewrap+.block,.empty+.note{margin-top:14px}

/* Acciones propuestas por el asistente */
.act-card{margin-top:10px;border-radius:14px;padding:12px 14px;background:rgb(var(--gl)/.7);border:1px solid rgb(var(--c-indigo)/.25);min-width:280px}
.ac-h{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13.5px}
.act-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0 0 10px;font-size:13px}
.act-card dt{color:var(--label-2)}
.act-card dd{margin:0;font-weight:500}
.ac-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Inter: cifras alineadas en tablas, importes y KPIs */
td,th,.num,.kpi-v,.reserve .big,.pz-date b,.inv-lines,.inv-tot,input[type=number]{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Versión 3: contabilidad, CRM, agenda, bandeja, objetivos
   ========================================================================== */
/* barra lateral: con más secciones, se desplaza por dentro */
.binder{overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin;margin-right:-6px;padding-right:6px;padding-bottom:18px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
.binder button{padding-top:5.5px;padding-bottom:5.5px}
.sb-sec{margin-top:6px}
.ct-tabbar{margin:0 0 16px}

/* pestañas largas */
.ct-tabs{flex-wrap:wrap}

/* libro diario */
.ledger.diario tr.as-h td{background:rgb(var(--c-fill)/.06);border-bottom:none;padding-top:12px}
.ledger.diario tr.as-l td{padding-top:5px;padding-bottom:5px;border-bottom:none}
.ledger.diario tr.as-l:last-of-type td{border-bottom:.5px solid var(--sep)}
.ledger tr.bl-h td{background:rgb(var(--c-fill)/.05);padding-top:12px}

/* etiquetas */
.tag{all:unset;display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgb(var(--c-indigo)/.12);color:rgb(var(--c-indigo));margin:0 2px 2px 0;vertical-align:1px}
button.tag{cursor:pointer;font-size:12px;padding:4px 11px;background:rgb(var(--c-fill)/.12);color:var(--label)}
button.tag.on{background:rgb(var(--c-blue));color:#fff}
.tagbar{display:flex;flex-wrap:wrap;gap:4px;margin:-6px 0 14px}
.tipo-fac{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* tablero (oportunidades y tareas) */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;margin-top:6px}
.kanban.k3{grid-auto-columns:minmax(180px,1fr)}
.kcol{background:rgb(var(--c-fill)/.08);border-radius:16px;padding:10px;min-height:120px;display:flex;flex-direction:column;gap:8px;transition:background .15s,box-shadow .15s}
.kcol.over{background:rgb(var(--c-blue)/.1);box-shadow:inset 0 0 0 2px rgb(var(--c-blue)/.45)}
.kcol.won{background:rgb(var(--c-green)/.08)}
.kcol.lost{background:rgb(var(--c-red)/.06)}
.kcol-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 4px 4px}
.kcard{background:rgb(var(--c-btn,255 255 255));border-radius:12px;padding:10px 12px;box-shadow:0 0 0 .5px rgb(0 0 0/.08),0 2px 6px rgb(0 0 0/.06);cursor:grab;display:flex;flex-direction:column;gap:3px;font-size:13px}
.kcard:hover{box-shadow:0 0 0 .5px rgb(0 0 0/.12),0 4px 12px rgb(0 0 0/.1)}
.kcard.drag{opacity:.45}
.kc-f{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.kadd{all:unset;cursor:pointer;color:rgb(var(--c-tint));font-size:13px;font-weight:500;padding:6px 8px;border-radius:8px}
.kadd:hover{background:rgb(var(--c-fill)/.1)}

/* agenda */
.cal-wrap{padding:12px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-h{font-size:11.5px;font-weight:600;color:var(--label-2);text-align:center;padding:4px 0}
.cal-d{min-height:92px;border-radius:10px;background:rgb(var(--c-fill)/.06);padding:5px;display:flex;flex-direction:column;gap:2px;cursor:pointer;overflow:hidden}
.cal-d:hover{background:rgb(var(--c-fill)/.12)}
.cal-d.out{background:none;cursor:default}
.cal-d.hoy{box-shadow:inset 0 0 0 2px rgb(var(--c-blue))}
.cal-n{font-size:12px;font-weight:600;color:var(--label-2);padding:0 3px}
.cal-d.hoy .cal-n{color:rgb(var(--c-tint))}
.cal-e{all:unset;cursor:pointer;font-size:11px;line-height:1.3;padding:2px 5px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgb(var(--c-blue)/.13);color:rgb(var(--c-tint))}
.cal-e.task{background:rgb(var(--c-indigo)/.13);color:rgb(var(--c-indigo))}
.cal-e.tax{background:rgb(var(--c-orange)/.16);color:rgb(var(--c-orange-t))}
.cal-e.inv{background:rgb(var(--c-green)/.15);color:rgb(var(--c-green-t))}
.cal-e.exp{background:rgb(var(--c-fill)/.16);color:var(--label)}
.cal-e.op{background:rgb(175 82 222/.14);color:rgb(150 60 200)}
.cal-e.late{background:rgb(var(--c-red)/.13);color:rgb(var(--c-red-t))}
.cal-e.done{opacity:.5;text-decoration:line-through}
.cal-ley{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--label-2);flex-wrap:wrap}
.cal-ley i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-left:6px;background:rgb(var(--c-blue)/.5)}
.cal-ley i.task{background:rgb(var(--c-indigo)/.55)}.cal-ley i.tax{background:rgb(var(--c-orange)/.6)}.cal-ley i.inv{background:rgb(var(--c-green)/.6)}.cal-ley i.exp{background:rgb(var(--c-fill)/.45)}.cal-ley i.op{background:rgb(175 82 222/.55)}

/* bandeja */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:34px 20px;margin-bottom:18px;border:2px dashed rgb(var(--c-blue)/.35);border-radius:20px;background:rgb(var(--c-blue)/.04);cursor:pointer;transition:background .15s,border-color .15s}
.dropzone:hover,.dropzone.over{background:rgb(var(--c-blue)/.1);border-color:rgb(var(--c-blue)/.7)}
.dropzone svg{width:34px;height:34px;color:rgb(var(--c-tint))}

/* objetivos */
.obj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 22px}
.obj{display:flex;flex-direction:column;gap:6px}
.obj-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.obj-t{position:relative;height:10px;overflow:visible}
.obj-t i{border-radius:999px}
.obj-t.ok i{background:linear-gradient(90deg,rgb(var(--c-green)/.7),rgb(var(--c-green)))}
.obj-t.pend i{background:linear-gradient(90deg,rgb(var(--c-orange)/.7),rgb(var(--c-orange)))}
.obj-t.due i{background:linear-gradient(90deg,rgb(var(--c-red)/.7),rgb(var(--c-red)))}
.obj-t s{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--label-2);text-decoration:none}
.obj-hist{display:flex;gap:8px;align-items:flex-end;margin-top:16px}
.oh-c{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--label-2)}
.oh-t{position:relative;width:100%;max-width:38px;height:90px;display:flex;align-items:flex-end;border-radius:7px;background:rgb(var(--c-fill)/.07)}
.oh-t i{width:100%;border-radius:7px;background:rgb(var(--c-orange)/.75)}
.oh-t i.ok{background:rgb(var(--c-green)/.8)}
.oh-t s{position:absolute;left:-3px;right:-3px;height:2px;background:var(--label-2);text-decoration:none}

/* registro */
.activity.reg li{cursor:default}
.activity.reg .reg-dia{font-size:12px;font-weight:700;color:var(--label-2);padding:14px 0 4px;border:none}
.activity.reg .stamp{min-width:76px;text-align:center}

@media (max-width:760px){.cal-d{min-height:64px}.cal-e{font-size:10px}.kanban{grid-auto-columns:minmax(200px,80%)}}

/* gastos previstos agrupados por mes */
.ledger tr.mes-h td{background:none;padding:30px 14px 12px;border-bottom:1.5px solid var(--sep-strong)}
.ledger tr.mes-h:first-child td{padding-top:16px}
.ledger tr.mes-h:hover td{background:none}
.ledger tr.mes-h b{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;letter-spacing:-.005em;padding:6px 14px 6px 11px;border-radius:999px;background:rgb(var(--c-blue)/.14);color:rgb(var(--c-tint));box-shadow:inset 0 0 0 1px rgb(var(--c-blue)/.22)}
.ledger tr.mes-h b::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("img/56e9262bf7a3.svg") center/contain no-repeat;mask:url("img/56e9262bf7a3.svg") center/contain no-repeat}
.ledger tr.mes-h span{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:600;color:var(--label-2);padding:5px 11px;border-radius:999px;background:rgb(var(--c-fill)/.1)}
.ledger tr.mes-h+tr td{padding-top:12px}
.prev-block .hint{margin-top:16px!important}
.ledger tr.mes-h b,.ledger tr.mes-h span{box-sizing:border-box;height:30px;vertical-align:middle;line-height:1;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}

/* catálogo por categorías */
.ledger tr.cat-h b{background:rgb(var(--c-indigo)/.14);color:rgb(var(--c-indigo));box-shadow:inset 0 0 0 1px rgb(var(--c-indigo)/.24)}
:root[data-theme="dark"] .ledger tr.cat-h b{color:rgb(170 162 255)}
.ledger tr.cat-h b::before{-webkit-mask-image:url("img/4414f0c29b74.svg");mask-image:url("img/4414f0c29b74.svg")}

/* ==========================================================================
   4. TEMA «PEMBRA»: fondo crema, barra lateral azul noche con acento lima,
   tarjetas blancas sólidas, Urbanist y animaciones suaves.
   Esta capa va al final y manda sobre lo anterior. Cambia aquí los colores.
   ========================================================================== */
:root{
  --t-bg:#f2f1ec;          /* fondo general */
  --t-glow-a:#e2eafa;      /* brillo azul arriba a la izquierda */
  --t-glow-b:#eef5d8;      /* brillo verde arriba a la derecha */
  --t-surface:#fdfdfb;     /* tarjetas */
  --t-surface-2:#f6f5f0;   /* cabeceras de tabla, hover */
  --t-raised:#ffffff;      /* ventanas y menús */
  --t-text:#111a2b;
  --t-muted:#4e596b;
  --t-faint:#6a7486;
  --t-line:#0f182a16;
  --t-line-2:#0f182a2b;
  --t-well:#0f182a0e;      /* fondo de selectores segmentados */
  --t-primary:#1f4fd1;     /* azul cobalto */
  --t-primary-soft:#1f4fd11a;
  --t-on-primary:#fff;
  --t-side:#0d1830;        /* barra lateral */
  --t-on-side:#e8edf6;
  --t-side-dim:#e8edf69e;
  --t-side-hover:#ffffff12;
  --t-live:#c6ef5a;        /* lima: sección activa */
  --t-on-live:#18200a;
  --t-good:#16794a;--t-warn:#92560a;--t-bad:#be2f1e;--t-amber:#d6950f;--t-rose:#dc3f66;--t-teal:#129482;--t-sky:#1d97d4;--t-coral:#e8603f;
  --t-rim:inset 0 0 0 1px #0f182a0f;
  --t-shadow:0 1px 2px #0f182a0a,0 14px 34px -22px #0f182a47;
  --t-shadow-pop:0 26px 60px -20px #0f182a57,0 2px 6px #0f182a14;
  --t-ease:cubic-bezier(.2,.8,.2,1);
  --t-r-card:22px;--t-r-ctl:12px;

  /* enlazamos los colores de la app con el tema */
  --cristal-opacidad:1;
  --gl:253 253 251;
  --c-bg:242 241 236;--c-surface:253 253 251;--c-btn:253 253 251;--c-field:253 253 251;
  --c-blue:31 79 209;--c-tint:31 79 209;--c-indigo:18 148 130;
  --c-green:22 121 74;--c-green-t:22 121 74;--c-orange:214 149 15;--c-orange-t:146 86 10;--c-red:220 63 102;--c-red-t:190 47 30;
  --c-fill:15 24 42;
  --label:var(--t-text);--label-2:var(--t-muted);--label-3:var(--t-faint);
  --sep:var(--t-line);--sep-strong:var(--t-line-2);
  --glass:var(--t-surface);--glass-soft:transparent;--glass-edge:transparent;--glass-blur:none;
  --glass-shadow:var(--t-rim),var(--t-shadow);--shadow-group:var(--t-rim),var(--t-shadow);
}
:root[data-theme="dark"]{
  --t-bg:#0b111c;--t-glow-a:#2f56d629;--t-glow-b:#c6ef5a0d;
  --t-surface:#121a28;--t-surface-2:#172031;--t-raised:#1c2638;
  --t-text:#e8edf6;--t-muted:#a7b1c2;--t-faint:#8893a6;--t-line:#ffffff13;--t-line-2:#ffffff26;--t-well:#ffffff0e;
  --t-primary:#8fb0ff;--t-primary-soft:#8fb0ff24;--t-on-primary:#0b1a3d;
  --t-side:#070d18;--t-on-side:#e3e9f4;--t-side-dim:#e3e9f494;--t-side-hover:#ffffff0f;
  --t-good:#5fd38f;--t-warn:#f2bb45;--t-bad:#ff8a78;--t-amber:#f2bb45;--t-rose:#ff7d9b;--t-teal:#3fcbb4;
  --t-rim:inset 0 0 0 1px #ffffff0f;
  --t-shadow:0 1px 0 #ffffff08 inset,0 18px 40px -26px #000000d9;
  --t-shadow-pop:0 26px 60px -18px #000000c7,0 0 0 1px #ffffff14;
  --gl:18 26 40;
  --c-bg:11 17 28;--c-surface:18 26 40;--c-btn:18 26 40;--c-field:18 26 40;
  --c-blue:143 176 255;--c-tint:143 176 255;--c-indigo:63 203 180;
  --c-green:95 211 143;--c-green-t:95 211 143;--c-orange:242 187 69;--c-orange-t:242 187 69;--c-red:255 125 155;--c-red-t:255 138 120;
  --c-fill:255 255 255;
}

/* base */
body{font-family:var(--font);font-weight:500;color:var(--t-text);background:radial-gradient(55vmax 45vmax at 15% -12%,var(--t-glow-a),transparent 70%),radial-gradient(45vmax 40vmax at 105% 2%,var(--t-glow-b),transparent 70%),var(--t-bg);background-attachment:fixed}
::selection{background:color-mix(in srgb,var(--t-primary) 26%,transparent)}
a{color:var(--t-primary)}
:focus-visible{outline:2px solid var(--t-primary);outline-offset:2px}
h2{font-size:34px;font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:20px 0 6px}
.hello-bar h2{letter-spacing:-.025em}
h3{font-size:15px;font-weight:600;letter-spacing:-.005em}
.lede{color:var(--t-muted);font-size:14px;font-weight:500}
.muted,.hint{color:var(--t-muted)}
.content{padding:14px clamp(16px,1.8vw,30px) 64px}
.neg{color:var(--t-bad)}.pos{color:var(--t-good)}

/* barra lateral azul noche */
.app{grid-template-columns:var(--ancho-barra) minmax(0,1fr)}
.sidebar{background:var(--t-side);color:var(--t-on-side);border:none;border-radius:26px;margin:12px 0 12px 12px;box-shadow:0 30px 60px -30px #0d18308c,inset 0 0 0 1px #ffffff0d;-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px 12px 12px}
:root[data-theme="dark"] .sidebar{box-shadow:inset 0 0 0 1px #ffffff12}
body.env-test .sidebar{box-shadow:0 0 0 2px rgb(255 214 10/.8),0 30px 60px -30px #0d18308c}
.sb-title strong{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em}
.sb-title span{color:var(--t-side-dim)}
.app-icon{border-radius:11px;box-shadow:none}
.sb-toggle,.sb-theme{color:var(--t-side-dim)}
.sb-toggle:hover,.sb-theme:hover{background:var(--t-side-hover)!important;color:var(--t-on-side)}
.sb-search{background:#ffffff0d;border:1px solid #ffffff14;color:var(--t-side-dim);border-radius:12px;padding:9px 12px}
.sb-search:hover{background:#ffffff17;color:var(--t-on-side)}
.sb-search kbd{background:#ffffff1a;color:var(--t-on-side)}
.sb-sec{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t-side-dim);padding:12px 12px 6px}
.binder{position:relative;gap:2px}
.binder button{height:38px;padding:0 12px;border-radius:13px;font-size:14px;font-weight:600;color:var(--t-on-side);position:relative;z-index:1;transition:color .25s var(--t-ease),background .2s}
.binder button svg{color:currentColor;opacity:.85;width:19px;height:19px}
.binder button:hover{background:var(--t-side-hover)}
.binder button.active{background:transparent;color:var(--t-on-live);box-shadow:none}
.binder button.active svg{color:currentColor;opacity:1}
.binder button.active:not(.pill-ok){background:var(--t-live)}
.nav-pill{position:absolute;left:0;top:0;width:100%;height:38px;border-radius:13px;background:var(--t-live);box-shadow:0 10px 24px -12px #c6ef5a99;z-index:0;pointer-events:none;transition:transform .45s var(--t-ease),height .45s var(--t-ease),width .3s var(--t-ease),opacity .2s;opacity:0}
.nav-pill.on{opacity:1}
.sb-sep{background:#ffffff14}
.filebox{background:#ffffff0d;border:1px solid #ffffff12;color:var(--t-side-dim);border-radius:16px;box-shadow:none}
.filebox b{color:var(--t-on-side)}
.filebox .btn{background:#ffffff14;color:var(--t-on-side);border:none;box-shadow:none}
.filebox .btn.primary{background:var(--t-live);color:var(--t-on-live)}
.filebox .dot.ok{position:relative}
.filebox .dot.ok::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:t-breathe 1.8s ease-out infinite}
.envswitch{background:#ffffff0f;border:1px solid #ffffff12;box-shadow:none}
.envswitch button{color:var(--t-side-dim)}
.envswitch button:hover{color:var(--t-on-side)}
.envswitch button.active:not(.test),:root[data-theme="dark"] .envswitch button.active:not(.test){background:var(--t-on-side);color:var(--t-side);box-shadow:none}
body.sb-collapsed .env-one:not(.test),:root[data-theme="dark"] body.sb-collapsed .env-one:not(.test){background:var(--t-on-side);color:var(--t-side)}
.binder{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
.binder::-webkit-scrollbar{width:0}

/* barra de herramientas: sin cristal, integrada en la página */
.toolbar{position:static;background:none;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin:0 0 16px;padding:0;border-radius:0;gap:8px}
.test-banner{background:#ffe066;color:#3d2e00;border:none;border-radius:14px;box-shadow:0 12px 24px -16px rgb(160 120 0/.6);-webkit-backdrop-filter:none;backdrop-filter:none;top:12px}

/* tarjetas */
.block,.tablewrap,.empty,.fs,.reserve,.kpi,.pcard,.alert{background:var(--t-surface);border:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--t-rim),var(--t-shadow)}
.block{border-radius:var(--t-r-card);padding:20px}
.tablewrap,.empty{border-radius:var(--t-r-card)}
.tablewrap{padding:8px}
.block .tablewrap,.block.tablewrap{box-shadow:none;background:transparent;margin:6px -12px -12px;padding:0 0 4px;border:none}
.block-h{margin-bottom:14px}
.kpi{border-radius:20px;padding:16px 18px}
.kpi-l{font-size:12.5px;font-weight:600;color:var(--t-muted)}
.kpi-v{font-size:24px;font-weight:650;letter-spacing:-.015em;margin:6px 0 2px}
.kpi-s{color:var(--t-muted)}
.kpi.link,.pcard,.kcard{transition:transform .35s var(--t-ease),box-shadow .35s var(--t-ease)}
.kpi.link:hover,.pcard:hover{transform:translateY(-2px);box-shadow:var(--t-rim),var(--t-shadow-pop);background:var(--t-surface)}
.pcard{border-radius:var(--t-r-card)}
.empty{color:var(--t-muted)}
.fs{border-radius:18px;background:var(--t-surface-2);box-shadow:var(--t-rim)}
.modal .fs{background:var(--t-surface-2)}
.fs legend{font-weight:700}
.alert{border-radius:14px}
.split,.kpis{gap:16px}

/* tarjeta oscura: «Apartar para Hacienda» */
.reserve{background:var(--t-side);color:var(--t-on-side);box-shadow:0 24px 50px -28px #0d183099;border-radius:var(--t-r-card);--c-blue:198 239 90;--c-indigo:102 192 239}
:root[data-theme="dark"] .reserve{background:#0d1626;box-shadow:inset 0 0 0 1px #ffffff12}
.reserve::before{background:radial-gradient(closest-side,#c6ef5a24,transparent)}
.reserve .lbl,.reserve .parts{color:var(--t-side-dim)}
.reserve .parts b,.reserve .big{color:#fff}
.reserve a{color:var(--t-live)}
.reserve .ring .rq{fill:#fff}.reserve .ring .rs{fill:var(--t-side-dim)}
.reserve .ring circle:first-child{stroke:#ffffff1f}

/* tablas */
.ledger{border-collapse:separate;border-spacing:0;font-size:13.5px}
.ledger th{background:var(--t-surface-2);color:var(--t-muted);font-size:12.5px;font-weight:600;padding:10px 12px;border-bottom:none}
.ledger thead th:first-child{border-radius:12px 0 0 12px}
.ledger thead th:last-child{border-radius:0 12px 12px 0}
.ledger td{border-bottom:1px dashed var(--t-line-2);padding:12px}
.ledger tbody tr:last-child td{border-bottom:none}
.ledger tbody tr:hover td{background:var(--t-surface-2)}
.ledger tbody tr:hover td:first-child{border-radius:12px 0 0 12px}
.ledger tbody tr:hover td:last-child{border-radius:0 12px 12px 0}
.ledger tr.sum td,.ledger tr.sum:hover td{background:var(--t-surface-2);border-bottom:none}
.ledger tr.sum td:first-child{border-radius:12px 0 0 12px}.ledger tr.sum td:last-child{border-radius:0 12px 12px 0}
.ledger tr.mes-h td,.ledger tr.mes-h:hover td{background:none;border-bottom:1px solid var(--t-line-2)}
.ledger.diario tr.as-h td{background:var(--t-surface-2)}

/* botones */
.btn,.toolbar select{height:40px;min-height:40px;padding:0 16px;border-radius:var(--t-r-ctl);font-weight:600;font-size:13.5px;background:var(--t-surface);color:var(--t-text);border:1px solid var(--t-line-2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .2s,filter .2s,transform .15s var(--t-ease)}
.toolbar select{padding-right:34px}
.btn:hover{background:var(--t-surface-2);filter:none}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--t-primary);color:var(--t-on-primary);border-color:transparent;box-shadow:0 12px 24px -14px color-mix(in srgb,var(--t-primary) 90%,transparent)}
.btn.primary:hover{background:var(--t-primary);filter:brightness(1.12)}
:root[data-theme="dark"] .btn.primary:hover{filter:brightness(.94)}
.btn.danger{background:color-mix(in srgb,var(--t-rose) 14%,transparent);color:var(--t-bad);border-color:transparent}
.btn.sm{height:34px;min-height:34px;padding:0 13px;border-radius:11px;font-size:12.5px}
.btn.ia-btn{background:color-mix(in srgb,var(--t-primary) 10%,var(--t-surface));color:var(--t-primary);border-color:transparent}
.lnk{color:var(--t-primary);font-weight:600}
.lnk:hover{background:var(--t-primary-soft)}
.lnk.red{color:var(--t-bad)}
.x{background:var(--t-well);border:none;box-shadow:none;width:32px;height:32px;border-radius:10px;color:var(--t-muted)}
.x:hover{background:var(--t-line-2);color:var(--t-text)}

/* selector segmentado */
.qtabs{background:var(--t-well);border:none;box-shadow:none;border-radius:13px;padding:3px}
.qtabs button{border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--t-muted);transition:color .2s,background .25s var(--t-ease),box-shadow .25s}
.qtabs button:hover{color:var(--t-text)}
.qtabs button.active,:root[data-theme="dark"] .qtabs button.active{background:var(--t-raised);color:var(--t-text);box-shadow:0 2px 8px #0f182a24}
:root[data-theme="dark"] .qtabs button.active{background:#ffffff24}

/* etiquetas de estado (pill) */
.stamp{-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:8px;padding:3px 10px 3px 9px;font-size:12px;font-weight:600;gap:6px}
.stamp::before{width:6px;height:6px;border-radius:2px;transform:rotate(45deg)}
.stamp.ok{background:color-mix(in srgb,var(--t-good) 14%,transparent);color:var(--t-good)}
.stamp.due{background:color-mix(in srgb,var(--t-rose) 14%,transparent);color:var(--t-bad)}
.stamp.pend{background:color-mix(in srgb,var(--t-amber) 20%,transparent);color:var(--t-warn)}
.stamp.info{background:var(--t-primary-soft);color:var(--t-primary)}
.stamp.plain{background:var(--t-well);color:var(--t-muted)}

/* formularios */
label,.lbl-f{font-weight:600;color:var(--t-muted)}
input,select,textarea{min-height:42px;padding:9px 13px;border:1px solid var(--t-line-2);border-radius:12px;background-color:var(--t-surface);color:var(--t-text);box-shadow:none}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{box-shadow:none}
input:focus,select:focus,textarea:focus{background-color:var(--t-surface);border-color:var(--t-primary);box-shadow:0 0 0 3px var(--t-primary-soft)}
input[type=checkbox]{min-height:0;border:none;accent-color:var(--t-primary)}
.lines input,.lines textarea{min-height:38px}

/* avisos */
.note{background:color-mix(in srgb,var(--t-amber) 14%,var(--t-surface));border:none;border-radius:14px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--t-rim);color:var(--t-text)}
.note.blue,:root[data-theme="dark"] .note.blue{background:color-mix(in srgb,var(--t-primary) 9%,var(--t-surface))}
:root[data-theme="dark"] .note{background:color-mix(in srgb,var(--t-amber) 12%,var(--t-surface))}
.alerts{gap:8px}
.alert{border-radius:14px;padding:8px 8px 8px 14px;font-weight:500}
.al-dot{position:relative}
.alert.due .al-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:t-breathe 1.8s ease-out infinite}

/* ventanas */
.modal-bg{background:#0d183059;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:t-fade .25s ease-out}
:root[data-theme="dark"] .modal-bg{background:#000000a6}
.modal,:root[data-theme="dark"] .modal{background:var(--t-raised);border:1px solid var(--t-line);border-radius:26px;box-shadow:var(--t-shadow-pop);-webkit-backdrop-filter:none;backdrop-filter:none;animation:t-pop .42s var(--t-ease)}
.mh{padding:22px 24px 12px}.mh h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.mb{padding:4px 24px 16px}.mf{padding:14px 24px 18px;border-top:1px solid var(--t-line)}
.modal .tablewrap{background:var(--t-surface);box-shadow:var(--t-rim)}
#toast{background:var(--t-side);color:var(--t-on-side);border:none;border-radius:14px;box-shadow:var(--t-shadow-pop);-webkit-backdrop-filter:none;backdrop-filter:none;font-weight:600;transition:opacity .3s,transform .45s var(--t-ease)}
#toast.err{color:#ffb4a8}
.tot{background:var(--t-surface-2);border:none;border-radius:16px}
.steps li{background:var(--t-surface-2);border:none;border-radius:14px}
.pz-date{background:var(--t-surface-2);border:none;border-radius:12px}
.a-ico{border-radius:10px}
.chart .b{background:var(--t-primary);border-radius:6px 6px 2px 2px}
.chart .b.g{background:var(--t-coral)}
.hbar-track{background:var(--t-well)}
.hbar-track i{background:var(--t-primary)}
.chip{background:var(--t-surface);border:none;box-shadow:var(--t-rim);color:var(--t-muted);font-weight:600}
.chip:hover{color:var(--t-text);background:var(--t-surface)}
.kcol{background:var(--t-well)}
.kcard{background:var(--t-surface);box-shadow:var(--t-rim),var(--t-shadow)}
.kcard:hover{transform:translateY(-2px)}
.cal-d{background:var(--t-surface-2)}
.dropzone{border-color:color-mix(in srgb,var(--t-primary) 35%,transparent);background:var(--t-primary-soft);border-radius:var(--t-r-card)}
.crumbs{color:var(--t-muted);font-weight:600}
.tag{background:var(--t-primary-soft);color:var(--t-primary)}
button.tag.on{background:var(--t-text);color:var(--t-bg)}
.ledger tr.cat-h b{background:color-mix(in srgb,var(--t-teal) 14%,transparent);color:var(--t-teal);box-shadow:none}
.ledger tr.mes-h b{box-shadow:none}
#timerpill{border-radius:14px}

/* animaciones */
@keyframes t-fade{from{opacity:0}}
@keyframes t-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes t-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes t-breathe{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
@keyframes t-flash{0%{color:var(--t-primary)}100%{color:inherit}}
#main.t-enter>*{animation:t-rise .55s var(--t-ease) both;animation-delay:calc(var(--i,0)*45ms)}
#main.t-enter .kpis>*,#main.t-enter .cards>*,#main.t-enter .split>*{animation:t-rise .55s var(--t-ease) both;animation-delay:calc(var(--i,0)*45ms + var(--j,0)*40ms)}
.t-count{animation:t-flash 1s ease-out}
@media (prefers-reduced-motion:reduce){#main.t-enter>*,#main.t-enter .kpis>*,#main.t-enter .cards>*,#main.t-enter .split>*,.modal,.modal-bg,.filebox .dot.ok::after,.alert.due .al-dot::after{animation:none!important}.nav-pill{transition:none}}
.binder>*,.binder button,.binder .sb-sec{flex:none}
.split>*{min-width:0}
.hello-bar{margin-top:14px}
.reserve b{color:#fff}
.binder button,.nav-pill{height:36px}
.ledger td.acts.mov-a{white-space:normal}
.mov-a .btn{white-space:normal;height:auto;min-height:34px;padding-top:6px;padding-bottom:6px;text-align:left;line-height:1.25}
body.sb-collapsed .binder button{width:auto;padding:0 12px;justify-content:center}
body.sb-collapsed .sidebar{padding:16px 10px 12px}

/* ==========================================================================
   5. CRISTAL Y MÁS ANIMACIONES
   Manchas de color que flotan detrás, tarjetas de cristal esmerilado,
   barra de herramientas flotante al hacer scroll y efectos al pasar el ratón.
   Para quitar el cristal: pon --t-glass-on:0 y recarga.
   ========================================================================== */
:root{
  --t-glass:rgb(253 253 251/.62);
  --t-glass-strong:rgb(253 253 251/.8);
  --t-glass-border:rgb(255 255 255/.75);
  --t-glass-blur:blur(22px) saturate(170%);
  --t-glass-hl:inset 0 1px 0 rgb(255 255 255/.9),inset 0 -1px 0 rgb(255 255 255/.25);
  --t-blob-1:#c3d4ff;--t-blob-2:#e2f5b0;--t-blob-3:#bfe9ff;--t-blob-4:#ffd9c7;
  --t-blob-op:.75;
  --t-spring:cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="dark"]{
  --t-glass:rgb(18 26 40/.58);
  --t-glass-strong:rgb(24 33 50/.78);
  --t-glass-border:rgb(255 255 255/.08);
  --t-glass-hl:inset 0 1px 0 rgb(255 255 255/.07);
  --t-blob-1:#2f56d6;--t-blob-2:#6f8f1c;--t-blob-3:#0f6f8f;--t-blob-4:#5b2fd6;
  --t-blob-op:.32;
}

/* manchas de fondo */
#t-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
#t-blobs i{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--t-blob-op);will-change:transform}
#t-blobs i:nth-child(1){width:44vmax;height:44vmax;left:-10vmax;top:-16vmax;background:var(--t-blob-1);animation:t-drift-a 28s ease-in-out infinite alternate}
#t-blobs i:nth-child(2){width:38vmax;height:38vmax;right:-12vmax;top:-8vmax;background:var(--t-blob-2);animation:t-drift-b 32s ease-in-out infinite alternate}
#t-blobs i:nth-child(3){width:40vmax;height:40vmax;left:30vw;bottom:-22vmax;background:var(--t-blob-3);animation:t-drift-c 36s ease-in-out infinite alternate}
#t-blobs i:nth-child(4){width:24vmax;height:24vmax;right:12vw;top:42vh;background:var(--t-blob-4);opacity:calc(var(--t-blob-op)*.6);animation:t-drift-a 40s ease-in-out infinite alternate-reverse}
@keyframes t-drift-a{to{transform:translate(8vw,10vh) scale(1.12)}}
@keyframes t-drift-b{to{transform:translate(-10vw,14vh) scale(.92)}}
@keyframes t-drift-c{to{transform:translate(-6vw,-12vh) scale(1.08)}}

/* tarjetas de cristal */
.kpi,.block,.tablewrap,.empty,.pcard,.alert,.kcol,.cal-wrap{background:var(--t-glass);-webkit-backdrop-filter:var(--t-glass-blur);backdrop-filter:var(--t-glass-blur);box-shadow:var(--t-glass-hl),0 0 0 1px var(--t-glass-border),var(--t-shadow)}
.block .tablewrap{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.kpi.link:hover,.pcard:hover{background:var(--t-glass-strong);box-shadow:var(--t-glass-hl),0 0 0 1px var(--t-glass-border),var(--t-shadow-pop)}
.kcard{background:var(--t-glass-strong)}

/* barra lateral: azul noche translúcido con brillo */
.sidebar{background:linear-gradient(165deg,rgb(24 42 74/.92),rgb(13 24 48/.94) 45%,rgb(11 21 40/.96));-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);overflow:hidden}
:root[data-theme="dark"] .sidebar{background:linear-gradient(165deg,rgb(16 26 46/.9),rgb(7 13 24/.94))}
.sidebar::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;background:radial-gradient(120% 90% at 20% 0%,rgb(198 239 90/.13),transparent 60%),radial-gradient(90% 80% at 100% 0%,rgb(143 176 255/.14),transparent 60%);pointer-events:none}
.sidebar>*{position:relative}
.filebox,.envswitch,.sb-search{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.binder button svg{transition:transform .35s var(--t-spring)}
.binder button:hover svg{transform:translateX(2px) scale(1.08)}
.binder button.active svg{transform:scale(1.06)}

/* barra de herramientas que flota al hacer scroll */
.toolbar{position:sticky;top:10px;z-index:6;transition:background .3s,box-shadow .3s,padding .3s,margin .3s,border-radius .3s}
.toolbar.t-stuck{background:var(--t-glass-strong);-webkit-backdrop-filter:var(--t-glass-blur);backdrop-filter:var(--t-glass-blur);box-shadow:var(--t-glass-hl),0 0 0 1px var(--t-glass-border),var(--t-shadow-pop);padding:8px 10px;margin:0 -10px 16px;border-radius:18px}

/* tarjeta oscura con luz que se mueve */
.reserve::before{animation:t-drift-a 14s ease-in-out infinite alternate;inset:-50% 30% auto -30%}
.reserve::after{content:"";position:absolute;width:260px;height:260px;right:-60px;bottom:-120px;border-radius:50%;background:radial-gradient(closest-side,rgb(102 192 239/.28),transparent);animation:t-drift-b 18s ease-in-out infinite alternate;pointer-events:none}

/* foco de luz que sigue al ratón: borde que se ilumina y un brillo suave */
:root{--t-spot-fill:rgb(31 79 209/.09);--t-spot-edge:rgb(31 79 209/.9);--t-spot-size:230px}
:root[data-theme="dark"]{--t-spot-fill:rgb(198 239 90/.1);--t-spot-edge:rgb(198 239 90/.85);--t-spot-size:210px}
.kpi,.block,.pcard,.alert,.tablewrap,.empty{position:relative}
.t-spot::before,.t-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--t-ease)}
.t-spot::after{background:radial-gradient(var(--t-spot-size) circle at var(--mx,50%) var(--my,50%),var(--t-spot-fill),transparent 70%)}
.t-spot::before{padding:1.5px;background:radial-gradient(calc(var(--t-spot-size)*.8) circle at var(--mx,50%) var(--my,50%),var(--t-spot-edge),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.t-spot:hover::before,.t-spot:hover::after{opacity:1}

/* botón principal con destello */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgb(255 255 255/.45),transparent);transform:skewX(-18deg);transition:left .7s var(--t-ease);pointer-events:none}
.btn.primary:hover::after{left:120%}
.btn{transition:background .2s,filter .2s,transform .25s var(--t-spring),box-shadow .25s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.96)}
.lnk{transition:background .2s,color .2s,transform .2s var(--t-spring)}
.lnk:active{transform:scale(.94)}

/* selector segmentado: la pastilla se desliza */
.qtabs{position:relative}
.qtabs button{position:relative;z-index:1}
.qt-ghost{position:absolute;z-index:0;border-radius:10px;background:var(--t-raised);box-shadow:0 2px 8px #0f182a24;transition:transform .42s var(--t-ease),width .42s var(--t-ease);pointer-events:none}
:root[data-theme="dark"] .qt-ghost{background:#ffffff24}
.qtabs.qt-anim button.active{background:transparent!important;box-shadow:none!important}

/* ventanas de cristal */
.modal,:root[data-theme="dark"] .modal{background:var(--t-glass-strong);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);box-shadow:var(--t-glass-hl),0 0 0 1px var(--t-glass-border),var(--t-shadow-pop);animation:t-pop .5s var(--t-spring)}
.modal-bg{-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
.modal-bg.t-open .mb>*{animation:t-rise .45s var(--t-ease) both;animation-delay:calc(var(--i,0)*35ms + 60ms)}
.modal-bg.t-open .mf{animation:t-fade .5s .2s both}
.modal .fs{background:rgb(255 255 255/.45)}
:root[data-theme="dark"] .modal .fs{background:rgb(255 255 255/.04)}
#toast{background:rgb(13 24 48/.82);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);transition:opacity .3s,transform .55s var(--t-spring)}
.alerts .alert{transition:transform .3s var(--t-spring)}
.alerts .alert:hover{transform:translateY(-2px)}

/* entrada: barras que crecen, filas en cascada, anillo que gira */
@keyframes t-grow-x{from{transform:scaleX(0)}}
@keyframes t-grow-y{from{transform:scaleY(0)}}
@keyframes t-row{from{opacity:0;transform:translateY(6px)}}
@keyframes t-spin{from{opacity:0;transform:rotate(-120deg) scale(.7)}}
#main.t-enter .hbar-track i,#main.t-enter .obj-t i{transform-origin:left;animation:t-grow-x 1s var(--t-ease) both;animation-delay:.25s}
#main.t-enter .chart .b,#main.t-enter .fc-track i,#main.t-enter .oh-t i{transform-origin:bottom;animation:t-grow-y .9s var(--t-ease) both;animation-delay:calc(var(--k,0)*35ms + .2s)}
#main.t-enter .ledger tbody tr{animation:t-row .5s var(--t-ease) both;animation-delay:calc(var(--r,0)*28ms + .15s)}
#main.t-enter .ring{animation:t-spin 1s var(--t-spring) both;animation-delay:.2s}
#main.t-enter .steps li,#main.t-enter .alerts .alert{animation:t-rise .5s var(--t-ease) both;animation-delay:calc(var(--j,0)*50ms + .1s)}

/* cambio de tema con círculo que se expande desde el botón */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:t-reveal .7s var(--t-ease)}
@keyframes t-reveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%))}to{clip-path:circle(160vmax at var(--vt-x,50%) var(--vt-y,50%))}}

@media (prefers-reduced-motion:reduce){
  #t-blobs i,.reserve::before,.reserve::after,.modal,.modal-bg.t-open .mb>*,#main.t-enter .hbar-track i,#main.t-enter .obj-t i,#main.t-enter .chart .b,#main.t-enter .fc-track i,#main.t-enter .oh-t i,#main.t-enter .ledger tbody tr,#main.t-enter .ring,#main.t-enter .steps li,#main.t-enter .alerts .alert{animation:none!important}
  .btn,.btn:hover{transform:none}.qt-ghost{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .kpi,.block,.tablewrap,.empty,.pcard,.alert,.kcol,.modal,.toolbar.t-stuck,.sidebar,#toast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .kpi,.block,.tablewrap,.empty,.pcard,.alert,.modal,.toolbar.t-stuck{background:var(--t-surface)!important}
  #t-blobs{display:none}
}
.block.reserve,.reserve{background:linear-gradient(150deg,rgb(24 42 74/.94),rgb(13 24 48/.96) 55%,rgb(11 21 40/.97));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 24px 50px -28px #0d1830a6;color:var(--t-on-side)}
:root[data-theme="dark"] .block.reserve,:root[data-theme="dark"] .reserve{background:linear-gradient(150deg,rgb(20 32 56/.9),rgb(10 17 30/.94));box-shadow:inset 0 0 0 1px #ffffff14}
.sb-theme{display:grid;place-items:center;padding:0;line-height:0}
.sb-theme span{display:grid;place-items:center;width:18px;height:18px}
.sb-theme .i-sun{display:none}
:root[data-theme="dark"] .sb-theme .i-sun{display:grid}
:root[data-theme="dark"] .sb-theme .i-moon{display:none}

/* ==========================================================================
   6. DETALLES: iconos, contadores, avatares, encabezado, panel editable, Ctrl+K
   ========================================================================== */
.t-p{--ic:var(--t-primary)}.t-g{--ic:var(--t-good)}.t-w{--ic:var(--t-amber)}.t-b{--ic:var(--t-rose)}.t-t{--ic:var(--t-teal)}.t-s{--ic:var(--t-sky)}.t-c{--ic:var(--t-coral)}
.kpi-l{display:flex;align-items:center;gap:10px}
.kpi-ico,.h-ico{display:inline-grid;place-items:center;flex:none;border-radius:10px;color:var(--ic);background:color-mix(in srgb,var(--ic) 14%,transparent)}
.kpi-ico{width:30px;height:30px}.kpi-ico svg{width:16px;height:16px}
.h-ico{width:32px;height:32px;margin-right:10px;vertical-align:middle}.h-ico svg{width:17px;height:17px}
.block h3{display:flex;align-items:center}
.block-h h3{margin:0}
.kpi .kpi-v{margin-top:10px}
.empty-ico{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;background:var(--t-well);color:var(--t-muted)}
.empty-ico svg{width:24px;height:24px}
.empty p{color:var(--t-text);font-weight:600}

.eyebrow{display:flex;align-items:center;gap:8px;margin:18px 2px -10px;font-size:12.5px;font-weight:600;color:var(--t-muted)}
.eyebrow svg{width:15px;height:15px;opacity:.7}
.eyebrow i{font-style:normal;opacity:.5;margin:0 2px}
.eyebrow b{color:var(--t-text);font-weight:600}
.eyebrow+h2,.eyebrow+.toolbar h2,.eyebrow+.hello-bar{margin-top:12px}

.nav-count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;background:#ffffff1f;color:var(--t-on-side)}
.nav-count.bad{background:#ff7d9b;color:#2a0710}
.nav-count.warn{background:#f2bb45;color:#2a1a00}
.binder button.active .nav-count{background:var(--t-on-live);color:var(--t-live)}
body.sb-collapsed .nav-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;font-size:9.5px}

.avatar{--h:220;flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:12px;font-weight:700;letter-spacing:.02em;background:hsl(var(--h) 70% 92%);color:hsl(var(--h) 50% 32%);box-shadow:inset 0 0 0 1px hsl(var(--h) 60% 80%/.6);margin-right:10px;vertical-align:middle}
:root[data-theme="dark"] .avatar{background:hsl(var(--h) 40% 22%);color:hsl(var(--h) 80% 82%);box-shadow:inset 0 0 0 1px hsl(var(--h) 50% 40%/.5)}
.avatar.big{width:46px;height:46px;font-size:16px;margin-right:14px}
td.con-avatar{white-space:nowrap}
td.con-avatar>.avatar{float:left;margin-top:1px}
td.con-avatar>.avatar~*{margin-left:42px;display:block}
td.con-avatar>a.cli-link{display:inline-block;margin-left:0}
.toolbar h2{display:flex;align-items:center}

/* panel editable */
.bi{width:16px;height:16px}
.p-edit{outline:2px dashed color-mix(in srgb,var(--t-primary) 45%,transparent);outline-offset:6px;border-radius:22px;cursor:grab;position:relative;padding-top:46px!important;transition:opacity .2s,outline-color .2s}
.kpis.p-edit,.split.p-edit,.alerts.p-edit{padding-top:52px!important}
.p-edit.p-over{outline-color:var(--t-primary);outline-style:solid}
.p-hidden{opacity:.38;filter:grayscale(.6)}
.p-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;background:var(--t-glass-strong);-webkit-backdrop-filter:var(--t-glass-blur);backdrop-filter:var(--t-glass-blur);box-shadow:var(--t-glass-hl),0 0 0 1px var(--t-glass-border);font-size:13px}
.p-bar b{font-weight:700}
.p-bar .grow{flex:1}
.p-grip{display:grid;color:var(--t-muted)}.p-grip svg{width:18px;height:18px}
.p-bar button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:9px;color:var(--t-muted);font-weight:600;font-size:12.5px}
.p-bar button:hover{background:var(--t-well);color:var(--t-text)}
.p-bar button[disabled]{opacity:.3;cursor:default}
.p-bar button svg{width:16px;height:16px}
.alerts.p-edit,.kpis.p-edit,.split.p-edit{display:grid}
.alerts.p-edit{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Ctrl+K */
.q-cmd{justify-content:flex-start!important;align-items:center}
.q-cmd b{flex:1;font-weight:600}
.q-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--t-primary-soft);color:var(--t-primary);flex:none}
.q-ico svg{width:16px;height:16px}
.q-it:focus{outline:none;background:var(--t-primary-soft)}
.q-g{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:700;color:var(--t-faint)}
.rn-rap{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip-d{all:unset;cursor:pointer;height:32px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;background:var(--t-well);color:var(--t-muted);transition:background .2s,color .2s,transform .2s var(--t-spring)}
.chip-d:hover{color:var(--t-text)}
.chip-d.on{background:var(--t-primary);color:var(--t-on-primary)}
.chip-d:active{transform:scale(.95)}
.kc-ask{margin-top:8px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--t-live) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-lime,#7fae16) 35%,transparent);display:grid;gap:4px;cursor:default;animation:t-rise .5s var(--t-ease)}
:root[data-theme="dark"] .kc-ask{background:rgb(198 239 90/.1);box-shadow:inset 0 0 0 1px rgb(198 239 90/.25)}
.kc-ask b{font-size:13px}
.kc-btns{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.kc-btns .btn.sm,.rn-alert .btn.sm{height:28px;min-height:28px;padding:0 10px;font-size:12px;border-radius:9px}
.btn.rn-ok{background:var(--t-good);color:#fff;border-color:transparent}
:root[data-theme="dark"] .btn.rn-ok{color:#06210f}
.btn.rn-no{color:var(--t-bad)}
.rn-alert{flex-wrap:wrap}
.rn-alert .btn+.btn{margin-left:-4px}
.kc-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.kc-btns .btn.sm{padding:0 4px;justify-content:center;font-size:11.5px;white-space:nowrap}
.kc-btns{grid-template-columns:1fr}
.kc-btns .btn.sm{width:100%;font-size:12px}
.av-head{display:flex;align-items:center;gap:10px;margin:-4px 0 14px}
.cal-e{cursor:pointer;transition:transform .2s var(--t-spring),filter .2s}
.cal-e:hover{filter:brightness(.95);transform:translateY(-1px)}
.dia-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dia-it{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--t-surface-2);font-size:14px;font-weight:500;transition:background .2s,transform .2s var(--t-spring)}
.dia-it:hover{background:var(--t-primary-soft);transform:translateX(2px)}
.dia-it i{width:10px;height:10px;border-radius:3px;flex:none;background:var(--t-primary)}
.dia-it.task i{background:var(--t-teal)}.dia-it.tax i{background:var(--t-amber)}.dia-it.inv i{background:var(--t-good)}.dia-it.exp i{background:var(--t-faint)}.dia-it.op i{background:#af52de}.dia-it.late i{background:var(--t-rose)}.dia-it.done{opacity:.55}
.dia-it span{flex:1}
.dia-it b{font-size:12.5px;color:var(--t-primary)}
.chip-d.busy{text-decoration:line-through;opacity:.55}
.chip-d.busy.on{opacity:1;background:var(--t-rose);color:#fff;text-decoration:none}
.rn-dia{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 14px;font-size:12.5px;color:var(--t-muted)}
.rn-dia b{font-weight:600;margin-right:2px}
.rn-dia span{padding:3px 9px;border-radius:8px;background:var(--t-well);color:var(--t-text)}
.rn-dia span.choca{background:color-mix(in srgb,var(--t-rose) 16%,transparent);color:var(--t-bad);font-weight:600}
.rn-dia.libre{color:var(--t-good);font-weight:600}


/* ==========================================================================
   7. MARCA TRIMUS (guía de uso v1, octubre 2026)
   Azul noche #0D1830 · Lima #C6EF5A solo sobre oscuro · Verde #5B8A00 para el
   acento sobre fondo claro · Urbanist 500–800. El logotipo es un dibujo, no texto.
   ========================================================================== */
:root{--b-navy:#0d1830;--b-lime:#c6ef5a;--b-green:#5b8a00;--b-cobalt:#1f4fd1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app-icon{width:34px;height:34px;display:grid;place-items:center;background:none!important;box-shadow:none!important}
.app-icon svg{width:30px;height:30px;color:inherit}
.sb-title strong.sb-brand{display:block;line-height:0;color:#fff;margin-bottom:5px}
.sb-logo{display:block;height:21px;width:auto}
.reserve .ring{width:140px;height:140px}
.ring .tq{transition:opacity .3s}
/* acento de marca sobre fondo claro: nunca lima, siempre verde */
.t-acento-claro{color:var(--b-green)}

/* ==========================================================================
   8. ACCESO: usuario y contraseña + PIN (Trimus) · versión clara a dos columnas
   ========================================================================== */
html.t-locked .app,html.t-locked #t-blobs{visibility:hidden}
html.t-locked body{background:#f2f1ec}
#lk [hidden]{display:none!important}
#lk{position:fixed;inset:0;z-index:10000;color:#0d1830;font-family:var(--font);background:#f2f1ec;overflow:auto;
  transition:opacity .5s var(--t-ease,ease),transform .5s var(--t-ease,ease)}
#lk.out{opacity:0;transform:scale(1.03);pointer-events:none}
.lk-fx{position:fixed;inset:0;width:100%;height:100%}
.lk-grid{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,1fr);gap:20px;padding:20px;box-sizing:border-box}
/* columna de marca */
.lk-brand{position:relative;border-radius:34px;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 40px);box-sizing:border-box;
  background:linear-gradient(160deg,rgb(255 255 255/.42),rgb(255 255 255/.08) 50%,rgb(255 255 255/.22));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 0 0 1px rgb(255 255 255/.6),0 30px 70px -40px rgb(13 24 48/.35);animation:lk-in .9s var(--t-ease,ease) backwards}
.lk-sphere{flex:1;min-height:260px}
.lk-logo{display:flex;align-items:center;gap:10px;color:#0d1830}
.lk-logo svg{height:30px;width:auto}.lk-logo .sb-logo{height:26px}
.lk-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1f4fd1}
.lk-slogan{font-size:clamp(34px,4.2vw,58px);font-weight:800;letter-spacing:-.045em;line-height:1;margin:12px 0 18px;color:#0d1830}
.lk-slogan mark{background:linear-gradient(transparent 62%,#c6ef5a 62%,#c6ef5a 94%,transparent 94%);color:inherit;padding:0 .04em}
.lk-feat{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.lk-feat li{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;background:rgb(255 255 255/.6);box-shadow:inset 0 0 0 1px rgb(13 24 48/.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* columna del formulario */
.lk-side{display:grid;place-items:center;padding:20px 0}
.lk-in{display:flex;flex-direction:column;align-items:center;gap:18px;animation:lk-in .8s .1s var(--t-ease,ease) backwards}
@keyframes lk-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.lk-mlogo{display:none}
.lk-card{position:relative;width:min(400px,calc(100vw - 40px));box-sizing:border-box;padding:32px 30px 26px;border-radius:32px;
  background:linear-gradient(160deg,rgb(255 255 255/.78),rgb(255 255 255/.5));
  -webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(255 255 255/.8),0 40px 80px -36px rgb(13 24 48/.4),0 2px 8px rgb(13 24 48/.05)}
.lk-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(100% 50% at 10% 0%,rgb(255 255 255/.7),transparent 60%)}
.lk-card.swap .lk-body{animation:lk-swap .45s var(--t-ease,ease) backwards}
@keyframes lk-swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lk-card.shake{animation:lk-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes lk-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.lk-body{position:relative;display:flex;flex-direction:column;gap:18px}
.lk-h{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.lk-t{font-size:25px;font-weight:800;letter-spacing:-.025em;color:#0d1830}
.lk-m{font-size:13.5px;line-height:1.45;color:#4e596b;min-height:19px}
.lk-err{color:#be2f1e}
.lk-msg{font-size:13px;min-height:18px;text-align:center;color:#4e596b}
.lk-form{display:flex;flex-direction:column;gap:12px}
.lk-form label:not(.lk-check){display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:#2a3446}
.lk-form input:not([type=checkbox]){height:48px;border-radius:16px;border:none;padding:0 16px;font:600 15.5px var(--font);color:#0d1830;
  background:rgb(255 255 255/.85);box-shadow:inset 0 0 0 1px rgb(13 24 48/.12),0 1px 2px rgb(13 24 48/.04);transition:box-shadow .2s}
.lk-form input:not([type=checkbox]):focus{outline:none;box-shadow:inset 0 0 0 1.5px #1f4fd1,0 0 0 4px rgb(31 79 209/.14)}
.lk-check{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#2a3446;cursor:pointer;user-select:none;justify-content:center}
.lk-check input{position:absolute;opacity:0;pointer-events:none}
.lk-check span{width:38px;height:22px;border-radius:999px;background:rgb(13 24 48/.14);position:relative;transition:background .2s;flex:none}
.lk-check span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.2);transition:transform .25s var(--t-ease,ease)}
.lk-check input:checked+span{background:#0d1830}.lk-check input:checked+span::after{transform:translateX(16px);background:#c6ef5a}
.lk-check input:focus-visible+span{outline:2px solid #1f4fd1;outline-offset:2px}
.lk-b{height:50px;border-radius:999px;border:none;cursor:pointer;font:700 15px var(--font);background:#0d1830;color:#fff;box-shadow:0 14px 30px -14px rgb(13 24 48/.6);transition:transform .15s,background .15s}
.lk-b:hover{background:#1a2a50}.lk-b:active{transform:scale(.97)}
.lk-b.ghost{background:rgb(255 255 255/.7);color:#0d1830;box-shadow:inset 0 0 0 1px rgb(13 24 48/.12)}
.lk-col{display:flex;flex-direction:column;gap:10px}
.lk-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.lk-a{background:none;border:none;color:#1f4fd1;font:600 13px var(--font);cursor:pointer;padding:4px}
.lk-a:hover{text-decoration:underline;text-underline-offset:3px}
.lk-ring{width:84px;height:84px;margin-bottom:6px}
.lk-q{fill:rgb(13 24 48/.12);transition:fill .18s ease,transform .25s cubic-bezier(.2,1.4,.4,1);transform-origin:60px 60px}
.lk-q.on{fill:#0d1830;transform:scale(1.07)}.lk-q.ok{fill:#5b8a00}
.lk-ring.err .lk-q{fill:#be2f1e99}
.lk-pad{display:grid;grid-template-columns:repeat(3,70px);gap:14px 24px;justify-content:center}
.lk-k{width:70px;height:70px;border-radius:50%;border:none;cursor:pointer;font:600 27px var(--font);color:#0d1830;
  background:linear-gradient(160deg,#fff,rgb(255 255 255/.6));box-shadow:inset 0 0 0 1px rgb(13 24 48/.08),0 6px 16px -8px rgb(13 24 48/.25);
  transition:background .15s,transform .12s,box-shadow .15s}
.lk-k:hover{box-shadow:inset 0 0 0 1px rgb(13 24 48/.16),0 10px 22px -10px rgb(13 24 48/.35)}
.lk-k:active{background:#0d1830;color:#c6ef5a;transform:scale(.93)}
.lk-k:focus-visible{outline:2px solid #1f4fd1;outline-offset:3px}
.lk-txt{background:none!important;box-shadow:none!important;font-size:22px;color:#4e596b}
.lk-foot{font-size:12px;color:#4e596b99}
.sb-lock{margin-left:auto}.sb-lock+.sb-toggle{margin-left:4px}
body.sb-collapsed .sb-lock{display:none}
@media (max-width:960px){.lk-grid{grid-template-columns:1fr}.lk-brand{display:none}.lk-mlogo{display:block}.lk-side{min-height:calc(100vh - 40px)}}
@media (max-height:760px){.lk-card{padding:22px 22px 18px}.lk-k{width:58px;height:58px;font-size:23px}.lk-pad{grid-template-columns:repeat(3,58px);gap:10px 20px}.lk-brand{padding:28px 32px}}
@media (prefers-reduced-motion:reduce){.lk-in,.lk-brand,.lk-card.swap .lk-body{animation:none}#lk{transition:opacity .2s}}
/* 8b · pulido (autocrítica Apple/frontend) */
#lk::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("img/b1e50876c96b.svg")}
.lk-fx{z-index:0}.lk-grid{z-index:2}
/* entrada: el cristal se materializa (desenfoque + escala), los textos de marca llegan escalonados */
.lk-in{animation:lk-mat .8s .1s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes lk-mat{from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.lk-st{animation:lk-up .7s var(--d,0s) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes lk-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* cambio de pantalla con dirección: adelante entra desde la derecha, atrás desde la izquierda */
.lk-card.swap .lk-body{animation:lk-fwd .42s cubic-bezier(.2,.8,.2,1) backwards}
.lk-card.swap.back .lk-body{animation-name:lk-bwd}
@keyframes lk-fwd{from{opacity:0;transform:translateX(22px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes lk-bwd{from{opacity:0;transform:translateX(-22px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
/* contraseña con ojo */
.lk-pw{position:relative;display:block}
.lk-pw input{width:100%;box-sizing:border-box;padding-right:52px!important}
.lk-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:12px;border:none;background:none;color:#4e596b;cursor:pointer;display:grid;place-items:center}
.lk-eye svg{width:20px;height:20px}.lk-eye:hover{background:rgb(13 24 48/.06)}.lk-eye.on{color:#1f4fd1}
.lk-eye:active{transform:translateY(-50%) scale(.92)}
/* requisitos en vivo y Bloq Mayús */
.lk-req{display:flex;gap:8px;margin-top:-4px}
.lk-req span{font-size:12px;font-weight:600;color:#6a7486;padding:4px 10px 4px 22px;border-radius:999px;background:rgb(13 24 48/.05);position:relative;transition:color .2s,background .2s}
.lk-req span::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;opacity:.5}
.lk-req span.ok{color:#2f5400;background:rgb(91 138 0/.14)}.lk-req span.ok::before{opacity:1}
.lk-caps{font-size:12.5px;font-weight:700;color:#92560a;background:rgb(242 187 69/.22);border-radius:10px;padding:7px 12px;text-align:center}
.lk-b:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.lk-b:disabled:active{transform:none}
/* tecla pulsada también con el teclado físico */
.lk-k.is-press{background:#0d1830;color:#c6ef5a;transform:scale(.93)}
.lk-k{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* áreas de toque y contraste */
.lk-a{min-height:32px;padding:6px 8px;border-radius:10px}
.lk-a:hover{background:rgb(31 79 209/.06);text-decoration:none}
.lk-foot{color:#4e596b}
.lk-feat li{color:#2a3446}
@media (prefers-reduced-transparency:reduce){.lk-card{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.lk-brand{background:rgb(255 255 255/.7)}.lk-feat li{background:#fff}}
@media (prefers-contrast:more){.lk-card{background:#fff;box-shadow:0 0 0 2px #0d1830}.lk-form input:not([type=checkbox]){box-shadow:inset 0 0 0 2px #0d1830}.lk-m,.lk-msg,.lk-foot{color:#2a3446}}
@media (prefers-reduced-motion:reduce){.lk-in,.lk-st,.lk-card.swap .lk-body{animation:none!important}.lk-k.is-press{transform:none}}
/* 8c · lavado de cara: escenario 3D estilo estudio */
.lk-grid{grid-template-columns:minmax(0,1.32fr) minmax(400px,.88fr);gap:16px;padding:16px}
.lk-brand{min-height:calc(100vh - 32px);padding:34px 40px 38px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 38%,rgb(255 255 255/.72),rgb(255 255 255/.28) 55%,rgb(255 255 255/.14)),linear-gradient(180deg,rgb(232 238 252/.5),rgb(238 244 226/.35));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.95),inset 0 0 0 1px rgb(255 255 255/.7),0 40px 80px -48px rgb(13 24 48/.4)}
.lk-brand-top,.lk-brand-txt{position:relative;z-index:2;pointer-events:none}
.lk-brand-top{display:flex;align-items:center;justify-content:space-between}
.lk-brand-txt *{pointer-events:auto}
.lk-stage{position:absolute;inset:0;z-index:1;--px:0;--py:0}
.lk-3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;opacity:0;transition:opacity 1s ease .15s}
.lk-3d-on .lk-3d{opacity:1}
/* halo de estudio detrás del objeto + rejilla muy tenue que da suelo */
.lk-glow{position:absolute;left:50%;top:42%;width:min(62vh,74%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgb(255 255 255/.95),rgb(255 255 255/.5) 38%,rgb(214 226 255/.25) 58%,transparent 70%);filter:blur(6px)}
.lk-stage::after{content:"";position:absolute;inset:auto 0 0;height:52%;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgb(13 24 48/.06) 1px,transparent 1px),linear-gradient(90deg,rgb(13 24 48/.06) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%);
  transform:perspective(700px) rotateX(58deg);transform-origin:50% 0}
/* sin WebGL: el isotipo plano ocupa su sitio */
.lk-3d-no .lk-glow::after{content:"";position:absolute;inset:26%;background:no-repeat center/contain url("img/5ed8f654bdb6.svg")}
/* tarjetas de cristal que flotan alrededor (paralaje con el ratón) */
.lk-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;pointer-events:none;
  background:rgb(255 255 255/.62);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.95),inset 0 0 0 1px rgb(255 255 255/.6),0 18px 40px -22px rgb(13 24 48/.45);
  animation:lk-float 7s ease-in-out infinite,lk-up .8s var(--d,.6s) cubic-bezier(.2,.8,.2,1) backwards}
.lk-chip span{display:flex;flex-direction:column;line-height:1.2}
.lk-chip b{font-size:13px;font-weight:700;color:#0d1830}.lk-chip small{font-size:11.5px;font-weight:500;color:#4e596b}
.lk-chip i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:800}
.lk-chip .dot{background:#0d1830;position:relative}.lk-chip .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:#c6ef5a;box-shadow:0 0 0 4px rgb(198 239 90/.25)}
.lk-chip .ok{background:rgb(91 138 0/.14);color:#3f6400}
.lk-chip.c1{left:63%;top:17%;--d:.7s;translate:calc(var(--px)*-34px) calc(var(--py)*-22px)}
.lk-chip.c2{left:9%;top:52%;--d:.85s;animation-delay:-3.5s,.85s;translate:calc(var(--px)*-22px) calc(var(--py)*-16px)}
.lk-chip{transition:translate .9s cubic-bezier(.2,.8,.2,1)}
@keyframes lk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* pista de interacción: se retira en cuanto juegas con el anillo */
.lk-hint{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#4e596b;opacity:0;transition:opacity .6s}
.lk-3d-on .lk-hint{opacity:1}.lk-played .lk-hint{opacity:0}
.lk-hint span{margin-right:4px}
.lk-hint kbd{font:700 11px var(--font);min-width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#0d1830;background:rgb(255 255 255/.75);box-shadow:inset 0 -1px 0 rgb(13 24 48/.12),0 1px 2px rgb(13 24 48/.08)}
.lk-slogan{font-size:clamp(36px,4.4vw,62px)}
.lk-brand-txt{max-width:640px}
@media (max-height:760px){.lk-chip{display:none}}
@media (prefers-reduced-motion:reduce){.lk-chip{animation:none;transition:none;translate:none}.lk-3d{transition:none}}
@media (prefers-reduced-transparency:reduce){.lk-chip{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* 8d · columna de marca en oscuro: navy con color difuminado que respira */
.lk-brand{background:#0d1830;color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.1),inset 0 0 0 1px rgb(255 255 255/.06),0 40px 90px -40px rgb(13 24 48/.65)}
.lk-blobs{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.lk-blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.lk-blobs i:nth-child(1){width:55%;aspect-ratio:1;left:-12%;top:-14%;background:#1f4fd1;animation:lk-b1 22s ease-in-out infinite alternate}
.lk-blobs i:nth-child(2){width:38%;aspect-ratio:1;right:-8%;top:8%;background:#c6ef5a;opacity:.22;animation:lk-b2 26s ease-in-out infinite alternate}
.lk-blobs i:nth-child(3){width:50%;aspect-ratio:1;left:30%;bottom:-30%;background:#5b8cff;opacity:.35;animation:lk-b3 30s ease-in-out infinite alternate}
.lk-blobs i:nth-child(4){width:30%;aspect-ratio:1;left:8%;bottom:6%;background:#7fd6ff;opacity:.18;animation:lk-b2 34s -9s ease-in-out infinite alternate-reverse}
@keyframes lk-b1{to{transform:translate(22%,18%) scale(1.15)}}
@keyframes lk-b2{to{transform:translate(-28%,26%) scale(.9)}}
@keyframes lk-b3{to{transform:translate(-20%,-22%) scale(1.2)}}
/* grano encima del color para que no se vea banding */
.lk-blobs::after{content:"";position:absolute;inset:0;opacity:.12;mix-blend-mode:overlay;background-image:url("img/b1e50876c96b.svg")}
.lk-stage{z-index:1}
.lk-glow{background:radial-gradient(circle,rgb(143 176 255/.28),rgb(31 79 209/.14) 40%,transparent 68%);filter:blur(10px)}
.lk-stage::after{opacity:.35;background-image:linear-gradient(rgb(255 255 255/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.07) 1px,transparent 1px)}
.lk-logo{color:#fff}
.lk-brand .lk-eyebrow{color:#c6ef5a}
.lk-brand .lk-slogan{color:#fff}
.lk-brand .lk-slogan mark{background:#c6ef5a;color:#0d1830;border-radius:.12em;padding:0 .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lk-brand .lk-feat li{color:#dfe5f1;background:rgb(255 255 255/.07);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.lk-hint{color:#aab4c8}
.lk-hint kbd{color:#fff;background:rgb(255 255 255/.1);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),inset 0 -1px 0 rgb(0 0 0/.3)}
/* tarjetas: quietas (sin paralaje ni flotación), cristal oscuro, el contenido cambia con un fundido */
.lk-chip{translate:none!important;animation:lk-up .8s var(--d,.6s) cubic-bezier(.2,.8,.2,1) backwards;background:rgb(255 255 255/.07);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.14),inset 0 0 0 1px rgb(255 255 255/.08),0 24px 50px -28px rgb(0 0 0/.6)}
.lk-chip b{color:#fff}.lk-chip small{color:#aab4c8}
.lk-chip span{transition:opacity .35s ease,transform .35s ease,filter .35s ease}
.lk-chip.fuera span{opacity:0;transform:translateY(5px);filter:blur(3px)}
.lk-chip .dot{background:rgb(198 239 90/.14)}
.lk-chip .ok{background:rgb(198 239 90/.14);color:#c6ef5a}
.lk-chip.c1{left:auto;right:36px;top:13%}
.lk-chip.c2{left:36px;top:58%}
@media (prefers-reduced-motion:reduce){.lk-blobs i{animation:none}.lk-chip span{transition:none}}
@media (prefers-reduced-transparency:reduce){.lk-chip{background:#1a2742}}
/* 8e · cuadrícula en el fondo + botón claro/oscuro */
#lk::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgb(13 24 48/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(13 24 48/.07) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(75% 80% at 75% 50%,#000 20%,rgb(0 0 0/.35) 60%,transparent 95%);mask-image:radial-gradient(75% 80% at 75% 50%,#000 20%,rgb(0 0 0/.35) 60%,transparent 95%)}
.lk-side{position:relative}
.lk-theme{position:absolute;top:4px;right:4px;z-index:3;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;color:#0d1830;
  background:rgb(255 255 255/.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgb(13 24 48/.08),0 8px 20px -12px rgb(13 24 48/.4);transition:transform .15s,background .2s}
.lk-theme:hover{background:#fff}.lk-theme:active{transform:scale(.92)}
.lk-theme:focus-visible{outline:2px solid #1f4fd1;outline-offset:3px}
.lk-theme svg{width:20px;height:20px}.lk-theme .i-sun{display:none}
/* ===== acceso en modo oscuro ===== */
:root[data-theme="dark"] #lk{background:#0a1121;color:#fff}
:root[data-theme="dark"] #lk::before{mix-blend-mode:overlay;opacity:.1}
:root[data-theme="dark"] #lk::after{background-image:linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px)}
:root[data-theme="dark"] .lk-theme{color:#c6ef5a;background:rgb(255 255 255/.07);box-shadow:inset 0 1px 0 rgb(255 255 255/.1),inset 0 0 0 1px rgb(255 255 255/.08)}
:root[data-theme="dark"] .lk-theme:hover{background:rgb(255 255 255/.12)}
:root[data-theme="dark"] .lk-theme .i-sun{display:block}:root[data-theme="dark"] .lk-theme .i-moon{display:none}
:root[data-theme="dark"] .lk-brand{box-shadow:inset 0 1px 0 rgb(255 255 255/.1),inset 0 0 0 1px rgb(255 255 255/.08),0 40px 90px -40px rgb(0 0 0/.8)}
:root[data-theme="dark"] .lk-card{background:linear-gradient(160deg,rgb(30 40 66/.72),rgb(16 22 40/.6));box-shadow:inset 0 1px 0 rgb(255 255 255/.1),inset 0 0 0 1px rgb(255 255 255/.07),0 40px 80px -36px rgb(0 0 0/.7)}
:root[data-theme="dark"] .lk-card::before{background:radial-gradient(100% 50% at 10% 0%,rgb(255 255 255/.07),transparent 60%)}
:root[data-theme="dark"] .lk-t{color:#fff}
:root[data-theme="dark"] .lk-m,:root[data-theme="dark"] .lk-msg{color:#a9b3c7}
:root[data-theme="dark"] .lk-err{color:#ff8a78}
:root[data-theme="dark"] .lk-form label:not(.lk-check),:root[data-theme="dark"] .lk-check{color:#cfd6e4}
:root[data-theme="dark"] .lk-form input:not([type=checkbox]){color:#fff;background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
:root[data-theme="dark"] .lk-form input:not([type=checkbox]):focus{box-shadow:inset 0 0 0 1.5px #8fb0ff,0 0 0 4px rgb(143 176 255/.16)}
:root[data-theme="dark"] .lk-check span{background:rgb(255 255 255/.16)}
:root[data-theme="dark"] .lk-check input:checked+span{background:#c6ef5a}
:root[data-theme="dark"] .lk-check input:checked+span::after{background:#0d1830}
:root[data-theme="dark"] .lk-b{background:#c6ef5a;color:#0d1830;box-shadow:0 14px 30px -14px rgb(198 239 90/.45)}
:root[data-theme="dark"] .lk-b:hover{background:#d4f57a}
:root[data-theme="dark"] .lk-b.ghost{background:rgb(255 255 255/.08);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
:root[data-theme="dark"] .lk-a{color:#8fb0ff}:root[data-theme="dark"] .lk-a:hover{background:rgb(143 176 255/.1)}
:root[data-theme="dark"] .lk-q{fill:rgb(255 255 255/.14)}:root[data-theme="dark"] .lk-q.on{fill:#fff}:root[data-theme="dark"] .lk-q.ok{fill:#c6ef5a}
:root[data-theme="dark"] .lk-k{color:#fff;background:linear-gradient(160deg,rgb(255 255 255/.12),rgb(255 255 255/.05));box-shadow:inset 0 1px 0 rgb(255 255 255/.1),inset 0 0 0 1px rgb(255 255 255/.07)}
:root[data-theme="dark"] .lk-k:active,:root[data-theme="dark"] .lk-k.is-press{background:#c6ef5a;color:#0d1830}
:root[data-theme="dark"] .lk-txt{color:#a9b3c7}
:root[data-theme="dark"] .lk-foot{color:#a9b3c7aa}
:root[data-theme="dark"] .lk-req span{color:#a9b3c7;background:rgb(255 255 255/.07)}
:root[data-theme="dark"] .lk-req span.ok{color:#c6ef5a;background:rgb(198 239 90/.14)}
:root[data-theme="dark"] .lk-caps{color:#ffd27a;background:rgb(242 187 69/.14)}
:root[data-theme="dark"] .lk-eye{color:#a9b3c7}:root[data-theme="dark"] .lk-eye.on{color:#8fb0ff}:root[data-theme="dark"] .lk-eye:hover{background:rgb(255 255 255/.08)}
:root[data-theme="dark"] .lk-mlogo .lk-logo{color:#fff}
:root[data-theme="dark"] .lk-mlogo svg [fill="#0D1830"]{fill:#fff}:root[data-theme="dark"] .lk-mlogo svg [fill="#5B8A00"]{fill:#c6ef5a}
:root[data-theme="dark"] .lk-b:disabled{opacity:1;background:rgb(255 255 255/.08);color:#6f7a90;box-shadow:none}
@media (max-width:960px){.lk-grid{grid-template-columns:1fr}#lk::after{-webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 20%,rgb(0 0 0/.35) 60%,transparent 95%);mask-image:radial-gradient(80% 70% at 50% 45%,#000 20%,rgb(0 0 0/.35) 60%,transparent 95%)}}

/* =====================================================================
   9. TUTORIAL DE INICIO (configuración inicial con vista previa en vivo)
   ===================================================================== */
.ob{--ob-bg:#fff;--ob-ink:#0d1830;--ob-mute:#5a6578;--ob-line:rgb(13 24 48/.1);--ob-soft:#f4f5f8;--ob-acc:#1f4fd1;--ob-pri:#0d1830;--ob-pri-ink:#fff;--ob-sel:rgb(31 79 209/.05);--ob-ok:#3f6400;
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;font-family:var(--font);color:var(--ob-ink)}
:root[data-theme="dark"] .ob{--ob-bg:#111a2e;--ob-ink:#fff;--ob-mute:#a9b3c7;--ob-line:rgb(255 255 255/.1);--ob-soft:rgb(255 255 255/.05);--ob-acc:#8fb0ff;--ob-pri:#c6ef5a;--ob-pri-ink:#0d1830;--ob-sel:rgb(198 239 90/.07);--ob-ok:#c6ef5a}
.ob-scrim{position:absolute;inset:0;background:rgb(13 24 48/.32);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .45s ease}
:root[data-theme="dark"] .ob-scrim{background:rgb(3 7 16/.6)}
.ob.show .ob-scrim{opacity:1}.ob.out .ob-scrim{opacity:0}
/* la tarjeta: empieza como bienvenida y se expande hasta el asistente */
.ob-card{position:relative;background:var(--ob-bg);border-radius:28px;overflow:hidden;box-shadow:0 50px 120px -40px rgb(13 24 48/.55),0 0 0 1px var(--ob-line);
  width:min(760px,calc(100vw - 32px));height:min(440px,calc(100vh - 32px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0fr);
  transition:width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1),grid-template-columns .7s cubic-bezier(.2,.8,.2,1),opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1);
  opacity:0;transform:translateY(16px) scale(.97)}
.ob.show .ob-card{opacity:1;transform:none}.ob.out .ob-card{opacity:0;transform:scale(.97)}
.ob-card.is-wizard{width:min(1140px,calc(100vw - 32px));height:min(720px,calc(100vh - 32px));grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
/* bienvenida */
.ob-welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;gap:14px;transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.is-wizard .ob-welcome{opacity:0;transform:scale(.96);pointer-events:none}
.ob-welcome h1{margin:0;font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.ob-welcome p{margin:0;max-width:440px;color:var(--ob-mute);font-size:16px;line-height:1.5}.ob-welcome p b{color:var(--ob-ink)}
.ob-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ob-mute);background:var(--ob-soft);padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ob-line)}
.ob-ring{width:30px;height:30px;flex:none}.ob-ring path{fill:var(--ob-ink)}.ob-ring .q0{fill:#5b8a00}
:root[data-theme="dark"] .ob-ring .q0{fill:#c6ef5a}
.ob-ring.intro{width:58px;height:58px}
.ob-ring.intro path{animation:ob-q .6s cubic-bezier(.2,1.4,.4,1) backwards;transform-origin:60px 60px}
.ob-ring.intro .q0{animation-delay:.15s}.ob-ring.intro .q1{animation-delay:.25s}.ob-ring.intro .q2{animation-delay:.35s}.ob-ring.intro .q3{animation-delay:.45s}
@keyframes ob-q{from{opacity:0;transform:scale(.4) rotate(-40deg)}}
.wave{display:inline-block;transform-origin:70% 80%;animation:ob-wave 1.6s .6s ease-in-out 2}
@keyframes ob-wave{0%,60%,100%{transform:none}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
.ob-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ob-pills span{font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:999px;background:var(--ob-soft);box-shadow:inset 0 0 0 1px var(--ob-line);animation:ob-up .6s calc(.7s + var(--i)*.18s) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes ob-up{from{opacity:0;transform:translateY(10px) scale(.96)}}
.ob-wact{display:flex;gap:16px;align-items:center;margin-top:10px;animation:ob-up .6s 1.3s backwards}
.ob-link{background:none;border:none;color:var(--ob-mute);font:600 13.5px var(--font);cursor:pointer;padding:8px}
.ob-link:hover{color:var(--ob-ink)}
/* columna izquierda */
.ob-left{display:flex;flex-direction:column;min-width:0;min-height:0;padding:30px 36px 26px;opacity:0;transition:opacity .4s .25s}
.is-wizard .ob-left,.is-final .ob-left{opacity:1}
.ob-card.is-welcome .ob-left,.ob-card.is-welcome .ob-prev{visibility:hidden}
.ob-bar{display:flex;align-items:center;gap:16px}
.ob-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:19px;letter-spacing:-.03em}.ob-brand .ob-ring{width:24px;height:24px}
.ob-dots{display:flex;gap:5px;align-items:center}
.ob-dots i{width:6px;height:6px;border-radius:999px;background:var(--ob-line);transition:width .35s cubic-bezier(.2,.8,.2,1),background .3s}
.ob-dots i.done{background:color-mix(in srgb,var(--ob-ink) 45%,transparent)}.ob-dots i.on{width:22px;background:var(--ob-ink)}
.ob-step{margin-left:auto;font-size:13px;font-weight:600;color:var(--ob-mute)}
.ob-x{width:34px;height:34px;border-radius:50%;border:none;background:none;color:var(--ob-mute);cursor:pointer;font-size:14px}
.ob-x:hover{background:var(--ob-soft);color:var(--ob-ink)}
.ob-content{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:26px;animation:ob-in .45s cubic-bezier(.2,.8,.2,1) backwards}
.ob-content.back{animation-name:ob-inb}
@keyframes ob-in{from{opacity:0;transform:translateX(18px)}}@keyframes ob-inb{from{opacity:0;transform:translateX(-18px)}}
.ob-head h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.ob-head p{margin:8px 0 0;color:var(--ob-mute);font-size:15px;line-height:1.5}
.ob-head .ob-eyebrow{display:inline-block;margin-bottom:12px}
/* opciones */
.ob-ops{display:grid;gap:10px;margin-top:22px;overflow:auto;padding:2px;margin-left:-2px;margin-right:-2px}
.ob-ops.c2{grid-template-columns:1fr 1fr}.ob-ops.c3{grid-template-columns:repeat(3,1fr)}
.ob-op{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 14px 11px 11px;border-radius:16px;border:none;cursor:pointer;color:var(--ob-ink);font:inherit;
  background:var(--ob-bg);box-shadow:inset 0 0 0 1px var(--ob-line);transition:box-shadow .18s,background .18s,transform .12s;animation:ob-up .45s calc(.05s + var(--i)*.035s) cubic-bezier(.2,.8,.2,1) backwards}
.ob-op:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ob-ink) 35%,transparent);background:var(--ob-soft)}
.ob-op:active{transform:scale(.985)}
.ob-op:focus-visible{outline:2px solid var(--ob-acc);outline-offset:2px}
.ob-op.on{box-shadow:inset 0 0 0 1.6px var(--ob-ink);background:var(--ob-sel)}
:root[data-theme="dark"] .ob-op.on{box-shadow:inset 0 0 0 1.6px #c6ef5a}
.ob-op .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:var(--ob-soft);flex:none}
.ob-op.pct .ic{width:auto;min-width:46px;padding:0 6px;font-size:19px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:baseline;justify-content:center;gap:1px}
.ob-op.pct .ic small{font-size:12px}
.ob-op .tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ob-op b{font-size:14.5px;font-weight:700;line-height:1.25}.ob-op small{font-size:12.5px;color:var(--ob-mute);line-height:1.35}
.ob-op kbd{font:700 10.5px var(--font);color:var(--ob-mute);opacity:0;transition:opacity .15s;min-width:18px;height:18px;border-radius:5px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--ob-line)}
.ob-op:hover kbd,.ob-op:focus-visible kbd{opacity:1}
.ob-op .rd{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ob-line);flex:none;display:grid;place-items:center;transition:background .18s,box-shadow .18s}
.ob-op[role=checkbox] .rd{border-radius:6px}
.ob-op.on .rd{background:var(--ob-pri);box-shadow:none}
.ob-op.on .rd::after{content:"";width:9px;height:5px;border:2px solid var(--ob-pri-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
:root:not([data-theme="dark"]) .ob-op.on .rd::after{border-color:#c6ef5a}
.ob-ops.small .ob-op{padding:12px 14px}
/* formulario de datos */
.ob-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:22px}
.ob-form label,.ob-cust{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--ob-mute);position:relative}
.ob-form .full{grid-column:1/-1}
.ob-form input,.ob-cust input{height:46px;border-radius:14px;border:none;padding:0 14px;font:600 15px var(--font);color:var(--ob-ink);background:var(--ob-soft);box-shadow:inset 0 0 0 1px var(--ob-line);transition:box-shadow .2s}
.ob-form input:focus,.ob-cust input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ob-acc),0 0 0 4px color-mix(in srgb,var(--ob-acc) 16%,transparent)}
.nif-st{position:absolute;right:12px;bottom:14px;font-size:12px;font-weight:700}
.nif-st.ok{color:var(--ob-ok)}.nif-st.bad{color:#d0712a}
.ob-hint{font-size:12.5px;color:var(--ob-mute);margin:12px 0 0}
.ob-cust{margin-top:14px;max-width:240px}
.ob-lab{font-size:12.5px;font-weight:700;color:var(--ob-mute);margin:22px 0 8px}
.ob-seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--ob-soft);box-shadow:inset 0 0 0 1px var(--ob-line);gap:2px;align-self:flex-start}
.ob-seg button{border:none;background:none;color:var(--ob-mute);font:700 13.5px var(--font);padding:9px 14px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.ob-seg button.on{background:var(--ob-bg);color:var(--ob-ink);box-shadow:0 1px 3px rgb(13 24 48/.12),inset 0 0 0 1px var(--ob-line)}
/* pie */
.ob-foot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center}
.ob-next{height:48px;padding:0 22px;border-radius:999px;border:none;cursor:pointer;font:700 15px var(--font);background:var(--ob-pri);color:var(--ob-pri-ink);display:inline-flex;align-items:center;gap:10px;transition:transform .12s,opacity .2s,box-shadow .2s;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--ob-pri) 70%,transparent)}
.ob-next:hover{transform:translateY(-1px)}.ob-next:active{transform:scale(.97)}
.ob-next:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.ob-next kbd{font:700 11px var(--font);opacity:.6}
.ob-next:focus-visible,.ob-back:focus-visible{outline:2px solid var(--ob-acc);outline-offset:3px}
.ob-back{height:44px;padding:0 16px;border-radius:999px;border:none;background:none;color:var(--ob-mute);font:700 14px var(--font);cursor:pointer}
.ob-back:hover{background:var(--ob-soft);color:var(--ob-ink)}
/* resumen final */
.ob-sum{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-sum li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;padding:12px 14px;border-radius:14px;background:var(--ob-soft);animation:ob-up .5s calc(.15s + var(--i)*.08s) backwards}
.ob-sum span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.ob-sum .ok span{background:var(--ob-pri);color:var(--ob-pri-ink)}
:root:not([data-theme="dark"]) .ob-sum .ok span{color:#c6ef5a}
.ob-sum .pend span{background:rgb(242 187 69/.25);color:#92560a}
/* ---------- vista previa ---------- */
.ob-prev{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;min-width:0;overflow:hidden;
  background:radial-gradient(70% 60% at 30% 20%,rgb(195 212 255/.7),transparent 70%),radial-gradient(60% 60% at 90% 90%,rgb(226 245 176/.7),transparent 70%),#eef1f8;opacity:0;transition:opacity .5s .3s}
.ob-prev::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(13 24 48/.06) 1px,transparent 1px),linear-gradient(90deg,rgb(13 24 48/.06) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
:root[data-theme="dark"] .ob-prev{background:radial-gradient(70% 60% at 30% 20%,rgb(31 79 209/.45),transparent 70%),radial-gradient(60% 60% at 90% 90%,rgb(198 239 90/.14),transparent 70%),#0b1324}
:root[data-theme="dark"] .ob-prev::before{background-image:linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px)}
.is-wizard .ob-prev{opacity:1}
.obp-win{position:relative;width:min(100%,470px);min-height:330px;display:flex;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px rgb(13 24 48/.45),0 0 0 1px rgb(13 24 48/.06);transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ob-prev:hover .obp-win{transform:none}
:root[data-theme="dark"] .obp-win{background:#141e34;box-shadow:0 30px 60px -28px rgb(0 0 0/.7),0 0 0 1px rgb(255 255 255/.08)}
.obp-rail{width:46px;background:#0d1830;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 0}
.obp-logo .ob-ring.rail{width:22px;height:22px}.obp-logo .ob-ring path{fill:#fff}.obp-logo .ob-ring .q0{fill:#c6ef5a}
.obp-rail i{width:16px;height:16px;border-radius:5px;background:rgb(255 255 255/.14);transition:background .3s}.obp-rail i.on{background:#c6ef5a}
.obp-main{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;color:#0d1830;font-size:11px}
:root[data-theme="dark"] .obp-main{color:#fff}
.obp-top b{display:block;font-size:13px;font-weight:800}.obp-top small{color:#7a8496;font-size:10px}
.obp-body{display:flex;flex-direction:column;gap:9px;min-height:0}
.obp-body.in{animation:ob-pv .38s cubic-bezier(.2,.8,.2,1)}
@keyframes ob-pv{from{opacity:.55;transform:translateY(3px)}}
.sk{display:inline-block;height:7px;border-radius:4px;background:rgb(13 24 48/.09);vertical-align:middle}
:root[data-theme="dark"] .sk{background:rgb(255 255 255/.1)}
.sk.w20{width:20%}.sk.w30{width:30%}.sk.w40{width:40%}.sk.w50{width:50%}.sk.w60{width:60%}.sk.w70{width:70%}
.obp-hello{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgb(31 79 209/.07);box-shadow:inset 0 0 0 1px rgb(31 79 209/.12)}
.obp-hello .emo{width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:16px;box-shadow:0 1px 3px rgb(13 24 48/.1)}
:root[data-theme="dark"] .obp-hello .emo{background:rgb(255 255 255/.1)}
.obp-hello b{display:block;font-size:12px}.obp-hello small{color:#6a7486;font-size:10px}
.obp-hello.done{background:rgb(198 239 90/.18);box-shadow:inset 0 0 0 1px rgb(91 138 0/.25)}
.obp-hello .ob-ring.lit4{width:30px;height:30px}
.obp-lab{font-size:9.5px;font-weight:700;color:#7a8496;text-transform:uppercase;letter-spacing:.08em}
.obp-chips{display:flex;gap:6px;flex-wrap:wrap}.obp-chips span{padding:5px 9px;border-radius:999px;background:rgb(13 24 48/.06);font-weight:700;font-size:10.5px;animation:ob-up .4s backwards}
:root[data-theme="dark"] .obp-chips span{background:rgb(255 255 255/.08)}
.obp-chips span:nth-child(2){animation-delay:.06s}.obp-chips span:nth-child(3){animation-delay:.12s}
.obp-sk{display:grid;grid-template-columns:1fr 1fr;gap:7px}.obp-sk i{grid-column:1/-1;height:20px;border-radius:7px;background:rgb(13 24 48/.05)}.obp-sk i.half{grid-column:auto}
:root[data-theme="dark"] .obp-sk i{background:rgb(255 255 255/.05)}
/* mini factura */
.obp-inv{border-radius:12px;padding:12px;background:#fbfbfd;box-shadow:inset 0 0 0 1px rgb(13 24 48/.08);display:flex;flex-direction:column;gap:9px;transition:transform .4s}
:root[data-theme="dark"] .obp-inv{background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
.obp-inv.zoom{transform:scale(1.03);transform-origin:top left}
.obp-inv-h{display:flex;justify-content:space-between;gap:10px}
.obp-inv-h>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.obp-inv-h b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.obp-inv-h small{color:#6a7486;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obp-inv-n{text-align:right;display:flex;flex-direction:column;gap:2px}.obp-inv-n b{font-size:12px;font-variant-numeric:tabular-nums}
.obp-inv-l{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid rgb(13 24 48/.08);border-bottom:1px solid rgb(13 24 48/.08);font-weight:600}
:root[data-theme="dark"] .obp-inv-l{border-color:rgb(255 255 255/.08)}
.obp-inv-t{display:flex;flex-direction:column;gap:4px;align-self:flex-end;width:60%}
.obp-inv-t div{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:#4e596b;padding:1px 6px;border-radius:6px;transition:background .3s}
:root[data-theme="dark"] .obp-inv-t div{color:#cfd6e4}
.obp-inv-t .obp-tot{font-weight:800;color:inherit;font-size:12px;border-top:1px solid rgb(13 24 48/.1);padding-top:5px;margin-top:2px;border-radius:0}
.hl{background:rgb(198 239 90/.45);border-radius:6px;box-shadow:0 0 0 3px rgb(198 239 90/.45);color:#0d1830!important}
.obp-notes{display:flex;flex-direction:column;gap:5px}
.obp-notes p{margin:0;display:flex;gap:7px;align-items:flex-start;font-size:10.5px;line-height:1.4;padding:6px 8px;border-radius:9px;background:rgb(31 79 209/.06);animation:ob-up .35s backwards}
.obp-notes p.mute{background:none;color:#7a8496}
.obp-seq{display:flex;gap:6px}.obp-seq span{padding:4px 8px;border-radius:7px;background:rgb(13 24 48/.06);font-weight:700;font-variant-numeric:tabular-nums;opacity:calc(1.15 - var(--i)*.3);animation:ob-up .35s calc(var(--i)*.06s) backwards}
:root[data-theme="dark"] .obp-seq span{background:rgb(255 255 255/.08)}
.obp-sec{display:flex;flex-direction:column;gap:9px}.obp-sec>b{font-size:12px}
.obp-rows{display:flex;flex-direction:column;gap:6px}.obp-rows div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border-radius:8px;background:rgb(13 24 48/.04)}
:root[data-theme="dark"] .obp-rows div{background:rgb(255 255 255/.05)}
.obp-rows em{font-style:normal;font-weight:700;font-size:10px;color:#0d1830;background:#c6ef5a;padding:2px 8px;border-radius:999px}.obp-rows em:empty{display:none}
.obp-tk{display:grid;grid-template-columns:1fr 1fr;gap:8px}.obp-ticket{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:8px;background:#fff;box-shadow:0 6px 14px -8px rgb(13 24 48/.35);transform:rotate(-3deg)}
:root[data-theme="dark"] .obp-ticket{background:#1e2a44}
.obp-ticket b{margin-top:4px}.obp-drop{display:grid;place-items:center;text-align:center;border-radius:10px;border:1.5px dashed rgb(31 79 209/.35);color:#1f4fd1;font-weight:700;padding:8px}
:root[data-theme="dark"] .obp-drop{color:#8fb0ff}
.obp-tax{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:rgb(13 24 48/.04)}.obp-tax .ob-ring{width:52px;height:52px}
.obp-tax>div{display:flex;flex-direction:column;gap:4px}.obp-tax b{font-size:13px}.obp-tax small{color:#7a8496}
.obp-av{display:flex}.obp-av span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:10px;color:#fff;background:#1f4fd1;margin-right:-6px;box-shadow:0 0 0 2px #fff}
.obp-av span:nth-child(2){background:#5b8a00}.obp-av span:nth-child(3){background:#0d1830}.obp-av span:nth-child(4){background:#c6ef5a;color:#0d1830}
:root[data-theme="dark"] .obp-av span{box-shadow:0 0 0 2px #141e34}
.obp-chat{display:flex;flex-direction:column;gap:6px}.obp-chat p{margin:0;padding:8px 10px;border-radius:12px 12px 12px 4px;background:rgb(13 24 48/.05);max-width:85%;line-height:1.4}
.obp-chat p.me{align-self:flex-end;background:#0d1830;color:#fff;border-radius:12px 12px 4px 12px}
:root[data-theme="dark"] .obp-chat p{background:rgb(255 255 255/.07)}:root[data-theme="dark"] .obp-chat p.me{background:#c6ef5a;color:#0d1830}
.obp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.obp-cards i{height:44px;border-radius:9px;background:rgb(13 24 48/.05)}.obp-cards i:first-child{background:#0d1830}
:root[data-theme="dark"] .obp-cards i{background:rgb(255 255 255/.06)}:root[data-theme="dark"] .obp-cards i:first-child{background:#c6ef5a}
.obp-cap{position:relative;font-size:12.5px;font-weight:600;color:#7a8496}
.ob-ring.pop path{animation:ob-q .5s cubic-bezier(.2,1.4,.4,1) backwards}
.ob-ring.pop .q1{animation-delay:.08s}.ob-ring.pop .q2{animation-delay:.16s}.ob-ring.pop .q3{animation-delay:.24s}
.ob-ring.lit4 path,.ob-ring.lit2 .q0,.ob-ring.lit2 .q1{fill:#c6ef5a}.obp-hello .ob-ring.lit4 path{fill:#5b8a00}
.ob-ring.lit2 path{fill:rgb(13 24 48/.12)}:root[data-theme="dark"] .ob-ring.lit2 path{fill:rgb(255 255 255/.14)}
.ob-ring.lit2 .q0,.ob-ring.lit2 .q1{fill:#1f4fd1}
/* ---------- Panel: primeros pasos ---------- */
.ob-steps{margin:0 0 22px;padding:18px 20px;border-radius:20px;background:var(--surface,#fff);box-shadow:inset 0 0 0 1px var(--rule-2,rgb(13 24 48/.08));display:flex;flex-direction:column;gap:12px}
.ob-steps-h{display:flex;align-items:center;gap:12px}.ob-steps-h b{display:block;font-size:15px}.ob-steps-h small{color:var(--muted,#5a6578);font-size:12.5px}
.ob-steps-h .ob-ring{width:34px;height:34px}.ob-steps-h .ob-ring path{fill:rgb(13 24 48/.12)}
:root[data-theme="dark"] .ob-steps-h .ob-ring path{fill:rgb(255 255 255/.14)}
.ob-ring.p1 .q0,.ob-ring.p2 .q0,.ob-ring.p2 .q1,.ob-ring.p3 .q0,.ob-ring.p3 .q1,.ob-ring.p3 .q2{fill:#5b8a00!important}
:root[data-theme="dark"] .ob-ring.p1 .q0,:root[data-theme="dark"] .ob-ring.p2 .q0,:root[data-theme="dark"] .ob-ring.p2 .q1,:root[data-theme="dark"] .ob-ring.p3 .q0,:root[data-theme="dark"] .ob-ring.p3 .q1,:root[data-theme="dark"] .ob-ring.p3 .q2{fill:#c6ef5a!important}
.ob-steps-x{margin-left:auto;background:none;border:none;color:var(--muted,#5a6578);font:600 13px var(--font);cursor:pointer;padding:6px 10px;border-radius:9px}.ob-steps-x:hover{background:rgb(13 24 48/.05)}
.ob-steps-l{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ob-steps-l button{display:flex;align-items:center;gap:9px;text-align:left;padding:11px 12px;border-radius:14px;border:none;cursor:pointer;font:600 13.5px var(--font);color:inherit;background:rgb(13 24 48/.035);box-shadow:inset 0 0 0 1px rgb(13 24 48/.06);transition:background .15s}
:root[data-theme="dark"] .ob-steps-l button{background:rgb(255 255 255/.04);box-shadow:inset 0 0 0 1px rgb(255 255 255/.07)}
.ob-steps-l button:hover{background:rgb(31 79 209/.07)}
.ob-steps-l span{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgb(13 24 48/.2);display:grid;place-items:center;font-size:11px;font-weight:800}
.ob-steps-l .ok{color:var(--muted,#5a6578);text-decoration:line-through;text-decoration-color:rgb(13 24 48/.25)}
.ob-steps-l .ok span{background:#0d1830;color:#c6ef5a;box-shadow:none}
:root[data-theme="dark"] .ob-steps-l .ok span{background:#c6ef5a;color:#0d1830}
.ob-steps-l em{margin-left:auto;font-style:normal;opacity:.5}
.ob-steps-tut{align-self:flex-start;background:none;border:none;color:var(--accent,#1f4fd1);font:600 12.5px var(--font);cursor:pointer;padding:2px 0}
/* responsive y accesibilidad */
@media (max-width:900px){.ob-card.is-wizard{grid-template-columns:1fr 0fr}.ob-prev{display:none}.ob-left{padding:22px 20px 18px}.ob-ops.c2,.ob-ops.c3,.ob-form{grid-template-columns:1fr}.ob-steps-l{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ob-dots{display:none}.ob-head h2{font-size:24px}}
@media (prefers-reduced-motion:reduce){.ob *,.ob-card,.ob-scrim{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.ob-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(13 24 48/.7)}}
@media (prefers-contrast:more){.ob-op{box-shadow:inset 0 0 0 1.5px var(--ob-ink)}}

/* =====================================================================
   10. VERSIÓN MÓVIL Y TABLET (app web): barra superior, pestañas abajo, menú en cajón
   ===================================================================== */
.mb-top,.mb-tabs,.mb-scrim{display:none}
@media (max-width:900px){
  html{-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:none}
  .app,body.sb-collapsed .app{display:block!important;grid-template-columns:none!important;min-height:100dvh}
  /* barra superior */
  .mb-top{display:flex;align-items:center;gap:4px;position:sticky;top:0;z-index:40;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;
    background:rgb(var(--c-bg,242 241 236)/.78);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 .5px 0 var(--sep-strong,rgb(0 0 0/.1))}
  .mb-title{flex:1;min-width:0;text-align:center}.mb-title b{font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .mb-ic{width:44px;height:44px;border-radius:12px;border:none;background:none;color:inherit;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mb-ic svg{width:23px;height:23px}.mb-ic:active{background:rgb(13 24 48/.08)}
  .mb-ic[data-mb="nueva"]{background:#0d1830;color:#c6ef5a;width:38px;height:38px;border-radius:50%;margin-left:4px}
  :root[data-theme="dark"] .mb-ic[data-mb="nueva"]{background:#c6ef5a;color:#0d1830}
  /* menú lateral como cajón */
  .sidebar,body.sb-collapsed .sidebar{position:fixed!important;inset:0 auto 0 0!important;z-index:60;width:min(300px,84vw)!important;height:100dvh!important;margin:0!important;border-radius:0 24px 24px 0!important;
    flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;padding:calc(env(safe-area-inset-top) + 16px) 12px calc(env(safe-area-inset-bottom) + 12px)!important;overflow-y:auto!important;
    transform:translateX(-105%);transition:transform .32s cubic-bezier(.32,.72,0,1);box-shadow:none}
  body.mb-open .sidebar{transform:none;box-shadow:30px 0 80px -20px rgb(0 0 0/.45)}
  .sidebar>*{flex:none!important}
  .sidebar .sb-title{padding:0 4px 8px!important}
  .sidebar .binder{flex-direction:column!important;overflow:visible!important;width:auto!important;order:0!important;max-height:none!important;height:auto!important;min-height:0!important}
  .sidebar .sb-sec{display:block!important}
  .sidebar .binder button{min-height:44px}
  .sidebar .filebox{order:0!important;flex-direction:column!important;align-items:stretch!important}
  .sb-toggle:not(.sb-lock){display:none!important}
  .mb-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgb(13 24 48/.35);opacity:0;pointer-events:none;transition:opacity .3s}
  body.mb-open .mb-scrim{opacity:1;pointer-events:auto}
  /* pestañas inferiores */
  .mb-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);
    background:rgb(var(--c-bg,242 241 236)/.85);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 -.5px 0 var(--sep-strong,rgb(0 0 0/.1))}
  .mb-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border:none;background:none;color:var(--label-2,#5a6578);font:600 10.5px var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:12px}
  .mb-tabs svg{width:24px;height:24px;transition:transform .15s}
  .mb-tabs button:active svg{transform:scale(.88)}
  .mb-tabs button.on{color:#0d1830}.mb-tabs button.on svg{stroke-width:2.2}
  .mb-tabs button.on::before{content:"";position:absolute;width:36px;height:3px;border-radius:2px;background:#5b8a00;transform:translateY(-8px)}
  :root[data-theme="dark"] .mb-tabs button.on{color:#fff}:root[data-theme="dark"] .mb-tabs button.on::before{background:#c6ef5a}
  :root[data-theme="dark"] .mb-top,:root[data-theme="dark"] .mb-tabs{background:rgb(12 18 32/.82)}
  :root[data-theme="dark"] .mb-ic:active{background:rgb(255 255 255/.08)}
  /* contenido */
  .content,#main{padding:12px 14px calc(env(safe-area-inset-bottom) + 92px)!important;min-width:0;max-width:100vw;overflow-x:clip}
  #main h2{font-size:28px!important;line-height:1.1}
  .toolbar{position:static!important;margin:0 0 12px!important;padding:0!important;display:flex;flex-wrap:wrap;gap:8px;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .toolbar>*{flex:1 1 auto}
  .kpis{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .split,.split.wide,.tax-cols,.g2,.g3,.g4,.cards{grid-template-columns:minmax(0,1fr)!important}
  .split>*,.tax-cols>*,.block{min-width:0}
  .tablewrap,.mb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:0 -14px;padding:0 14px}
  .tablewrap table.ledger,.mb-scroll table.ledger{min-width:560px}
  input,select,textarea{font-size:16px!important}/* evita el zoom automático de iOS */
  .btn{min-height:44px}
  /* líneas de factura: el concepto ocupa toda la fila y debajo cantidad, precio e importe */
  table.lines thead{display:none}
  table.lines,table.lines tbody{display:block}
  table.lines tr{display:grid;grid-template-columns:1fr 1.3fr auto 34px;gap:6px;align-items:center;padding:8px 0;border-bottom:.5px solid var(--sep,rgb(0 0 0/.08))}
  table.lines td{display:block;padding:0!important;width:auto!important}
  table.lines td:first-child{grid-column:1/-1}
  table.lines td input,table.lines td textarea{width:100%;box-sizing:border-box}
  /* ventanas: hojas a pantalla completa que suben desde abajo */
  .modal-bg{align-items:flex-end!important;padding:0!important}
  .modal{max-width:none!important;width:100%!important;max-height:94dvh!important;border-radius:24px 24px 0 0!important;overflow:auto;padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
  #toast{bottom:calc(env(safe-area-inset-bottom) + 84px)!important}
  /* la propia pantalla de bloqueo y el tutorial ocultan las barras */
  html.t-locked .mb-top,html.t-locked .mb-tabs,html.ob-open .mb-tabs{display:none}
}
@media (max-width:900px) and (min-width:600px){.kpis{grid-template-columns:repeat(3,1fr)!important}.content,#main{padding-left:24px!important;padding-right:24px!important}}
@media (max-width:420px){.kpis{grid-template-columns:1fr!important}.mb-tabs span{font-size:10px}}
@media print{.mb-top,.mb-tabs,.mb-scrim{display:none!important}}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none!important}}
/* aplicación web: aviso de versión nueva, botón de instalar y ayuda para iPhone */
.web-upd{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);z-index:9500;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;
  background:#0d1830;color:#fff;font:600 14px var(--font);box-shadow:0 20px 50px -20px rgb(13 24 48/.7);animation:ob-up .4s cubic-bezier(.2,.8,.2,1)}
.web-upd button{border:none;border-radius:999px;height:36px;padding:0 14px;background:#c6ef5a;color:#0d1830;font:700 13.5px var(--font);cursor:pointer}
.web-upd .x{background:rgb(255 255 255/.1);color:#fff;width:36px;padding:0}
@media (max-width:900px){.web-upd{bottom:calc(env(safe-area-inset-bottom) + 84px);max-width:calc(100vw - 24px)}}
.web-inst{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0;padding:10px 12px;border-radius:14px;border:none;cursor:pointer;font:600 14px var(--font);color:#0d1830;background:#c6ef5a}
.web-inst svg{width:19px;height:19px}.web-inst:active{transform:scale(.98)}
body.sb-collapsed .web-inst span{display:none}
.web-ios{position:fixed;inset:0;z-index:9600;background:rgb(13 24 48/.4);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.web-ios-c{width:min(420px,100%);background:var(--ob-bg,#fff);color:#0d1830;border-radius:24px;padding:22px;box-shadow:0 30px 80px -20px rgb(0 0 0/.5);margin-bottom:env(safe-area-inset-bottom);animation:ob-up .35s}
:root[data-theme="dark"] .web-ios-c{background:#111a2e;color:#fff}
.web-ios-c b{font-size:18px}.web-ios-c ol{margin:12px 0 16px;padding-left:20px;line-height:1.9}.web-ios-c .k{font-weight:700;background:rgb(13 24 48/.07);padding:2px 8px;border-radius:7px}
:root[data-theme="dark"] .web-ios-c .k{background:rgb(255 255 255/.1)}
.web-ios-c button{width:100%;height:46px;border:none;border-radius:999px;background:#0d1830;color:#fff;font:700 15px var(--font);cursor:pointer}
:root[data-theme="dark"] .web-ios-c button{background:#c6ef5a;color:#0d1830}
/* instalada: sin márgenes de navegador, respeta la muesca */
html.es-app body{padding-top:env(safe-area-inset-top)}
@media (max-width:900px){html.es-app body{padding-top:0}}
/* nube y sincronización */
.nb-beta{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#c6ef5a;color:#0d1830;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.nb-warn{color:#92560a}:root[data-theme="dark"] .nb-warn{color:#ffd27a}
.nb-msg{font-size:13px;color:var(--label-2,#5a6578);align-self:center}.nb-msg.err{color:#be2f1e}
.nb-st{display:flex;align-items:center;gap:12px;margin-bottom:12px}.nb-st b{display:block}.nb-st small{color:var(--label-2,#5a6578)}
.nb-dot,.nb-mini span{width:10px;height:10px;border-radius:50%;flex:none;background:#5b8a00;box-shadow:0 0 0 4px rgb(91 138 0/.15)}
.nb-dot.sync,.nb-mini.sync span{background:#1f4fd1;box-shadow:0 0 0 4px rgb(31 79 209/.15);animation:nb-p 1s ease-in-out infinite alternate}
.nb-dot.err,.nb-mini.err span{background:#d0712a;box-shadow:0 0 0 4px rgb(208 113 42/.15)}
@keyframes nb-p{to{opacity:.35}}
.nb-auto{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px}
.nb-mini{display:flex;align-items:center;gap:8px;width:100%;border:none;background:rgb(255 255 255/.06);color:inherit;font:600 12.5px var(--font);padding:8px 10px;border-radius:10px;cursor:pointer;margin-bottom:6px}
.nb-modal{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:16px;background:rgb(13 24 48/.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nb-card{width:min(460px,100%);background:#fff;color:#0d1830;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 40px 100px -30px rgb(0 0 0/.6);animation:ob-up .35s}
:root[data-theme="dark"] .nb-card{background:#111a2e;color:#fff}
.nb-card>b{font-size:20px;letter-spacing:-.02em}.nb-card p{margin:0;color:#5a6578;line-height:1.5}:root[data-theme="dark"] .nb-card p{color:#a9b3c7}
.nb-card button{display:flex;gap:12px;align-items:center;text-align:left;padding:14px;border-radius:16px;border:none;cursor:pointer;font:inherit;color:inherit;background:rgb(13 24 48/.04);box-shadow:inset 0 0 0 1px rgb(13 24 48/.1)}
:root[data-theme="dark"] .nb-card button{background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.nb-card button:hover{box-shadow:inset 0 0 0 1.6px #1f4fd1}.nb-card button>span:first-child{font-size:22px}
.nb-card button b{display:block}.nb-card button small{color:#6a7486;font-size:12.5px}
.nb-card .nb-hint{font-size:12.5px}

/* ---- web/src/css/ligero.css ---- */
/* ==========================================================================
   Trimus over the API · light mode without graphics acceleration (LDC-0000-T73)
   Rasec (2026-10-24): «Intenta poner el mínimo posible de animaciones cuando algún usuario no tenga la aceleración».
   js/ligero.js puts html.t-ligero only when the browser renders without a GPU (no WebGL, or a software renderer);
   with a GPU none of this applies. The build also copies under html.t-ligero every rule Isi wrote for «reducir
   movimiento» and «transparencia reducida» (web/build/ligero.mjs); this sheet adds what those rules do not cover.
   What stays: the final look of every screen, the keyboard focus, the pressed state and the loading indicators,
   all of them as instant changes, without movement.
   ========================================================================== */

/* 1. Nothing moves: no animation, no transition, no blur of what is behind (in software every blur is redrawn on
   each frame). Final states only: an entrance animation that is gone leaves its element where it ends. */
html.t-ligero *,html.t-ligero *::before,html.t-ligero *::after{animation:none!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.t-ligero,html.t-ligero *{scroll-behavior:auto!important}
html.t-ligero::view-transition-group(*),html.t-ligero::view-transition-old(*),html.t-ligero::view-transition-new(*){animation:none!important}

/* 2. Decorations that only exist to move or that need the GPU: the light that follows the pointer and the blurred
   blobs (of the app and of the access screen). The soft glow of the page background stays (#t-blobs itself). */
html.t-ligero .t-spot::before,html.t-ligero .t-spot::after{display:none!important}
html.t-ligero #t-blobs i,html.t-ligero .lk-blobs i{display:none!important}

/* ---- web/src/css/rendimiento.css ---- */
/* ==========================================================================
   Trimus over the API · smooth animations with the same look (LDC-0000-T70)
   The served build appends this file to the end of estilos.css (web/build/build.mjs, served build only), so it wins
   over Isi's rules without touching them. Each rule was measured with Chrome traces at 1300 px, CPU x1 and x4, on
   the served v2 and on the prototype (docs/ux/t70/README.md); the same changes LDC-0000-T44 made in the Vue app
   (frontend/src/styles/motion.css), plus the decision of Rasec of 2026-10-23 on the background blobs.
   ========================================================================== */

/* 1. Light that follows the pointer (.t-spot). js/tema.js writes --mx/--my on the card on every pointer move. As
   plain custom properties every descendant inherits them, so each move restyled the whole card (the whole invoice
   table). Registered as non-inherited, only the card and its two light layers are restyled. Same default (50%) as
   var(--mx,50%). */
@property --mx{syntax:'<length-percentage>';inherits:false;initial-value:50%}
@property --my{syntax:'<length-percentage>';inherits:false;initial-value:50%}
.t-spot::before,.t-spot::after{--mx:inherit;--my:inherit}

/* 2. Page glow. A body background with background-attachment:fixed is repainted on every scroll step. The same two
   radial gradients now live on the fixed #t-blobs layer (js/tema.js, fondo()), which covers the same viewport and
   sits under everything (z-index:-1), so the page looks the same. While the screen is locked, html.t-locked body
   keeps its plain background and #t-blobs stays hidden, as before. */
body{background:var(--t-bg)}
#t-blobs{background:radial-gradient(55vmax 45vmax at 15% -12%,var(--t-glow-a),transparent 70%),radial-gradient(45vmax 40vmax at 105% 2%,var(--t-glow-b),transparent 70%)}
@media (prefers-reduced-transparency:reduce){#t-blobs{display:block}#t-blobs i{display:none}}
@media print{#t-blobs{display:none}}

/* 3. Decision of Rasec (2026-10-23, «Pararlas»): the background blobs stop. The four blurred blobs of the app
   (#t-blobs) and of the brand column of the access screen (.lk-blobs) stay where the drift starts. While they
   drifted under the glass panels (backdrop-filter), the compositor redrew the whole screen on every frame, even at
   rest. Paused, not removed: each blob keeps the exact place of the first frame of the prototype (the fourth one
   starts at the far end, alternate-reverse; one of the access starts 9 s in, negative delay). :nth-child(n) gives
   the same specificity as Isi's per-blob rules (their `animation` shorthand resets the play state), and this sheet
   comes after them. «Reducir movimiento» still removes the animations altogether (Isi's !important rules). */
#t-blobs i:nth-child(n),.lk-blobs i:nth-child(n){animation-play-state:paused}

/* 4. At rest (web/src/js/api/api-reposo.js puts html.t-still with the tab hidden, while scrolling and after 5 s without
   pointer, keyboard or touch) the decorations that loop forever pause where they are and go on from there at the
   next interaction: the breathing dots of the file status and of the due alerts, the glow of the dark card of the
   panel and the floating chips of the access screen. Same list and rule as the Vue app (frontend/src/styles/
   motion.css, LDC-0000-T45). The loading spinner (.spin) keeps turning. */
html.t-still .lk-chip,
html.t-still :is(.reserve,.filebox .dot.ok,.alert.due .al-dot)::before,
html.t-still :is(.reserve,.filebox .dot.ok,.alert.due .al-dot)::after{animation-play-state:paused}

/* 5. Rows of the lists as their own paint layer. A row that gains or loses :hover (and the light of rule 1 over the
   table) made Chrome record the whole table again on every pointer move: about 20 ms per move with CPU x4 for 160
   invoices. position:relative (no offsets, so nothing moves) lets each row keep its recorded paint, and only the rows
   that change are painted again. No rule of Isi positions anything inside a row (web/tests/filas.test.js checks the
   painted rows). The two light layers of .t-spot keep painting above the rows, as before: z-index:1 inside the card,
   which is always its own stacking context (isolation:isolate; with reduced transparency Isi drops the
   backdrop-filter that made it one, and the light must not escape the card). Measured difference: none outside the light circle while hovering, and at most 2 of 255
   levels inside it (rounding of the gradient), docs/ux/t70/README.md. */
#main tbody tr{position:relative}
.t-spot{isolation:isolate}
.t-spot::before,.t-spot::after{z-index:1}

/* 6. Shine of the primary button and lime pill of the sidebar (fixes 4 and 5 of LDC-0000-T44). The shine moved with
   `left` and the pill also animated width and height: layout on every frame. translateX(400%) of a stripe that is 45%
   wide is the same 180% trip as left:-60% → 120%, with the same easing; every entry of the sidebar has the same size,
   so the pill only needs its position (js/tema.js still writes the same width and height). Only without «reducir
   movimiento», so Isi's reduce rules (.nav-pill without transition) stay as they are; with it, the shine does not
   sweep either (it was the one movement left on hover). */
@media (prefers-reduced-motion:no-preference){
  .btn.primary::after{transition:transform .7s var(--t-ease)}
  .btn.primary:hover::after{left:-60%;transform:translateX(400%) skewX(-18deg)}
  .nav-pill{transition:transform .45s var(--t-ease),opacity .2s}
}
@media (prefers-reduced-motion:reduce){.btn.primary::after{transition:none}}

/* ---- generado por web/build/ligero.mjs (LDC-0000-T73): «reducir movimiento» bajo html.t-ligero ---- */
html.t-ligero .modal{animation:dim .2s ease-out}
html.t-ligero #toast{transition:opacity .2s}
html.t-ligero .btn,html.t-ligero .x,html.t-ligero button.stamp{transition:none}
html.t-ligero .btn:active{transform:none}
html.t-ligero .app{transition:none}
html.t-ligero .spin,html.t-ligero .tp-dot{animation:none}
html.t-ligero #main.t-enter>*,html.t-ligero #main.t-enter .kpis>*,html.t-ligero #main.t-enter .cards>*,html.t-ligero #main.t-enter .split>*,html.t-ligero .modal,html.t-ligero .modal-bg,html.t-ligero .filebox .dot.ok::after,html.t-ligero .alert.due .al-dot::after{animation:none!important}
html.t-ligero .nav-pill{transition:none}
html.t-ligero #t-blobs i,html.t-ligero .reserve::before,html.t-ligero .reserve::after,html.t-ligero .modal,html.t-ligero .modal-bg.t-open .mb>*,html.t-ligero #main.t-enter .hbar-track i,html.t-ligero #main.t-enter .obj-t i,html.t-ligero #main.t-enter .chart .b,html.t-ligero #main.t-enter .fc-track i,html.t-ligero #main.t-enter .oh-t i,html.t-ligero #main.t-enter .ledger tbody tr,html.t-ligero #main.t-enter .ring,html.t-ligero #main.t-enter .steps li,html.t-ligero #main.t-enter .alerts .alert{animation:none!important}
html.t-ligero .btn,html.t-ligero .btn:hover{transform:none}
html.t-ligero .qt-ghost{transition:none}
html.t-ligero .lk-in,html.t-ligero .lk-brand,html.t-ligero .lk-card.swap .lk-body{animation:none}
html.t-ligero #lk{transition:opacity .2s}
html.t-ligero .lk-in,html.t-ligero .lk-st,html.t-ligero .lk-card.swap .lk-body{animation:none!important}
html.t-ligero .lk-k.is-press{transform:none}
html.t-ligero .lk-chip{animation:none;transition:none;translate:none}
html.t-ligero .lk-3d{transition:none}
html.t-ligero .lk-blobs i{animation:none}
html.t-ligero .lk-chip span{transition:none}
html.t-ligero .ob *,html.t-ligero .ob-card,html.t-ligero .ob-scrim{animation:none!important;transition:none!important}
html.t-ligero .sidebar{transition:none!important}
html.t-ligero .btn.primary::after{transition:none}