/* =====================================================================
   Hoply — Skin override v4 para Support Board /account/
   Sistema 1:1 con landing.css v7 (Inter + coral + soft shadows)
   ✦ Login/registro: card centrada premium con mucho aire
   ✦ Dashboard cliente: sidebar refinada + content con jerarquía clara
   ✦ Borrar todo sentimiento de "AI básico" — minimalista pulido
   ===================================================================== */

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

:root {
  /* ===== MISMA paleta que landing v7 ===== */
  --h-coral:          #FF6B4A;
  --h-coral-hover:    #E55838;
  --h-coral-pressed:  #C2410C;
  --h-coral-border:   #E04F2D;
  --h-coral-tint:     rgba(255, 107, 74, 0.10);
  --h-coral-tint-2:   rgba(255, 107, 74, 0.16);
  --h-coral-glow:     rgba(255, 107, 74, 0.22);

  --h-ink-900: #0c111c;
  --h-ink-800: #161c2c;
  --h-ink-700: #242f47;
  --h-ink-600: #344055;
  --h-ink-500: #404968;
  --h-ink-400: #5d6b98;
  --h-ink-300: #7d89b0;
  --h-ink-200: #a0aec0;

  --h-border:        #eaecf5;
  --h-border-strong: #dcdfea;
  --h-surface:       #ffffff;
  --h-surface-2:     #fcfcfd;
  --h-surface-3:     #f7f8fa;
  --h-surface-input: #f8f8fc;

  --h-success: #16a34a;
  --h-success-tint: rgba(22,163,74,0.08);
  --h-warn: #ea580c;
  --h-error:   #dc2626;
  --h-error-tint: rgba(220,38,38,0.06);

  --h-shadow-xs:  0 1px 2px rgba(12,17,28,0.04);
  --h-shadow-sm:  0 2px 4px rgba(12,17,28,0.05), 0 1px 2px rgba(12,17,28,0.04);
  --h-shadow:     0 8px 16px rgba(12,17,28,0.07), 0 3px 6px rgba(12,17,28,0.05);
  --h-shadow-lg:  0 16px 40px rgba(12,17,28,0.10), 0 4px 8px rgba(12,17,28,0.05);
  --h-shadow-xl:  0 24px 64px rgba(12,17,28,0.10), 0 8px 16px rgba(12,17,28,0.05);
  --h-ring:       0 0 0 3px var(--h-coral-glow);

  --h-r-sm:  8px;
  --h-r:    10px;
  --h-r-md: 12px;
  --h-r-lg: 16px;
  --h-r-xl: 20px;
  --h-r-2xl: 24px;
  --h-r-pill: 999px;

  --h-e: cubic-bezier(0.22, 1, 0.36, 1);
  --h-e-snap: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   BASE — tipografía global, antialias, fuente Inter
   ============================================================ */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--h-ink-700) !important;
  background: var(--h-surface) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'cv11', 'ss01' !important;
}
body {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

h1, h2, h3, h4 {
  font-family: 'Inter Display', 'Inter', sans-serif !important;
  color: var(--h-ink-900) !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}
h1 { font-size: 32px !important; line-height: 1.1 !important; }
h2 { font-size: 24px !important; line-height: 1.2 !important; }
h3 { font-size: 17px !important; line-height: 1.3 !important; letter-spacing: -0.015em !important; }
h4 { font-size: 14px !important; font-weight: 600 !important; }
p  { color: var(--h-ink-500); }

a {
  color: var(--h-coral);
  text-decoration: none;
  transition: color .15s var(--h-e);
}
a:hover { color: var(--h-coral-hover); }
::selection { background: var(--h-coral); color: #fff; }

/* ============================================================
   LOGIN / REGISTRO / RESET PASSWORD
   ============================================================ */

/* Solo en login pages el body se vuelve grid centrado.
   Detectamos por presencia de .sb-cloud-box.active */
body:has(> .sb-cloud-box.active),
body:has(> .sb-registration-box),
body:has(> .sb-login-box.sb-cloud-box) {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 48px 20px !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--h-coral-tint) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(255,255,255,0.6) 50%),
    radial-gradient(circle, var(--h-border) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--h-surface) !important;
}

/* SÓLO mostrar la box activa */
.sb-cloud-box.sb-admin-box {
  display: none !important;
}
.sb-cloud-box.sb-admin-box.active {
  display: flex !important;
  flex-direction: column !important;
}

/* La tarjeta del formulario */
.sb-cloud-box.sb-admin-box.active {
  background: var(--h-surface) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-r-2xl) !important;
  box-shadow: var(--h-shadow-xl) !important;
  padding: 48px 44px !important;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 !important;
  position: relative !important;
}

/* sb-info al inicio del card — vacío en login normal, lo escondemos si no tiene contenido */
.sb-cloud-box.sb-admin-box.active > .sb-info {
  display: none !important;
}
.sb-cloud-box.sb-admin-box.active > .sb-info:not(:empty) {
  display: block !important;
  margin-bottom: 16px !important;
  padding: 12px 14px !important;
  background: rgba(22,163,74,0.06) !important;
  border: 1px solid rgba(22,163,74,0.2) !important;
  color: var(--h-success) !important;
  font-size: 13.5px !important;
  border-radius: var(--h-r) !important;
  text-align: center !important;
}

/* Top bar dentro del card: logo + título + subtítulo */
.sb-cloud-box.sb-admin-box.active > .sb-top-bar {
  text-align: center !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  height: auto !important;
  display: block !important;
}
.sb-cloud-box.sb-admin-box.active > .sb-top-bar img {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 24px !important;
  display: block !important;
  border-radius: var(--h-r-lg) !important;
  box-shadow:
    0 8px 20px rgba(255,107,74,0.18),
    0 2px 4px rgba(0,0,0,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.4) !important;
}
.sb-cloud-box.sb-admin-box.active > .sb-top-bar .sb-title {
  font-family: 'Inter Display', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--h-ink-900) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 10px !important;
  line-height: 1.15 !important;
  display: block !important;
}
.sb-cloud-box.sb-admin-box.active > .sb-top-bar .sb-text {
  color: var(--h-ink-500) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  display: block !important;
  max-width: 340px !important;
  margin: 0 auto !important;
}

/* Cuerpo del formulario */
.sb-cloud-box.sb-admin-box.active > .sb-main {
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Cada input */
.sb-cloud-box.sb-admin-box.active .sb-input {
  margin-bottom: 16px !important;
  position: relative !important;
}
.sb-cloud-box.sb-admin-box.active .sb-input > span {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--h-ink-700) !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
.sb-cloud-box.sb-admin-box.active .sb-input > input {
  width: 100% !important;
  height: 48px !important;
  background: var(--h-surface-input) !important;
  border: 1px solid var(--h-border-strong) !important;
  border-radius: var(--h-r-md) !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--h-ink-900) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  line-height: 48px !important;
  transition: border-color .15s var(--h-e), box-shadow .15s var(--h-e), background .15s var(--h-e) !important;
  box-sizing: border-box !important;
  outline: none !important;
}
.sb-cloud-box.sb-admin-box.active .sb-input > input:hover {
  border-color: var(--h-ink-300) !important;
}
.sb-cloud-box.sb-admin-box.active .sb-input > input:focus {
  border-color: var(--h-coral) !important;
  background: var(--h-surface) !important;
  box-shadow: var(--h-ring) !important;
}
.sb-cloud-box.sb-admin-box.active .sb-input > input[data-error="true"] {
  border-color: var(--h-error) !important;
  background: var(--h-error-tint) !important;
}

/* Forgot password link — encima del botón */
.sb-cloud-box.sb-admin-box.active > .sb-main > .sb-text.btn-reset-password {
  font-size: 13.5px !important;
  color: var(--h-coral) !important;
  text-align: right !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  margin: 4px 0 16px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  width: auto !important;
  align-self: flex-end !important;
}
.sb-cloud-box.sb-admin-box.active > .sb-main > .sb-text.btn-reset-password:hover {
  color: var(--h-coral-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Cancel link en reset password */
.sb-cloud-box.sb-admin-box.active .btn-cancel-reset-password {
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  align-self: stretch !important;
}

/* Sección bottom: botón + links de switch */
.sb-cloud-box.sb-admin-box.active .sb-bottom {
  margin-top: 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Botón principal — glassy coral igual que landing */
.sb-cloud-box.sb-admin-box.active .sb-btn,
.sb-cloud-box.sb-admin-box.active .btn-login,
.sb-cloud-box.sb-admin-box.active .btn-register,
.sb-cloud-box.sb-admin-box.active .btn-reset-password.sb-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), var(--h-coral) !important;
  border: 1px solid var(--h-coral-border) !important;
  border-radius: var(--h-r-md) !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.1px !important;
  padding: 14px 22px !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: background-color .15s linear, border-color .15s linear, box-shadow .15s linear, transform .1s linear !important;
  margin: 16px 0 !important;
}
.sb-cloud-box.sb-admin-box.active .sb-btn:hover,
.sb-cloud-box.sb-admin-box.active .btn-login:hover,
.sb-cloud-box.sb-admin-box.active .btn-register:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), var(--h-coral-hover) !important;
  border-color: var(--h-coral-pressed) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26), 0 8px 20px rgba(255,107,74,0.32) !important;
  transform: translateY(-1px);
}
.sb-cloud-box.sb-admin-box.active .sb-btn:active,
.sb-cloud-box.sb-admin-box.active .btn-login:active,
.sb-cloud-box.sb-admin-box.active .btn-register:active {
  transform: translateY(0);
}

/* Links inferiores ("Need new account?" / "Sign up free") */
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text {
  display: inline-block !important;
  font-size: 14px !important;
  color: var(--h-ink-500) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 4px !important;
  margin: 0 !important;
  height: auto !important;
  cursor: default !important;
}
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.btn-registration-box,
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.btn-login-box,
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.sb-btn-login-box,
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.sb-btn-register-box {
  color: var(--h-coral) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.btn-registration-box:hover,
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.btn-login-box:hover,
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-text.sb-btn-login-box:hover {
  color: var(--h-coral-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* "Need new account?" + "Sign up free" en la misma línea */
.sb-cloud-box.sb-admin-box.active .sb-bottom {
  margin-top: 4px !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
}
.sb-cloud-box.sb-admin-box.active .sb-bottom > .sb-btn {
  flex-basis: 100% !important;
}

/* Error area */
.sb-cloud-box.sb-admin-box.active .sb-errors-area {
  background: var(--h-error-tint) !important;
  border: 1px solid rgba(220,38,38,0.2) !important;
  color: var(--h-error) !important;
  padding: 12px 14px !important;
  border-radius: var(--h-r) !important;
  margin-top: 16px !important;
  font-size: 13.5px !important;
  text-align: center !important;
  line-height: 1.4 !important;
}
.sb-cloud-box.sb-admin-box.active .sb-errors-area:empty {
  display: none !important;
}

/* Loading screen al registrar */
.sb-cloud-box.sb-admin-box.active .loading-screen {
  text-align: center !important;
  padding: 48px 20px !important;
}
.sb-cloud-box.sb-admin-box.active .loading-screen p {
  margin-top: 18px !important;
  color: var(--h-ink-500) !important;
  font-size: 14.5px !important;
}

/* Texto de TOS / privacy / copyright al pie del card.
   Si Support Board lo inyecta como <p> dentro del card, forzar al pie pequeño. */
.sb-cloud-box.sb-admin-box.active > p,
.sb-cloud-box.sb-admin-box.active .sb-tos,
.sb-cloud-box.sb-admin-box.active .sb-privacy {
  text-align: center !important;
  font-size: 11.5px !important;
  color: var(--h-ink-300) !important;
  line-height: 1.5 !important;
  margin: 24px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--h-border) !important;
  width: 100% !important;
  position: static !important;
  display: block !important;
  background: transparent !important;
  float: none !important;
}
.sb-cloud-box.sb-admin-box.active > p a,
.sb-cloud-box.sb-admin-box.active .sb-tos a,
.sb-cloud-box.sb-admin-box.active .sb-privacy a {
  color: var(--h-ink-500) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--h-border-strong) !important;
}
.sb-cloud-box.sb-admin-box.active > p a:hover,
.sb-cloud-box.sb-admin-box.active .sb-tos a:hover {
  color: var(--h-coral) !important;
  text-decoration-color: var(--h-coral) !important;
}

/* ============================================================
   DASHBOARD CLIENTE (post-login)
   ============================================================ */

/* Top header — barra fina con logo + acción */
.sb-top-bar:not(.sb-cloud-box .sb-top-bar) {
  background: var(--h-surface) !important;
  border-bottom: 1px solid var(--h-border) !important;
  padding: 18px 36px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  background: rgba(255,255,255,0.92) !important;
}
.sb-top-bar h2 {
  font-family: 'Inter Display', sans-serif !important;
  font-size: 19px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--h-ink-900) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.sb-top-bar h2 img {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--h-r-sm) !important;
  box-shadow: 0 2px 8px rgba(255,107,74,0.18), inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* Botón Dashboard arriba derecha */
.sb-btn-dashboard {
  background: var(--h-ink-900) !important;
  color: #fff !important;
  border: 1px solid var(--h-ink-900) !important;
  border-radius: var(--h-r) !important;
  padding: 10px 18px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background-color .15s linear, border-color .15s linear, transform .1s linear, box-shadow .15s linear !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.01em !important;
}
.sb-btn-dashboard:hover {
  background: var(--h-ink-800) !important;
  border-color: var(--h-ink-800) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12,17,28,0.2);
}
.sb-btn-dashboard:active { transform: translateY(0); }

/* Layout principal: sidebar + content */
.sb-tab {
  background: var(--h-surface) !important;
  display: flex !important;
}
.sb-nav {
  background: var(--h-surface-2) !important;
  border-right: 1px solid var(--h-border) !important;
  padding: 32px 16px !important;
  min-width: 280px !important;
  width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 80px);
}
.sb-nav > div:first-child {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--h-ink-300) !important;
  margin: 0 0 16px 14px !important;
  padding: 0 !important;
}
.sb-nav ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.sb-nav ul li {
  position: relative;
  padding: 11px 16px !important;
  border-radius: var(--h-r) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--h-ink-600) !important;
  cursor: pointer !important;
  transition: background-color .15s var(--h-e), color .15s var(--h-e) !important;
  line-height: 1.4 !important;
  list-style: none !important;
}
.sb-nav ul li:hover {
  background: var(--h-surface) !important;
  color: var(--h-ink-900) !important;
}
.sb-nav ul li.sb-active {
  background: var(--h-coral-tint) !important;
  color: var(--h-coral-pressed) !important;
  font-weight: 600 !important;
}
.sb-nav ul li.sb-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--h-coral);
  border-radius: 0 3px 3px 0;
}

/* Help link al pie de la sidebar */
.sb-nav .sb-docs,
.sb-nav .sb-btn-text {
  margin-top: auto !important;
  padding: 12px 16px !important;
  color: var(--h-ink-500) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: var(--h-r) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: color .15s var(--h-e), background-color .15s var(--h-e);
}
.sb-nav .sb-docs:hover,
.sb-nav .sb-btn-text:hover {
  color: var(--h-coral) !important;
  background: var(--h-surface) !important;
}

/* Logout link */
.sb-nav ul li[id*="logout"],
.sb-nav ul li[id*="Logout"] {
  margin-top: 4px;
  color: var(--h-ink-500) !important;
}
.sb-nav ul li[id*="logout"]:hover {
  background: var(--h-error-tint) !important;
  color: var(--h-error) !important;
}

/* Content principal */
.sb-content {
  flex: 1 !important;
  padding: 40px 48px !important;
  background: var(--h-surface) !important;
  max-width: none !important;
  min-height: calc(100vh - 80px);
}

/* Títulos dentro del content */
.sb-content h2.addons-title {
  font-family: 'Inter Display', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--h-ink-900) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}
.sb-content h2.addons-title.first-title { margin-top: 0 !important; }
.sb-content h2.addons-title:not(.first-title) {
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--h-border) !important;
}
.sb-content > h2.addons-title.first-title:first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}
.sb-content p {
  color: var(--h-ink-500) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  max-width: 640px !important;
}

/* Settings (input + label + descripción) */
.sb-content .sb-setting {
  background: var(--h-surface) !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-r-md) !important;
  padding: 16px !important;
  margin: 14px 0 !important;
}

/* Inputs / textareas del content */
.sb-content input,
.sb-content textarea {
  background: var(--h-surface-input) !important;
  border: 1px solid var(--h-border-strong) !important;
  border-radius: var(--h-r) !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--h-ink-900) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .15s var(--h-e), box-shadow .15s var(--h-e), background .15s var(--h-e) !important;
  outline: none !important;
}
.sb-content input:hover,
.sb-content textarea:hover {
  border-color: var(--h-ink-300) !important;
}
.sb-content input:focus,
.sb-content textarea:focus {
  border-color: var(--h-coral) !important;
  background: var(--h-surface) !important;
  box-shadow: var(--h-ring) !important;
}

/* Textarea del embed code: estilo terminal oscuro */
.sb-content textarea#embed-code,
.sb-content textarea[readonly] {
  background: var(--h-ink-900) !important;
  border: 1px solid var(--h-ink-800) !important;
  color: rgba(255,255,255,0.92) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  min-height: 100px !important;
  padding: 16px !important;
  border-radius: var(--h-r-md) !important;
  resize: none !important;
  font-weight: 400 !important;
}
.sb-content textarea#embed-code:focus,
.sb-content textarea[readonly]:focus {
  border-color: var(--h-coral) !important;
  background: var(--h-ink-900) !important;
  box-shadow: var(--h-ring) !important;
}

/* Direct link / API token inputs son readonly y deben verse como display */
.sb-content .sb-direct-link input,
.sb-content input[readonly] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  background: var(--h-surface-2) !important;
  color: var(--h-ink-700) !important;
  cursor: pointer !important;
}
.sb-content .sb-direct-link input:hover,
.sb-content input[readonly]:hover {
  background: var(--h-surface-3) !important;
  border-color: var(--h-coral) !important;
}

/* Botones dentro del content */
.sb-content .sb-btn:not(.sb-btn-text):not(.sb-btn-dashboard),
.sb-tab .sb-btn:not(.sb-btn-dashboard):not(.sb-btn-text) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)), var(--h-coral) !important;
  border: 1px solid var(--h-coral-border) !important;
  border-radius: var(--h-r) !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  height: auto !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: background-color .15s linear, border-color .15s linear, transform .1s linear, box-shadow .15s linear !important;
}
.sb-content .sb-btn:not(.sb-btn-text):not(.sb-btn-dashboard):hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0)), var(--h-coral-hover) !important;
  border-color: var(--h-coral-pressed) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26), 0 8px 20px rgba(255,107,74,0.32) !important;
  transform: translateY(-1px);
}
.sb-content .sb-btn:not(.sb-btn-text):not(.sb-btn-dashboard):active {
  transform: translateY(0);
}

/* Variante ghost (sb-btn-text) */
.sb-content .sb-btn.sb-btn-text,
.sb-content .sb-btn-text {
  background: var(--h-surface) !important;
  border: 1px solid var(--h-border-strong) !important;
  color: var(--h-ink-700) !important;
  box-shadow: none !important;
  padding: 10px 18px !important;
  border-radius: var(--h-r) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.sb-content .sb-btn.sb-btn-text:hover,
.sb-content .sb-btn-text:hover {
  background: var(--h-surface-2) !important;
  border-color: var(--h-ink-300) !important;
  color: var(--h-ink-900) !important;
}

/* Tablas (Invoices, Payments) */
.sb-content .sb-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-r-md) !important;
  overflow: hidden !important;
  margin-top: 20px !important;
  background: var(--h-surface) !important;
}
.sb-content .sb-table th,
.sb-content .sb-table td {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--h-border) !important;
  font-size: 13.5px !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.sb-content .sb-table tr:last-child td {
  border-bottom: 0 !important;
}
.sb-content .sb-table tbody tr {
  transition: background-color .15s var(--h-e);
}
.sb-content .sb-table tbody tr:hover {
  background: var(--h-surface-2) !important;
}
.sb-content .sb-table th {
  background: var(--h-surface-2) !important;
  color: var(--h-ink-500) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px !important;
  border-bottom: 1px solid var(--h-border-strong) !important;
}
.sb-content .sb-table tbody:empty + tbody::before,
.sb-content .sb-table tbody:empty::after {
  content: 'Sin movimientos todavía';
  display: block;
  padding: 32px;
  text-align: center;
  color: var(--h-ink-300);
  font-size: 13px;
}

/* Box-membership y plans cards */
.box-membership,
.box-maso {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 16px 0 !important;
}

/* Box-black: el "header" del cuadro membership (current usage + plan name) */
.box-black {
  background: linear-gradient(135deg, var(--h-ink-900) 0%, var(--h-ink-800) 100%) !important;
  color: #fff !important;
  border-radius: var(--h-r-lg) !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
.box-black::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  pointer-events: none !important;
}
.box-black::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -30% !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle, var(--h-coral) 0%, transparent 70%) !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
}
.box-black h2 {
  color: rgba(255,255,255,0.65) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 14px !important;
  position: relative !important;
}
.box-black > div { position: relative !important; z-index: 1; }
.box-black .membership-quota,
.box-black .membership-name {
  font-family: 'Inter Display', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
}
.box-black .membership-price {
  display: block !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.65) !important;
  font-weight: 400 !important;
}

/* Plans grid (membership tiers) */
.plans-box,
#plans {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}
.plans-box > div,
[id^="membership-"] {
  position: relative !important;
  border: 1px solid var(--h-border) !important;
  border-radius: var(--h-r-lg) !important;
  padding: 24px 22px !important;
  background: var(--h-surface) !important;
  transition: all .2s var(--h-e) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.plans-box > div:hover,
[id^="membership-"]:hover {
  background: var(--h-surface-2) !important;
  border-color: var(--h-border-strong) !important;
  transform: translateY(-2px);
  box-shadow: var(--h-shadow);
}
[id^="membership-"].sb-active,
.plans-box > div.sb-active {
  border-color: var(--h-coral) !important;
  box-shadow: 0 0 0 3px var(--h-coral-tint), var(--h-shadow) !important;
}

/* Separador HR */
.sb-content hr {
  border: none !important;
  border-top: 1px solid var(--h-border) !important;
  margin: 36px 0 !important;
}

/* Loading spinner */
.sb-loading,
.sb-loading::before,
.sb-loading::after {
  border-color: var(--h-coral) !important;
  border-top-color: transparent !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--h-border-strong); border-radius: 8px; border: 2px solid var(--h-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--h-ink-300); }

/* ============================================================
   SUPER ADMIN (super.php) — mismo lenguaje visual
   ============================================================ */
body.sb-super-area .sb-tab-super,
body.sb-super-area .sb-nav,
body.sb-super-area .sb-content {
  background: var(--h-surface) !important;
}
.sb-super-area .sb-nav ul li.sb-active {
  background: var(--h-coral-tint) !important;
  color: var(--h-coral-pressed) !important;
}

/* ============================================================
   Toasts, alerts, modales
   ============================================================ */
.sb-message-area,
.sb-toast {
  border-radius: var(--h-r-md) !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  border: 1px solid var(--h-border) !important;
  background: var(--h-surface) !important;
  box-shadow: var(--h-shadow-lg) !important;
}
.sb-message-area.sb-success {
  border-color: rgba(22,163,74,0.3) !important;
  background: var(--h-success-tint) !important;
  color: var(--h-success) !important;
}
.sb-message-area.sb-error {
  border-color: rgba(220,38,38,0.3) !important;
  background: var(--h-error-tint) !important;
  color: var(--h-error) !important;
}

.sb-modal {
  background: rgba(12,17,28,0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.sb-modal .sb-content,
.sb-modal-content {
  border-radius: var(--h-r-2xl) !important;
  background: var(--h-surface) !important;
  box-shadow: var(--h-shadow-xl) !important;
  border: 1px solid var(--h-border) !important;
  padding: 32px !important;
  max-width: 480px !important;
  margin: 40px auto !important;
}

/* ============================================================
   Pequeños toques: badges, chips, pills
   ============================================================ */
.sb-badge,
.sb-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: var(--h-r-pill) !important;
  background: var(--h-coral-tint) !important;
  color: var(--h-coral) !important;
  letter-spacing: 0.02em !important;
}
.sb-badge--ok,
.sb-chip--ok {
  background: var(--h-success-tint) !important;
  color: var(--h-success) !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
  .sb-cloud-box.sb-admin-box.active {
    padding: 32px 24px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: var(--h-r-lg) !important;
  }
  .sb-cloud-box.sb-admin-box.active > .sb-top-bar img {
    width: 56px !important;
    height: 56px !important;
  }
  .sb-cloud-box.sb-admin-box.active > .sb-top-bar .sb-title {
    font-size: 24px !important;
  }
  .sb-tab { flex-direction: column !important; }
  .sb-nav {
    min-width: auto !important;
    width: auto !important;
    padding: 16px 12px !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--h-border) !important;
  }
  .sb-nav ul {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 4px !important;
  }
  .sb-nav ul li {
    flex-shrink: 0 !important;
  }
  .sb-content { padding: 28px 20px !important; min-height: auto; }
  .sb-top-bar:not(.sb-cloud-box .sb-top-bar) {
    padding: 14px 20px !important;
    height: 64px !important;
  }
  .box-membership,
  .box-maso {
    grid-template-columns: 1fr !important;
  }
  h1 { font-size: 26px !important; }
  h2 { font-size: 20px !important; }
}