:root{
  --morado:#5b2c83; --morado-2:#7a45a8; --rosa:#ed268f; --cyan:#35b9df;
  --linea:#e2e3e3; --linea-2:#c7c7c7; --enc:#f8f9fa; --enc-sel:#d3e3fd; --sel:#1a73e8; --sel-bg:#e8f0fe;
  --tinta:#1f1f1f; --gris:#5f6368; --fila:25px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Poppins,Arial,sans-serif;color:var(--tinta);background:#f9fbfd;overflow:hidden}
button,input,select{font:inherit}button{cursor:pointer}
.hidden{display:none!important}

/* ---------- Login ---------- */
.login{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 85% 10%,rgba(53,185,223,.18),transparent 30%),radial-gradient(circle at 10% 90%,rgba(237,38,143,.14),transparent 30%),#f6f3f8}
.login-card{width:min(92vw,360px);background:#fff;border:1px solid #e9e2ef;border-radius:18px;padding:28px;box-shadow:0 18px 50px rgba(43,24,67,.12);text-align:center}
.login-card h1{font-size:21px;margin:12px 0 4px;color:var(--morado)}.login-card p{color:var(--gris);font-size:13px;margin:0 0 18px}
.login-card input{width:100%;border:1.5px solid #ddd3e5;border-radius:10px;padding:10px 12px;margin-bottom:10px;outline:none}
.login-card input:focus{border-color:var(--morado)}
.login-card button{width:100%;border:0;border-radius:10px;padding:11px;background:var(--morado);color:#fff;font-weight:600}
.lg-msg{color:#b3264d;font-size:13px;margin-top:10px;min-height:18px}

/* ---------- Encabezado tipo hoja de cálculo ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.doc-icon{width:26px;height:34px;border-radius:3px;background:var(--morado);position:relative;flex:0 0 auto}
.doc-icon::after{content:"";position:absolute;inset:9px 5px 7px;background:linear-gradient(#fff 0 0) 0 0/100% 2px no-repeat,linear-gradient(#fff 0 0) 0 50%/100% 2px no-repeat,linear-gradient(#fff 0 0) 0 100%/100% 2px no-repeat,linear-gradient(#fff 0 0) 50% 0/2px 100% no-repeat}
.doc-icon.big{width:40px;height:52px;margin:0 auto}.doc-icon.big::after{inset:14px 8px 11px}
.top{display:flex;align-items:center;gap:12px;padding:8px 16px 4px;background:#f9fbfd}
.titulo .nombre{font-size:17px;font-weight:500;line-height:1.2}
.rol{font-size:11px;font-weight:600;background:#efe6f6;color:var(--morado);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:2px}
.menu{display:flex;gap:2px;margin-left:-6px}.menu button{border:0;background:none;padding:2px 7px;border-radius:4px;font-size:13px;color:#3c4043}
.menu button:hover,.menu button.on{background:#e8eaed}
.guardado{margin-left:auto;font-size:12px;color:var(--gris)}
.usuario{font-size:12px;color:var(--gris)}
.salir{border:1px solid var(--linea-2);background:#fff;border-radius:16px;padding:4px 12px;font-size:12px}

.toolbar{display:flex;align-items:center;gap:4px;margin:2px 10px 6px;padding:4px 8px;background:#edf2fa;border-radius:24px;min-height:38px}
.tb{border:0;background:none;border-radius:6px;padding:5px 9px;font-size:13px;color:#3c4043;white-space:nowrap}
.tb:hover{background:#dde3ea}.tb.on{background:#d3e3fd;color:#0b57d0}.tb:disabled{opacity:.4;cursor:default;background:none}
.sep{width:1px;height:20px;background:#c4c7c5;margin:0 4px}
.buscar input{border:0;background:#fff;border-radius:16px;padding:5px 14px;width:240px;font-size:13px;outline:none;box-shadow:inset 0 0 0 1px #dadce0}
.buscar input:focus{box-shadow:inset 0 0 0 2px var(--sel)}
.desc{margin-left:auto;font-size:12px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw;padding-right:6px}

.formula{display:flex;align-items:center;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:#fff;height:30px}
.ref{width:90px;text-align:center;font-size:13px;border-right:1px solid var(--linea);height:100%;display:grid;place-items:center;color:#3c4043}
.fx{width:34px;text-align:center;color:#8e8e8e;font-style:italic;font-family:Georgia,serif;border-right:1px solid var(--linea);height:100%;display:grid;place-items:center}
.fx-input{flex:1;border:0;outline:none;padding:0 10px;font-family:Arial,sans-serif;font-size:13px;height:100%;background:#fff}
.fx-input[readonly]{color:#3c4043}
.fx-nota{font-size:11px;color:var(--gris);padding:0 12px;white-space:nowrap}
.fx-nota.edit{color:#0b57d0}

.nueva{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;padding:8px 12px;background:#fff8e1;border-bottom:1px solid #f1d58a}
.nueva label{display:flex;flex-direction:column;font-size:11px;color:#6b5a1d;font-weight:600;gap:2px}
.nueva input,.nueva select{border:1px solid #d7c58a;border-radius:6px;padding:5px 7px;font-size:13px;min-width:110px;background:#fff}
.nueva button{border:0;border-radius:6px;padding:7px 12px;font-weight:600;background:var(--morado);color:#fff}
.nueva button.cancelar{background:#ece4c8;color:#5c4b12}

/* ---------- Cuadrícula ---------- */
.grid{flex:1;overflow:auto;position:relative;background:#fff;outline:none}
.tabla{border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:Arial,sans-serif;font-size:13px}
.tabla th,.tabla td{height:var(--fila);padding:0 6px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:calc(var(--fila) - 1px)}
.tabla thead th{position:sticky;z-index:3}
.letras th{top:0;background:var(--enc);color:#444;font-weight:400;text-align:center;font-size:11px;height:22px;line-height:21px;border-color:var(--linea-2)}
.titulos th{top:22px;background:var(--morado);color:#fff;font-weight:700;text-align:center;font-size:12px;border-right-color:#7b52a1;border-bottom:2px solid #3f1d5e;cursor:pointer;user-select:none;position:sticky}
.titulos th .lapiz{opacity:.55;font-weight:400;margin-left:3px;font-size:11px}
.titulos th .orden{margin-left:3px;font-size:10px}
.titulos th .embudo{margin-left:3px;font-size:10px;color:#ffd5ea}
.titulos th .ajustar{position:absolute;right:-3px;top:0;width:7px;height:100%;cursor:col-resize;z-index:4}
.filtros th{top:47px;background:#fdfbff;padding:2px 3px;border-bottom:1px solid var(--linea-2)}
.filtros input{width:100%;height:20px;border:1px solid #d9d1e2;border-radius:4px;font-size:11px;padding:0 5px;outline:none;font-family:Arial,sans-serif}
.filtros input:focus{border-color:var(--sel)}.filtros input.activo{background:#fff4fa;border-color:var(--rosa)}
.tabla .esquina{left:0;z-index:5!important;background:var(--enc)}
.titulos .esquina{background:var(--morado);color:#d7c3e8;font-weight:400;font-size:11px}
.filtros .esquina{background:#fdfbff;color:var(--gris);font-size:10px}
.tabla th.rn{position:sticky;left:0;z-index:2;background:var(--enc);color:#444;font-weight:400;text-align:center;font-size:11px;border-color:var(--linea-2);cursor:pointer}
.tabla tr.sel-fila th.rn,.letras th.sel-col{background:var(--enc-sel);color:#0b57d0;font-weight:700}
.tabla td{background:#fff;cursor:cell}
.tabla td.num{text-align:right}.tabla td.centro{text-align:center}
.tabla td.sel{box-shadow:inset 0 0 0 2px var(--sel);background:#fff}
.tabla tr.sel-fila td:not(.sel){background:#fafcff}
.tabla td.guardando{color:#9aa0a6;font-style:italic}
.tabla td.ok{animation:ok 1.2s ease-out}.tabla td.error{animation:mal 1.4s ease-out}
@keyframes ok{0%{background:#ceead6}100%{background:#fff}}
@keyframes mal{0%{background:#fad2cf}100%{background:#fff}}
.tabla td.cargando{color:#c0c0c0}
.tabla tr.espacio td,.tabla tr.espacio th{padding:0;border:0;height:auto;background:transparent}
.tabla a{color:#0b57d0;text-decoration:none}.tabla a:hover{text-decoration:underline}
.casilla-rev{color:var(--morado);font-weight:700}.casilla-res{color:#b26a00}

.chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border-radius:12px;padding:0 8px;line-height:18px;font-size:11.5px;font-weight:600;background:#e8eaed;color:#3c4043}
.chip.drop-chip::after{content:" ▾";font-weight:400;opacity:.6}
.chip.ok{background:#d4edda;color:#126b3c}.chip.wait{background:#fdefc3;color:#7a5200}.chip.bad{background:#fbd9dd;color:#9d1c3c}
.chip.cash{background:#d6ebfb;color:#145a8a}.chip.morado{background:#ece1f5;color:var(--morado)}

.editor{position:absolute;z-index:6;border:2px solid var(--sel);box-shadow:0 2px 8px rgba(0,0,0,.18);background:#fff;font-family:Arial,sans-serif;font-size:13px;padding:0 5px;outline:none}
.vacio{position:absolute;top:90px;left:0;right:0;text-align:center;color:var(--gris);font-size:13px}

/* ---------- Pestañas ---------- */
.pie{display:flex;align-items:center;gap:4px;height:40px;background:#f9fbfd;border-top:1px solid var(--linea);padding:0 8px}
.todas{font-size:16px}
.tabs{display:flex;gap:2px;overflow-x:auto;flex:1;height:100%;align-items:center;scrollbar-width:thin}
.tab{border:0;background:none;padding:6px 14px;border-radius:6px 6px 0 0;font-size:12.5px;color:#3c4043;white-space:nowrap;height:32px;border-bottom:3px solid transparent;font-family:Arial,sans-serif}
.tab:hover{background:#eef0f3}
.tab.on{background:#e1e9f7;color:#0b57d0;font-weight:700;border-bottom-color:var(--color,#5b2c83)}
.tab .punto{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--color,#5b2c83);vertical-align:1px}
.estado-barra{font-size:12px;color:#3c4043;white-space:nowrap;padding:0 8px;background:#fff;border:1px solid var(--linea);border-radius:6px;height:28px;display:flex;align-items:center}

/* ---------- Menús y avisos ---------- */
.drop{position:fixed;z-index:20;background:#fff;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.2);padding:6px 0;min-width:180px;max-height:60vh;overflow:auto;font-size:13px}
.drop button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;padding:7px 16px;white-space:nowrap}
.drop button:hover,.drop button.activo{background:#f1f3f4}
.drop .titulo-menu{font-size:11px;color:var(--gris);padding:6px 16px 2px;text-transform:uppercase;letter-spacing:.04em}
.drop hr{border:0;border-top:1px solid #eee;margin:5px 0}
.drop .atajos{padding:8px 16px;line-height:1.7;font-size:12.5px;white-space:normal;max-width:380px}
.drop kbd{background:#f1f3f4;border:1px solid #ddd;border-radius:4px;padding:0 5px;font-size:11px}
.toast{position:fixed;left:24px;bottom:56px;z-index:30;background:#323232;color:#fff;padding:12px 18px;border-radius:6px;font-size:13px;max-width:min(560px,90vw);opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:none}.toast.error{background:#b3261e}.toast.bien{background:#146c2e}

@media (max-width:760px){.desc{display:none}.buscar input{width:150px}.fx-nota{display:none}}