/* ===================================================================
   MK · CSS INSTITUCIONAL (SOLO AZUL/NARANJA) — v1
   =================================================================== */
:root{
  --primary:#0031a7; --secondary:#ff7a00; --accent:#fd7e14; --neutral:#b6b6b6;
  --success:#1fad68; --info:#0d6efd; --warning:#ffb400; --danger:#ff3b30;
  --mk-blue:var(--primary); --mk-orange:var(--secondary); --mk-green:var(--success); --mk-gray:var(--neutral);
  --bg-main:#fff; --bg-soft:#f6f9ff; --bg-card:#fff;
  --border-soft:rgba(0,17,46,.14); --text-main:#00112e; --text-soft:#5f6680; --text-inv:#fff;
  --r-md:14px; --r-lg:18px; --r-pill:999px;
  --shadow-sm:0 6px 14px rgba(0,17,46,.10); --shadow-md:0 10px 26px rgba(0,17,46,.14); --shadow-lg:0 12px 30px rgba(0,17,46,.18);
  --ring:0 0 0 4px rgba(0,49,167,.16); --ease:cubic-bezier(.2,.8,.2,1); --t-fast:120ms; --t-med:200ms;
  --token-q1:rgba(0,49,167,.20); --token-q2:rgba(31,173,104,.20); --token-q3:rgba(255,122,0,.20); --token-q4:rgba(255,59,48,.20);
  --token-q5:rgba(0,49,167,.18); --token-q6:rgba(31,173,104,.20); --token-q7:rgba(13,110,253,.20); --token-q8:rgba(134,77,255,.20);
  --token-q9:rgba(255,59,48,.20); --token-q10:rgba(182,182,182,.20);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:var(--font);background:var(--bg-main);color:var(--text-main)}
a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;user-select:none;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)} .btn-primary:hover{filter:brightness(1.05);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--secondary);color:#fff;box-shadow:var(--shadow-sm)} .btn-secondary:hover{filter:brightness(1.03);box-shadow:var(--shadow-md)}
.btn-outline{background:#fff;color:var(--primary);border-color:rgba(0,49,167,.28)} .btn-outline:hover{box-shadow:var(--shadow-sm)}
.btn-pill{border-radius:var(--r-pill)}
.input{width:100%;background:#fff;color:var(--text-main);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:10px 12px;outline:none;transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.input:focus{border-color:rgba(0,49,167,.40);box-shadow:var(--ring)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-pill);font-size:12px;border:1px solid var(--border-soft);background:rgba(0,49,167,.06);color:var(--primary)}
.card{border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--bg-card);box-shadow:var(--shadow-sm)}
.small{font-size:12px;color:var(--text-soft)} .muted{color:var(--text-soft)}
hr{border:0;border-top:1px solid var(--border-soft);margin:14px 0}
.pillbar{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-pill);border:1px solid var(--border-soft);background:rgba(0,49,167,.04)}
.kbd{font-size:12px;border:1px solid rgba(0,17,46,.14);padding:2px 7px;border-radius:10px;background:#fff}
.api-pill{font-size:12px;border-radius:var(--r-pill);padding:4px 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-soft)}
.api-dot{width:8px;height:8px;border-radius:50%;background:var(--neutral)}
.api-pill.idle{background:rgba(182,182,182,.10);color:var(--text-soft)} .api-pill.busy{background:rgba(13,110,253,.10);color:var(--info)}
.api-pill.ok{background:rgba(31,173,104,.12);color:var(--success)} .api-pill.error{background:rgba(255,59,48,.12);color:var(--danger)}
.api-pill.busy .api-dot{background:var(--info);animation:apiPulse 1s infinite} .api-pill.ok .api-dot{background:var(--success)} .api-pill.error .api-dot{background:var(--danger)}
@keyframes apiPulse{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}