/*
 * Aiden UI · user-menu
 * CSS module de Arc (registry/components/user-menu/user-menu.module.css) traducido a clases .aui-user-menu-<parte>, con
 * las MISMAS variables de kit/foundation.css (Arc tal cual). Añadido: el blindaje de botones y enlaces frente al CSS
 * agresivo de los paneles, y tres piezas de Aiden (empresa, contador y enlace externo) con tokens de Arc.
 *
 * Correspondencia: .root → .aui-user-menu · .trigger → -trigger · .triggerName → -trigger-name · .chevron → -chevron ·
 * .face → -face · .portrait → -portrait · .initials → -initials · .dot → -dot · .panel → -panel · .header → -header ·
 * .identity → -identity · .nameRow → -name-row · .name → -name · .plan → -plan · .email → -email · .list → -list ·
 * .separator → -separator · .highlight → -highlight · .item → -item · .icon → -icon · .itemLabel → -item-label ·
 * .rise → -rise · .keys → -keys · .key → -key · .row → -row · .rowLabel → -row-label · .segments → -segments ·
 * .thumb → -thumb · .segment → -segment · .spinner → -spinner · .scrim → -scrim · .sheet → -sheet · .handle → -handle
 */

.aui-user-menu { position: relative; display: inline-flex; flex: none; vertical-align: middle; }

/* Blindaje: los paneles ponen fondo, borde, relleno, sombra y alto mínimo a todo <button>/<a> con !important. */
.aui-user-menu-trigger, .aui-user-menu-panel button, .aui-user-menu-panel a { -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; background-image: none !important; text-transform: none !important; text-shadow: none !important; text-decoration: none !important; letter-spacing: inherit !important; min-width: 0 !important; float: none !important; }
.aui-user-menu-panel, .aui-user-menu-panel *, .aui-user-menu-trigger, .aui-user-menu-trigger * { box-sizing: border-box; }

/* El disparador ancla el menú: responde al hover y a la pulsación con color, nunca con escala. */
.aui-user-menu-trigger { --presence-surface: var(--user-menu-surface, var(--surface)); position: relative; display: inline-flex !important; height: 40px !important; min-height: 0 !important; width: auto !important; flex: none; align-items: center; gap: var(--space-2); margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: transparent !important; color: var(--foreground) !important; font: inherit; font-family: var(--font-body) !important; font-size: var(--text-sm) !important; font-weight: 400 !important; line-height: normal !important; letter-spacing: var(--tracking-body) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
.aui-user-menu-trigger[data-name] { padding-right: 10px !important; }
@media (hover: hover) and (pointer: fine) { .aui-user-menu-trigger:hover { --presence-surface: var(--surface-muted); background: var(--surface-muted) !important; } }
.aui-user-menu-trigger[data-state="open"] { --presence-surface: var(--surface-muted); background: var(--surface-muted) !important; }
.aui-user-menu-trigger:active { --presence-surface: color-mix(in oklab, var(--surface-muted), var(--foreground) 8%); background: color-mix(in oklab, var(--surface-muted), var(--foreground) 8%) !important; }
.aui-user-menu-trigger-name { max-width: 11rem; overflow: hidden; font-weight: 500; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.aui-user-menu-chevron { flex: none; margin-left: -2px; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
.aui-user-menu-trigger:hover .aui-user-menu-chevron, .aui-user-menu-trigger[data-state="open"] .aui-user-menu-chevron { color: var(--foreground); }
.aui-user-menu-trigger[data-state="open"] .aui-user-menu-chevron { transform: rotate(180deg); }
@media (max-width: 639px) {
  .aui-user-menu-trigger[data-name] { padding-right: 4px !important; }
  .aui-user-menu-trigger-name, .aui-user-menu-chevron { display: none; }
}

.aui-user-menu-face { position: relative; display: inline-grid; width: var(--face-size); height: var(--face-size); flex: none; }
.aui-user-menu-face[data-size="sm"] { --face-size: 32px; --dot-size: 11px; }
.aui-user-menu-face[data-size="md"] { --face-size: 40px; --dot-size: 12px; }
.aui-user-menu-portrait { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: var(--radius-pill); background: var(--surface-muted); object-fit: cover; object-position: 50% 15%; outline: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent); outline-offset: -1px; user-select: none; }
.aui-user-menu-initials { display: grid; place-items: center; color: var(--text-secondary); font-size: calc(var(--face-size) * .36); font-weight: 500; line-height: 1; }
.aui-user-menu-face .aui-user-menu-dot { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--presence-surface, var(--surface)); }

/* Una marca, tres formas: llena (disponible), con barra (ocupado) y hueca (ausente). Color y forma cambian juntos. */
.aui-user-menu-dot { --dot-color: var(--success); position: relative; display: inline-block; width: var(--dot-size, 10px); height: var(--dot-size, 10px); flex: none; border-radius: var(--radius-pill); background: var(--dot-color); transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.aui-user-menu-dot::before, .aui-user-menu-dot::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--presence-surface, var(--surface)); transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard); }
.aui-user-menu-dot::before { width: 46%; height: 46%; border-radius: var(--radius-pill); transform: scale(0); }
.aui-user-menu-dot::after { width: 58%; height: 22%; min-height: 1.5px; border-radius: 1px; transform: scaleX(0); }
.aui-user-menu-dot[data-status="busy"] { --dot-color: var(--danger); }
.aui-user-menu-dot[data-status="busy"]::after { transform: scaleX(1); }
.aui-user-menu-dot[data-status="away"] { --dot-color: var(--warning); }
.aui-user-menu-dot[data-status="away"]::before, .aui-user-menu-dot[data-status="offline"]::before { transform: scale(1); }
.aui-user-menu-dot[data-status="offline"] { --dot-color: var(--text-muted); }

/* El panel sale de la foto a la que pertenece; el JS pone el origen al colocarlo. */
.aui-user-menu-panel { --presence-surface: var(--surface-raised); --row: 40px; --inset: 6px; position: fixed; top: 0; left: 0; z-index: 60; box-sizing: border-box; width: 17rem; max-width: calc(100vw - 24px); margin: 0; padding: var(--inset); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-raised); box-shadow: var(--shadow-floating); color: var(--foreground); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; outline: none; transform-origin: var(--origin-x, 100%) var(--origin-y, 0px); }
.aui-user-menu-panel[data-inline] { position: absolute; top: calc(100% + 8px); left: auto; }
.aui-user-menu-panel[data-inline][data-align="end"] { right: 0; }
.aui-user-menu-panel[data-inline][data-align="start"] { left: 0; }
.aui-user-menu-panel[data-inline][data-align="center"] { left: 50%; margin-left: -8.5rem; }

.aui-user-menu-header { display: flex; align-items: center; gap: var(--space-3); padding: 8px 8px 10px; }
.aui-user-menu-identity { display: grid; min-width: 0; flex: 1; gap: 1px; }
.aui-user-menu-name-row { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.aui-user-menu-name { overflow: hidden; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.aui-user-menu-plan { display: inline-flex; flex: none; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent-subtle); color: var(--accent-strong); font-size: var(--text-xs); font-weight: 500; line-height: 1; }
.aui-user-menu-email { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

/* Aiden: la empresa activa, con la misma sangría que las filas. */
.aui-user-menu-company { display: flex; min-width: 0; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-1); padding: 7px 12px; border-radius: calc(var(--radius-panel) - var(--inset)); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); }
.aui-user-menu-company-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aui-user-menu-list { position: relative; }
.aui-user-menu-separator { height: 1px; margin: var(--inset) calc(var(--inset) * -1); background: var(--border-subtle, var(--border)); }

/* Un solo resalte sigue al puntero y al teclado. Es el único tratamiento de hover del menú. */
.aui-user-menu-highlight { position: absolute; top: 0; right: 0; left: 0; height: var(--row); border-radius: calc(var(--radius-panel) - var(--inset)); background: var(--accent-subtle); opacity: 0; pointer-events: none; }
.aui-user-menu-highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 11%, transparent); }

.aui-user-menu-item { position: relative; display: flex !important; width: 100% !important; height: var(--row) !important; min-height: 0 !important; box-sizing: border-box; align-items: center; gap: var(--space-3); margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: calc(var(--radius-panel) - var(--inset)) !important; background: transparent !important; color: var(--foreground) !important; font: inherit !important; font-size: var(--text-sm) !important; font-weight: 400 !important; line-height: var(--leading-body) !important; text-align: left !important; cursor: pointer; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
.aui-user-menu-item[aria-busy="true"] { cursor: progress; }
.aui-user-menu-icon { display: inline-grid; width: 16px; flex: none; place-items: center; color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.aui-user-menu-icon svg { display: block; }
.aui-user-menu-item:focus .aui-user-menu-icon { color: var(--accent-strong); }
.aui-user-menu-item-label { position: relative; display: inline-flex; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-user-menu-rise { display: inline-block; white-space: nowrap; }
.aui-user-menu-item[data-tone="danger"], .aui-user-menu-item[data-tone="danger"] .aui-user-menu-icon { color: color-mix(in oklab, var(--danger) 58%, var(--text-secondary)) !important; }
.aui-user-menu-item[data-tone="danger"]:focus, .aui-user-menu-item[data-tone="danger"]:focus .aui-user-menu-icon { color: var(--danger) !important; }
@media (hover: none) { .aui-user-menu-item:active { background: var(--surface-muted) !important; } }

/* Aiden: contador (con los colores del Badge «danger» de Arc) y marca de enlace que abre otra pestaña. */
.aui-user-menu-count { display: inline-grid; min-width: 20px; height: 20px; flex: none; place-items: center; padding: 0 6px; border: 1px solid color-mix(in oklab, var(--danger) 26%, var(--border)); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--danger) 10%, var(--surface)); color: var(--danger); font-size: 11px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.aui-user-menu-external { display: inline-grid; flex: none; place-items: center; color: var(--text-muted); }

.aui-user-menu-keys { display: inline-flex; flex: none; align-items: center; gap: 1px; margin: 0 0 0 auto; padding: 0; border: 0; background: none; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; opacity: .8; font-variant-numeric: tabular-nums; box-shadow: none; }
.aui-user-menu-key { display: inline-block; min-width: 1.05em; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; text-align: center; }

.aui-user-menu-row { position: relative; display: flex; height: 44px; align-items: center; gap: var(--space-3); padding: 0 6px 0 12px; }
.aui-user-menu-row-label { flex: 1; color: var(--foreground); font-size: var(--text-sm); }
.aui-user-menu-row .aui-user-menu-icon .aui-user-menu-dot { --dot-size: 10px; }
/* El pulgar se desliza bajo los iconos; el grupo tiene su propio contexto de apilado. */
.aui-user-menu-segments { --segment: 32px; position: relative; isolation: isolate; display: inline-grid; height: 30px; flex: none; grid-auto-columns: var(--segment); grid-auto-flow: column; padding: 2px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--foreground) 6%, transparent); }
.aui-user-menu-thumb { position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px; width: var(--segment); border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: 0 1px 2px oklch(0% 0 0 / .1), 0 0 0 1px var(--border-subtle, var(--border)); transform: translateX(calc(var(--index) * 100%)); transition: transform var(--duration-spring) var(--ease-spring); }
[data-theme="dark"] .aui-user-menu-thumb { background: color-mix(in oklab, var(--foreground) 20%, var(--surface-raised)); box-shadow: none; }
.aui-user-menu-segment { display: grid !important; width: auto !important; height: auto !important; min-height: 0 !important; place-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: transparent !important; color: var(--text-muted) !important; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
.aui-user-menu-segment .aui-user-menu-dot { --dot-size: 9px; --presence-surface: var(--surface-raised); }
@media (hover: hover) and (pointer: fine) { .aui-user-menu-segment:hover { color: var(--text-secondary) !important; } }
.aui-user-menu-segment[aria-checked="true"] { color: var(--foreground) !important; }

.aui-user-menu-spinner { animation: aui-user-menu-spin .8s linear infinite; }
@keyframes aui-user-menu-spin { to { transform: rotate(360deg); } }

/* Por debajo de 640 px el mismo contenido sube como hoja inferior, con filas más altas. */
.aui-user-menu-scrim { position: fixed; inset: 0; z-index: 70; background: oklch(0% 0 0 / .32); -webkit-tap-highlight-color: transparent; }
.aui-user-menu-sheet { --row: 48px; --inset: 10px; position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 71; width: auto; max-width: none; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--inset) calc(12px + env(safe-area-inset-bottom)); border-bottom: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; touch-action: pan-y; }
.aui-user-menu-handle { display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: var(--radius-pill); background: var(--border-strong); cursor: grab; }
.aui-user-menu-sheet .aui-user-menu-header { padding: 4px 8px 12px; }
.aui-user-menu-sheet .aui-user-menu-item, .aui-user-menu-sheet .aui-user-menu-row-label { font-size: var(--text-base) !important; }
.aui-user-menu-sheet .aui-user-menu-row { height: 56px; }
.aui-user-menu-sheet .aui-user-menu-segments { --segment: 44px; height: 38px; }
.aui-user-menu-sheet .aui-user-menu-keys { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aui-user-menu-trigger, .aui-user-menu-chevron, .aui-user-menu-dot, .aui-user-menu-dot::before, .aui-user-menu-dot::after, .aui-user-menu-segment, .aui-user-menu-thumb, .aui-user-menu-item, .aui-user-menu-icon { transition: none; }
  .aui-user-menu-spinner { animation-duration: 2.4s; }
}