:root{
  --bg:#0f1115; --card:#151924; --fg:#e7e9ee; --muted:#9aa3b2;
  --ok:#2ecc71; --warn:#f1c40f; --bad:#e74c3c; --pill:#20263a;
  --border:#20263a; --accent:#4c68ff;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu}
.container{max-width:1100px;margin:20px auto;padding:0 16px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(15,17,21,.8);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px}
.brand img.logo{height:28px;width:auto;border-radius:8px}
.brand strong{font-size:18px} .muted{color:var(--muted)}
.btn{background:var(--accent);color:white;border:0;padding:8px 12px;border-radius:12px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 4px 24px rgba(0,0,0,.25)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.row.tiny{margin-top:6px;font-size:12px}
.name{margin:0;font-size:16px;font-weight:600}
.pill{font-size:12px;padding:4px 8px;border-radius:999px;background:var(--pill)}
.pill.ok{color:var(--ok)} .pill.bad{color:var(--bad)} .pill.warn{color:var(--warn)}
.spark{width:100%;height:56px;display:block;margin-top:8px;border-radius:8px;overflow:hidden}
.tech{font-size:12px;margin-top:-6px}
.icon{width:100%;height:120px;border-radius:12px;object-fit:cover;margin-top:8px;border:1px solid var(--border);background:#0b0d12}
.small{font-size:12px}
.form{display:grid;gap:12px}
input,select,textarea{background:#0b0d12;color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left;font-size:13px}
.table th{color:var(--muted);font-weight:600}
.switch{display:flex;align-items:center;gap:6px}

.card .icon{
  width:100%;
  height:auto;
  object-fit:contain;   /* muestra la imagen completa */
  object-position:center;
  display:block;
  border-radius:12px;
}