/* ════════════════════════════════════════════
   RACKZEEN · Panel privado — estilos
   Navy abismal + dorado cobre (coherente con la web)
   ════════════════════════════════════════════ */
:root{
  --bg:#060b14; --bg2:#0a1120; --bg3:#0e1626;
  --line:rgba(149,178,217,.12); --line2:rgba(149,178,217,.2);
  --ink:#eaf1fb; --ink2:#aebcd2; --ink3:#7e8ba6; --ink4:#5a6580;
  --gold:#c8a14a; --gold-light:#f4d57a; --gold-deep:#b8860b;
  --ok:#5fd39a; --hot:#ff8a6a; --err:#f87171;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--ink);
  min-height:100vh; -webkit-font-smoothing:antialiased; position:relative;
}

/* ── Fondo estelar (canvas + capas) — login y panel ── */
.sky{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.sky-base{ position:absolute; inset:0; background:linear-gradient(180deg,#020812 0%,#05101f 40%,#030a16 100%); }
.sky-neb{ position:absolute; inset:0; opacity:.72;
  background:radial-gradient(55% 45% at 80% 14%,rgba(200,161,74,.18),transparent 60%),
             radial-gradient(65% 55% at 10% 80%,rgba(20,60,120,.24),transparent 62%),
             radial-gradient(40% 40% at 50% 50%,rgba(120,90,30,.10),transparent 70%); }
#bg-stars{ position:absolute; inset:0; width:100%; height:100%; }
.sky-orb{ position:absolute; border-radius:50%; }
.sky-orb.a{ top:-8%; right:-6%; width:46vw; max-width:680px; aspect-ratio:1; filter:blur(14px); opacity:.36;
  background:radial-gradient(circle,rgba(212,175,55,.4),transparent 60%); }
.sky-orb.b{ bottom:-14%; left:-12%; width:38vw; aspect-ratio:1; filter:blur(16px); opacity:.24;
  background:radial-gradient(circle,rgba(20,60,120,.5),transparent 62%); }
.sky-vig{ position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 32%,transparent 48%,rgba(1,5,12,.82) 100%); }
.wrap, .login-wrap, .top{ position:relative; z-index:2; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
a{ color:inherit; }

/* ── Login ── */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }

/* layout split: marca (busto-dúo) + tarjeta */
.login-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; max-width:1080px; margin:0 auto;
  align-items:center; place-items:stretch; }
.login-brand{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:18px; }
.login-duo{ width:100%; max-width:360px; filter:drop-shadow(0 30px 60px rgba(200,161,74,.28)); animation:duoFloat 6s ease-in-out infinite; }
@keyframes duoFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.login-brand-tx{ max-width:380px; }
.login-brand-eye{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--gold-light); text-transform:uppercase; }
.login-brand-h{ font-size:1.7rem; line-height:1.2; letter-spacing:-.02em; margin:12px 0 10px; color:#fff; }
.login-brand-h em{ font-style:normal; background:linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-brand-p{ font-size:13.5px; color:var(--ink3); line-height:1.55; }
@media (max-width:840px){
  .login-split{ grid-template-columns:1fr; gap:24px; max-width:420px; }
  .login-brand{ order:-1; }
  .login-duo{ max-width:200px; }
  .login-brand-h{ font-size:1.3rem; }
  .login-brand-p{ display:none; }
}
.login-card{ width:100%; max-width:400px; background:linear-gradient(180deg,rgba(14,22,38,.9),rgba(8,14,26,.95));
  border:1px solid var(--line2); border-radius:20px; padding:38px 32px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  position:relative; overflow:hidden; }
.login-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent); }
.login-logo{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.login-logo .mark{ width:44px; height:44px; display:grid; place-items:center; }
.login-logo .mark img, .login-logo .mark svg{ width:44px; height:44px; }
.login-logo b{ font-size:18px; letter-spacing:.02em; }
.login-sub{ color:var(--ink3); font-size:13px; margin:14px 0 26px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:11px; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:7px; font-family:'JetBrains Mono',monospace; }
.field input{ width:100%; background:var(--bg3); border:1px solid var(--line2); color:var(--ink); padding:12px 14px;
  border-radius:11px; font-size:14px; outline:none; transition:.2s; font-family:inherit; }
.field input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,161,74,.12); }
.btn-gold{ width:100%; border:none; cursor:pointer; padding:13px; border-radius:12px; font-size:14.5px; font-weight:700;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); color:#1a1206; transition:.2s; }
.btn-gold:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.alert{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#fca5a5;
  padding:11px 14px; border-radius:11px; font-size:13px; margin-bottom:18px; }
.login-foot{ margin-top:22px; text-align:center; font-size:11.5px; color:var(--ink4); }

/* ── Topbar ── */
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:14px 24px; background:rgba(8,14,26,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.top .mark{ width:34px; height:34px; display:grid; place-items:center; }
.top .mark img, .top .mark svg{ width:34px; height:34px; }
.top b{ font-size:15px; }
.top .sp{ flex:1; }
.top .who{ font-size:12.5px; color:var(--ink2); }
.top .who span{ color:var(--gold-light); }
.navlink{ font-size:12.5px; color:var(--ink2); text-decoration:none; padding:7px 13px; border-radius:9px; transition:.18s; }
.navlink:hover{ background:rgba(149,178,217,.08); color:var(--ink); }
.navlink.on{ background:rgba(200,161,74,.12); color:var(--gold-light); }
.btn-ghost{ font-size:12.5px; color:var(--ink2); background:transparent; border:1px solid var(--line2);
  padding:7px 14px; border-radius:9px; cursor:pointer; text-decoration:none; transition:.18s; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); }

/* ── Layout ── */
.wrap{ max-width:1340px; margin:0 auto; padding:30px 24px 60px; }
.panel-hero{ display:flex; align-items:center; gap:22px; margin-bottom:26px; }
.panel-hero-duo{ width:96px; height:auto; flex-shrink:0; filter:drop-shadow(0 14px 30px rgba(200,161,74,.3)); }
.page-h{ font-size:1.7rem; letter-spacing:-.02em; margin-bottom:6px; }
.page-h em{ font-style:normal; background:linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-lead{ color:var(--ink3); font-size:14px; }
@media (max-width:560px){ .panel-hero-duo{ width:64px; } .panel-hero{ gap:14px; margin-bottom:20px; } }

/* filtros */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter{ background:rgba(14,22,38,.6); border:1px solid var(--line2); color:var(--ink2); padding:8px 16px;
  border-radius:99px; cursor:pointer; font-size:13px; transition:.18s; display:inline-flex; align-items:center; gap:8px; font-family:inherit; }
.filter:hover{ border-color:var(--gold); color:var(--ink); }
.filter.on{ background:linear-gradient(135deg,rgba(244,213,122,.18),rgba(184,134,11,.12)); border-color:var(--gold); color:var(--gold-light); }
.filter .n{ background:rgba(149,178,217,.12); padding:0 8px; border-radius:99px; font-size:11px; }

/* buscador */
.search-wrap{ position:relative; display:flex; align-items:center; max-width:620px; margin-bottom:10px; }
.search-ic{ position:absolute; left:16px; opacity:.7; font-size:15px; pointer-events:none; }
.search-input{ width:100%; padding:14px 44px 14px 44px; border-radius:13px; font-size:15px; font-family:inherit; color:#fff;
  background:rgba(10,18,32,.65); border:1px solid rgba(200,161,74,.28); outline:none; transition:.2s; }
.search-input::placeholder{ color:var(--ink4); }
.search-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,161,74,.12); }
.search-clear{ position:absolute; right:12px; width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(149,178,217,.14); color:var(--ink2); font-size:12px; }
.search-clear:hover{ background:rgba(200,161,74,.2); color:#fff; }
.count{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink4); margin-bottom:20px; }

/* grid demos */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.card{ text-align:left; background:linear-gradient(180deg,rgba(14,22,38,.7),rgba(8,14,26,.6)); border:1px solid var(--line2);
  border-radius:16px; padding:0 0 18px; cursor:pointer; transition:.2s; color:inherit; text-decoration:none; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.card-thumb{ position:relative; display:block; width:100%; aspect-ratio:16/8.5; overflow:hidden; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.card:hover .card-thumb img{ transform:scale(1.06); }
.card-thumb .pill{ position:absolute; top:11px; right:11px; backdrop-filter:blur(6px); background:rgba(10,18,32,.6); }
.card-top{ display:flex; align-items:center; gap:11px; margin:14px 0 0; padding:0 18px; }
.card-ic{ width:36px; height:36px; flex-shrink:0; border-radius:10px; background:rgba(200,161,74,.1); display:grid; place-items:center; }
.card-ic img{ width:24px; height:24px; }
.pill{ font-size:10px; padding:3px 10px; border-radius:99px; font-family:'JetBrains Mono',monospace; letter-spacing:.03em;
  background:rgba(91,142,201,.12); color:#8fb3e0; }
.pill.chatbot{ background:rgba(95,211,154,.12); color:var(--ok); }
.pill.automatizacion{ background:rgba(200,161,74,.12); color:var(--gold-light); }
.pill.crm{ background:rgba(157,123,216,.14); color:#b89ae8; }
.card-title{ font-size:15px; font-weight:700; color:#fff; line-height:1.25; }
.card-sector{ font-size:11.5px; color:var(--ink4); font-family:'JetBrains Mono',monospace; margin:8px 0 10px; padding:0 18px; }
.card-tag{ font-size:13px; color:var(--ink2); line-height:1.45; flex:1; margin-bottom:14px; padding:0 18px; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.card-av{ display:flex; align-items:center; gap:9px; }
.card-av .a{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); color:#1a1206; }
.card-av .nm{ font-size:11.5px; }
.card-av .nm b{ display:block; color:var(--ink); }
.card-av .nm span{ color:var(--ink4); font-size:10.5px; }
.card-go{ font-size:12px; color:var(--gold-light); }

/* tabla admin */
.panel{ background:rgba(14,22,38,.6); border:1px solid var(--line2); border-radius:16px; padding:22px; margin-bottom:24px; }
.panel h3{ font-size:15px; margin-bottom:16px; display:flex; align-items:center; gap:9px; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:left; color:var(--ink4); font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--line); }
td{ padding:11px 10px; border-bottom:1px solid var(--line); color:var(--ink2); }
td b{ color:#fff; }
.tag{ font-size:10px; padding:2px 8px; border-radius:5px; font-family:'JetBrains Mono',monospace; }
.tag.admin{ background:rgba(200,161,74,.14); color:var(--gold-light); }
.tag.viewer{ background:rgba(91,142,201,.12); color:#8fb3e0; }
.row-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px; }
.row-form .field{ margin:0; flex:1; min-width:140px; }
.btn-sm{ background:linear-gradient(135deg,var(--gold-light),var(--gold-deep)); color:#1a1206; border:none;
  padding:11px 18px; border-radius:10px; font-weight:700; cursor:pointer; font-size:13px; }
.btn-del{ background:transparent; border:1px solid rgba(248,113,113,.3); color:#fca5a5; padding:5px 11px;
  border-radius:8px; cursor:pointer; font-size:12px; }
.btn-del:hover{ background:rgba(248,113,113,.1); }
.empty{ color:var(--ink4); font-size:13px; padding:20px; text-align:center; }

/* modal demo */
.modal-bg{ position:fixed; inset:0; z-index:50; background:rgba(4,8,15,.8); backdrop-filter:blur(6px); display:none; place-items:center; padding:24px; }
.modal-bg.on{ display:grid; }
.modal{ width:100%; max-width:560px; max-height:90vh; overflow:auto; background:linear-gradient(180deg,#0e1626,#0a1120);
  border:1px solid var(--line2); border-radius:18px; padding:26px; position:relative; }
.modal.wide{ max-width:1180px; }
.modal-x{ position:absolute; top:16px; right:16px; background:rgba(149,178,217,.1); border:none; color:var(--ink2);
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:18px; }
.modal-frame{ width:100%; border:none; border-radius:12px; background:#060b14; min-height:520px; }
@media (max-width:560px){ .wrap{ padding:20px 14px 50px; } .top{ padding:12px 14px; gap:10px; } .top .who{ display:none; } }