:root{
  --bg-color:#f8fafc;
  --primary:#0f172a;
  --primary-dark:#020617;
  --accent:#7c3aed;
  --accent-2:#6d28d9;
  --accent-light:#a78bfa;
  --accent-gradient:linear-gradient(135deg,#a78bfa 0%,#7c3aed 50%,#6d28d9 100%);
  --header-gradient:linear-gradient(135deg,#ffffff 0%,#f5f3ff 100%);
  --text-main:#1e293b;
  --text-muted:#64748b;
  --border:#e2e8f0;
  --lilac-border:#ddd6fe;
  --lilac-bg:#f5f3ff;
  --container:#ffffff;
  --success:#16a34a;
  --success-bg:#f0fdf4;
  --warning:#f59e0b;
  --warning-bg:#fffbeb;
  --danger:#ef4444;
  --danger-bg:#fef2f2;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-subtle:0 4px 20px -2px rgba(124,58,237,.06);
  --shadow-elevated:0 20px 45px -12px rgba(76,29,149,.20);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-color);
  color:var(--text-main);
  min-height:100vh;
}
button,input,select{font:inherit}
button{border:0}

.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:260px;
  background:#fff;
  border-right:1px solid var(--lilac-border);
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  z-index:30;
}
.brand-block{padding:4px 8px 24px;border-bottom:1px solid #f1f5f9}
.alma-logo-container{display:flex;align-items:center;gap:12px}
.alma-icon-box{
  width:44px;height:44px;border-radius:12px;
  background:var(--accent-gradient);
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1.25rem;
  box-shadow:0 5px 15px rgba(124,58,237,.28);
}
.alma-brand-text{font-size:1.35rem;font-weight:800;letter-spacing:-.7px;color:var(--primary)}
.alma-brand-text span{color:var(--accent)}
.brand-subtitle{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.13em;font-weight:700;margin-top:2px}

.nav-menu{display:flex;flex-direction:column;gap:7px;padding:24px 0}
.nav-item{
  background:transparent;color:#475569;
  border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;text-align:left;font-weight:650;font-size:.9rem;
  transition:.2s ease;
}
.nav-item:hover{background:#f8fafc;color:var(--primary)}
.nav-item.active{background:var(--lilac-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--lilac-border)}
.nav-icon{width:24px;text-align:center;font-size:1.05rem}

.sidebar-bottom{margin-top:auto;border-top:1px solid #f1f5f9;padding-top:18px}
.central-status{display:flex;gap:10px;align-items:center;background:#fafafa;padding:12px;border-radius:12px;margin-bottom:10px}
.central-status strong{display:block;font-size:.8rem}
.central-status small{display:block;color:var(--text-muted);font-size:.68rem;margin-top:2px}
.status-dot{width:9px;height:9px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 4px #dcfce7}
.btn-logout{width:100%;padding:10px;border-radius:10px;background:#fff;color:#64748b;border:1px solid var(--border);cursor:pointer;font-size:.78rem;font-weight:600}

.main-content{grid-column:2;padding:28px 34px 46px;min-width:0}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  background:var(--header-gradient);
  border:1px solid var(--lilac-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-subtle);
  padding:20px 24px;margin-bottom:24px;
}
.eyebrow,.section-kicker{font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--accent);margin-bottom:6px}
.topbar h1{font-size:1.42rem;letter-spacing:-.5px;color:var(--primary)}
.view-subtitle{font-size:.82rem;color:var(--text-muted);margin-top:4px}
.topbar-actions{display:flex;gap:12px;align-items:center}
.icon-button{
  position:relative;width:42px;height:42px;border-radius:50%;background:#fff;
  border:1px solid var(--border);cursor:pointer
}
.notif-badge{position:absolute;right:-2px;top:-3px;min-width:18px;height:18px;border-radius:99px;background:var(--danger);color:white;font-size:.63rem;display:grid;place-items:center;font-weight:800}
.profile-pill{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;background:#fff;border:1px solid var(--lilac-border);border-radius:99px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-gradient);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.72rem}
.profile-pill strong{font-size:.76rem;display:block;color:var(--primary)}
.profile-pill span{font-size:.66rem;color:var(--text-muted);display:block;margin-top:2px}
.mobile-menu{display:none;background:transparent;font-size:1.2rem;margin-right:8px}

.view{display:none}
.view.active{display:block}

.hero-card{
  padding:26px 28px;border-radius:22px;margin-bottom:22px;
  color:#fff;background:
    radial-gradient(circle at 82% 30%,rgba(255,255,255,.18),transparent 28%),
    linear-gradient(135deg,#6d28d9 0%,#7c3aed 56%,#a78bfa 100%);
  box-shadow:0 18px 40px -18px rgba(109,40,217,.48);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hero-badge{display:inline-block;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.16);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.hero-card h2{font-size:1.5rem;max-width:620px;letter-spacing:-.6px}
.hero-card p{font-size:.82rem;opacity:.84;margin-top:7px;max-width:620px;line-height:1.55}
.hero-card .btn-primary{background:#fff;color:var(--accent);box-shadow:none}
.hero-card .btn-primary:hover{transform:translateY(-1px);background:#faf5ff}

.btn{
  padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;font-size:.78rem;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s ease;
}
.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.2)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(124,58,237,.27)}
.btn-soft{background:var(--lilac-bg);color:var(--accent);border:1px solid var(--lilac-border)}
.btn-danger-soft{background:var(--danger-bg);color:#dc2626;border:1px solid #fecaca}
.btn-ghost{background:#fff;border:1px solid var(--border);color:#475569}
.btn-small{padding:7px 10px;font-size:.7rem}

.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.kpi-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow-subtle)}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-label{font-size:.76rem;color:var(--text-muted);font-weight:700}
.kpi-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.kpi-icon.success{background:var(--success-bg);color:var(--success)}
.kpi-icon.warning{background:var(--warning-bg);color:var(--warning)}
.kpi-icon.danger{background:var(--danger-bg);color:var(--danger)}
.kpi-icon.purple{background:var(--lilac-bg);color:var(--accent)}
.kpi-value{font-size:2rem;font-weight:820;letter-spacing:-1px;color:var(--primary);margin:9px 0 5px}
.kpi-foot{display:flex;gap:6px;font-size:.66rem;color:#94a3b8}
.trend-positive{color:var(--success);font-weight:800}

.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.panel-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow-subtle);min-width:0}
.span-2{grid-column:span 1}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.panel-header h3{font-size:.95rem;color:var(--primary)}
.panel-header p{font-size:.72rem;color:var(--text-muted);margin-top:4px;line-height:1.45}

.table-wrap{width:100%;overflow:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;padding:10px 9px;border-bottom:1px solid var(--border)}
td{font-size:.76rem;padding:12px 9px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tbody tr:hover{background:#fcfbff}
.client-name{display:flex;align-items:center;gap:10px}
.school-icon{width:34px;height:34px;border-radius:9px;background:var(--lilac-bg);border:1px solid var(--lilac-border);display:grid;place-items:center;color:var(--accent);font-weight:800}
.client-name strong{display:block;font-size:.76rem}
.client-name small{display:block;color:var(--text-muted);font-size:.65rem;margin-top:2px}
.plan-tag{padding:4px 7px;border-radius:99px;background:#f8fafc;border:1px solid var(--border);font-size:.65rem;font-weight:700;color:#475569}
.status-badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 8px;font-size:.64rem;font-weight:800}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-activo{background:var(--success-bg);color:#15803d}
.status-vencer{background:var(--warning-bg);color:#b45309}
.status-suspendido{background:var(--danger-bg);color:#dc2626}

.donut-area{display:flex;align-items:center;gap:24px;padding:8px 0 4px}
.donut{
  --p1:45%;--p2:75%;
  width:128px;height:128px;border-radius:50%;
  background:conic-gradient(#7c3aed 0 var(--p1),#a78bfa var(--p1) var(--p2),#ddd6fe var(--p2) 100%);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;
}
.donut::after{content:"";position:absolute;width:86px;height:86px;background:#fff;border-radius:50%}
.donut span,.donut small{position:relative;z-index:1}
.donut span{font-size:1.5rem;font-weight:800}
.donut small{font-size:.62rem;color:var(--text-muted)}
.legend{display:flex;flex-direction:column;gap:10px;flex:1}
.legend-row{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:#475569}
.legend-label{display:flex;align-items:center;gap:7px}
.legend-dot{width:8px;height:8px;border-radius:50%}

.renewal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.renewal-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #f1f5f9;border-radius:12px}
.renewal-item strong{font-size:.72rem}
.renewal-item small{font-size:.64rem;color:var(--text-muted);display:block;margin-top:3px}
.days-pill{font-size:.63rem;font-weight:800;padding:5px 7px;border-radius:99px;background:var(--warning-bg);color:#b45309}

.activity-list{display:flex;flex-direction:column}
.activity-item{display:grid;grid-template-columns:10px 1fr;gap:10px;padding:9px 0}
.activity-marker{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:4px;box-shadow:0 0 0 4px var(--lilac-bg)}
.activity-item strong{font-size:.69rem;display:block}
.activity-item small{font-size:.62rem;color:var(--text-muted);display:block;margin-top:2px}

.toolbar{display:flex;justify-content:space-between;gap:14px;margin-bottom:16px}
.search-box{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:0 13px}
.search-box input{border:0;outline:0;width:100%;padding:11px 0;background:transparent;font-size:.77rem}
.toolbar-actions{display:flex;gap:9px}
.select-control{border:1px solid var(--border);background:#fff;padding:10px 12px;border-radius:10px;color:#475569;font-size:.75rem;outline:none}
.counter-pill{padding:6px 9px;border-radius:99px;background:var(--lilac-bg);color:var(--accent);font-weight:800;font-size:.65rem}
.usage-cell strong{display:block;font-size:.7rem}
.usage-cell small{font-size:.61rem;color:var(--text-muted)}
.action-group{display:flex;gap:6px;flex-wrap:wrap}

.membership-layout{display:grid;grid-template-columns:320px 1fr;gap:18px}
.membership-summary{background:linear-gradient(160deg,#fff 0%,#faf7ff 100%)}
.membership-summary h3{font-size:1.1rem;margin-bottom:7px}
.membership-summary>p{font-size:.75rem;line-height:1.55;color:var(--text-muted)}
.summary-list{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.summary-list>div{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;background:#fff;border:1px solid var(--border);border-radius:12px}
.summary-list span{font-size:.72rem;color:var(--text-muted)}
.summary-list strong{font-size:1rem}
.membership-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.membership-card{padding:14px;border-radius:14px;border:1px solid var(--border);background:#fff}
.membership-card-top{display:flex;justify-content:space-between;gap:8px}
.membership-card h4{font-size:.76rem}
.membership-card p{font-size:.65rem;color:var(--text-muted);margin-top:3px}
.membership-card .progress{height:6px;background:#f1f5f9;border-radius:99px;margin:12px 0 7px;overflow:hidden}
.membership-card .progress span{height:100%;display:block;background:var(--accent-gradient);border-radius:99px}
.membership-card-footer{display:flex;justify-content:space-between;color:var(--text-muted);font-size:.62rem}

.plans-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.plans-header h2{font-size:1.25rem}
.plans-header p{font-size:.76rem;color:var(--text-muted);margin-top:5px}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow-subtle);position:relative;overflow:hidden}
.plan-card.featured{border-color:var(--lilac-border);box-shadow:0 16px 35px -20px rgba(124,58,237,.4)}
.plan-card.featured::before{content:"Más utilizado";position:absolute;right:12px;top:12px;font-size:.6rem;background:var(--lilac-bg);color:var(--accent);padding:5px 7px;border-radius:99px;font-weight:800}
.plan-card h3{font-size:1rem}
.plan-card .price{font-size:1.65rem;font-weight:850;color:var(--primary);margin:12px 0 2px}
.plan-card .price small{font-size:.62rem;color:var(--text-muted);font-weight:500}
.plan-card>p{font-size:.69rem;color:var(--text-muted);line-height:1.5}
.feature-list{list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:9px}
.feature-list li{font-size:.7rem;color:#475569;display:flex;gap:7px}
.feature-list li::before{content:"✓";color:var(--success);font-weight:900}

.audit-timeline{display:flex;flex-direction:column}
.audit-row{display:grid;grid-template-columns:125px 16px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #f1f5f9}
.audit-time{font-size:.65rem;color:var(--text-muted)}
.audit-line{position:relative;display:flex;justify-content:center}
.audit-line::before{content:"";position:absolute;top:12px;bottom:-14px;width:1px;background:#e9d5ff}
.audit-row:last-child .audit-line::before{display:none}
.audit-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative;z-index:1;margin-top:2px}
.audit-content strong{font-size:.72rem;display:block}
.audit-content p{font-size:.66rem;color:var(--text-muted);margin-top:3px;line-height:1.45}

.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:22px;z-index:100}
.modal-overlay.active{display:flex}
.modal-card{width:min(680px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;border:1px solid var(--lilac-border);box-shadow:var(--shadow-elevated);padding:24px}
.modal-card.wide{width:min(900px,100%)}
.modal-header{display:flex;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid #f1f5f9;margin-bottom:18px}
.modal-header h3{font-size:1.08rem}
.modal-header p{font-size:.7rem;color:var(--text-muted);margin-top:5px}
.modal-close{width:34px;height:34px;border-radius:10px;background:#f8fafc;color:#64748b;font-size:1.2rem;cursor:pointer}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.span-2{grid-column:span 2}
.form-field label{font-size:.68rem;font-weight:700;color:#475569}
.form-field input,.form-field select{border:1px solid var(--border);border-radius:10px;padding:10px 11px;outline:none;background:#fff;font-size:.76rem}
.form-field input:focus,.form-field select:focus{border-color:#c4b5fd;box-shadow:0 0 0 3px #f5f3ff}
.permission-box,.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 14px;background:#fafafa;border:1px solid #f1f5f9;border-radius:12px}
.permission-box{margin-top:16px}
.permission-box strong,.setting-row strong{font-size:.72rem}
.permission-box p,.setting-row p{font-size:.64rem;color:var(--text-muted);margin-top:3px;line-height:1.4}
.switch{position:relative;width:42px;height:24px;display:inline-block;flex:0 0 auto}
.switch input{display:none}
.slider{position:absolute;inset:0;border-radius:99px;background:#cbd5e1;cursor:pointer;transition:.2s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 4px rgba(15,23,42,.25)}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.modal-actions.split{justify-content:space-between}
.modal-actions.split>div{display:flex;gap:9px}

.detail-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.detail-kpis>div{padding:13px;border:1px solid var(--border);border-radius:12px;background:#fcfcfd}
.detail-kpis span{font-size:.62rem;color:var(--text-muted);display:block}
.detail-kpis strong{font-size:.88rem;display:block;margin-top:5px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.detail-grid section{border:1px solid var(--border);border-radius:14px;padding:15px}
.detail-grid h4{font-size:.76rem;margin-bottom:10px}
.setting-row{margin-bottom:8px;padding:10px 11px}
.limit-row{display:flex;justify-content:space-between;font-size:.67rem;margin-top:11px}
.limit-progress{height:6px;background:#f1f5f9;border-radius:99px;margin-top:6px;overflow:hidden}
.limit-progress span{height:100%;display:block;background:var(--accent-gradient);border-radius:99px}

.toast{position:fixed;right:26px;bottom:26px;background:#0f172a;color:#fff;border-radius:14px;padding:13px 15px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-elevated);transform:translateY(120px);opacity:0;transition:.25s;z-index:200;max-width:360px}
.toast.show{transform:translateY(0);opacity:1}
.toast-icon{width:27px;height:27px;border-radius:50%;background:#22c55e;display:grid;place-items:center;font-weight:900}
.toast strong{font-size:.72rem;display:block}
.toast small{font-size:.64rem;opacity:.7;display:block;margin-top:2px}

@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:1fr}
  .membership-layout{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
  .app-shell{display:block}
  .sidebar{transform:translateX(-100%);transition:.25s;box-shadow:20px 0 40px rgba(15,23,42,.12)}
  .sidebar.open{transform:translateX(0)}
  .main-content{padding:18px}
  .mobile-menu{display:inline-block}
  .topbar{align-items:flex-start}
  .profile-pill>div:last-child{display:none}
  .hero-card{align-items:flex-start;flex-direction:column}
  .toolbar{flex-direction:column}
  .toolbar-actions{flex-wrap:wrap}
  .search-box{max-width:none}
  .plans-grid{grid-template-columns:1fr}
  .membership-cards{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:1fr}
  .renewal-list{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-field.span-2{grid-column:span 1}
  .detail-kpis{grid-template-columns:1fr 1fr}
  .topbar-actions .icon-button{display:none}
  .modal-actions.split{flex-direction:column}
  .modal-actions.split>div{display:grid;grid-template-columns:1fr 1fr}
}

.btn-logout{display:block;text-align:center;text-decoration:none}
.renewal-list.single{grid-template-columns:1fr}
.plan-note{margin-top:16px;padding:14px 16px;border:1px solid var(--lilac-border);background:var(--lilac-bg);border-radius:14px;color:#5b21b6;font-size:.72rem;line-height:1.55}
.plan-note code{background:#fff;padding:2px 5px;border-radius:5px;border:1px solid #e9d5ff}
.plan-limit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}
.plan-limit-grid label{display:block;font-size:.65rem;color:var(--text-muted);font-weight:700;margin-bottom:5px}
.plan-limit-grid input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;outline:none}
.plan-limit-grid input:focus{border-color:#c4b5fd;box-shadow:0 0 0 3px var(--lilac-bg)}
.plan-subtitle{font-size:.69rem;color:var(--text-muted);margin-top:4px}
.button-field .btn{height:39px}
.renew-box{margin-top:18px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fafafa;display:flex;gap:12px;align-items:end}
.renew-box .form-field{flex:1}
.mini-note{font-size:.64rem;color:var(--text-muted);line-height:1.5;margin-top:12px}
.status-vencido{background:#fff1f2;color:#be123c}


/* =========================================================
   RESPONSIVE REFORZADO — ALMA CENTRAL
   Ajuste exclusivamente visual. No cambia API ni JavaScript.
   ========================================================= */
@media (max-width: 900px){
  body{
    overflow-x:hidden;
  }

  .sidebar{
    width:min(86vw,290px);
    z-index:120;
  }

  .main-content{
    width:100%;
    min-width:0;
  }

  .topbar{
    gap:14px;
  }

  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .table-wrap table{
    min-width:760px;
  }

  .panel-card{
    min-width:0;
  }

  .modal-card{
    max-height:92vh;
    overflow-y:auto;
  }
}

@media (max-width: 650px){
  .main-content{
    padding:14px 12px 32px;
  }

  .topbar{
    padding:15px 16px;
    border-radius:16px;
    align-items:center;
  }

  .topbar > div:first-child{
    min-width:0;
    flex:1;
  }

  .eyebrow{
    font-size:.6rem;
  }

  .topbar h1{
    font-size:1.14rem;
    white-space:normal;
  }

  .view-subtitle{
    font-size:.7rem;
    line-height:1.4;
  }

  .profile-pill{
    padding:5px;
  }

  .profile-pill > div:last-child{
    display:none;
  }

  .avatar{
    width:32px;
    height:32px;
  }

  .hero-card{
    padding:20px;
    border-radius:17px;
    gap:17px;
  }

  .hero-card h2{
    font-size:1.23rem;
    line-height:1.25;
  }

  .hero-card p{
    font-size:.75rem;
  }

  .hero-card .btn{
    width:100%;
  }

  .kpi-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .kpi-card{
    padding:15px 16px;
  }

  .kpi-value{
    font-size:1.65rem;
  }

  .content-grid{
    gap:12px;
  }

  .panel-card{
    padding:15px 14px;
    border-radius:15px;
  }

  .panel-header{
    align-items:flex-start;
    flex-wrap:wrap;
    margin-bottom:13px;
  }

  .panel-header .btn{
    width:100%;
  }

  .toolbar{
    gap:10px;
  }

  .toolbar-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .toolbar-actions .select-control,
  .toolbar-actions .btn{
    width:100%;
  }

  .search-box{
    width:100%;
  }

  .membership-layout{
    gap:12px;
  }

  .membership-summary{
    padding:18px 16px;
  }

  .membership-cards{
    grid-template-columns:1fr;
  }

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

  .plans-header .btn{
    width:100%;
  }

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

  .plan-card{
    padding:17px;
  }

  .modal-overlay{
    padding:8px;
    align-items:flex-end;
  }

  .modal-card,
  .modal-card.wide{
    width:100%;
    max-width:none;
    max-height:93vh;
    border-radius:18px 18px 10px 10px;
    padding:18px 15px;
  }

  .modal-header{
    margin-bottom:15px;
    padding-bottom:14px;
  }

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

  .form-field.span-2{
    grid-column:span 1;
  }

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

  .detail-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .renew-box{
    flex-direction:column;
    align-items:stretch;
  }

  .renew-box .btn{
    width:100%;
  }

  .modal-actions,
  .modal-actions.split{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .modal-actions .btn,
  .modal-actions.split .btn{
    width:100%;
  }

  .audit-row{
    grid-template-columns:88px 14px 1fr;
    gap:8px;
  }

  .toast{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
  }
}

@media (max-width: 430px){
  .main-content{
    padding-left:10px;
    padding-right:10px;
  }

  .topbar{
    padding:13px 12px;
  }

  .mobile-menu{
    margin-right:4px;
  }

  .hero-card{
    padding:18px 16px;
  }

  .panel-card{
    padding:14px 12px;
  }

  .table-wrap{
    margin-left:-2px;
    margin-right:-2px;
  }

  .table-wrap table{
    min-width:720px;
  }

  .detail-kpis{
    gap:7px;
  }

  .detail-kpis > div{
    padding:11px;
  }

  .plan-limit-grid{
    grid-template-columns:1fr;
  }

  .permission-box,
  .setting-row{
    gap:10px;
  }
}