/* Capa visual compartida: navegación, superficies, formularios y datos. */
:root {
  --product-radius-xs: 10px;
  --product-radius-sm: 14px;
  --product-radius-md: 18px;
  --product-radius-lg: 24px;
  --product-space: 16px;
  --product-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --product-shadow-sm: 0 10px 24px rgba(15, 23, 42, .07);
  --product-shadow-md: 0 18px 40px rgba(15, 23, 42, .10);
  --product-sidebar: 258px;
}

:root[data-theme='dark'] {
  --product-shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
  --product-shadow-sm: 0 10px 24px rgba(0, 0, 0, .24);
  --product-shadow-md: 0 18px 40px rgba(0, 0, 0, .3);
}

body.app-shell:not(.no-sidebar) {
  background:
    radial-gradient(900px 520px at 76% -15%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 66%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
}

body.app-shell .sidebar {
  width: var(--product-sidebar);
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-2));
  box-shadow: 10px 0 32px rgba(15, 23, 42, .035);
}

body.app-shell .brand {
  min-height: 66px;
  padding: 15px 16px;
  gap: 11px;
}

body.app-shell .brand::before {
  content: "";
  width: 9px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent-2) 82%, #2563eb));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent);
}

body.app-shell .brand .title { font-size: 15px; letter-spacing: -.02em; }
body.app-shell .brand img { max-height: 31px; max-width: 122px; object-fit: contain; }

body.app-shell .userbar {
  padding: 12px 16px;
  gap: 9px;
  align-items: center;
}

body.app-shell .userbar__avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 12px;
  font-weight: 900;
}

body.app-shell .userbar .user-info { min-width: 0; line-height: 1.2; }
body.app-shell .userbar .user-info strong,
body.app-shell .userbar .user-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-shell .userbar .user-info strong { color: var(--ink); font-size: 12px; }
body.app-shell .userbar .user-info span { margin-top: 3px; font-size: 11px; color: var(--muted); }
body.app-shell .userbar .user-info a { color: var(--accent); font-weight: 800; }
body.app-shell .theme-switcher { margin-left: auto; padding: 5px 7px; border-radius: 10px; }
body.app-shell .theme-switcher .label { display: none; }

body.app-shell .sidebar-context {
  margin: 10px 12px 5px;
  padding: 11px 12px;
  border-radius: var(--product-radius-sm);
  box-shadow: var(--product-shadow-xs);
}

body.app-shell .sidebar-search { padding: 10px 12px 8px; border-bottom: 0; }
body.app-shell .sidebar-search input {
  border-radius: 11px;
  padding-left: 12px;
  background: color-mix(in srgb, var(--panel-2) 90%, var(--card));
}

body.app-shell .menu { padding: 5px 9px 16px; }
body.app-shell .nav-group-label {
  margin: 17px 9px 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.app-shell .dash-link,
body.app-shell .group .head {
  min-height: 42px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
}

body.app-shell .dash-link { margin: 2px 0; padding: 10px 11px; }
body.app-shell .dash-link .icon,
body.app-shell .group .head .icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--active) 62%, var(--card));
  color: var(--active-ink);
  font-size: 13px;
  font-weight: 900;
}

body.app-shell .dash-link:hover,
body.app-shell .group .head:hover { background: var(--hover); }
body.app-shell .dash-link.active,
body.app-shell .group.open .head {
  background: color-mix(in srgb, var(--active) 82%, var(--card));
  border-color: color-mix(in srgb, var(--active-border) 68%, var(--border));
  color: var(--active-ink);
}
body.app-shell .dash-link.active .icon,
body.app-shell .group.open .head .icon { background: var(--accent); color: #fff; }
body.app-shell .group { margin: 2px 0; overflow: visible; }
body.app-shell .group .body {
  margin: 3px 0 0 11px;
  padding: 5px 0;
  border: 0;
  background: transparent;
}
body.app-shell .link { margin: 1px 0; padding: 8px 10px; font-size: 12px; }
body.app-shell .link .dot { width: 5px; height: 5px; }

body.app-shell .topbar {
  min-height: 70px;
  padding: 11px 22px;
  background: color-mix(in srgb, var(--topbar-bg) 92%, var(--card));
  box-shadow: 0 1px 0 var(--topbar-border), 0 8px 22px rgba(15, 23, 42, .025);
}
body.app-shell .topbar__title { min-width: 146px; }
body.app-shell .topbar__title strong { font-size: 19px; }
body.app-shell .topbar__search {
  max-width: 500px;
  min-height: 42px;
  padding-left: 14px;
  border-radius: 13px;
  box-shadow: var(--product-shadow-xs);
}
body.app-shell .topbar__search::before { content: "⌕"; color: var(--muted); font-size: 18px; }
body.app-shell .topbar__search button { border-radius: 9px; padding: 6px 12px; }
body.app-shell .topbar__scope { min-width: 180px; border-radius: 12px; }
body.app-shell .topbar__actions { gap: 6px; }
body.app-shell .topbar__actions > a,
body.app-shell .topbar__notify summary { min-height: 36px; padding: 7px 10px; border-radius: 10px; }

body.app-shell .container { max-width: 1460px; padding: 0 20px; margin-top: 20px; }
body.app-shell .card,
body.app-shell .main [class$='-card'],
body.app-shell .main [class*='-card '] {
  border-radius: var(--product-radius-md);
}

body.app-shell .btn {
  min-height: 38px;
  border-radius: 11px;
  padding: 9px 13px;
  box-shadow: var(--product-shadow-xs);
}
body.app-shell .btn:hover { box-shadow: var(--product-shadow-sm); }
body.app-shell input,
body.app-shell select,
body.app-shell textarea { border-radius: 11px; }
body.app-shell table thead th {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
body.app-shell table tbody tr { transition: background .16s ease; }
body.app-shell table tbody tr:hover { background: color-mix(in srgb, var(--active) 30%, transparent); }
body.app-shell .empty-state { border-radius: var(--product-radius-md); }

/* Módulos administrativos prioritarios: misma jerarquía aun con CSS propio. */
body.app-shell .billing-shell,
body.app-shell .payments-shell,
body.app-shell .routers-shell,
body.app-shell .settings-shell,
body.app-shell .users-shell,
body.app-shell .olts-shell {
  border-radius: var(--product-radius-lg);
  padding: clamp(14px, 2.1vw, 26px);
  background: color-mix(in srgb, var(--panel-2) 88%, var(--card));
}

body.app-shell .billing-banner,
body.app-shell .payments-banner,
body.app-shell .routers-banner,
body.app-shell .settings-banner,
body.app-shell .users-banner,
body.app-shell .olts-banner {
  border-radius: var(--product-radius-md);
  padding: clamp(18px, 2.2vw, 26px);
}

body.app-shell .billing-banner h2,
body.app-shell .payments-banner h2,
body.app-shell .routers-banner h2,
body.app-shell .settings-banner h2,
body.app-shell .users-banner h2,
body.app-shell .olts-banner h2 { letter-spacing: -.035em; }

body.app-shell .billing-filters,
body.app-shell .payments-card,
body.app-shell .billing-card,
body.app-shell .routers-card,
body.app-shell .settings-section,
body.app-shell .users-card,
body.app-shell .olts-card {
  border-radius: var(--product-radius-md);
  box-shadow: var(--product-shadow-sm);
}

body.app-shell .billing-status-pills a,
body.app-shell .payments-status,
body.app-shell .billing-badge,
body.app-shell .routers-badge,
body.app-shell .status-badge {
  border-radius: 999px;
  font-weight: 800;
}

body.app-shell .data-card {
  border-radius: var(--product-radius-lg);
  box-shadow: var(--product-shadow-md);
}

body.app-shell .data-toolbar {
  min-height: 114px;
  padding: clamp(18px, 2.3vw, 28px);
  align-items: flex-end;
}

body.app-shell .data-toolbar__title h2 { letter-spacing: -.035em; }
body.app-shell .table-scroll { padding: clamp(10px, 1.5vw, 18px); }
body.app-shell .data-table { border-radius: var(--product-radius-md); box-shadow: none; border: 1px solid var(--border); }
body.app-shell .data-table tbody td { padding-block: 13px; }

body.app-shell .customer360 {
  max-width: 1460px;
  margin-inline: auto;
}
body.app-shell .customer360-hero {
  border-radius: var(--product-radius-lg);
  box-shadow: var(--product-shadow-md);
}
body.app-shell .customer360-card,
body.app-shell .customer360-metric {
  border-radius: var(--product-radius-md);
  box-shadow: var(--product-shadow-sm);
}
body.app-shell .customer360-actions {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--product-radius-md);
  background: color-mix(in srgb, var(--card) 92%, var(--panel-2));
  box-shadow: var(--product-shadow-xs);
}

body.app-shell #edit_card {
  border-radius: var(--product-radius-lg);
  box-shadow: var(--product-shadow-md);
}
body.app-shell #edit_card .subscriptions-form-intro { font-size: 14px; line-height: 1.55; }
body.app-shell .credit-guard,
body.app-shell .withdraw-schedule-panel { border-radius: var(--product-radius-md); }

body.app-shell .form-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--product-radius-sm);
  background: color-mix(in srgb, var(--panel-2) 74%, var(--card));
}
body.app-shell .form-section-label > span {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
body.app-shell .form-section-label strong,
body.app-shell .form-section-label small { display: block; }
body.app-shell .form-section-label strong { color: var(--ink); font-size: 13px; }
body.app-shell .form-section-label small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }

/* Portal: conserva Bootstrap pero adquiere la misma jerarquía y superficies. */
.portal-shell {
  min-height: 100vh;
  background:
    radial-gradient(850px 420px at 100% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    var(--bg);
}
.portal-shell .navbar { min-height: 70px; padding-inline: 12px; }
.portal-shell .navbar-brand { letter-spacing: -.02em; }
.portal-shell .main-content { padding: 28px clamp(18px, 3vw, 42px); }
.portal-shell .main-content > .border-bottom { display: flex; align-items: center; min-height: 52px; }
.portal-shell .main-content .h2 { letter-spacing: -.03em; }
.portal-shell .sidebar .nav-link { border-radius: 11px; }
.portal-shell .card { border-radius: var(--product-radius-md) !important; }
.portal-shell .btn { border-radius: 11px; font-weight: 750; }
.portal-shell .table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 1180px) {
  body.app-shell .topbar__scope { display: none; }
  body.app-shell .topbar__search { max-width: none; }
}

@media (max-width: 960px) {
  body.app-shell .sidebar { width: min(292px, 86vw); }
  body.app-shell .topbar { padding: 12px 16px; }
  body.app-shell .container { padding: 0 14px; margin-top: 14px; }
  body.app-shell .topbar__actions > a { display: none; }
}

@media (max-width: 640px) {
  body.app-shell .topbar__title { min-width: 0; }
  body.app-shell .topbar__title strong { font-size: 17px; }
  body.app-shell .topbar__search::before { display: none; }
  body.app-shell .topbar__search button { padding-inline: 10px; }
  body.app-shell .container { padding: 0 10px; }
  .portal-shell .main-content { padding: 18px 14px; }
}