:root{
  --bg:#0b0f19;
  --panel: rgba(17,24,39,.75);
  --stroke: rgba(148,163,184,.18);
  --text: #e6edf3;
  --muted: rgba(226,232,240,.7);
  --neon: #60a5fa;
  --neon2:#a78bfa;
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(167,139,250,.16), transparent 55%),
    radial-gradient(700px 500px at 60% 80%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%);
  filter: saturate(120%);
  z-index:-1;
}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  backdrop-filter: blur(12px);
  background: rgba(11,15,25,.55);
  border-bottom: 1px solid var(--stroke);
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--neon));
  box-shadow: 0 0 18px rgba(96,165,250,.55), 0 0 40px rgba(167,139,250,.25);
}
.brand .name{font-weight:700; letter-spacing:.2px}
.brand .tag{
  font-family: var(--mono);
  font-size:12px;
  padding:4px 8px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color: rgba(226,232,240,.9);
  background: rgba(2,6,23,.35);
}

.container{max-width:1100px; margin:0 auto; padding:22px 16px 56px}
.grid{display:grid; gap:14px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 980px){ .grid.cols-3{grid-template-columns:1fr} .grid.cols-2{grid-template-columns:1fr} }

.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .hd{
  padding:14px 16px;
  border-bottom: 1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card .hd h2{margin:0; font-size:14px; letter-spacing:.25px; text-transform:uppercase; color: rgba(226,232,240,.9)}
.card .bd{padding:16px}

.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
@media (max-width: 980px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kpi{
  padding:14px 14px;
  border-radius: var(--radius2);
  border:1px solid var(--stroke);
  background: rgba(2,6,23,.35);
}
.kpi .label{font-size:12px; color: var(--muted)}
.kpi .value{font-size:22px; font-weight:750; margin-top:6px}
.kpi .sub{font-size:12px; color: rgba(226,232,240,.65); margin-top:2px; font-family: var(--mono)}

.table{width:100%; border-collapse:separate; border-spacing:0}
.table th,.table td{padding:10px 10px; border-bottom:1px solid var(--stroke); font-size:13px; vertical-align:top}
.table th{font-size:12px; text-transform:uppercase; letter-spacing:.3px; color: rgba(226,232,240,.75); font-family: var(--mono)}
.table tr:hover td{background: rgba(96,165,250,.06)}
.mono{font-family: var(--mono)}
.muted{color: var(--muted)}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(2,6,23,.35);
  font-size:12px;
}
.badge.good{border-color:rgba(34,197,94,.35)}
.badge.bad{border-color:rgba(239,68,68,.35)}
.badge.warn{border-color:rgba(245,158,11,.35)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(96,165,250,.35);
  background: linear-gradient(180deg, rgba(96,165,250,.22), rgba(2,6,23,.35));
  color: var(--text);
  cursor:pointer;
  text-decoration:none;
  font-weight:650;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{
  border-color: var(--stroke);
  background: rgba(2,6,23,.35);
  font-weight:600;
}
.btn.danger{
  border-color: rgba(239,68,68,.4);
  background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(2,6,23,.35));
}

.input, .select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  outline:none;
  background: rgba(2,6,23,.35);
  color: var(--text);
}
.input:focus, .select:focus, textarea:focus{
  border-color: rgba(96,165,250,.55);
  box-shadow: 0 0 0 4px rgba(96,165,250,.10);
}

.row{display:flex; gap:10px; align-items:center}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}

.hr{height:1px; background: var(--stroke); margin:14px 0}

.notice{
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(2,6,23,.35);
  color: rgba(226,232,240,.85);
}
.notice.good{border-color:rgba(34,197,94,.35)}
.notice.bad{border-color:rgba(239,68,68,.35)}

.codebox{
  padding:10px 12px;
  border-radius: 14px;
  border:1px dashed rgba(148,163,184,.35);
  background: rgba(2,6,23,.28);
  font-family: var(--mono);
  font-size:12px;
  overflow:auto;
}



/* =========================
   Responsive Mobile Fixes
   (pegar al FINAL del CSS)
   ========================= */

:root { --gap: 12px; }

img, canvas, svg { max-width: 100%; height: auto; }

.container { width: min(1100px, 100%); padding: 18px; }

.card { overflow: hidden; }

/* Topbar: que no se rompa */
.topbar {
  flex-wrap: wrap;
  gap: 10px;
}
.topbar .brand { min-width: 180px; }
.topbar .top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* Botones: que no se salgan */
.btn, .pill {
  max-width: 100%;
  white-space: nowrap;
}
.btn { padding: 10px 12px; }

/* Inputs largos (URLs) */
input[type="text"], input[type="url"], input[type="email"], textarea, .input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tablas: scroll horizontal limpio */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
.table th, .table td {
  white-space: nowrap;
}

/* QR preview: no forzar tamaños */
.qr-preview img,
.qr-box img {
  max-width: 100%;
  height: auto;
}

/* Mobile: stack de columnas y ajustes generales */
@media (max-width: 820px) {
  .container { padding: 14px; }

  /* Cualquier layout en columnas: apilar */
  .row, .grid, .cols, .two-col {
    display: block !important;
  }

  /* En el detalle (cabecera con botón exportar / acciones) */
  .card > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .card > div[style*="display:flex"] .btn {
    width: 100%;
  }

  /* Pills / email largos */
  .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Tablas: reducir padding para que se vean mejor */
  .table th, .table td { padding: 10px 10px; font-size: 12px; }
}

/* Mobile pequeño */
@media (max-width: 420px) {
  h1 { font-size: 18px; }
  h2 { font-size: 16px; }
  .table th, .table td { font-size: 11px; }
}



/* =========================
   FIX SCROLL / CLICK MOBILE
   ========================= */

/* 1) El fondo NO debe capturar taps ni quedar encima */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;   /* <- clave */
  z-index: -1;            /* <- detrás de todo */
}

/* 2) Asegurar que la página pueda scrollear */
html, body{
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 3) Evitar que algún wrapper "corte" el scroll */
.container, main, .card{
  overflow: visible;
}

/* 4) Si hay tablas o bloques anchos, que tengan scroll horizontal sin romper */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 5) En pantallas pequeñas, permitir que los botones no queden fuera de pantalla */
@media (max-width: 820px){
  .topbar{
    position: sticky;   /* si estaba fixed y molestaba */
    top: 0;
    z-index: 10;
  }

  /* Si hay secciones con botones en fila: apilar */
  .card > div[style*="display:flex"]{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .btn{
    width: 100%;
  }
}



@media (max-width: 820px){
  body{
    height: auto !important;
    min-height: 100vh !important;
  }
  .container{
    height: auto !important;
    min-height: 0 !important;
  }
}



/* ====== Tablas responsive (scroll horizontal) ====== */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

/* evita que las columnas se rompan raro */
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px; /* fuerza scroll en mobile */
}

.table th, .table td{
  white-space: nowrap;
}