:root {
  --bg: #070a0f;
  --panel: #111824;
  --panel-2: #0c1420;
  --line: #1c2838;
  --text: #e8eef7;
  --muted: #8b9cb3;
  --accent: #34d399;
  --accent-2: #22d3ee;
  --danger: #f87171;
  --warn: #fbbf24;
  --radius: 16px;
  --shadow: 0 18px 40px rgba(2, 6, 12, 0.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1000px 520px at 12% -12%, rgba(34, 211, 238, 0.10), transparent 62%),
    radial-gradient(760px 420px at 88% -4%, rgba(52, 211, 153, 0.09), transparent 56%),
    radial-gradient(900px 600px at 50% 115%, rgba(99, 102, 241, 0.07), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -0.01em; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  word-break: break-all;
}

/* barra superior */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 10, 15, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; border-radius: 8px; display: block; }
.brand span { color: var(--accent); }
.topbar nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 550;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); text-decoration: none; }
.nav-link.is-active {
  color: var(--text);
  background: rgba(34, 211, 238, 0.10);
  border-color: rgba(34, 211, 238, 0.28);
}
.nav-link i { font-size: 13px; opacity: 0.9; }
.inline { display: inline; }
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 10px;
}
.link:hover { color: var(--danger); background: rgba(248, 113, 113, 0.10); }

.wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 26px 18px 44px; flex: 1; }
.foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 16px;
  border-top: 1px solid var(--line);
}
.foot i { color: var(--accent); margin-right: 6px; }

/* tarjetas */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card.narrow { max-width: 640px; }
.card h2 {
  font-size: 15.5px;
  font-weight: 650;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.card h2 i { color: var(--accent-2); font-size: 14px; }
.card h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 600;
  margin: 22px 0 10px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }

/* estadisticas */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 10px 24px rgba(2, 6, 12, 0.35);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.stat:hover { transform: translateY(-1px); border-color: #26374b; }
.stat .k {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stat .k i { color: var(--accent-2); font-size: 12px; }
.stat .v { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .v.good { color: var(--accent); }
.stat .v.bad { color: var(--warn); }

/* tablas */
.table-scroll { overflow-x: auto; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: rgba(255, 255, 255, 0.02);
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: rgba(34, 211, 238, 0.05); }
tbody tr:last-child td { border-bottom: 0; }
td.right, th.right { text-align: right; }
td.num { font-variant-numeric: tabular-nums; }

/* insignias */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.active { color: var(--accent); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.32); }
.badge.expired, .badge.disabled { color: var(--muted); background: rgba(139, 156, 179, 0.12); border-color: rgba(139, 156, 179, 0.3); }
.badge.idle { color: #6f8298; background: rgba(139, 156, 179, 0.08); border-color: rgba(139, 156, 179, 0.22); }
.badge.quota { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.badge.error { color: var(--danger); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); }

/* datos clave-valor */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.kv > div {
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.kv span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 3px;
}
.kv b { font-weight: 600; }

/* formularios */
form.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.grid .span2 { grid-column: 1 / -1; }
label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 550; }
input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #080f18;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: #5f7085; }
input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14); }
label small { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; font-weight: 400; }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions .row { display: flex; gap: 8px; align-items: center; }
.actions .row input { margin: 0; min-width: 220px; }
.wrap-actions { gap: 10px; }

/* botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #131c27;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 570;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
.btn:hover { background: #17222f; border-color: #283a4f; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22); }
.btn i { font-size: 13px; opacity: 0.95; }
.btn.primary {
  background: linear-gradient(180deg, #3ee0a8, #16a34a);
  border-color: #1f9e63;
  color: #04150e;
  font-weight: 680;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.warn { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.4); color: var(--warn); }
.btn.danger { background: rgba(248, 113, 113, 0.13); border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }
.btn.wide { width: 100%; margin-top: 8px; justify-content: center; }

/* mensajes */
.flash { padding: 11px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.flash.ok { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.35); color: #9df3d3; }
.flash.err { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.35); color: #ffc0c0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.empty { color: var(--muted); margin: 6px 0 2px; font-size: 13.5px; }

/* payload */
pre.payload {
  background: #060a0f;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.6px;
  line-height: 1.6;
  color: #b9f6d5;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0 0 12px;
}

/* actividad */
.events { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.events li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.events li:last-child { border-bottom: 0; }
.events b { color: var(--text); font-weight: 600; }

/* grafica de consumo */
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; padding-top: 4px; }
.chart .col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.chart .bar-wrap {
  position: relative;
  width: 100%;
  height: 124px;
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.chart .bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-2), rgba(34, 211, 238, 0.28));
  border-radius: 8px 8px 0 0;
  transition: height 0.35s ease;
}
/* el valor dentro de la barra: solo se ve en móvil, donde no hay hover */
.chart .bar-val { display: none; }
.chart .bar.today { background: linear-gradient(180deg, var(--accent), rgba(52, 211, 153, 0.28)); }
.chart .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.chart .val { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* login */
.login-wrap { min-height: 62vh; display: flex; align-items: center; justify-content: center; }
.login-stack { width: 100%; max-width: 370px; }
.login-card { width: 100%; max-width: 370px; }
.login-stack .login-card { max-width: none; }
.download-card { margin-top: 14px; }
.download-card .download-title { font-size: 16px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.login-title { font-size: 21px; margin: 0 0 4px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.login-title img { width: 30px; height: 30px; border-radius: 9px; }
.login-title span { color: var(--accent); }
.login-card label { margin-top: 14px; }

/* barra inferior (solo móvil) */
.tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 6px 6px calc(4px + env(safe-area-inset-bottom));
  background: rgba(9, 13, 20, 0.86);
  backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.tabbar .tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: 4px 2px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.tabbar .tab i { font-size: 18px; line-height: 1; transition: transform 0.15s ease; }
.tabbar .tab:hover { text-decoration: none; color: var(--text); }
.tabbar .tab:active { background: rgba(255, 255, 255, 0.06); }
.tabbar .tab.is-active { color: var(--accent); }
.tabbar .tab.is-active i { transform: translateY(-1px); }
.tabbar .tab.is-active::before {
  content: "";
  position: absolute;
  top: -6px;
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}

/* --- móvil: aprovechar el ancho de la pantalla --- */
@media (max-width: 620px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 14.5px; min-height: 100dvh; overflow-x: hidden; }
  .wrap { padding: 12px 10px 22px; max-width: 100%; }

  .topbar {
    padding: 7px 10px;
    padding-top: max(7px, env(safe-area-inset-top));
    gap: 8px;
    flex-wrap: nowrap;
  }
  .brand { font-size: 15px; gap: 7px; }
  .brand img { width: 22px; height: 22px; }
  .topbar nav { gap: 2px; margin-left: auto; }
  .nav-link, .link { padding: 8px 10px; font-size: 13.5px; min-height: 40px; }
  .nav-link span, .link span { display: none; }

  /* la navegación se va abajo; arriba queda el logo y salir */
  .topbar nav .nav-link { display: none; }
  .tabbar { display: grid; }
  /* con el teclado abierto la barra estorba: se esconde */
  body:has(input:focus, textarea:focus, select:focus) .tabbar {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  .card { padding: 12px; border-radius: 14px; margin-bottom: 12px; }
  .card h2 { font-size: 14.5px; margin-bottom: 10px; }
  .card h3 { margin: 16px 0 8px; }
  .card-head { gap: 8px; margin-bottom: 10px; }
  .card-head .actions { width: 100%; justify-content: space-between; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .stat { padding: 10px 12px; border-radius: 12px; }
  .stat .k { font-size: 10.5px; }
  .stat .v { font-size: 19px; }

  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .kv > div { padding: 8px 9px; border-radius: 10px; }
  .kv span { font-size: 10px; margin-bottom: 2px; }
  .kv b { font-size: 13.5px; overflow-wrap: anywhere; }
  .kv b code { word-break: break-all; }

  form.grid { grid-template-columns: 1fr; gap: 10px; }
  input, textarea, select { font-size: 16px; }
  label { font-size: 12px; }
  .btn { min-height: 42px; padding: 9px 13px; font-size: 13.5px; }
  .actions { gap: 8px; }
  .actions .row { width: 100%; }
  .actions .row input { min-width: 0; flex: 1; }
  .flash { font-size: 13px; padding: 9px 11px; margin-bottom: 12px; }
  pre.payload { font-size: 11.8px; padding: 10px; }

  .chart { gap: 6px; }
  .chart .bar-wrap { height: 106px; }
  .chart .val { display: none; }
  .chart .lbl { font-size: 9.5px; letter-spacing: 0; }
  /* sin ratón no hay tooltip: el dato va escrito dentro de la barra, de abajo
     hacia arriba, para que quepa en una columna estrecha. Va en el área de la
     barra (no dentro del div de la barra) para que no se salga cuando mide
     unos pocos píxeles. */
  .chart .bar-val {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    padding: 4px 2px;
    border-radius: 6px;
    background: rgba(4, 10, 16, 0.55);
    color: #eaf6ff;
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
  .events { font-size: 12.5px; }
  .foot { display: none; }
  /* hueco para la barra inferior (y el notch) */
  .wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* tablas -> tarjetas (sin scroll horizontal) */
  .table-scroll { overflow: visible; }
  .table-scroll table { display: block; width: 100%; }
  .table-scroll thead { display: none; }
  .table-scroll tbody { display: grid; gap: 8px; }
  .table-scroll tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 10px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
  }
  .table-scroll td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 0;
    border: 0;
    white-space: normal;
    font-size: 13px;
    min-width: 0;
  }
  .table-scroll td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .table-scroll td[data-label=""]::before { content: none; }
  .table-scroll td[colspan] { grid-column: 1 / -1; justify-content: flex-start; }
  .table-scroll table.accounts td:first-child {
    grid-column: 1 / -1;
    font-size: 15px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .table-scroll table.accounts td:first-child::before { content: none; }
  .table-scroll table.accounts td:last-child { grid-column: 1 / -1; }
  .table-scroll table.accounts td:last-child .btn { width: 100%; justify-content: center; }
}

@media (display-mode: standalone) {
  .topbar { padding-top: max(7px, env(safe-area-inset-top)); }
}

/* Formularios: mensaje de WhatsApp (textarea) y casillas */
textarea {
  width: 100%;
  min-height: 150px;
  padding: .7rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .28);
  color: inherit;
  font: inherit;
  font-size: .86rem;
  line-height: 1.5;
  resize: vertical;
}
.grid label.check { display: flex; align-items: center; gap: .55rem; }
.grid label.check input { width: auto; }