/* ============================================================================
   VALORA — shared stylesheet
   House standard: professional-page-design · "Light Control-Tower" mode.
   Brand overlay: Envista corporate blue/cyan (navy #08243B · blue #0D75CD · cyan #4FC3DF).

   Rules honoured here:
   - ONE accent family (blue), everything else grayscale.
   - All content lives inside cards. Sections separated by 24px, not dividers.
   - Spacing on a 6px grid (6/12/24/32). One radius.
   - No pure black, no pure-white page. Shadows <= 8% opacity.
   - Ambient motion tier only; fully disabled under prefers-reduced-motion.
   - Tokens only — pages must never hardcode hex.
   ========================================================================== */

:root {
    /* ---- brand overlay (the only block a re-theme should touch) ---- */
    --brand-deep:   #08243B;
    --brand:        #0D75CD;
    --brand-bright: #2E8FE0;
    --brand-glow:   #4FC3DF;

    /* ---- surfaces ---- */
    --page:        #F2F5F9;
    --page-2:      #E8EDF4;
    --card:        #FFFFFF;
    --card-hover:  #FAFCFE;
    --elevated:    #FFFFFF;

    /* ---- ink ---- */
    --text:        #16232E;
    --text-2:      #55677A;
    --text-muted:  #8595A5;
    --on-brand:    #FFFFFF;

    /* ---- semantic ---- */
    --ok:   #2E9E6B;
    --warn: #C2871B;
    --bad:  #C6504D;
    --info: #0D75CD;
    --ok-soft:   rgba(46,158,107,.10);
    --warn-soft: rgba(194,135,27,.12);
    --bad-soft:  rgba(198,80,77,.10);
    --info-soft: rgba(13,117,205,.10);

    /* ---- lines ---- */
    --line:        rgba(22,35,46,.09);
    --line-strong: rgba(22,35,46,.16);

    /* ---- geometry ---- */
    --space:  6px;
    --radius: 14px;
    --radius-sm: 9px;

    /* ---- elevation (<= 8%) ---- */
    --shadow-card:  0 1px 2px rgba(8,36,59,.05), 0 1px 3px rgba(8,36,59,.04);
    --shadow-hover: 0 3px 10px rgba(8,36,59,.07), 0 1px 3px rgba(8,36,59,.05);
    --shadow-lift:  0 10px 28px rgba(8,36,59,.08);

    /* ---- gradient tokens (never inline literals in pages) ---- */
    --grad-brand:  linear-gradient(135deg, var(--brand-deep) 0%, #0B3C63 55%, var(--brand) 100%);
    --grad-accent: linear-gradient(135deg, var(--brand) 0%, var(--brand-glow) 100%);
    --grad-hair:   linear-gradient(90deg, transparent, var(--brand-glow), transparent);

    /* ---- type ---- */
    --font-display: 'Sora', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   1. Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--page);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(13,117,205,.16); }

/* Visible keyboard focus everywhere — never suppressed without a replacement. */
:focus-visible {
    outline: 3px solid rgba(13,117,205,.45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ...except a heading that Blazor's <FocusOnNavigate> focuses programmatically on
   every page load. tabindex="-1" means "focusable by script, not by Tab", so a ring
   there reads as "this title is selected" to a mouse user. Screen-reader users still
   get the focus move, which is the point of FocusOnNavigate — only the ring is dropped. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

/* Slim, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); background-clip: content-box; }

/* ============================================================================
   2. Ambient layer — 3 slow radial blobs, rendered once behind everything.
      CSS only, 70–90s, paused entirely under reduced-motion.
   ========================================================================== */

.va-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.va-ambient span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .30;
}

.va-ambient span:nth-child(1) {
    width: 46vw; height: 46vw; top: -14vw; left: -10vw;
    background: radial-gradient(circle, rgba(79,195,223,.55), transparent 70%);
    animation: va-drift-a 78s ease-in-out infinite;
}

.va-ambient span:nth-child(2) {
    width: 38vw; height: 38vw; top: 42vh; right: -12vw;
    background: radial-gradient(circle, rgba(13,117,205,.40), transparent 70%);
    animation: va-drift-b 92s ease-in-out infinite;
}

.va-ambient span:nth-child(3) {
    width: 30vw; height: 30vw; bottom: -12vw; left: 26vw;
    background: radial-gradient(circle, rgba(8,36,59,.22), transparent 70%);
    animation: va-drift-c 84s ease-in-out infinite;
}

@keyframes va-drift-a {
    0%,100% { transform: translate3d(0,0,0)   scale(1); }
    50%     { transform: translate3d(4vw,3vh,0) scale(1.10); }
}
@keyframes va-drift-b {
    0%,100% { transform: translate3d(0,0,0)     scale(1); }
    50%     { transform: translate3d(-3vw,-4vh,0) scale(1.08); }
}
@keyframes va-drift-c {
    0%,100% { transform: translate3d(0,0,0)    scale(1); }
    50%     { transform: translate3d(3vw,-3vh,0) scale(1.12); }
}

/* Keep app chrome above the ambient layer */
.mud-layout, .account-body { position: relative; z-index: 1; }

/* ============================================================================
   3. App shell — app bar & permanent left drawer
   ========================================================================== */

.va-appbar {
    background: var(--card) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: saturate(140%) blur(6px);
}

.va-appbar .mud-icon-button { color: var(--text-2) !important; }

/* Wordmark */
.va-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .16em;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.va-appbar-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- Drawer: navy gradient + a woven pattern (dot grid over diagonal hatch) ---- */
/* NOTE: do NOT set `position` here. MudBlazor gives a fixed drawer `position: fixed`,
   and overriding it to `relative` drops the drawer into normal flow — it then occupies
   layout width/height, pushes the main content down the page, and shrinks to its own
   content instead of spanning the viewport. `position: fixed` already establishes the
   containing block the ::before/::after pattern layers need. */
.va-drawer {
    background: var(--grad-brand) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    overflow: hidden;
}

.va-drawer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px);
    background-size: 18px 18px, auto;
    opacity: .85;
}

/* Cyan hairline down the drawer's inner edge */
.va-drawer::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(79,195,223,.55) 22%, rgba(79,195,223,.55) 78%, transparent);
    pointer-events: none;
}

.va-drawer > * { position: relative; z-index: 1; }

/* Full-height column so the user block can sit on the floor of the drawer
   regardless of how many nav items the current reveal slice shows. */
.va-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The nav takes the slack and scrolls if the menu ever outgrows the viewport,
   so the footer never gets pushed off-screen. */
.va-drawer .mud-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.va-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.va-logo-mark {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: var(--grad-accent);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: #08243B;
    box-shadow: 0 3px 10px rgba(79,195,223,.28);
}

.va-drawer-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .18em;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 1.1;
}

.va-drawer-sub {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}

/* Section label inside the nav */
.va-nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(255,255,255,.40);
    padding: 22px 24px 8px;
}

/* Nav links — accent reserved for the ACTIVE item only */
.va-drawer .mud-nav-link {
    color: rgba(255,255,255,.74) !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-right: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: background-color .1s ease-out, color .1s ease-out;
}

.va-drawer .mud-nav-link .mud-icon-root {
    color: rgba(255,255,255,.55) !important;
    transition: color .1s ease-out;
}

.va-drawer .mud-nav-link:hover {
    background: rgba(255,255,255,.07) !important;
    color: #FFFFFF !important;
}
.va-drawer .mud-nav-link:hover .mud-icon-root { color: var(--brand-glow) !important; }

.va-drawer .mud-nav-link.active {
    background: rgba(79,195,223,.15) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-glow);
}
.va-drawer .mud-nav-link.active .mud-icon-root { color: var(--brand-glow) !important; }

/* Drawer footer (user identity) */
.va-drawer-footer {
    margin-top: auto;
    padding: 16px 24px 22px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.va-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.va-avatar {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
}

.va-user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    line-height: 1.2;
    word-break: break-word;
}

.va-user-role {
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
}

/* ============================================================================
   4. Page furniture
   ========================================================================== */

.va-page-head { margin-bottom: 24px; }

.va-page-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 6px;
}

.va-page-sub {
    font-size: 14px;
    color: var(--text-2);
    margin: 0;
}

.va-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}

.va-eyebrow::before {
    content: "";
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--grad-accent);
}

/* ---- Cards: every piece of content lives in one ---- */
.va-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 24px;
    transition: box-shadow .1s ease-out, border-color .1s ease-out;
}

.va-card:hover { box-shadow: var(--shadow-hover); }

.va-card-flush { padding: 0; overflow: hidden; }

.va-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.va-card-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0;
}

.va-card-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* Icon chip that fronts a card title */
.va-chip-icon {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--info-soft);
    color: var(--brand);
}

.va-chip-icon.is-ok   { background: var(--ok-soft);   color: var(--ok); }
.va-chip-icon.is-warn { background: var(--warn-soft); color: var(--warn); }
.va-chip-icon.is-bad  { background: var(--bad-soft);  color: var(--bad); }

/* Accent hairline across the top of a feature card */
.va-card-accent { position: relative; overflow: hidden; }
.va-card-accent::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-hair);
}

/* ---- KPI / stat tiles: number and unit render 2:1 ---- */
.va-stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.va-stat-unit {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 3px;
}

.va-stat-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ---- Status: always a dot + a word, never colour alone ---- */
.va-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text-2);
    white-space: nowrap;
}

.va-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: 0 0 6px;
}

.va-status.is-ok::before   { background: var(--ok); }
.va-status.is-warn::before { background: var(--warn); }
.va-status.is-bad::before  { background: var(--bad); }
.va-status.is-info::before { background: var(--info); }

/* A status used as a full sentence rather than a one-word chip: it has to wrap, and the
   dot has to stay on the first line instead of centring against the whole block. */
.va-status.is-wrap {
    white-space: normal;
    align-items: flex-start;
    line-height: 1.45;
}

.va-status.is-wrap::before { margin-top: 5px; }

/* ---- Comparison matrix (year at a glance: quarters × components) ----
   A deliberately wide table. It scrolls inside its OWN container so the page body never scrolls
   sideways, the header row and the first two columns stay pinned, and each quarter reads as a
   block rather than as 7 loose columns. */
.va-matrix-scroll {
    overflow: auto;
    max-height: 72vh;
    border-radius: var(--radius);
}

.va-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    white-space: nowrap;
    background: var(--card);
}

.va-matrix th,
.va-matrix td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}

.va-matrix thead th {
    position: sticky;
    top: 34px;                       /* below the group row */
    z-index: 3;
    background: var(--page);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    line-height: 1.25;
    border-bottom: 1px solid var(--line-strong);
}

.va-matrix thead th span {
    display: block;
    font-weight: 500;
    font-size: 9.5px;
    color: var(--text-muted);
}

.va-matrix .va-matrix-groups th {
    top: 0;
    z-index: 4;
    height: 34px;
    font-size: 12px;
    color: var(--on-brand);
    background: var(--brand-deep);
    border-bottom: 1px solid var(--brand-deep);
}

.va-matrix .va-matrix-group { border-left: 2px solid var(--card); }
.va-matrix .va-matrix-group span { color: rgba(255,255,255,.7); display: inline; font-size: 11px; }
.va-matrix .va-matrix-group.is-annual { background: var(--brand); }
.va-matrix .va-matrix-group.is-avg    { background: var(--brand-bright); }

/* A quarter with no period yet: present in the layout, visibly not in play. */
.va-matrix .va-matrix-group.is-absent { background: #33485B; color: rgba(255,255,255,.62); }
.va-matrix td.va-matrix-empty.is-absent { font-style: normal; opacity: .75; }

/* Column families — a quiet tint, so a quarter reads as one block. */
.va-matrix-quant  { background: var(--info-soft) !important; }
.va-matrix-qual   { background: var(--ok-soft) !important; }
.va-matrix-result,
.va-matrix-annual { background: rgba(13,117,205,.16) !important; }
.va-matrix-avg    { background: rgba(79,195,223,.20) !important; }

.va-matrix tbody td { color: var(--text); }
.va-matrix tbody tr:hover td { background: var(--card-hover); }

.va-matrix-strong { font-weight: 700; }
.va-matrix-annual-cell { background: rgba(13,117,205,.06); }
.va-matrix-avg-cell    { background: rgba(79,195,223,.10); }

/* Needs td in the selector: `.va-matrix td` sets the surface and would otherwise win. */
.va-matrix td.va-matrix-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    background: repeating-linear-gradient(
        135deg, transparent, transparent 6px, rgba(22,35,46,.05) 6px, rgba(22,35,46,.05) 12px);
}

/* First two columns stay put while the quarters scroll. */
.va-matrix-sticky { position: sticky; z-index: 2; }
.va-matrix-sticky-1 { left: 0; min-width: 78px; }
.va-matrix-sticky-2 { left: 78px; min-width: 230px; border-right: 1px solid var(--line-strong); }
.va-matrix thead .va-matrix-sticky { z-index: 5; background: var(--brand-deep); color: var(--on-brand); }

.va-matrix-code { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.va-matrix-name { display: block; font-weight: 600; white-space: nowrap; }
.va-matrix-puesto { display: block; font-size: 10px; color: var(--text-muted); }

/* ---- Instruction list (file-format rules, prerequisites) ---- */
.va-rules {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
}

.va-rules > li {
    position: relative;
    padding-left: 18px;
}

.va-rules > li::before {
    content: "";
    position: absolute;
    left: 2px; top: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .6;
}

/* Card entry stagger — 200ms fade, ease-out, index*50ms via inline --i */
.va-enter {
    animation: va-fade-up .2s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes va-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Numeric table cells */
.va-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Colour picker inside a table cell ----
   The trigger input must stay narrow to fit the column, but the popover must NOT
   inherit that width or the spectrum/palette gets clipped (MudBlazor sizes the
   picker surface from the anchor). Constrain the input only, and give the picker
   surface its natural width back. */
.va-color-picker { max-width: 148px; }

.mud-picker-color-content,
.mud-picker-color-picker,
.mud-picker-container .mud-picker-color-view {
    min-width: 260px;
}

/* The popover itself, wherever MudBlazor renders it. */
.mud-popover:has(.mud-picker-color-content),
.mud-popover:has(.mud-picker-color-view) {
    width: auto;
    min-width: 260px;
    max-width: none;
}

/* Small colour swatch (read-only view of a performance level's colour). */
.va-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 5px;
    border: 1px solid var(--line-strong);
}

/* Org tree: count of DIRECT reports under a node. Deliberately quiet — it is a
   secondary fact next to the position name, not a status. */
.va-tree-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 8px 1px 5px;
    border-radius: 999px;
    background: var(--page-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}

.va-tree-count .mud-icon-root {
    font-size: 13px !important;
    color: var(--text-muted);
}

/* ============================================================================
   5. MudBlazor harmonisation
   ========================================================================== */

.mud-main-content { position: relative; z-index: 1; }

.mud-paper, .mud-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card) !important;
}

.mud-table { border-radius: var(--radius) !important; overflow: hidden; }

.mud-table-head th,
.mud-table-head .mud-table-cell {
    background: var(--page-2) !important;
    color: var(--text-2) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line) !important;
}

.mud-table-row:hover { background: var(--card-hover) !important; }
.mud-table-cell { border-bottom: 1px solid var(--line) !important; font-size: 14px; }

.mud-button-root { text-transform: none !important; font-weight: 600; letter-spacing: 0; }

.mud-button-filled.mud-button-filled-primary {
    background: var(--grad-accent) !important;
    color: var(--on-brand) !important;
    box-shadow: 0 2px 8px rgba(13,117,205,.22) !important;
}

/* A disabled button must LOOK disabled. The brand gradient above wins over MudBlazor's own
   disabled styling, so a blocked "Completar y siguiente" kept its full accent fill and read as
   clickable — the one state where that matters most, since the capture screen disables it to
   demand a justification. Found while photographing that exact screen for the manual. */
.mud-button-filled.mud-button-filled-primary:disabled,
.mud-button-filled.mud-button-filled-secondary:disabled,
.mud-button-filled.mud-button-filled-success:disabled,
.mud-button-filled.mud-button-filled-error:disabled {
    background: var(--page-2) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.mud-input-outlined-border { border-color: var(--line-strong) !important; }

.mud-typography-h5, .mud-typography-h6, .mud-typography-subtitle1 {
    font-family: var(--font-display);
    letter-spacing: -.01em;
}

/* Dialogs get the lift shadow, matching the card language */
.mud-dialog { border-radius: var(--radius) !important; box-shadow: var(--shadow-lift) !important; }

/* ============================================================================
   6. Account pages (Login / ChangePassword / AccessDenied)
      Split composition: branded panel + form panel.
   ========================================================================== */

.account-body {
    background: var(--page);
    color: var(--text);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    box-sizing: border-box;
}

.account-shell {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    width: 100%;
    max-width: 1120px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}

/* ---- Left: branded panel, same woven pattern as the drawer ---- */
.account-brand {
    position: relative;
    background: var(--grad-brand);
    padding: 52px 52px 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    min-height: 580px;
}

.account-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px);
    background-size: 18px 18px, auto;
}

/* Cyan corner glow, echoing the reference's tinted light source */
.account-brand::after {
    content: "";
    position: absolute;
    width: 420px; height: 420px;
    right: -150px; top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,195,223,.30), transparent 68%);
    filter: blur(44px);
}

.account-brand > * { position: relative; z-index: 1; }

/* Brand lockup: mark + wordmark + micro-tagline */
.account-lockup { display: flex; align-items: center; gap: 13px; }

.account-brand-mark {
    width: 46px; height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: var(--grad-accent);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    color: #08243B;
    box-shadow: 0 4px 16px rgba(79,195,223,.34);
}

.account-brand-name {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #FFFFFF;
    line-height: 1;
}

.account-brand-kicker {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    margin-top: 5px;
}

/* Eyebrow pill */
.account-pill {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(79,195,223,.34);
    background: rgba(79,195,223,.10);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand-glow);
    margin-bottom: 22px;
}

/* Hero headline — the accent phrase carries the one allowed colour moment */
.account-hero {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.1vw, 42px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #FFFFFF;
    margin: 0 0 18px;
    max-width: 15ch;
}

.account-hero em {
    font-style: normal;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.account-brand-tag {
    font-size: 14.5px;
    color: rgba(255,255,255,.66);
    line-height: 1.6;
    max-width: 42ch;
    margin: 0;
}

/* Feature list with icon chips */
.account-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-features li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 13.5px;
    color: rgba(255,255,255,.80);
}

.account-feature-icon {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    color: var(--brand-glow);
}

.account-feature-icon svg { width: 17px; height: 17px; }

.account-brand-meta {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
}

.account-brand-rule {
    width: 42px; height: 2px;
    border-radius: 2px;
    background: var(--grad-accent);
    margin: 0 0 16px;
}

/* ---- Right: the form ---- */
.account-form {
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--card);
}

/* Input with a leading icon */
.account-input-wrap { position: relative; display: flex; align-items: center; }

.account-input-wrap svg {
    position: absolute;
    left: 13px;
    width: 17px; height: 17px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color .1s ease-out;
}

.account-input-wrap:focus-within svg { color: var(--brand); }

.account-input-wrap input { width: 100%; padding-left: 40px !important; box-sizing: border-box; }

.account-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 0 0 6px;
}

.account-subtitle {
    font-size: 13.5px;
    color: var(--text-2);
    margin: 0 0 26px;
}

.account-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.account-field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.account-field input[type="text"],
.account-field input[type="email"],
.account-field input[type="password"] {
    background: var(--page);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    padding: 12px 14px;
    outline: none;
    transition: border-color .1s ease-out, box-shadow .1s ease-out, background-color .1s ease-out;
}

.account-field input::placeholder { color: var(--text-muted); }

.account-field input[type="text"]:focus,
.account-field input[type="email"]:focus,
.account-field input[type="password"]:focus {
    border-color: var(--brand);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(13,117,205,.14);
}

.account-remember { flex-direction: row; align-items: center; }

.account-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
    margin: 0;
    cursor: pointer;
}

.account-remember input[type="checkbox"] { accent-color: var(--brand); width: 16px; height: 16px; }

.account-btn {
    width: 100%;
    background: var(--grad-accent);
    color: var(--on-brand);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    padding: 14px;
    cursor: pointer;
    margin-top: 12px;
    letter-spacing: .01em;
    box-shadow: 0 2px 10px rgba(13,117,205,.24);
    transition: transform .1s ease-out, box-shadow .1s ease-out, filter .1s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.account-btn svg { width: 15px; height: 15px; transition: transform .1s ease-out; }
.account-btn:hover { filter: brightness(1.05); box-shadow: 0 4px 16px rgba(13,117,205,.30); }
.account-btn:hover svg { transform: translateX(3px); }
.account-btn:active { transform: translateY(1px); }

/* Labelled divider, e.g. "ACCESO" */
.account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 18px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.account-divider::before,
.account-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Role hint rows under the divider */
.account-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--page);
    margin-bottom: 10px;
}

.account-hint-icon {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--info-soft);
    color: var(--brand);
}

.account-hint-icon svg { width: 16px; height: 16px; }
.account-hint-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.account-hint-sub   { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }

.account-error,
.account-success {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    padding: 11px 13px;
    margin-bottom: 18px;
    line-height: 1.45;
}

.account-error   { background: var(--bad-soft); border: 1px solid rgba(198,80,77,.30); color: #8E2F2C; }
.account-success { background: var(--ok-soft);  border: 1px solid rgba(46,158,107,.30); color: #1E6B48; }

.account-error::before,
.account-success::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-top: 7px;
    flex: 0 0 6px;
}
.account-error::before   { background: var(--bad); }
.account-success::before { background: var(--ok); }

.account-validation { color: var(--bad); font-size: 12px; margin-top: 5px; }

.account-link {
    color: var(--brand);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
}
.account-link:hover { text-decoration: underline; }

.account-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.account-legal {
    margin-top: 14px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 980px) {
    .account-shell { grid-template-columns: 1fr; max-width: 480px; }
    .account-brand { min-height: 0; padding: 34px; gap: 26px; }
    .account-hero { font-size: 27px; max-width: none; }
    .account-features, .account-brand-meta, .account-brand-rule { display: none; }
    .account-form { padding: 34px; }
}

/* ============================================================================
   6b. Not-found view (genuine misses AND plan-gated routes — identical by design)
   ========================================================================== */

.va-notfound {
    max-width: 520px;
    margin: 8vh auto 0;
    text-align: center;
    padding: 24px;
}

.va-notfound-code {
    font-family: var(--font-display);
    font-size: 86px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: .55;
}

.va-notfound-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 14px 0 8px;
}

.va-notfound-msg {
    font-size: 14.5px;
    color: var(--text-2);
    margin: 0;
}

/* ============================================================================
   7. Blazor error UI — restyled to match
   ========================================================================== */

#blazor-error-ui {
    background: var(--card);
    border-top: 2px solid var(--bad);
    box-shadow: 0 -4px 20px rgba(8,36,59,.10);
    bottom: 0;
    display: none;
    left: 0;
    padding: 14px 24px;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    color: var(--text);
    font-size: 14px;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 24px; top: 12px; color: var(--text-muted); }
#blazor-error-ui .reload  { color: var(--brand); font-weight: 600; }

.blazor-error-boundary {
    background: var(--bad-soft);
    border: 1px solid rgba(198,80,77,.30);
    border-radius: var(--radius);
    padding: 16px 20px;
    color: #8E2F2C;
}
.blazor-error-boundary::after { content: "Ha ocurrido un error."; }

/* ============================================================================
   8. Reduced motion — kill the ambient layer and all entries outright
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .va-ambient span { animation: none !important; }
    .va-enter { animation: none !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Print: drop chrome */
@media print {
    .va-ambient, .va-drawer, .va-appbar { display: none !important; }
    body { background: #fff; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Capture grade grid — one click per score.
   Replaces the dropdowns on /captura/{period}/{employee}. Colour carries the
   scale (red 1 → green 3) so a filled grid is readable at a glance; the check
   mark and border carry it too, because colour alone must never be the signal.
   ────────────────────────────────────────────────────────────────────────── */
.va-grade-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--va-line, #E6EBF0);
}
.va-grade-row:last-child { border-bottom: 0; }

.va-grade-label { flex: 0 0 190px; min-width: 150px; }
/* title row: the (i) sits beside the name, not under it — vertical room is not the constraint,
   scanning is: label and its help belong on one line. */
.va-grade-title { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.va-grade-name  { font-weight: 600; font-size: 0.9rem; }
.va-grade-hint  { display: block; font-size: 0.72rem; opacity: 0.6; line-height: 1.3; }

.va-grade-cells { display: flex; gap: 6px; flex: 1 1 auto; outline: none; }
.va-grade-cells:focus-visible { box-shadow: 0 0 0 2px var(--va-accent, #0D75CD); border-radius: 8px; }

.va-grade-cell {
    position: relative;
    flex: 1 1 0;
    min-width: 52px;
    padding: 10px 4px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    background: var(--g);
    color: #16323F;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.va-grade-cell:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.va-grade-cell:disabled { opacity: 0.4; cursor: not-allowed; }

.va-grade-cell.is-selected {
    border: 2px solid #16323F;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}
.va-grade-check { position: absolute; top: 2px; right: 6px; font-size: 0.72rem; }

.va-grade-disabled { opacity: 0.55; }

@media (max-width: 720px) {
    .va-grade-row   { flex-direction: column; align-items: stretch; gap: 6px; }
    .va-grade-label { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
    .va-grade-cell, .va-grade-cell:hover:not(:disabled) { transition: none; transform: none; }
}

/* Team strip on the capture screen — position within the run, at a glance. */
.va-team-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.va-team-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 4px;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,.12);
    font-size: .72rem; font-weight: 600;
    cursor: pointer; color: #16323F;
    transition: transform .08s ease;
}
.va-team-chip:hover { transform: translateY(-1px); }
.va-team-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 5px;
    background: rgba(255,255,255,.65); font-size: .68rem;
}
.va-team-nm { white-space: nowrap; font-weight: 500; }
.va-team-chip.is-done    { background: #A9D8B0; }
.va-team-chip.is-partial { background: #F2DFA0; }
.va-team-chip.is-pending { background: #E9EEF3; }
.va-team-chip.is-current { outline: 2px solid var(--va-accent, #0D75CD); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .va-team-chip:hover { transform: none; } }

/* ──────────────────────────────────────────────────────────────────────────
   Hover tooltip — house standard, fixed-zone variant.
   Long reference text reveals in ONE place (bottom centre) that never moves,
   so the eye always knows where to look. Accent bar takes the Envista brand
   token; the standard itself stays brand-neutral.
   ────────────────────────────────────────────────────────────────────────── */
:root { --tip-accent: var(--brand, #0D75CD); }

.ui-hover-zone {
    position: fixed;
    bottom: 22px; left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: max-content; max-width: min(760px, 92vw);
    padding: 12px 16px;
    border-radius: 12px;
    border-left: 3px solid var(--tip-accent, #38bdf8);
    background: #1E293B; color: #F8FAFC;
    font-size: .78rem; line-height: 1.6;
    text-align: left;
    white-space: pre-line;              /* \n in the attribute becomes a real line break */
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
    z-index: 10000; pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.ui-hover-zone.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

[data-theme="dark"] .ui-hover-zone { background: #F1F5F9; color: #0F172A; }

/* the (i) affordance next to a grade row label */
.va-ref-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px;
    border: 0; padding: 0; border-radius: 50%;
    background: var(--tip-accent, #0D75CD); color: #fff;
    font-size: .66rem; font-weight: 700; line-height: 1;
    cursor: help; vertical-align: middle;
}
.va-ref-icon:focus-visible { outline: 2px solid var(--tip-accent, #0D75CD); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .ui-hover-zone { transition: none; }
}

/* ============================================================================
   Distribution curve (Tablero) — the fitted normal bell, drawn as raw SVG.
   Every colour is a token: the plot is one accent family, everything structural
   is grayscale and recessive so the curve is the only thing that carries weight.
   ========================================================================== */

.va-curve { margin: 0; }

.va-curve-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-body);
}

/* ---- structure: present but never competing with the data ---- */
.va-curve-grid { stroke: var(--line); stroke-width: 1; }
.va-curve-axis { stroke: var(--line-strong); stroke-width: 1; }

.va-curve-tick {
    fill: var(--text-muted);
    font-size: 11px;
    text-anchor: middle;
}
.va-curve-tick-y { text-anchor: end; }

.va-curve-axis-title {
    fill: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-anchor: middle;
}

/* ---- the distribution itself ---- */
.va-curve-fill-top    { stop-color: var(--brand); stop-opacity: .20; }
.va-curve-fill-bottom { stop-color: var(--brand); stop-opacity: 0; }

.va-curve-line {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- guides: mean is solid brand-deep, sigma is a hairline ---- */
.va-curve-mean { stroke: var(--brand-deep); stroke-width: 1.5; stroke-dasharray: 5 4; }
.va-curve-mean-label {
    fill: var(--brand-deep);
    font-size: 11.5px;
    font-weight: 700;
    text-anchor: middle;
}

.va-curve-sigma { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.va-curve-sigma-label {
    fill: var(--text-muted);
    font-size: 10.5px;
    text-anchor: middle;
}

/* ---- observed scores: markers riding the curve ---- */
.va-curve-dot {
    fill: var(--brand);
    stroke: var(--card);            /* 2px surface ring keeps overlapping marks separable */
    stroke-width: 2;
    transition: r .12s ease, fill .12s ease;
}
.va-curve-dot.is-active { fill: var(--brand-deep); r: 7; }

.va-curve-hit {
    fill: transparent;
    cursor: pointer;
    outline: none;
}
.va-curve-hit:focus-visible + * ,
.va-curve-pt:focus-within .va-curve-dot { fill: var(--brand-deep); }

.va-curve-dot-label {
    fill: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
}

/* ---- hover layer ---- */
.va-curve-crosshair { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }

.va-curve-tip { pointer-events: none; }
.va-curve-tip rect {
    fill: var(--brand-deep);
    filter: drop-shadow(0 6px 16px rgba(8, 36, 59, .22));
}
.va-curve-tip text {
    fill: var(--on-brand);
    font-size: 12px;
    font-weight: 600;
    text-anchor: middle;
}

/* ---- table view ---- */
.va-curve-table { margin-top: 12px; background: transparent; }
.va-curve-table th { color: var(--text-2); font-weight: 600; }

.va-curve-caption {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.45;
    max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
    .va-curve-dot { transition: none; }
}

/* ============================================================================
   Tablero — per-supervisor detail rows (expand a supervisor to see their people).
   Recessive on purpose: it is a drawer inside a table row, not a second table
   competing with the first. The pending rows are the only thing that stands out.
   ========================================================================== */

.va-detail-row > td { border-bottom: 1px solid var(--line); }

.va-detail {
    background: var(--page-2);
    padding: 12px 18px 6px;
    border-left: 3px solid var(--brand);
}

.va-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.va-detail-title {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-2);
}

.va-detail-table { background: transparent; }
.va-detail-table th {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.va-detail-table td { font-size: .84rem; }

/* Not colour alone: the pending rows also carry a status chip with a word. */
.va-detail-table tr.va-detail-pending td:first-child {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bad);
    padding-left: 10px;
}

/* The supervisor's own evaluation row inside their detail drawer — set apart from their team,
   because it is not their responsibility to capture it; their boss does. */
.va-detail-table tr.va-detail-own td {
    background: rgba(13, 117, 205, .045);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ============================================================================
   Tress import — period coverage strip (how many people have Tress data yet).
   Sits under the period selector so the gap is answered BEFORE uploading.
   ========================================================================== */

.va-cov {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 6px 28px;
    align-items: end;
    padding: 12px 16px;
    background: var(--page-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.va-cov-item { display: flex; flex-direction: column; gap: 2px; }

.va-cov-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.va-cov-value {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}
.va-cov-value.va-cov-ok { color: var(--ok); }

/* The missing count is a button, not a number: it opens the list of who. */
.va-cov-btn {
    padding: 0 6px;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.va-cov-bar { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 599px) {
    .va-cov { grid-template-columns: repeat(2, auto); }
}