* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font: 13px/1.4 "Segoe UI", Tahoma, Arial, sans-serif;
    background: #3a6ea5;
    color: #000;
    padding: 12px;
}

/* ---------- Ventana ---------- */
.window {
    background: #f0f0f0;
    border: 1px solid #7a7a7a;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    display: flex; flex-direction: column;
}
.titlebar {
    background: linear-gradient(#4a7fc1, #2b5d9e);
    color: #fff; font-weight: 600;
    padding: 6px 10px;
}
.titlebar .ico { margin-right: 4px; }
.statusbar {
    display: flex; justify-content: space-between; gap: 10px;
    border-top: 1px solid #c8c8c8;
    padding: 4px 8px; font-size: 12px; color: #333;
    background: #e8e8e8;
}

/* ---------- Botones e inputs ---------- */
.btn {
    font: inherit; color: #000; text-decoration: none;
    background: linear-gradient(#fdfdfd, #e3e3e3);
    border: 1px solid #a0a0a0; border-radius: 3px;
    padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: linear-gradient(#eaf4fc, #cfe6f9); border-color: #3c7fb1; }
.btn.primary { font-weight: 600; }
input[type=text], input[type=password] {
    font: inherit; border: 1px solid #a0a0a0; padding: 4px 6px; background: #fff;
}
input:disabled { background: #eee; color: #666; }

/* ---------- Login ---------- */
.login-body { display: grid; place-items: center; }
.login-window { width: 100%; max-width: 380px; }
.login-form { padding: 18px; }
.login-form .row { display: grid; grid-template-columns: 90px 1fr; align-items: center; margin-bottom: 10px; }
.login-form input.short { width: 70px; }
.login-form .buttons { text-align: right; margin-top: 14px; }

/* ---------- App ---------- */
.app { height: 100%; }
.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding: 6px 8px; border-bottom: 1px solid #c8c8c8;
}
.toolbar .spacer { flex: 1; }

.pane { border: 1px solid #a0a0a0; background: #fff; margin: 6px 6px 0; min-height: 0; }
.log {
    height: 120px; overflow-y: auto; padding: 4px 6px;
    font: 12px/1.45 Consolas, "Courier New", monospace;
}
.log-line.status { color: #000; }
.log-line.cmd    { color: #00008b; }
.log-line.resp   { color: #006400; }
.log-line.err    { color: #c00000; }
.log-line b { display: inline-block; min-width: 82px; font-weight: normal; }

.remote { flex: 1; display: flex; flex-direction: column; position: relative; }
.pathbar { padding: 4px 6px; background: #f6f6f6; border-bottom: 1px solid #d0d0d0; display: flex; align-items: center; gap: 6px; }
.pathbar input { flex: 1; }
.table-wrap { flex: 1; overflow: auto; position: relative; }
.summary { padding: 3px 6px; font-size: 12px; border-top: 1px solid #d0d0d0; background: #f6f6f6; }

table.files { width: 100%; border-collapse: collapse; }
table.files th {
    position: sticky; top: 0; text-align: left; font-weight: normal;
    background: linear-gradient(#fff, #ececec);
    border-bottom: 1px solid #c0c0c0; border-right: 1px solid #ddd;
    padding: 3px 6px; white-space: nowrap;
}
table.files td { padding: 2px 6px; white-space: nowrap; }
table.files .num { text-align: right; }
table.files tbody tr:hover { background: #e5f3ff; }
table.files tr.up td { color: #555; }
.fi { margin-right: 6px; }
.actions { text-align: right; }
.actions a, .actions button {
    border: 0; background: none; cursor: pointer; font-size: 14px;
    text-decoration: none; color: #2b5d9e; padding: 0 4px;
}
.actions button { color: #b00; }

.drop-hint {
    display: none; position: absolute; inset: 0;
    align-items: center; justify-content: center;
    background: rgba(59,130,246,.12); border: 2px dashed #3c7fb1;
    color: #2b5d9e; font-size: 16px; font-weight: 600; pointer-events: none;
}
.remote.drag .drop-hint { display: flex; }

.queue { height: 170px; display: flex; flex-direction: column; margin-bottom: 6px; }
.tabs { background: #f0f0f0; border-bottom: 1px solid #c0c0c0; padding: 3px 4px 0; }
.tab { display: inline-block; padding: 2px 10px; border: 1px solid #c0c0c0; border-bottom: 0; background: #fff; font-size: 12px; }
.bar { width: 140px; height: 12px; border: 1px solid #a0a0a0; background: #eee; }
.bar div { height: 100%; width: 0; background: linear-gradient(#5fd35f, #2ea02e); transition: width .15s; }
tr.fail .bar div { background: #d33; }
tr.ok .st { color: #006400; }
tr.fail .st { color: #c00000; }

@media (max-width: 640px) {
    body { padding: 0; }
    .window { border: 0; }
    .log { height: 90px; }
    table.files td:nth-child(3), table.files th:nth-child(3),
    table.files td:nth-child(4), table.files th:nth-child(4) { display: none; }
}