/* ============================================================
 * ToolsVPN · public/css/app.css — Digital Armor (aplicativo)
 * Tokens + shell del panel + componentes. Stack: Tailwind CDN
 * cubre utilidades; aquí va lo de marca/identidad y componentes.
 * ============================================================ */
:root{
  --ink:#070914; --ink2:#0c1020; --steel:#11162b;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#cbd5e1; --txt-dim:#64748b; --txt-strong:#f1f5f9;
  --violet:#7c3aed; --magenta:#c026d3; --orange:#ff6a00; --grape:#6a56a5;
  --grad:linear-gradient(100deg,#7c3aed 0%,#c026d3 48%,#ff6a00 100%);
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; --info:#38bdf8;
  --sidebar:266px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--ink); color:var(--txt);
  font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.font-display{ font-family:'Space Grotesk','Inter',sans-serif; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
a{ color:inherit; text-decoration:none; }
[x-cloak]{ display:none!important; }

/* fondo blindado */
.armor{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 45% at 8% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(45% 40% at 95% 8%, rgba(255,106,0,.10), transparent 60%),
    var(--ink); }
.armor::after{ content:""; position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 30% 20%,#000,transparent 80%); }

.grad{ background-image:var(--grad); }
.grad-text{ background-image:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); }

/* layout shell */
.shell{ display:flex; min-height:100vh; }
.sidebar{ width:var(--sidebar); flex-shrink:0; border-right:1px solid var(--line);
  background:rgba(12,16,32,.72); backdrop-filter:blur(12px);
  position:fixed; inset:0 auto 0 0; z-index:40; display:flex; flex-direction:column; }
.main{ flex:1; margin-left:var(--sidebar); min-width:0; }
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 1.5rem; border-bottom:1px solid var(--line);
  background:rgba(7,9,20,.7); backdrop-filter:blur(12px); }
.content{ padding:1.75rem 1.5rem 3rem; max-width:1180px; }
.navitem{ display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:12px;
  color:var(--txt-dim); font-weight:500; font-size:.92rem; transition:.18s; }
.navitem:hover{ color:var(--txt-strong); background:rgba(255,255,255,.04); }
.navitem.active{ color:#fff; background:rgba(124,58,237,.14); }
.navitem.active::before{ content:""; width:3px; height:18px; border-radius:3px; background:var(--grad); margin-left:-.9rem; margin-right:.6rem; }

/* componentes */
.card{ background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:16px; }
.card-h{ padding:1.1rem 1.25rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.card-b{ padding:1.25rem; }
.kpi{ background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.25rem; }
.kpi .n{ font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:700; color:#fff; line-height:1; }
.kpi .l{ font-size:.78rem; color:var(--txt-dim); margin-top:.45rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1.1rem;
  border-radius:11px; font-weight:600; font-size:.9rem; cursor:pointer; border:0; transition:.18s; }
.btn-grad{ background-image:var(--grad); color:#fff; box-shadow:0 10px 28px -12px rgba(192,38,211,.6); }
.btn-grad:hover{ transform:translateY(-1px); box-shadow:0 14px 34px -12px rgba(255,106,0,.6); }
.btn-ghost{ border:1px solid var(--line2); color:var(--txt-strong); background:transparent; }
.btn-ghost:hover{ border-color:rgba(124,58,237,.6); background:rgba(124,58,237,.1); }
.btn-sm{ padding:.4rem .75rem; font-size:.82rem; border-radius:9px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px;
  font-size:.74rem; font-weight:600; border:1px solid transparent; }
.badge .dot{ width:7px; height:7px; border-radius:50%; }
.b-ok{ color:#6ee7b7; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); }
.b-bad{ color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); }
.b-warn{ color:#fcd34d; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); }
.b-info{ color:#7dd3fc; background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.3); }
.b-muted{ color:var(--txt-dim); background:rgba(148,163,184,.1); border-color:var(--line2); }

table.tbl{ width:100%; border-collapse:collapse; }
table.tbl th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-dim); padding:.7rem 1rem; border-bottom:1px solid var(--line); font-weight:600; }
table.tbl td{ padding:.85rem 1rem; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--txt); }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tr:hover td{ background:rgba(255,255,255,.02); }

.input{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:11px;
  padding:.7rem .9rem; color:var(--txt-strong); outline:none; transition:.18s; font-size:.92rem; }
.input:focus{ border-color:rgba(124,58,237,.6); background:rgba(124,58,237,.06); }
.input::placeholder{ color:var(--txt-dim); }
select.input{ color-scheme: dark; -webkit-appearance:auto; appearance:auto; cursor:pointer; }
select.input option, select.input optgroup{ background:#0f172a; color:#fff; }
.label{ font-size:.8rem; color:var(--txt-dim); margin-bottom:.35rem; display:block; }

/* AMC modal + toast */
.amc-ov{ position:fixed; inset:0; z-index:90; background:rgba(3,5,12,.7); backdrop-filter:blur(4px); display:grid; place-items:center; padding:1rem; }
.amc-modal{ width:100%; max-width:440px; background:#0e1326; border:1px solid var(--line2); border-radius:18px; overflow:hidden; }
.amc-toasts{ position:fixed; top:1rem; right:1rem; z-index:100; display:flex; flex-direction:column; gap:.6rem; }
.amc-toast{ display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; border-radius:12px; border:1px solid var(--line2);
  background:#0e1326; color:var(--txt-strong); font-size:.88rem; box-shadow:0 14px 40px -14px rgba(0,0,0,.7); animation:amcIn .25s ease; }
@keyframes amcIn{ from{ opacity:0; transform:translateX(12px); } }
.amc-toast.ok{ border-color:rgba(16,185,129,.4); } .amc-toast.error{ border-color:rgba(239,68,68,.4); }
.amc-toast.warning{ border-color:rgba(245,158,11,.4); } .amc-toast.info{ border-color:rgba(56,189,248,.4); }

@media (max-width:900px){
  .sidebar{ transform:translateX(-100%); transition:.25s; }
  .sidebar.open{ transform:none; }
  .main{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ============================================================
 * RESPONSIVE + filas de edición + autocomplete (v0.4.1)
 * ============================================================ */
.content-wide{ max-width:1720px; margin-inline:auto; }   /* usa el ancho en monitores grandes, centrado y legible */

/* filas de edición de listas (servicios/beneficios/faq) */
.lrow{ display:grid; gap:.5rem; align-items:center; }
.lrow-3{ grid-template-columns:150px 1.2fr 2fr 44px; }
.lrow-2{ grid-template-columns:1.1fr 2fr 44px; align-items:start; }
.lrow .del{ display:grid; place-items:center; }

/* autocomplete */
.ac-wrap{ position:relative; }
.ac-pop{ position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
  background:#0e1326; border:1px solid var(--line2); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8); max-height:380px; overflow-y:auto; }
.ac-item{ display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; cursor:pointer; border-bottom:1px solid var(--line); transition:.12s; }
.ac-item:last-child{ border-bottom:0; }
.ac-item:hover, .ac-item.sel{ background:rgba(124,58,237,.14); }
.ac-av{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:700; flex:none; font-size:.85rem; }
.ac-meta{ min-width:0; flex:1; }
.ac-meta .nm{ color:#fff; font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-meta .em{ color:var(--txt-dim); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* breakpoints */
@media (max-width:1024px){
  .content{ padding:1.3rem 1rem 2.5rem; }
  .topbar{ padding:.8rem 1rem; }
}
@media (max-width:760px){
  .lrow-3, .lrow-2{ grid-template-columns:1fr; }
  .lrow .del{ justify-self:end; width:44px; }
}
@media (max-width:640px){
  .content{ padding:1rem .8rem 2rem; }
  .card-b{ padding:1rem; }
  .card-h{ padding:.9rem 1rem; flex-wrap:wrap; }
  .kpi{ padding:.9rem 1rem; }
  .kpi .n{ font-size:1.6rem; }
  .topbar h1{ font-size:1rem!important; }
  table.tbl th, table.tbl td{ padding:.6rem .65rem; font-size:.84rem; }
}