* {
  box-sizing: border-box;
}

:root {

  color-scheme: dark;

  --bg:
    #0d0c11;

  --sidebar:
    #111016;

  --surface:
    #151419;

  --surface-hover:
    #1a181f;

  --border:
    rgba(255,255,255,.065);

  --border-strong:
    rgba(255,255,255,.10);

  --text:
    #f0edf3;

  --text-soft:
    #aaa4b1;

  --text-muted:
    #77717e;

  --accent:
    #8b5cf6;

  --accent-soft:
    rgba(139,92,246,.12);

}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 80% -10%,
      rgba(139,92,246,.09),
      transparent 30%
    ),
    var(--bg);

  color:
    var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}


/* ============================================================
   APP
============================================================ */

.client-app {

  display: flex;

  min-height: 100vh;

}


/* ============================================================
   SIDEBAR
============================================================ */

.client-sidebar {

  position: fixed;

  inset:
    0 auto 0 0;

  z-index: 100;

  width: 245px;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      #121117 0%,
      #100f14 100%
    );

  border-right:
    1px solid var(--border);

}


/* BRAND */

.sidebar-brand {

  height: 76px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    0 20px;

  border-bottom:
    1px solid var(--border);

}

.sidebar-logo {

  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #9b72ff,
      #7544dc
    );

  color: white;

  font-size: 16px;

  font-weight: 900;

  box-shadow:
    0 7px 22px
    rgba(139,92,246,.22);

}

.sidebar-brand-text strong {

  display: block;

  font-size: 14px;

  font-weight: 850;

}

.sidebar-brand-text span {

  display: block;

  margin-top: 2px;

  color:
    var(--text-muted);

  font-size: 9px;

}


/* NAV */

.client-navigation {

  flex: 1;

  overflow-y: auto;

  padding:
    18px 11px;

}

.nav-section-title {

  margin:
    15px 10px 7px;

  color:
    #5f5967;

  font-size: 8px;

  font-weight: 850;

  letter-spacing:
    .15em;

}

.nav-section-title:first-child {
  margin-top: 0;
}

.client-nav-item {

  position: relative;

  min-height: 40px;

  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    3px 0;

  padding:
    0 11px;

  border:
    1px solid transparent;

  border-radius: 9px;

  color:
    #8b8592;

  text-decoration: none;

  font-size: 11px;

  font-weight: 650;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease;

}

.client-nav-item:hover {

  background:
    rgba(255,255,255,.035);

  color:
    #c8c2ce;

}

.client-nav-item.active {

  background:
    var(--accent-soft);

  border-color:
    rgba(139,92,246,.16);

  color:
    #eee9f6;

}

.client-nav-item.active::before {

  content: "";

  position: absolute;

  left: -1px;

  top: 9px;

  bottom: 9px;

  width: 3px;

  border-radius:
    0 4px 4px 0;

  background:
    var(--accent);

  box-shadow:
    0 0 12px
    rgba(139,92,246,.5);

}

.nav-icon {

  width: 18px;

  display: grid;

  place-items: center;

  color:
    #746d7c;

  font-size: 14px;

}

.client-nav-item.active
.nav-icon {

  color:
    #bba5ff;

}

.nav-soon {

  margin-left: auto;

  padding:
    3px 5px;

  border-radius: 5px;

  background:
    rgba(255,255,255,.035);

  color:
    #625c69;

  font-size: 7px;

}


/* SIDEBAR BOTTOM */

.sidebar-bottom {

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    13px;

  border-top:
    1px solid var(--border);

}

.sidebar-client {

  min-width: 0;

  flex: 1;

  display: flex;

  align-items: center;

  gap: 9px;

}

.sidebar-avatar,
.topbar-avatar {

  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      #30283e,
      #211c2b
    );

  border:
    1px solid
    rgba(255,255,255,.08);

  color:
    #c9b7f3;

  font-size: 11px;

  font-weight: 850;

}

.sidebar-client-info {

  min-width: 0;

}

.sidebar-client-info strong {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 10px;

}

.sidebar-client-info span {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  margin-top: 2px;

  color:
    #67616f;

  font-size: 8px;

}

.sidebar-logout {

  width: 31px;
  height: 31px;

  display: grid;

  place-items: center;

  padding: 0;

  border:
    1px solid var(--border);

  border-radius: 8px;

  background:
    transparent;

  color:
    #77717e;

  cursor: pointer;

}

.sidebar-logout:hover {

  background:
    rgba(239,68,68,.07);

  border-color:
    rgba(239,68,68,.16);

  color:
    #ef8585;

}


/* ============================================================
   MAIN
============================================================ */

.client-main {

  width: calc(100% - 245px);

  min-height: 100vh;

  margin-left: 245px;

}


/* TOPBAR */

.client-topbar {

  position: sticky;

  top: 0;

  z-index: 50;

  height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 28px;

  background:
    rgba(13,12,17,.88);

  border-bottom:
    1px solid var(--border);

  backdrop-filter:
    blur(16px);

}

.topbar-page-title span {

  display: block;

  color:
    #665f6d;

  font-size: 8px;

  font-weight: 850;

  letter-spacing:
    .14em;

}

.topbar-page-title strong {

  display: block;

  margin-top: 3px;

  font-size: 14px;

  font-weight: 800;

}

.topbar-actions {

  display: flex;

  align-items: center;

  gap: 14px;

}

.topbar-action {

  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  color:
    #85808c;

  cursor: pointer;

}

.topbar-user {

  display: flex;

  align-items: center;

  gap: 9px;

}

.topbar-user-info strong {

  display: block;

  font-size: 10px;

}

.topbar-user-info span {

  display: block;

  margin-top: 2px;

  color:
    #69636f;

  font-size: 8px;

}


/* ============================================================
   CONTENT
============================================================ */

.client-content {

  width:
    min(1220px, calc(100% - 56px));

  margin:
    0 auto;

  padding:
    34px 0 60px;

}

.module-page {

  animation:
    moduleIn .25s ease both;

}

@keyframes moduleIn {

  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

.module-header {

  margin-bottom:
    25px;

}

.module-eyebrow {

  color:
    #8d7ca7;

  font-size: 8px;

  font-weight: 850;

  letter-spacing:
    .15em;

}

.module-header h1 {

  margin:
    8px 0 7px;

  font-size: 25px;

  line-height: 1.15;

}

.module-header p {

  max-width: 680px;

  margin: 0;

  color:
    var(--text-muted);

  font-size: 11px;

  line-height: 1.65;

}


/* ============================================================
   DASHBOARD
============================================================ */

.dashboard-stats {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom:
    14px;

}

.dashboard-stat {

  min-height: 91px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    17px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius: 13px;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;

}

.dashboard-stat:hover {

  transform:
    translateY(-1px);

  background:
    var(--surface-hover);

  border-color:
    var(--border-strong);

}

.stat-icon {

  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 10px;

  background:
    var(--accent-soft);

  color:
    #b9a2ff;

  font-size: 14px;

}

.dashboard-stat span {

  display: block;

  color:
    #716b78;

  font-size: 9px;

}

.dashboard-stat strong {

  display: block;

  margin-top: 5px;

  color:
    #eeeaf2;

  font-size: 17px;

  font-weight: 800;

}

.dashboard-columns {

  display: grid;

  grid-template-columns:
    1.35fr 1fr;

  gap: 14px;

}

.module-card {

  min-width: 0;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius: 14px;

  overflow: hidden;

}

.card-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    18px 20px;

  border-bottom:
    1px solid var(--border);

}

.card-heading span {

  color:
    #68616f;

  font-size: 8px;

  font-weight: 850;

  letter-spacing:
    .12em;

}

.card-heading h2 {

  margin:
    5px 0 0;

  font-size: 13px;

}

.card-heading a {

  color:
    #9d86d0;

  text-decoration: none;

  font-size: 9px;

  font-weight: 700;

}

.empty-module {

  min-height: 205px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  padding: 25px;

  text-align: center;

}

.empty-module-icon {

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  margin-bottom: 11px;

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);

  color:
    #736d7a;

}

.empty-module strong {

  font-size: 11px;

}

.empty-module p {

  max-width: 260px;

  margin: 6px 0 0;

  color:
    #625c69;

  font-size: 9px;

  line-height: 1.6;

}


/* ============================================================
   PLACEHOLDER MODULES
============================================================ */

.module-coming-soon {

  min-height: 300px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  padding: 30px;

  text-align: center;

}

.coming-soon-icon {

  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  margin-bottom: 13px;

  border-radius: 15px;

  background:
    var(--accent-soft);

  color:
    #b59dff;

  font-size: 18px;

}

.module-coming-soon h2 {

  margin:
    0 0 7px;

  font-size: 14px;

}

.module-coming-soon p {

  max-width: 420px;

  margin: 0;

  color:
    #68616f;

  font-size: 10px;

  line-height: 1.65;

}


/* ============================================================
   LOADING / ERROR
============================================================ */

.module-loading {

  min-height: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 11px;

  color:
    #69636f;

  font-size: 10px;

}

.loading-spinner {

  width: 23px;
  height: 23px;

  border:
    2px solid
    rgba(255,255,255,.08);

  border-top-color:
    var(--accent);

  border-radius: 50%;

  animation:
    spin .7s linear infinite;

}

@keyframes spin {

  to {
    transform: rotate(360deg);
  }

}

.module-error {

  min-height: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

}

.module-error-icon {

  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  margin-bottom: 12px;

  border-radius: 12px;

  background:
    rgba(239,68,68,.08);

  color:
    #ed8585;

}

.module-error h2 {

  margin:
    0 0 6px;

  font-size: 14px;

}

.module-error p {

  margin:
    0 0 14px;

  color:
    #69636f;

  font-size: 10px;

}

.module-error button {

  padding:
    8px 12px;

  border:
    1px solid var(--border);

  border-radius: 8px;

  background:
    rgba(255,255,255,.035);

  color:
    #aaa4b1;

  cursor: pointer;

  font-size: 9px;

}


/* ============================================================
   MOBILE
============================================================ */

.mobile-menu-button {

  display: none;

  width: 35px;
  height: 35px;

  place-items: center;

  padding: 0;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  color:
    #aaa4b1;

  cursor: pointer;

}

.sidebar-overlay {

  display: none;

}


@media (max-width: 980px) {

  .dashboard-stats {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .dashboard-columns {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 760px) {

  .client-sidebar {

    transform:
      translateX(-100%);

    transition:
      transform .22s ease;

    box-shadow:
      15px 0 45px
      rgba(0,0,0,.35);

  }

  .client-sidebar.mobile-open {

    transform:
      translateX(0);

  }

  .sidebar-overlay {

    position: fixed;

    inset: 0;

    z-index: 90;

    background:
      rgba(0,0,0,.55);

    backdrop-filter:
      blur(2px);

  }

  .sidebar-overlay.visible {

    display: block;

  }

  .client-main {

    width: 100%;

    margin-left: 0;

  }

  .client-topbar {

    height: 66px;

    padding:
      0 16px;

  }

  .mobile-menu-button {

    display: grid;

  }

  .topbar-page-title {

    margin-right: auto;

    margin-left: 12px;

  }

  .topbar-actions {

    gap: 7px;

  }

  .topbar-action {

    display: none;

  }

  .topbar-user-info {

    display: none;

  }

  .client-content {

    width:
      calc(100% - 28px);

    padding:
      25px 0 45px;

  }

  .module-header h1 {

    font-size: 22px;

  }

  .dashboard-stats {

    grid-template-columns: 1fr;

  }

}


@media (max-width: 430px) {

  .sidebar-brand {

    padding:
      0 17px;

  }

  .dashboard-stat {

    min-height: 78px;

    padding:
      14px;

  }

}


/* ============================================================
   CLIENT_SERVICES_MODULE_V1
   ============================================================ */

.client-module {
  width: 100%;
}

.client-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.client-eyebrow {
  margin-bottom: 7px;
  color: #8d8596;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.client-module-title {
  margin: 0;
  color: #f3eff5;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.client-module-description {
  margin: 8px 0 0;
  color: #77717d;
  font-size: 13px;
  line-height: 1.55;
}

.client-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 18px;
  background: #151419;
  text-align: center;
}


.client-state-card[hidden] {
  display: none !important;
}

.client-state-card strong {
  margin-top: 12px;
  color: #f1edf3;
  font-size: 14px;
}

.client-state-card span {
  margin-top: 6px;
  color: #77717d;
  font-size: 12px;
}

.client-state-icon {
  font-size: 28px;
}

.client-state-error {
  border-color: rgba(255,90,90,.15);
}

.client-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.client-service-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 18px;
  background: #151419;
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
  transition: transform .2s ease, border-color .2s ease;
}

.client-service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.11);
}

.client-service-top {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px;
}

.client-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  font-size: 22px;
}

.client-service-heading {
  min-width: 0;
  flex: 1;
}

.client-service-heading h2 {
  overflow: hidden;
  margin: 0;
  color: #f0edf3;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-service-heading p {
  margin: 4px 0 0;
  color: #77717d;
  font-size: 11px;
}

.client-service-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #8b8490;
  font-size: 10px;
  font-weight: 800;
}

.client-service-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #77717d;
}

.client-service-status.active {
  color: #45d98a;
}

.client-service-status.active > span {
  background: #45d98a;
  box-shadow: 0 0 8px rgba(69,217,138,.5);
}

.client-service-status.pending {
  color: #f2b84b;
}

.client-service-status.pending > span {
  background: #f2b84b;
}

.client-service-status.suspended {
  color: #ff7777;
}

.client-service-status.suspended > span {
  background: #ff7777;
}

.client-service-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px 20px;
}

.client-service-detail {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.client-service-detail span {
  display: block;
  margin-bottom: 5px;
  color: #67616d;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.client-service-detail strong {
  display: block;
  overflow: hidden;
  color: #c9c4cd;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-service-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 20px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.client-service-order-label {
  display: block;
  margin-bottom: 3px;
  color: #625d67;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.client-service-footer strong {
  color: #aaa4af;
  font-size: 10px;
}

.client-service-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  background: rgba(139,92,246,.12);
  color: #b69cff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.client-service-button:hover {
  background: rgba(139,92,246,.2);
}

@media (max-width: 900px) {
  .client-services-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {

  .client-module-title {
    font-size: 22px;
  }

  .client-service-top {
    align-items: flex-start;
  }

  .client-service-details {
    grid-template-columns: 1fr;
  }

  .client-service-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-service-button {
    width: 100%;
    justify-content: center;
  }

}

/* ============================================================
   VEXORAHOST · MIS SERVICIOS · LISTA V2
   ============================================================ */

.client-services-list-v2 {
  width: 100%;
  margin-top: 8px;
}

.client-services-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 20px;
  background: rgba(20,19,24,.92);
  box-shadow:
    0 20px 50px rgba(0,0,0,.16);
}

.client-services-table-header,
.client-service-row {
  display: grid;
  grid-template-columns:
    minmax(230px, 1.45fr)
    minmax(180px, 1.1fr)
    minmax(125px, .8fr)
    minmax(105px, .65fr)
    minmax(175px, 1fr)
    minmax(145px, .8fr);
  align-items: center;
}

.client-services-table-header {
  min-height: 72px;
  padding: 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  color: rgba(255,255,255,.45);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.client-services-table-body {
  width: 100%;
}

.client-service-row {
  min-height: 108px;
  padding: 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.065);
  transition:
    background .2s ease,
    transform .2s ease;
}

.client-service-row:last-child {
  border-bottom: 0;
}

.client-service-row:hover {
  background: rgba(255,255,255,.025);
}

.client-service-cell {
  min-width: 0;
  padding-right: 18px;
}

.service-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client-service-list-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  font-size: 23px;
}

.client-service-list-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.client-service-list-name strong {
  overflow: hidden;
  color: #f4f2f7;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-service-list-name span {
  overflow: hidden;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-cell span,
.date-cell span,
.order-cell span {
  display: block;
  overflow: hidden;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-cell span {
  color: rgba(255,255,255,.78);
}

.order-cell span {
  color: rgba(255,255,255,.7);
  font-size: 11px;
  letter-spacing: .02em;
}

.status-cell {
  display: flex;
  align-items: center;
}

.client-service-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.6);
  font-size: 11px;
  font-weight: 700;
}

.client-service-status > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.client-service-status.active {
  background: rgba(44,211,132,.075);
  color: #39df92;
}

.client-service-status.pending {
  background: rgba(255,177,66,.08);
  color: #ffb142;
}

.client-service-status.suspended {
  background: rgba(255,91,91,.08);
  color: #ff7373;
}

.action-cell {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
}

.client-service-admin-button {
  min-width: 142px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid rgba(145,91,255,.15);
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    rgba(124,58,237,.34),
    rgba(91,43,151,.42)
  );
  color: #eee5ff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.client-service-admin-button:hover {
  transform: translateY(-1px);
  border-color: rgba(168,119,255,.35);
  background: linear-gradient(
    135deg,
    rgba(139,78,255,.48),
    rgba(105,50,175,.55)
  );
  box-shadow:
    0 8px 22px rgba(95,45,180,.22);
}

.client-service-admin-button:active {
  transform: translateY(0);
}

.client-service-admin-icon {
  font-size: 14px;
  line-height: 1;
}

.client-services-table-footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.055);
  color: rgba(255,255,255,.38);
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 1050px) {

  .client-services-table-header,
  .client-service-row {
    grid-template-columns:
      minmax(210px, 1.3fr)
      minmax(155px, 1fr)
      minmax(110px, .75fr)
      minmax(100px, .65fr)
      minmax(150px, .9fr)
      minmax(135px, .75fr);
  }

  .client-services-table-header,
  .client-service-row {
    padding-left: 20px;
    padding-right: 20px;
  }

}

@media (max-width: 800px) {

  .client-services-table {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .client-services-table-header {
    display: none;
  }

  .client-services-table-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .client-service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: auto;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: rgba(20,19,24,.92);
  }

  .client-service-cell {
    padding: 10px 8px;
  }

  .service-cell {
    grid-column: 1 / -1;
    padding-top: 4px;
    padding-bottom: 16px;
  }

  .client-service-cell:not(.service-cell)::before {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.36);
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .status-cell {
    align-items: flex-start;
    flex-direction: column;
  }

  .action-cell {
    grid-column: 1 / -1;
    justify-content: stretch;
    padding-top: 15px;
  }

  .client-service-admin-button {
    width: 100%;
  }

  .client-services-table-footer {
    margin-top: 12px;
    border: 0;
  }

}

@media (max-width: 480px) {

  .client-service-row {
    grid-template-columns: 1fr;
  }

  .service-cell {
    grid-column: 1;
  }

  .action-cell {
    grid-column: 1;
  }

}



/* Logo oficial Traccar */
.client-service-traccar-logo {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

/* ============================================================
   VEXORAHOST · ADMINISTRACIÓN DE SERVICIO
   ============================================================ */

.service-admin-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.service-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.service-admin-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.service-admin-back {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.78);
  font-family: inherit;
  font-size: 22px;
  cursor: pointer;
  transition: .2s ease;
}

.service-admin-back:hover {
  border-color: rgba(145,91,255,.35);
  background: rgba(124,58,237,.12);
  color: #fff;
  transform: translateX(-2px);
}

.service-admin-title {
  margin: 5px 0 7px;
  color: #f5f2fa;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.04em;
}

.service-admin-description {
  margin: 0;
  color: rgba(255,255,255,.45);
  font-size: 13px;
}

.service-admin-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 700;
}

.service-admin-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.service-admin-status.active {
  background: rgba(44,211,132,.07);
  color: #39df92;
}


/* ACCIONES */

.service-admin-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 28px auto 30px;

}

.service-action-card {
  position: relative;

  flex: 1 1 0;
  min-width: 0;
  max-width: 190px;
  min-height: 122px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012)
    );

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 17px;

  color: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

}

.service-action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(145,91,255,.32);
  background: rgba(30,25,40,.96);
  box-shadow:
    0 14px 32px rgba(0,0,0,.18);
}

.service-action-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(145,91,255,.14);
  border-radius: 13px;
  background: rgba(124,58,237,.11);
  color: #b994ff;
  font-size: 20px;
  font-weight: 700;
}

.service-action-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.service-action-text strong {
  color: #eeeaf5;
  font-size: 13px;
  font-weight: 700;
}

.service-action-text small {
  color: rgba(255,255,255,.36);
  font-size: 10px;
}


/* INFORMACIÓN */

.service-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.service-admin-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(20,19,24,.92);
}

.service-admin-card-header {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.service-admin-card-header h2 {
  margin: 7px 0 0;
  color: #f0edf5;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.service-info-list {
  width: 100%;
}

.service-info-row {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

.service-info-row:last-child {
  border-bottom: 0;
}

.service-info-row span {
  color: rgba(255,255,255,.38);
  font-size: 11px;
  font-weight: 600;
}

.service-info-row strong {
  max-width: 65%;
  overflow: hidden;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* AVISO */

.service-admin-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding: 19px 22px;
  border: 1px solid rgba(145,91,255,.13);
  border-radius: 16px;
  background: rgba(124,58,237,.055);
}

.service-admin-notice-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(124,58,237,.13);
  color: #b994ff;
  font-size: 14px;
  font-weight: 800;
}

.service-admin-notice strong {
  display: block;
  margin-bottom: 5px;
  color: #e9e3f5;
  font-size: 12px;
}

.service-admin-notice p {
  margin: 0;
  color: rgba(255,255,255,.4);
  font-size: 11px;
  line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

  .service-admin-actions {
    flex-wrap: nowrap;
    gap: 10px;
  }

}

@media (max-width: 760px) {

  .service-admin-header {
    flex-direction: column;
  }

  .service-admin-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-admin-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 480px) {

  .service-admin-actions {
    grid-template-columns: 1fr;
  }

  .service-admin-heading {
    gap: 10px;
  }

  .service-admin-title {
    font-size: 27px;
  }

  .service-info-row {
    min-height: 56px;
    padding: 0 17px;
  }

  .service-admin-card-header {
    padding: 19px 17px;
  }

}




/* ============================================================
   SERVICE ADMIN · SEIS ACCIONES
   ============================================================ */

.service-admin-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 28px auto 30px;
}

.service-action-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  min-height: 122px;
}

.service-action-card {
  position: relative;
  flex: 0 1 185px;
  min-width: 165px;
  min-height: 122px;

  display: flex;
  align-items: center;
  gap: 15px;

  padding: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012)
    );

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 17px;

  color: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* ENCENDER · VERDE */
.service-action-card[data-action="start"] {
  border-color: rgba(34, 197, 94, 0.85);
}

/* REINICIAR · AZUL */
.service-action-card[data-action="restart"] {
  border-color: rgba(14, 165, 233, 0.85);
}

/* APAGAR · ROJO */
.service-action-card[data-action="stop"] {
  border-color: rgba(239, 68, 68, 0.85);
}

/* CONTRASEÑA · AMARILLO */
.service-action-card[data-action="reset-password"] {
  border-color: rgba(234, 179, 8, 0.90);
}

/* ADDONS · VIOLETA */
.service-action-card[data-action="addons"] {
  border-color: rgba(168, 85, 247, 0.90);
}

/* SUBIR PLAN · TURQUESA */
.service-action-card[data-action="upgrade"] {
  border-color: rgba(20, 184, 166, 0.90);
}

.service-action-card:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
    );
}

.service-action-card:active {
  transform: translateY(-1px);
}

.service-action-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  font-size: 25px;
  font-weight: 700;

  background: rgba(255,255,255,0.045);
}

.service-action-card[data-action="start"] .service-action-icon {
  color: #22c55e;
  background: rgba(34,197,94,0.10);
}

.service-action-card[data-action="restart"] .service-action-icon {
  color: #0ea5e9;
  background: rgba(14,165,233,0.10);
}

.service-action-card[data-action="stop"] .service-action-icon {
  color: #ef4444;
  background: rgba(239,68,68,0.10);
}

.service-action-card[data-action="reset-password"] .service-action-icon {
  color: #eab308;
  background: rgba(234,179,8,0.10);
}

.service-action-card[data-action="addons"] .service-action-icon {
  color: #a855f7;
  background: rgba(168,85,247,0.10);
}

.service-action-card[data-action="upgrade"] .service-action-icon {
  color: #14b8a6;
  background: rgba(20,184,166,0.10);
}

.service-action-text {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.service-action-text strong {
  color: #f4f2f8;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
}

.service-action-text small {
  color: rgba(255,255,255,0.48);
  font-size: 12px;
  line-height: 1.35;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1250px) {
  .service-admin-actions {
    gap: 10px;
  }

  .service-action-card {
    padding: 15px;
    gap: 10px;
  }

  .service-action-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .service-action-text strong {
    font-size: 14px;
  }

  .service-action-text small {
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .service-admin-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .service-action-card {
    flex: 1 1 210px;
    max-width: 280px;
  }
}

@media (max-width: 560px) {
  .service-admin-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-action-card {
    width: 100%;
    max-width: none;
    min-height: 92px;
  }
}


/* ============================================================
   TRACCAR ADMIN · LAYOUT 3 TARJETAS
   ============================================================ */

.service-admin-traccar {
  width: 100%;
}

.service-admin-traccar-actions {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100%;
  margin-bottom: 24px;
}

.service-admin-traccar-actions .service-action-card {
  min-width: 0;
  width: 100%;
}

.service-admin-traccar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  align-items: stretch;
}

.service-admin-traccar-grid .traccar-info-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-admin-traccar-grid .service-info-list {
  flex: 1;
}

.service-admin-traccar-grid .service-info-row {
  min-width: 0;
  gap: 12px;
}

.service-admin-traccar-grid .service-info-row span,
.service-admin-traccar-grid .service-info-row strong {
  min-width: 0;
}

.service-admin-traccar-grid .service-info-row strong {
  text-align: right;
  overflow-wrap: anywhere;
}

.service-admin-traccar .traccar-card-billing {
  border-top: 3px solid #f59e0b;
}

.service-admin-traccar .traccar-card-access {
  border-top: 3px solid #3b82f6;
}

.service-admin-traccar .traccar-card-security {
  border-top: 3px solid #a855f7;
}

/* Ajuste para pantallas medianas */

@media (max-width: 1200px) {
  .service-admin-traccar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-admin-traccar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Móvil */

@media (max-width: 700px) {
  .service-admin-traccar-grid {
    grid-template-columns: 1fr;
  }

  .service-admin-traccar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}