/* =============================================================================
   MsgFindeR — Tema visual unificado (CLARO, 2026)
   Se carga DESPUÉS de los estilos internos de cada módulo, por lo que redefine
   la paleta, la tipografía y las formas sin tocar el marcado ni el JavaScript.

   Módulos cubiertos: index.php (SMS), idata.php, OpenMenu, CallNav,
   autoremove, navshield.php y admin_panel.php.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens del panel de usuario (cubre index/idata/OpenMenu/CallNav/autoremove) ── */
:root{
  color-scheme: light;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface2:#f1f4fa;
  --surface3:#e7ecf6;

  --border:rgba(15,23,42,.08);
  --border2:rgba(15,23,42,.14);
  --border3:rgba(15,23,42,.24);

  --text:#1e293b;
  --text2:#5b6b82;
  --text3:#8b99ad;

  --violet:#6d5efc;  --violet2:#5b4bdb;
  --violet-bg:rgba(109,94,252,.10); --violet-bdr:rgba(109,94,252,.28);
  --emerald:#059669; --emerald-bg:rgba(5,150,105,.10); --emerald-bdr:rgba(5,150,105,.26);
  --sky:#0284c7;     --sky-bg:rgba(2,132,199,.10);     --sky-bdr:rgba(2,132,199,.26);
  --amber:#b45309;   --amber-bg:rgba(245,158,11,.14);  --amber-bdr:rgba(245,158,11,.32);
  --red:#dc2626;     --red-bg:rgba(220,38,38,.10);     --red-bdr:rgba(220,38,38,.26);
  --gold:#b45309;    --gold-bg:rgba(240,185,11,.14);   --gold-bdr:rgba(240,185,11,.34);

  --r-sm:8px; --r-md:12px; --r-lg:16px;

  /* ── Tokens del panel admin (mismos acentos que el panel de usuario) ──────── */
  --w:#ffffff;
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e2e8f0; --g400:#94a3b8;
  --g500:#64748b; --g600:#475569; --g700:#334155; --g800:#1e293b; --g900:#0f172a;
  --b50:#eef0ff; --b100:#e0e3ff; --b600:#5b4bdb; --b700:#4a3ecf;
  --gr50:#ecfdf5; --gr100:#d1fae5; --gr600:#059669; --gr700:#047857;
  --r50:#fef2f2; --r100:#fee2e2; --r600:#dc2626; --r700:#b91c1c;
  --a100:#fef3c7; --a500:#f59e0b; --a600:#b45309;
  --t50:#f0fdfa; --t600:#0d9488;
  --v50:#f5f3ff; --v100:#ede9fe; --v600:#6d5efc;
  --o50:#fff7ed; --o100:#ffedd5; --o600:#ea580c;
  --bd:#e6eaf1;
  --rd:10px; --rdl:14px;
  --sh:0 1px 3px rgba(15,23,42,.06);
  --shm:0 22px 48px rgba(15,23,42,.18);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html{background:var(--bg)}
body{
  background:
    radial-gradient(1000px 620px at 8% -12%, rgba(109,94,252,.10), transparent 60%),
    radial-gradient(900px 560px at 102% -6%, rgba(2,132,199,.08), transparent 58%),
    var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(109,94,252,.24);color:#1e293b}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.3);background-clip:content-box}

body,button,input,select,textarea,.fc,.inp,.sinp,.tab-btn,.nav-item,.btn,.pb,.logo,.ctit,.ptit,.hero h1{
  font-family:var(--font) !important;
}
.mono,.api-cred-val,.lets,.rcapi,.lenum,.rcprice,input[type="number"],input[type="date"],.dev-code,.lic-val{
  font-family:var(--mono) !important;
}

/* ── Sidebar / navegación ─────────────────────────────────────────────────── */
.sidebar{
  background:#ffffff !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--border) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.logo{letter-spacing:-.4px;color:var(--text) !important}
.logo-dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 7px var(--emerald);flex-shrink:0;display:inline-block}
.logo span{color:var(--violet2) !important}
.logo .dot{color:var(--emerald) !important}
.topbar{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--border) !important;
}
.nav-item{border-radius:12px;transition:all .16s ease;color:var(--text2)}
.nav-item:hover{background:var(--surface2) !important;color:var(--text) !important}
.nav-item.active{
  background:var(--violet-bg) !important;
  color:var(--violet2) !important;
  border-color:var(--violet-bdr) !important;
  box-shadow:inset 0 0 0 1px var(--violet-bdr);
}
.tab-btn{color:var(--text2)}
.tab-btn:hover{background:var(--surface2) !important;color:var(--text) !important}
.tab-btn.active{color:var(--violet2) !important;border-bottom-color:var(--violet) !important}
.nl{color:var(--text3) !important}
.ns{background:var(--border) !important}
.nav-sep{background:var(--border) !important}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 28px -18px rgba(15,23,42,.22) !important;
}
.card-hdr,.chd,.card-header{background:var(--surface2) !important;border-color:var(--border) !important}
.card-body,.cbody{color:var(--text)}
.card-title,.ctit{letter-spacing:.2px}
.card-hdr-ico,.cico{border-radius:10px}

/* ── Estadísticas ─────────────────────────────────────────────────────────── */
.stat-card,.scard{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 26px -18px rgba(15,23,42,.2) !important;
}
.s-lbl,.slbl{color:var(--text3) !important;letter-spacing:.8px}
.sval,.s-val{letter-spacing:-.5px}

/* ── Tablas ───────────────────────────────────────────────────────────────── */
thead{background:var(--surface2) !important}
th{
  background:var(--surface2) !important;
  color:var(--text3) !important;
  border-bottom:1px solid var(--border2) !important;
  letter-spacing:.7px;
}
td{border-bottom:1px solid var(--border) !important;color:var(--text)}
tbody tr:hover td{background:var(--surface2) !important}
.price-row{border-bottom:1px solid var(--border) !important}
.dim{color:var(--text3) !important}

/* ── Formularios ──────────────────────────────────────────────────────────── */
.fc,.inp,.sinp{
  background:#ffffff !important;
  border:1px solid var(--border2) !important;
  color:var(--text) !important;
  border-radius:12px !important;
  transition:border-color .16s,box-shadow .16s;
}
.fc::placeholder,.inp::placeholder,.sinp::placeholder{color:var(--text3) !important}
.fc:focus,.inp:focus,.sinp:focus{
  outline:none;
  border-color:var(--violet) !important;
  box-shadow:0 0 0 3px rgba(109,94,252,.16) !important;
}
.fl,.field-lbl{color:var(--text2) !important;letter-spacing:.6px}
select.fc option,select.inp option{background:#ffffff;color:var(--text)}
select.inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E")}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn{border-radius:12px !important;letter-spacing:.2px;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.btn:hover{transform:translateY(-1px)}
.btn-b{background:linear-gradient(135deg,#7a6cff,#5b4bdb) !important;color:#fff !important;box-shadow:0 8px 20px -8px rgba(91,75,219,.55)}
.btn-g{background:linear-gradient(135deg,#12b981,#059669) !important;color:#fff !important}
.btn-r{background:linear-gradient(135deg,#ef4444,#dc2626) !important;color:#fff !important}
.btn-a{background:linear-gradient(135deg,#f59e0b,#d97706) !important;color:#3a2400 !important}
.btn-t{background:linear-gradient(135deg,#22b8e6,#0284c7) !important;color:#fff !important}
.btn-v{background:linear-gradient(135deg,#7a6cff,#5b4bdb) !important;color:#fff !important}
.btn-o{background:linear-gradient(135deg,#fb923c,#ea580c) !important;color:#fff !important}
.btn-gr{
  background:#ffffff !important;
  border:1px solid var(--border2) !important;
  color:var(--text2) !important;
}
.btn-gr:hover{border-color:var(--border3) !important;background:var(--surface2) !important;color:var(--text) !important}
.btn-send{
  background:linear-gradient(135deg,#7a6cff,#5b4bdb) !important;
  color:#fff !important;
  border-radius:var(--r-md) !important;
  box-shadow:0 14px 30px -12px rgba(91,75,219,.6) !important;
  letter-spacing:.3px;
}
.btn-send:hover{filter:brightness(1.05)}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge,.api-badge,.saldo-badge,.adm-tag{border-radius:999px !important}
.badge{border:1px solid transparent}

/* ── Modales ──────────────────────────────────────────────────────────────── */
.mo{background:rgba(15,23,42,.42) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mbox{
  background:#ffffff !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shm) !important;
}
.mhd{background:var(--surface2) !important;border-color:var(--border) !important}
.mcl{background:var(--surface2) !important;border-color:var(--border) !important;color:var(--text2) !important}
.ms{border-color:var(--border) !important}
.dz{border-color:var(--red-bdr) !important}

/* ── Alertas ──────────────────────────────────────────────────────────────── */
.alert,.a-ok,.a-err{border-radius:var(--r-md) !important}

/* ── Paginación / estados vacíos ──────────────────────────────────────────── */
.pag{border-color:var(--border) !important}
.pb{background:#ffffff !important;border:1px solid var(--border2) !important;color:var(--text2) !important;border-radius:10px !important}
.pb:hover{color:var(--violet2) !important;border-color:var(--violet-bdr) !important}
.pb.cur{background:linear-gradient(135deg,#7a6cff,#5b4bdb) !important;border-color:transparent !important;color:#fff !important}
.empty{color:var(--text3) !important}

/* ── Tester de rutas / logs (admin) ───────────────────────────────────────── */
.rc{background:var(--surface2) !important;border:2px solid var(--border) !important;border-radius:var(--r-md) !important}
.rc.sel{border-color:var(--violet) !important;background:var(--violet-bg) !important}
.le{border:1px solid var(--border) !important;border-radius:var(--r-md) !important;background:var(--surface2) !important}
.le-ok{border-left:3px solid var(--emerald) !important}
.le-fail{border-left:3px solid var(--red) !important}
.pw{background:var(--violet-bg) !important;border-color:var(--violet-bdr) !important}
.pbg{background:var(--surface3) !important}
.pbf{background:linear-gradient(90deg,#7a6cff,#22b8e6) !important}

/* ── Credenciales API (sidebar usuario) ───────────────────────────────────── */
.api-creds-sidebar,.api-creds-title{border-color:var(--border) !important}
.api-creds-sidebar{background:var(--surface2) !important}
.api-cred-val{word-break:break-all;background:#ffffff !important}

/* ── OpenMenu: hero morado oscuro → claro ─────────────────────────────────── */
.hero{
  background:linear-gradient(135deg,#eef0ff 0%,#f6f3ff 55%,#eef6ff 100%) !important;
  border:1px solid var(--violet-bdr) !important;
}
.hero h1,.hero h1 span{color:var(--text) !important}
.hero p{color:var(--text2) !important}
.hero-back{color:var(--text2) !important;border-color:var(--border2) !important;background:#ffffff}

/* ── CallNav: cabecera de llamada oscura → clara ──────────────────────────── */
.cm-head{background:linear-gradient(135deg,#eef0ff,#f5f3ff) !important;border-color:var(--border) !important}
.cm-calling-label{color:var(--violet2) !important}
.cm-numero{color:var(--text) !important}
.call-modal{background:#ffffff !important;border-color:var(--border) !important}

/* ── iData: cabeceras ─────────────────────────────────────────────────────── */
.db-header{background:var(--surface2) !important}

/* ── autoremove ───────────────────────────────────────────────────────────── */
.back-btn:hover{border-color:var(--border3) !important}

/* ── SweetAlert2: fondos oscuros definidos en JS → claros ─────────────────── */
.swal2-popup{background:#ffffff !important;color:var(--text) !important}
.swal2-title,.swal2-html-container,.swal2-content,.swal2-input,.swal2-textarea{color:var(--text) !important}
.swal2-input,.swal2-textarea{background:#ffffff !important;border-color:var(--border2) !important}

/* ── NavShield (estilos propios, sin tokens) → unificar en claro ──────────── */
.wrap .card{background:#ffffff !important;border-color:var(--border) !important;box-shadow:0 1px 2px rgba(15,23,42,.04) !important}
.wrap .card-t{color:var(--text) !important}
.wrap .stat{background:var(--surface2) !important;border-color:var(--border) !important}
.wrap .stat-l{color:var(--text3) !important}
.wrap .guide{background:linear-gradient(180deg,#ecfdf5,#f0fdfa) !important;border-color:rgba(5,150,105,.25) !important}
.wrap .guide-title{color:var(--text) !important}
.wrap .guide-sub{color:var(--text2) !important}
.wrap .step{background:var(--surface2) !important;border-color:var(--border) !important}
.wrap .step.done{background:var(--emerald-bg) !important;border-color:var(--emerald-bdr) !important}
.wrap .step-t{color:var(--text) !important}
.wrap .step.done .step-t{color:var(--emerald) !important}
.wrap .step-d{color:var(--text2) !important}
.wrap .step-d strong{color:var(--text) !important}
.wrap .step-tip{background:var(--violet-bg) !important;color:var(--violet2) !important;border-color:var(--violet-bdr) !important}
.wrap .plan{background:#ffffff !important;border-color:var(--border2) !important}
.wrap .plan:hover{border-color:var(--violet-bdr) !important}
.wrap .plan.sel{border-color:var(--violet) !important;background:var(--violet-bg) !important}
.wrap .plan-d{color:var(--text) !important}
.wrap .fl{color:var(--text2) !important}
.wrap .inp{background:#ffffff !important;color:var(--text) !important;border-color:var(--border2) !important}
.wrap .btn-ghost{background:#ffffff !important;color:var(--text2) !important;border-color:var(--border2) !important}
.wrap .tabs{background:var(--surface2) !important;border-color:var(--border) !important}
.wrap .tab{color:var(--text2) !important}
.wrap .tab.active{background:var(--violet-bg) !important;color:var(--violet2) !important}
.wrap .dev{background:var(--surface2) !important;border-color:var(--border) !important}
.wrap .dev-name{color:var(--text) !important}
.wrap .dev-sub{color:var(--text3) !important}
.wrap .dev-code{background:var(--violet-bg) !important;color:var(--violet2) !important;border-color:var(--violet-bdr) !important}
.wrap .dev-empty{color:var(--text3) !important}
.wrap .bg-a{background:var(--emerald-bg) !important;color:var(--emerald) !important}
.wrap .bg-r{background:var(--red-bg) !important;color:var(--red) !important}
.wrap .err{background:var(--red-bg) !important;border-color:var(--red-bdr) !important;color:var(--red) !important}
.wrap .lic-box{background:linear-gradient(135deg,#f0fdf4,#ecfeff) !important;border-color:rgba(5,150,105,.3) !important}
.wrap .lic-lbl{color:var(--text3) !important}
.wrap .lic-info span:last-child,.wrap .lic-next strong{color:var(--text) !important}
.wrap .lic-info span:first-child{color:var(--text2) !important}
.wrap .lic-next{background:var(--emerald-bg) !important;border-color:var(--emerald-bdr) !important;color:var(--emerald) !important}
.wrap .hero p,.wrap .hero-back{color:var(--text2) !important}