/* Zygnals — sistema de diseño de la plataforma (consola + dashboard).
   Alineado a zygnals.co: claro, limpio, acento azul #38b6ff, Poppins/Space Grotesk. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#ffffff; --bg-soft:#f9f9f9; --bg-faint:#f3f3f3;
  --ink:#181818; --ink-2:#2b2b2b; --ink-3:#6b6b6b; --ink-4:#a4a4a4;
  --line:#e6e6e6; --line-2:#d6d6d6;
  --accent:#38b6ff; --accent-2:#0ea5e9; --accent-3:#e0f4ff;
  --dark:#0a0a0a; --dark-2:#141414;
  --ok:#0ea55b; --ok-bg:#e7f7ee; --warn:#c07a12; --warn-bg:#fbf1de; --danger:#d64545;
  --radius:14px; --radius-lg:22px; --maxw:1120px;
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow-1:0 1px 2px rgba(24,24,24,.04),0 8px 24px -8px rgba(24,24,24,.08);
  --shadow-2:0 1px 2px rgba(24,24,24,.04),0 30px 60px -20px rgba(24,24,24,.18);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-faint);color:var(--ink);font:15px/1.55 var(--font-body)}
a{color:var(--accent-2);text-decoration:none} a:hover{text-decoration:underline}
h1{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:0 0 4px}
strong{font-weight:600}
.sub{color:var(--ink-3);margin:0 0 24px}

/* header */
header.zx{display:flex;align-items:center;gap:18px;padding:14px 26px;background:var(--bg);border-bottom:1px solid var(--line)}
header.zx img.logo{height:24px;width:auto;display:block}
header.zx .tag{font-family:var(--font-mono);font-size:12px;color:var(--ink-4);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
header.zx nav{display:flex;gap:20px;margin-left:6px;font-weight:500}
header.zx nav a{color:var(--ink-2)} header.zx .spacer{flex:1}
header.zx .who{color:var(--ink-3);font-size:14px}

main{max-width:var(--maxw);margin:0 auto;padding:30px 26px}

/* cards de métricas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:28px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow-1)}
.card .k{color:var(--ink-3);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.card .v{font-family:var(--font-display);font-weight:800;font-size:30px;margin-top:6px;letter-spacing:-.02em}
.card .v .u{color:var(--ink-4);font-size:17px;font-weight:600}

/* tabla */
.panel-head{display:flex;align-items:center;margin:6px 0 12px}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1)}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--ink-3);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--bg-soft)}
tr:last-child td{border-bottom:0}
td .muted{color:var(--ink-4);font-size:12.5px}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent}
.badge.activo{color:var(--ok);background:var(--ok-bg)} .badge.pausado{color:var(--warn);background:var(--warn-bg)}
.badge.borrador{color:var(--ink-3);background:var(--bg-faint);border-color:var(--line)}
.chip{display:inline-block;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);background:var(--bg-faint);border:1px solid var(--line);border-radius:7px;padding:2px 7px;margin:2px 3px 2px 0}

/* botones y forms */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);cursor:pointer;font:600 14px var(--font-body)}
.btn:hover{border-color:var(--ink-4);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04283b} .btn.primary:hover{background:var(--accent-2);color:#fff}
label{display:block;margin:16px 0 6px;color:var(--ink-2);font-size:13px;font-weight:600}
input,select,textarea{width:100%;padding:11px 13px;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;color:var(--ink);font:15px var(--font-body)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-3)}
textarea{min-height:74px;font-family:var(--font-mono);font-size:13px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.flash{padding:12px 15px;border-radius:10px;margin-bottom:20px;font-weight:500;border:1px solid}
.flash.ok{color:var(--ok);background:var(--ok-bg);border-color:#bfe6cf}
.flash.err{color:var(--danger);background:#fbe9e9;border-color:#f2c9c9}
.card-form{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-1);max-width:660px}
.login-wrap{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center}
.login-card{width:100%;max-width:380px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-2)}