/* Diseño aprobado: misma paleta Omnica, jerarquía y navegación simplificadas. */
:root { --shell-header-height: 64px; --shell-navigation-height: 56px; }
html:has(.header) { scroll-padding-top: calc(var(--shell-header-height) + 16px); }
.header { position: sticky; top: 0; z-index: 20; height: var(--shell-header-height); min-height: var(--shell-header-height); padding: 14px 24px; }
.brand-name { font-size: 16px; }
.brand [data-brand-mark] { width: 32px; height: 32px; }
.header .brand { flex: 0 1 auto; }
.header .brand-name { max-width: none; }
.app-version { flex: none; margin-left: auto; color: var(--muted); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.layout { min-height: calc(100dvh - var(--shell-header-height)); }
.sidebar { display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: var(--shell-header-height); align-self: start; height: calc(100dvh - var(--shell-header-height)); padding: 0 0 14px; overflow-y: auto; }
.sidebar .nav { height: var(--shell-navigation-height); }
.sidebar-links, .sidebar-bottom { display: grid; gap: 6px; }
.sidebar-bottom { margin-top: auto; padding-top: 32px; }
.main { width: 100%; max-width: 1280px; padding: 40px 48px 64px; min-width: 0; }
.workspace { min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.workspace > .main:has(> .loading-page) { flex: 1; }
.page-navigation { display: flex; align-items: center; gap: 8px; min-height: var(--shell-navigation-height); padding: 6px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 45%, var(--bg)); flex: none; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; line-height: 20px; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumbs li > .icon { flex: none; }
.breadcrumbs a, .breadcrumbs li > span:not(.icon) { padding: 4px 0; overflow-wrap: anywhere; }
.breadcrumbs a { color: var(--muted); border-radius: 4px; text-decoration: none; }
.breadcrumbs [aria-current=page] { color: var(--ink); font-weight: 600; }
.breadcrumbs a:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
@media (hover: hover) { .breadcrumbs a:hover { color: var(--blue-500); } }
.page-head { margin-bottom: 32px; align-items: flex-start; }
.page-head > div:first-child { min-width: 0; }
.page-head > .actions { flex-shrink: 0; }
.page-title { max-width: 100%; }
.page-title h1 { min-width: 0; overflow-wrap: anywhere; }
.page-description { color: var(--muted); font-size: 14px; line-height: 22px; margin-top: 6px; max-width: 760px; }
.panel { border-radius: 14px; }
.panel-head { padding: 20px 24px; }
.panel-body { padding: 24px; }
.admin-card-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-100); color: var(--blue-500); }
.account-header-wrap { position: relative; display: grid; place-items: center; }
.account-trigger { width: 44px; height: 44px; padding: 4px; border: 0; background: transparent; border-radius: 50%; }
.account-trigger .account-avatar { width: 36px; height: 36px; }
.account-menu[popover] { position: fixed; inset: auto auto 20px 80px; margin: 0; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px 16px 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-16); text-align: center; }
.account-menu > .account-avatar { width: 80px; height: 80px; margin: 10px auto 16px; font-size: 24px; }
.account-menu-theme { display: flex; justify-content: flex-end; }
.account-menu > p { color: var(--muted); overflow-wrap: anywhere; margin-top: 6px; font-size: 14px; }
.identity-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 24px; }
.identity-group { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; font-size: 13px; line-height: 22px; }
.account-menu-links { display: grid; border-top: 1px solid var(--line); padding-top: 10px; text-align: left; }
.account-menu-links a, .account-menu-links button { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 44px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; text-align: left; }
.account-menu-links a:hover, .account-menu-links button:hover { background: var(--soft); text-decoration: none; }
.editor-page { width: 100%; max-width: 940px; }
.editor-page-profile { max-width: 860px; }
.editor-page-segment { max-width: 800px; }
.editor-page-user-create { max-width: 820px; }
.editor-header { width: 100%; }
.editor-header .page-head { margin-bottom: 24px; }
.editor-header .user-hero { margin-top: 0; }
.user-editor, .group-editor { max-width: 940px; }
.user-create { max-width: 820px; }
.user-editor > .panel, .group-editor > .panel { margin-bottom: 24px; }
.user-table-identity { display: flex; align-items: center; gap: 12px; }
.user-table-identity .account-avatar { width: 36px; height: 36px; flex: none; font-size: 13px; }
.user-hero { margin-bottom: 36px; }
.user-hero .account-identity h2 { font-size: 28px; line-height: 36px; }
.group-choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px; }
.group-choice { position: relative; display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; min-height: 80px; }
.group-choice:has(input:checked) { border-color: var(--blue-500); background: var(--blue-100); }
.group-choice span:not(.icon) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.group-choice small, .security-row small { display: block; color: var(--muted); font-size: 13px; line-height: 20px; margin-top: 4px; }
.group-name-row { display: flex; gap: 16px; align-items: end; }
.group-name-row > .field { flex: 1; }
.group-name-row > button { min-height: 40px; width: 40px; }
.scope-field { margin-top: 24px; max-width: 340px; }
.group-symbols[popover] { inset: 20% auto auto 50%; transform: translateX(-50%); margin: 0; width: min(330px, calc(100vw - 32px)); padding: 20px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-16); }
.group-symbols:popover-open { display: flex; flex-wrap: wrap; gap: 8px; }
.group-symbols legend { padding: 4px 8px; font-weight: 600; background: var(--surface); }
.symbol-choice { width: 44px; height: 44px; display: grid; place-items: center; position: relative; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.symbol-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.symbol-choice .icon { pointer-events: none; }
.symbol-choice:has(:checked) { background: var(--blue-100); border-color: var(--blue-500); color: var(--blue-500); }
.symbol-choice:focus-within { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.permission-module summary { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 20px; list-style: none; }
.permission-module summary::-webkit-details-marker { display: none; }
.permission-module summary small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.permission-progress { margin-left: auto; }
.permission-progress progress { display: block; width: 80px; height: 4px; border: 0; border-radius: 8px; accent-color: var(--blue-500); }
.permission-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; padding: 18px 24px; border-top: 1px solid var(--line); font-size: 14px; }
.permission-row > div { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.permission-row .check { min-width: 120px; min-height: 28px; font-size: 14px; }
.security-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border-top: 1px solid var(--line); }
.panel > .security-row:first-child { border-top: 0; }
.panel-body > .security-row { margin: 24px -24px -24px; }
.security-row input.switch { appearance: none; -webkit-appearance: none; flex: 0 0 38px; width: 38px; height: 22px; min-height: 22px; padding: 0; background: var(--grey-600); border: 1px solid var(--grey-600); border-radius: 999px; position: relative; cursor: pointer; }
.security-row input.switch::before { content: ''; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; background: #fff; border-radius: 50%; transform: none; mask: none; }
.security-row input.switch:checked { background: var(--primary); border-color: var(--primary); }
.security-row input.switch:checked::before { left: 18px; background: var(--on-primary); }
.login-trust { padding: 12px 0; font-size: 14px; }
.profile-editor { max-width: 860px; }
.profile-controls { align-self: start; }
.profile-control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 24px; }
.profile-control-row + .profile-control-row { border-top: 1px solid var(--line); }
.profile-control-row h3 { margin: 0; font-size: 14px; line-height: 20px; }
.profile-control-row p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.profile-control-row > .btn { min-width: 96px; min-height: 40px; }
.profile-control-danger h3 { color: var(--danger); }
@media (max-width: 680px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) { .profile-control-row { padding: 18px 20px; gap: 12px; } }
.quota-choices { display: grid; grid-template-columns: 1fr; gap: 0; }
.quota-choices .profile-choice { border: 0; background: transparent; padding: 14px 0; }
.quota-choices .profile-choice:has(:checked) { background: transparent; box-shadow: none; }
.quota-options { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 0 0 0 32px; padding: 0; }
.quota-disabled { opacity: .55; }
.quota-presets .btn { border-radius: 999px; box-shadow: none; background: transparent; }
.quota-options > .field { flex: 0 1 160px; max-width: 100%; }
.table-wrap { overflow-y: clip; }
.row-menu[popover] { max-height: min(440px,calc(100dvh - 32px)); overflow: auto; }
.service-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.service-card { padding: 24px; --service-color: var(--muted); }
.service-card.healthy { --service-color: var(--green-700); }
.service-card.unavailable { --service-color: var(--red-700); }
.service-card.maintenance { --service-color: var(--blue-500); }
.service-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.service-title h2 { display: inline-flex; align-items: center; gap: 10px; }
.service-state { display: block; font-size: 22px; margin: 24px 0; color: var(--service-color); }
.service-dot { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--service-color); }
.service-dot::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: var(--service-color); opacity: .18; }
.service-card:is(.healthy,.unavailable,.maintenance) .service-dot::after { animation: service-pulse 2.4s ease-out infinite; }
@keyframes service-pulse { 0% { transform: scale(.65); opacity: .38; } 80%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .service-card:is(.healthy,.unavailable,.maintenance) .service-dot::after { animation: none; } }
.service-reason { overflow-wrap: anywhere; margin: -8px 0 4px; }
.service-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; margin: 0; }
.service-details dt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.service-details dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.service-observation { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
.service-observation .icon { flex: none; }
.success { color: var(--green-700); }
.uptime-panel { padding: 24px; margin-top: 24px; }
.uptime-panel h2 { margin-bottom: 24px; }
.uptime-panel p { margin-top: 18px; }
.uptime-row { display: flex; align-items: center; gap: 24px; margin: 14px 0; font-size: 14px; }
.uptime-row > strong { width: 160px; flex: none; }
.uptime-bars { display: flex; gap: 3px; flex: 1; min-width: 0; }
.uptime-block { flex: 1; height: 25px; border-radius: 2px; background: var(--soft); border: 1px solid var(--line); }
.uptime-block.healthy { background: var(--green-700); border-color: transparent; }
.uptime-block.unavailable { background: var(--red-700); border-color: transparent; }
.uptime-block.maintenance { background: var(--blue-500); border-color: transparent; }
.uptime-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.uptime-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.uptime-legend .uptime-block { width: 9px; height: 9px; flex: none; }
.console-section { margin-top: 32px; }
.console-section > h2 { margin-bottom: 12px; font-size: 14px; }
.vpn-console { display: grid; gap: 24px; min-width: 0; }
.console-toolbar, .console-body, .console-footer { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.console-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px; }
.console-filters, .console-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.console-toolbar button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); min-height: 32px; padding: 4px 10px; font-size: 12px; }
.console-toolbar button[aria-pressed=true] { background: var(--blue-100); color: var(--blue-500); }
.console-toolbar [data-action=refresh-console] { display: inline-flex; align-items: center; gap: 6px; }
.console-body { background: var(--bg); height: 300px; overflow: auto; font: 12px/22px Consolas, 'Courier New', monospace; padding: 12px 16px; }
.console-line { display: grid; grid-template-columns: 164px 132px 50px minmax(240px,1fr); gap: 12px; padding: 3px 0; min-width: 640px; }
.console-line time { color: var(--muted); }
.console-source { color: var(--blue-500); }
.console-level { color: var(--green-700); }
.console-level.danger { color: var(--red-700); }
.console-level.console-warning { color: var(--yellow-900); }
.external-check { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.external-check > .muted { flex-basis: 100%; }
.console-empty { color: var(--muted); }
.console-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; color: var(--muted); font-size: 11px; }
.console-footer > div { display: flex; align-items: center; gap: 12px; }
.console-footer button { display: grid; place-items: center; border: 0; background: transparent; width: 32px; height: 32px; }
.segment-editor { max-width: 800px; display: grid; gap: 24px; }
.segment-editor > .profile-fieldset { gap: 10px; }
.segment-type-options { margin: 0; padding: 6px 20px; }
.segment-type-options .profile-choice { padding: 12px 0; border: 0; background: transparent; }
.segment-type-options .profile-choice:has(:checked) { background: transparent; box-shadow: none; }
.segment-type-options .subline { margin-top: 4px; }
.segment-rules { display: grid; gap: 32px; }
.segment-add-row { display: flex; align-items: start; gap: 8px; }
.segment-add-row > .input { flex: 1; min-width: 0; }
.segment-add-row > .btn { flex: none; }
.destination-feedback:empty { display: none; }
.destination-feedback { color: var(--red-700); }
.destination-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 0; margin: 0; list-style: none; }
.destination-chip { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 0 2px 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; }
.destination-chip > span { min-width: 0; overflow-wrap: anywhere; }
.destination-chip > .btn { flex: none; min-height: 36px; width: 36px; border: 0; background: transparent; box-shadow: none; }
.segment-form-footer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.editor-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.editor-actions > .btn { min-height: 40px; }
@media (max-width: 480px) { .editor-actions { display: grid; grid-template-columns: 1fr; padding: 16px; } }
.segment-unrestricted { margin: 0; padding: 20px; }
.segment-unrestricted p { margin: 8px 0 0; }
.segment-table-panel { margin: 0; overflow: hidden; }
.segment-table { min-width: 900px; }
.segment-table th { font-size: 12px; }
.segment-table td { padding-top: 18px; padding-bottom: 18px; }
.segment-identity { display: flex; align-items: center; gap: 12px; min-width: 170px; max-width: 270px; }
.segment-identity > .icon { flex: none; color: var(--blue-500); }
.segment-identity .profile-name { overflow-wrap: anywhere; }
.segment-policy { white-space: nowrap; }
.segment-policy.blocklist { color: var(--red-700); background: var(--red-100); }
.segment-policy.allowlist { color: var(--blue-500); background: var(--blue-100); }
.segment-destinations { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 180px; max-width: 310px; }
.segment-destinations .badge { white-space: normal; overflow-wrap: anywhere; }
.segment-table .segment-count, .segment-table time { white-space: nowrap; }
.segment-presets > h2 { margin-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.preset-list { margin: 0; padding: 0 20px; }
.preset-list > .preset-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.preset-list > .preset-row:last-child { border-bottom: 0; }
.preset-row > span { flex: 1; min-width: 0; }
.preset-row strong { display: block; font-size: 14px; line-height: 20px; }
.preset-row small { font-size: 14px; line-height: 20px; }
.domain-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.domain-chips span { border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px; font-size: 13px; }
.profile-material { display: flex; align-items: start; flex-wrap: wrap; gap: 20px; }
.profile-material > img { background: #fff; padding: 8px; border-radius: 8px; }
.profile-material > div { flex: 1; min-width: min(240px,100%); }
.profile-material pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0 0 16px; font: 12px/20px Consolas, monospace; }
.profile-material-actions { gap: 16px; }
@media (max-width: 900px) {
  .main { padding: 28px 24px 48px; }
  .permission-row { grid-template-columns: 145px 1fr; }
}
@media (max-width: 680px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  :root { --shell-header-height: 60px; --mobile-nav-height: 56px; --mobile-chrome-height: calc(var(--shell-header-height) + var(--mobile-nav-height)); }
  html:has(.header) { scroll-padding-top: calc(var(--mobile-chrome-height) + 16px); scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .header { padding: 12px 16px; gap: 12px; }
  .header .brand-name { font-size: 14px; line-height: 18px; }
  .app-version { font-size: 12px; }
  .layout { display: block; padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* Menú bajo la marca: ocupa su fila y sigue accesible al desplazar la página. */
  .sidebar { position: sticky; inset: var(--shell-header-height) 0 auto; height: var(--mobile-nav-height); width: 100%; display: flex; flex-direction: row; align-items: stretch; gap: 0; padding: 0; z-index: 20; overflow: visible; border: 0; border-bottom: 1px solid var(--line); }
  .sidebar-links,.sidebar-bottom { display: contents; }
  .sidebar .nav-item,.sidebar .account-header-wrap { flex: 1; min-width: 44px; display: flex; justify-content: center; }
  .sidebar .nav,.sidebar .account-trigger { width: 100%; min-width: 44px; height: calc(var(--mobile-nav-height) - 1px); border-radius: 0; }
  .sidebar .nav[aria-current=page]::after { inset: auto 0 0; width: auto; height: 4px; }
  .nav-tooltip { position-area: bottom center; margin: 12px 0; }
  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .main { padding: 24px 16px 48px; }
  .page-navigation { padding: 4px 16px; min-height: 52px; gap: 12px; }
  .breadcrumbs { font-size: 13px; }
  .breadcrumbs a { min-height: 44px; display: flex; align-items: center; }
  .main:has(> .loading-page) { min-height: calc(100dvh - var(--mobile-chrome-height) - 52px); }
  .has-settings .main:has(> .loading-page) { min-height: calc(100dvh - var(--mobile-chrome-height) - 120px); }
  .account-menu[popover] { inset: calc(var(--mobile-chrome-height) + 8px) 16px auto auto; max-height: calc(100dvh - var(--mobile-chrome-height) - 24px - env(safe-area-inset-bottom, 0px)); }
  .panel-body,.panel-head { padding: 20px; }
  .security-row { padding: 20px; }
  .panel-body > .security-row { margin: 20px -20px -20px; }
  .service-cards { grid-template-columns: 1fr; }
  .service-title { flex-wrap: wrap; }
  .permission-row { grid-template-columns: 1fr; padding: 16px 20px; }
  .permission-progress { display: none; }
  .uptime-row { gap: 10px; flex-wrap: wrap; }
  .uptime-bars { flex-basis: 100%; }
  .uptime-bars { gap: 2px; }
  .console-toolbar { align-items: start; flex-direction: column; }
  .user-hero { flex-wrap: wrap; }
  .user-hero .account-identity h2 { font-size: 24px; line-height: 32px; }
  .filters { display: grid; grid-template-columns: minmax(0,1fr); padding: 20px; }
  .filters .filter,.filters .search { min-width: 0; width: 100%; }
  .filters .input { font-size: 16px; }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-grid > .wide { grid-column: auto; }
  .page-head > .actions { flex-wrap: wrap; flex-shrink: 1; gap: 12px; }
  .page-head > .actions .btn { min-height: 44px; }
  .console-toolbar button,.console-footer button { min-height: 44px; }
  .console-footer button { min-width: 44px; }
}
@media (max-width: 380px) {
  .header { padding-inline: 12px; gap: 8px; }
  .header .brand { gap: 8px; }
  .header .brand-name { font-size: 13px; }
  .main { padding-inline: 12px; }
  .panel-body,.panel-head,.service-card,.uptime-panel { padding: 16px; }
  .profile-control-row { grid-template-columns: minmax(0,1fr); }
  .profile-control-row > .btn { justify-self: start; }
  .quota-options { margin-left: 0; }
  .detail-list > div { flex-direction: column; gap: 4px; }
  .detail-list dd { text-align: left; }
}

/* Ajustes: navegación contextual junto a la barra principal. */
.layout.has-settings { grid-template-columns: 72px 224px minmax(0,1fr); }
.settings-sidebar { position: sticky; top: var(--shell-header-height); align-self: start; height: calc(100dvh - var(--shell-header-height)); padding: 24px 12px; border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
.settings-submenu-title { padding: 8px 12px 16px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.settings-submenu { display: grid; gap: 4px; }
.settings-submenu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; line-height: 20px; }
.settings-submenu a[aria-current=page] { background: var(--blue-100); color: var(--blue-500); font-weight: 600; }
.settings-submenu a:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
@media (hover: hover) { .settings-submenu a:hover { text-decoration: none; background: var(--soft); color: var(--ink); } .settings-submenu a[aria-current=page]:hover { background: var(--blue-100); color: var(--blue-500); } }
.settings-mobile-toggle { display: none; }
@media (max-width: 900px) {
  .layout.has-settings { display: grid; grid-template-columns: 72px minmax(0,1fr); grid-template-rows: auto 1fr; }
  .has-settings > .sidebar { grid-row: 1 / span 2; }
  .settings-sidebar { grid-column: 2; position: static; height: auto; padding: 12px 24px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .has-settings > .workspace { grid-column: 2; }
  .settings-submenu-title { display: none; }
  .settings-mobile-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
  .settings-mobile-toggle > span:first-child { display: flex; align-items: center; gap: 10px; }
  .settings-mobile-toggle[aria-expanded=true] > .icon { transform: rotate(180deg); }
  .settings-mobile-toggle:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
  .settings-sidebar:not(.is-open) .settings-submenu { display: none; }
  .settings-submenu { padding-top: 8px; }
}
@media (max-width: 680px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  .layout.has-settings { display: block; }
  .settings-sidebar { padding: 12px 16px; }
}

/* Identidad compacta en tablas; las etiquetas de cuenta conservan su estilo. */
.group-table-name { display: inline-flex; align-items: center; gap: 12px; min-height: 24px; }
.group-table-name > .icon { flex: none; color: var(--blue-500); }
.audit-filter-panel { margin-bottom: 24px; }
.audit-filters { display: grid; grid-template-columns: minmax(150px,1fr) minmax(150px,1fr) repeat(2,minmax(138px,.72fr)) auto; align-items: end; gap: 16px; padding: 24px; }
.audit-filters > .field { min-width: 0; margin: 0; }
.audit-filters > .form-error { grid-column: 1 / -1; }
.audit-filter-actions { display: flex; align-items: center; gap: 12px; }
.audit-filter-actions .btn { min-width: 76px; }
.audit-results { margin: 0; }
/* Filtros, resultados y paginación siempre tienen superficies independientes. */
.collection-results { margin: 0; }
.collection-filters { margin-bottom: 24px; }
.collection-filters > .filters { border-bottom: 0; }
.pagination { border-radius: 14px; }
.warning-results { display: grid; gap: 12px; }
.warning-results > .notice { margin: 0; }
#warning-collection:not(:empty) { margin-bottom: 24px; }
.assignment-dialog .assignment-filters { margin: 0 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.assignment-dialog .assignment-list { border-radius: 14px; background: var(--surface); }
@media (max-height: 500px) {
  .assignment-dialog .modal-head { padding: 12px 16px; }
  .assignment-dialog .drawer-body { padding: 12px 16px; overflow-y: auto; }
  .assignment-dialog .assignment-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 12px; gap: 12px; }
  .assignment-dialog #assignment-collection { min-height: 190px; }
}
@media (min-width: 481px) { .audit-filters > .field > label { min-height: 32px; } }
@media (max-width: 1200px) {
  .audit-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .audit-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .audit-filters { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .audit-filter-actions { justify-content: stretch; }
  .audit-filter-actions .btn { flex: 1; }
}