* {
  box-sizing: border-box;
}


:root {

  --bg:
    #07060b;

  --card:
    rgba(17, 14, 25, 0.82);

  --border:
    rgba(255, 255, 255, 0.08);

  --text:
    #ffffff;

  --muted:
    #aaa1b7;

  --muted-strong:
    #d0c7d9;

  --primary:
    #8b5cf6;

  --primary-light:
    #c084fc;

  --danger:
    #f87171;

}


/* =========================================
   BASE
========================================= */

html,
body {

  margin: 0;

  padding: 0;

  width: 100%;

  min-height: 100%;

}


body {

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

  color:
    var(--text);

  background:
    var(--bg);

}


/* =========================================
   LOGIN
========================================= */

.admin-login-page {

  min-height:
    100vh;

  overflow:
    hidden;

}


.login-background {

  position:
    fixed;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(139, 92, 246, 0.14),
      transparent 32%
    ),

    radial-gradient(
      circle at 85% 80%,
      rgba(192, 132, 252, 0.10),
      transparent 32%
    );

}


.login-background::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.018) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent
    );

}


.glow {

  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(110px);

}


.glow-one {

  width:
    500px;

  height:
    500px;

  left:
    -180px;

  top:
    -180px;

  background:
    rgba(124, 58, 237, 0.13);

}


.glow-two {

  width:
    450px;

  height:
    450px;

  right:
    -150px;

  bottom:
    -150px;

  background:
    rgba(168, 85, 247, 0.10);

}


/* =========================================
   CONTAINER
========================================= */

.login-container {

  position:
    relative;

  z-index:
    2;

  min-height:
    100vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    30px 20px;

}


/* =========================================
   CARD
========================================= */

.login-card {

  width:
    min(100%, 450px);

  padding:
    42px;

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

  border-radius:
    26px;

  background:
    var(--card);

  backdrop-filter:
    blur(24px);

  box-shadow:

    0 35px 100px
    rgba(0,0,0,0.45),

    inset 0 1px 0
    rgba(255,255,255,0.04);

}


/* =========================================
   BRAND
========================================= */

.login-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin-bottom:
    45px;

}


.brand-mark {

  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    13px;

  font-size:
    21px;

  font-weight:
    800;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #a855f7
    );

  box-shadow:
    0 10px 35px
    rgba(124,58,237,0.25);

}


.brand-name {

  font-size:
    17px;

  font-weight:
    750;

  letter-spacing:
    -0.02em;

}


.brand-section {

  margin-top:
    2px;

  color:
    var(--primary-light);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.18em;

}


/* =========================================
   HEADING
========================================= */

.login-heading {

  margin-bottom:
    30px;

}


.login-eyebrow {

  color:
    var(--primary-light);

  font-size:
    11px;

  font-weight:
    750;

  letter-spacing:
    0.18em;

}


.login-heading h1 {

  margin:
    10px 0 9px;

  font-size:
    38px;

  line-height:
    1;

  letter-spacing:
    -0.045em;

}


.login-heading p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.6;

}


/* =========================================
   FORM
========================================= */

.login-form {

  display:
    flex;

  flex-direction:
    column;

  gap:
    20px;

}


.form-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.form-group label {

  color:
    var(--muted-strong);

  font-size:
    13px;

  font-weight:
    600;

}


.form-group input {

  width:
    100%;

  height:
    52px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(255,255,255,0.09);

  border-radius:
    13px;

  outline:
    none;

  color:
    #ffffff;

  background:
    rgba(255,255,255,0.035);

  font-size:
    14px;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;

}


.form-group input::placeholder {

  color:
    #70687a;

}


.form-group input:focus {

  border-color:
    rgba(168,85,247,0.65);

  background:
    rgba(255,255,255,0.05);

  box-shadow:
    0 0 0 4px
    rgba(139,92,246,0.09);

}


/* =========================================
   PASSWORD
========================================= */

.password-wrapper {

  position:
    relative;

}


.password-wrapper input {

  padding-right:
    82px;

}


.password-toggle {

  position:
    absolute;

  right:
    12px;

  top:
    50%;

  transform:
    translateY(-50%);

  border:
    none;

  background:
    transparent;

  color:
    #a99fb0;

  cursor:
    pointer;

  font-size:
    12px;

  font-weight:
    600;

}


.password-toggle:hover {

  color:
    #ffffff;

}


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

.login-message {

  padding:
    12px 14px;

  border-radius:
    11px;

  font-size:
    13px;

  line-height:
    1.5;

}


.login-message.error {

  color:
    #fecaca;

  border:
    1px solid
    rgba(248,113,113,0.18);

  background:
    rgba(248,113,113,0.07);

}


/* =========================================
   BUTTON
========================================= */

.login-button {

  position:
    relative;

  width:
    100%;

  height:
    52px;

  margin-top:
    4px;

  border:
    none;

  border-radius:
    13px;

  cursor:
    pointer;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #9333ea
    );

  font-size:
    14px;

  font-weight:
    750;

  box-shadow:
    0 14px 35px
    rgba(124,58,237,0.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;

}


.login-button:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 18px 40px
    rgba(124,58,237,0.28);

}


.login-button:disabled {

  cursor:
    not-allowed;

  opacity:
    .65;

  transform:
    none;

}


/* =========================================
   SPINNER
========================================= */

.login-spinner {

  display:
    inline-block;

  width:
    17px;

  height:
    17px;

  border:
    2px solid
    rgba(255,255,255,0.35);

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    login-spin .7s linear infinite;

}


@keyframes login-spin {

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================
   FOOTER
========================================= */

.login-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  margin-top:
    30px;

  color:
    #655d6d;

  font-size:
    11px;

}


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

@media (max-width: 520px) {

  .login-container {

    padding:
      18px;

  }


  .login-card {

    padding:
      30px 23px;

    border-radius:
      22px;

  }


  .login-brand {

    margin-bottom:
      35px;

  }


  .login-heading h1 {

    font-size:
      34px;

  }


  .login-footer {

    flex-wrap:
      wrap;

  }

}

/* =========================================================
   VEXORAHOST ADMIN — DASHBOARD
========================================================= */

.admin-app {
  min-height: 100vh;
  display: flex;
  background:
    radial-gradient(circle at 75% 10%, rgba(126, 34, 206, .12), transparent 28%),
    #08070d;
  color: #f5f3ff;
}


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

.admin-sidebar {
  width: 260px;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  background: rgba(11, 9, 18, .96);
  border-right: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 28px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 800;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  box-shadow: 0 8px 28px rgba(139,92,246,.3);
}

.brand-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.brand-section {
  margin-top: 3px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #b78cff;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.nav-label {
  padding: 18px 12px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
  color: #716b80;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  margin: 3px 0;
  border-radius: 10px;
  color: #9d98aa;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: .2s ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(139,92,246,.08);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(139,92,246,.20),
    rgba(139,92,246,.07)
  );
  border: 1px solid rgba(168,85,247,.15);
}

.nav-icon {
  width: 22px;
  text-align: center;
  color: #a855f7;
  font-size: 16px;
}

.sidebar-bottom {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.admin-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.admin-avatar,
.topbar-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: white;
  font-weight: 800;
  background: linear-gradient(135deg,#7c3aed,#c084fc);
}

.admin-avatar {
  width: 38px;
  height: 38px;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-user-info strong {
  font-size: 12px;
}

.admin-user-info span {
  margin-top: 2px;
  font-size: 10px;
  color: #777180;
}

.logout-button {
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #817b8c;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  transition: .2s;
}

.logout-button:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}


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

.admin-main {
  width: calc(100% - 260px);
  margin-left: 260px;
  min-height: 100vh;
}

.admin-topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(8,7,13,.7);
  backdrop-filter: blur(16px);
}

.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-title {
  font-size: 13px;
  color: #8d8797;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #aaa4b4;
  cursor: pointer;
}

.topbar-icon:hover {
  color: #fff;
  border-color: rgba(168,85,247,.35);
}

.topbar-admin {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 8px;
}

.topbar-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.topbar-admin div:last-child {
  display: flex;
  flex-direction: column;
}

.topbar-admin strong {
  font-size: 11px;
}

.topbar-admin span {
  margin-top: 2px;
  font-size: 9px;
  color: #777180;
}

.sidebar-toggle {
  display: none;
}


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

.admin-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 38px 34px 60px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}

.page-eyebrow {
  margin-bottom: 8px;
  color: #b276ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}

.page-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -1.5px;
}

.page-header p {
  margin: 10px 0 0;
  color: #7d7787;
  font-size: 13px;
}

.page-date {
  color: #777180;
  font-size: 11px;
  text-transform: capitalize;
}


/* =========================================================
   STAT CARDS
========================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.stat-card,
.dashboard-card {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(17,15,25,.72);
  box-shadow: 0 15px 45px rgba(0,0,0,.12);
}

.stat-card {
  min-height: 145px;
  padding: 19px;
  border-radius: 15px;
}

.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #716b7d;
}

.stat-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-weight: 800;
}

.stat-icon.purple {
  color: #c084fc;
  background: rgba(168,85,247,.12);
}

.stat-icon.blue {
  color: #60a5fa;
  background: rgba(59,130,246,.12);
}

.stat-icon.green {
  color: #4ade80;
  background: rgba(34,197,94,.12);
}

.stat-icon.orange {
  color: #fb923c;
  background: rgba(249,115,22,.12);
}

.stat-value {
  margin-top: 17px;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
}

.stat-footer {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  color: #666170;
  font-size: 10px;
}

.stat-positive {
  color: #4ade80;
}

.stat-warning {
  color: #fbbf24;
}


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

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(300px,.85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-card {
  overflow: hidden;
  border-radius: 15px;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 21px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.card-header h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -.2px;
}

.card-header p {
  margin: 5px 0 0;
  color: #6f6978;
  font-size: 10px;
}

.card-header select {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  outline: none;
  background: #171420;
  color: #aaa3b3;
  font-size: 10px;
}


/* =========================================================
   REVENUE
========================================================= */

.revenue-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 22px 21px 0;
}

.revenue-summary strong {
  font-size: 28px;
  letter-spacing: -1px;
}

.revenue-summary span {
  color: #777180;
  font-size: 10px;
}

.fake-chart {
  position: relative;
  height: 210px;
  margin: 10px 21px 0;
}

.fake-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chart-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.045);
}

.chart-grid-line:nth-child(1) {
  top: 25%;
}

.chart-grid-line:nth-child(2) {
  top: 50%;
}

.chart-grid-line:nth-child(3) {
  top: 75%;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 21px 17px;
  color: #625d6b;
  font-size: 9px;
}


/* =========================================================
   ORDER STATUS
========================================================= */

.status-list {
  padding: 7px 21px;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

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

.status-name {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aaa4b1;
  font-size: 11px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.status-dot.pending {
  background: #fbbf24;
  box-shadow: 0 0 9px rgba(251,191,36,.45);
}

.status-dot.processing {
  background: #a855f7;
  box-shadow: 0 0 9px rgba(168,85,247,.45);
}

.status-dot.completed {
  background: #4ade80;
  box-shadow: 0 0 9px rgba(74,222,128,.45);
}

.status-dot.cancelled {
  background: #f87171;
  box-shadow: 0 0 9px rgba(248,113,113,.45);
}

.status-row strong {
  font-size: 13px;
}

.status-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 21px 21px;
  padding: 14px;
  border-radius: 9px;
  background: rgba(139,92,246,.07);
  color: #888190;
  font-size: 10px;
}

.status-total strong {
  color: #fff;
  font-size: 14px;
}


/* =========================================================
   TABLE
========================================================= */

.bottom-grid {
  grid-template-columns: minmax(0,1.65fr) minmax(300px,.85fr);
}

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 12px 18px;
  text-align: left;
  color: #5f5968;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
}

td {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.045);
  color: #a8a1b0;
  font-size: 10px;
  vertical-align: middle;
}

.order-number {
  color: #c084fc;
  font-size: 10px;
}

.table-customer,
.table-product {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.table-customer strong,
.table-product strong {
  color: #ddd9e3;
  font-size: 10px;
}

.table-customer span,
.table-product span {
  color: #605a68;
  font-size: 8px;
}

.currency {
  margin-left: 4px;
  color: #605a68;
  font-size: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255,255,255,.06);
  color: #aaa3b1;
}

.status-badge.active,
.status-badge.completed {
  background: rgba(34,197,94,.10);
  color: #4ade80;
}

.status-badge.pending {
  background: rgba(251,191,36,.10);
  color: #fbbf24;
}

.status-badge.processing {
  background: rgba(168,85,247,.11);
  color: #c084fc;
}

.status-badge.cancelled {
  background: rgba(248,113,113,.10);
  color: #f87171;
}

.view-all {
  color: #a855f7;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
}

.view-all:hover {
  color: #c084fc;
}

.table-loading,
.table-empty {
  padding: 35px !important;
  text-align: center;
  color: #666170;
}


/* =========================================================
   CUSTOMERS
========================================================= */

.customer-list {
  padding: 7px 20px 15px;
}

.customer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

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

.customer-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  color: #c084fc;
  background: rgba(168,85,247,.10);
  font-size: 11px;
  font-weight: 800;
}

.customer-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.customer-info strong {
  overflow: hidden;
  color: #ddd9e3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-info span {
  overflow: hidden;
  color: #605a68;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-status {
  flex-shrink: 0;
}

.list-loading {
  padding: 35px 10px;
  text-align: center;
  color: #666170;
  font-size: 10px;
}


/* =========================================================
   TOAST
========================================================= */

.admin-toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
  padding: 13px 17px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #171420;
  box-shadow: 0 15px 40px rgba(0,0,0,.35);
  color: #ddd8e5;
  font-size: 11px;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition: .25s;
}

.admin-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.admin-toast.error {
  border-color: rgba(248,113,113,.25);
}


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

@media (max-width: 1100px) {

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

  .dashboard-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 800px) {

  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-main {
    width: 100%;
    margin-left: 0;
  }

  .sidebar-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    background: transparent;
    color: #aaa4b4;
    cursor: pointer;
  }

  .admin-topbar {
    padding: 0 18px;
  }

  .topbar-title {
    display: none;
  }

  .topbar-admin div:last-child {
    display: none;
  }

  .admin-content {
    padding: 28px 18px 50px;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

}


@media (max-width: 560px) {

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .page-header h1 {
    font-size: 29px;
  }

  .topbar-icon {
    display: none;
  }

  .stat-card {
    min-height: 125px;
  }

}


/* =========================================================
   CLIENTES
========================================================= */

.clients-header {
  align-items: center;
}

.primary-admin-button {
  border: 0;
  border-radius: 9px;
  padding: 11px 16px;
  background: linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  );
  color: white;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 8px 25px rgba(124,58,237,.22);
  transition: .2s ease;
}

.primary-admin-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(124,58,237,.3);
}


/* RESUMEN */

.client-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 18px;
}

.client-summary-card {
  padding: 17px 19px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(17,15,25,.72);
}

.client-summary-card span {
  display: block;
  color: #6e6878;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.client-summary-card strong {
  display: block;
  margin-top: 10px;
  color: #f5f3ff;
  font-size: 24px;
  letter-spacing: -.7px;
}

.client-summary-card .summary-green {
  color: #4ade80;
}

.client-summary-card .summary-purple {
  color: #c084fc;
}


/* TOOLBAR */

.clients-table-card {
  min-width: 0;
}

.clients-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 19px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.clients-search {
  flex: 1;
  min-width: 220px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}

.clients-search span {
  opacity: .55;
  font-size: 12px;
}

.clients-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ddd9e3;
  font-family: inherit;
  font-size: 10px;
}

.clients-search input::placeholder {
  color: #5f5968;
}

.admin-filter {
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  outline: none;
  background: #171420;
  color: #9992a3;
  font-family: inherit;
  font-size: 10px;
}


/* TABLA CLIENTES */

.clients-table th {
  padding-top: 14px;
  padding-bottom: 14px;
}

.clients-table td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.client-table-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-table-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.2),
      rgba(168,85,247,.08)
    );
  color: #c084fc;
  font-size: 11px;
  font-weight: 800;
}

.client-table-name div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.client-table-name strong {
  color: #e4e0e8;
  font-size: 10px;
}

.client-table-name span {
  color: #5f5968;
  font-size: 8px;
}

.client-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.client-contact strong {
  color: #bcb6c4;
  font-size: 9px;
  font-weight: 600;
}

.client-contact span {
  color: #625c6a;
  font-size: 8px;
}

.country-code {
  display: inline-flex;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  color: #aaa3b1;
  font-size: 8px;
  font-weight: 700;
}

.orders-mini {
  display: block;
  margin-top: 4px;
  color: #5f5968;
  font-size: 8px;
}

.client-action-button {
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 7px;
  padding: 7px 9px;
  background: rgba(168,85,247,.06);
  color: #b77cff;
  font-family: inherit;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: .2s;
}

.client-action-button:hover {
  border-color: rgba(168,85,247,.4);
  background: rgba(168,85,247,.12);
}

.clients-footer {
  padding: 13px 19px;
  border-top: 1px solid rgba(255,255,255,.045);
  color: #625c6a;
  font-size: 9px;
}


/* RESPONSIVE CLIENTES */

@media (max-width: 1000px) {

  .client-summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .clients-toolbar {
    flex-wrap: wrap;
  }

  .clients-search {
    flex-basis: 100%;
  }

}


@media (max-width: 560px) {

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

  .clients-header {
    align-items: flex-start;
  }

  .clients-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .clients-search {
    min-width: 0;
  }

  .admin-filter {
    width: 100%;
  }

}
/* =========================================================
   MODAL ADMINISTRATIVO
========================================================= */

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

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

  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}


.admin-modal.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.admin-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(3, 2, 7, .78);

  backdrop-filter:
    blur(8px);
}


.admin-modal-dialog {
  position: relative;

  width: min(620px, 100%);

  max-height: calc(100vh - 48px);

  overflow-y: auto;

  border: 1px solid
    rgba(168, 85, 247, .18);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #14111d,
      #0d0b13
    );

  box-shadow:
    0 30px 90px
      rgba(0, 0, 0, .55),
    0 0 70px
      rgba(124, 58, 237, .10);

  transform:
    translateY(15px)
    scale(.98);

  transition:
    transform .22s ease;
}


.admin-modal.visible
.admin-modal-dialog {
  transform:
    translateY(0)
    scale(1);
}


.admin-modal-close {
  position: absolute;

  top: 16px;
  right: 16px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

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

  border-radius: 9px;

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

  color: #aaa3b3;

  font-size: 22px;
  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition: .2s ease;
}


.admin-modal-close:hover {
  background:
    rgba(168,85,247,.12);

  border-color:
    rgba(168,85,247,.25);

  color: #d8b4fe;
}


/* HEADER */

.customer-modal-header {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 28px 28px 18px;
}


.customer-modal-avatar {
  width: 58px;
  height: 58px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #a855f7
    );

  color: white;

  font-size: 20px;
  font-weight: 800;

  box-shadow:
    0 10px 30px
      rgba(124,58,237,.25);
}


.modal-eyebrow {
  margin-bottom: 5px;

  color: #a855f7;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.4px;
}


.customer-modal-header h2 {
  margin: 0;

  color: #f7f4fb;

  font-size: 24px;
  line-height: 1.15;

  letter-spacing: -.5px;
}


.customer-modal-header p {
  margin: 6px 0 0;

  color: #817989;

  font-size: 12px;
}


/* STATUS */

.customer-modal-status-row {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 0 28px 22px;
}


.modal-customer-id {
  padding: 5px 9px;

  border-radius: 6px;

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

  color: #716a79;

  font-size: 10px;
}


/* DETAILS */

.customer-modal-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin: 0 28px;

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

  border-radius: 13px;

  overflow: hidden;
}


.customer-detail-item {
  min-height: 82px;

  padding: 15px 16px;

  border-right: 1px solid
    rgba(255,255,255,.045);

  border-bottom: 1px solid
    rgba(255,255,255,.045);

  background:
    rgba(255,255,255,.018);
}


.customer-detail-item:nth-child(3n) {
  border-right: 0;
}


.customer-detail-item:nth-last-child(-n+3) {
  border-bottom: 0;
}


.customer-detail-item span {
  display: block;

  margin-bottom: 8px;

  color: #625c6a;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1px;
}


.customer-detail-item strong {
  display: block;

  color: #d6d0dc;

  font-size: 12px;
  font-weight: 600;

  word-break: break-word;
}


.customer-detail-item .modal-money {
  color: #c084fc;

  font-size: 15px;
}


/* SERVICIOS */

.customer-modal-section {
  margin: 22px 28px 0;
}


.modal-section-title {
  color: #ded9e5;

  font-size: 13px;
  font-weight: 700;
}


.modal-section-description {
  margin-top: 4px;

  color: #696371;

  font-size: 10px;
}


.modal-empty-service {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 13px;

  padding: 15px;

  border: 1px dashed
    rgba(168,85,247,.15);

  border-radius: 11px;

  background:
    rgba(168,85,247,.025);
}


.modal-empty-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    rgba(168,85,247,.09);

  color: #b77cff;

  font-size: 16px;
}


.modal-empty-service div:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.modal-empty-service strong {
  color: #a9a2b0;

  font-size: 10px;
}


.modal-empty-service span {
  color: #625c6a;

  font-size: 9px;
}


/* FOOTER */

.customer-modal-footer {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 24px;

  padding: 17px 28px;

  border-top: 1px solid
    rgba(255,255,255,.05);
}


.modal-secondary-button,
.modal-primary-button {
  border-radius: 8px;

  padding: 10px 14px;

  font-family: inherit;

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

  cursor: pointer;

  transition: .2s ease;
}


.modal-secondary-button {
  border: 1px solid
    rgba(255,255,255,.08);

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

  color: #9992a3;
}


.modal-secondary-button:hover {
  background:
    rgba(255,255,255,.06);

  color: #ddd7e4;
}


.modal-primary-button {
  border: 0;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #a855f7
    );

  color: white;

  box-shadow:
    0 7px 20px
      rgba(124,58,237,.2);
}


.modal-primary-button:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 25px
      rgba(124,58,237,.3);
}


/* =========================================================
   TIPOGRAFÍA CLIENTES
========================================================= */

.clients-table th {
  font-size: 10px;
}


.client-table-name strong {
  font-size: 12px;
}


.client-table-name span {
  font-size: 9px;
}


.client-contact strong {
  font-size: 11px;
}


.client-contact span {
  font-size: 9px;
}


.country-code {
  font-size: 9px;
}


.clients-table td {
  font-size: 11px;
}


.orders-mini {
  font-size: 9px;
}


.status-badge {
  font-size: 9px;
  padding: 5px 8px;
}


.client-action-button {
  font-size: 9px;
  padding: 8px 10px;
}


/* TOOLBAR */

.clients-search input {
  font-size: 11px;
}


.admin-filter {
  font-size: 11px;
}


/* SUMMARY */

.client-summary-card span {
  font-size: 9px;
}


.client-summary-card strong {
  font-size: 27px;
}


.clients-footer {
  font-size: 10px;
}


/* MOBILE */

@media (max-width: 650px) {

  .admin-modal {
    padding: 12px;
  }


  .customer-modal-header {
    padding: 23px 20px 16px;
  }


  .customer-modal-status-row {
    padding-left: 20px;
    padding-right: 20px;
  }


  .customer-modal-grid {
    grid-template-columns:
      repeat(2, 1fr);

    margin-left: 20px;
    margin-right: 20px;
  }


  .customer-detail-item:nth-child(3n) {
    border-right:
      1px solid
      rgba(255,255,255,.045);
  }


  .customer-detail-item:nth-child(2n) {
    border-right: 0;
  }


  .customer-detail-item:nth-last-child(-n+3) {
    border-bottom:
      1px solid
      rgba(255,255,255,.045);
  }


  .customer-detail-item:nth-last-child(-n+2) {
    border-bottom: 0;
  }


  .customer-modal-section {
    margin-left: 20px;
    margin-right: 20px;
  }


  .customer-modal-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

}

body.modal-open {
  overflow: hidden;
}

/* =========================================================
   FICHA DEL CLIENTE
========================================================= */

.client-detail-page {
  max-width: 1500px;
}


/* VOLVER */

.back-to-clients {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 18px;

  color: #817989;

  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  transition: .2s ease;
}

.back-to-clients:hover {
  color: #c084fc;
}


/* HEADER */

.client-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 24px;

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

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.075),
      rgba(255,255,255,.018)
    );

  margin-bottom: 15px;
}


.client-profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
}


.client-profile-avatar {
  width: 64px;
  height: 64px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #a855f7
    );

  color: white;

  font-size: 22px;
  font-weight: 800;

  box-shadow:
    0 10px 35px
      rgba(124,58,237,.22);
}


.client-profile-header h1 {
  margin: 3px 0 5px;

  color: #f5f2fa;

  font-size: 27px;

  letter-spacing: -.7px;
}


.client-profile-header p {
  margin: 0;

  color: #7b7484;

  font-size: 11px;
}


.client-profile-status {
  display: flex;
  align-items: center;
  gap: 9px;
}


.client-number {
  color: #706978;

  font-size: 10px;
}


/* STATS */

.client-detail-stats {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 12px;

  margin-bottom: 16px;
}


.client-detail-stat {
  padding: 16px;

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

  border-radius: 12px;

  background:
    rgba(17,15,25,.72);
}


.client-detail-stat span {
  display: block;

  color: #686170;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1px;
}


.client-detail-stat strong {
  display: block;

  margin-top: 9px;

  color: #e7e2ed;

  font-size: 23px;
}


.client-detail-stat .stat-green {
  color: #4ade80;
}


.client-detail-stat .stat-purple {
  color: #c084fc;
}


.client-detail-stat .stat-orange {
  color: #fbbf24;
}


.client-detail-stat .stat-blue {
  color: #60a5fa;
}


/* TABS */

.client-tabs {
  display: flex;
  align-items: center;

  gap: 4px;

  margin-bottom: 15px;

  padding: 5px;

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

  border-radius: 10px;

  background:
    rgba(17,15,25,.75);

  overflow-x: auto;
}


.client-tab {
  border: 0;

  padding: 9px 13px;

  border-radius: 7px;

  background: transparent;

  color: #706978;

  font-family: inherit;

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

  white-space: nowrap;

  cursor: pointer;

  transition: .2s;
}


.client-tab:hover {
  color: #b7afc1;
}


.client-tab.active {
  background:
    rgba(168,85,247,.12);

  color: #c084fc;
}


/* CONTENIDO */

.client-tab-content {
  display: none;
}


.client-tab-content.active {
  display: block;
}


/* DOS COLUMNAS */

.client-two-columns {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 15px;

  margin-bottom: 15px;
}


.detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;

  border-bottom: 1px solid
    rgba(255,255,255,.045);
}


.detail-card-header h3 {
  margin: 0;

  color: #ddd8e5;

  font-size: 13px;
}


.detail-card-header p {
  margin: 4px 0 0;

  color: #686170;

  font-size: 9px;
}


.text-action {
  border: 0;

  background: transparent;

  color: #a855f7;

  font-family: inherit;

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

  cursor: pointer;
}


/* INFO */

.client-info-list {
  padding: 4px 20px;
}


.client-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid
    rgba(255,255,255,.045);
}


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


.client-info-row span {
  color: #696271;

  font-size: 9px;
}


.client-info-row strong {
  color: #c6c0cc;

  font-size: 10px;

  text-align: right;

  word-break: break-word;
}


/* ESTADO */

.client-state-box {
  display: flex;
  align-items: center;

  gap: 12px;

  margin: 20px;

  padding: 15px;

  border: 1px solid
    rgba(74,222,128,.1);

  border-radius: 11px;

  background:
    rgba(74,222,128,.035);
}


.client-state-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    rgba(74,222,128,.1);

  color: #4ade80;

  font-weight: 800;
}


.client-state-box div:last-child {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.client-state-box strong {
  color: #a9e9ba;

  font-size: 11px;
}


.client-state-box span {
  color: #68716c;

  font-size: 9px;
}


.client-quick-actions {
  display: flex;
  gap: 8px;

  padding: 0 20px 20px;
}


.detail-action-button {
  border: 1px solid
    rgba(255,255,255,.07);

  border-radius: 7px;

  padding: 8px 10px;

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

  color: #8e8796;

  font-family: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* PEDIDOS */

.client-orders-preview {
  overflow: hidden;
}


.client-orders-list {
  padding: 5px 20px 15px;
}


.client-order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 15px 0;

  border-bottom: 1px solid
    rgba(255,255,255,.045);
}


.client-order-card:last-child {
  border-bottom: 0;
}


.order-card-main {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 0;
}


.order-card-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 10px;

  background:
    rgba(168,85,247,.08);

  color: #b77cff;

  font-size: 16px;
}


.order-card-main div:last-child {
  display: flex;
  flex-direction: column;

  gap: 3px;

  min-width: 0;
}


.order-card-main strong {
  color: #d0cad7;

  font-size: 10px;
}


.order-card-main span {
  color: #8a8292;

  font-size: 9px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.order-card-main small {
  color: #5f5967;

  font-size: 8px;
}


.order-card-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 7px;

  flex-shrink: 0;
}


.order-card-amount > strong {
  color: #ddd8e4;

  font-size: 12px;
}


.order-card-statuses {
  display: flex;
  gap: 5px;
}


.mini-status {
  padding: 4px 6px;

  border-radius: 5px;

  font-size: 7px;
  font-weight: 800;

  text-transform: uppercase;
}


.mini-status.paid {
  background:
    rgba(74,222,128,.08);

  color: #4ade80;
}


.mini-status.pending {
  background:
    rgba(251,191,36,.08);

  color: #fbbf24;
}


.mini-status.order {
  background:
    rgba(168,85,247,.08);

  color: #c084fc;
}


/* PAGOS */

.client-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 15px 0;

  border-bottom: 1px solid
    rgba(255,255,255,.045);
}


.client-payment-row > div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.client-payment-row strong {
  color: #ccc6d3;

  font-size: 10px;
}


.client-payment-row span {
  color: #625c6a;

  font-size: 8px;
}


.client-payment-row .payment-amount {
  color: #c084fc;

  font-size: 12px;

  text-align: right;
}


.client-payment-row > .status-badge {
  flex-shrink: 0;
}


/* VACÍOS */

.empty-detail-state {
  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: center;

  min-height: 220px;

  padding: 35px;

  text-align: center;
}


.empty-detail-state.compact {
  min-height: 160px;
}


.empty-detail-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  margin-bottom: 13px;

  border-radius: 12px;

  background:
    rgba(168,85,247,.07);

  color: #a855f7;

  font-size: 18px;
}


.empty-detail-state h3 {
  margin: 0 0 6px;

  color: #aaa3b1;

  font-size: 12px;
}


.empty-detail-state p {
  max-width: 420px;

  margin: 0;

  color: #625c6a;

  font-size: 9px;

  line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

  .client-detail-stats {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


@media (max-width: 850px) {

  .client-profile-header {
    align-items: flex-start;
    flex-direction: column;
  }


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


  .client-detail-stats {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 600px) {

  .client-profile-header {
    padding: 18px;
  }


  .client-profile-avatar {
    width: 52px;
    height: 52px;
  }


  .client-profile-header h1 {
    font-size: 22px;
  }


  .client-detail-stats {
    grid-template-columns: 1fr 1fr;
  }


  .client-detail-stat strong {
    font-size: 19px;
  }


  .client-order-card {
    align-items: flex-start;
    flex-direction: column;
  }


  .order-card-amount {
    align-items: flex-start;
    padding-left: 49px;
  }


  .client-payment-row {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* =========================================================
   PEDIDOS
========================================================= */

.admin-main {
  min-width: 0;
}

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

.admin-header h1 {
  margin: 6px 0 8px;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1.5px;
}

.admin-header p {
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: 15px;
}

.page-eyebrow {
  color: #b87cff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.primary-button,
.secondary-button,
.table-action-button {
  border: 1px solid rgba(168,85,247,.28);
  border-radius: 10px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.primary-button {
  color: #fff;
  background: linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  );
  box-shadow:
    0 10px 30px rgba(124,58,237,.22);
}

.secondary-button {
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.09);
}

.primary-button:hover,
.secondary-button:hover,
.table-action-button:hover {
  transform: translateY(-1px);
}

.secondary-button:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(168,85,247,.35);
}


/* =========================================================
   STATS
========================================================= */

.stats-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.stat-card {
  min-height: 118px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

.stat-label {
  margin-bottom: 12px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.stat-value {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}


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

.content-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background:
    rgba(12,10,19,.72);
  box-shadow:
    0 20px 60px rgba(0,0,0,.18);
}


/* =========================================================
   TOOLBAR
========================================================= */

.orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-tab {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 13px;
  color: rgba(255,255,255,.48);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}

.filter-tab:hover {
  color: #fff;
  background: rgba(255,255,255,.04);
}

.filter-tab.active {
  color: #fff;
  background: rgba(139,92,246,.15);
  border-color: rgba(168,85,247,.28);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 280px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.search-box span {
  opacity: .5;
  font-size: 13px;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
}

.search-box input::placeholder {
  color: rgba(255,255,255,.32);
}


/* =========================================================
   TABLE
========================================================= */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1050px;
}

.orders-table thead th {
  padding: 14px 18px;
  color: rgba(255,255,255,.30);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.orders-table tbody td {
  padding: 17px 18px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  vertical-align: middle;
  font-size: 12px;
}

.orders-table tbody tr {
  transition: background .2s ease;
}

.orders-table tbody tr:hover {
  background: rgba(168,85,247,.035);
}

.orders-table tbody tr:last-child td {
  border-bottom: 0;
}

.order-number {
  color: #bd83ff;
  font-weight: 800;
  font-size: 12px;
}

.order-id {
  margin-top: 4px;
  color: rgba(255,255,255,.28);
  font-size: 10px;
}

.customer-name {
  color: rgba(255,255,255,.86);
  font-weight: 700;
  text-transform: capitalize;
}

.customer-email {
  margin-top: 4px;
  color: rgba(255,255,255,.35);
  font-size: 10px;
}

.product-name {
  color: rgba(255,255,255,.82);
  font-weight: 600;
}

.product-plan {
  margin-top: 4px;
  color: rgba(255,255,255,.35);
  font-size: 10px;
}

.billing-cycle {
  margin-top: 4px;
  color: rgba(255,255,255,.32);
  font-size: 10px;
}

.order-date {
  color: rgba(255,255,255,.45);
  font-size: 11px;
  white-space: nowrap;
}

.service-status-mini {
  margin-top: 6px;
  color: rgba(255,255,255,.30);
  font-size: 9px;
}


/* =========================================================
   STATUS BADGES
========================================================= */

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  white-space: nowrap;
}

.status-badge.warning {
  color: #fbbf24;
  background: rgba(245,158,11,.09);
  border-color: rgba(245,158,11,.15);
}

.status-badge.processing {
  color: #c084fc;
  background: rgba(168,85,247,.10);
  border-color: rgba(168,85,247,.18);
}

.status-badge.success {
  color: #4ade80;
  background: rgba(34,197,94,.09);
  border-color: rgba(34,197,94,.15);
}

.status-badge.danger {
  color: #fb7185;
  background: rgba(239,68,68,.09);
  border-color: rgba(239,68,68,.15);
}

.status-badge.info {
  color: #60a5fa;
  background: rgba(59,130,246,.09);
  border-color: rgba(59,130,246,.15);
}


/* =========================================================
   ACTION BUTTON
========================================================= */

.table-action-button {
  padding: 8px 12px;
  color: #d8b4fe;
  background: rgba(139,92,246,.08);
  border-color: rgba(168,85,247,.20);
  white-space: nowrap;
}

.table-action-button:hover {
  background: rgba(139,92,246,.16);
  border-color: rgba(168,85,247,.38);
  box-shadow:
    0 8px 22px rgba(124,58,237,.12);
}


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

.table-loading,
.table-error {
  padding: 50px !important;
  color: rgba(255,255,255,.38);
  text-align: center !important;
}

.table-error {
  color: #fb7185;
}

.empty-state {
  padding: 70px 30px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 15px;
  font-size: 36px;
}

.empty-state h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 20px;
}

.empty-state p {
  margin: 0;
  color: rgba(255,255,255,.38);
  font-size: 13px;
}


/* =========================================================
   MODAL
========================================================= */

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity .2s ease,
    visibility .2s ease;
}

.admin-modal.visible {
  visibility: visible;
  opacity: 1;
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}

.admin-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      #12101b,
      #0b0911
    );
  box-shadow:
    0 30px 100px rgba(0,0,0,.55);
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
}

.admin-modal.visible
.admin-modal-dialog {
  transform:
    translateY(0)
    scale(1);
}

.admin-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.admin-modal-header h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 22px;
}

.modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.035);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.admin-modal-content {
  padding: 24px;
}

.modal-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-summary-grid > div {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.modal-summary-grid span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.34);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-summary-grid strong {
  color: rgba(255,255,255,.88);
  font-size: 14px;
}

.modal-service-box {
  margin-top: 16px;
  padding: 17px;
  border: 1px solid rgba(168,85,247,.15);
  border-radius: 13px;
  background: rgba(139,92,246,.055);
  color: rgba(255,255,255,.55);
  font-size: 13px;
}

.modal-service-title {
  margin-bottom: 10px;
  color: #c084fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.modal-service-box strong {
  color: #fff;
}

.admin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,.06);
}


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

@media (max-width: 1000px) {

  .stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .orders-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box {
    width: 100%;
    min-width: 0;
  }

}


@media (max-width: 650px) {

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

  .admin-header h1 {
    font-size: 34px;
  }

  .stats-grid {
    grid-template-columns:
      1fr;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
  }

  .filter-tab {
    white-space: nowrap;
  }

  .modal-summary-grid {
    grid-template-columns:
      1fr;
  }

  .admin-modal {
    padding: 12px;
  }

}

/* =========================================================
   DETALLE DE PEDIDO
========================================================= */

.order-detail-card {
  margin-bottom: 22px;
  padding: 26px;
}

.section-heading {
  margin-bottom: 24px;
}

.section-heading h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 22px;
}

.section-heading p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.40);
  font-size: 13px;
}

.detail-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.detail-item {
  padding: 17px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.detail-item span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.34);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.detail-item strong {
  display: block;
  color: rgba(255,255,255,.90);
  font-size: 15px;
}

.detail-item small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.35);
  font-size: 11px;
}

.status-text.success {
  color: #4ade80 !important;
}

.status-text.processing {
  color: #c084fc !important;
}

.service-summary {
  padding: 18px;
  border: 1px solid rgba(168,85,247,.14);
  border-radius: 14px;
  background: rgba(139,92,246,.045);
}

.service-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.service-main span:first-child {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.38);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.service-main strong {
  color: #fff;
  font-size: 17px;
}

.service-empty {
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255,255,255,.50);
}

.service-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fbbf24;
  background: rgba(245,158,11,.10);
}

.service-empty strong {
  color: #fff;
}

.service-empty p {
  margin: 5px 0 0;
  font-size: 12px;
}

.form-section {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.form-section:first-of-type {
  border-top: 0;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.form-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 10px;
  color: #c084fc;
  background: rgba(139,92,246,.08);
}

.form-section-title strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.form-section-title small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.35);
  font-size: 11px;
}

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

.form-field label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
}

.form-field input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  outline: none;
  color: #fff;
  background: rgba(255,255,255,.035);
  font-family: inherit;
  font-size: 13px;
  transition: .2s ease;
}

.form-field input::placeholder {
  color: rgba(255,255,255,.25);
}

.form-field input:focus {
  border-color: rgba(168,85,247,.55);
  background: rgba(139,92,246,.045);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.08);
}

.configuration-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.configuration-message {
  margin-top: 15px;
  font-size: 12px;
}

.detail-error {
  padding: 30px;
  color: #fb7185;
  text-align: center;
}

@media (max-width: 900px) {

  .detail-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px) {

  .detail-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

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

}


/* =====================================================
   VEXORAHOST
   MODAL PRODUCTO - FORMULARIO
===================================================== */

#productModal .admin-modal-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}


/* HEADER */

#productModal .customer-modal-header {
  margin-bottom: 24px;
}


/* FORM */

#productModal #productForm {
  width: 100%;
}


/* GRID */

#productModal .customer-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}


/* CAMPO */

#productModal .customer-detail-item {
  min-width: 0;
}


#productModal .customer-detail-item > span {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* INPUTS */

#productModal input[type="text"],
#productModal select,
#productModal textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #f5f3ff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


/* TEXT INPUT */

#productModal input[type="text"] {
  height: 46px;
  padding: 0 14px;
}


/* SELECT */

#productModal select {
  height: 46px;
  padding: 0 14px;
  cursor: pointer;
}


/* TEXTAREA */

#productModal textarea {
  min-height: 110px;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.5;
}


/* PLACEHOLDER */

#productModal input::placeholder,
#productModal textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}


/* FOCUS */

#productModal input:focus,
#productModal select:focus,
#productModal textarea:focus {
  border-color: rgba(168, 85, 247, 0.8);
  background: rgba(168, 85, 247, 0.045);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.10);
}


/* SELECT OPTIONS */

#productModal select option {
  background: #15111f;
  color: #ffffff;
}


/* DESCRIPCIÓN A TODO EL ANCHO */

#productModal .customer-detail-item[style*="grid-column"] {
  grid-column: 1 / -1 !important;
}


/* MENSAJE */

#productModal #productFormMessage {
  min-height: 20px;
  color: #c084fc;
}


/* FOOTER */

#productModal .customer-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}


/* BOTÓN CANCELAR */

#productModal .modal-secondary-button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}


#productModal .modal-secondary-button:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}


/* BOTÓN GUARDAR */

#productModal .modal-primary-button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  );
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(124, 58, 237, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}


#productModal .modal-primary-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 35px rgba(124, 58, 237, 0.35);
}


#productModal .modal-primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}


/* CERRAR */

#productModal .admin-modal-close {
  z-index: 5;
}


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

@media (max-width: 650px) {

  #productModal .admin-modal-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }


  #productModal .customer-modal-grid {
    grid-template-columns: 1fr;
  }


  #productModal .customer-detail-item[style*="grid-column"] {
    grid-column: 1 !important;
  }


  #productModal .customer-modal-footer {
    flex-direction: column-reverse;
  }


  #productModal .modal-primary-button,
  #productModal .modal-secondary-button {
    width: 100%;
  }

}


/* =====================================================
   VEXORAHOST — CAMPOS MODAL PRODUCTO
===================================================== */

#productModal .customer-detail-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#productModal .customer-detail-item > span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9b8fae;
}

#productModal input[type="text"],
#productModal input[type="number"],
#productModal select,
#productModal textarea {
  width: 100%;
  box-sizing: border-box;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;

  background: rgba(255,255,255,.035);
  color: #f5f2fa;

  font-family: inherit;
  font-size: 14px;

  padding: 12px 14px;

  outline: none;

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

#productModal input[type="text"],
#productModal input[type="number"],
#productModal select {
  height: 46px;
}

#productModal textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

#productModal input::placeholder,
#productModal textarea::placeholder {
  color: rgba(255,255,255,.30);
}

#productModal input:hover,
#productModal select:hover,
#productModal textarea:hover {
  border-color: rgba(168,85,247,.25);
  background: rgba(255,255,255,.045);
}

#productModal input:focus,
#productModal select:focus,
#productModal textarea:focus {
  border-color: rgba(168,85,247,.75);
  background: rgba(168,85,247,.055);

  box-shadow:
    0 0 0 3px rgba(168,85,247,.10),
    0 0 20px rgba(168,85,247,.08);
}

/* SELECT */

#productModal select {
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  padding-right: 40px;

  background-image:
    linear-gradient(45deg, transparent 50%, #a855f7 50%),
    linear-gradient(135deg, #a855f7 50%, transparent 50%);

  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}

#productModal select option {
  background: #15111d;
  color: #f5f2fa;
}

/* GRID */

#productModal .customer-modal-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}

#productModal .customer-modal-grid
.customer-detail-item {
  padding: 18px;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

#productModal .customer-modal-grid
.customer-detail-item:nth-child(3n) {
  border-right: none;
}

/* DESCRIPCIÓN */

#productModal .customer-modal-grid
.customer-detail-item:last-child {
  border-right: none;
  border-bottom: none;
}

/* MENSAJE */

#productModal #productFormMessage {
  min-height: 20px;
  color: #a9a0b5;
  font-size: 13px;
}

/* FOOTER */

#productModal .customer-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* BOTONES */

#productModal .modal-primary-button,
#productModal .modal-secondary-button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

#productModal .modal-primary-button {
  border: 1px solid rgba(168,85,247,.65);
  background: linear-gradient(
    135deg,
    #8b3ff0,
    #a855f7
  );
  color: white;
  box-shadow:
    0 8px 24px rgba(168,85,247,.20);
}

#productModal .modal-primary-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(168,85,247,.30);
}

#productModal .modal-primary-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

#productModal .modal-secondary-button {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #aaa1b5;
}

#productModal .modal-secondary-button:hover {
  background: rgba(255,255,255,.08);
  color: white;
}

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

@media (max-width: 700px) {

  #productModal .customer-modal-grid {
    grid-template-columns: 1fr;
  }

  #productModal .customer-modal-grid
  .customer-detail-item {
    border-right: none;
  }

  #productModal .customer-modal-footer {
    flex-direction: column-reverse;
  }

  #productModal .modal-primary-button,
  #productModal .modal-secondary-button {
    width: 100%;
  }

}



/* =====================================================
   ACCIÓN ELIMINAR PRODUCTO
===================================================== */

.product-delete-button {
  border-color: rgba(239, 68, 68, .18) !important;
  color: #f87171 !important;
  background: rgba(239, 68, 68, .05) !important;
}

.product-delete-button:hover {
  border-color: rgba(239, 68, 68, .40) !important;
  background: rgba(239, 68, 68, .10) !important;
  color: #fca5a5 !important;
}

.product-delete-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}


/* VEXORAHOST ORDER MODAL CARD DESIGN START */

.order-modal-modern {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 8px;
}

.order-modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.order-modal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #a855f7;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.order-modal-subtitle {
  color: #777583;
  font-size: 13px;
}

.order-modal-status {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, .35);
  background: rgba(168, 85, 247, .10);
  color: #c084fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
}

.order-modal-status.completed {
  color: #4ade80;
  border-color: rgba(74, 222, 128, .22);
  background: rgba(74, 222, 128, .08);
}

.order-info-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.order-info-card {
  min-height: 72px;
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

.order-info-card span,
.service-detail-card span,
.infrastructure-grid span {
  display: block;
  margin-bottom: 7px;
  color: #666471;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.order-info-card strong {
  display: block;
  color: #f4f2f7;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

.payment-ok {
  color: #4ade80 !important;
}

.order-section-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 3px;
}

.order-section-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #c084fc;
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.18);
  font-size: 13px;
}

.order-section-title h3 {
  margin: 0;
  color: #f4f2f7;
  font-size: 17px;
  font-weight: 750;
}

.service-main-card {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(168,85,247,.22);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168,85,247,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(168,85,247,.055),
      rgba(255,255,255,.018)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.service-card-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.service-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(
    145deg,
    rgba(168,85,247,.22),
    rgba(168,85,247,.08)
  );
  border: 1px solid rgba(168,85,247,.25);
  color: #c084fc;
  font-size: 18px;
  font-weight: 800;
}

.service-label {
  color: #777583;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.7px;
  margin-bottom: 4px;
}

.service-card-identity h3 {
  margin: 0;
  color: #faf9fc;
  font-size: 16px;
  font-weight: 750;
}

.service-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: 999px;
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.20);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
}

.service-status-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 9px rgba(74,222,128,.8);
}

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

.service-detail-card {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.055);
}

.service-detail-card.highlight {
  border-color: rgba(168,85,247,.13);
  background: rgba(168,85,247,.045);
}

.service-detail-card.wide {
  grid-column: 1 / -1;
}

.service-detail-card strong {
  display: block;
  color: #e9e6ee;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px !important;
}

.infrastructure-card {
  margin: 0 15px 15px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.07);
}

.infrastructure-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.infrastructure-card-header h4 {
  margin: 0;
  color: #f1eef5;
  font-size: 14px;
  font-weight: 750;
}

.infra-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 12px rgba(74,222,128,.65);
}

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

.infrastructure-grid > div {
  min-width: 0;
}

.infrastructure-grid strong {
  display: block;
  color: #d9d5df;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.service-empty-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.10);
  background: rgba(255,255,255,.018);
}

.service-empty-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 12px;
  color: #f59e0b;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.18);
  font-weight: 900;
}

.service-empty-card strong {
  display: block;
  color: #e9e6ee;
  font-size: 13px;
  margin-bottom: 3px;
}

.service-empty-card p {
  margin: 0;
  color: #777583;
  font-size: 12px;
}


/* RESPONSIVE */

@media (max-width: 700px) {

  .order-info-cards,
  .service-details-grid,
  .infrastructure-grid {
    grid-template-columns: 1fr;
  }

  .service-detail-card.wide {
    grid-column: auto;
  }

  .service-card-top,
  .order-modal-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-status-badge {
    align-self: flex-start;
  }

}

/* VEXORAHOST ORDER MODAL CARD DESIGN END */


/* =========================================================
   VEXORAHOST · PEDIDOS · MODAL DARK SYSTEM
   Compatible con pedidos.js actual
   ========================================================= */

#orderModal .admin-modal-dialog {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
  max-height: 88vh;
  overflow: hidden;
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(18,16,27,.98),
      rgba(10,9,16,.98)
    );
  box-shadow:
    0 30px 100px rgba(0,0,0,.60),
    0 0 0 1px rgba(168,85,247,.03);
}

/* CONTENIDO */

#orderModal .admin-modal-content {
  padding: 22px;
  overflow-y: auto;
  background: transparent;
}

/* BARRA SUPERIOR DEL PEDIDO */

#orderModal .modal-order-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;

  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

#orderModal .modal-order-overview-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#orderModal .modal-section-kicker {
  display: block;
  margin-bottom: 4px;

  color: #a855f7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

#orderModal .modal-order-overview-main > strong {
  color: #f5f3f8;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.4px;
}

#orderModal .modal-order-overview-main > span {
  color: #777180;
  font-size: 11px;
}

#orderModal .modal-order-status {
  flex: 0 0 auto;
  min-width: 105px;
  padding: 9px 13px;

  text-align: center;

  border: 1px solid rgba(168,85,247,.20);
  border-radius: 11px;

  background: rgba(168,85,247,.08);
}

#orderModal .modal-order-status span {
  display: block;
  margin-bottom: 3px;

  color: #716b7d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

#orderModal .modal-order-status strong {
  color: #c084fc;
  font-size: 10px;
  font-weight: 800;
}

/* INFORMACIÓN DEL PEDIDO */

#orderModal .modal-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
  margin-bottom: 20px;
}

#orderModal .modal-summary-grid > div {
  min-width: 0;
  padding: 13px 14px;

  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;

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

#orderModal .modal-summary-grid span {
  display: block;
  margin-bottom: 6px;

  color: #625c6a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

#orderModal .modal-summary-grid strong {
  display: block;

  color: #ddd9e5;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* TOTAL */

#orderModal .modal-summary-grid > div:nth-child(5) strong {
  color: #c084fc;
  font-size: 14px;
}

/* PAGO */

#orderModal .modal-summary-grid > div:nth-child(6) strong {
  color: #4ade80;
}

/* SECCIÓN SERVICIO */

#orderModal .modal-service-section {
  margin-top: 2px;
}

#orderModal .modal-section-heading {
  margin-bottom: 10px;
}

#orderModal .modal-section-heading .modal-section-kicker {
  margin-bottom: 4px;
}

#orderModal .modal-section-heading h3 {
  margin: 0;

  color: #f0edf5;
  font-size: 15px;
  font-weight: 750;
}

/* TARJETA PRINCIPAL DEL SERVICIO */

#orderModal .modal-service-card {
  overflow: hidden;

  border: 1px solid rgba(168,85,247,.20);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(168,85,247,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(168,85,247,.045),
      rgba(255,255,255,.015)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
}

/* CABECERA SERVICIO */

#orderModal .modal-service-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 17px 18px;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

#orderModal .modal-service-kicker {
  display: block;
  margin-bottom: 4px;

  color: #777180;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

#orderModal .modal-service-name {
  display: block;

  color: #faf9fc;
  font-size: 16px;
  font-weight: 750;
}

#orderModal .modal-service-status {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

#orderModal .modal-service-status.active {
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.20);
}

#orderModal .modal-service-status.processing {
  color: #c084fc;
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.20);
}

/* DATOS SERVICIO */

#orderModal .modal-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;

  padding: 14px;
}

#orderModal .modal-service-item {
  min-width: 0;
  padding: 12px 13px;

  border: 1px solid rgba(255,255,255,.055);
  border-radius: 11px;

  background: rgba(0,0,0,.14);
}

#orderModal .modal-service-item.wide {
  grid-column: 1 / -1;
}

#orderModal .modal-service-item span {
  display: block;
  margin-bottom: 5px;

  color: #625c6a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

#orderModal .modal-service-item strong {
  display: block;

  color: #e4e0e9;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;

  word-break: break-word;
}

/* URL / HOSTNAME */

#orderModal .modal-service-item.wide strong {
  color: #c084fc;
}

/* INFRAESTRUCTURA */

#orderModal .modal-infrastructure-box {
  margin: 0 14px 14px;
  padding: 15px;

  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;

  background: rgba(0,0,0,.15);
}

#orderModal .modal-subsection-title {
  margin-bottom: 12px;

  color: #f0edf5;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .8px;
}

#orderModal .modal-infrastructure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

#orderModal .modal-infrastructure-grid > div {
  min-width: 0;
}

#orderModal .modal-infrastructure-grid span {
  display: block;
  margin-bottom: 4px;

  color: #625c6a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#orderModal .modal-infrastructure-grid strong {
  display: block;

  color: #d9d5df;
  font-size: 11px;
  line-height: 1.35;

  word-break: break-word;
}

/* SIN SERVICIO */

#orderModal .modal-service-empty {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 14px;
  padding: 16px;

  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 13px;

  background: rgba(255,255,255,.018);
}

#orderModal .modal-service-empty-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;
  flex: 0 0 36px;

  border-radius: 11px;

  color: #fbbf24;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.15);

  font-weight: 900;
}

#orderModal .modal-service-empty strong {
  display: block;
  margin-bottom: 3px;

  color: #e9e6ee;
  font-size: 12px;
}

#orderModal .modal-service-empty p {
  margin: 0;

  color: #777583;
  font-size: 11px;
  line-height: 1.45;
}

/* LOADING */

#orderModal .modal-loading {
  padding: 45px 20px;

  color: #777180;
  text-align: center;
  font-size: 12px;
}

/* FOOTER */

#orderModal .admin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  padding: 16px 22px;

  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(8,7,13,.65);
}

/* BOTÓN CERRAR */

#orderModal .admin-modal-footer .secondary-button {
  min-height: 40px;
  padding: 0 16px;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;

  background: rgba(255,255,255,.035);
  color: #aaa3b1;

  font-family: inherit;
  font-size: 12px;
  font-weight: 650;

  cursor: pointer;
}

#orderModal .admin-modal-footer .secondary-button:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.15);
}

/* BOTÓN PRINCIPAL */

#orderModal .admin-modal-footer .primary-button {
  min-height: 40px;
  padding: 0 17px;

  border: 0;
  border-radius: 9px;

  background: linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  );

  color: #fff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 9px 25px rgba(124,58,237,.22);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#orderModal .admin-modal-footer .primary-button:hover {
  transform: translateY(-1px);

  box-shadow:
    0 13px 30px rgba(124,58,237,.32);
}

/* SCROLLBAR DEL MODAL */

#orderModal .admin-modal-content::-webkit-scrollbar {
  width: 6px;
}

#orderModal .admin-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

#orderModal .admin-modal-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(168,85,247,.25);
}

#orderModal .admin-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(168,85,247,.40);
}

/* RESPONSIVE */

@media (max-width: 760px) {

  #orderModal .admin-modal-dialog {
    width: calc(100vw - 20px);
    max-height: 92vh;
    border-radius: 17px;
  }

  #orderModal .admin-modal-content {
    padding: 15px;
  }

  #orderModal .modal-summary-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #orderModal .modal-service-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #orderModal .modal-service-item.wide {
    grid-column: 1 / -1;
  }

}

@media (max-width: 520px) {

  #orderModal .modal-order-overview,
  #orderModal .modal-service-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  #orderModal .modal-order-status {
    width: 100%;
  }

  #orderModal .modal-summary-grid,
  #orderModal .modal-service-grid,
  #orderModal .modal-infrastructure-grid {
    grid-template-columns: 1fr;
  }

  #orderModal .modal-service-item.wide {
    grid-column: auto;
  }

  #orderModal .admin-modal-footer {
    flex-direction: column-reverse;
  }

  #orderModal .admin-modal-footer .secondary-button,
  #orderModal .admin-modal-footer .primary-button {
    width: 100%;
  }

}


/* =========================================================
   VEXORAHOST · PEDIDOS
   FINAL MODAL LAYOUT
   ========================================================= */

/*
   El modal completo es una columna.
   Header y footer permanecen fijos.
   SOLO el contenido hace scroll.
*/

#orderModal .admin-modal-dialog {
  display: flex;
  flex-direction: column;

  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  height: min(88vh, 820px);
  max-height: 88vh;

  overflow: hidden;

  border-radius: 20px;
}

/* HEADER FIJO */

#orderModal .admin-modal-header {
  flex: 0 0 auto;

  padding: 22px 24px;

  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* CONTENIDO:
   ESTE ES EL ÚNICO ELEMENTO QUE HACE SCROLL */

#orderModal .admin-modal-content {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 20px 24px 24px;

  background: transparent;
}

/* Scrollbar interna */

#orderModal .admin-modal-content::-webkit-scrollbar {
  width: 7px;
}

#orderModal .admin-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

#orderModal .admin-modal-content::-webkit-scrollbar-thumb {
  background: rgba(168,85,247,.24);
  border-radius: 999px;
}

#orderModal .admin-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(168,85,247,.42);
}


/* =========================================================
   INFORMACIÓN DEL PEDIDO
   ========================================================= */

#orderModal .modal-order-overview {
  margin-bottom: 14px;

  padding: 17px 19px;

  border-radius: 14px;
}


/* =========================================================
   RESUMEN
   3 COLUMNAS
   ========================================================= */

#orderModal .modal-summary-grid {
  display: grid;

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

  gap: 9px;

  margin-bottom: 20px;
}

#orderModal .modal-summary-grid > div {
  min-width: 0;

  min-height: 66px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 12px 14px;
}


/* =========================================================
   SERVICIO
   ========================================================= */

#orderModal .modal-service-section {
  margin-top: 0;
}

#orderModal .modal-section-heading {
  margin-bottom: 9px;
}


/* =========================================================
   TARJETA DEL SERVICIO
   ========================================================= */

#orderModal .modal-service-card {
  overflow: hidden;

  border-radius: 16px;
}


/* =========================================================
   CABECERA DEL SERVICIO
   ========================================================= */

#orderModal .modal-service-header-row {
  min-height: 68px;

  padding: 15px 18px;
}


/* =========================================================
   DATOS DEL SERVICIO
   SIEMPRE 3 COLUMNAS
   ========================================================= */

#orderModal .modal-service-grid {
  display: grid;

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

  gap: 9px;

  padding: 14px;
}

#orderModal .modal-service-item {
  min-width: 0;

  min-height: 62px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 11px 13px;

  border-radius: 11px;
}

#orderModal .modal-service-item.wide {
  grid-column: auto !important;
}


/* =========================================================
   URL
   ========================================================= */

#orderModal .modal-service-item strong {
  overflow: hidden;

  text-overflow: ellipsis;

  word-break: break-word;
}

#orderModal .modal-service-item:nth-child(2) strong {
  color: #c084fc;
}


/* =========================================================
   INFRAESTRUCTURA
   ========================================================= */

#orderModal .modal-infrastructure-box {
  margin: 0 14px 14px;

  padding: 14px;
}

#orderModal .modal-infrastructure-grid {
  display: grid;

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

  gap: 10px;
}


/* =========================================================
   FOOTER
   SIEMPRE VISIBLE
   ========================================================= */

#orderModal .admin-modal-footer {
  flex: 0 0 auto;

  min-height: 68px;

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

  gap: 9px;

  padding: 13px 22px;

  border-top:
    1px solid rgba(255,255,255,.07);

  background:
    rgba(8,7,13,.96);

  position: relative;
  z-index: 5;
}


/* BOTÓN CERRAR */

#orderModal .admin-modal-footer .secondary-button {
  min-height: 40px;

  padding: 0 16px;

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

  border-radius: 9px;

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

  color: #aaa3b1;

  font-family: inherit;
  font-size: 12px;
  font-weight: 650;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

#orderModal .admin-modal-footer .secondary-button:hover {
  color: #ffffff;

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

  border-color:
    rgba(255,255,255,.15);
}


/* BOTÓN VER PEDIDO */

#orderModal .admin-modal-footer .primary-button {
  min-height: 40px;

  padding: 0 17px;

  border: 0;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #a855f7
    );

  color: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 9px 25px rgba(124,58,237,.22);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#orderModal .admin-modal-footer .primary-button:hover {
  transform: translateY(-1px);

  box-shadow:
    0 13px 30px rgba(124,58,237,.32);
}


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

@media (max-width: 760px) {

  #orderModal .admin-modal-dialog {
    width: calc(100vw - 20px);

    height: 92vh;
    max-height: 92vh;

    border-radius: 17px;
  }

  #orderModal .admin-modal-header {
    padding: 18px;
  }

  #orderModal .admin-modal-content {
    padding: 15px 18px 20px;
  }

  #orderModal .modal-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  #orderModal .modal-service-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

}


@media (max-width: 520px) {

  #orderModal .modal-summary-grid,
  #orderModal .modal-service-grid,
  #orderModal .modal-infrastructure-grid {
    grid-template-columns: 1fr;
  }

  #orderModal .modal-order-overview,
  #orderModal .modal-service-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  #orderModal .modal-order-status {
    width: 100%;
  }

  #orderModal .admin-modal-footer {
    flex-direction: column-reverse;

    padding: 12px 18px;
  }

  #orderModal .admin-modal-footer .secondary-button,
  #orderModal .admin-modal-footer .primary-button {
    width: 100%;
  }

}


/* ============================================================
   VEXORAHOST · CLIENTE · SERVICIOS CONTRATADOS
   ============================================================ */

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

.client-service-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(168, 85, 247, .16);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(168,85,247,.055), rgba(255,255,255,.018) 45%, rgba(0,0,0,.08));
  box-shadow: 0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.client-service-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(168,85,247,.08);
  filter: blur(35px);
  pointer-events: none;
}

.client-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,.34);
  box-shadow: 0 15px 38px rgba(0,0,0,.24), 0 0 28px rgba(168,85,247,.07);
}

.client-service-card-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.client-service-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(168,85,247,.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(168,85,247,.20), rgba(124,58,237,.08));
  color: #c084fc;
  font-size: 21px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 20px rgba(168,85,247,.08);
}

.client-service-info {
  min-width: 0;
}

.client-service-type {
  margin-bottom: 5px;
  color: #a78bfa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.client-service-info h3 {
  margin: 0;
  color: #f4f0f8;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.client-service-info p {
  margin: 5px 0 0;
  color: #746c7d;
  font-size: 9px;
  line-height: 1.4;
}

.client-service-card .status-badge {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.client-service-card .status-badge.active {
  border: 1px solid rgba(74,222,128,.12);
  background: rgba(74,222,128,.09);
  color: #4ade80;
}

.client-service-details {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.055);
}

.client-service-detail {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.client-service-detail span {
  display: block;
  margin-bottom: 5px;
  color: #625c6a;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.client-service-detail strong {
  display: block;
  overflow: hidden;
  color: #cfc8d7;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.client-service-detail:last-child {
  grid-column: 1 / -1;
}

/* ============================================================
   ADDONS
   ============================================================ */

.client-addons-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  padding: 20px 0 4px;
}

.client-addon-card {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(168,85,247,.14);
  border-radius: 15px;
  background: rgba(168,85,247,.035);
}

.client-addon-card:hover {
  border-color: rgba(168,85,247,.3);
}

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

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

@media (max-width: 600px) {
  .client-service-card {
    padding: 16px;
  }

  .client-service-card-main {
    grid-template-columns: 42px minmax(0,1fr);
  }

  .client-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .client-service-card .status-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: -4px;
  }

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

  .client-service-detail:last-child {
    grid-column: auto;
  }
}


/* ============================================================
   VEXORAHOST · CLIENTE · SERVICIOS
   DISEÑO EN LISTA — ESTILO PEDIDOS
   ============================================================ */

#clientServices.client-services-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

#clientServices .client-service-card {
  position: relative;
  display: block;
  min-width: 0;
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: background .18s ease;
}

#clientServices .client-service-card:first-child {
  border-top: 0;
}

#clientServices .client-service-card:last-child {
  border-bottom: 0;
}

#clientServices .client-service-card::before {
  display: none;
}

#clientServices .client-service-card:hover {
  transform: none;
  border-color: rgba(255,255,255,.055);
  background: rgba(168,85,247,.035);
  box-shadow: none;
}

/* FILA PRINCIPAL */

#clientServices .client-service-card-main {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ICONO */

#clientServices .client-service-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: rgba(168,85,247,.10);
  color: #c084fc;
  font-size: 18px;
  box-shadow: none;
}

/* INFORMACIÓN */

#clientServices .client-service-info {
  min-width: 0;
}

#clientServices .client-service-type {
  margin: 0 0 3px;
  color: #8b5cf6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

#clientServices .client-service-info h3 {
  margin: 0;
  color: #f4f0f8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

#clientServices .client-service-info p {
  margin: 3px 0 0;
  color: #756d7e;
  font-size: 9px;
  line-height: 1.35;
}

/* ESTADO */

#clientServices .client-service-card .status-badge {
  position: static;
  align-self: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

/* DETALLES */

#clientServices .client-service-details {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 22px;
  margin: 8px 0 0 58px;
  padding: 0;
  border: 0;
}

#clientServices .client-service-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#clientServices .client-service-detail span {
  display: inline;
  margin: 0;
  color: #5f5868;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#clientServices .client-service-detail strong {
  display: inline;
  max-width: 320px;
  overflow: hidden;
  color: #aaa2b2;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#clientServices .client-service-detail:last-child {
  grid-column: auto;
}

/* TABLET */

@media (max-width: 900px) {

  #clientServices .client-service-card {
    padding: 16px 18px;
  }

  #clientServices .client-service-card-main {
    grid-template-columns: 42px minmax(0,1fr) auto;
  }

  #clientServices .client-service-details {
    margin-left: 56px;
  }

}

/* MÓVIL */

@media (max-width: 600px) {

  #clientServices .client-service-card {
    padding: 15px 14px;
  }

  #clientServices .client-service-card-main {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 11px;
  }

  #clientServices .client-service-icon {
    width: 40px;
    height: 40px;
  }

  #clientServices .client-service-card .status-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }

  #clientServices .client-service-details {
    margin-left: 51px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  #clientServices .client-service-detail strong {
    max-width: 240px;
  }

}


/* ============================================================
   VEXORAHOST · CLIENTE · ADDONS
   DISEÑO EN LISTA — MISMO ESTILO QUE SERVICIOS
   ============================================================ */

#clientAddons.client-addons-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* FILA DEL ADDON */

#clientAddons .client-addon-card {
  position: relative;
  display: block;
  min-width: 0;
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: background .18s ease;
}

#clientAddons .client-addon-card:last-child {
  border-bottom: 0;
}

#clientAddons .client-addon-card:hover {
  border-color: rgba(255,255,255,.055);
  background: rgba(168,85,247,.035);
}

/* CONTENIDO PRINCIPAL */

#clientAddons .client-addon-main {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ICONO */

#clientAddons .client-addon-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: rgba(168,85,247,.10);
  color: #c084fc;
  font-size: 18px;
  box-shadow: none;
}

/* INFORMACIÓN */

#clientAddons .client-addon-type {
  margin: 0 0 3px;
  color: #8b5cf6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

#clientAddons .client-addon-main h3 {
  margin: 0;
  color: #f4f0f8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

#clientAddons .client-addon-main p {
  margin: 3px 0 0;
  color: #756d7e;
  font-size: 9px;
  line-height: 1.35;
}

/* INFORMACIÓN DE PAGO */

#clientAddons .client-addon-payment {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* PRECIO */

#clientAddons .client-addon-payment strong {
  color: #f4f0f8;
  font-size: 12px;
  font-weight: 800;
}

/* ESTADO */

#clientAddons .status-badge {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}

/* ESTADO PAGADO */

#clientAddons .status-badge.active {
  border: 1px solid rgba(74,222,128,.12);
  background: rgba(74,222,128,.09);
  color: #4ade80;
}

/* OTROS ESTADOS */

#clientAddons .status-badge.pending {
  border: 1px solid rgba(250,204,21,.12);
  background: rgba(250,204,21,.08);
  color: #facc15;
}

/* RESPONSIVE */

@media (max-width: 900px) {

  #clientAddons .client-addon-card {
    padding: 16px 18px;
  }

  #clientAddons .client-addon-main {
    grid-template-columns: 42px minmax(0,1fr) auto;
  }

}

/* MÓVIL */

@media (max-width: 600px) {

  #clientAddons .client-addon-card {
    padding: 15px 14px;
  }

  #clientAddons .client-addon-main {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 11px;
  }

  #clientAddons .client-addon-icon {
    width: 40px;
    height: 40px;
  }

  #clientAddons .client-addon-payment {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 5px;
  }

}


/* ============================================================
   VEXORAHOST · MODAL CLIENTE · SERVICIOS
   LISTA VERTICAL CONSISTENTE CON FICHA DEL CLIENTE
   ============================================================ */

#modalServicePlaceholder {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;

  width: 100% !important;
  min-height: 0 !important;

  padding: 0 !important;

  border: 1px solid rgba(168, 85, 247, .16) !important;
  border-radius: 14px !important;

  background: rgba(168, 85, 247, .018) !important;

  overflow: hidden !important;
}

/* Cada servicio ocupa una fila completa */

#modalServicePlaceholder .client-service-card {
  width: 100% !important;
  min-width: 0 !important;

  padding: 16px 18px !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  transform: none !important;
}

#modalServicePlaceholder .client-service-card:last-child {
  border-bottom: 0 !important;
}

/* Evita el efecto hover demasiado grande dentro del modal */

#modalServicePlaceholder .client-service-card:hover {
  transform: none !important;

  border-color: transparent !important;

  background: rgba(168,85,247,.025) !important;

  box-shadow: none !important;
}

/* Cabecera del servicio */

#modalServicePlaceholder .client-service-card-main {
  display: grid !important;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  gap: 12px !important;

  width: 100% !important;
}

/* Icono */

#modalServicePlaceholder .client-service-icon {
  width: 42px !important;
  height: 42px !important;

  border-radius: 12px !important;

  font-size: 18px !important;
}

/* Información */

#modalServicePlaceholder .client-service-type {
  margin-bottom: 3px !important;

  font-size: 7px !important;

  letter-spacing: .15em !important;
}

#modalServicePlaceholder .client-service-info h3 {
  margin: 0 !important;

  font-size: 13px !important;

  line-height: 1.25 !important;
}

#modalServicePlaceholder .client-service-info p {
  margin: 3px 0 0 !important;

  font-size: 8px !important;

  line-height: 1.35 !important;
}

/* Estado */

#modalServicePlaceholder .status-badge {
  padding: 5px 10px !important;

  font-size: 7px !important;

  white-space: nowrap !important;
}

/* Datos del servicio */

#modalServicePlaceholder .client-service-details {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 5px 18px !important;

  margin-top: 9px !important;

  padding: 0 0 0 54px !important;

  border-top: 0 !important;
}

#modalServicePlaceholder .client-service-detail {
  display: flex !important;

  align-items: center !important;

  gap: 5px !important;

  min-width: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;
}

#modalServicePlaceholder .client-service-detail span {
  display: inline !important;

  margin: 0 !important;

  color: #625c6a !important;

  font-size: 6px !important;

  letter-spacing: .10em !important;
}

#modalServicePlaceholder .client-service-detail strong {
  display: inline !important;

  max-width: 240px !important;

  color: #aaa3b1 !important;

  font-size: 7px !important;

  font-weight: 700 !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;
}

/* No queremos que el último elemento ocupe toda la fila */

#modalServicePlaceholder .client-service-detail:last-child {
  grid-column: auto !important;
}

/* ============================================================
   MODAL · RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {

  #modalServicePlaceholder .client-service-card {
    padding: 14px !important;
  }

  #modalServicePlaceholder .client-service-card-main {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto !important;

    gap: 10px !important;
  }

  #modalServicePlaceholder .client-service-icon {
    width: 38px !important;
    height: 38px !important;
  }

  #modalServicePlaceholder .client-service-details {
    padding-left: 48px !important;

    gap: 5px 12px !important;
  }

}

@media (max-width: 500px) {

  #modalServicePlaceholder .client-service-card-main {
    grid-template-columns:
      38px
      minmax(0, 1fr) !important;
  }

  #modalServicePlaceholder .status-badge {
    grid-column: 2 !important;

    justify-self: start !important;

    margin-top: 3px !important;
  }

  #modalServicePlaceholder .client-service-details {
    padding-left: 48px !important;
  }

}


/* ============================================================
   VEXORAHOST · MODAL CLIENTE · LISTA DE SERVICIOS
   ============================================================ */

#customerModal .modal-empty-service {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 14px !important;
  border: 1px solid rgba(168, 85, 247, .14) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .012) !important;
}

/* Cada servicio ocupa una fila completa */
#customerModal .modal-empty-service .client-service-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  display: block !important;
  padding: 17px 18px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Quitar la línea del último servicio */
#customerModal .modal-empty-service .client-service-card:last-child {
  border-bottom: 0 !important;
}

/* Hover de cada fila */
#customerModal .modal-empty-service .client-service-card:hover {
  transform: none !important;
  background: rgba(168, 85, 247, .035) !important;
  border-color: rgba(255, 255, 255, .055) !important;
  box-shadow: none !important;
}

/* Ocultar el glow grande que tenían las tarjetas originales */
#customerModal .modal-empty-service .client-service-card::before {
  display: none !important;
}

/* Contenido principal de la fila */
#customerModal .modal-empty-service .client-service-card-main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Icono */
#customerModal .modal-empty-service .client-service-icon {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
}

/* Información del servicio */
#customerModal .modal-empty-service .client-service-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Tipo */
#customerModal .modal-empty-service .client-service-type {
  margin-bottom: 3px !important;
}

/* Nombre */
#customerModal .modal-empty-service .client-service-info h3 {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* Plan */
#customerModal .modal-empty-service .client-service-info p {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
}

/* Estado */
#customerModal .modal-empty-service .status-badge {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Detalles debajo */
#customerModal .modal-empty-service .client-service-details {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 20px !important;
  margin: 10px 0 0 58px !important;
  padding: 0 !important;
}

/* Cada detalle */
#customerModal .modal-empty-service .client-service-detail {
  min-width: 0 !important;
}

/* Responsive */
@media (max-width: 520px) {

  #customerModal .modal-empty-service .client-service-card {
    padding: 15px !important;
  }

  #customerModal .modal-empty-service .client-service-card-main {
    gap: 11px !important;
  }

  #customerModal .modal-empty-service .client-service-details {
    margin-left: 55px !important;
    gap: 6px 14px !important;
  }

  #customerModal .modal-empty-service .status-badge {
    font-size: 9px !important;
    padding: 5px 9px !important;
  }

}




/* =========================================================
   VEXORAHOST CLIENTES UI FIX V2
========================================================= */

.clients-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex-shrink: 0;
}

.secondary-admin-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #a9a2b0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.secondary-admin-button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(248,113,113,.07);
  border-color: rgba(248,113,113,.28);
  color: #fca5a5;
  box-shadow: 0 8px 24px rgba(248,113,113,.08);
}

.secondary-admin-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.customer-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.customer-checkbox:hover {
  border-color: rgba(168,85,247,.65);
  background: rgba(168,85,247,.08);
}

.customer-checkbox:focus-visible {
  outline: none;
  border-color: rgba(168,85,247,.8);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

.customer-checkbox:checked {
  border-color: #a855f7;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  box-shadow: 0 3px 10px rgba(124,58,237,.22);
}

.customer-checkbox:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.customer-checkbox:indeterminate {
  border-color: #a855f7;
  background: rgba(139,92,246,.55);
}

.customer-checkbox:indeterminate::after {
  content: "";
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.client-select-column {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center !important;
}

.customer-create-dialog {
  width: min(590px, calc(100vw - 32px));
  max-width: 590px;
  overflow-y: auto;
}

.customer-create-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 17px;
  margin: 0 28px;
}

.customer-create-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.customer-create-field-full {
  grid-column: 1 / -1;
}

.customer-create-field label {
  display: block;
  margin: 0;
  color: #aaa3b3;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.customer-create-field input {
  display: block;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: #f5f3ff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 42px;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.customer-create-field input::placeholder {
  color: #5f5968;
  opacity: 1;
}

.customer-create-field input:hover {
  border-color: rgba(255,255,255,.13);
}

.customer-create-field input:focus {
  border-color: rgba(168,85,247,.65);
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 3px rgba(139,92,246,.09);
}

.customer-create-error {
  margin: 17px 28px 0;
  padding: 10px 12px;
  border: 1px solid rgba(248,113,113,.18);
  border-radius: 8px;
  background: rgba(248,113,113,.06);
  color: #fca5a5;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.45;
}

.customer-create-dialog .customer-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
  padding: 16px 28px 20px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.customer-create-dialog .modal-secondary-button,
.customer-create-dialog .modal-primary-button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.customer-create-dialog .modal-secondary-button {
  min-width: 82px;
}

.customer-create-dialog .modal-primary-button {
  min-width: 112px;
}

@media (max-width: 760px) {
  .clients-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .customer-create-dialog {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .customer-create-grid {
    grid-template-columns: 1fr;
    margin: 0 20px;
  }

  .customer-create-field-full {
    grid-column: auto;
  }

  .customer-create-error {
    margin-left: 20px;
    margin-right: 20px;
  }

  .customer-create-dialog .customer-modal-footer {
    padding: 16px 20px 20px;
  }
}