/* =====================================================================
   MERLIN · DESIGN SYSTEM v2
   Estética: "Precision Grid" — dual-mode equilibrado.
   Acento primario: aqua pastel (#8dd9d1 dark / #5cb8af light)
   Acento secundario: coral pastel (#f5bba3)
   Tipografía: Outfit + DM Mono
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@300;400;500;600&display=swap');

/* ---------------------------------------------------------------------
   1. TOKENS · DARK MODE (default)
   --------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  --mrln-bg:        #0e1113;
  --mrln-bg-1:      #161a1d;
  --mrln-bg-2:      #1e2327;
  --mrln-bg-3:      #262c31;
  --mrln-bg-over:   rgba(14,17,19,0.78);

  --mrln-border:    rgba(255,255,255,0.07);
  --mrln-border-md: rgba(255,255,255,0.13);
  --mrln-border-hi: rgba(255,255,255,0.24);

  --mrln-text:      #f0f0f0;
  --mrln-text-2:    #b8bec2;
  --mrln-text-3:    #7e8a90;

  /* Acento primario · aqua pastel */
  --mrln-accent:        #8dd9d1;
  --mrln-accent-hover:  #a4e3dc;
  --mrln-accent-fg:     #0a1f1d;
  --mrln-accent-dim:    rgba(141,217,209,0.14);
  --mrln-accent-glow:   rgba(141,217,209,0.28);
  --mrln-accent-strong: #5cb8af;

  /* Acento secundario · coral pastel */
  --mrln-accent-2:        #f5bba3;
  --mrln-accent-2-hover:  #f8c9b7;
  --mrln-accent-2-fg:     #2a1109;
  --mrln-accent-2-dim:    rgba(245,187,163,0.14);

  /* Semánticos (calibrados dark) */
  --mrln-ok:         #6bd4a8;
  --mrln-ok-dim:     rgba(107,212,168,0.12);
  --mrln-ok-border:  rgba(107,212,168,0.28);
  --mrln-err:        #f08a7a;
  --mrln-err-dim:    rgba(240,138,122,0.12);
  --mrln-err-border: rgba(240,138,122,0.28);
  --mrln-warn:       #e8c27a;
  --mrln-warn-dim:   rgba(232,194,122,0.12);
  --mrln-warn-border:rgba(232,194,122,0.28);
  --mrln-info:       #9cc8ee;
  --mrln-info-dim:   rgba(156,200,238,0.12);
  --mrln-info-border:rgba(156,200,238,0.28);
  --mrln-plan:       #b4a8f0;
  --mrln-plan-dim:   rgba(180,168,240,0.12);
  --mrln-plan-border:rgba(180,168,240,0.28);

  --mrln-grid-line: rgba(255,255,255,0.025);
  --mrln-grid-glow: rgba(141,217,209,0.035);
}

/* ---------------------------------------------------------------------
   2. TOKENS · LIGHT MODE (peso equivalente)
   --------------------------------------------------------------------- */
[data-theme="light"] {
  --mrln-bg:        #f7f5f0;
  --mrln-bg-1:      #ffffff;
  --mrln-bg-2:      #efece4;
  --mrln-bg-3:      #e3dfd3;
  --mrln-bg-over:   rgba(247,245,240,0.85);

  --mrln-border:    rgba(20,22,24,0.13);
  --mrln-border-md: rgba(20,22,24,0.22);
  --mrln-border-hi: rgba(20,22,24,0.38);

  --mrln-text:      #1a1d1f;
  --mrln-text-2:    #484c4f;
  --mrln-text-3:    #72767a;

  /* Aqua saturado para contraste sobre beige */
  --mrln-accent:        #5cb8af;
  --mrln-accent-hover:  #4aa39a;
  --mrln-accent-fg:     #ffffff;
  --mrln-accent-dim:    rgba(92,184,175,0.12);
  --mrln-accent-glow:   rgba(92,184,175,0.25);
  --mrln-accent-strong: #3a8d86;

  /* Coral saturado */
  --mrln-accent-2:        #f5bba3;
  --mrln-accent-2-hover:  #f8c9b7;
  --mrln-accent-2-fg:     #2a1109;
  --mrln-accent-2-dim:    rgba(245,187,163,0.12);

  --mrln-ok:         #2b9d6f;
  --mrln-ok-dim:     rgba(43,157,111,0.1);
  --mrln-ok-border:  rgba(43,157,111,0.28);
  --mrln-err:        #cc5a44;
  --mrln-err-dim:    rgba(204,90,68,0.1);
  --mrln-err-border: rgba(204,90,68,0.28);
  --mrln-warn:       #b8892a;
  --mrln-warn-dim:   rgba(184,137,42,0.1);
  --mrln-warn-border:rgba(184,137,42,0.28);
  --mrln-info:       #3b7cb5;
  --mrln-info-dim:   rgba(59,124,181,0.1);
  --mrln-info-border:rgba(59,124,181,0.28);
  --mrln-plan:       #7865c7;
  --mrln-plan-dim:   rgba(120,101,199,0.1);
  --mrln-plan-border:rgba(120,101,199,0.28);

  --mrln-grid-line: rgba(20,22,24,0.04);
  --mrln-grid-glow: rgba(92,184,175,0.05);
}

/* Preferencia del sistema si no hay data-theme explícito */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --mrln-bg: #f7f5f0; --mrln-bg-1: #ffffff; --mrln-bg-2: #efece4; --mrln-bg-3: #e3dfd3;
    --mrln-bg-over: rgba(247,245,240,0.85);
    --mrln-border: rgba(20,22,24,0.13); --mrln-border-md: rgba(20,22,24,0.22); --mrln-border-hi: rgba(20,22,24,0.38);
    --mrln-text: #1a1d1f; --mrln-text-2: #484c4f; --mrln-text-3: #72767a;
    --mrln-accent: #5cb8af; --mrln-accent-hover: #4aa39a; --mrln-accent-fg: #ffffff;
    --mrln-accent-dim: rgba(92,184,175,0.12); --mrln-accent-glow: rgba(92,184,175,0.25); --mrln-accent-strong: #3a8d86;
    --mrln-accent-2: #f5bba3; --mrln-accent-2-hover: #f8c9b7; --mrln-accent-2-fg: #2a1109; --mrln-accent-2-dim: rgba(245,187,163,0.12);
    --mrln-ok: #2b9d6f; --mrln-ok-dim: rgba(43,157,111,0.1); --mrln-ok-border: rgba(43,157,111,0.28);
    --mrln-err: #cc5a44; --mrln-err-dim: rgba(204,90,68,0.1); --mrln-err-border: rgba(204,90,68,0.28);
    --mrln-warn: #b8892a; --mrln-warn-dim: rgba(184,137,42,0.1); --mrln-warn-border: rgba(184,137,42,0.28);
    --mrln-info: #3b7cb5; --mrln-info-dim: rgba(59,124,181,0.1); --mrln-info-border: rgba(59,124,181,0.28);
    --mrln-plan: #7865c7; --mrln-plan-dim: rgba(120,101,199,0.1); --mrln-plan-border: rgba(120,101,199,0.28);
    --mrln-grid-line: rgba(20,22,24,0.04); --mrln-grid-glow: rgba(92,184,175,0.05);
  }
}

/* ---------------------------------------------------------------------
   3. GEOMETRÍA Y TIPOGRAFÍA
   --------------------------------------------------------------------- */
:root {
  --mrln-r-sm: 4px;
  --mrln-r:    6px;
  --mrln-r-lg: 10px;
  --mrln-r-xl: 14px;
  --mrln-font:  'Outfit', system-ui, sans-serif;
  --mrln-mono:  'DM Mono', ui-monospace, monospace;
  --mrln-t:     0.15s ease;
  --mrln-nav-h: 52px;
  --mrln-sidebar-w: 220px;
}

/* Transición al cambiar tema — limitada a propiedades de color */
body.mrln,
.mrln-card, .mrln-stat, .mrln-input, .mrln-select, .mrln-textarea,
.mrln-btn, .mrln-nav, .mrln-sidebar, .mrln-badge, .mrln-chip,
.mrln-banner, .mrln-modal, .mrln-drawer, .mrln-logs {
  transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ---------------------------------------------------------------------
   4. RESET Y BASE
   --------------------------------------------------------------------- */
.mrln, .mrln * { box-sizing: border-box; }

body.mrln {
  background: var(--mrln-bg);
  color: var(--mrln-text);
  font-family: var(--mrln-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body.mrln.has-grid::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, var(--mrln-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
body.mrln.has-grid::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--mrln-grid-glow) 0%, transparent 70%);
}
body.mrln > *:not([class*="overlay"]):not([class*="scrim"]):not(.notif-panel):not(.settings-drawer):not(#auth-screen):not(.admin-chat-root) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   5. TIPOGRAFÍA
   --------------------------------------------------------------------- */
.mrln h1, .mrln h2, .mrln h3, .mrln h4 {
  font-family: var(--mrln-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mrln-text);
  margin: 0;
}
.mrln h1 { font-size: 22px; }
.mrln h2 { font-size: 18px; }
.mrln h3 { font-size: 15px; }
.mrln h4 { font-size: 13px; }

.mrln .mono { font-family: var(--mrln-mono); }
.mrln .muted { color: var(--mrln-text-2); }
.mrln .micro {
  font-family: var(--mrln-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
}

/* ---------------------------------------------------------------------
   6. NAV + SIDEBAR
   --------------------------------------------------------------------- */
.mrln-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--mrln-nav-h);
  border-bottom: 1px solid var(--mrln-border);
  background: var(--mrln-bg-over);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 100;
}
.mrln-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600;
  color: var(--mrln-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.mrln-logo-mark {
  width: 28px; height: 28px;
  background: var(--mrln-accent);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mrln-accent-fg);
  font-family: var(--mrln-mono);
  font-weight: 500; font-size: 14px;
}
.mrln-nav-links { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; }
.mrln-nav-links a {
  display: block;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--mrln-text-2);
  text-decoration: none;
  border-radius: var(--mrln-r);
  transition: color var(--mrln-t), background var(--mrln-t);
}
.mrln-nav-links a:hover,
.mrln-nav-links a.active {
  color: var(--mrln-text);
  background: var(--mrln-bg-2);
}

.mrln-sidebar {
  width: var(--mrln-sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--mrln-border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mrln-sidebar-section {
  font-family: var(--mrln-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
  padding: 8px 8px 4px;
  margin-top: 8px;
}
.mrln-sidebar-section:first-child { margin-top: 0; }
.mrln-sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--mrln-r);
  font-size: 13px;
  color: var(--mrln-text-2);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: color var(--mrln-t), background var(--mrln-t);
}
.mrln-sidebar-item:hover { color: var(--mrln-text); background: var(--mrln-bg-2); }
.mrln-sidebar-item.active {
  color: var(--mrln-text);
  background: var(--mrln-bg-2);
  border-color: var(--mrln-border-md);
}
.mrln-sidebar-item.active .mrln-si-icon { color: var(--mrln-accent-strong); }
.mrln-si-icon {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}

.mrln-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mrln-accent-dim);
  border: 1.5px solid var(--mrln-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--mrln-accent-strong);
  font-family: var(--mrln-mono);
  font-size: 11px; font-weight: 600;
}

/* ---------------------------------------------------------------------
   7. BOTONES
   --------------------------------------------------------------------- */
.mrln-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-family: var(--mrln-font);
  font-size: 13px; font-weight: 500; line-height: 1;
  border-radius: var(--mrln-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--mrln-text);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--mrln-t);
  user-select: none;
}
.mrln-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mrln-btn-primary {
  background: var(--mrln-accent);
  color: var(--mrln-accent-fg);
  border-color: var(--mrln-accent);
}
.mrln-btn-primary:hover:not(:disabled) {
  background: var(--mrln-accent-hover);
  border-color: var(--mrln-accent-hover);
}

.mrln-btn-secondary {
  background: var(--mrln-accent-2);
  color: var(--mrln-accent-2-fg);
  border-color: var(--mrln-accent-2);
}
.mrln-btn-secondary:hover:not(:disabled) {
  background: var(--mrln-accent-2-hover);
  border-color: var(--mrln-accent-2-hover);
}

.mrln-btn-ghost {
  background: transparent;
  color: var(--mrln-text-2);
  border-color: var(--mrln-border-md);
}
.mrln-btn-ghost:hover:not(:disabled) {
  color: var(--mrln-text);
  background: var(--mrln-bg-2);
  border-color: var(--mrln-border-hi);
}

.mrln-btn-danger {
  color: var(--mrln-err);
  border-color: var(--mrln-err-border);
  background: transparent;
}
.mrln-btn-danger:hover:not(:disabled) {
  background: var(--mrln-err-dim);
  border-color: var(--mrln-err);
}

.mrln-btn-sm { padding: 5px 11px; font-size: 12px; }
.mrln-btn-lg { padding: 11px 20px; font-size: 14px; }
.mrln-btn-icon { padding: 7px; }
.mrln-btn-block { display: flex; width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------
   8. INPUTS
   --------------------------------------------------------------------- */
.mrln-input,
.mrln-select,
.mrln-textarea {
  width: 100%;
  background: var(--mrln-bg-1);
  border: 1px solid var(--mrln-border-md);
  border-radius: var(--mrln-r);
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--mrln-font);
  color: var(--mrln-text);
  outline: none;
  transition: border-color var(--mrln-t), box-shadow var(--mrln-t);
}
.mrln-textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.mrln-input::placeholder, .mrln-textarea::placeholder { color: var(--mrln-text-3); }
.mrln-input:focus,
.mrln-select:focus,
.mrln-textarea:focus {
  border-color: var(--mrln-accent-strong);
  box-shadow: 0 0 0 3px var(--mrln-accent-glow);
}
.mrln-input:disabled { opacity: 0.5; cursor: not-allowed; }

.mrln-label {
  display: block;
  font-family: var(--mrln-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
  margin-bottom: 6px;
}
.mrln-field { margin-bottom: 14px; }
.mrln-field-hint {
  font-size: 12px;
  color: var(--mrln-text-2);
  margin-top: 5px;
}

.mrln-toggle {
  position: relative;
  width: 34px; height: 20px;
  background: var(--mrln-bg-3);
  border: 1px solid var(--mrln-border-md);
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--mrln-t), border-color var(--mrln-t);
  flex-shrink: 0;
}
.mrln-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--mrln-text-2);
  border-radius: 50%;
  transition: all var(--mrln-t);
}
.mrln-toggle.on {
  background: var(--mrln-accent-dim);
  border-color: var(--mrln-accent);
}
.mrln-toggle.on::after {
  left: 16px;
  background: var(--mrln-accent);
}

/* ---------------------------------------------------------------------
   9. CARDS
   --------------------------------------------------------------------- */
.mrln-card {
  background: var(--mrln-bg-1);
  border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r-lg);
  overflow: hidden;
}
.mrln-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mrln-border);
}
.mrln-card-title { font-size: 13px; font-weight: 600; color: var(--mrln-text); }
.mrln-card-body { padding: 16px 18px; }
.mrln-card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--mrln-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mrln-stat {
  background: var(--mrln-bg-1);
  border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r-lg);
  padding: 16px 18px;
  transition: border-color var(--mrln-t);
}
.mrln-stat:hover { border-color: var(--mrln-border-md); }
.mrln-stat-label {
  font-family: var(--mrln-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
  margin-bottom: 8px;
}
.mrln-stat-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--mrln-text);
}
.mrln-stat-delta {
  font-family: var(--mrln-mono);
  font-size: 11px;
  margin-top: 6px;
  color: var(--mrln-text-3);
}
.mrln-stat-delta.up { color: var(--mrln-ok); }
.mrln-stat-delta.dn { color: var(--mrln-err); }

/* ---------------------------------------------------------------------
  10. BADGES
   --------------------------------------------------------------------- */
.mrln-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mrln-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.mrln-badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.mrln-badge-ok       { background: var(--mrln-ok-dim);       color: var(--mrln-ok);              border-color: var(--mrln-ok-border); }
.mrln-badge-ok       .mrln-badge-dot { background: var(--mrln-ok); }
.mrln-badge-warn     { background: var(--mrln-warn-dim);     color: var(--mrln-warn);            border-color: var(--mrln-warn-border); }
.mrln-badge-warn     .mrln-badge-dot { background: var(--mrln-warn); }
.mrln-badge-err      { background: var(--mrln-err-dim);      color: var(--mrln-err);             border-color: var(--mrln-err-border); }
.mrln-badge-err      .mrln-badge-dot { background: var(--mrln-err); }
.mrln-badge-info     { background: var(--mrln-info-dim);     color: var(--mrln-info);            border-color: var(--mrln-info-border); }
.mrln-badge-info     .mrln-badge-dot { background: var(--mrln-info); }
.mrln-badge-plan     { background: var(--mrln-plan-dim);     color: var(--mrln-plan);            border-color: var(--mrln-plan-border); }
.mrln-badge-plan     .mrln-badge-dot { background: var(--mrln-plan); }
.mrln-badge-accent   { background: var(--mrln-accent-dim);   color: var(--mrln-accent-strong);   border-color: var(--mrln-accent); }
.mrln-badge-accent   .mrln-badge-dot { background: var(--mrln-accent); }
.mrln-badge-accent-2 { background: var(--mrln-accent-2-dim); color: var(--mrln-accent-2);        border-color: var(--mrln-accent-2); }
.mrln-badge-accent-2 .mrln-badge-dot { background: var(--mrln-accent-2); }
.mrln-badge-mute     { background: var(--mrln-bg-3);         color: var(--mrln-text-3);          border-color: var(--mrln-border); }

/* ---------------------------------------------------------------------
  11. CHIPS
   --------------------------------------------------------------------- */
.mrln-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mrln-bg-2);
  border: 1px solid var(--mrln-border);
  border-radius: 20px;
  padding: 4px 10px;
  font-family: var(--mrln-mono);
  font-size: 11px;
  color: var(--mrln-text-2);
  cursor: pointer;
  transition: all var(--mrln-t);
  user-select: none;
}
.mrln-chip:hover { border-color: var(--mrln-border-hi); color: var(--mrln-text); }
.mrln-chip.active,
.mrln-chip.selected {
  background: var(--mrln-accent-dim);
  border-color: var(--mrln-accent);
  color: var(--mrln-accent-strong);
}
.mrln-chip.dashed { border-style: dashed; }

/* ---------------------------------------------------------------------
  12. STEPS
   --------------------------------------------------------------------- */
.mrln-steps { display: flex; align-items: center; gap: 3px; font-family: var(--mrln-mono); font-size: 11px; color: var(--mrln-text-3); }
.mrln-step-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mrln-bg-3);
  border: 1px solid var(--mrln-border-md);
}
.mrln-step-dot.done {
  background: var(--mrln-accent);
  border-color: var(--mrln-accent);
}
.mrln-step-dot.run {
  background: var(--mrln-accent-2);
  border-color: var(--mrln-accent-2);
  animation: mrln-pulse 1.2s ease-in-out infinite;
}
@keyframes mrln-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

.mrln-exec-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--mrln-bg-1);
  border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r-lg);
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.mrln-exec-step.active { border-color: var(--mrln-accent); }
.mrln-exec-step.done   { opacity: 0.75; }
.mrln-exec-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mrln-bg-3);
  border: 1px solid var(--mrln-border-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mrln-mono);
  font-size: 10px;
  color: var(--mrln-text-3);
  flex-shrink: 0;
  margin-top: 1px;
}
.mrln-exec-step.active .mrln-exec-num {
  background: var(--mrln-accent-dim);
  border-color: var(--mrln-accent);
  color: var(--mrln-accent-strong);
}
.mrln-exec-step.done .mrln-exec-num {
  background: var(--mrln-ok-dim);
  border-color: var(--mrln-ok);
  color: var(--mrln-ok);
}

/* ---------------------------------------------------------------------
  13. BANNERS
   --------------------------------------------------------------------- */
.mrln-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--mrln-r-lg);
  border: 1px solid;
  font-size: 13px;
  margin-bottom: 16px;
}
.mrln-banner-info   { background: var(--mrln-info-dim);   border-color: var(--mrln-info-border); }
.mrln-banner-warn   { background: var(--mrln-warn-dim);   border-color: var(--mrln-warn-border); }
.mrln-banner-err    { background: var(--mrln-err-dim);    border-color: var(--mrln-err-border); }
.mrln-banner-ok     { background: var(--mrln-ok-dim);     border-color: var(--mrln-ok-border); }
.mrln-banner-accent { background: var(--mrln-accent-dim); border-color: var(--mrln-accent); }
.mrln-banner-icon   { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.mrln-banner-text   { flex: 1; color: var(--mrln-text-2); }
.mrln-banner-text strong { color: var(--mrln-text); font-weight: 500; }
.mrln-banner-close  { background: none; border: none; cursor: pointer; color: var(--mrln-text-3); font-size: 16px; padding: 0; }

/* ---------------------------------------------------------------------
  14. MODALES / DRAWER
   --------------------------------------------------------------------- */
.mrln-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mrln-modal {
  background: var(--mrln-bg-1);
  border: 1px solid var(--mrln-border-md);
  border-radius: var(--mrln-r-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
[data-theme="light"] .mrln-modal { box-shadow: 0 20px 60px rgba(20,22,24,0.12); }
.mrln-modal-lg { max-width: 720px; }
.mrln-modal-sm { max-width: 360px; }
.mrln-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mrln-border);
}
.mrln-modal-title { font-size: 15px; font-weight: 600; }
.mrln-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--mrln-text-3); font-size: 18px;
  padding: 0; line-height: 1;
  transition: color var(--mrln-t);
}
.mrln-modal-close:hover { color: var(--mrln-text); }
.mrln-modal-body { padding: 18px 20px; }
.mrln-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--mrln-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.mrln-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--mrln-bg-1);
  border-left: 1px solid var(--mrln-border-md);
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.25);
}
[data-theme="light"] .mrln-drawer { box-shadow: -20px 0 60px rgba(20,22,24,0.1); }
.mrln-drawer-header { padding: 18px 22px; border-bottom: 1px solid var(--mrln-border); display: flex; align-items: center; justify-content: space-between; }
.mrln-drawer-body   { flex: 1; overflow: auto; padding: 18px 22px; }

/* ---------------------------------------------------------------------
  15. TABLAS
   --------------------------------------------------------------------- */
.mrln-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mrln-table th {
  text-align: left;
  font-family: var(--mrln-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
  font-weight: 500;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mrln-border);
}
.mrln-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mrln-border);
  color: var(--mrln-text);
}
.mrln-table tr:hover td { background: var(--mrln-bg-2); }
.mrln-table tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------
  16. LOGS
   --------------------------------------------------------------------- */
.mrln-logs {
  background: var(--mrln-bg);
  border: 1px solid var(--mrln-border);
  border-radius: var(--mrln-r-lg);
  padding: 12px 14px;
  font-family: var(--mrln-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--mrln-text-2);
  max-height: 280px;
  overflow: auto;
}
[data-theme="light"] .mrln-logs { background: #fcfbf7; }
.mrln-log-line { white-space: pre-wrap; }
.mrln-log-time { color: var(--mrln-text-3); margin-right: 8px; }
.mrln-log-info { color: var(--mrln-info); }
.mrln-log-ok   { color: var(--mrln-ok); }
.mrln-log-warn { color: var(--mrln-warn); }
.mrln-log-err  { color: var(--mrln-err); }

/* ---------------------------------------------------------------------
  17. KBD
   --------------------------------------------------------------------- */
.mrln-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  background: var(--mrln-bg-2);
  border: 1px solid var(--mrln-border-md);
  border-bottom-width: 2px;
  border-radius: var(--mrln-r-sm);
  font-family: var(--mrln-mono);
  font-size: 11px;
  color: var(--mrln-text-2);
  line-height: 1;
}

/* ---------------------------------------------------------------------
  18. DIVIDERS Y UTILIDADES
   --------------------------------------------------------------------- */
.mrln-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-family: var(--mrln-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
}
.mrln-divider::before,
.mrln-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mrln-border);
}

.mrln ::-webkit-scrollbar { width: 10px; height: 10px; }
.mrln ::-webkit-scrollbar-track { background: transparent; }
.mrln ::-webkit-scrollbar-thumb {
  background: var(--mrln-bg-3);
  border: 2px solid var(--mrln-bg);
  border-radius: 10px;
}
.mrln ::-webkit-scrollbar-thumb:hover { background: var(--mrln-border-hi); }

.mrln ::selection { background: var(--mrln-accent-dim); color: var(--mrln-text); }

.mrln *:focus-visible {
  outline: 2px solid var(--mrln-accent-strong);
  outline-offset: 2px;
  border-radius: var(--mrln-r-sm);
}

.mrln-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mrln-text-3);
  font-size: 13px;
}
.mrln-empty-title {
  font-size: 14px;
  color: var(--mrln-text-2);
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
  19. THEME SWITCHER (opcional — para la barra)
   --------------------------------------------------------------------- */
.mrln-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--mrln-bg-2);
  border: 1px solid var(--mrln-border);
  border-radius: 20px;
  padding: 3px;
}
.mrln-theme-switch button {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--mrln-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mrln-text-3);
  cursor: pointer;
  transition: all var(--mrln-t);
}
.mrln-theme-switch button.active {
  background: var(--mrln-bg-1);
  color: var(--mrln-text);
  border: 1px solid var(--mrln-border-md);
}

/* ---------------------------------------------------------------------
  20. ANIMACIONES
   --------------------------------------------------------------------- */
@keyframes mrln-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mrln-enter { animation: mrln-fade-up 0.35s ease-out both; }
.mrln-enter-1 { animation-delay: 0.05s; }
.mrln-enter-2 { animation-delay: 0.1s; }
.mrln-enter-3 { animation-delay: 0.15s; }
.mrln-enter-4 { animation-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .mrln *, .mrln *::before, .mrln *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}