/* =============================================================
   common.css — Variables y estilos compartidos
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables globales ─────────────────────────────────────── */
:root {
  --ink:      #0a0f1e;
  --paper:    #f8f7f4;
  --card:     #ffffff;
  --accent:   #1a56db;
  --accent2:  #7c3aed;
  --green:    #059669;
  --red:      #dc2626;
  --gold:     #d97706;
  --muted:    #64748b;
  --border:   #e2e8f0;
  --sidebar:  #0f1829;
  --sidebar2: #1a2540;
  --radius:   16px;
  --shadow:   0 20px 60px rgba(10,15,30,.12), 0 4px 16px rgba(10,15,30,.08);
}

/* ── Reset mínimo ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografía base ────────────────────────────────────────── */
code {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Badges de estado ───────────────────────────────────────── */
.badge-success {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  color: #166534;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
}
.badge-error {
  background: #fef2f2;
  color: #991b1b;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
}
.badge-proxy {
  background: #fffbeb;
  color: #92400e;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
}

/* ── Banderas ───────────────────────────────────────────────── */
.flag {
  display: inline;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Card genérica ──────────────────────────────────────────── */
.card {
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h3  { font-size: 15px; font-weight: 600; }
.card-header span { font-size: 12px; color: var(--muted); }
.card-body { padding: 22px; }