/* GESTOR VPN React — camada específica. A base visual vem do painel atual. */
html,body,#reactRoot{min-height:100%;}
.react-boot{padding:32px;}
.react-preview-note{margin-top:18px;font-size:.9rem;}
.react-main{min-width:0;}
.react-content{padding:22px;}
.react-module-loading{padding:32px 20px;}
.react-nav-badge{margin-left:auto;font-size:.68rem;opacity:.72;font-weight:600;}
.nav-item.react-native .react-nav-badge{color:var(--primary,#806cf3);}
.nav-item.react-legacy{opacity:.78;}
.react-page-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.react-page-head h2{margin:0 0 4px;}
.react-page-head p{margin:0;}
.react-selected-mini{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.react-status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:700;background:rgba(128,108,243,.12);}
.react-status-pill.ok{background:rgba(45,173,112,.14);}
.react-status-pill.error{background:rgba(220,72,72,.14);}
.react-status-pill.warning{background:rgba(224,159,49,.15);}
.react-status-pill.info{background:rgba(72,135,220,.14);}
.react-client-card{cursor:pointer;transition:transform .12s ease,border-color .12s ease;}
.react-client-card:hover{transform:translateY(-1px);}
.react-profile-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.react-profile-tabs{margin-top:16px;overflow-x:auto;white-space:nowrap;}
.react-profile-panel{margin-top:16px;}
.react-loading-line{padding:14px 0;color:var(--muted,#888);}
.react-empty-module{max-width:740px;margin:24px auto;}
.react-empty-module .panel{padding:28px;}
.react-module-mark{display:inline-block;margin-bottom:10px;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary,#806cf3);}
.react-table-list{display:grid;gap:10px;}
.react-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.react-kv .detail{min-width:0;}
.react-kv .detail b{overflow-wrap:anywhere;}
.react-inline-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.react-note-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;margin-bottom:14px;}
.react-note-form textarea{min-height:82px;}
.react-referral-summary{margin-bottom:12px;}
.react-system-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.react-system-card{border:1px solid var(--border,#ddd);border-radius:14px;padding:14px;background:var(--panel,#fff);}
.react-system-card h4{margin:0 0 7px;}
.react-system-card p{margin:0;}
.react-due-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px;}
.react-due-toolbar button.active{outline:2px solid rgba(128,108,243,.35);}
.react-error-box{margin-bottom:14px;}
@media(max-width:760px){
  .react-content{padding:14px;}
  .react-page-head{align-items:stretch;flex-direction:column;}
  .react-note-form{grid-template-columns:1fr;}
  .react-selected-mini{display:none;}
}

/* v1.1 — contraste correto no tema escuro.
   A v1.0 usava --panel/--border, variáveis que não existem na base atual;
   o fallback #fff deixava os cartões brancos. */
.react-system-card{
  border-color:var(--line,#343449);
  background:var(--surface2,#1d1d2a);
  color:var(--text,#f6f4ff);
}
.react-system-card h4,
.react-system-card b,
.react-system-card strong{color:var(--text,#f6f4ff);}
.react-system-card p{color:var(--muted,#aaa7b8);line-height:1.6;}
.react-system-card .react-status-pill{color:var(--text,#f6f4ff);}
.react-dashboard-deferred{min-height:150px;}
.react-inline-loader{
  margin-top:14px;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--line,#343449);
  border-radius:13px;
  background:var(--surface2,#1d1d2a);
  color:var(--muted,#aaa7b8);
}

/* Fase 2 — VPN e Cobranças */
.react-modal-backdrop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}
.react-modal-card{width:min(720px,100%);max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);color:var(--text)}
.react-modal-card.wide{width:min(1080px,100%)}
.react-modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:rgba(21,21,32,.98)}
.react-modal-head h2{margin:4px 0 0}.react-modal-body{padding:20px}.react-modal-body textarea{min-height:130px}
.react-break{overflow-wrap:anywhere;word-break:break-word}.react-result-box{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.react-result-box h4{margin:0 0 10px}.react-vpn-workspace{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.react-sync-panel{margin-top:16px}.react-delete-options{margin:16px 0}.react-delete-options .option-unavailable{opacity:.55}
.react-content .table-wrap table{min-width:1180px}.react-content .toolbar-grid{margin-top:12px}.react-content .batch-bar{margin-top:12px}
.react-content .selected-context{margin-top:0}.react-content .credit-panel{margin-top:0}.react-content .client-link-bar{margin-bottom:14px}
@media(max-width:760px){.react-modal-backdrop{padding:8px}.react-modal-card,.react-modal-card.wide{max-height:96vh;border-radius:15px}.react-modal-head,.react-modal-body{padding:14px}.react-content .table-wrap table{min-width:1080px}}

/* Fase 4 — Indicações e Saúde */
.react-referrals-page .choice-content{display:flex;align-items:center;justify-content:space-between;gap:12px}
.react-referrals-page .client-card{min-height:108px}
.react-referrals-page .selection-summary>.button-row{flex:0 0 auto;align-items:flex-end;flex-wrap:wrap}
.react-health-page .health-card p{margin:10px 0 6px;line-height:1.5}
.react-health-page .health-card small{display:block}
.react-health-page .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.react-health-page .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.react-health-page .stats-grid{grid-template-columns:1fr 1fr}.react-referrals-page .selection-summary>.button-row{width:100%;display:grid;grid-template-columns:1fr}.react-referrals-page .selection-summary>.button-row button{width:100%}}

/* v4.3 — restauração das ações administrativas da ficha do cliente */
.client-profile-header .react-inline-actions{justify-content:flex-end}
.client-sync-checks{margin-top:14px}
.client-sync-checks>div{min-width:0}
.react-modal-body .check-card small{display:block;margin-top:4px;line-height:1.45}
@media(max-width:760px){
  .client-profile-header .react-inline-actions{width:100%;display:grid;grid-template-columns:1fr}
  .client-profile-header .react-inline-actions button{width:100%}
  .panel-head>.button-row{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
  .panel-head>.button-row button{width:100%}
}


/* v5.0.1 — Faturas: correção mobile ao selecionar cliente
   Mantém o layout desktop original e transforma somente o histórico de Faturas em cards. */
@media(max-width:760px){
  .react-content .billing-history-table{
    overflow:visible;
    width:100%;
    max-width:100%;
    border:0;
    border-radius:0;
    background:transparent;
  }

  .react-content .billing-history-table table{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0 !important;
    table-layout:fixed;
    background:transparent;
  }

  .react-content .billing-history-table thead{
    display:none;
  }

  .react-content .billing-history-table tbody{
    display:grid;
    width:100%;
    gap:10px;
  }

  .react-content .billing-history-table tbody tr{
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }

  .react-content .billing-history-table tbody td{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .react-content .billing-history-table .monospace{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-all;
  }

  .react-content .billing-history-table .status-chip,
  .react-content .billing-history-table .tag{
    max-width:100%;
    white-space:normal;
    text-align:left;
    line-height:1.25;
  }

  .react-content .billing-history-panel .toolbar-grid,
  .react-content .billing-history-panel .batch-bar{
    width:100%;
    min-width:0;
  }

  .react-content .billing-history-panel .toolbar-grid > *,
  .react-content .billing-history-panel .batch-bar > *{
    min-width:0;
    max-width:100%;
  }

  .react-content .billing-history-table .table-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:100%;
    min-width:0;
  }

  .react-content .billing-history-table .table-actions button{
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:38px;
    padding:8px 7px;
    white-space:normal;
    line-height:1.15;
    overflow-wrap:anywhere;
  }
}

@media(max-width:420px){
  .react-content .billing-history-table .table-actions{
    grid-template-columns:1fr;
  }

  .react-content .billing-history-table tbody td{
    grid-template-columns:78px minmax(0,1fr);
  }

  .react-content .billing-history-table tbody td:last-child{
    grid-template-columns:1fr;
  }
}


/* v5.0.2 — Indicações: histórico geral */
.react-referrals-page .eyebrow{
  display:block;
  margin-bottom:6px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--primary,#8b5cf6);
}
.referral-global-history{margin-top:18px}
.referral-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:14px;
}
.referral-history-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(150px,190px) minmax(140px,170px);
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.referral-history-toolbar input,
.referral-history-toolbar select{
  width:100%;
  min-width:0;
}
.referral-history-meta{
  margin:4px 0 12px;
  color:var(--muted,#9ca3af);
  font-size:.9rem;
}
.referral-global-list{
  display:grid;
  gap:10px;
}
.referral-history-card{
  border:1px solid var(--line,#303044);
  border-radius:16px;
  padding:16px;
  background:var(--panel-soft,#171725);
  min-width:0;
}
.referral-relation-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr) 110px;
  gap:14px;
  align-items:center;
  min-width:0;
}
.referral-person{
  display:grid;
  gap:3px;
  min-width:0;
}
.referral-person small{
  color:var(--muted,#9ca3af);
  font-size:.76rem;
}
.referral-person-link{
  display:block;
  width:max-content;
  max-width:100%;
  border:0!important;
  padding:0!important;
  min-height:0!important;
  background:transparent!important;
  color:inherit!important;
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  overflow-wrap:anywhere;
}
.referral-person-link:hover{text-decoration:underline}
.referral-person span{
  color:var(--muted,#a9a9bb);
  font-size:.84rem;
  overflow-wrap:anywhere;
}
.referral-client-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.referral-history-arrow{
  text-align:center;
  color:var(--muted,#a9a9bb);
}
.referral-history-arrow span{
  display:block;
  font-size:.72rem;
}
.referral-history-arrow b{
  display:block;
  font-size:1.2rem;
  color:var(--primary,#8b5cf6);
}
.referral-history-side{
  display:grid;
  justify-items:end;
  gap:8px;
}
.referral-date{
  color:var(--muted,#a9a9bb);
  font-size:.78rem;
  text-align:right;
}
.referral-history-details{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line,#303044);
}
.referral-history-details>div{
  display:grid;
  gap:3px;
  min-width:0;
}
.referral-history-details small{
  color:var(--muted,#9ca3af);
  font-size:.74rem;
}
.referral-history-details b{
  overflow-wrap:anywhere;
}
.referral-history-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:12px;
}
.referral-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:14px;
}
.referral-pagination button{min-width:100px}

@media(max-width:900px){
  .referral-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .referral-history-toolbar{
    grid-template-columns:1fr 1fr;
  }
  .referral-history-toolbar input{
    grid-column:1/-1;
  }
  .referral-relation-row{
    grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  }
  .referral-history-side{
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    justify-items:stretch;
  }
  .referral-history-details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .referral-history-toolbar{grid-template-columns:1fr}
  .referral-history-toolbar input{grid-column:auto}
  .referral-relation-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .referral-history-arrow{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
  }
  .referral-history-arrow b{
    transform:rotate(90deg);
  }
  .referral-history-side{
    grid-column:auto;
  }
  .referral-history-details{
    grid-template-columns:1fr 1fr;
  }
  .referral-history-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .referral-history-actions button{
    width:100%;
  }
  .referral-pagination{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .referral-pagination span{
    grid-column:1/-1;
    grid-row:1;
    text-align:center;
  }
  .referral-pagination button{
    width:100%;
    min-width:0;
  }
}


/* v5.0.3 — Indicações: benefício imediato opcional */
.referral-immediate-benefit{
  display:grid;
  gap:10px;
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line,#303044);
  border-radius:14px;
  background:rgba(139,92,246,.06);
}
.referral-benefit-title h4{margin:0 0 3px}
.referral-benefit-title p{
  margin:0;
  color:var(--muted,#a9a9bb);
  font-size:.86rem;
}
.referral-benefit-option{
  margin:0;
}
.referral-benefit-input{
  max-width:320px;
}
.referral-benefit-input label{
  display:grid;
  gap:6px;
}
.money-input{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  border:1px solid var(--line,#303044);
  border-radius:10px;
  background:var(--input,#0f0f18);
  overflow:hidden;
}
.money-input span{
  padding:0 0 0 12px;
  color:var(--muted,#aaa);
  font-weight:700;
}
.money-input input{
  border:0!important;
  background:transparent!important;
  min-width:0;
}
.referral-benefit-preview{
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  align-items:center;
  min-height:38px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:var(--muted,#a9a9bb);
  font-size:.84rem;
}
.referral-benefit-preview b{
  color:var(--text,#fff);
}
.referral-immediate-history{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 12px;
  margin-top:10px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(139,92,246,.08);
}
.referral-immediate-history small{
  color:var(--muted,#aaa);
}
.referral-immediate-history b{
  text-align:right;
  overflow-wrap:anywhere;
}

@media(max-width:600px){
  .referral-benefit-input{max-width:none}
  .referral-immediate-history{
    display:grid;
    justify-content:stretch;
  }
  .referral-immediate-history b{text-align:left}
}


/* v5.0.5 — exclusão definitiva de indicação */
.react-referrals-page .referral-delete-button{
  background:rgba(220,38,38,.12)!important;
  border-color:rgba(248,113,113,.42)!important;
  color:#fca5a5!important;
}
.react-referrals-page .referral-delete-button:hover{
  background:rgba(220,38,38,.22)!important;
  border-color:rgba(248,113,113,.7)!important;
  color:#fecaca!important;
}


/* ============================================================
   v5.0.6 — Auditoria de regressões / Dashboard consolidada
   ============================================================ */

/* Dashboard */
.react-content .due-item{overflow:hidden}
.react-content .due-ref{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-all;
}
.react-content .due-actions{margin-top:12px}
.dashboard-error-list{display:grid;gap:12px}
.dashboard-error-card{
  padding:15px;
  border:1px solid rgba(239,68,68,.24);
  border-radius:15px;
  background:var(--surface2);
}
.dashboard-error-card>p{color:var(--muted);line-height:1.5}
.dashboard-error-ref{
  margin-top:8px;
  color:#fca5a5;
  overflow-wrap:anywhere;
  word-break:break-all;
}
.dashboard-diagnosis{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.dashboard-diagnosis>p{color:var(--muted);line-height:1.5}
.dashboard-diagnosis-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:10px 0;
}
.dashboard-diagnosis-grid>div{
  min-width:0;
  padding:10px;
  border-radius:11px;
  background:rgba(255,255,255,.035);
}
.dashboard-diagnosis-grid small{
  display:block;
  color:var(--muted);
  margin-bottom:4px;
}
.dashboard-diagnosis-grid b{overflow-wrap:anywhere}
.dashboard-raw-error{margin:10px 0}
.dashboard-raw-error summary{cursor:pointer;color:#fca5a5;font-weight:800}
.dashboard-raw-error pre{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  color:var(--muted);
  font-size:.78rem;
}
.dashboard-candidates{margin:10px 0}
.dashboard-candidates>small{
  display:block;
  color:var(--muted);
  margin-bottom:7px;
}
.dashboard-error-actions{
  justify-content:flex-end;
  margin-top:10px;
}
.react-system-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* O React atual usa menu lateral/hambúrguer no celular.
   Não reserva espaço para um dock inferior inexistente. */
@media(max-width:820px){
  body{padding-bottom:0!important}

  .main-area.react-main{
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
  }

  /* Abas da Dashboard: compactas e roláveis horizontalmente. */
  .react-content .tabs.due-tabs{
    display:flex;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    margin:12px -2px 8px;
    padding:2px;
  }
  .react-content .tabs.due-tabs::-webkit-scrollbar{display:none}
  .react-content .tabs.due-tabs .tab{
    width:auto!important;
    flex:0 0 auto;
    justify-content:center!important;
    white-space:nowrap;
    min-height:40px;
  }

  .react-content .due-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:8px;
  }
  .react-content .due-actions button{
    width:100%;
    min-width:0;
    white-space:normal;
  }
  .react-content .due-actions button:first-child{
    grid-column:1/-1;
    min-height:42px;
  }

  .dashboard-errors-modal .react-modal-body{padding:12px}
  .dashboard-diagnosis-grid{grid-template-columns:1fr}
  .dashboard-error-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .dashboard-error-actions button{width:100%}
  .react-system-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .react-content .dashboard-grid .panel{padding:14px}
  .react-content .dashboard-grid .panel-head{align-items:flex-start}
  .react-content .due-item{
    padding:13px;
  }
  .react-content .due-item .list-item-head{
    align-items:flex-start;
  }
  .react-content .due-item .small-text{
    line-height:1.45;
  }
  .react-system-grid{grid-template-columns:1fr}
}

@media(max-width:390px){
  .react-content .due-actions{grid-template-columns:1fr}
  .react-content .due-actions button:first-child{grid-column:auto}
}


/* v7.9.2 — Gerenciador VPN simplificado */
.vpn-filter-details{margin:10px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.vpn-filter-details>summary{cursor:pointer;padding:11px 13px;font-weight:700;color:var(--muted)}
.vpn-filter-details[open]>summary{border-bottom:1px solid var(--line)}
.vpn-filter-grid{padding:12px}
.vpn-manage-results{margin-bottom:14px}
.vpn-result-active{border-color:rgba(139,92,246,.65)!important}
.vpn-manage-subtabs{margin:0 0 14px;overflow-x:auto;white-space:nowrap}
.vpn-manage-summary{display:grid;gap:14px}
.vpn-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vpn-renew-quick,.vpn-status-quick{border:1px solid var(--line);border-radius:14px;background:var(--surface2);padding:14px;display:grid;gap:10px}
.vpn-renew-quick label{margin:0}
.compact-check{margin:0!important}
.vpn-status-quick>.button-row{margin-top:auto}
.vpn-sync-simple{display:grid;gap:14px}
.vpn-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vpn-section-head h3,.vpn-server-sync-box h4{margin:0 0 4px}
.vpn-compare-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vpn-compare-head,.vpn-compare-row{display:grid;grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr) minmax(0,1.2fr) auto;gap:10px;align-items:center;padding:10px 12px}
.vpn-compare-head{background:rgba(255,255,255,.035);font-size:.78rem;font-weight:800;color:var(--muted)}
.vpn-compare-row+ .vpn-compare-row{border-top:1px solid var(--line)}
.vpn-compare-row>b{overflow-wrap:anywhere}
.vpn-server-sync-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--surface2);padding:14px}
.vpn-server-sync-result{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted)}
.vpn-history-panel{min-height:100px}
.vpn-edit-panel{margin:0}

@media(max-width:760px){
  .vpn-manage-panel{padding:14px!important}
  .vpn-manage-search{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .vpn-manage-search button{width:100%}
  .vpn-filter-details{margin-top:8px}
  .vpn-manage-subtabs{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;white-space:normal}
  .vpn-manage-subtabs .tab{width:100%;margin:0!important;text-align:center}
  .vpn-quick-grid{grid-template-columns:1fr}
  .vpn-status-quick .button-row{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .vpn-status-quick .button-row button{width:100%}
  .vpn-section-head{display:grid;grid-template-columns:1fr}
  .vpn-section-head button{width:100%}
  .vpn-compare-head{display:none}
  .vpn-compare-row{grid-template-columns:1fr auto;gap:5px 10px;padding:12px}
  .vpn-compare-row>span:first-child{grid-column:1/-1;font-weight:800;color:var(--text)}
  .vpn-compare-row>b:nth-of-type(1)::before{content:'WebPro: ';color:var(--muted);font-weight:500}
  .vpn-compare-row>b:nth-of-type(2)::before{content:'Gestor: ';color:var(--muted);font-weight:500}
  .vpn-compare-row>.react-status-pill{grid-column:2;grid-row:2/4;align-self:center}
  .vpn-sync-actions{display:grid!important;grid-template-columns:1fr}
  .vpn-sync-actions button{width:100%}
  .vpn-server-sync-box{grid-template-columns:1fr}
  .vpn-server-sync-box button{width:100%}
  .vpn-server-sync-result{grid-column:auto;display:grid}
  .vpn-manage-results .list-item-head{display:grid!important;grid-template-columns:1fr;gap:10px}
  .vpn-manage-results .list-item-head>button{width:100%}
  .vpn-manage-workspace .client-link-bar{display:grid!important;grid-template-columns:1fr;gap:10px}
  .vpn-manage-workspace .client-link-bar button{width:100%}
}

@media(max-width:420px){
  .vpn-manage-subtabs{grid-template-columns:1fr 1fr}
  .vpn-status-quick .button-row{grid-template-columns:1fr}
  .vpn-compare-row{grid-template-columns:1fr}
  .vpn-compare-row>.react-status-pill{grid-column:auto;grid-row:auto;justify-self:start}
}