/* Corporativo (1.5.0): estilo elegido el 12 de octubre de 2026, opción 3 de design/maquetas-sobrias.html,
   con el oscuro grafito de la opción 6 y el acceso con candado (design/version-final.html).
   Cabecera y barra INK, contenido claro con tarjetas de sombra suave, un solo acento azul y movimiento sobrio:
   sin auroras, vidrio ni halos. Misma estructura, rutas, iconos y comportamiento. Claro parte de los tokens
   Omnica; Oscuro es una adaptación propia. Solo presentación: los SVG oficiales no cambian y no hay estilos
   en línea (CSP). */

/* ---------- 1. Tokens ---------- */
:root {
  --co-radius: 8px; --co-radius-control: 6px; --co-radius-menu: 10px; --co-radius-login: 12px;
  --co-ease: cubic-bezier(.2, .8, .2, 1); --co-spring: cubic-bezier(.3, 1.3, .5, 1);
  --co-header: #1e2248; --co-header-line: #1e2248; --co-header-ink: #fff; --co-header-muted: rgba(255, 255, 255, .72);
  --co-rail: #1e2248; --co-rail-ink: #aeb3d9; --co-rail-hover: #262b57; --co-rail-sel: #2d336c; --co-rail-ink-active: #fff; --co-rail-indicator: #4c8dff;
  --co-strip: #fff; --co-progress: #4c8dff;
  --co-card-line: #e3e7eb; --co-line: #e9ecee;
  --co-card-shadow: 0 1px 2px rgba(30, 34, 72, .06), 0 2px 8px rgba(30, 34, 72, .05);
  --co-card-shadow-hover: 0 2px 4px rgba(30, 34, 72, .07), 0 8px 20px rgba(30, 34, 72, .08);
  --co-pop: #fff; --co-pop-shadow: 0 8px 24px rgba(30, 34, 72, .14), 0 1px 3px rgba(30, 34, 72, .08);
  --co-login-shadow: 0 10px 30px rgba(30, 34, 72, .12);
  --co-tint: rgba(30, 34, 72, .035); --co-tint-strong: rgba(30, 34, 72, .07);
  --co-field: #fff; --co-field-line: #c7cdd4; --co-field-hover: #8a96a6;
  --co-tile: #f4f6f8; --co-tile-ink: #4f5a6b;
  --co-focus-ring: rgba(0, 94, 235, .22); --co-backdrop: rgba(30, 34, 72, .4);
  --co-console: #f4f6f8;
  --co-cta-top: #0068ff; --co-cta-bottom: #005bd5; --co-cta-hover: #0052cc; --co-cta-pressed: #0043a7; --co-cta-ink: #fff; --co-cta-line: transparent;
  --co-danger-top: #d63a3a; --co-danger-bottom: #c2302f; --co-danger-hover: #b73232; --co-danger-pressed: #972929;
  /* Candado del acceso */
  --co-art: #1e2248; --co-art-edge: #1e2248; --co-art-shield: rgba(255, 255, 255, .62); --co-art-lock: #fff; --co-art-line: rgba(255, 255, 255, .16); --co-art-accent: #7aaeff; --co-art-faint: rgba(255, 255, 255, .2);
}
/* Oscuro grafito: grises neutros de la opción 6 y un único acento. */
:root[data-theme=dark] {
  color-scheme: dark;
  --white: #16171b; --surface: #16171b; --ink: #f1f2f4; --midnight: #d3d5db;
  --grey-100: #121316; --grey-200: #1c1d22; --grey-300: #202126; --grey-400: #26272d; --grey-500: #2e2f36;
  --grey-600: #4a4c55; --grey-700: #8a8e98; --grey-800: #a4a8b2; --grey-900: #b8bbc3;
  --blue-100: rgba(91, 140, 246, .14); --blue-200: rgba(91, 140, 246, .3); --blue-500: #8db0f8; --blue-600: #a9c2fa;
  --green-100: rgba(75, 174, 139, .12); --green-200: rgba(75, 174, 139, .26); --green-500: #4bae8b; --green-700: #6cc6a4; --green-900: #8fd6ba;
  --red-100: rgba(224, 106, 106, .12); --red-200: rgba(224, 106, 106, .26); --red-600: #e06a6a; --red-700: #ee8b8b; --red-900: #f5b3b3;
  --yellow-100: rgba(211, 160, 66, .12); --yellow-200: rgba(211, 160, 66, .26); --yellow-900: #e3ba68;
  --purple-100: rgba(169, 139, 255, .16); --purple-500: #c2a8ff;
  --bg: #101114; --muted: #a4a8b2; --line: #26272d; --soft: #1c1d22;
  /* Acento de acción en oscuro: blanco con texto grafito; los enlaces y el foco siguen en azul #8DB0F8. */
  --primary: #ecedef; --primary-dark: #e4e6ea; --on-primary: #111216;
  --primary-top: #ecedef; --primary-bottom: #ecedef; --primary-hover: #ffffff; --primary-pressed: #d5d7dc;
  --nav-bg: #15161a; --nav-ink: #8b909b; --nav-hover: #1d1e23;
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .4); --shadow-8: 0 6px 16px rgba(0, 0, 0, .4); --shadow-16: 0 16px 36px rgba(0, 0, 0, .5);
  --co-header: #15161a; --co-header-line: #26272d; --co-header-muted: #a4a8b2;
  --co-rail: #15161a; --co-rail-ink: #8b909b; --co-rail-hover: #1d1e23; --co-rail-sel: #212227; --co-rail-indicator: #f1f2f4;
  --co-strip: #121316; --co-progress: #f1f2f4;
  --co-card-line: #26272d; --co-line: #26272d;
  --co-card-shadow: 0 1px 2px rgba(0, 0, 0, .3); --co-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .25);
  --co-pop: #1c1d22; --co-pop-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --co-login-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  --co-tint: rgba(255, 255, 255, .03); --co-tint-strong: rgba(255, 255, 255, .06);
  --co-field: #121316; --co-field-line: #35363e; --co-field-hover: #5a5c66;
  --co-tile: #1c1d22; --co-tile-ink: #c3c6ce;
  --co-focus-ring: rgba(141, 176, 248, .26); --co-backdrop: rgba(0, 0, 0, .6);
  --co-console: #0c0d0f;
  --co-cta-top: var(--primary-top); --co-cta-bottom: var(--primary-bottom); --co-cta-hover: var(--primary-hover); --co-cta-pressed: var(--primary-pressed); --co-cta-ink: var(--on-primary);
  --co-danger-top: #c94545; --co-danger-bottom: #b73a3a; --co-danger-hover: #c94545; --co-danger-pressed: #8f2d2d;
  --co-art: #0d0e11; --co-art-edge: #26272d; --co-art-shield: rgba(255, 255, 255, .55); --co-art-lock: #f1f2f4; --co-art-line: rgba(255, 255, 255, .13); --co-art-accent: #f1f2f4; --co-art-faint: rgba(255, 255, 255, .16);
}

/* ---------- 2. Estructura: cabecera, barra de iconos, ruta y ajustes ---------- */
:root[data-theme] .header { position: sticky; background: var(--co-header); border-bottom: 1px solid var(--co-header-line); color: var(--co-header-ink); }
:root[data-theme] .header .brand-name { color: var(--co-header-ink); }
:root[data-theme] .header .app-version { color: var(--co-header-muted); }
.brand [data-brand-mark] { transition: transform .4s var(--co-spring); }
@media (hover: hover) { .brand:hover [data-brand-mark] { transform: rotate(-6deg); } }
/* Estado de servicios: icono oficial de servidor (máscara del SVG con currentColor) y una marca de color; al pulsarlo
   abre el detalle. La versión real queda en el extremo derecho como etiqueta. */
.header-status { display: flex; align-items: center; margin-left: auto; }
.header-status + .app-version { margin-left: 12px; }
.header-status-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--co-header-ink); }
@media (hover: hover) { .header-status-button:hover { background: rgba(255, 255, 255, .08); } }
.header-status-button:focus-visible { outline: 2px solid var(--co-header-ink); outline-offset: 2px; }
.header-status:has(.header-status-panel:popover-open) .header-status-button { background: rgba(255, 255, 255, .1); }
/* Con :root[data-theme] gana a `:root[data-theme=dark] .icon` (gris secundario) de app.css: tinta de la cabecera, como en la maqueta. */
:root[data-theme] .header-status-button .icon { color: inherit; }
.header-status-button .icon img { visibility: hidden; }
.header-status-button .icon::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask: var(--icon-mask) center / 100% 100% no-repeat; -webkit-mask: var(--icon-mask) center / 100% 100% no-repeat; }
/* La marca y su pulso quedan fuera de la caja de 24 px del icono oficial, con 2 px de holgura para posiciones
   fraccionarias: nunca tapan ni tiñen su trazo. */
.header-status-mark { position: absolute; right: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--status-color); }
.header-status-mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--status-color); opacity: 0; }
/* 1.11.0 (petición del propietario): el pulso de Estado también en la marca y en los puntos del detalle, en los tres
   estados con lectura (en línea, sin respuesta y mantenimiento); sin datos, el gris queda fijo. */
.header-status-button:is(.healthy, .maintenance, .unavailable) .header-status-mark::after { animation: service-pulse 2.4s ease-out infinite; }
.header-status-button.healthy { --status-color: #4cd3a0; } .header-status-button.maintenance { --status-color: #8db4ff; }
.header-status-button.unavailable { --status-color: #ff8f8f; } .header-status-button.unknown { --status-color: #a4a8b2; }
:root[data-theme=dark] .header-status-button.healthy { --status-color: #6cc6a4; } :root[data-theme=dark] .header-status-button.maintenance { --status-color: #a3bcf2; }
:root[data-theme=dark] .header-status-button.unavailable { --status-color: #ee8b8b; } :root[data-theme=dark] .header-status-button.unknown { --status-color: #8a8e98; }
:root[data-theme] .header .app-version { padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 6px; color: var(--co-header-ink); font: 600 12px/18px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; }
:root[data-theme=dark] .header .app-version { border-color: #35363e; }
.header-status-panel[popover] { position: fixed; inset: calc(var(--shell-header-height) + 8px) 16px auto auto; margin: 0; width: min(300px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--co-card-line); border-radius: var(--co-radius-menu); background: var(--co-pop); color: var(--ink); box-shadow: var(--co-pop-shadow); text-align: left; }
.header-status-title { margin: 0 4px 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.header-status-panel ul { display: grid; gap: 2px; margin: 0 0 4px; padding: 0; list-style: none; }
.header-status-panel li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px; border-radius: var(--co-radius-control); font-size: 14px; line-height: 20px; }
.header-status-panel li.healthy { --service-color: var(--green-700); } .header-status-panel li.maintenance { --service-color: var(--blue-500); }
.header-status-panel li.unavailable { --service-color: var(--red-700); } .header-status-panel li.unknown { --service-color: var(--muted); }
.header-status-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--service-color); }
.header-status-dot::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: var(--service-color); opacity: 0; }
.header-status-panel li:is(.healthy, .maintenance, .unavailable) .header-status-dot::after { animation: service-pulse 2.4s ease-out infinite; }
.header-status-name { flex: 1; font-weight: 600; }
.header-status-state { color: var(--muted); }
.header-status-panel .link-btn { display: inline-flex; min-height: 40px; align-items: center; padding: 0 8px; }

/* Barra fina de progreso al cambiar de página (motion.js añade is-nav). */
/* La barra de Actualizar recorre la cabecera y sale por la derecha: sin recorte ensanchaba la página y aparecía una
   barra de desplazamiento horizontal mientras cargaba (1.8.0). clip no crea desplazamiento ni afecta a sticky. */
:root[data-theme] .header { overflow-x: clip; }
.header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--co-progress); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.header.is-nav::after { animation: co-progress .7s var(--co-ease) both; }
:root[data-theme] .sidebar { background: var(--co-rail); border-right: 0; }
:root[data-theme] .sidebar .nav { color: var(--co-rail-ink); background: transparent; transition: color .2s var(--co-ease), background-color .2s var(--co-ease); }
:root[data-theme] .sidebar .nav[aria-current=page] { color: var(--co-rail-ink-active); background: var(--co-rail-sel); }
:root[data-theme] .sidebar .nav[aria-current=page]::after { width: 3px; background: var(--co-rail-indicator); animation: co-indicator .32s var(--co-ease) both; }
@media (hover: hover) {
  :root[data-theme] .sidebar .nav:not([aria-current=page]):hover { background: var(--co-rail-hover); color: #fff; }
  :root[data-theme] .sidebar .nav:hover .icon { color: inherit; }
}
:root[data-theme] .sidebar .nav:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* La selección se desliza desde la anterior (motion.js) por debajo de los enlaces. */
.sidebar .nav-item, .sidebar .account-header-wrap { position: relative; z-index: 1; }
.nav-glide { position: absolute; left: 0; top: 0; z-index: 0; width: var(--glide-w, 0); height: var(--glide-h, 0); background: var(--co-rail-sel); opacity: .9; pointer-events: none; transform: translate(var(--glide-x, 0), var(--glide-y, 0)); transition: transform .32s var(--co-ease), opacity .2s ease .24s; }
.nav-glide.is-done { opacity: 0; }
:root[data-theme] .sidebar .account-trigger { box-shadow: none; outline: none; }
/* Los anillos rodean la foto o las iniciales, nunca la caja del botón (en móvil es una celda rectangular), y quedan
   dentro de sus 44 px para no tocar la selección de Ajustes. */
:root[data-theme] .sidebar .account-trigger .account-avatar { transition: box-shadow .2s var(--co-ease); }
@media (hover: hover) { :root[data-theme] .sidebar .account-trigger:hover { background: transparent; } :root[data-theme] .sidebar .account-trigger:hover .account-avatar { box-shadow: 0 0 0 2px var(--co-rail), 0 0 0 4px rgba(255, 255, 255, .35); } }
:root[data-theme] .sidebar .account-trigger:focus-visible .account-avatar, .account-header-wrap:has(.account-menu:popover-open) .account-trigger .account-avatar { box-shadow: 0 0 0 2px var(--co-rail), 0 0 0 4px var(--co-rail-indicator); }
.sidebar-bottom .account-header-wrap { margin-top: 4px; }
/* En la fila móvil el botón del avatar ocupa toda su celda: el retrato va en el centro, no pegado al icono anterior (1.9.0). */
.sidebar .account-trigger { justify-content: center; }
/* Alta de la cuenta (1.9.0): 8 px entre título y texto y 16 px hasta la acción, la imagen o el formulario siguiente. */
.setup .panel-body > h2 + p { margin-top: 8px; }
.setup .panel-body > :is(p, .notice, details) + :is(.btn, form, .recovery, .notice, .actions, details) { margin-top: 16px; }
.setup .panel-body > p + .qr { margin-top: 16px; }
/* El número del paso no actual medía 4,31:1 sobre su círculo en Claro: el gris del texto secundario sobre superficies tintadas. */
:root[data-theme=light] .step:not(.current) b { color: #4f5a6b; }
:root[data-theme] .nav-tooltip, :root[data-theme] .action-tooltip { border: 1px solid var(--co-card-line); border-radius: var(--co-radius-control); background: var(--co-pop); color: var(--ink); box-shadow: var(--co-pop-shadow); }
:root[data-theme] .page-navigation { background: var(--co-strip); border-bottom-color: var(--co-card-line); }
.breadcrumbs a { padding: 4px 6px; border-radius: 6px; transition: color .15s, background-color .15s; }
@media (hover: hover) { .breadcrumbs a:hover { background: var(--co-tint-strong); text-decoration: none; } }
.breadcrumbs [aria-current=page] { animation: co-fade .3s var(--co-ease) both; }
:root[data-theme] .settings-sidebar { background: var(--surface); border-right-color: var(--co-card-line); }
.settings-submenu a { border-radius: var(--co-radius-control); transition: background-color .15s, color .15s; }
:root[data-theme] .settings-mobile-toggle { border-color: var(--co-field-line); border-radius: var(--co-radius-control); background: var(--surface); }
.settings-mobile-toggle > .icon { transition: transform .25s var(--co-ease); }
@media (max-width: 900px) { :root[data-theme] .settings-sidebar { border-bottom-color: var(--co-card-line); } }

/* Pestañas bajo el título: sin franja. Las páginas internas llevan una ruta corta sobre el título y Ajustes, como
   Mi perfil, presenta sus apartados en pestañas con una línea de resumen y su ayuda. */
/* El relleno del hover queda dentro de la ruta: la ruta se adelanta 6 px para alinear el texto con el título. */
.page-path { margin: 0 0 6px -6px; }
.page-path .breadcrumbs { gap: 2px 0; font-size: 13px; line-height: 18px; }
.page-path .breadcrumbs li { gap: 2px; }
.page-path .breadcrumbs a { font-weight: 600; }
.settings-tabs { margin: -8px 0 20px; }
/* El apartado activo conserva su título para lectores de pantalla sin repetirlo a la vista (ya es la pestaña). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; }
.sub-head-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sub-head .page-description { margin: 0; }
.sub-head > .actions { flex-shrink: 0; }
:root[data-theme=dark] .account-tabs a[aria-current=page]::after, :root[data-theme=dark] .view-tabs .btn[aria-pressed=true]::after { background: var(--ink); }
@media (max-width: 680px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  .settings-tabs { overflow-x: auto; scrollbar-width: none; }
  .sub-head { align-items: flex-start; }
  .sub-head > .actions { width: 100%; }
}

/* ---------- 3. Superficies ---------- */
:root[data-theme] :is(.panel, .stat, .segment) { background: var(--surface); border: 1px solid var(--co-card-line); border-radius: var(--co-radius); box-shadow: var(--co-card-shadow); }
:root[data-theme] .panel-head { border-bottom-color: var(--co-line); }
:root[data-theme] :is(.pagination, .editor-actions, .console-toolbar, .console-footer) { background: var(--surface); border: 1px solid var(--co-card-line); border-radius: var(--co-radius); box-shadow: var(--co-card-shadow); }
:root[data-theme] .console-body { background: var(--co-console); border: 1px solid var(--co-card-line); border-radius: var(--co-radius); }
:root[data-theme] .notice { border-radius: var(--co-radius); }
:root[data-theme] .notice:not(.warning):not(.error):not(.success) { background: var(--co-tint-strong); }
:root[data-theme] .form-error { border-radius: var(--co-radius-control); }
:root[data-theme] :is(.code, .recovery code, .credential-box code, .profile-material pre) { border-color: var(--co-card-line); border-radius: var(--co-radius); background: var(--co-tint); }
:root[data-theme] .qr, .profile-material > img { border-radius: var(--co-radius); box-shadow: var(--co-card-shadow); }
:root[data-theme] :is(.security-box, .assignment-selected, .account-email-proof, .profile-choice, .group-choice, .destination-chip, .identity-group, .domain-chips span) { border-color: var(--co-card-line); }
:root[data-theme] :is(.security-box, .assignment-selected) { border-radius: var(--co-radius); background: var(--co-tint); }
/* Sin cuenta elegida: hueco punteado del mismo tamaño que la foto (opción 1 del propietario, 1.6.1). */
.assignment-slot { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px dashed var(--co-field-hover); box-sizing: border-box; }
:root[data-theme] .account-email-proof { border-radius: var(--co-radius); background: var(--co-tint); }
:root[data-theme] .account-hero { border-bottom-color: var(--co-line); }
:root[data-theme] .security-row, :root[data-theme] .profile-control-row + .profile-control-row, :root[data-theme] .permission-row, :root[data-theme] .preset-list > .preset-row { border-color: var(--co-line); }
.empty > .icon { margin: 14px 0 30px; border-radius: 50%; box-shadow: 0 0 0 14px var(--co-tile); }
:root[data-theme=dark] .empty > .icon { color: var(--co-tile-ink); }

/* ---------- 4. Botones planos: superficie, borde fino y estados diferenciados ---------- */
:root[data-theme] .btn { border: 1px solid var(--co-field-line); border-radius: var(--co-radius-control); background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(30, 34, 72, .06); transition: background-color .15s var(--co-ease), border-color .15s var(--co-ease), color .15s, transform .12s var(--co-ease); }
:root[data-theme=dark] .btn { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
:root[data-theme] .btn .icon { transition: transform .25s var(--co-spring); }
/* Todos los botones con texto llevan su icono oficial, también los principales (decisión del propietario del 13 de
   octubre de 2026). El canal alfa del SVG original hace de máscara con el color del texto del botón, en Claro y en
   Oscuro: blanco sobre el azul, grafito sobre el blanco y rojo en las acciones de peligro. El archivo no cambia. */
:root[data-theme] .btn .icon { display: inline-block; color: inherit; }
@supports (mask-image: url('/static/assets/omnica-icons/info.svg')) {
  :root[data-theme] .btn .icon img { visibility: hidden; }
  :root[data-theme] .btn .icon::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
:root[data-theme] .btn.primary:has(.icon) { padding-left: 16px; }
/* Separación óptica (1.7.0): los iconos oficiales recortados (flechas, chevron, cerrar, más, actualizar…) declaran su
   hueco interno en --icon-left y --icon-width. El icono inicial lo compensa con márgenes para que su distancia al
   texto y al borde se vea igual que la de los iconos de 24 px. El SVG, su caja y sus insets no cambian. */
:is(.btn:not(.icon-only):not(.compact), .login-ghost, .mail-varbtn, .mail-seg button, .mail-subnav a) > .icon:first-child { margin-left: min(0px, calc(2px - var(--icon-left))); margin-right: min(0px, calc(var(--icon-left) + var(--icon-width) - 22px)); }
/* Todos los botones con texto miden lo mismo (40 px; 44 px en táctil y hasta 680 px), lleven icono o no y sean
   principales o secundarios: Actualizar y Crear perfil quedaban a 36 y 42 px uno junto al otro. */
:root[data-theme] .btn:not(.compact):not(.icon-only):not(.row-icon-action) { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 680px), (pointer: coarse) { :root[data-theme] .btn:not(.compact):not(.icon-only):not(.row-icon-action) { min-height: 44px; } }
@media (hover: hover) {
  :root[data-theme] .btn:hover:not(:disabled) { background: var(--grey-100); border-color: var(--co-field-hover); box-shadow: 0 2px 4px rgba(30, 34, 72, .08); }
  :root[data-theme=dark] .btn:hover:not(:disabled) { background: var(--grey-200); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
}
/* Iconos de los botones al pasar el cursor o enfocar con el teclado (1.10.0, petición del propietario: como Renovar desde
   1.5.1, en todos los botones con icono). Cada icono oficial se mueve según su significado; lo que no está en la lista
   crece un 10 %. Solo se transforma el icono (ni su SVG ni el tamaño del botón), sin hover en táctil y nada con
   movimiento reducido. Subir es el chevron girado (icon-up) y conserva el giro. */
:root[data-theme] :is(.row-icon-action, .mail-varbtn, .row-menu [role=menuitem], .account-menu-links :is(a, button)) .icon { transition: transform .25s var(--co-spring); }
.icon-refresh { --icon-hover: rotate(-30deg); }
.icon-plus, .icon-close, .icon-my-location { --icon-hover: rotate(90deg); }
.icon-arrow { --icon-hover: translateX(-3px); }
.icon-next, .icon-logout { --icon-hover: translateX(3px); }
.icon-download, .icon-chevron-down, .icon-filter { --icon-hover: translateY(2px); }
.icon.icon-up { --icon-hover: rotate(180deg) translateY(2px); }
.icon-edit, .icon-search { --icon-hover: rotate(-12deg); }
.icon-trash { --icon-hover: rotate(-10deg); }
.icon-key, .icon-tools { --icon-hover: rotate(-18deg); }
.icon-clock { --icon-hover: rotate(30deg); }
.icon-send { --icon-hover: translate(2px, -2px); }
.icon-copy { --icon-hover: translate(1px, -1px); }
.icon-lock, .icon-email, .icon-server, .icon-user, .icon-user-add { --icon-hover: translateY(-2px); }
.icon-done, .icon-pause, .icon-play, .icon-zoom-in { --icon-hover: scale(1.18); }
.icon-zoom-out { --icon-hover: scale(.86); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root[data-theme] :is(.btn, .row-icon-action, .mail-varbtn, .row-menu [role=menuitem], .account-menu-links :is(a, button)):is(:hover, :focus-visible):not(:disabled) .icon { transform: var(--icon-hover, scale(1.1)); }
}
/* La pulsación es inmediata y termina al soltar. */
:root[data-theme] .btn:active:not(:disabled) { background: var(--grey-300); border-color: var(--co-field-hover); box-shadow: none; transform: scale(.98); transition-duration: 0s; }
/* El degradado vive en background-image sobre un color sólido: al pasar el cursor solo cambia el color, sin
   arrancar desde transparente (evita el parpadeo del fondo oscuro a través del botón blanco). */
:root[data-theme] .btn.primary { border: 1px solid var(--co-cta-line); background-color: var(--co-cta-bottom); background-image: linear-gradient(180deg, var(--co-cta-top), var(--co-cta-bottom)); color: var(--co-cta-ink); box-shadow: 0 1px 2px rgba(0, 30, 90, .18); }
:root[data-theme=dark] .btn.primary, :root[data-theme=dark] .btn.primary:hover:not(:disabled) { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
@media (hover: hover) { :root[data-theme] .btn.primary:hover:not(:disabled) { background-color: var(--co-cta-hover); background-image: none; border-color: var(--co-cta-line); box-shadow: 0 1px 2px rgba(0, 30, 90, .18); } }
:root[data-theme] .btn.primary:active:not(:disabled) { background-color: var(--co-cta-pressed); background-image: none; box-shadow: none; }
:root[data-theme] .btn.danger { color: var(--red-700); border-color: color-mix(in srgb, var(--red-700) 45%, transparent); background: var(--surface); }
@media (hover: hover) { :root[data-theme] .btn.danger:hover:not(:disabled) { background: var(--red-100); border-color: var(--red-700); } }
:root[data-theme] .btn.danger:active:not(:disabled) { background: var(--red-200); }
:root[data-theme] .btn.danger.primary { border: 0; background-color: var(--co-danger-bottom); background-image: linear-gradient(180deg, var(--co-danger-top), var(--co-danger-bottom)); color: #fff; box-shadow: 0 1px 2px rgba(90, 10, 10, .2); }
@media (hover: hover) { :root[data-theme] .btn.danger.primary:hover:not(:disabled) { background-color: var(--co-danger-hover); background-image: none; } }
:root[data-theme] .btn.danger.primary:active:not(:disabled) { background-color: var(--co-danger-pressed); background-image: none; box-shadow: none; }
:root[data-theme] .btn:disabled { background: var(--co-tint); border-color: var(--co-line); color: var(--muted); box-shadow: none; }
:root[data-theme] .btn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
/* Un botón que espera al servidor no cambia de aspecto (1.9.0): solo el cursor de progreso. */
.btn[aria-busy=true] { cursor: progress; }
/* Acciones de fila: iconos sin caja con nombre accesible y burbuja propia. */
:root[data-theme] .row-icon-action { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
@media (hover: hover) {
  :root[data-theme] .row-icon-action:hover:not(:disabled) { background: var(--co-tint-strong); border-color: transparent; box-shadow: none; color: var(--ink); }
  :root[data-theme] .row-icon-action.danger:hover:not(:disabled) { background: var(--red-100); color: var(--red-700); }
  tbody tr:hover .row-icon-action { color: var(--ink); }
}
:root[data-theme] .row-icon-action:active:not(:disabled) { background: var(--co-tint-strong); border-color: transparent; }
:root[data-theme] .row-icon-action[aria-expanded=true] { background: var(--blue-100); color: var(--blue-500); }
/* Variantes que conservan su propio aspecto. */
:root[data-theme] .view-tabs .btn, :root[data-theme] .view-tabs .btn:hover:not(:disabled), :root[data-theme] .view-tabs .btn:active:not(:disabled) { border: 0; border-radius: 8px; background: transparent; box-shadow: none; transform: none; }
:root[data-theme] .modal-head .icon-only { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); border-radius: var(--co-radius-control); }
@media (hover: hover) { :root[data-theme] .modal-head .icon-only:hover:not(:disabled) { background: var(--co-tint-strong); border-color: transparent; color: var(--ink); } }
:root[data-theme] .destination-chip > .btn { border: 0; background: transparent; box-shadow: none; }
:root[data-theme] .quota-presets .btn { border-radius: 999px; }
:root[data-theme] .quota-presets .btn[aria-pressed=true] { color: var(--blue-500); border-color: var(--blue-500); background: var(--blue-100); box-shadow: none; }
:root[data-theme] .pagination-size { transition: background-color .15s, color .15s; }
:root[data-theme] .link-btn { border-radius: var(--co-radius-control); }

/* ---------- 5. Campos, selectores y controles ---------- */
:root[data-theme] .input { min-height: 40px; border-color: var(--co-field-line); border-radius: var(--co-radius-control); background: var(--co-field); transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { :root[data-theme] .input:hover:not(:disabled) { border-color: var(--co-field-hover); } }
:root[data-theme] .input:focus, :root[data-theme] .app-select-trigger[aria-expanded=true] { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--co-focus-ring); }
:root[data-theme] .input:disabled, :root[data-theme] .app-select-trigger:disabled { background: var(--co-tint); }
:root[data-theme] :is(.filters, .audit-filters, .segment-add-row, .assignment-filters, .quota-options) .btn:not(.compact):not(.icon-only) { min-height: 40px; }
.app-select-chevron { transition: transform .25s var(--co-ease); }
.app-select-trigger[aria-expanded=true] .app-select-chevron { transform: rotate(180deg); }
:root[data-theme] .app-control-popover[popover] { border: 1px solid var(--co-card-line); border-radius: var(--co-radius-menu); background: var(--co-pop); box-shadow: var(--co-pop-shadow); }
:root[data-theme=dark] .app-calendar-popover { outline: 0; }
.app-select-option::before { border-radius: var(--co-radius-control); transition: background-color .12s, border-color .12s; }
:root[data-theme] .app-calendar-day { border-radius: var(--co-radius-control); transition: background-color .12s; }
:root[data-theme] .app-calendar-trigger { border-radius: var(--co-radius-control); }
input[type=checkbox] { border-radius: 4px; }
.security-row input.switch::before { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .2s var(--co-ease); }
:root[data-theme=dark] .security-row input.switch:not(:checked) { background: #35363e; border-color: #4a4c55; }
:root[data-theme] :is(.profile-choice, .group-choice) { border-radius: var(--co-radius); background: var(--surface); transition: border-color .15s, background-color .15s, box-shadow .15s; }
@media (hover: hover) { :root[data-theme] :is(.profile-choice, .group-choice):has(input:not(:disabled)):hover { border-color: var(--co-field-hover); } }
:root[data-theme] :is(.profile-choice, .group-choice):has(input:checked) { border-color: var(--blue-500); background: var(--blue-100); box-shadow: inset 0 0 0 1px var(--blue-500); }
:root[data-theme] :is(.quota-choices, .segment-type-options) .profile-choice, :root[data-theme] :is(.quota-choices, .segment-type-options) .profile-choice:has(input:checked) { border-color: transparent; background: transparent; box-shadow: none; }
/* Selector de icono del grupo, «Rejilla compacta» (1.6.1, elegida por el propietario): capa bajo su botón (encima si no
   cabe) con una muesca hacia su centro, título dentro y 43 iconos oficiales en una rejilla de 8. app.js la coloca y la
   muestra cuando ya tiene sitio; el nombre de cada icono aparece en una burbuja al pasar el cursor o enfocar. */
.group-symbols[popover] { position: fixed; inset: auto; margin: 0; width: min(368px, calc(100vw - 32px)); padding: 16px; box-sizing: border-box; overflow: visible; color: var(--ink); }
.group-symbols:not([data-side]) { visibility: hidden; }
:root[data-theme] .group-name-row [popovertarget=group-symbols][data-open] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
:root[data-theme=light] .group-symbols[popover] { filter: drop-shadow(0 0 .6px rgba(30, 34, 72, .45)); }
.symbol-notch { position: absolute; top: -9px; left: var(--notch-x, 14px); width: 16px; height: 16px; background: var(--co-pop); border-left: 1px solid var(--co-card-line); border-bottom: 1px solid var(--co-card-line); border-radius: 0 0 0 4px; transform: rotate(135deg); }
.group-symbols[data-side=top] .symbol-notch { top: auto; bottom: -9px; transform: rotate(-45deg); }
.symbol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.symbol-head strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.symbol-count { color: var(--muted); font-size: 12px; line-height: 16px; }
.symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; }
.group-symbols[data-compact] .symbol-grid { max-height: var(--symbol-grid-max); overflow-y: auto; overscroll-behavior: contain; }
.symbol-choice { position: relative; display: grid; place-items: center; height: 38px; border-radius: 8px; color: var(--co-tile-ink); cursor: pointer; transition: background-color .12s, color .12s; }
.symbol-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
:root[data-theme] .symbol-choice .icon { color: inherit; pointer-events: none; }
@supports (mask-image: url('/static/assets/omnica-icons/info.svg')) {
  .symbol-choice .icon img { visibility: hidden; }
  .symbol-choice .icon::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
@media (hover: hover) { .symbol-choice:not(:has(:checked)):hover { background: var(--co-tint-strong); color: var(--ink); } }
.symbol-choice:has(:checked) { background: var(--primary); color: var(--on-primary); }
.symbol-choice:has(:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.symbol-tip { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 5px 9px; border-radius: var(--co-radius-control); background: var(--ink); color: var(--surface); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .12s; }
@media (hover: hover) { .symbol-choice:hover .symbol-tip { visibility: visible; opacity: 1; } }
.symbol-choice:has(:focus-visible) .symbol-tip { visibility: visible; opacity: 1; }
:root[data-theme] .destination-chip { border-radius: 999px; background: var(--surface); animation: co-fade .25s var(--co-ease); }
:root[data-theme] .identity-group { background: var(--surface); }
.permission-module summary { border-radius: var(--co-radius); transition: background-color .15s; }
@media (hover: hover) { .permission-module summary:hover { background: var(--co-tint); } }
.permission-module summary > .icon:last-child { transition: transform .25s var(--co-ease); }
.permission-module:not([open]) summary > .icon:last-child { transform: rotate(-90deg); }
:root[data-theme] .admin-card-icon { border-radius: var(--co-radius); background: var(--co-tile); color: var(--co-tile-ink); }
#avatar-canvas { box-shadow: 0 0 0 4px var(--surface), var(--co-card-shadow); }
/* Cámara y quitar foto: círculo oscuro propio, legible sobre fotos claras e iniciales. */
:root .account-photo-frame .account-photo-actions { background: rgba(10, 12, 30, .42); }
/* Sin foto se leen las iniciales; en pantallas con cursor los controles aparecen solo al pasar el cursor o enfocar,
   también sin foto. En táctil siguen visibles para poder tocarlos. */
@media (hover: hover) and (pointer: fine) { .account-photo-frame:not(:hover):not(:focus-within) .account-photo-actions { opacity: 0; } }
:root .account-photo-frame .account-photo-actions .row-icon-action, :root .account-photo-frame .account-photo-actions .row-icon-action.danger { background: rgba(10, 12, 30, .58); border-color: rgba(255, 255, 255, .3); }
@media (hover: hover) and (pointer: fine) { :root .account-photo-frame .account-photo-actions .row-icon-action:hover:not(:disabled) { background: rgba(10, 12, 30, .76); border-color: rgba(255, 255, 255, .6); } }

/* ---------- 6. Datos: tablas, insignias, métricas y estado ---------- */
:root[data-theme] th { background: transparent; border-bottom-color: var(--co-line); font-size: 13px; letter-spacing: .01em; }
:root[data-theme] td { border-bottom-color: var(--co-line); }
:root[data-theme] tbody tr { transition: background-color .15s; }
:root[data-theme] tbody tr:hover { background: var(--co-tint); }
:root[data-theme] .badge { min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 600; }
:root[data-theme] .badge:not(.active):not(.paused):not(.limited):not(.expired):not(.revoked):not(.segment-policy) { background: var(--co-tint-strong); color: var(--ink); }
:root[data-theme] .meter { height: 6px; border-radius: 999px; background: var(--co-tint-strong); }
:root[data-theme] .meter progress, :root[data-theme] .meter progress::-webkit-progress-bar { height: 6px; background: transparent; }
:root[data-theme] .meter progress::-webkit-progress-value { border-radius: 999px; background: var(--primary-dark); }
:root[data-theme] .meter progress::-moz-progress-bar { border-radius: 999px; background: var(--primary-dark); }
:root[data-theme=light] .meter progress::-webkit-progress-value { background: #005eeb; }
:root[data-theme=light] .meter progress::-moz-progress-bar { background: #005eeb; }
:root[data-theme] .meter.near progress::-webkit-progress-value { background: #ef8e06; }
:root[data-theme] .meter.near progress::-moz-progress-bar { background: #ef8e06; }
/* Métricas: baldosa neutra con el icono oficial como máscara y color del tema. */
.stat { position: relative; overflow: hidden; transition: box-shadow .2s var(--co-ease), border-color .2s; }
@media (hover: hover) { :root[data-theme] .stat:hover { box-shadow: var(--co-card-shadow-hover); } }
.stat .label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--co-radius); background: var(--co-tile); color: var(--co-tile-ink); }
.stat-icon.up .icon { transform: scaleY(-1); }
:root[data-theme] .stat-icon .icon { color: inherit; }
.stat .value { margin: 14px 0 6px; font-size: 26px; line-height: 32px; letter-spacing: -.2px; }
@supports (mask-image: url('/static/assets/omnica-icons/info.svg')) {
  .stat-icon .icon img { visibility: hidden; }
  .stat-icon .icon::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
/* Estado de servicios: el color solo en el estado, el punto y las celdas; sin halos. */
:root[data-theme] .service-card { position: relative; }
.service-state { transition: color .4s var(--co-ease); }
.uptime-bars { gap: 3px; }
:root[data-theme] .uptime-block { border-radius: 2px; transition: transform .15s var(--co-ease); }
@media (hover: hover) { .uptime-bars .uptime-block:hover { transform: scaleY(1.15); } }
.uptime-legend .uptime-block { border-radius: 50%; }
/* Estado 1.6.1 («Dos tarjetas con pestañas de versión»): Xray y AmneziaWG en una tarjeta cada uno. La marca del título
   resume todas las generaciones; las pestañas llevan el punto de cada una y el estado grande es el de la elegida. */
.service-headline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; min-height: 42px; margin: 20px 0 22px; }
:root[data-theme] .service-headline .service-state { margin: 0; font-size: 20px; line-height: 28px; }
:is(.service-scope, .service-version).healthy { --service-color: var(--green-700); }
:is(.service-scope, .service-version).unavailable { --service-color: var(--red-700); }
:is(.service-scope, .service-version).maintenance { --service-color: var(--blue-500); }
:is(.service-scope, .service-version):is(.unknown, .unconfigured) { --service-color: var(--muted); }
.service-versions { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--co-tint-strong); }
:root[data-theme=dark] .service-versions { background: rgba(0, 0, 0, .32); }
:root[data-theme] .service-version { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--co-radius-control); background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color .15s; }
:root[data-theme] .service-version[aria-selected=true] { background: var(--co-pop); color: var(--ink); box-shadow: var(--co-card-shadow); }
:root[data-theme=dark] .service-version[aria-selected=true] { box-shadow: var(--co-card-shadow), inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (hover: hover) { :root[data-theme] .service-version:hover:not([aria-selected=true]) { color: var(--ink); } }
:root[data-theme] .service-version:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.service-version-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--service-color); }
@media (pointer: coarse) { :root[data-theme] .service-version { min-height: 44px; } }
@media (max-width: 680px) { .service-versions { flex: 1 1 auto; } :root[data-theme] .service-version { flex: 1; padding: 0 10px; } }
:root[data-theme] .console-toolbar button { border-radius: var(--co-radius-control); transition: background-color .15s, color .15s; }
@media (hover: hover) { :root[data-theme] .console-toolbar button:hover:not([aria-pressed=true]) { background: var(--co-tint-strong); color: var(--ink); } }
:root[data-theme] .console-footer button { border-radius: var(--co-radius-control); }
:root[data-theme=light] .console-level { color: var(--green-900); }
:root[data-theme=light] .console-source { color: var(--blue-600); }
@media (hover: hover) { :root[data-theme] .console-footer button:hover:not(:disabled) { background: var(--co-tint-strong); } }
.console-line { border-radius: 4px; }
@media (hover: hover) { .console-line:hover { background: var(--co-tint); } }
.chart .chart-down, .chart .chart-up { transition: opacity .15s; }
@media (hover: hover) { .chart g:hover rect { opacity: .8; } }

/* ---------- 7. Capas flotantes: menús, ayudas, cuenta, diálogos y avisos ---------- */
:root[data-theme] :is(.row-menu, .info-bubble, .group-symbols[popover]) { border: 1px solid var(--co-card-line); border-radius: var(--co-radius-menu); background: var(--co-pop); box-shadow: var(--co-pop-shadow); }
.row-menu { padding: 6px; }
:root[data-theme] .row-menu-item { border-radius: var(--co-radius-control); transition: background-color .12s, color .12s; }
:root[data-theme] .account-menu[popover] { padding: 0; border: 1px solid var(--co-card-line); border-radius: 14px; background: var(--co-pop); box-shadow: var(--co-pop-shadow); overflow: visible; }
/* El contenido se desplaza dentro del cuerpo para que la muesca hacia el avatar pueda salir de la capa. */
.account-menu-body { max-height: inherit; overflow: auto; overflow-x: hidden; padding: 24px 16px 10px; border-radius: inherit; }
/* Escritorio: el avatar queda siempre 36 px sobre el borde inferior y el menú 8 px, así que la muesca se centra en él a
   28 px del pie del menú sin esperar a ningún cálculo, en el tramo recto del borde: la esquina redondeada ocupa los 14 px
   inferiores y, con la muesca más abajo, se veía un escalón entre ambas. */
:root[data-theme] .account-menu[popover] { inset: auto auto 8px 80px; }
.account-menu-notch { position: absolute; z-index: 1; left: -8px; bottom: 21px; width: 14px; height: 14px; background: var(--co-pop); border-left: 1px solid var(--co-card-line); border-bottom: 1px solid var(--co-card-line); border-bottom-left-radius: 3px; transform: rotate(45deg); pointer-events: none; }
:root[data-theme] .account-menu-links { border-top-color: var(--co-line); }
:root[data-theme] .account-menu-links :is(a, button) { border-radius: var(--co-radius-control); color: var(--ink); transition: background-color .15s; }
/* Menú de cuenta «Cabecera centrada» (1.10.0, opción 4 de design/menu-cuenta.html, elegida por el propietario el 14 de
   octubre de 2026): retrato de 56 px, nombre y correo centrados y el grupo como etiqueta tintada sin borde; desde
   1.12.1 la etiqueta lleva el icono de su grupo. Debajo, Mi perfil y Cerrar sesión, y el selector de apariencia a lo
   ancho al pie (1.5.1). */
:root[data-theme] .account-menu[popover] { width: 292px; }
:root[data-theme] .account-menu-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "name" "email" "groups" "links" "theme"; justify-items: center; padding: 20px 12px 0; text-align: center; }
:root[data-theme] .account-menu-body > .account-avatar { grid-area: avatar; width: 56px; height: 56px; margin: 0 0 10px; font-size: 18px; box-shadow: none; }
:root[data-theme] .account-menu-body > h2 { grid-area: name; max-width: 100%; margin: 0; overflow: hidden; font-size: 15px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .account-menu-body > p { grid-area: email; max-width: 100%; margin: 0; overflow: hidden; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .account-menu-body .identity-groups { grid-area: groups; justify-content: center; gap: 6px; max-width: 100%; margin: 10px 0 0; }
:root[data-theme] .account-menu-body .identity-group { height: 20px; min-width: 0; margin: 0; padding: 0 8px 0 5px; gap: 4px; border: 0; border-radius: 6px; background: var(--co-tint-strong); color: var(--ink); font-size: 11px; font-weight: 600; line-height: 20px; }
/* Icono del grupo en la etiqueta (1.12.1, petición del propietario): el mismo SVG del grupo (Omnica o Material) a 14 px,
   con su geometría e insets originales a escala, como máscara con el color del texto en ambos temas; la imagen
   original queda como alternativa. Un nombre largo se recorta con puntos suspensivos en una sola línea. */
:root[data-theme] .account-menu-body .identity-group .icon { --pill-scale: calc(14 / 24); width: 14px; height: 14px; flex: 0 0 14px; color: inherit; }
:root[data-theme] .account-menu-body .identity-group .icon img { left: calc(var(--icon-left) * var(--pill-scale)); top: calc(var(--icon-top) * var(--pill-scale)); width: calc(var(--icon-width) * var(--pill-scale)); height: calc(var(--icon-height) * var(--pill-scale)); }
@supports (mask-image: url('/static/assets/omnica-icons/info.svg')) {
  :root[data-theme] .account-menu-body .identity-group .icon img { visibility: hidden; }
  :root[data-theme] .account-menu-body .identity-group .icon::before { content: ''; position: absolute; left: calc(var(--icon-left) * var(--pill-scale)); top: calc(var(--icon-top) * var(--pill-scale)); width: calc(var(--icon-width) * var(--pill-scale)); height: calc(var(--icon-height) * var(--pill-scale)); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
:root[data-theme] .account-menu-body .identity-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .account-menu-body :is(.account-menu-links, .account-menu-theme) { justify-self: stretch; text-align: left; }
:root[data-theme] .account-menu-body .account-menu-links { grid-area: links; margin-top: 12px; padding-top: 6px; }
:root[data-theme] .account-menu-links :is(a, button) { min-height: 40px; padding: 8px 10px; font-size: 14px; line-height: 20px; }
@media (pointer: coarse) { :root[data-theme] .account-menu-links :is(a, button) { min-height: 44px; } }
:root[data-theme] .account-menu-body .account-menu-theme { grid-area: theme; margin: 6px -12px 0; padding: 10px 12px 12px; border-top: 1px solid var(--co-line); background: var(--co-tint); border-radius: 0 0 13px 13px; }
:root[data-theme] .account-menu-theme .theme-control { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
:root[data-theme] .account-menu-theme .theme-btn { width: auto; height: 30px; border-radius: 999px; }
/* En escritorio la muesca cae sobre la franja de apariencia y toma su mismo tono. */
:root[data-theme] .account-menu-notch { background: linear-gradient(var(--co-tint), var(--co-tint)), var(--co-pop); }
:root[data-theme] .theme-control { background: var(--co-tint-strong); }
:root[data-theme] .theme-btn { transition: background-color .2s, color .2s; }
:root[data-theme] .theme-btn[aria-pressed=true] { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme] .theme-btn:active { transform: scale(.92); }
:root[data-theme] dialog { border: 1px solid var(--co-card-line); border-radius: 12px; background: var(--co-pop); box-shadow: var(--co-pop-shadow); }
:root[data-theme] dialog::backdrop { background: var(--co-backdrop); }
:root[data-theme] .modal-head { border-bottom-color: var(--co-line); }
:root[data-theme] .modal-footer { border-top-color: var(--co-line); background: var(--co-tint); }
:root[data-theme] dialog.assignment-dialog { border-width: 0 0 0 1px; border-radius: 12px 0 0 12px; }
:root[data-theme] .assignment-dialog .assignment-filters, :root[data-theme] .assignment-dialog .assignment-list { border-color: var(--co-card-line); background: var(--surface); }
:root[data-theme] .assignment-row { border-bottom-color: var(--co-line); transition: background-color .15s; }
:root[data-theme] .assignment-row.selected { background: var(--blue-100); }
/* Aviso neutro en Claro: el gris secundario de Corporativo sobre su fondo (4,5:1), como las descripciones. */
:root[data-theme=light] .notice:not(.warning):not(.error):not(.success) { color: #4f5a6b; }
:root[data-theme] .toast { padding-left: 44px; border: 1px solid var(--co-card-line); border-radius: var(--co-radius-menu); background: var(--co-pop); box-shadow: var(--co-pop-shadow); }
.toast::before { content: ''; position: absolute; left: 20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--green-500); }
.toast.error::before { background: var(--red-600); }
/* Aviso de versión nueva (1.6.1): una pestaña abierta antes de publicar sigue con el código anterior hasta recargarla. */
.version-notice { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 16px; max-width: min(460px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid var(--co-card-line); border-radius: var(--co-radius-menu); background: var(--co-pop); color: var(--ink); box-shadow: var(--co-pop-shadow); animation: co-fade .25s var(--co-ease); }
.version-notice p { display: grid; gap: 2px; margin: 0; font-size: 13px; line-height: 18px; }
.version-notice p span { color: var(--muted); }
.version-notice .btn { flex: none; }
@media (max-width: 680px) { .version-notice { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: none; flex-wrap: wrap; } .version-notice .btn { width: 100%; justify-content: center; } }

/* ---------- 8. Pestañas y texto secundario ---------- */
:root[data-theme] :is(.page-description, .page-head p, .breadcrumbs, .breadcrumbs a, .account-tabs a, .view-tabs .btn, .profile-summary .muted, .segment-presets > h2, .login-footer) { color: var(--muted); }
:root[data-theme=light] :is(.page-description, .page-head p, .breadcrumbs, .breadcrumbs a, .account-tabs a, .view-tabs .btn, .profile-summary .muted, .segment-presets > h2, .login-footer) { color: #4f5a6b; }
:root[data-theme] .breadcrumbs [aria-current=page] { color: var(--ink); }
:root[data-theme] :is(.account-tabs a[aria-current=page], .view-tabs .btn[aria-pressed=true]) { color: var(--ink); }
@media (hover: hover) { :root[data-theme] :is(.account-tabs a, .view-tabs .btn):hover:not(:disabled) { color: var(--ink); } :root[data-theme] .breadcrumbs a:hover { color: var(--ink); } }
.account-tabs a[aria-current=page]::after, .view-tabs .btn[aria-pressed=true]::after { animation: co-underline .32s var(--co-ease) both; }
:root[data-theme] .account-tabs, :root[data-theme] .view-tabs { border-bottom-color: var(--co-line); }

/* ---------- 9. Acceso: tarjeta con candado ---------- */
:root[data-theme] .login-page { background: var(--bg); }
/* Con la franja del candado, el 2FA con error puede superar la altura en ventanas estrechas: la barra de
   desplazamiento reserva hueco a ambos lados para que la marca no se desplace al aparecer. */
html:has(.login-page) { scrollbar-gutter: stable both-edges; }
:root[data-theme] .login-shell { width: min(880px, 100%); }
:root[data-theme] .login-card { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1fr); width: 100%; padding: 0; border: 1px solid var(--co-card-line); border-radius: var(--co-radius-login); background: var(--surface); box-shadow: var(--co-login-shadow); overflow: hidden; }
.login-form { min-width: 0; padding: 40px 40px 36px; }
.login-form > p { margin-bottom: 32px; color: var(--muted); font-size: 14px; line-height: 20px; }
:root[data-theme=light] .login-form > p { color: #4f5a6b; }
.login-art { position: relative; display: grid; place-items: center; padding: 32px; background: var(--co-art); border-right: 1px solid var(--co-art-edge); overflow: hidden; }
.login-brand { animation: co-fade .6s var(--co-ease) both; }
.login-card { animation: co-fade .6s var(--co-ease) .05s both; }
.login-form > *, .login-form form > *, .login-fields > * { animation: co-fade .5s var(--co-ease) both; }
.login-form > p { animation-delay: .12s; }
.login-fields > :nth-child(1) { animation-delay: .16s; }
.login-fields > :nth-child(2) { animation-delay: .2s; }
.login-form form > .btn { animation-delay: .24s; }
.login-footer { animation: co-fade .7s var(--co-ease) .3s both; }
#login-totp-field:not([hidden]), #login-trust:not([hidden]), #login-otp-bar:not([hidden]) { animation: co-fade .4s var(--co-ease) both; }
:root[data-theme] .login-card .login-trust { border-top-color: var(--co-line); }
/* «¿Olvidaste tu contraseña?» comparte fila con la etiqueta: no cambia la altura de la tarjeta; el área táctil crece sin moverla. */
.login-password-label { justify-content: space-between; }
.login-card .login-forgot { position: relative; min-height: 0; padding: 0; font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.login-card .login-forgot::after { content: ''; position: absolute; inset: -12px -8px; }
/* Código de verificación «Grandes con punto» (1.7.0, variante 6 de design/codigo-2fa.html, elegida por el propietario):
   una entrada real transparente encima de seis casillas dibujadas. Cada casilla vacía muestra un punto que crece en la
   activa y se convierte en cifra; al completar, una ola recorre las casillas; un código rechazado las marca en rojo.
   Guía para reutilizarlo en otra aplicación: design/componentes/codigo-verificacion/. */
.otp-field { display: grid; gap: 10px; }
.otp-field .field-label { margin: 0; }
.otp { position: relative; --otp-h: 64px; --otp-gap: 10px; --otp-font: 28px; }
.otp-input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; cursor: text; -webkit-text-fill-color: transparent; }
:root[data-theme] .otp .otp-input, :root[data-theme] .otp .otp-input:focus { border: 0; outline: 0; box-shadow: none; }
.otp-input::selection { background: transparent; }
.otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--otp-gap); }
.otp-cell { position: relative; display: grid; place-items: center; min-width: 0; height: var(--otp-h); border: 1px solid var(--co-field-line); border-radius: 12px; background: var(--co-field); color: var(--ink); font: 700 var(--otp-font)/1 var(--font-title); font-variant-numeric: tabular-nums; letter-spacing: 0; transition: border-color .18s var(--co-ease), box-shadow .18s var(--co-ease), background-color .18s var(--co-ease); }
.otp-cell:not(.filled) .otp-digit::before { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--co-field-line); transition: transform .2s var(--co-ease), background-color .2s var(--co-ease); }
.otp-cell.filled { border-color: var(--co-field-hover); }
.otp-cell.filled .otp-digit { animation: co-fade .2s var(--co-ease) both; }
.otp-focus .otp-cell.active { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--co-focus-ring); }
.otp-focus .otp-cell.active:not(.filled) .otp-digit::before { transform: scale(1.5); background: var(--blue-500); }
.otp-field.otp-complete .otp-cell { animation: co-otp-wave .5s var(--co-ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.otp-field.otp-error .otp-cell { border-color: var(--red-700); animation: co-otp-flash .6s var(--co-ease); }
.otp-help { margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; }
:root[data-theme=light] .otp-help { color: #4f5a6b; }
:root[data-theme] .otp-recovery { font: 600 18px/1 var(--font-title); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
:root[data-theme] .otp-recovery::placeholder { letter-spacing: .08em; text-transform: none; font-weight: 500; }
@keyframes co-otp-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-4px); } }
@keyframes co-otp-flash { from { background-color: var(--red-100); } to { background-color: var(--co-field); } }
/* Barra inferior del acceso: «Volver» (Esc en el código) y el código de recuperación, botones planos con su icono. */
.login-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 16px; border-top: 1px solid var(--co-line); }
.login-bar[hidden] { display: none; }
.login-card .login-ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--co-radius-control); background: transparent; color: var(--ink); font: 600 14px/20px var(--font-body); letter-spacing: -.15px; cursor: pointer; transition: background-color .15s var(--co-ease); }
.login-card .login-ghost:first-child { margin-left: -12px; }
.login-card .login-ghost:last-child:not(:first-child) { margin-right: -12px; }
@media (hover: hover) { .login-card .login-ghost:hover { background: var(--co-tint-strong); } .login-card .login-ghost:hover .icon-arrow { transform: translateX(-3px); } }
.login-card .login-ghost:active { transform: scale(.98); }
.login-card .login-ghost:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.login-ghost .icon { color: inherit; transition: transform .25s var(--co-spring); }
@supports (mask-image: url('/static/assets/omnica-icons/info.svg')) {
  .login-ghost .icon img { visibility: hidden; }
  .login-ghost .icon::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
.login-bar kbd { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px; border: 1px solid var(--co-field-line); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); font: 600 11px/1 var(--font-body); }
@media (max-width: 480px) { .otp { --otp-h: 56px; --otp-gap: 7px; --otp-font: 24px; } }
@media (pointer: coarse) { .login-bar kbd { display: none; } .login-card .login-ghost { min-height: 44px; } }
/* Dibujo del candado: escudo, arco, cuerpo y cerradura; el progreso del código lo rodea. */
.lk { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.lk path, .lk rect, .lk circle, .lk ellipse, .lk line { vector-effect: non-scaling-stroke; }
.lk-shield { fill: var(--co-art); stroke: var(--co-art-shield); stroke-width: 2; stroke-linejoin: round; transition: stroke .5s var(--co-ease), fill .5s var(--co-ease); }
.lk-shackle { fill: none; stroke: var(--co-art-lock); stroke-width: 2.6; stroke-linecap: round; transition: transform .6s var(--co-spring); }
.lk-body { fill: var(--co-art); stroke: var(--co-art-lock); stroke-width: 2.6; }
.lk-kh { transform-box: fill-box; transform-origin: 50% 32%; transition: transform .45s var(--co-spring), opacity .25s; }
.lk-kh circle { fill: var(--co-art-lock); }
.lk-kh path { fill: none; stroke: var(--co-art-lock); stroke-width: 3; stroke-linecap: round; }
.lk-check { fill: none; stroke: var(--co-art-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .45s var(--co-ease) .2s; }
.lk-ripple { fill: none; stroke: var(--co-art-accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lk-ring path { fill: none; stroke: var(--co-art-faint); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: stroke .3s var(--co-ease), opacity .4s var(--co-ease); }
.login-art.is-tick .lk-ripple { animation: co-ripple .6s var(--co-ease); }
.login-art[data-busy] .lk-kh { transform: rotate(90deg); }
.login-art[data-step=otp] .lk-ring path, .login-art[data-step=ok] .lk-ring path { opacity: 1; }
.login-art[data-digits='1'] .lk-ring path:nth-child(-n+1), .login-art[data-digits='2'] .lk-ring path:nth-child(-n+2), .login-art[data-digits='3'] .lk-ring path:nth-child(-n+3),
.login-art[data-digits='4'] .lk-ring path:nth-child(-n+4), .login-art[data-digits='5'] .lk-ring path:nth-child(-n+5), .login-art[data-digits='6'] .lk-ring path, .login-art[data-step=ok] .lk-ring path { stroke: var(--co-art-accent); }
.login-art[data-step=ok] .lk-shackle { transform: translateY(-11px); }
.login-art[data-step=ok] .lk-kh { opacity: 0; transform: scale(.4); }
.login-art[data-step=ok] .lk-check { stroke-dashoffset: 0; }
.login-art[data-step=ok] .lk-shield { stroke: var(--co-art-accent); fill: color-mix(in srgb, var(--co-art-accent) 8%, var(--co-art)); }
.login-art.is-shake .lk-lock { animation: co-lock-shake .42s cubic-bezier(.36, .07, .19, .97); }
/* Escaneo: una franja tenue recorre el escudo y revela su trama; se detiene al entrar. */
#lk-dots circle { fill: var(--co-art-accent); }
.lk-band, .lk-scanline { animation: co-scan 5s cubic-bezier(.45, 0, .3, 1) infinite; }
.lk-scanline { stroke: var(--co-art-accent); stroke-width: 1.2; }
.lk-scan { transition: opacity .4s var(--co-ease); }
.login-art[data-step=ok] .lk-scan { opacity: 0; }
/* Guilloche: rosetones finos detrás del escudo, girando muy despacio en sentidos opuestos. */
.login-art { isolation: isolate; }
.lk-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: #fff; pointer-events: none; }
.login-art > .lk { position: relative; z-index: 1; }
.lk-guilloche path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .11; }
.lk-guilloche { transform-box: view-box; transform-origin: 200px 196px; }
.lk-guilloche.g1 { animation: co-turn 120s linear infinite; }
.lk-guilloche.g2 { animation: co-turn 160s linear infinite reverse; }
.lk-guilloche.g3 { animation: co-turn 200s linear infinite; }

/* ---------- 10. Movimiento de páginas (motion.js marca la entrada; las recargas de la misma ruta quedan quietas) ---------- */
#main[data-motion=enter] > :not(.loading-state) { animation: co-page-in .36s var(--co-ease) both; }
#main[data-motion=enter] > :nth-child(2) { animation-delay: .03s; }
#main[data-motion=enter] > :nth-child(3) { animation-delay: .06s; }
#main[data-motion=enter] > :nth-child(4) { animation-delay: .09s; }
#main[data-motion=enter] > :nth-child(n+5) { animation-delay: .12s; }
#main[data-motion=enter] :is(#service-status, #profile-insight, #account-profile-collection, #audit-collection, #user-collection, #group-collection, #warning-collection) > :not(.loading-state) { animation: co-fade .3s var(--co-ease) both; }
#main[data-motion=enter] tbody tr { animation: co-fade .3s var(--co-ease) both; animation-delay: calc(var(--co-i, 0) * 24ms); }
#main[data-motion=enter] .uptime-bars .uptime-block { transform-origin: bottom; animation: co-cell .4s var(--co-ease) both; animation-delay: calc(var(--co-i, 0) * 8ms); }
:root[data-theme] .loading-state { color: var(--blue-500); }

/* Entradas solo con opacidad: no desplazan lo que se mide y son baratas sin GPU. */
@keyframes co-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-cell { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: none; } }
@keyframes co-indicator { from { transform: scaleY(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes co-indicator-x { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes co-progress { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(.86); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* Actualizar (1.5.1, opción B «Barra y destello», elegida por el propietario el 13 de octubre de 2026): la página no
   se vacía ni se mueve. Mientras llegan los datos, el icono gira y una barra fina recorre la cabecera; al terminar, las
   cifras y estados que cambiaron se iluminan un instante (motion.js). */
@keyframes co-spin { to { transform: rotate(360deg); } }
@keyframes co-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes co-changed { 0%, 35% { background-color: var(--co-changed); } 100% { background-color: transparent; } }
:root { --co-changed: rgba(0, 104, 255, .16); }
:root[data-theme=dark] { --co-changed: rgba(236, 237, 239, .14); }
#main[data-refresh=loading] [data-action=reload] .icon { animation: co-spin .8s linear infinite; }
/* La misma barra indica una acción que tarda más de medio segundo (data-working, 1.9.0), sin tocar el botón. */
:root:is([data-refreshing], [data-working]) .header::after { left: 0; right: auto; width: 38%; opacity: 1; transform: translateX(-100%); animation: co-indeterminate 1s var(--co-ease) infinite; }
.co-changed { border-radius: 4px; animation: co-changed 1.6s ease-out; }
@keyframes co-underline { from { transform: scaleX(0); } to { transform: none; } }
@keyframes co-pop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes co-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes co-drawer-in { from { opacity: .4; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes co-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes co-sheet-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes co-ripple { from { opacity: .75; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }
@keyframes co-lock-shake { 15%, 55% { transform: translateX(-4px); } 35%, 75% { transform: translateX(4px); } 100% { transform: none; } }
@keyframes co-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(232px); opacity: 1; } 68%, 100% { transform: translateY(232px); opacity: 0; } }
@keyframes co-turn { to { transform: rotate(360deg); } }
/* Las capas aparecen sin desplazar sus anclas: solo opacidad. */
:is(.row-menu, .info-bubble, .nav-tooltip, .action-tooltip, .app-control-popover, .account-menu, .group-symbols):popover-open { animation: co-pop-in .14s var(--co-ease); }
dialog[open] { animation: co-modal-in .24s var(--co-ease); }
dialog[open]::backdrop { animation: co-fade .2s ease; }
dialog.assignment-dialog[open] { animation: co-drawer-in .3s var(--co-ease); }
.toast:not([hidden]) { animation: co-toast-in .32s var(--co-ease); }

/* ---------- 11. Móvil: tablas como tarjetas, hoja inferior y candado en franja ---------- */
@media (max-width: 900px) {
  :root[data-theme] .login-shell { width: min(460px, 100%); }
  :root[data-theme] .login-card { grid-template-columns: minmax(0, 1fr); }
  .login-art { height: 168px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--co-art-edge); }
  .lk { width: auto; height: 144px; max-width: none; }
  .login-form { padding: 28px; }
  /* El selector de apariencia sigue en la esquina superior derecha de la tarjeta, sobre la franja. */
  .login-card { position: relative; }
  .login-form .login-theme { position: absolute; top: 24px; right: 24px; z-index: 1; }
  .login-form .login-theme .theme-control { background: var(--surface); box-shadow: 0 0 0 1px var(--co-card-line), var(--co-card-shadow); }
}
@media (max-width: 480px) {
  /* En teléfonos la franja cede altura en el segundo paso para que el código y su error quepan sin desplazar. */
  .login-art { height: 124px; transition: height .35s var(--co-ease); }
  .lk { height: 104px; transition: height .35s var(--co-ease); }
  .login-art:is([data-step=otp], [data-step=ok]) { height: 100px; }
  .login-art:is([data-step=otp], [data-step=ok]) .lk { height: 84px; }
  .login-form { padding: 22px; }
}
@media (max-width: 680px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  :root[data-theme] .sidebar { border-right: 0; border-bottom: 1px solid var(--co-header-line); }
  :root[data-theme] .sidebar .nav[aria-current=page]::after { inset: auto 0 0; width: auto; height: 3px; animation-name: co-indicator-x; }
  /* Móvil: el avatar está en la fila de iconos; motion.js mide su centro y la muesca aparece ya colocada. */
  :root[data-theme] .account-menu[popover] { inset: calc(var(--mobile-chrome-height) + 8px) 8px auto auto; }
  .account-menu-notch { left: clamp(14px, calc(var(--notch-x, 50%) - 7px), calc(100% - 22px)); top: -8px; bottom: auto; transform: rotate(135deg); }
  :root[data-theme] .account-menu-notch { background: var(--co-pop); }
  .account-menu:not([data-notch]) .account-menu-notch { visibility: hidden; }
  .header-status-panel[popover] { inset: calc(var(--mobile-chrome-height) + 8px) 16px auto auto; }
  :root[data-theme] :is(.panel, .stat, .segment) { border-radius: var(--co-radius); }
  .stat .label { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stat-icon { width: 30px; height: 30px; }
  .stat .value { font-size: 21px; line-height: 28px; margin: 10px 0 4px; }
  /* Tablas: cada fila es una tarjeta con etiquetas de columna (motion.js las copia del encabezado). */
  .table-wrap { overflow: visible; }
  .table-wrap > table, .table-wrap > table.segment-table { display: block; min-width: 0; }
  .table-wrap > table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-wrap > table > tbody { display: block; }
  .table-wrap > table > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--co-line); }
  .table-wrap > table > tbody > tr:last-child { border-bottom: 0; }
  .table-wrap > table > tbody > tr > td { display: block; height: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
  .table-wrap > table > tbody > tr > td:first-child { grid-column: 1 / -1; padding-right: 52px; }
  .table-wrap > table > tbody > tr > td[data-label]:not(:first-child):not(:has(.row-actions))::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; }
  .table-wrap > table > tbody > tr > td:has(> .row-actions) { position: absolute; top: 10px; right: 8px; }
  .table-wrap > table > tbody > tr > td:has(> span.muted[aria-label]:only-child) { display: none; }
  .table-wrap .segment-identity, .table-wrap .segment-destinations { min-width: 0; max-width: none; }
  .table-wrap .meter { width: 100%; }
  .table-wrap .nowrap { white-space: normal; }
  :root[data-theme] dialog.assignment-dialog { border-radius: 0; }
  /* Menú de acciones como hoja inferior: al alcance del pulgar y sin voltearse junto a la fila. */
  :root[data-theme] .row-menu[popover] { position-area: none; position-try-fallbacks: none; inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px; width: auto; max-width: none; max-height: min(60dvh, 440px); margin: 0; padding: 8px; border-radius: 14px; }
  :root[data-theme] .row-menu-item { min-height: 52px; font-size: 15px; }
  .row-menu:popover-open { animation: co-sheet-in .28s var(--co-ease); }
}
@media (max-width: 380px) {
  .table-wrap > table > tbody > tr { gap: 10px 12px; padding: 14px 12px; }
  .stat .value { font-size: 19px; line-height: 26px; }
  .stat .label { font-size: 12px; line-height: 16px; }
}

/* ---------- 12. Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  #main[data-motion=enter] *, #main[data-motion=enter] > *, .login-page *, .breadcrumbs [aria-current=page], .header.is-nav::after,
  :is(.row-menu, .info-bubble, .nav-tooltip, .action-tooltip, .app-control-popover, .account-menu, .group-symbols):popover-open, dialog[open], dialog[open]::backdrop, .toast:not([hidden]),
  .sidebar .nav[aria-current=page]::after, .row-menu:popover-open, .account-tabs a[aria-current=page]::after, .view-tabs .btn[aria-pressed=true]::after, .destination-chip,
  #main[data-refresh] *, #main[data-refresh] > *, .co-changed, :root:is([data-refreshing], [data-working]) .header::after { animation: none !important; }
  .nav-glide { display: none; }
  .lk-guilloche, .lk-band, .lk-scanline, .header-status-mark::after, .header-status-dot::after { animation: none !important; }
  .lk-band { opacity: 0; }
  .btn, .btn .icon, :is(.row-icon-action, .mail-varbtn, .row-menu [role=menuitem], .account-menu-links :is(a, button)) .icon, .stat, .security-row input.switch::before, .lk-shackle, .lk-kh, .lk-check, .lk-shield, .lk-ring path, .otp-cell, .otp-digit::before, .login-ghost, .login-ghost .icon { transition: none !important; }
  .login-ghost:active, .login-ghost:hover .icon { transform: none !important; }
  .btn:active:not(:disabled) { transform: none !important; }
}

/* Registro «Tabla con detalle» (1.11.0, opción 4 de design/registro-propuestas.html, elegida por el propietario): una
   línea por registro (fecha y hora, acción con su icono, usuario, objeto) y el detalle completo al desplegarla. */
:root[data-theme] .audit-filters { padding: 16px 20px; gap: 12px; }
.audit-filter-summary { display: none; }
.audit-results { overflow: hidden; }
.audit-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 20px; }
.audit-col-when { width: 160px; }
.audit-col-action { width: 31%; }
.audit-col-user { width: 21%; }
.audit-col-toggle { width: 60px; }
.audit-table th { padding: 12px 16px; border-bottom: 1px solid var(--co-line); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 16px; text-align: left; text-transform: uppercase; }
.audit-table td { height: 48px; padding: 0 16px; border-bottom: 1px solid var(--co-line); vertical-align: middle; }
.audit-table tbody > tr.audit-row:nth-last-child(2):not(.open) > td, .audit-table tbody > tr.audit-more:last-child > td { border-bottom: 0; }
.audit-row { cursor: pointer; }
.audit-row > td { transition: background-color .15s var(--co-ease); }
@media (hover: hover) { .audit-row:hover > td { background: var(--co-tint); } }
/* El hover genérico de las tablas (tbody tr:hover, sin límite a ratón) no se aplica a estas filas: así no se queda
   pegado al tocar ni borra la marca de la fila abierta en móvil (1.13.0). */
:root[data-theme] .audit-table tbody tr.audit-row:hover { background-color: transparent; }
/* Regla de las tablas con detalle desplegable (1.13.0, petición del propietario): la fila abierta conserva su fondo y
   solo el detalle va tintado, para distinguir varios abiertos; la marca de 3 px del acento recorre fila y detalle y se
   pinta como fondo, no como sombra interior, que en tablas escaladas deja costuras de 1 px. */
.audit-row.open > td { border-bottom-color: transparent; }
.audit-row.open > td:first-child, .audit-more > td { background-image: linear-gradient(var(--primary), var(--primary)); background-size: 3px 100%; background-repeat: no-repeat; }
.audit-when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-action, .audit-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.audit-action-text, .audit-user > span:last-child, .audit-object { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-icon { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--co-tint-strong); color: var(--ink); }
.audit-icon .icon { transform: scale(.75); }
.audit-icon .icon img { visibility: hidden; }
.audit-icon .icon::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
.audit-user .account-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; }
.audit-object { color: var(--muted); font-size: 13px; }
.audit-toggle-cell { text-align: right; }
:root[data-theme] .audit-table td.audit-toggle-cell { padding: 0 10px 0 0; }
.audit-row .audit-toggle-cell .icon { transition: transform .25s var(--co-ease); }
.audit-row.open .audit-toggle-cell .icon { --icon-hover: rotate(180deg) translateY(2px); transform: rotate(180deg); }
.audit-more[hidden] { display: none; }
.audit-more > td { height: auto; padding: 14px 16px 16px 60px; background-color: var(--co-tint-strong); border-bottom: 1px solid var(--co-line); }
/* El detalle abierto se marca con la fila y el chevron girado; el botón no queda seleccionado como los menús. */
:root[data-theme] .audit-toggle-cell .row-icon-action[aria-expanded=true] { background: transparent; color: inherit; }
:root[data-theme] .audit-filters .field-label { min-height: 32px; }
.audit-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.audit-detail > div { min-width: 0; }
.audit-detail dt { color: var(--muted); font-size: 12px; line-height: 16px; }
.audit-detail dd { margin: 2px 0 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
/* Gris de texto más oscuro en Claro: sobre las filas tintadas, el --muted no llega a 4,5:1. */
:root[data-theme=light] :is(.audit-when, .audit-object, .audit-detail dt, .audit-table th, .audit-filter-summary > span) { color: #4f5a6b; }
@media (max-width: 680px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  /* Filtros plegados en una fila con el resumen de lo aplicado; Filtrar los abre. */
  .audit-filter-summary { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; }
  .audit-filter-summary > span { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
  .audit-filter-summary .btn { flex: none; }
  .audit-filter-panel:not(.open) .audit-filters { display: none; }
  .audit-filter-panel.open .audit-filter-summary { border-bottom: 1px solid var(--co-line); }
  :root[data-theme] .audit-filters { padding: 16px; }
  /* Dos líneas por registro: acción y botón de detalle; debajo, fecha, usuario y objeto. */
  .audit-table, .audit-table > tbody { display: block; }
  .audit-table > colgroup { display: none; }
  .audit-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .audit-table tr.audit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 8px 6px 10px 14px; border-bottom: 1px solid var(--co-line); }
  .audit-table tbody > tr.audit-row:nth-last-child(2):not(.open) { border-bottom: 0; }
  .audit-table tr.audit-row > td { display: block; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  :root[data-theme] .audit-table tr.audit-row.open { background-image: linear-gradient(var(--primary), var(--primary)); background-size: 3px 100%; background-repeat: no-repeat; }
  .audit-table tr.audit-row.open > td:first-child { background-image: none; }
  .audit-action-cell { order: 1; flex: 1 1 calc(100% - 56px); min-width: 0; font-weight: 600; }
  .audit-toggle-cell { order: 2; flex: none; }
  :root[data-theme] .audit-table td.audit-toggle-cell { padding: 0; }
  .audit-when { order: 3; flex: none; padding-left: 38px !important; font-size: 12px; line-height: 16px; }
  .audit-user-cell { order: 4; flex: 0 1 auto; min-width: 0; max-width: 45%; color: var(--muted); font-size: 12px; line-height: 16px; }
  .audit-user-cell .account-avatar { display: none; }
  .audit-object { order: 5; flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 16px; }
  .audit-user-cell::before, .audit-object::before { content: '·'; margin-right: 6px; color: var(--muted); }
  .audit-object:has(> .muted:only-child) { display: none; }
  .audit-user-cell { display: flex !important; }
  .audit-user-cell .audit-user { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .audit-table tr.audit-more { display: block; }
  .audit-table tr.audit-more[hidden] { display: none; }
  .audit-more > td { display: block; padding: 12px 14px 14px 52px; }
  .audit-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  :root[data-theme=light] .audit-user-cell { color: #4f5a6b; }
}

/* Iconos de grupo de Material Symbols (1.12.0, opción 6 de design/iconos-grupo.html). Su SVG es negro: se pintan
   siempre con la máscara y el color del contexto, como los oficiales en Oscuro. En Claro, fuera de botones y del
   selector, toman la tinta #1E2248 de los SVG de Omnica para que no se distingan de ellos. */
@supports (mask-image: url('/static/assets/omnica-icons/info.svg')) {
  .icon-ms img { visibility: hidden; }
  .icon-ms::before { content: ''; position: absolute; left: var(--icon-left); top: var(--icon-top); width: var(--icon-width); height: var(--icon-height); background: currentColor; mask-image: var(--icon-mask); mask-mode: alpha; mask-position: center; mask-size: 100% 100%; mask-repeat: no-repeat; }
}
:root[data-theme=light] .icon-ms { color: #1e2248; }
:root[data-theme=light] :is(.btn, .symbol-choice, .row-icon-action) .icon.icon-ms { color: inherit; }