/* DynamicPvP Panel · Ultra Minimal Dark (v2.2)
   Diseño limpio, oscuro, con buen ritmo tipográfico y micro-interacciones.
   Incluye: navbar/footers glassy, grid fluido, tablas sticky, inputs, botones,
   toasts/flash, badges, y utilidades. */

:root{
  /* Fondo y capas */
  --bg-0:#07090c;
  --bg-1:#0a0e14;
  --bg-2:#0d121a;
  --bg-3:#111826;

  /* Bordes/Elevación */
  --line:#1e2a3f;
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 20px 60px rgba(0,0,0,.5);
  --blur:10px;

  /* Texto */
  --text-0:#f2f5fa;
  --text-1:#cfd7e6;
  --text-2:#9cadc7;

  /* Acentos */
  --accent:#5b8cff;
  --accent-2:#8a7dff;
  --accent-3:#3bd3c8;

  /* Estados */
  --ok:#2adb7b; --warn:#f8b24d; --danger:#ff5d5d;

  /* Radios */
  --radius-xl:22px; --radius-lg:16px; --radius:12px; --radius-sm:10px;

  /* Tipografía */
  --font: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
  --fs-1:clamp(14px, .9vw + 10px, 16px);
  --fs-h1:clamp(26px, 2.4vw + 8px, 38px);
  --fs-h2:clamp(18px, 1.2vw + 10px, 22px);
  --fs-h3:clamp(16px, 1vw + 8px, 18px);

  /* Espacios */
  --space:16px; --space-lg:20px; --space-xl:28px;

  /* Tiempo */
  --t-fast:.18s; --t-med:.28s; --t-slow:.6s;
}

/* Reset suave */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font:var(--fs-1)/1.55 var(--font);
  color:var(--text-0);
  background:
    radial-gradient(1200px 600px at 80% -10%, #0e1524 0%, transparent 60%),
    linear-gradient(140deg,var(--bg-1),var(--bg-0));
}

img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.95}
button{font:inherit}

/* Accesibilidad: focus visible */
:where(a,button,input,select,textarea){outline:none}
:where(a,button,input,select,textarea):focus-visible{
  box-shadow:0 0 0 3px #2b3f6a,0 0 0 5px #1a2741;border-radius:10px
}

/* Scrollbar sutil */
*{scrollbar-width:thin;scrollbar-color:#2b3954 transparent}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#2b3954;border-radius:16px}

/* Contenedores */
.shell{min-height:100svh;display:flex;flex-direction:column}
.container{max-width:1280px;margin:0 auto;padding:var(--space-xl) var(--space)}

/* Navbar */
.navbar{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(var(--blur));
  background:linear-gradient(180deg,rgba(17,24,38,.78),rgba(13,18,26,.52));
  border-bottom:1px solid var(--line)
}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand .dot{width:12px;height:12px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#9ab6ff,#4d6bff)}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav a{color:var(--text-1);padding:8px 12px;border-radius:12px;border:1px solid transparent;position:relative}
.nav a:hover{border-color:#263555;background:#0f1523}
.nav a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px
}

/* Footer */
.footer{
  margin-top:auto;border-top:1px solid var(--line);
  backdrop-filter:blur(var(--blur));
  background:linear-gradient(0deg,rgba(17,24,38,.78),rgba(13,18,26,.52))
}
.footer-inner{padding:14px 18px;color:var(--text-2);font-size:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Tipografía de títulos */
.h1{font-size:var(--fs-h1);margin:0 0 6px 0;letter-spacing:.2px}
.h2{font-size:var(--fs-h2);margin:0 0 6px 0;color:#e5eaf5}
.h3{font-size:var(--fs-h3);margin:0 0 6px 0}
.muted{color:var(--text-2)}
.lead{color:#cfd7e6;max-width:68ch}

/* Cards */
.card{
  background:linear-gradient(180deg,rgba(15,20,30,.6),rgba(15,20,30,.45));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  padding:var(--space-lg);
  transition:transform var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med)
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#2a3657}

/* Grid fluido */
.grid{display:grid;gap:var(--space-lg)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

/* Rows utilitarias */
.row{display:grid;gap:12px}
.row.cols-2{grid-template-columns:repeat(2,1fr)}
.stack{display:flex;flex-direction:column;gap:10px}

/* Inputs */
.input,select,textarea{
  width:100%;padding:12px 14px;border-radius:14px;
  background:linear-gradient(180deg,#0e1420,#0b0f19);
  border:1px solid var(--line);color:var(--text-0);
  transition:border-color var(--t-fast), box-shadow var(--t-fast)
}
.input::placeholder{color:#7e8ca7}
.input:focus{border-color:#364a71;box-shadow:0 0 0 4px rgba(91,140,255,.12)}
.input.error{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,93,93,.12)}
input[type="color"].input{padding:8px 6px;height:44px}

/* Botones */
.btn{
  --b:#2a3755;--bg:#141b2a;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--b);
  background:linear-gradient(180deg,var(--bg),#101722);
  color:var(--text-0);cursor:pointer;
  transition:transform var(--t-fast), filter var(--t-fast), border-color var(--t-fast);
  position:relative;overflow:hidden
}
.btn:hover{filter:brightness(1.05);border-color:#3a4f7d}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.primary{--bg:#2e58ff;--b:#2e58ff;background:linear-gradient(180deg,#2e58ff,#2748d6)}
.btn.ok{--bg:#22c55e;--b:#22c55e;background:linear-gradient(180deg,#22c55e,#1ea451)}
.btn.warn{--bg:#f59e0b;--b:#f59e0b;background:linear-gradient(180deg,#f59e0b,#cb7f0a)}
.btn.danger{--bg:#ef4444;--b:#ef4444;background:linear-gradient(180deg,#ef4444,#c73535)}
.btn.ghost{background:transparent;border-color:#2a3755}

/* Ripple */
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.22);animation:ripple .6s linear}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Badges/Chips */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  background:#0f1523;border:1px solid #223052;border-radius:999px;
  color:#d6def0;font-size:12px;white-space:nowrap
}

/* Flash/Toast */
.flash{
  background:linear-gradient(180deg,#0f1930,#0c1426);
  border:1px solid #2b3a60;color:#cfe0ff;border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow-1);margin:8px 0
}

/* Tablas */
.table-wrap{overflow:auto;border-radius:var(--radius-lg);border:1px solid var(--line)}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px}
.table thead th{
  position:sticky;top:0;background:#0f1523;color:#b9c3d7;
  text-align:left;font-weight:600;padding:12px;border-bottom:1px solid var(--line);z-index:1
}
.table tbody tr{background:#0e1420}
.table td{padding:12px;border-bottom:1px solid #142038}
.table tr:last-child td{border-bottom:0}
.table td:first-child,.table th:first-child{padding-left:16px}
.table td:last-child,.table th:last-child{padding-right:16px}

/* Grid de permisos */
.perm-grid{
  display:grid;
  grid-template-columns:minmax(200px,1fr) 120px 120px 120px 120px;
  gap:10px;align-items:center
}
@media (max-width:880px){
  .perm-grid{grid-template-columns:1fr 80px 80px 80px 80px}
}

/* Utilidades varias */
.center{display:flex;align-items:center;justify-content:center}
.hide{display:none!important}

/* Motion seguro */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}