:root {
    --bg: #1e1f22;
    --bg2: #26282c;
    --bg3: #2f3237;
    --line: #3a3d42;
    --fg: #e6e6e6;
    --dim: #9aa0a6;
    --accent: #4da3ff;
    --accent2: #2b6cb0;
    --dir: #ffd479;
    --err: #ff6b6b;
    --ok: #7ddc8a;
    --row: 24px;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #ffffff; --bg2: #f3f4f6; --bg3: #e8eaed; --line: #d4d7dc;
        --fg: #1d1f23; --dim: #5f6368; --dir: #a8730a;
    }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--bg);
    color: var(--fg);
    font: 13px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
    display: flex; flex-direction: column;
}

/* ---------- login ---------- */
.login { display: grid; place-items: center; height: 100%; }
.login form { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 28px; width: 320px; }
.login h1 { margin: 0 0 4px; font-size: 20px; }
.login p { margin: 0 0 16px; color: var(--dim); }
.login input, .login button { width: 100%; margin-bottom: 10px; }
.login .err { color: var(--err); min-height: 18px; font-size: 12px; }
.login .err.ok { color: var(--ok); }
.login .tip { color: var(--dim); font-size: 11px; margin: 2px 0 8px; }
.login button.cert { background: var(--bg3); border-color: var(--accent2); }
.login button.cert:hover { background: var(--accent2); color: #fff; }
.sep-o { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11px; margin: 2px 0 10px; }
.sep-o::before, .sep-o::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* certificados autorizados */
.certlist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.certitem { border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: var(--bg3); font-size: 12px; }
.certitem b { font-size: 13px; }
.certitem .dn { color: var(--dim); overflow-wrap: anywhere; }

/* ---------- barra superior ---------- */
.topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: var(--bg2); border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.brand { font-weight: 600; letter-spacing: .3px; color: var(--accent); }
.searchwrap { position: relative; flex: 1 1 320px; min-width: 200px; }
.searchwrap input { width: 100%; padding-right: 26px; }
#clearQ {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--dim); font-size: 18px; cursor: pointer; padding: 0 6px;
}
input, select, textarea, button {
    font: inherit; color: var(--fg); background: var(--bg3);
    border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent2); outline-offset: -1px; }
button, .ghost { cursor: pointer; }
button:hover, .ghost:hover { border-color: var(--accent); }
.ghost { background: transparent; text-decoration: none; display: inline-block; }
.primary { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.chk { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); white-space: nowrap; }
.chk input { width: auto; }

/* ---------- barra de rastreo ---------- */
.crawlbar {
    padding: 6px 10px; background: var(--bg3); color: var(--fg);
    border-bottom: 1px solid var(--accent2);
    display: flex; align-items: center; gap: 12px; font-size: 12px; flex-wrap: wrap;
}
.crawlbar .bar { flex: 1 1 120px; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; min-width: 80px; }
.crawlbar .bar > i { display: block; height: 100%; background: var(--accent); width: 30%; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* ---------- tabla ---------- */
main { flex: 1; min-height: 0; display: flex; }
.tablewrap { flex: 1; overflow: auto; position: relative; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
thead th {
    position: sticky; top: 0; z-index: 2; text-align: left; font-weight: 600;
    background: var(--bg2); border-bottom: 1px solid var(--line);
    padding: 5px 8px; cursor: pointer; user-select: none; white-space: nowrap;
}
thead th:hover { color: var(--accent); }
.colgrip {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; z-index: 3; user-select: none;
}
.colgrip:hover { background: var(--accent); opacity: .5; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .tablewrap { pointer-events: none; }

.dirunits { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dirunits button { padding: 3px 10px; font-size: 12px; }
.conbtn { display: flex; gap: 6px; }
.conbtn input { flex: 1; }
thead th.sorted::after { content: " ▲"; font-size: 9px; color: var(--accent); }
thead th.sorted.desc::after { content: " ▼"; }
.c-name { width: 28%; } .c-path { width: 34%; } .c-size { width: 90px; }
.c-date { width: 130px; } .c-ext { width: 70px; } .c-src { width: 12%; }
tbody td {
    padding: 2px 8px; height: var(--row); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent;
}
tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
tbody tr:hover { background: var(--bg3); }
tbody tr.sel { background: var(--accent2) !important; color: #fff; }
tbody td.size { text-align: right; font-variant-numeric: tabular-nums; }
tbody .isdir .nm { color: var(--dir); font-weight: 600; }
tbody .nm { cursor: default; }
tbody .pth { color: var(--dim); cursor: pointer; }
tbody .pth:hover { color: var(--accent); text-decoration: underline; }
tbody a { color: inherit; text-decoration: none; }
tbody a:hover { text-decoration: underline; }
.hl { background: rgba(77,163,255,.28); border-radius: 2px; }
.empty { padding: 30px; color: var(--dim); text-align: center; }

/* ---------- barra de estado ---------- */
.statusbar {
    display: flex; gap: 14px; padding: 4px 10px; font-size: 12px; color: var(--dim);
    background: var(--bg2); border-top: 1px solid var(--line);
}
.statusbar .right { margin-left: auto; }

/* ---------- paneles ---------- */
.panel {
    position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 100%);
    background: var(--bg2); border-left: 1px solid var(--line); z-index: 20;
    display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.35);
}
.panel-head { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; flex: 1; }
.panel-body { padding: 14px; overflow: auto; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10; }
.hidden { display: none !important; }

.srclist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.srcitem { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--bg3); }
.srcitem .t { display: flex; align-items: center; gap: 8px; }
.srcitem .t b { flex: 1; }
.srcitem .meta { color: var(--dim); font-size: 12px; margin-top: 4px; }
.srcitem .badge { font-size: 11px; padding: 1px 6px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.srcitem.off { opacity: .55; }
.srcitem .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.srcitem button { padding: 3px 8px; font-size: 12px; }

.srcform { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.srcform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.srcform label.chk { flex-direction: row; align-items: center; }
.srcform input, .srcform select, .srcform textarea { color: var(--fg); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fgroup { display: flex; flex-direction: column; gap: 10px; }
.formbtns { display: flex; gap: 8px; }
.adv summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.adv > *:not(summary) { margin-top: 10px; }
.msg { font-size: 12px; min-height: 16px; }
.msg.err { color: var(--err); } .msg.ok { color: var(--ok); }

.help table { width: 100%; }
.help td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.help td:first-child { white-space: nowrap; color: var(--fg); }
.help code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; }
.help .tip { color: var(--dim); }

/* ---------- menú contextual ---------- */
.ctx {
    position: fixed; z-index: 40; min-width: 210px; margin: 0; padding: 4px;
    list-style: none; background: var(--bg2); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.ctx li { padding: 5px 10px; border-radius: 5px; cursor: pointer; display: flex; gap: 18px; white-space: nowrap; }
.ctx li:hover { background: var(--accent2); color: #fff; }
.ctx li.danger:hover { background: #b03030; }
.ctx li.sep { height: 1px; padding: 0; margin: 4px 6px; background: var(--line); cursor: default; }
.ctx li.sep:hover { background: var(--line); }
.ctx li.off { opacity: .4; pointer-events: none; }
.ctx .key { margin-left: auto; color: var(--dim); font-size: 11px; }
.ctx li:hover .key { color: #e0e8f5; }

/* ---------- diálogo ---------- */
.dialog {
    position: fixed; z-index: 30; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(520px, 94vw); background: var(--bg2); border: 1px solid var(--line);
    border-radius: 10px; padding: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.dialog h3 { margin: 0 0 6px; font-size: 15px; }
.dialog input[type=text] { width: 100%; margin-bottom: 8px; }
.dialog .dim { color: var(--dim); font-size: 12px; margin: 4px 0; overflow-wrap: anywhere; }
.movelist { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.movelist div { padding: 4px 8px; cursor: pointer; font-size: 12px; }
.movelist div:hover { background: var(--bg3); }
.movelist div.sel { background: var(--accent2); color: #fff; }

/* ---------- renombrado en lote ---------- */
.dialog.wide { width: min(860px, 96vw); }
.dialog { max-height: 92vh; overflow: auto; }
.dialog .formbtns { position: sticky; bottom: -16px; background: var(--bg2); padding: 10px 0 0; align-items: center; }
.dialog .panel-head { padding: 0 0 8px; margin-bottom: 10px; }
.dialog .panel-head h3 { flex: 1; }
.batchgrid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 12px; margin-bottom: 10px; align-items: end;
}
.batchgrid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.batchgrid label.chk { flex-direction: row; align-items: center; }
.batchgrid input[type=number] { width: 100%; }
.batchprev { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; margin: 6px 0 12px; }
.batchprev table { table-layout: fixed; }
.batchprev th { position: sticky; top: 0; background: var(--bg3); }
.batchprev td { padding: 2px 8px; font-size: 12px; overflow-wrap: anywhere; white-space: normal; }
.batchprev td.to { color: var(--ok); }
.batchprev tr.bad td.to { color: var(--err); }
.batchprev tr.same td.to { color: var(--dim); }

.asktext { font-size: 13px; margin-bottom: 12px; }
.asktext ul { margin: 6px 0; padding-left: 18px; max-height: 160px; overflow: auto; }
.asktext li { overflow-wrap: anywhere; }
.asktext .warn { color: var(--dir); }
button.danger { background: #a32f2f; border-color: #a32f2f; color: #fff; }
button.danger:hover { background: #c23a3a; border-color: #c23a3a; }

tbody tr.busy { opacity: .45; }
tbody td.nm input.ren {
    width: 100%; padding: 1px 4px; font: inherit;
    background: var(--bg); border: 1px solid var(--accent);
}

.logbox {
    margin-top: 8px; max-height: 160px; overflow: auto; font: 11px/1.4 Consolas, monospace;
    background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px;
}
.logbox .error { color: var(--err); } .logbox .warn { color: var(--dir); }

@media (max-width: 760px) {
    .c-path, .c-ext { display: none; }
    .c-name { width: 45%; }
}

/* Interruptor de fuente activa/desactivada en el panel «fuentes de ficheros». */
.swi { position: relative; display: inline-block; width: 34px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.swi input { position: absolute; opacity: 0; width: 0; height: 0; }
.swi .slider { position: absolute; inset: 0; background: var(--bg2); border: 1px solid var(--line);
               border-radius: 10px; transition: background .15s; }
.swi .slider::before { content: ''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px;
               background: var(--dim); border-radius: 50%; transition: transform .15s, background .15s; }
.swi input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.swi input:checked + .slider::before { transform: translateX(16px); background: #fff; }
.swi input:disabled + .slider { opacity: .5; cursor: wait; }
.srcitem.off .t b { text-decoration: line-through; }
.srcitem .t .estado { font-size: 11px; color: var(--dim); }
.srcbulk { display: flex; gap: 6px; margin-bottom: 10px; }
.srcbulk button { padding: 3px 8px; font-size: 12px; }