/* ==========================================================================
   QHItech — GLOBAL PANELS CSS (public) — v1
   Ruta: /assets/css/panels.css
   Objetivo:
   - Design system de “paneles” (portal cliente) en la web pública.
   - Inspirado en master-ui.css (qhi-*) pero adaptado a LIGHT theme (styles.css).
   - Sin frameworks. Sin @import. Listo para overrides por panel al final.
   ========================================================================== */

:root{
  /* Reutilizamos variables del GLOBAL site (styles.css) cuando existan */
  --p-bg: rgba(255,255,255,.0);
  --p-panel: rgba(255,255,255,.78);
  --p-panel-solid: #ffffff;
  --p-panel-2: rgba(245,248,255,.88);

  --p-border: var(--line, rgba(11,27,43,.10));
  --p-border-2: rgba(11,27,43,.14);

  --p-text: var(--text, #0B1B2B);
  --p-muted: var(--muted, #4E6078);
  --p-muted-2: var(--muted2, #6B7C93);

  --p-brand1: var(--brand1, #2F6BFF);
  --p-brand2: var(--brand2, #37D6FF);

  --p-ok: var(--ok, #0FB981);
  --p-warn: var(--warn, #E5A600);
  --p-err: #ef4444;

  --p-shadow: var(--shadow, 0 18px 50px rgba(11,27,43,.12));
  --p-shadow2: var(--shadow2, 0 10px 26px rgba(11,27,43,.10));

  --p-r-xl: 22px;
  --p-r-lg: 18px;
  --p-r-md: 14px;
  --p-r-sm: 12px;

  --p-gap: 16px;
}

.page-client-services,
.page-client-home,
.page-client-catalog,
.page-client-game-servers,
.page-client-web-site-admin,
.page-client-atomiq-admin,
.page-client-admin{
  /* “panel pages” */
  color: var(--p-text);
}

.muted{ color: var(--p-muted); }

/* ==========================================================================
   Panel wrapper + hero
   ========================================================================== */

.qhi-panel-wrap{
  margin-top: 10px;
}

.qhi-panel-hero{
  border: 1px solid var(--p-border);
  background:
    radial-gradient(900px 360px at 20% 12%, rgba(47,107,255,.18), transparent 62%),
    radial-gradient(900px 360px at 82% 0%, rgba(55,214,255,.14), transparent 62%),
    rgba(255,255,255,.70);
  backdrop-filter: blur(12px);
  border-radius: var(--p-r-xl);
  padding: 18px 18px 16px;
  box-shadow: var(--p-shadow2);
  overflow: hidden;
}

.qhi-panel-kicker{
  display:inline-block;
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--p-muted);
  background: rgba(47,107,255,.06);
  border: 1px solid rgba(47,107,255,.14);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.qhi-panel-title{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.02em;
}

.qhi-panel-subtitle{
  margin: 8px 0 0;
  color: var(--p-muted);
  max-width: 80ch;
}

/* ==========================================================================
   Nav del portal (links + botón “Salir”)
   ========================================================================== */

.qhi-panel-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--p-border);
}

.qhi-panel-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--p-muted);
  border: 1px solid transparent;
  background: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.qhi-panel-nav a:hover{
  color: var(--p-text);
  border-color: rgba(47,107,255,.20);
  background: rgba(47,107,255,.06);
  box-shadow: 0 8px 18px rgba(47,107,255,.10);
}

.qhi-panel-nav a.is-active{
  color: var(--p-text);
  border-color: rgba(47,107,255,.30);
  background: linear-gradient(90deg, rgba(47,107,255,.14), rgba(55,214,255,.10));
  box-shadow: 0 10px 22px rgba(47,107,255,.12);
}

/* Botones (extiende styles.css) */
.btn.ghost{
  border-color: rgba(11,27,43,.14);
  background: rgba(255,255,255,.62);
  box-shadow: 0 8px 18px rgba(11,27,43,.08);
  color: var(--p-text);
}
.btn.ghost:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(47,107,255,.26);
}

/* ==========================================================================
   Acciones del panel
   ========================================================================== */

.qhi-panel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.qhi-panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--p-border);
  background: rgba(255,255,255,.72);
  color: var(--p-text);
  box-shadow: 0 8px 18px rgba(11,27,43,.08);
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none;
}
.qhi-panel-btn:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(47,107,255,.26);
  box-shadow: 0 12px 24px rgba(11,27,43,.10);
}
.qhi-panel-btn:active{ transform: translateY(1px); }

/* ==========================================================================
   Card del panel
   ========================================================================== */

.qhi-panel-card{
  margin-top: 14px;
  border: 1px solid var(--p-border);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-radius: var(--p-r-xl);
  padding: 16px 16px;
  box-shadow: var(--p-shadow);
}

.qhi-panel-card h2{
  margin: 0 0 8px 0;
  font-size: 1.05rem;
}

/* Alert tipo login-note (usado en client-services.html) */
.login-note{
  padding: 12px 12px;
  border-radius: var(--p-r-md);
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: var(--p-text);
  font-size: .9rem;
}
.login-note.is-ok{
  border-color: rgba(15,185,129,.28);
  background: rgba(15,185,129,.10);
}
.login-note.is-error{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}

/* ==========================================================================
   KV blocks (compat con master-ui “qhi-*”)
   ========================================================================== */

.qhi-grid-2cols{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .qhi-grid-2cols{ grid-template-columns: 1fr; }
}

.qhi-kv{
  border: 1px solid rgba(11,27,43,.12);
  background: rgba(255,255,255,.78);
  border-radius: var(--p-r-lg);
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(11,27,43,.08);
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.qhi-kv-label{
  font-size: .82rem;
  color: var(--p-muted);
}

.qhi-kv-value{
  font-size: .95rem;
  font-weight: 700;
  color: var(--p-text);
}

/* ==========================================================================
   Motion safe
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}