:root{
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --border:#E3E6EA;
  --border-strong:#CBD1D9;
  --text:#1B2027;
  --text-soft:#5B6472;
  --text-faint:#8A93A1;

  --primary-900:#06342A;
  --primary-800:#075C40;
  --primary-700:#0D7D5B;
  --primary-500:#2FA97C;
  --primary-100:#E3F6EE;

  --danger-700:#C0261E;
  --danger-100:#FCEAE8;

  --warn-700:#92600A;
  --warn-100:#FBF0DA;

  --font-head:'IBM Plex Sans',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --radius:8px;
  --shadow-card:0 1px 2px rgba(20,24,29,.04), 0 1px 1px rgba(20,24,29,.03);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-head);font-weight:600;margin:0}
code{font-family:var(--font-mono);font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 6px;white-space:pre-wrap}

.mxp-login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.mxp-login-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card);padding:36px 32px;width:340px;text-align:center}
.mxp-login-logo{width:52px;height:52px;background:var(--primary-700);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:600;margin:0 auto 16px;font-size:18px}
.mxp-login-box h1{font-size:20px;margin-bottom:4px}
.mxp-login-sub{color:var(--text-soft);font-size:12px;font-family:var(--font-mono);margin-bottom:20px}
.mxp-login-box form{display:flex;flex-direction:column;gap:6px;text-align:left}
.mxp-login-box label{font-size:12px;color:var(--text-soft);margin-top:8px}
.mxp-login-box input{height:38px;padding:0 12px;border:1px solid var(--border-strong);border-radius:6px;font-size:14px;font-family:var(--font-body)}
.mxp-login-box input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
.mxp-login-box button{margin-top:16px;height:40px;background:var(--primary-700);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;font-family:var(--font-body)}
.mxp-login-box button:hover{background:var(--primary-800)}

.mxp-topbar{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:inset 0 -3px 0 var(--primary-700);padding:0 24px;height:56px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mxp-brand{display:flex;align-items:center;gap:10px;flex:1}
.mxp-logo{width:30px;height:30px;background:var(--primary-700);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:600;font-size:12px}
.mxp-brand-title{font-family:var(--font-head);font-weight:600;font-size:15px}
.mxp-host{font-family:var(--font-mono);font-size:12px;color:var(--primary-700);background:var(--primary-100);border-radius:6px;padding:2px 8px}
.mxp-stats{display:flex;gap:16px;font-size:12px;color:var(--text-soft)}
.mxp-stats b{color:var(--text)}
.mxp-refresh-indicator{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:5px}
.mxp-refresh-dot{width:6px;height:6px;border-radius:50%;background:var(--primary-500);animation:mxp-pulse 2s ease-in-out infinite}
@keyframes mxp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.mxp-userbox{display:flex;align-items:center;gap:10px;font-size:13px}

.mxp-main{padding:20px 24px;display:flex;flex-direction:column;gap:16px;max-width:1100px;margin:0 auto}
.mxp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}
.mxp-card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.mxp-card-title{font-weight:600;font-size:14px}
.mxp-card-body{padding:16px 18px}
.mxp-muted{color:var(--text-soft);font-size:13px}
.mxp-strong{font-weight:600}
.mxp-mono{font-family:var(--font-mono);font-size:12px;color:var(--text-soft)}

.mxp-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:720px){.mxp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mxp-metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:14px 16px}
.mxp-metric-label{font-size:12px;color:var(--text-soft);margin-bottom:6px}
.mxp-metric-val{font-family:var(--font-head);font-size:24px;font-weight:600}
.mxp-metric-sub{font-size:11px;color:var(--text-faint);margin-top:2px}
.mxp-c-ok{color:var(--primary-700)}
.mxp-c-fail{color:var(--danger-700)}

.mxp-diag-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
@media(max-width:720px){.mxp-diag-grid{grid-template-columns:1fr}}
.mxp-diag-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg)}
.mxp-diag-warn{border-color:#E8C46B}
.mxp-diag-label{font-size:13px;font-weight:600}
.mxp-diag-sub{font-size:11px;color:var(--text-soft);font-family:var(--font-mono)}

.mxp-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.mxp-badge-ok{background:var(--primary-100);color:var(--primary-900)}
.mxp-badge-fail{background:var(--danger-100);color:var(--danger-700)}
.mxp-badge-warn{background:var(--warn-100);color:var(--warn-700)}
.mxp-badge-neutral{background:var(--bg);color:var(--text-soft);border:1px solid var(--border)}

.mxp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 18px;overflow-x:auto}
.mxp-tab{padding:10px 14px;font-size:13px;font-weight:600;color:var(--text-soft);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.mxp-tab.active{color:var(--primary-700);border-bottom-color:var(--primary-700)}
.mxp-tab-badge{background:var(--bg);border-radius:20px;padding:0 6px;font-size:11px;margin-left:4px}

.mxp-table{width:100%;border-collapse:collapse}
.mxp-table th{font-size:11px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;text-align:left;border-bottom:1px solid var(--border)}
.mxp-table td{padding:10px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:top}
.mxp-table tr:last-child td{border-bottom:none}
/* Acento de estado por borde izquierdo, NUNCA relleno de fila completa —
   un wash de color en toda la fila lee como "todo esta mal" y satura la
   vista; un borde de 3px comunica el estado sin competir con los datos. */
.mxp-row-fail td:first-child{border-left:3px solid var(--danger-700);padding-left:9px}
.mxp-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.mxp-inspect-row td{background:var(--primary-900);padding:0}
.mxp-inspect-pre{
  margin:0; padding:14px 16px; color:#D7F0E6; background:var(--primary-900);
  font-family:var(--font-mono); font-size:12px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; max-height:360px; overflow-y:auto;
}
.mxp-pre-ok{color:#6EE7B7;font-weight:600}
.mxp-pre-fail{color:#FCA5A5;font-weight:600}
.mxp-pre-head{color:#8FC4B4;font-weight:600}

.mxp-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);text-decoration:none;font-family:var(--font-body)}
.mxp-btn:hover{background:var(--bg)}
.mxp-btn-primary{background:var(--primary-700);color:#fff;border-color:var(--primary-700)}
.mxp-btn-primary:hover{background:var(--primary-800)}
.mxp-btn-danger{background:var(--danger-700);color:#fff;border-color:var(--danger-700)}
.mxp-btn-danger:hover{background:#96201A}
.mxp-btn-danger-ghost{color:var(--danger-700);border-color:var(--danger-100)}
.mxp-btn-danger-ghost:hover{background:var(--danger-100)}
.mxp-btn-ghost{background:transparent;border-color:transparent}
.mxp-btn-ghost:hover{background:var(--bg);border-color:var(--border)}
.mxp-btn-sm{height:26px;padding:0 10px;font-size:12px}
.mxp-btn-group{display:flex;gap:6px}

.mxp-inline-form{display:flex;gap:8px;margin-bottom:16px}
.mxp-inline-form input[type=text]{flex:1;max-width:280px;height:34px;padding:0 12px;border:1px solid var(--border-strong);border-radius:6px;font-size:13px;font-family:var(--font-body)}
.mxp-inline-form input[type=text]:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
.mxp-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}

.mxp-details{margin-top:6px;font-size:12px}
.mxp-details summary{cursor:pointer;color:var(--primary-700);font-weight:600}
.mxp-details-body{margin-top:8px;padding:10px 12px;background:var(--bg);border-radius:6px;color:var(--text-soft);line-height:1.6}

.mxp-alert{padding:10px 14px;border-radius:6px;font-size:13px}
.mxp-alert-ok{background:var(--primary-100);color:var(--primary-900)}
.mxp-alert-error{background:var(--danger-100);color:var(--danger-700)}
.mxp-alert-warn{background:var(--warn-100);color:var(--warn-700);margin-bottom:12px}

.mxp-chips{display:flex;flex-wrap:wrap;gap:6px}
.mxp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:4px 6px 4px 12px;font-size:12px}
.mxp-chip-x{background:none;border:none;color:var(--danger-700);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}

.mxp-empty{padding:16px 0;color:var(--text-soft);font-size:13px}
.mxp-arrow{color:var(--text-faint);padding:0 4px}

.mxp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.mxp-grid-2{grid-template-columns:1fr}}
.mxp-spark-wrap{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px}
.mxp-spark-label{display:block;font-family:var(--font-mono);font-size:11px;color:var(--text-soft);margin-top:6px}
.mxp-smtp-result{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mxp-banner-box{font-family:var(--font-mono);font-size:12px;background:var(--primary-900);color:#DFF5EC;padding:10px 12px;border-radius:6px;word-break:break-all;line-height:1.5}