/* ============================================================
   Cupperlab · Informes SEO — Design system (electric lab)
   Sora (display) · Plus Jakarta Sans (UI) · JetBrains Mono (labels)
   Carbón manda · cyan emite · naranja avisa.
   ============================================================ */

/* ---------- Fuentes de marca (self-hosted) ---------- */
@font-face{font-family:"Sora";font-weight:400;font-display:swap;src:url("/static/brand/fonts/sora-400.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:500;font-display:swap;src:url("/static/brand/fonts/sora-500.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:600;font-display:swap;src:url("/static/brand/fonts/sora-600.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-display:swap;src:url("/static/brand/fonts/sora-700.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:800;font-display:swap;src:url("/static/brand/fonts/sora-800.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url("/static/brand/fonts/jakarta-400.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-display:swap;src:url("/static/brand/fonts/jakarta-500.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url("/static/brand/fonts/jakarta-600.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url("/static/brand/fonts/jakarta-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url("/static/brand/fonts/jetmono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url("/static/brand/fonts/jetmono-500.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url("/static/brand/fonts/jetmono-700.woff2") format("woff2")}

:root{
  --cyan-50:#e9f9fe;--cyan-100:#c8f0fb;--cyan-200:#93e4f7;--cyan-400:#25c2e8;
  --cyan-500:#1cbce4;--cyan-600:#0f9bc2;--cyan-700:#0b7ea0;
  --orange-400:#f7713f;--orange-500:#f46434;--orange-600:#e24d1c;
  --ink-950:#0b1016;--ink-900:#11151c;--ink-800:#1a2029;--ink-700:#283038;
  --ink-600:#3b4450;--ink-500:#58626f;--ink-400:#7b8694;--ink-300:#a3adba;
  --ink-200:#c6cdd5;--ink-150:#dee3e9;--ink-100:#e8ecf1;--ink-75:#f1f4f7;--ink-50:#f7f9fb;
  --white:#fff;
  --success:#1f9d6b;--success-bg:#e4f6ee;--warning:#d9920a;--warning-bg:#fdf2dc;
  --danger:#d0402a;--danger-bg:#fbe7e5;

  --font-display:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;
  --sh-sm:0 1px 2px rgba(17,21,28,.06),0 1px 3px rgba(17,21,28,.04);
  --sh:0 2px 6px rgba(17,21,28,.06),0 8px 24px rgba(17,21,28,.05);
  --sh-lg:0 12px 40px rgba(17,21,28,.12);
  --glow-cyan:radial-gradient(circle,rgba(28,188,228,.20) 0%,rgba(28,188,228,.07) 40%,rgba(28,188,228,0) 66%);
  --sidebar-w:252px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);background:var(--ink-50);color:var(--ink-700);
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);margin:0;letter-spacing:-.01em}
a{color:var(--cyan-600);text-decoration:none}
a:hover{color:var(--cyan-700)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-400)}
.small{font-size:12.5px}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--ink-900);
  color:var(--ink-300);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar .brand{padding:22px 22px 18px;display:flex;align-items:center;gap:10px}
.sidebar .brand img{height:26px;width:auto}
.sidebar .brand .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--ink-400);text-transform:uppercase;margin-top:2px}
.sidebar .sephead{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-500);padding:16px 22px 8px}
.nav{display:flex;flex-direction:column;gap:2px;padding:4px 12px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--ink-300);font-weight:500;font-size:14px;position:relative;transition:.15s;
}
.nav a svg{width:18px;height:18px;stroke:currentColor;flex:0 0 18px}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--white)}
.nav a.active{background:rgba(28,188,228,.12);color:var(--white)}
.nav a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cyan-500)}
.sidebar .foot{margin-top:auto;padding:16px 16px 18px;border-top:1px solid rgba(255,255,255,.06)}
.sidebar .user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-300)}
.sidebar .user .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-500),var(--cyan-700));
  display:flex;align-items:center;justify-content:center;color:#042;font-weight:700;font-family:var(--font-display);font-size:13px}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:64px;background:var(--white);border-bottom:1px solid var(--ink-100);
  display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:20;
}
.topbar .eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-400)}
.topbar h1{font-size:19px;font-weight:700;line-height:1.1}
.topbar .sp{flex:1}
.content{padding:26px 28px 44px;max-width:1240px;width:100%}

/* ---------- Cards ---------- */
.card{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:22px 24px;margin-bottom:20px}
.card-head{display:flex;align-items:center;gap:12px;margin:-2px 0 16px}
.card-head h3{font-size:16px;font-weight:600}
.card-head .sp{flex:1}
.section-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-400);margin:0 0 10px;display:block}

/* ---------- KPI tiles ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:6px}
.kpi{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r);padding:16px 16px 14px;
  position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;
  background:var(--glow-cyan);opacity:0;transition:.2s}
.kpi:hover::after{opacity:1}
.kpi .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);display:block;margin-bottom:8px}
.kpi .value{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--ink-900);line-height:1}
.kpi .sub{font-size:12px;color:var(--ink-400);margin-top:6px}
.kpi.accent .value{color:var(--orange-600)}
.kpi.good .value{color:var(--success)}
.kpi.bad .value{color:var(--danger)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink-900);color:#fff;border:1px solid var(--ink-900);
  border-radius:var(--r-sm);padding:10px 16px;font-family:var(--font-sans);font-weight:600;font-size:13.5px;
  cursor:pointer;transition:.15s;line-height:1}
.btn svg{width:16px;height:16px;stroke:currentColor}
.btn:hover{background:var(--ink-800);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:var(--sh-sm)}
.btn.accent{background:var(--orange-500);border-color:var(--orange-500)}
.btn.accent:hover{background:var(--orange-600)}
.btn.cyan{background:var(--cyan-600);border-color:var(--cyan-600)}
.btn.cyan:hover{background:var(--cyan-700)}
.btn.outline{background:#fff;color:var(--ink-800);border-color:var(--ink-150)}
.btn.outline:hover{background:var(--ink-50);color:var(--ink-900)}
.btn.danger{background:#fff;color:var(--danger);border-color:#f0c7c7}
.btn.danger:hover{background:var(--danger-bg)}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn:disabled,.btn.ghost{opacity:.55;pointer-events:none}

/* ---------- Forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin:14px 0 6px}
input[type=text],input[type=date],input[type=url],input[type=password],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--ink-150);border-radius:var(--r-sm);
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink-900);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan-500);
  box-shadow:0 0 0 3px rgba(28,188,228,.15)}
textarea{min-height:92px;resize:vertical}
.hint{font-size:12px;color:var(--ink-400);margin-top:5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--ink-100);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400);text-align:left;padding:11px 14px;background:var(--ink-50);border-bottom:1px solid var(--ink-100);font-weight:500}
tbody td{padding:11px 14px;border-bottom:1px solid var(--ink-75);color:var(--ink-700)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--ink-50)}
td b,td strong{color:var(--ink-900)}

/* ---------- Pills / tags ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;font-family:var(--font-mono);letter-spacing:.02em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--success-bg);color:var(--success)}
.pill.off{background:var(--ink-75);color:var(--ink-400)}
.pill.warn{background:var(--warning-bg);color:var(--warning)}
.pill.bad{background:var(--danger-bg);color:var(--danger)}

/* ---------- Flash ---------- */
.flashes{margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.flash{padding:12px 16px;border-radius:var(--r-sm);font-size:13.5px;border:1px solid}
.flash.ok{background:var(--success-bg);color:#13674a;border-color:#bfe6d2}
.flash.error{background:var(--danger-bg);color:#9a2626;border-color:#f0c7c7}
.flash.warn{background:var(--warning-bg);color:#7a5209;border-color:#f0dcb0}

/* ---------- Misc ---------- */
.lead{color:var(--ink-400);margin:2px 0 22px;font-size:14.5px}
.empty{text-align:center;padding:34px 10px;color:var(--ink-400)}
.empty svg{width:40px;height:40px;stroke:var(--ink-200);margin-bottom:10px}
.row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chart{margin:4px 0 8px}
.callout{background:linear-gradient(180deg,#fffaf0,#fff);border:1px solid #f0dcb0;border-radius:var(--r);
  padding:16px 18px;margin-bottom:20px}
.callout h3{font-size:15px;margin-bottom:6px;color:var(--ink-900)}
.callout code{background:#fff;border:1px solid var(--ink-100);padding:1px 6px;border-radius:5px;font-family:var(--font-mono);font-size:12px}
code{background:var(--ink-75);padding:2px 6px;border-radius:5px;font-size:12.5px;font-family:var(--font-mono)}
.steps{counter-reset:s;margin:10px 0 0;padding:0;list-style:none}
.steps li{position:relative;padding:9px 0 9px 36px;border-bottom:1px solid var(--ink-75);font-size:13.5px}
.steps li:last-child{border-bottom:none}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:7px;width:23px;height:23px;
  background:var(--cyan-500);color:#042c38;border-radius:50%;text-align:center;font-weight:700;font-size:12px;line-height:23px;font-family:var(--font-display)}
.seg{display:flex;gap:6px;align-items:center}
.seg a{padding:5px 11px;border-radius:999px;font-size:12.5px;font-family:var(--font-mono);
  border:1px solid var(--ink-150);color:var(--ink-500);background:#fff}
.seg a.on{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .sidebar{position:fixed;z-index:50;transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none}
  :root{--sidebar-w:0px}
  .grid2{grid-template-columns:1fr}
  .content{padding:18px 16px 40px}
}