/* ===================================================================== MARSHAL OPS — SISTEMA DE DISEÑO (design-system.css) --------------------------------------------------------------------- La "cara" estándar del sistema: tokens, botones, estructura (barra lateral + barra superior), tarjetas, tablas, chips, formularios. ADDITIVE: solo agrega clases (con prefijo o nombres nuevos). NO cambia selectores globales existentes, así no altera nada hasta que se aplica. Se aplica página por página, módulo por módulo. NO toca la lógica. ===================================================================== */ /* ---------- 1. TOKENS ---------- */ :root{ /* Colores base (los de Marshal Ops, superficies afinadas) */ --ds-bg:#0b1120; --ds-surface:#0f172a; --ds-surface-2:#141f38; --ds-card:#16213c; --ds-border:#243049; --ds-border-soft:#1c2740; --ds-text:#eef2f9; --ds-muted:#9aa8c2; --ds-faint:#64748b; --ds-primary:#3b82f6; --ds-primary-2:#60a5fa; --ds-primary-hover:#2563eb; --ds-success:#10b981; --ds-warning:#f59e0b; --ds-danger:#ef4444; --ds-violet:#8b5cf6; /* Espaciado — grilla de 8 puntos */ --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px; --ds-s5:24px; --ds-s6:32px; /* Radios, sombras, foco */ --ds-radius:10px; --ds-radius-lg:14px; --ds-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --ds-ring:0 0 0 3px rgba(59,130,246,.35); /* Escala tipográfica */ --ds-text-xs:.75rem; --ds-text-sm:.875rem; --ds-text-base:1rem; --ds-text-lg:1.125rem; --ds-text-xl:1.4rem; --ds-text-2xl:1.9rem; } /* ---------- 2. ÍCONOS (SVG de línea, una sola familia) ---------- */ .ds-ic{display:inline-block;vertical-align:middle;flex:none;} .ds-ic svg{display:block;width:100%;height:100%;} .ds-ic-sm{width:15px;height:15px;} .ds-ic-md{width:19px;height:19px;} .ds-ic-lg{width:22px;height:22px;} /* ---------- 3. BOTÓN UNIFICADO ---------- */ .ds-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:9px 15px; /* tamaño MEDIO por defecto */ font-family:inherit;font-size:var(--ds-text-sm);font-weight:600;line-height:1; border:1px solid transparent;border-radius:var(--ds-radius);cursor:pointer; transition:background-color .15s,border-color .15s,transform .05s;white-space:nowrap; width:auto; /* anula anchos globales heredados */ } .ds-btn svg{width:15px;height:15px;} .ds-btn:active{transform:translateY(1px);} .ds-btn:focus-visible{outline:none;box-shadow:var(--ds-ring);} .ds-btn--primary{background:var(--ds-primary);color:#fff;} .ds-btn--primary:hover{background:var(--ds-primary-hover);} .ds-btn--secondary{background:transparent;color:var(--ds-text);border-color:var(--ds-border);} .ds-btn--secondary:hover{border-color:var(--ds-primary);background:rgba(59,130,246,.08);} .ds-btn--danger{background:rgba(239,68,68,.14);color:#fca5a5;} .ds-btn--danger:hover{background:rgba(239,68,68,.24);} .ds-btn--danger-solid{background:var(--ds-danger);color:#fff;} .ds-btn--success{background:var(--ds-success);color:#fff;} .ds-btn--ghost{background:transparent;color:var(--ds-muted);} .ds-btn--ghost:hover{color:var(--ds-text);background:var(--ds-surface-2);} .ds-btn--sm{padding:6px 11px;font-size:var(--ds-text-xs);} .ds-btn--lg{padding:13px 20px;font-size:var(--ds-text-base);} .ds-btn--block{width:100%;} .ds-btn:disabled{opacity:.5;cursor:not-allowed;} /* ---------- 4. ESTRUCTURA: barra lateral + barra superior ---------- */ .ds-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:var(--ds-bg);color:var(--ds-text);} .ds-side{background:linear-gradient(180deg,#0d1526,#0b1120);border-right:1px solid var(--ds-border-soft); padding:var(--ds-s5) var(--ds-s4);display:flex;flex-direction:column;gap:var(--ds-s5);position:sticky;top:0;height:100vh;} .ds-brand{display:flex;align-items:center;gap:var(--ds-s3);} .ds-brand .ds-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 6px 16px -4px rgba(59,130,246,.6);} .ds-brand b{font-size:var(--ds-text-base);} .ds-brand span{display:block;font-size:.7rem;color:var(--ds-faint);font-weight:600;letter-spacing:.4px;text-transform:uppercase;} .ds-nav-label{font-size:.68rem;color:var(--ds-faint);font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:0 var(--ds-s3);margin-bottom:var(--ds-s2);} .ds-nav{display:flex;flex-direction:column;gap:2px;} /* Sirve tanto para como para los