:root {
  --bg: #0d1117; --panel: #161b22; --panel-2: #1c2330;
  --border: #2a3441; --text: #e6edf3; --muted: #8b98a5;
  --accent: #43d17a; --accent-dim: #2ea043;
  --danger: #f85149; --amber: #e3b341; --blue: #58a6ff;
  --mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, sans-serif; height: 100vh; overflow: hidden;
}
button { font-family: inherit; }

/* ---------- Login ---------- */
.login-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 36px; width: 380px; max-width: 92vw;
}
.login-card .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-card .cube { width: 32px; height: 32px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); box-shadow: 0 0 16px rgba(67,209,122,.4); }
.login-card h1 { font-size: 19px; margin: 0; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 4px 0 24px; }
.login-card label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 6px; }
.login-card input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 9px; font-size: 14px;
}
.login-card input:focus { outline: none; border-color: var(--accent-dim); }
.login-card button {
  width: 100%; margin-top: 22px; background: var(--accent-dim); border: none; color: #fff;
  padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: var(--accent); }
.login-err { color: var(--danger); font-size: 13px; margin-top: 14px; min-height: 18px; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: 320px 1fr; height: 100vh; }
aside { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.brand { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.brand .cube { width: 26px; height: 26px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); box-shadow: 0 0 12px rgba(67,209,122,.35); }
.brand h1 { font-size: 15px; margin: 0; }
.brand small { color: var(--muted); font-size: 11px; display: block; }
.brand .logout { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.brand .logout:hover { color: var(--danger); }

.servers { flex: 1; overflow-y: auto; padding: 10px; }
.srv { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.srv:hover { border-color: #3d4b5c; }
.srv.active { border-color: var(--accent); }
.srv-top { display: flex; align-items: center; justify-content: space-between; }
.srv-name { font-weight: 600; font-size: 14px; }
.srv-meta { color: var(--muted); font-size: 11px; margin-top: 3px; font-family: var(--mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.stopped { background: #545d68; }
.dot.starting,.dot.stopping { background: var(--amber); animation: pulse 1s infinite; }
.dot.running { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes pulse { 50% { opacity: .3; } }
.add-btn { margin: 10px; padding: 10px; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: 10px; cursor: pointer; font-size: 13px; }
.add-btn:hover { color: var(--accent); border-color: var(--accent-dim); }

main { display: flex; flex-direction: column; overflow: hidden; }
.toolbar { padding: 12px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .title { font-size: 16px; font-weight: 600; margin-right: auto; }
.act { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 7px 13px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.act:hover { border-color: #3d4b5c; }
.act.start { color: var(--accent); }
.act.stop { color: var(--danger); }
.act.kill { color: var(--danger); opacity: .8; }
.act.edit { color: var(--blue); }
.act:disabled { opacity: .35; cursor: not-allowed; }

.stats { display: flex; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; min-width: 100px; }
.stat .v { font-size: 18px; font-weight: 700; font-family: var(--mono); }
.stat .v .unit { font-size: 11px; color: var(--muted); font-weight: 400; }
.stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
.stat.tps .v.good { color: var(--accent); } .stat.tps .v.mid { color: var(--amber); } .stat.tps .v.bad { color: var(--danger); }
.players-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; font-size: 11px; font-family: var(--mono); }

.tabs { display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid var(--border); }
.tab { background: transparent; border: none; color: var(--muted); padding: 8px 16px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

.view { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.view.show { display: flex; }

/* Consola */
.console { flex: 1; margin: 14px 22px; background: #010409; border: 1px solid var(--border); border-radius: 12px; overflow-y: auto; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.console .l { white-space: pre-wrap; word-break: break-word; }
.console .l.cmd { color: var(--accent); } .console .l.warn { color: var(--amber); }
.console .l.err { color: var(--danger); } .console .l.sys { color: var(--muted); }
.quickcmds { display: flex; gap: 6px; padding: 0 22px; flex-wrap: wrap; }
.qcmd { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); padding: 5px 11px; border-radius: 7px; font-size: 12px; cursor: pointer; font-family: var(--mono); }
.qcmd:hover { color: var(--accent); border-color: var(--accent-dim); }
.cmdbar { display: flex; gap: 8px; padding: 10px 22px 16px; }
.cmdbar input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 11px 14px; border-radius: 8px; font-family: var(--mono); font-size: 13px; }
.cmdbar input:focus { outline: none; border-color: var(--accent-dim); }

/* Gráficas */
.charts { padding: 18px 22px; overflow-y: auto; }
.chart-box { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.chart-box h3 { margin: 0 0 12px; font-size: 13px; color: var(--muted); font-weight: 600; }
.chart-box svg { width: 100%; height: 140px; display: block; }

/* Archivos */
.files-bar { display: flex; align-items: center; gap: 8px; padding: 12px 22px 0; flex-wrap: wrap; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-right: auto; }
.crumbs a { color: var(--accent); cursor: pointer; }
.file-search { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 6px 11px; border-radius: 7px; font-size: 12px; width: 160px; }
.viewtoggle { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.viewtoggle button { background: var(--panel-2); border: none; color: var(--muted); padding: 6px 10px; cursor: pointer; font-size: 12px; }
.viewtoggle button.active { background: var(--accent-dim); color: #fff; }

.filelist { flex: 1; margin: 12px 22px 16px; border: 1px solid var(--border); border-radius: 12px; overflow-y: auto; }
.filelist.drag { border-color: var(--accent); background: rgba(67,209,122,.04); }
/* Vista lista */
.frow { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #1a2230; font-size: 13px; }
.frow:hover { background: var(--panel-2); }
.frow .icon { width: 18px; text-align: center; }
.frow .name { flex: 1; cursor: pointer; }
.frow .name.dir { color: var(--accent); font-weight: 500; }
.frow .size { color: var(--muted); font-size: 11px; font-family: var(--mono); width: 80px; text-align: right; }
.frow .ops { display: flex; gap: 4px; opacity: 0; }
.frow:hover .ops { opacity: 1; }
.fop { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; }
.fop:hover { color: var(--text); } .fop.del:hover { color: var(--danger); }
/* Vista cuadros */
.filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px; }
.fcard { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px 12px 12px; text-align: center; cursor: pointer; position: relative; }
.fcard:hover { border-color: #3d4b5c; }
.fcard .ficon { font-size: 34px; margin-bottom: 8px; }
.fcard .fname { font-size: 12px; word-break: break-word; line-height: 1.3; }
.fcard .fsize { color: var(--muted); font-size: 10px; margin-top: 4px; font-family: var(--mono); }
.fcard .fops { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; opacity: 0; }
.fcard:hover .fops { opacity: 1; }
.drop-hint { text-align: center; padding: 10px; color: var(--muted); font-size: 11px; }

/* Backups */
.backups { padding: 18px 22px; overflow-y: auto; }
.bk-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.bk-header h3 { margin: 0; margin-right: auto; font-size: 15px; }
.bk-cron { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.bk-cron label { font-size: 12px; color: var(--muted); }
.bk-cron .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.bk-cron select, .bk-cron input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 11px; border-radius: 8px; font-size: 13px; }
.bk-item { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.bk-item .bk-name { font-family: var(--mono); font-size: 13px; }
.bk-item .bk-meta { color: var(--muted); font-size: 11px; margin-left: auto; margin-right: 8px; }

/* Papelera */
.trash-view { padding: 18px 22px; overflow-y: auto; }
.trash-header { display: flex; align-items: center; margin-bottom: 16px; }
.trash-header h3 { margin: 0; margin-right: auto; }
.trash-item { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; margin-bottom: 8px; }
.trash-item .ti-name { font-size: 13px; }
.trash-item .ti-meta { color: var(--muted); font-size: 11px; margin-left: auto; margin-right: 8px; }

.empty { margin: auto; text-align: center; color: var(--muted); padding: 40px; }

/* Modales */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 20; }
.modal-bg.show { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; width: 440px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
.modal h3 { margin: 0 0 16px; }
.modal label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 5px; }
.modal input, .modal select { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.modal .row { display: flex; gap: 10px; } .modal .row > div { flex: 1; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.btn-primary { background: var(--accent-dim); border: none; color: #fff; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-primary:hover { background: var(--accent); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-danger { background: var(--danger); border: none; color: #fff; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; }

/* Editor */
.editor-bg { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 25; }
.editor-bg.show { display: flex; }
.editor { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; width: 820px; max-width: 94vw; height: 80vh; display: flex; flex-direction: column; }
.editor header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.editor header .fname { font-family: var(--mono); font-size: 13px; margin-right: auto; }
.editor textarea { flex: 1; background: #010409; border: none; color: var(--text); font-family: var(--mono); font-size: 13px; padding: 16px; resize: none; line-height: 1.5; }
.editor textarea:focus { outline: none; }
.editor footer { padding: 12px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); }

.toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; font-size: 13px; display: none; z-index: 30; max-width: 360px; }
.toast.show { display: block; }
input[type=file] { display: none; }
.hidden { display: none !important; }

/* ================================================================
   TEMA MINECRAFT (v3) — fuentes, textura deepslate, íconos pixel
   ================================================================ */

/* ---------- Fuentes ----------
   Monocraft: fuente pixel monoespaciada oficial de IdreesInc (open source).
   La servimos localmente desde /fonts para no depender de CDNs. */
@font-face {
  font-family: 'Monocraft';
  src: url('/fonts/Monocraft.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Monocraft';
  src: url('/fonts/Monocraft-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-mc: 'Monocraft', ui-monospace, 'Consolas', monospace;
}

/* Títulos y headers con la fuente pixel */
.brand h1, .toolbar .title, .modal h3, .login-card h1,
.bk-header h3, .trash-header h3, .tab, .stat .k {
  font-family: var(--font-mc);
  letter-spacing: 0;
}
/* Consola y bloques de código */
.console, .cmdbar input, .srv-meta, .chip, .stat .v,
.bk-item .bk-name, .crumbs, .editor textarea, .qcmd {
  font-family: var(--font-mc);
}

/* ---------- Fondo estilo deepslate ----------
   Patrón generado 100% con CSS (sin texturas del juego, que son copyright
   de Mojang). Tiles pixelados oscuros con variación sutil de tono. */
body.mc-theme {
  background-color: #0b0e13;
  background-image:
    /* rejilla de "bloques" de 48px */
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.022) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.022) 46px 48px),
    /* variación diagonal tipo veta de deepslate */
    repeating-linear-gradient(45deg, rgba(30,36,48,.5) 0 12px, rgba(17,21,29,.5) 12px 24px),
    /* viñeta sutil */
    radial-gradient(ellipse at 50% 0%, rgba(67,209,122,.05), transparent 60%);
}
/* Los paneles llevan un borde pixelado tipo UI de inventario */
.srv, .stat, .chart-box, .bk-item, .trash-item, .modal, .login-card, .fcard {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 2px 0 rgba(0,0,0,.35);
}
/* Botones estilo "botón de Minecraft": relieve pixelado */
.act, .btn-primary, .btn-ghost, .btn-danger, .qcmd, .login-card button {
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  image-rendering: pixelated;
}
.act:active, .btn-primary:active, .qcmd:active {
  box-shadow: inset 0 2px 0 rgba(0,0,0,.4);
  transform: translateY(1px);
}

/* ---------- Íconos pixel-art (dibujados con box-shadow, 10x10 px lógicos)
   Arte propio inspirado en el estilo del juego; NO usa texturas de Mojang. */
.mcicon {
  --px: 2.2px;
  width: calc(var(--px) * 10);
  height: calc(var(--px) * 10);
  display: inline-block;
  position: relative;
  image-rendering: pixelated;
  flex: none;
}
.mcicon i {
  position: absolute; top: 0; left: 0;
  width: var(--px); height: var(--px);
}
.fcard .mcicon { --px: 4.5px; margin: 0 auto 8px; }

/* Bloque de pasto (carpetas world) */
.mcicon.grass i {
  box-shadow:
    calc(var(--px)*0) 0 #57a64e, calc(var(--px)*1) 0 #6fbf5a, calc(var(--px)*2) 0 #57a64e, calc(var(--px)*3) 0 #6fbf5a, calc(var(--px)*4) 0 #4e9a46, calc(var(--px)*5) 0 #6fbf5a, calc(var(--px)*6) 0 #57a64e, calc(var(--px)*7) 0 #6fbf5a, calc(var(--px)*8) 0 #57a64e, calc(var(--px)*9) 0 #4e9a46,
    calc(var(--px)*0) var(--px) #6fbf5a, calc(var(--px)*1) var(--px) #57a64e, calc(var(--px)*2) var(--px) #79553a, calc(var(--px)*3) var(--px) #57a64e, calc(var(--px)*4) var(--px) #6fbf5a, calc(var(--px)*5) var(--px) #79553a, calc(var(--px)*6) var(--px) #6fbf5a, calc(var(--px)*7) var(--px) #57a64e, calc(var(--px)*8) var(--px) #79553a, calc(var(--px)*9) var(--px) #6fbf5a,
    calc(var(--px)*0) calc(var(--px)*2) #79553a, calc(var(--px)*1) calc(var(--px)*2) #8a6142, calc(var(--px)*2) calc(var(--px)*2) #79553a, calc(var(--px)*3) calc(var(--px)*2) #6d4c33, calc(var(--px)*4) calc(var(--px)*2) #8a6142, calc(var(--px)*5) calc(var(--px)*2) #79553a, calc(var(--px)*6) calc(var(--px)*2) #8a6142, calc(var(--px)*7) calc(var(--px)*2) #6d4c33, calc(var(--px)*8) calc(var(--px)*2) #79553a, calc(var(--px)*9) calc(var(--px)*2) #8a6142,
    calc(var(--px)*0) calc(var(--px)*3) #8a6142, calc(var(--px)*1) calc(var(--px)*3) #6d4c33, calc(var(--px)*2) calc(var(--px)*3) #8a6142, calc(var(--px)*3) calc(var(--px)*3) #79553a, calc(var(--px)*4) calc(var(--px)*3) #6d4c33, calc(var(--px)*5) calc(var(--px)*3) #8a6142, calc(var(--px)*6) calc(var(--px)*3) #79553a, calc(var(--px)*7) calc(var(--px)*3) #8a6142, calc(var(--px)*8) calc(var(--px)*3) #6d4c33, calc(var(--px)*9) calc(var(--px)*3) #79553a,
    calc(var(--px)*0) calc(var(--px)*4) #79553a, calc(var(--px)*1) calc(var(--px)*4) #8a6142, calc(var(--px)*2) calc(var(--px)*4) #6d4c33, calc(var(--px)*3) calc(var(--px)*4) #8a6142, calc(var(--px)*4) calc(var(--px)*4) #79553a, calc(var(--px)*5) calc(var(--px)*4) #6d4c33, calc(var(--px)*6) calc(var(--px)*4) #8a6142, calc(var(--px)*7) calc(var(--px)*4) #79553a, calc(var(--px)*8) calc(var(--px)*4) #8a6142, calc(var(--px)*9) calc(var(--px)*4) #6d4c33,
    calc(var(--px)*0) calc(var(--px)*5) #6d4c33, calc(var(--px)*1) calc(var(--px)*5) #79553a, calc(var(--px)*2) calc(var(--px)*5) #8a6142, calc(var(--px)*3) calc(var(--px)*5) #6d4c33, calc(var(--px)*4) calc(var(--px)*5) #8a6142, calc(var(--px)*5) calc(var(--px)*5) #79553a, calc(var(--px)*6) calc(var(--px)*5) #6d4c33, calc(var(--px)*7) calc(var(--px)*5) #8a6142, calc(var(--px)*8) calc(var(--px)*5) #79553a, calc(var(--px)*9) calc(var(--px)*5) #8a6142,
    calc(var(--px)*0) calc(var(--px)*6) #8a6142, calc(var(--px)*1) calc(var(--px)*6) #6d4c33, calc(var(--px)*2) calc(var(--px)*6) #79553a, calc(var(--px)*3) calc(var(--px)*6) #8a6142, calc(var(--px)*4) calc(var(--px)*6) #6d4c33, calc(var(--px)*5) calc(var(--px)*6) #8a6142, calc(var(--px)*6) calc(var(--px)*6) #79553a, calc(var(--px)*7) calc(var(--px)*6) #6d4c33, calc(var(--px)*8) calc(var(--px)*6) #8a6142, calc(var(--px)*9) calc(var(--px)*6) #79553a,
    calc(var(--px)*0) calc(var(--px)*7) #79553a, calc(var(--px)*1) calc(var(--px)*7) #8a6142, calc(var(--px)*2) calc(var(--px)*7) #6d4c33, calc(var(--px)*3) calc(var(--px)*7) #79553a, calc(var(--px)*4) calc(var(--px)*7) #8a6142, calc(var(--px)*5) calc(var(--px)*7) #6d4c33, calc(var(--px)*6) calc(var(--px)*7) #8a6142, calc(var(--px)*7) calc(var(--px)*7) #79553a, calc(var(--px)*8) calc(var(--px)*7) #6d4c33, calc(var(--px)*9) calc(var(--px)*7) #8a6142,
    calc(var(--px)*0) calc(var(--px)*8) #6d4c33, calc(var(--px)*1) calc(var(--px)*8) #79553a, calc(var(--px)*2) calc(var(--px)*8) #8a6142, calc(var(--px)*3) calc(var(--px)*8) #6d4c33, calc(var(--px)*4) calc(var(--px)*8) #79553a, calc(var(--px)*5) calc(var(--px)*8) #8a6142, calc(var(--px)*6) calc(var(--px)*8) #6d4c33, calc(var(--px)*7) calc(var(--px)*8) #79553a, calc(var(--px)*8) calc(var(--px)*8) #8a6142, calc(var(--px)*9) calc(var(--px)*8) #6d4c33,
    calc(var(--px)*0) calc(var(--px)*9) #57402b, calc(var(--px)*1) calc(var(--px)*9) #6d4c33, calc(var(--px)*2) calc(var(--px)*9) #57402b, calc(var(--px)*3) calc(var(--px)*9) #6d4c33, calc(var(--px)*4) calc(var(--px)*9) #57402b, calc(var(--px)*5) calc(var(--px)*9) #6d4c33, calc(var(--px)*6) calc(var(--px)*9) #57402b, calc(var(--px)*7) calc(var(--px)*9) #6d4c33, calc(var(--px)*8) calc(var(--px)*9) #57402b, calc(var(--px)*9) calc(var(--px)*9) #6d4c33;
}

/* Cofre (carpeta plugins) */
.mcicon.chest i {
  box-shadow:
    calc(var(--px)*1) 0 #6d4c33, calc(var(--px)*2) 0 #8a6142, calc(var(--px)*3) 0 #8a6142, calc(var(--px)*4) 0 #8a6142, calc(var(--px)*5) 0 #8a6142, calc(var(--px)*6) 0 #8a6142, calc(var(--px)*7) 0 #8a6142, calc(var(--px)*8) 0 #6d4c33,
    calc(var(--px)*1) var(--px) #8a6142, calc(var(--px)*2) var(--px) #a0764f, calc(var(--px)*3) var(--px) #a0764f, calc(var(--px)*4) var(--px) #a0764f, calc(var(--px)*5) var(--px) #a0764f, calc(var(--px)*6) var(--px) #a0764f, calc(var(--px)*7) var(--px) #a0764f, calc(var(--px)*8) var(--px) #8a6142,
    calc(var(--px)*1) calc(var(--px)*2) #8a6142, calc(var(--px)*2) calc(var(--px)*2) #a0764f, calc(var(--px)*3) calc(var(--px)*2) #a0764f, calc(var(--px)*4) calc(var(--px)*2) #a0764f, calc(var(--px)*5) calc(var(--px)*2) #a0764f, calc(var(--px)*6) calc(var(--px)*2) #a0764f, calc(var(--px)*7) calc(var(--px)*2) #a0764f, calc(var(--px)*8) calc(var(--px)*2) #8a6142,
    calc(var(--px)*1) calc(var(--px)*3) #57402b, calc(var(--px)*2) calc(var(--px)*3) #57402b, calc(var(--px)*3) calc(var(--px)*3) #57402b, calc(var(--px)*4) calc(var(--px)*3) #c9c9c9, calc(var(--px)*5) calc(var(--px)*3) #c9c9c9, calc(var(--px)*6) calc(var(--px)*3) #57402b, calc(var(--px)*7) calc(var(--px)*3) #57402b, calc(var(--px)*8) calc(var(--px)*3) #57402b,
    calc(var(--px)*1) calc(var(--px)*4) #8a6142, calc(var(--px)*2) calc(var(--px)*4) #a0764f, calc(var(--px)*3) calc(var(--px)*4) #a0764f, calc(var(--px)*4) calc(var(--px)*4) #9c9c9c, calc(var(--px)*5) calc(var(--px)*4) #9c9c9c, calc(var(--px)*6) calc(var(--px)*4) #a0764f, calc(var(--px)*7) calc(var(--px)*4) #a0764f, calc(var(--px)*8) calc(var(--px)*4) #8a6142,
    calc(var(--px)*1) calc(var(--px)*5) #8a6142, calc(var(--px)*2) calc(var(--px)*5) #a0764f, calc(var(--px)*3) calc(var(--px)*5) #a0764f, calc(var(--px)*4) calc(var(--px)*5) #a0764f, calc(var(--px)*5) calc(var(--px)*5) #a0764f, calc(var(--px)*6) calc(var(--px)*5) #a0764f, calc(var(--px)*7) calc(var(--px)*5) #a0764f, calc(var(--px)*8) calc(var(--px)*5) #8a6142,
    calc(var(--px)*1) calc(var(--px)*6) #8a6142, calc(var(--px)*2) calc(var(--px)*6) #a0764f, calc(var(--px)*3) calc(var(--px)*6) #a0764f, calc(var(--px)*4) calc(var(--px)*6) #a0764f, calc(var(--px)*5) calc(var(--px)*6) #a0764f, calc(var(--px)*6) calc(var(--px)*6) #a0764f, calc(var(--px)*7) calc(var(--px)*6) #a0764f, calc(var(--px)*8) calc(var(--px)*6) #8a6142,
    calc(var(--px)*1) calc(var(--px)*7) #6d4c33, calc(var(--px)*2) calc(var(--px)*7) #8a6142, calc(var(--px)*3) calc(var(--px)*7) #8a6142, calc(var(--px)*4) calc(var(--px)*7) #8a6142, calc(var(--px)*5) calc(var(--px)*7) #8a6142, calc(var(--px)*6) calc(var(--px)*7) #8a6142, calc(var(--px)*7) calc(var(--px)*7) #8a6142, calc(var(--px)*8) calc(var(--px)*7) #6d4c33;
}

/* Papel (yml/config) */
.mcicon.paper i {
  box-shadow:
    calc(var(--px)*2) 0 #e8e8e8, calc(var(--px)*3) 0 #e8e8e8, calc(var(--px)*4) 0 #e8e8e8, calc(var(--px)*5) 0 #e8e8e8, calc(var(--px)*6) 0 #e8e8e8,
    calc(var(--px)*2) var(--px) #f5f5f5, calc(var(--px)*3) var(--px) #d0d0d0, calc(var(--px)*4) var(--px) #f5f5f5, calc(var(--px)*5) var(--px) #f5f5f5, calc(var(--px)*6) var(--px) #e8e8e8, calc(var(--px)*7) var(--px) #b8b8b8,
    calc(var(--px)*2) calc(var(--px)*2) #f5f5f5, calc(var(--px)*3) calc(var(--px)*2) #f5f5f5, calc(var(--px)*4) calc(var(--px)*2) #d0d0d0, calc(var(--px)*5) calc(var(--px)*2) #d0d0d0, calc(var(--px)*6) calc(var(--px)*2) #f5f5f5, calc(var(--px)*7) calc(var(--px)*2) #e8e8e8,
    calc(var(--px)*2) calc(var(--px)*3) #f5f5f5, calc(var(--px)*3) calc(var(--px)*3) #d0d0d0, calc(var(--px)*4) calc(var(--px)*3) #f5f5f5, calc(var(--px)*5) calc(var(--px)*3) #f5f5f5, calc(var(--px)*6) calc(var(--px)*3) #f5f5f5, calc(var(--px)*7) calc(var(--px)*3) #e8e8e8,
    calc(var(--px)*2) calc(var(--px)*4) #f5f5f5, calc(var(--px)*3) calc(var(--px)*4) #f5f5f5, calc(var(--px)*4) calc(var(--px)*4) #d0d0d0, calc(var(--px)*5) calc(var(--px)*4) #d0d0d0, calc(var(--px)*6) calc(var(--px)*4) #f5f5f5, calc(var(--px)*7) calc(var(--px)*4) #e8e8e8,
    calc(var(--px)*2) calc(var(--px)*5) #f5f5f5, calc(var(--px)*3) calc(var(--px)*5) #d0d0d0, calc(var(--px)*4) calc(var(--px)*5) #d0d0d0, calc(var(--px)*5) calc(var(--px)*5) #f5f5f5, calc(var(--px)*6) calc(var(--px)*5) #f5f5f5, calc(var(--px)*7) calc(var(--px)*5) #e8e8e8,
    calc(var(--px)*2) calc(var(--px)*6) #f5f5f5, calc(var(--px)*3) calc(var(--px)*6) #f5f5f5, calc(var(--px)*4) calc(var(--px)*6) #f5f5f5, calc(var(--px)*5) calc(var(--px)*6) #f5f5f5, calc(var(--px)*6) calc(var(--px)*6) #f5f5f5, calc(var(--px)*7) calc(var(--px)*6) #e8e8e8,
    calc(var(--px)*2) calc(var(--px)*7) #b8b8b8, calc(var(--px)*3) calc(var(--px)*7) #b8b8b8, calc(var(--px)*4) calc(var(--px)*7) #b8b8b8, calc(var(--px)*5) calc(var(--px)*7) #b8b8b8, calc(var(--px)*6) calc(var(--px)*7) #b8b8b8, calc(var(--px)*7) calc(var(--px)*7) #b8b8b8;
}

/* Bloque de diamante (jar) */
.mcicon.diamond i {
  box-shadow:
    calc(var(--px)*1) var(--px) #7de8e0, calc(var(--px)*2) var(--px) #a5f1eb, calc(var(--px)*3) var(--px) #7de8e0, calc(var(--px)*4) var(--px) #5cc9c1, calc(var(--px)*5) var(--px) #a5f1eb, calc(var(--px)*6) var(--px) #7de8e0, calc(var(--px)*7) var(--px) #5cc9c1, calc(var(--px)*8) var(--px) #7de8e0,
    calc(var(--px)*1) calc(var(--px)*2) #a5f1eb, calc(var(--px)*2) calc(var(--px)*2) #5cc9c1, calc(var(--px)*3) calc(var(--px)*2) #a5f1eb, calc(var(--px)*4) calc(var(--px)*2) #7de8e0, calc(var(--px)*5) calc(var(--px)*2) #5cc9c1, calc(var(--px)*6) calc(var(--px)*2) #a5f1eb, calc(var(--px)*7) calc(var(--px)*2) #7de8e0, calc(var(--px)*8) calc(var(--px)*2) #5cc9c1,
    calc(var(--px)*1) calc(var(--px)*3) #7de8e0, calc(var(--px)*2) calc(var(--px)*3) #a5f1eb, calc(var(--px)*3) calc(var(--px)*3) #e0fffc, calc(var(--px)*4) calc(var(--px)*3) #a5f1eb, calc(var(--px)*5) calc(var(--px)*3) #7de8e0, calc(var(--px)*6) calc(var(--px)*3) #5cc9c1, calc(var(--px)*7) calc(var(--px)*3) #a5f1eb, calc(var(--px)*8) calc(var(--px)*3) #7de8e0,
    calc(var(--px)*1) calc(var(--px)*4) #5cc9c1, calc(var(--px)*2) calc(var(--px)*4) #7de8e0, calc(var(--px)*3) calc(var(--px)*4) #a5f1eb, calc(var(--px)*4) calc(var(--px)*4) #5cc9c1, calc(var(--px)*5) calc(var(--px)*4) #a5f1eb, calc(var(--px)*6) calc(var(--px)*4) #7de8e0, calc(var(--px)*7) calc(var(--px)*4) #5cc9c1, calc(var(--px)*8) calc(var(--px)*4) #a5f1eb,
    calc(var(--px)*1) calc(var(--px)*5) #a5f1eb, calc(var(--px)*2) calc(var(--px)*5) #5cc9c1, calc(var(--px)*3) calc(var(--px)*5) #7de8e0, calc(var(--px)*4) calc(var(--px)*5) #a5f1eb, calc(var(--px)*5) calc(var(--px)*5) #e0fffc, calc(var(--px)*6) calc(var(--px)*5) #a5f1eb, calc(var(--px)*7) calc(var(--px)*5) #7de8e0, calc(var(--px)*8) calc(var(--px)*5) #5cc9c1,
    calc(var(--px)*1) calc(var(--px)*6) #7de8e0, calc(var(--px)*2) calc(var(--px)*6) #a5f1eb, calc(var(--px)*3) calc(var(--px)*6) #5cc9c1, calc(var(--px)*4) calc(var(--px)*6) #7de8e0, calc(var(--px)*5) calc(var(--px)*6) #a5f1eb, calc(var(--px)*6) calc(var(--px)*6) #5cc9c1, calc(var(--px)*7) calc(var(--px)*6) #a5f1eb, calc(var(--px)*8) calc(var(--px)*6) #7de8e0,
    calc(var(--px)*1) calc(var(--px)*7) #4aa8a1, calc(var(--px)*2) calc(var(--px)*7) #5cc9c1, calc(var(--px)*3) calc(var(--px)*7) #4aa8a1, calc(var(--px)*4) calc(var(--px)*7) #5cc9c1, calc(var(--px)*5) calc(var(--px)*7) #4aa8a1, calc(var(--px)*6) calc(var(--px)*7) #5cc9c1, calc(var(--px)*7) calc(var(--px)*7) #4aa8a1, calc(var(--px)*8) calc(var(--px)*7) #5cc9c1;
}

/* Libro (logs/txt) */
.mcicon.book i {
  box-shadow:
    calc(var(--px)*2) var(--px) #8a4a3a, calc(var(--px)*3) var(--px) #a85a45, calc(var(--px)*4) var(--px) #a85a45, calc(var(--px)*5) var(--px) #a85a45, calc(var(--px)*6) var(--px) #a85a45, calc(var(--px)*7) var(--px) #8a4a3a,
    calc(var(--px)*2) calc(var(--px)*2) #a85a45, calc(var(--px)*3) calc(var(--px)*2) #f0f0f0, calc(var(--px)*4) calc(var(--px)*2) #f0f0f0, calc(var(--px)*5) calc(var(--px)*2) #f0f0f0, calc(var(--px)*6) calc(var(--px)*2) #f0f0f0, calc(var(--px)*7) calc(var(--px)*2) #8a4a3a,
    calc(var(--px)*2) calc(var(--px)*3) #a85a45, calc(var(--px)*3) calc(var(--px)*3) #f0f0f0, calc(var(--px)*4) calc(var(--px)*3) #d8d8d8, calc(var(--px)*5) calc(var(--px)*3) #d8d8d8, calc(var(--px)*6) calc(var(--px)*3) #f0f0f0, calc(var(--px)*7) calc(var(--px)*3) #8a4a3a,
    calc(var(--px)*2) calc(var(--px)*4) #a85a45, calc(var(--px)*3) calc(var(--px)*4) #f0f0f0, calc(var(--px)*4) calc(var(--px)*4) #d8d8d8, calc(var(--px)*5) calc(var(--px)*4) #d8d8d8, calc(var(--px)*6) calc(var(--px)*4) #f0f0f0, calc(var(--px)*7) calc(var(--px)*4) #8a4a3a,
    calc(var(--px)*2) calc(var(--px)*5) #a85a45, calc(var(--px)*3) calc(var(--px)*5) #f0f0f0, calc(var(--px)*4) calc(var(--px)*5) #f0f0f0, calc(var(--px)*5) calc(var(--px)*5) #f0f0f0, calc(var(--px)*6) calc(var(--px)*5) #f0f0f0, calc(var(--px)*7) calc(var(--px)*5) #8a4a3a,
    calc(var(--px)*2) calc(var(--px)*6) #8a4a3a, calc(var(--px)*3) calc(var(--px)*6) #a85a45, calc(var(--px)*4) calc(var(--px)*6) #a85a45, calc(var(--px)*5) calc(var(--px)*6) #a85a45, calc(var(--px)*6) calc(var(--px)*6) #a85a45, calc(var(--px)*7) calc(var(--px)*6) #8a4a3a;
}

/* Carpeta genérica (madera) */
.mcicon.folder i {
  box-shadow:
    calc(var(--px)*1) calc(var(--px)*2) #a0764f, calc(var(--px)*2) calc(var(--px)*2) #a0764f, calc(var(--px)*3) calc(var(--px)*2) #a0764f,
    calc(var(--px)*1) calc(var(--px)*3) #8a6142, calc(var(--px)*2) calc(var(--px)*3) #a0764f, calc(var(--px)*3) calc(var(--px)*3) #a0764f, calc(var(--px)*4) calc(var(--px)*3) #a0764f, calc(var(--px)*5) calc(var(--px)*3) #a0764f, calc(var(--px)*6) calc(var(--px)*3) #a0764f, calc(var(--px)*7) calc(var(--px)*3) #a0764f, calc(var(--px)*8) calc(var(--px)*3) #8a6142,
    calc(var(--px)*1) calc(var(--px)*4) #8a6142, calc(var(--px)*2) calc(var(--px)*4) #b98a5e, calc(var(--px)*3) calc(var(--px)*4) #b98a5e, calc(var(--px)*4) calc(var(--px)*4) #b98a5e, calc(var(--px)*5) calc(var(--px)*4) #b98a5e, calc(var(--px)*6) calc(var(--px)*4) #b98a5e, calc(var(--px)*7) calc(var(--px)*4) #b98a5e, calc(var(--px)*8) calc(var(--px)*4) #8a6142,
    calc(var(--px)*1) calc(var(--px)*5) #8a6142, calc(var(--px)*2) calc(var(--px)*5) #b98a5e, calc(var(--px)*3) calc(var(--px)*5) #b98a5e, calc(var(--px)*4) calc(var(--px)*5) #b98a5e, calc(var(--px)*5) calc(var(--px)*5) #b98a5e, calc(var(--px)*6) calc(var(--px)*5) #b98a5e, calc(var(--px)*7) calc(var(--px)*5) #b98a5e, calc(var(--px)*8) calc(var(--px)*5) #8a6142,
    calc(var(--px)*1) calc(var(--px)*6) #8a6142, calc(var(--px)*2) calc(var(--px)*6) #b98a5e, calc(var(--px)*3) calc(var(--px)*6) #b98a5e, calc(var(--px)*4) calc(var(--px)*6) #b98a5e, calc(var(--px)*5) calc(var(--px)*6) #b98a5e, calc(var(--px)*6) calc(var(--px)*6) #b98a5e, calc(var(--px)*7) calc(var(--px)*6) #b98a5e, calc(var(--px)*8) calc(var(--px)*6) #8a6142,
    calc(var(--px)*1) calc(var(--px)*7) #6d4c33, calc(var(--px)*2) calc(var(--px)*7) #8a6142, calc(var(--px)*3) calc(var(--px)*7) #8a6142, calc(var(--px)*4) calc(var(--px)*7) #8a6142, calc(var(--px)*5) calc(var(--px)*7) #8a6142, calc(var(--px)*6) calc(var(--px)*7) #8a6142, calc(var(--px)*7) calc(var(--px)*7) #8a6142, calc(var(--px)*8) calc(var(--px)*7) #6d4c33;
}

/* Redstone (zips/comprimidos) y TNT-ish para logs de error los dejamos simples */
.mcicon.redstone i {
  box-shadow:
    calc(var(--px)*3) calc(var(--px)*2) #c22, calc(var(--px)*4) calc(var(--px)*2) #e33, calc(var(--px)*5) calc(var(--px)*2) #c22,
    calc(var(--px)*2) calc(var(--px)*3) #c22, calc(var(--px)*3) calc(var(--px)*3) #e33, calc(var(--px)*4) calc(var(--px)*3) #f55, calc(var(--px)*5) calc(var(--px)*3) #e33, calc(var(--px)*6) calc(var(--px)*3) #c22,
    calc(var(--px)*2) calc(var(--px)*4) #a11, calc(var(--px)*3) calc(var(--px)*4) #c22, calc(var(--px)*4) calc(var(--px)*4) #e33, calc(var(--px)*5) calc(var(--px)*4) #c22, calc(var(--px)*6) calc(var(--px)*4) #a11,
    calc(var(--px)*3) calc(var(--px)*5) #a11, calc(var(--px)*4) calc(var(--px)*5) #c22, calc(var(--px)*5) calc(var(--px)*5) #a11;
}
/* Imagen (png/jpg): cuadro con "paisaje" */
.mcicon.image i {
  box-shadow:
    calc(var(--px)*1) var(--px) #555, calc(var(--px)*2) var(--px) #555, calc(var(--px)*3) var(--px) #555, calc(var(--px)*4) var(--px) #555, calc(var(--px)*5) var(--px) #555, calc(var(--px)*6) var(--px) #555, calc(var(--px)*7) var(--px) #555, calc(var(--px)*8) var(--px) #555,
    calc(var(--px)*1) calc(var(--px)*2) #555, calc(var(--px)*2) calc(var(--px)*2) #7ec8ff, calc(var(--px)*3) calc(var(--px)*2) #7ec8ff, calc(var(--px)*4) calc(var(--px)*2) #ffe97a, calc(var(--px)*5) calc(var(--px)*2) #7ec8ff, calc(var(--px)*6) calc(var(--px)*2) #7ec8ff, calc(var(--px)*7) calc(var(--px)*2) #7ec8ff, calc(var(--px)*8) calc(var(--px)*2) #555,
    calc(var(--px)*1) calc(var(--px)*3) #555, calc(var(--px)*2) calc(var(--px)*3) #7ec8ff, calc(var(--px)*3) calc(var(--px)*3) #7ec8ff, calc(var(--px)*4) calc(var(--px)*3) #7ec8ff, calc(var(--px)*5) calc(var(--px)*3) #7ec8ff, calc(var(--px)*6) calc(var(--px)*3) #7ec8ff, calc(var(--px)*7) calc(var(--px)*3) #7ec8ff, calc(var(--px)*8) calc(var(--px)*3) #555,
    calc(var(--px)*1) calc(var(--px)*4) #555, calc(var(--px)*2) calc(var(--px)*4) #57a64e, calc(var(--px)*3) calc(var(--px)*4) #6fbf5a, calc(var(--px)*4) calc(var(--px)*4) #57a64e, calc(var(--px)*5) calc(var(--px)*4) #7ec8ff, calc(var(--px)*6) calc(var(--px)*4) #57a64e, calc(var(--px)*7) calc(var(--px)*4) #6fbf5a, calc(var(--px)*8) calc(var(--px)*4) #555,
    calc(var(--px)*1) calc(var(--px)*5) #555, calc(var(--px)*2) calc(var(--px)*5) #57a64e, calc(var(--px)*3) calc(var(--px)*5) #57a64e, calc(var(--px)*4) calc(var(--px)*5) #6fbf5a, calc(var(--px)*5) calc(var(--px)*5) #57a64e, calc(var(--px)*6) calc(var(--px)*5) #6fbf5a, calc(var(--px)*7) calc(var(--px)*5) #57a64e, calc(var(--px)*8) calc(var(--px)*5) #555,
    calc(var(--px)*1) calc(var(--px)*6) #555, calc(var(--px)*2) calc(var(--px)*6) #555, calc(var(--px)*3) calc(var(--px)*6) #555, calc(var(--px)*4) calc(var(--px)*6) #555, calc(var(--px)*5) calc(var(--px)*6) #555, calc(var(--px)*6) calc(var(--px)*6) #555, calc(var(--px)*7) calc(var(--px)*6) #555, calc(var(--px)*8) calc(var(--px)*6) #555;
}

/* ---------- Consola xterm ---------- */
.console-xterm {
  flex: 1; margin: 14px 22px;
  background: #05070a; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; overflow: hidden;
}
.console-xterm .xterm { height: 100%; }
.console-xterm .xterm-viewport { background: transparent !important; }
.console-xterm .xterm-screen { opacity: 1; }

/* ---------- Toasts de alerta crítica ---------- */
.toast.error {
  background: #3d1214; border-color: var(--danger); color: #ffb3b0;
  border-left: 4px solid var(--danger);
}
.toast .toast-title { font-family: var(--font-mc); font-weight: 700; display: block; margin-bottom: 4px; color: var(--danger); }
.toast .toast-detail { font-size: 11px; color: var(--muted); font-family: var(--font-mc); display: block; word-break: break-all; }

/* ================================================================
   SLOTS PARA TUS ANIMACIONES 3D DE BLENDER
   ----------------------------------------------------------------
   Renderiza tus animaciones como .webm con canal alfa (VP9) o GIF
   transparente, cópialas a public/anim/ y descomenta el <video> o
   <img> correspondiente en index.html. Los contenedores ya están
   posicionados y dimensionados.
   ================================================================ */

/* Overlay de carga (pico picando) — flotante en una esquina, NO tapa la consola */
.loading-overlay {
  position: absolute; bottom: 90px; right: 40px; z-index: 5;
  display: none; align-items: center; gap: 12px;
  background: rgba(22, 27, 34, .92);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 18px 12px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.loading-overlay.show { display: flex; }
.anim-slot-pickaxe {
  /* AQUÍ VA TU ANIMACIÓN: pico picando (Blender) — tamaño recomendado 64x64 */
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.anim-slot-pickaxe video, .anim-slot-pickaxe img { width: 100%; height: 100%; object-fit: contain; }
/* Fallback CSS mientras no subes tu animación: bloque que "pica" */
.anim-fallback-pick {
  width: 40px; height: 40px; border-radius: 6px;
  background: linear-gradient(135deg, #79553a, #57402b);
  animation: pickhit 0.8s infinite;
}
@keyframes pickhit {
  0%, 100% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.08) rotate(-6deg); }
  50% { transform: scale(0.94) rotate(3deg); }
}
.loading-overlay .loading-text {
  font-family: var(--font-mc); color: var(--amber); font-size: 13px;
  animation: pulse 1.2s infinite; white-space: nowrap;
}

/* Slot papelera vacía (stickman animado) */
.anim-slot-trash-empty {
  /* AQUÍ VA TU ANIMACIÓN: stickman/esqueleto aburrido (Blender) — 200x200 */
  width: 200px; height: 200px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.anim-slot-trash-empty video, .anim-slot-trash-empty img { width: 100%; height: 100%; object-fit: contain; }
/* Fallback: bote de basura pixel CSS que se balancea */
.anim-fallback-trash {
  width: 64px; height: 72px; position: relative;
  animation: trashsway 2.4s ease-in-out infinite;
}
.anim-fallback-trash::before {
  content: ''; position: absolute; top: 0; left: 6px; right: 6px; height: 10px;
  background: #4a5666; border-radius: 3px;
}
.anim-fallback-trash::after {
  content: ''; position: absolute; top: 12px; left: 12px; right: 12px; bottom: 0;
  background: linear-gradient(180deg, #3a4452, #2a3240);
  border-radius: 0 0 8px 8px;
}
@keyframes trashsway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ================= MÓDULO EQUIPO / RECURSOS / AUTOMATIZACIÓN ================= */
.team-view { padding: 18px 22px; overflow-y: auto; }
.team-card {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px; margin-bottom: 16px;
}
.team-card h3 { margin: 0 0 4px; font-family: var(--font-mc); font-size: 15px; }
.team-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.team-card-head h3 { margin: 0; }
.team-hint { color: var(--muted); font-size: 12px; margin: 0 0 12px; }

/* Selector de plan */
.plan-switch { display: flex; gap: 12px; }
.plan-opt {
  flex: 1; border: 2px solid var(--border); border-radius: 12px; padding: 16px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.plan-opt:hover { border-color: #3d4b5c; }
.plan-opt.active { border-color: var(--accent); background: rgba(67,209,122,.06); }
.plan-opt .plan-name { font-family: var(--font-mc); font-size: 16px; margin-bottom: 4px; }
.plan-opt .plan-spec { color: var(--muted); font-size: 12px; }
.plan-opt .plan-tag {
  display: inline-block; margin-top: 8px; font-family: var(--font-mc); font-size: 11px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; color: var(--blue);
}
.plan-opt.active[data-plan="premium"] .plan-tag { color: var(--accent); }

/* Tarjetas de cron jobs */
.job-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 8px;
}
.job-icon { font-size: 18px; }
.job-info { flex: 1; }
.job-info .job-label { font-size: 14px; font-weight: 600; }
.job-info .job-meta { color: var(--muted); font-size: 11px; font-family: var(--font-mc); margin-top: 2px; }
.job-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
.job-del:hover { color: var(--danger); }

/* Toggle switch */
.toggle { position: relative; width: 44px; height: 24px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 24px;
  background: #3a4452; transition: .2s;
}
.toggle .slider::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.toggle input:checked + .slider { background: var(--accent-dim); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

/* Tabla de usuarios */
.team-table { width: 100%; border-collapse: collapse; }
.team-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.team-table td { padding: 10px 12px; border-bottom: 1px solid #1a2230; font-size: 13px; }
.role-badge {
  font-family: var(--font-mc); font-size: 11px; padding: 2px 10px; border-radius: 20px;
  border: 1px solid var(--border);
}
.role-badge.root { color: var(--accent); border-color: var(--accent-dim); }
.role-badge.admin { color: var(--blue); border-color: var(--blue); }
.role-badge.moderator { color: var(--amber); border-color: var(--amber); }

/* ================= GESTOR DE PLUGINS ================= */
.plugins-view { padding: 18px 22px; overflow-y: auto; }
.plug-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plug-header h3 { margin: 0; font-family: var(--font-mc); font-size: 16px; }
.plug-header > div:first-child { margin-right: auto; }
.plug-header .team-hint { margin: 4px 0 0; }

.plug-warn {
  background: rgba(227,179,65,.08); border: 1px solid rgba(227,179,65,.3);
  border-left: 3px solid var(--amber); border-radius: 8px;
  padding: 10px 14px; font-size: 12px; color: #f0d795; margin-bottom: 16px;
}
.plug-warn code {
  font-family: var(--font-mc); background: rgba(0,0,0,.3);
  padding: 1px 5px; border-radius: 4px;
}

/* Badges de fuente */
.src-badge {
  font-family: var(--font-mc); font-size: 10px; padding: 2px 9px; border-radius: 20px;
  border: 1px solid var(--border); text-transform: uppercase; letter-spacing: .5px;
}
.src-badge.modrinth { color: #43d17a; border-color: rgba(67,209,122,.4); }
.src-badge.github   { color: #c9d1d9; border-color: #444c56; }
.src-badge.spigot   { color: #e3b341; border-color: rgba(227,179,65,.4); }

.plug-version { font-family: var(--font-mc); font-size: 12px; color: var(--muted); }

/* Botón de fila con estados */
.plug-btn {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  padding: 6px 14px; border-radius: 7px; font-size: 12px; cursor: pointer; min-width: 110px;
  font-family: var(--font-mc);
}
.plug-btn:hover:not(:disabled) { border-color: var(--accent-dim); color: var(--accent); }
.plug-btn:disabled { cursor: not-allowed; opacity: .85; }
.plug-btn.loading { color: var(--amber); border-color: rgba(227,179,65,.4); }
.plug-btn.done    { color: var(--accent); border-color: var(--accent-dim); background: rgba(67,209,122,.08); }
.plug-btn.error   { color: var(--danger); border-color: var(--danger); background: rgba(248,81,73,.08); }

/* Barra de progreso del "actualizar todos" */
.plug-progress {
  height: 4px; background: var(--border); border-radius: 4px; overflow: hidden;
  margin-bottom: 14px; display: none;
}
.plug-progress.show { display: block; }
.plug-progress .bar {
  height: 100%; width: 0%; background: var(--accent);
  transition: width .3s;
}