/* PORTAL INTERNO TELEPAÍS — one stylesheet, semantic tokens, light / dark / system.
   Brand: navy #123179 is the working colour (actions, selection); the logo red #b6252b appears only in brand moments
   (logo, login band). Status colours (danger / warn / ok / info) always mean state, never decoration. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Poppins", var(--font);
  --page: #f3f5f9; --surface: #ffffff; --surface-2: #f6f8fb; --text: #141c2e; --muted: #566178;
  --border: #dbe1ea; --border-strong: #c3ccd9;
  /* --border / --border-strong: decorative separators and quiet outlines. --control-border: the edge of anything you can
     type into, press or choose (inputs, buttons, chips, menus); at least 3:1 against --surface, --page and --surface-2 in
     every theme (light 3.67 / 3.36 / 3.45). Hover uses --muted, which is stronger again. */
  --control-border: #7b869b;
  --action: #123179; --action-hover: #0b1f52; --action-text: #ffffff; --selected-bg: #e8edf8; --selected-text: #123179;
  --brand-red: #b6252b;
  --link: #1d47a8; --danger: #b3222b; --danger-bg: #fcebec; --danger-text: #a01d25;
  --warn: #c98a00; --warn-bg: #fff4dc; --warn-text: #7a4f00; --info-bg: #e9effc; --info-text: #1d3f8f;
  --ok-bg: #e5f4ea; --ok-text: #1d6a37; --focus: #2457d6;
  --info-border: #5a7bd0; /* the edge of an activity (calendar events, key, day counts): 3.5:1 on --info-bg, 3.7 on --page */
  --high-bg: #fff1d6; --high-border: #ecc068;
  --series-1: #2a78d6; --series-2: #eb6834; --grid: #e3e7ed;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-pop: 0 12px 32px rgba(16, 24, 40, .16);
  --r-sm: 6px; --r: 8px; --r-lg: 8px; /* flat surfaces, 6–8 px radii (2026 redesign) */
  /* one-of-N choices (view switch, quick states, periods): one height, radius and selected look everywhere */
  --choice-h: 40px; --choice-r: 8px; /* also the compact control height (.btn-small, post actions) */
  /* type below body size: words never smaller than --fs-xs (13 px); --fs-micro (12 px) only for counts and glyphs that
     must fit a fixed box (calendar day counts, avatar initials, the «!» swatch) */
  --fs-sm: .875rem; --fs-xs: .8125rem; --fs-micro: .75rem;
  --topbar-h: 60px; /* the sticky top bar; drawers, quick views and sticky toolbars start below it */
  /* motion: short, eased-out, interruptible; only to show what changed or where something came from */
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 120ms; --t: 180ms; --t-exit: 100ms;
  color-scheme: light;
}
/* Dark themes are for screens only: paper always gets the light palette (black text on white, no ink-heavy boxes). */
@media screen {
:root[data-theme="dark"], :root[data-theme="oled"] {
  --page: #0d1424; --surface: #141d31; --surface-2: #1a2540; --text: #e7ebf3; --muted: #a3aec4;
  --border: #2a3654; --border-strong: #3a4870; --control-border: #65749b; /* 3.62 surface · 3.96 page · 3.27 surface-2 */
  --action: #4a6fd6; --action-hover: #3d61c4; --action-text: #ffffff; --selected-bg: #1e2c52; --selected-text: #c4d3ff;
  --link: #a9c0ff; --danger: #d0444a; --danger-bg: #3a1d24; --danger-text: #ffa3a7;
  --warn: #e0a72e; --warn-bg: #3a2e12; --warn-text: #f4cf7f; --info-bg: #1b2a4d; --info-text: #b8cbff;
  --ok-bg: #163324; --ok-text: #8fd9a8; --focus: #8fb0ff; --info-border: #6a88d8; /* 4.1 on --info-bg, 4.4 surface-2, 5.5 OLED surface-2 */
  --high-bg: #3a2e12; --high-border: #6b5420;
  --series-1: #3987e5; --series-2: #d95926; --grid: #2a3654;
  --shadow: none; --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* OLED: true black page and surfaces (a deliberate choice); separation comes from boundaries, never from greying the black */
:root[data-theme="oled"] {
  --page: #000000; --surface: #000000; --surface-2: #111111;
  --text: #ededed; --muted: #b0b0b0; --border: #303030; --border-strong: #505050;
  --control-border: #6b6b6b; /* 3.94 on black · 3.54 on surface-2 */
  --selected-bg: #14203b; --grid: #303030; --shadow: none;
}
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --page: #0d1424; --surface: #141d31; --surface-2: #1a2540; --text: #e7ebf3; --muted: #a3aec4;
    --border: #2a3654; --border-strong: #3a4870; --control-border: #65749b;
    --action: #4a6fd6; --action-hover: #3d61c4; --action-text: #ffffff; --selected-bg: #1e2c52; --selected-text: #c4d3ff;
    --link: #a9c0ff; --danger: #d0444a; --danger-bg: #3a1d24; --danger-text: #ffa3a7;
    --warn: #e0a72e; --warn-bg: #3a2e12; --warn-text: #f4cf7f; --info-bg: #1b2a4d; --info-text: #b8cbff;
    --ok-bg: #163324; --ok-text: #8fd9a8; --focus: #8fb0ff; --info-border: #6a88d8;
    --high-bg: #3a2e12; --high-border: #6b5420;
    --series-1: #3987e5; --series-2: #d95926; --grid: #2a3654;
    --shadow: none; --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.55 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-exit: 0ms; }
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* Keep the confirmation visible without relying on an animation. Busy buttons retain their text and a static ring. */
  .post.just-posted { box-shadow: inset 3px 0 0 var(--ok-text); }
  /* Separate rules so older browsers can ignore an unfamiliar pseudo-element independently. */
  ::details-content { transition: none !important; }
}
:root[data-motion="reduce"] { --t-fast: 0ms; --t: 0ms; --t-exit: 0ms; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after,
:root[data-motion="reduce"] ::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduce"] ::details-content { transition: none !important; }

a { color: var(--link); text-underline-offset: 2px; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; line-height: 1.25; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
@media (max-width: 640px) { h1 { font-size: 1.4rem; } }
p { margin: .4rem 0; }
code { font-size: .92em; background: var(--surface-2); padding: 0 .3em; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
time, .ref, .metric-num, .nav-count, .count { font-variant-numeric: tabular-nums; }
.label-short { display: none; }
@media (max-width: 640px) { /* shorter visible label on phones; the full label stays the accessible name */
  .label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .label-short { display: inline; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: .5rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.danger-text { color: var(--danger-text); }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.empty { color: var(--muted); padding: .65rem 0; margin: .25rem 0; }
.icon { flex-shrink: 0; }
.js .no-js-only { display: none; }
html:not(.js) .js-only { display: none !important; }
[hidden] { display: none !important; } /* a component's own display never overrides «hidden» */

/* ---------------------------------------------------------------- shell
   A white navigation column carries the brand; a light top bar holds notifications and the account. */
.shell { display: flex; flex: 1; min-height: 100vh; }
.sidenav { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; gap: .5rem; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; min-height: var(--topbar-h); padding: .4rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; }
.brand img { border-radius: 0; object-fit: contain; }
.sidenav .brand { padding: .25rem .5rem .9rem; margin-bottom: .25rem; border-bottom: 1px solid var(--border); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-family: var(--display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.brand-text span { font-size: .82rem; color: var(--muted); }
.brand-compact { display: none; }
.utils { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 3.5rem; }
main:focus { outline: none; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: 8px; color: var(--text); text-decoration: none; min-height: 44px; position: relative; }
.nav a .icon { color: var(--muted); flex-shrink: 0; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--selected-bg); color: var(--selected-text); font-weight: 600; }
.nav a[aria-current="page"] .icon { color: currentColor; }
.nav-section { margin: 1.1rem .75rem .3rem; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.nav-section:first-child { margin-top: .25rem; }
.nav-section:not(:first-child) { border-top: 1px solid var(--border); padding-top: 1rem; }
.sidenav-foot { margin-top: auto; padding: .75rem .5rem 0; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); }
.sidenav-foot a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; color: var(--muted); font-weight: 600; text-decoration: none; }
.sidenav-foot a:hover, .sidenav-foot a[aria-current="page"] { color: var(--text); }
.sidenav-foot p { margin: .25rem 0 0; font-size: .8rem; }
.drawer { display: none; }
.drawer > summary, .menu > summary, .bell { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; color: var(--text); }
.drawer > summary::-webkit-details-marker, .menu > summary::-webkit-details-marker { display: none; }
.menu { position: relative; }
.menu > summary { padding: 0 .75rem; gap: .4rem; border: 1px solid var(--control-border); background: var(--surface); }
.account-menu > summary { border-color: transparent; padding: 0 .5rem 0 .35rem; gap: .5rem; }
.account-menu > summary:hover, .account-menu[open] > summary, .bell:hover { background: var(--surface-2); }
.menu-who { display: flex; flex-direction: column; margin: 0 0 .35rem; padding: .35rem .5rem .55rem; border-bottom: 1px solid var(--border); }
.menu-who span { color: var(--muted); font-size: .88rem; }
.menu-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .5rem; box-shadow: var(--shadow-pop); z-index: 6; }
.menu-panel > a, .menu-panel .link-button, .menu-item-button { width: 100%; text-align: left; padding: .6rem .5rem; min-height: 44px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-panel > a:hover, .menu-item-button:hover { background: var(--surface-2); }
.menu-panel a, .menu-item-button { display: flex; align-items: center; gap: .6rem; }
.menu-panel hr { border: 0; border-top: 1px solid var(--border); margin: .35rem 0; }
.menu-danger { color: var(--danger-text); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.icon-button:hover { background: var(--surface-2); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin: -.5rem 0 .5rem; }
.bell { position: relative; text-decoration: none; }
@media (max-width: 899px) {
  .sidenav { display: none; }
  .drawer { display: block; }
  .brand-compact { display: flex; }
  .drawer-panel { position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: min(85vw, 320px); background: var(--surface); border-right: 1px solid var(--border); padding: 1rem; overflow-y: auto; z-index: 7; }
  .drawer[open]::before { content: ""; position: fixed; left: 0; right: 0; top: var(--topbar-h); bottom: 0; background: rgba(10, 14, 20, .45); z-index: 6; }
  .drawer[open] > .drawer-panel { animation: drawer-in var(--t) var(--ease-out); }
  .drawer[open]::before { animation: backdrop-in var(--t-fast) var(--ease-out); }
  main { padding: 1rem 1rem 3rem; }
  .menu-name { max-width: 8rem; }
}

/* bell: quick view of the latest notifications (the bell stays a link to the full page without JavaScript) */
.bell-wrap { position: relative; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 6px); width: min(380px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop); z-index: 6; overflow: hidden; animation: pop-in var(--t-fast) var(--ease-out); }
.bell-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .9rem; border-bottom: 1px solid var(--border); }
.bell-panel-head h2 { margin: 0; font-size: 1rem; }
.bell-panel-body { max-height: min(60vh, 460px); overflow-y: auto; }
.bell-panel-foot { display: block; padding: .7rem .9rem; border-top: 1px solid var(--border); text-align: center; font-weight: 600; text-decoration: none; }
.bell-panel-foot:hover { background: var(--surface-2); }
.bell-panel .notice-empty { padding: 1.25rem .9rem; }
@media (max-width: 480px) { .bell-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 4px); width: auto; } }

/* ---------------------------------------------------------------- sign-in pages: the logo's navy block with its red band */
.auth-layout {
  --auth-navy: #123179; --auth-navy-deep: #0a1f57; --auth-navy-lift: #1b42a0;
  --auth-on-navy: #ffffff; --auth-on-navy-soft: rgba(255, 255, 255, .8); --auth-line: rgba(255, 255, 255, .22);
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(min(100%, 30rem), 1fr);
  min-height: 100vh; min-height: 100dvh; background: var(--surface);
}
:root[data-theme="dark"] .auth-layout, :root[data-theme="oled"] .auth-layout { --auth-navy: #0f2a6c; --auth-navy-deep: #071641; --auth-navy-lift: #173b92; }
:root[data-theme="oled"] .auth-layout { --auth-navy-deep: #020817; }
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="system"] .auth-layout { --auth-navy: #0f2a6c; --auth-navy-deep: #071641; --auth-navy-lift: #173b92; }
}

.auth-brand {
  position: relative; display: flex; flex-direction: column; gap: 2.5rem; min-width: 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5.5vw, 5.5rem) calc(clamp(1.75rem, 3.5vw, 3rem) + 6px);
  color: var(--auth-on-navy);
  background: radial-gradient(85% 65% at 100% 0%, rgba(90, 130, 230, .22), transparent 70%),
              linear-gradient(165deg, var(--auth-navy-lift) 0%, var(--auth-navy) 42%, var(--auth-navy-deep) 100%);
}
.auth-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brand-red); }
.auth-identity { display: flex; flex-direction: column; align-items: flex-start; margin: auto 0; max-width: 30rem; }
.auth-logo { display: block; width: clamp(80px, 7vw, 104px); height: auto; aspect-ratio: 1; margin: 0 0 2.25rem; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3)); }
.auth-title { max-width: 12ch; margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.auth-title::after { content: ""; display: block; width: 3.25rem; height: 4px; margin-top: 1.5rem; border-radius: 2px; background: var(--brand-red); }
.auth-summary { max-width: 26rem; margin: 1.35rem 0 0; font-size: 1.125rem; line-height: 1.55; color: var(--auth-on-navy-soft); text-wrap: pretty; }
.auth-tagline { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--auth-line); font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: .01em; color: var(--auth-on-navy-soft); }

.auth-main { max-width: none; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2rem, 7vh, 5rem) clamp(1.25rem, 5vw, 4.5rem); background: var(--surface); }
.auth-card { width: 100%; max-width: 26.5rem; min-width: 0; }
.auth-card .messages { margin: 0 0 1.25rem; }
.auth-head { margin: 0; }
.auth-badge { position: relative; display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin: 6px 0 1.15rem 6px; border-radius: 12px; background: var(--selected-bg); color: var(--selected-text); }
.auth-badge::before { content: ""; position: absolute; inset: -6px; border: 1px solid currentColor; border-radius: 16px; opacity: .22; }
.auth-head.is-ok .auth-badge { background: var(--ok-bg); color: var(--ok-text); }
.auth-head.is-warn .auth-badge { background: var(--warn-bg); color: var(--warn-text); }
.auth-eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 .45rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--selected-text); }
.auth-eyebrow::before { content: ""; flex: 0 0 auto; width: 1.1rem; height: 2px; background: var(--brand-red); }
.auth-head.is-ok .auth-eyebrow { color: var(--ok-text); }
.auth-head.is-warn .auth-eyebrow { color: var(--warn-text); }
.auth-card h1 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem); line-height: 1.15; letter-spacing: -.02em; }
.auth-lead { margin: .65rem 0 0; color: var(--muted); }
.auth-form { margin-top: 1.6rem; }
.auth-form .error-summary { margin: 0 0 1.25rem; }
.field.auth-field { margin-bottom: 1.15rem; }
.field.auth-field > label { margin-bottom: .4rem; }
.auth-field .help ul { margin: .35rem 0 0; padding-left: 1.15rem; }
.auth-input { position: relative; }
.auth-field .auth-input input { min-height: 50px; padding: .7rem .9rem; border-radius: 10px; transition: border-color var(--t-fast) var(--ease-out); }
.auth-field .auth-input.has-icon input { padding-left: 2.75rem; }
.js .auth-field .auth-input.has-reveal input { padding-right: 3.25rem; }
.auth-field .auth-input input:focus { border-color: var(--action); }
.auth-field.has-error .auth-input input { border-color: var(--danger); }
.auth-input-icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; display: flex; color: var(--muted); pointer-events: none; transition: color var(--t-fast) var(--ease-out); }
.auth-input:focus-within .auth-input-icon { color: var(--selected-text); }
.has-error .auth-input-icon { color: var(--danger-text); }
.auth-reveal { position: absolute; right: 3px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.auth-reveal:hover { background: var(--surface-2); color: var(--text); }
.auth-reveal > span { display: flex; }
.auth-reveal .auth-reveal-hide, .auth-reveal[aria-pressed="true"] .auth-reveal-show { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal-hide { display: flex; }
.auth-reveal[aria-pressed="true"] { color: var(--selected-text); }
.auth-field-code .auth-input input { min-height: 56px; font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; font-size: 1.4rem; font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.auth-form .field-check { margin: .25rem 0 1.25rem; }
.btn.auth-submit, .auth-actions .btn { min-height: 50px; gap: .55rem; border-radius: 10px; }
.auth-submit { margin-top: .35rem; }
.auth-submit.btn-primary, .auth-actions .btn-primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 10px 20px -12px rgba(18, 49, 121, .75); }
.auth-submit .icon, .auth-actions .btn .icon { transition: translate var(--t-fast) var(--ease-out); }
.auth-submit:hover .icon, .auth-actions .btn:hover .icon { translate: 3px 0; }
.auth-submit[aria-busy="true"] .icon { display: none; }
.auth-actions { margin: 1.6rem 0 0; }
.auth-back { margin: 1.25rem 0 0; }
.auth-back a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600; text-decoration: none; }
.auth-back a:hover { text-decoration: underline; }
.auth-alt { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.auth-alt-title { margin: 0 0 .75rem; font-family: var(--font); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.auth-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.auth-options a { display: flex; align-items: center; gap: .85rem; min-height: 44px; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.auth-options a:hover { border-color: var(--control-border); background: var(--surface-2); }
.auth-options a > .icon { margin-left: auto; color: var(--muted); transition: translate var(--t-fast) var(--ease-out); }
.auth-options a:hover > .icon { translate: 2px 0; color: var(--text); }
.auth-option-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--selected-bg); color: var(--selected-text); }
.auth-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.auth-option-text strong { font-weight: 600; }
.auth-option-text span { font-size: var(--fs-sm); color: var(--muted); }
.auth-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.75rem; padding: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.auth-steps li { display: flex; align-items: center; gap: .45rem; }
.auth-steps li:not(:last-child)::after { content: ""; width: clamp(.75rem, 3vw, 1.75rem); height: 2px; margin-left: .1rem; border-radius: 1px; background: var(--border-strong); }
.auth-steps li.is-done::after { background: var(--selected-text); }
.auth-step-dot { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--control-border); border-radius: 50%; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.auth-steps .is-current { color: var(--text); }
.auth-steps .is-current .auth-step-dot { background: var(--action); border-color: var(--action); color: var(--action-text); }
.auth-steps .is-done .auth-step-dot { background: var(--selected-bg); border-color: var(--selected-bg); color: var(--selected-text); }
.auth-facts, .auth-aside { margin: 1.5rem 0 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: .95rem; }
.auth-facts { list-style: none; padding: .25rem 1rem; }
.auth-facts li { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; }
.auth-facts li + li { border-top: 1px solid var(--border); }
.auth-aside { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; }
.auth-aside p { margin: 0; }
.auth-facts .icon, .auth-aside .icon { margin-top: .15rem; color: var(--selected-text); }
@media (max-width: 860px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-brand { padding: 1rem 1.25rem calc(1rem + 4px); }
  .auth-brand::after { height: 4px; }
  .auth-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; row-gap: .1rem; margin: 0; max-width: none; }
  .auth-logo { grid-row: 1 / span 2; width: 48px; margin: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28)); }
  .auth-title { max-width: none; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.01em; }
  .auth-title::after { display: none; }
  .auth-summary { max-width: none; margin: 0; font-size: var(--fs-sm); line-height: 1.4; }
  .auth-tagline { display: none; }
  .auth-main { justify-content: flex-start; padding: 1.75rem 1.25rem 2.5rem; }
  .auth-card { max-width: 30rem; }
}
@media (max-width: 380px) { .auth-summary { display: none; } }

/* ---------------------------------------------------------------- page */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head .overline + h1 { margin-top: .1rem; }
.page-kicker { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.head-actions, .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.actions { margin: .75rem 0 1rem; }
.section-sep { border-top: 1px solid var(--border); margin-top: 2rem; }
.ref { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.overline { margin: 0 0 .15rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.spread { justify-content: space-between; align-items: center; }
.spread > div { display: flex; gap: .5rem; flex-wrap: wrap; }
.two-col { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.section-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--control-border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--action); border-color: var(--action); color: var(--action-text); }
.btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-small { min-height: var(--choice-h); padding: .3rem .75rem; font-size: .92rem; }
.btn-quiet { border-color: transparent; color: var(--muted); font-weight: 500; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* ---------------------------------------------------------------- forms */
.form-narrow { max-width: 680px; }
.field { margin-bottom: 1rem; }
.field > label, fieldset.field > legend { display: block; font-weight: 600; margin-bottom: .3rem; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=url], input[type=number], input[type=date], input[type=datetime-local], input[type=time], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .7rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
textarea { min-height: 6rem; resize: vertical; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--action); }
input[type=radio] { width: 1.15rem; height: 1.15rem; accent-color: var(--action); flex-shrink: 0; }
.field-check { display: flex; gap: .55rem; align-items: flex-start; flex-wrap: wrap; }
.field-check > input[type=checkbox] { flex: 0 0 auto; margin: .2rem 0 0; } /* centred on the label's first line */
.field-check > label { flex: 1 1 0; min-width: 0; margin: 0; font-weight: 500; cursor: pointer; } /* basis 0: a long label wraps BESIDE the box, never below it */
.field-check .error, .field-check .help { flex-basis: 100%; margin: .1rem 0 0 1.75rem; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.radio-row { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 400; overflow-wrap: anywhere; }
.help { color: var(--muted); font-size: .9rem; }
.error { color: var(--danger-text); font-weight: 600; font-size: .92rem; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); border-width: 2px; }
fieldset { min-width: 0; }
fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; }
.checklist { max-height: 300px; overflow-y: auto; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); margin-top: .4rem; }
.checklist label { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; min-height: 44px; font-weight: 400; cursor: pointer; }
.checklist [hidden] { display: none !important; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; }
details.section { border: 1px solid var(--border); border-radius: var(--r); padding: .25rem 1rem; margin: 1rem 0; background: var(--surface); }
details.section > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: .5rem; }
details.section[open] { padding-bottom: 1rem; }
/* segmented choice (priority, appearance): real radio buttons, styled as one row of options */
.segmented { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; padding: 0; margin: 0; }
.segmented label { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem; border: 1px solid var(--control-border); border-radius: var(--choice-r); background: var(--surface); font-weight: 500; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--selected-bg); color: var(--selected-text); font-weight: 600; }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.segmented .prio-icon { width: 15px; height: 15px; }
.segmented .seg-urgent .prio-icon { color: var(--danger-text); }
.segmented .seg-high .prio-icon { color: var(--warn); }
.segmented .seg-low .prio-icon { color: var(--muted); }

/* ---------------------------------------------------------------- filters: quick states, one search row, the rest on demand */
.filter-bar { margin: .25rem 0 1rem; }
.quick { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 .75rem; }
/* one-of-N choices share one look: quick states (.quick), view switches (.seg, joined: one control) and periods
   (.team-periods). Selected = tint + 2 px navy edge + bold, and aria-current says it; solid navy stays reserved for the one
   primary action. Radio rows (.segmented) use the same selected look at form height. */
.quick a, .seg a, .team-periods a { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--choice-h); padding: .35rem .85rem; border: 1px solid var(--control-border); border-radius: var(--choice-r); background: var(--surface); color: var(--text); font-size: .95rem; text-decoration: none; }
.quick a:hover, .seg a:hover, .team-periods a:hover { border-color: var(--muted); }
.quick a[aria-current="true"], .seg a[aria-current="true"], .team-periods a[aria-current="true"] { background: var(--selected-bg); border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); color: var(--selected-text); font-weight: 600; }
.seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; }
.seg a { position: relative; border-radius: 0; white-space: nowrap; }
.seg a + a { margin-left: -1px; }
.seg a:first-child { border-radius: var(--choice-r) 0 0 var(--choice-r); }
.seg a:last-child { border-radius: 0 var(--choice-r) var(--choice-r) 0; }
.seg a:hover, .seg a[aria-current="true"], .seg a:focus-visible { z-index: 1; }
.quick .quick-sep { width: 1px; align-self: stretch; margin: .35rem .25rem; background: var(--border); }
.quick .quick-prio .prio-icon { width: 14px; height: 14px; color: var(--danger-text); }
.quick .quick-prio[aria-current="true"] .prio-icon { color: currentColor; }
.filters { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: flex-end; margin-bottom: .25rem; }
.filters .field { min-width: 180px; flex: 1 1 180px; max-width: 320px; margin-bottom: .5rem; }
.filters .field-search { flex: 2 1 320px; max-width: 560px; }
.field-sort { max-width: 190px; }
.search-row { display: flex; gap: .5rem; }
.search-row input { flex: 1; min-width: 0; }
.search-row .btn { flex-shrink: 0; }
.more-filters { flex-basis: 100%; }
.more-filters > summary { cursor: pointer; color: var(--link); min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.filters-grid { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.filter-actions { display: flex; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.filters > .filter-actions { align-self: flex-end; margin-bottom: .5rem; } /* a form's own button (admin lists): on the fields' line */
.applied { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; }
.applied strong { color: var(--text); }
.filter-feedback { font-size: .9rem; color: var(--muted); margin: .25rem 0; }
.filter-feedback:empty { display: none; }
.action-confirm-body { padding: 1.4rem; }
.action-confirm-body h2 { margin: 0 0 .6rem; }
.action-confirm-body p { color: var(--muted); overflow-wrap: anywhere; }
.action-confirm-body .form-actions { justify-content: flex-end; margin-top: 1.25rem; }
.motion-choice { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.motion-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; border: 0; padding: 0; margin: 0; }
.motion-options legend { font-weight: 600; margin-bottom: .65rem; }
.motion-option { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem; border: 1px solid var(--control-border); border-radius: var(--r); cursor: pointer; background: var(--surface); }
.motion-option input { flex: 0 0 auto; margin: .25rem 0 0; accent-color: var(--action); }
.motion-option > span { display: grid; gap: .2rem; min-width: 0; }
.motion-option > span > span { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.motion-option:has(input:checked) { background: var(--selected-bg); border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.motion-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.motion-option, .theme-option, .mode-option, .segmented label { transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.choice-confirmed input { animation: choice-tick var(--t) var(--ease-out); }
@keyframes choice-tick { from { scale: .8; } to { scale: 1; } }
.is-copied { color: var(--ok-text); }
.next-cta .icon, .card-foot-link .icon { transition: translate var(--t-fast) var(--ease-out); }
.next-cta:is(:hover, :focus-visible) .icon, .card-foot-link:is(:hover, :focus-visible) .icon { translate: 3px 0; }
@media (max-width: 640px) { .motion-options { grid-template-columns: 1fr; } }
.saved-views { margin-bottom: .4rem; font-size: .92rem; }
.saved-views summary { min-height: 40px; display: inline-flex; align-items: center; gap: .4rem; color: var(--link); cursor: pointer; }
.saved-views li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.save-view-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-block: .6rem; }
.save-view-form input { width: min(240px, 100%); }
.saved-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.saved-list a { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .2rem .75rem; border-radius: 999px; background: var(--selected-bg); color: var(--selected-text); font-size: .9rem; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
  .quick { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem 2px; scrollbar-width: none; }
  .quick a { flex-shrink: 0; }
  .filters .field, .filters .field-search { max-width: none; flex-basis: 100%; }
  .search-row .btn { padding: .5rem .75rem; }
  .field-sort { max-width: none; }
  .save-view-form { align-items: stretch; }
  .save-view-form label { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- tables & lists
   One flat surface, quiet header, row separators. The card is the table's own container: when it is narrow (a phone, or
   a column beside other content) each row becomes a short stacked entry; in between, cells tighten; anything still wider
   scrolls inside the card, never the page. Only the title opens the assignment, so a row does not pretend to be a link. */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; overscroll-behavior-x: contain; container: table-card / inline-size; }
.tasks { width: 100%; border-collapse: collapse; }
.tasks th { text-align: left; font-size: .82rem; color: var(--muted); font-weight: 600; padding: .65rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.tasks td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tasks tr:last-child td { border-bottom: 0; }
/* the row is tinted only while its title link is pointed at or focused: it shows which row the link belongs to */
.tasks tbody tr:has(.t-title a:hover, .t-title a:focus-visible) { background: var(--surface-2); }
.t-title a { font-weight: 600; color: var(--link); text-decoration: none; padding-block: .3rem; } /* padding widens the target, not the line */
.t-title a:hover { text-decoration: underline; }
.t-title-line { display: flex; align-items: flex-start; gap: .25rem; }
.t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; margin-top: .3rem; font-size: .86rem; color: var(--muted); }
.t-activity { color: var(--info-text); font-weight: 600; } /* when the work happens, apart from the deadline column */
.t-kind { display: inline-flex; align-items: center; gap: .25rem; }
.row-peek { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin-top: -.15rem; border-radius: 8px; color: var(--muted); }
.row-peek:hover, .row-peek:focus-visible { background: var(--surface-2); color: var(--link); }
.t-sub { display: block; margin-top: .2rem; color: var(--muted); font-size: .86rem; font-weight: 400; }
.t-when { white-space: nowrap; font-size: .95rem; }
.t-when time { display: block; }
.t-when .due { display: block; margin-top: .2rem; padding: 0; background: none; font-size: .88rem; font-weight: 600; white-space: normal; }
.t-people { font-size: .95rem; min-width: 12rem; }
.t-prio { white-space: nowrap; }
.tasks .t-title { min-width: 16rem; }
.tasks-report .t-people { min-width: 11rem; }
.t-done { white-space: nowrap; font-size: .93rem; }
@container table-card (max-width: 60rem) { /* tighter cells before anything has to scroll */
  .tasks th, .tasks td { padding-inline: .65rem; }
  .tasks .t-title { min-width: 12rem; }
  .t-people, .tasks-report .t-people { min-width: 8rem; }
  .t-done { white-space: normal; }
}
/* stacked rows. Written twice on purpose: by the card's width (tables in a .table-card), and by the screen for the few
   admin tables that have no card. Screen only: printing always keeps the columns. */
@media screen {
  @container table-card (max-width: 44rem) {
    .tasks thead { display: none; }
    .tasks, .tasks tbody { display: block; }
    .tasks tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
    .tasks tbody tr:last-child { border-bottom: 0; }
    .tasks td, .tasks td.t-title, .tasks td.t-people { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; overflow-wrap: anywhere; white-space: normal; }
    .tasks td.t-title { margin-bottom: .15rem; }
    .tasks td.t-people { font-size: .92rem; }
    .tasks td[data-label]:not(.t-title, .bulk-check)::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
    .tasks .t-when time { display: inline; }
    .tasks .t-when .due { display: inline; margin: 0 0 0 .35rem; }
    .tasks td.t-state .t-sub { display: inline; margin-left: .35rem; }
  }
}
@media screen and (max-width: 720px) {
  :not(.table-card) > .tasks thead { display: none; }
  :not(.table-card) > .tasks, :not(.table-card) > .tasks tbody { display: block; }
  :not(.table-card) > .tasks tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
  :not(.table-card) > .tasks tbody tr:last-child { border-bottom: 0; }
  :not(.table-card) > .tasks td { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; overflow-wrap: anywhere; white-space: normal; }
  :not(.table-card) > .tasks td[data-label]:not(.t-title, .bulk-check)::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
}
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1rem 0; }
.pager a { min-height: 44px; display: inline-flex; align-items: center; }

/* people: avatar stack + short names */
.people { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; vertical-align: middle; }
.stack { display: inline-flex; flex-shrink: 0; }
.stack .avatar { border: 2px solid var(--surface); }
.stack .avatar + .avatar { margin-left: -7px; }
.avatar-more { background: var(--surface-2); color: var(--muted); font-size: var(--fs-micro); }
.people-text { min-width: 0; overflow-wrap: anywhere; }
.people-full { display: none; }

/* ---------------------------------------------------------------- badges, priority and time left */
.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.badge-neutral { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.badge-info { background: var(--info-bg); color: var(--info-text); }
.badge-ok { background: var(--ok-bg); color: var(--ok-text); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--muted); }
a.badge { text-decoration: none; }
.prio { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 700; padding: .12rem .55rem .12rem .45rem; border-radius: 999px; white-space: nowrap; line-height: 1.45; vertical-align: middle; }
.prio-icon { width: 14px; height: 14px; flex-shrink: 0; }
.prio-urgent { background: var(--danger); color: #fff; }
.prio-high { background: var(--high-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--high-border); }
.prio-low { color: var(--muted); font-weight: 500; padding-left: 0; }
.prio-normal { color: var(--muted); font-weight: 500; padding-left: 0; }
.due { display: inline-flex; align-items: center; gap: .3rem; width: max-content; max-width: 100%; font-size: var(--fs-xs); font-weight: 600; padding: .08rem .5rem; border-radius: 6px; background: var(--surface-2); color: var(--muted); line-height: 1.5; white-space: nowrap; }
.due-icon { width: 13px; height: 13px; flex-shrink: 0; }
.due-soon { background: var(--warn-bg); color: var(--warn-text); }
.due-over { background: var(--danger-bg); color: var(--danger-text); }

/* ---------------------------------------------------------------- alerts & messages */
.alert { border-radius: var(--r); padding: .75rem 1rem; margin: .75rem 0; border: 1px solid var(--border); background: var(--surface); }
.alert h2 { margin-top: 0; }
.alert-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.alert-warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.alert-info { background: var(--info-bg); color: var(--info-text); border-color: transparent; }
.messages { margin-bottom: 1rem; }
.msg { padding: .7rem 1rem; border-radius: var(--r); margin: .4rem 0; background: var(--info-bg); color: var(--info-text); }
.msg-success { background: var(--ok-bg); color: var(--ok-text); }
.msg-error { background: var(--danger-bg); color: var(--danger-text); }
.msg-warning { background: var(--warn-bg); color: var(--warn-text); }
.notice { display: flex; gap: .65rem; align-items: flex-start; }
.notice-compact { padding: .55rem .9rem; margin: .5rem 0; }
.notice-when { color: inherit; opacity: .85; font-weight: 400; }
.notice-links { display: inline-flex; flex-wrap: wrap; gap: 0 .9rem; margin-left: .35rem; }
.notice-links a { min-height: 32px; display: inline-flex; align-items: center; }
.notice > .icon { flex-shrink: 0; margin-top: .15rem; }
.notice p { margin: 0; overflow-wrap: anywhere; }
.notice a { color: inherit; font-weight: 600; }

/* empty and quiet states: say what is (not) there, without dashed boxes */
.empty-state { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
/* the icon only names the kind of place (search, people, chart…): neutral, small, never a status colour */
.empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--muted); flex-shrink: 0; }
.empty-title { margin: .1rem 0 0; font-weight: 600; }
.empty-text { margin: .15rem 0 0; color: var(--muted); }
.quiet-line { display: flex; align-items: center; gap: .5rem; color: var(--muted); margin: .25rem 0; }
.quiet-line .icon { color: var(--ok-text); }

/* ---------------------------------------------------------------- Inicio: sections, counters, agenda */
.home-section { margin-top: 2rem; }
.home-section + .home-section { padding-top: 1.75rem; border-top: 1px solid var(--border); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.section-head h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; }
.section-head h2 .icon { color: var(--muted); }
.section-count { font-family: var(--font); font-size: var(--fs-xs); font-weight: 700; padding: 0 .5rem; border-radius: 999px; background: var(--selected-bg); color: var(--selected-text); }
.sub-head { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; margin: 1.5rem 0 .6rem; }
.sub-head h3 { margin: 0; }
.section-foot { margin: .6rem 0 0; }
.personal-secondary .section-head h2 { font-size: 1.05rem; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin: .25rem 0 .5rem; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.metrics > li { min-width: 0; }
.metrics > li + li { border-left: 1px solid var(--border); }
.metric { display: flex; flex-direction: column; gap: .1rem; height: 100%; padding: .8rem 1rem; color: var(--text); text-decoration: none; }
a.metric:hover { background: var(--surface-2); }
a.metric:hover .metric-label { color: var(--link); text-decoration: underline; }
.metric-num { font-family: var(--display); font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.metric-label { color: var(--muted); font-size: .9rem; line-height: 1.3; }
.metric-danger .metric-num { color: var(--danger-text); }
.metric-danger .metric-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: var(--danger); vertical-align: 1px; }
@media (max-width: 640px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrics > li:nth-child(4) { border-left: 0; }
  .metrics > li:nth-child(n+4) { border-top: 1px solid var(--border); }
  .metric { padding: .6rem .7rem; }
  .metric-num { font-size: 1.35rem; }
  .metric-label { font-size: .82rem; }
}
.agenda-mini { list-style: none; margin: 0; padding: 0 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.agenda-mini li { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) auto; align-items: center; gap: .35rem 1rem; padding: .75rem 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.agenda-mini li:first-child { border-top: 0; }
.agenda-mini-when { display: flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; color: var(--text); flex-wrap: wrap; }
.agenda-mini-when .icon { color: var(--muted); }
.agenda-mini-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.agenda-mini-main a { font-weight: 600; }
.agenda-mini-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.agenda-mini-meta .muted { display: inline-flex; align-items: center; gap: .25rem; }
@media (max-width: 800px) { .agenda-mini li { grid-template-columns: 1fr; gap: .25rem; } }
.home-filters { margin: .25rem 0 .5rem; }
.work-list { padding: 0 1.1rem; list-style: none; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.work-list li { padding: .75rem 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.work-list li:first-child { border-top: 0; }
.work-list li > span { flex-basis: 100%; }

/* ---------------------------------------------------------------- detail */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: .5rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem; margin: 0 0 .5rem; }
.facts dt { color: var(--muted); font-size: .88rem; }
.facts > div { min-width: 0; }
.facts dd { margin: 0; overflow-wrap: anywhere; } /* a long path or address wraps instead of widening a phone page */
.history-list { padding-left: 1.1rem; font-size: .95rem; }
.history-list li { margin: .4rem 0; overflow-wrap: anywhere; }

/* task detail: header — title/state and the one main action, then one compact strip (deadline, activity, team) */
.task-head { margin-bottom: .75rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: -.5rem 0 .25rem; font-size: .95rem; }
.crumbs a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs .ref::before { content: "/"; margin-right: .75rem; color: var(--border-strong); }
.task-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.task-title { flex: 1 1 420px; min-width: 0; }
.task-title .overline { font-size: .82rem; }
.task-head h1 { overflow-wrap: anywhere; max-width: 48ch; }
.task-head .badges { margin: .5rem 0 0; }
.task-head .actions { margin: .25rem 0 0; justify-content: flex-end; }
.task-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.75rem; margin-top: 1rem; padding: .55rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.strip-item { display: flex; align-items: center; gap: .45rem; margin: 0; min-height: 36px; }
.strip-item > .icon { color: var(--muted); }
.deadline-line { flex-wrap: nowrap; }
.deadline-line .due { margin-left: .2rem; }
.task-tools { position: relative; }
.task-tools > summary { min-width: 44px; padding: 0 .6rem; }
.task-tools [data-copy-status] { display: block; padding: .4rem; }
.task-tools [data-copy-status]:empty { display: none; }
/* the team summary near the top on narrower screens (the full team panel is beside the instructions from 1180px) */
.team-peek { display: none; margin-top: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.team-peek > summary { list-style: none; display: flex; align-items: center; gap: .65rem; min-height: 52px; padding: .45rem .75rem; cursor: pointer; }
.team-peek > summary::-webkit-details-marker { display: none; }
.team-peek > summary > .icon { margin-left: auto; color: var(--muted); transition: transform 150ms ease; }
.team-peek[open] > summary > .icon { transform: rotate(180deg); }
.team-peek-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.team-peek-text > span { color: var(--muted); font-size: .9rem; }
.team-peek-body { padding: 0 .9rem .8rem; border-top: 1px solid var(--border); }
.team-mini { list-style: none; margin: .35rem 0 .6rem; padding: 0; }
.team-mini li { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.4; }
@media (max-width: 1179px) {
  .team-strip { display: none; }
  .team-peek { display: block; }
}
@media (max-width: 640px) {
  .crumbs .ref { display: none; }
  .crumbs { flex-wrap: nowrap; }
  .task-title .overline { display: none; }
  .task-title-row { gap: .45rem; }
  .task-head h1 { font-size: 1.3rem; line-height: 1.3; }
  .task-head .badges { margin-top: .3rem; }
  .task-head .actions { flex: 1 1 100%; justify-content: flex-start; margin-top: .15rem; }
  .task-head .actions > form, .task-head .actions > .complete { flex: 1 1 auto; min-width: 0; }
  .task-head .actions > form .btn, .task-head .actions > .complete > summary { width: 100%; }
  .task-head .actions .btn { white-space: normal; padding: .4rem .65rem; }
  .task-strip { margin-top: .45rem; gap: .1rem 1rem; padding: .45rem 0; }
  .notice-compact { padding: .5rem .65rem; margin-block: .5rem; }
  .summary-main > h3:first-child { margin-top: .3rem; }
}
.complete > summary { list-style: none; }
.complete > summary::-webkit-details-marker { display: none; }
.complete[open] { flex-basis: 100%; order: 10; }
.complete-body { margin-top: .5rem; }
.complete-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem; max-width: 560px; }
.complete-form h2 { margin-top: 0; font-size: 1.15rem; }
.complete-form textarea { margin: .3rem 0; }
.admin-menu .menu-panel, .task-tools .menu-panel { right: 0; left: auto; }
.done-note { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .8rem; font-size: .9rem; }

/* task detail: sections */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: .75rem 0 0; overflow-x: auto; scrollbar-width: thin; }
.tabs a { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: .4rem .9rem; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--action); }
.tabs .count { font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 .45rem; color: var(--text); }
@media (max-width: 480px) {
  .tabs { gap: 0; }
  .tabs a { flex: 1 1 auto; justify-content: center; padding: .4rem .4rem; gap: .3rem; }
  .tabs a .icon { display: none; }
}
@media (max-width: 360px) { .tabs a { font-size: .9rem; padding: .4rem .25rem; } .tabs .count { padding: 0 .35rem; } }
.panel { padding-top: 1rem; }
.panel:focus { outline: none; }
html:not(.js) .panel { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.js .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.summary-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1180px) { .summary-grid { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; } }
.summary-main h3:first-child { margin: 0 0 .45rem; }
.instructions { font-size: 1.05rem; line-height: 1.65; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; overflow-wrap: anywhere; max-width: 72ch; }
.summary-aside { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.15rem; scroll-margin-top: 76px; }
@media (max-width: 640px) { .instructions { padding: .9rem 1rem; } }
.summary-aside h3 { margin-top: 0; }
.details-list { margin: 0; display: grid; gap: .75rem; }
.details-list dt { color: var(--muted); font-size: .88rem; }
.details-list dd { margin: 0; overflow-wrap: anywhere; }
.privacy-note { display: flex; gap: .45rem; align-items: flex-start; color: var(--muted); font-size: .88rem; margin-top: 1rem; }
.privacy-note .icon { flex-shrink: 0; margin-top: .15rem; }
.related { margin-top: 1.25rem; }
.history { margin-top: 1.5rem; }
.history > summary { gap: .5rem; }
.coverage-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .75rem 1.25rem; margin: 1rem 0; max-width: 72ch; }
.coverage-details dt { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .85rem; }
.coverage-details .icon { color: var(--muted); }
.coverage-details dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.pinned-update { padding: .8rem 1rem; background: var(--selected-bg); border-radius: var(--r); margin: 0 0 1rem; max-width: 72ch; }
.pinned-update > strong { display: flex; align-items: center; gap: .4rem; }
.expected-output { margin-block: 1.2rem; }
.change-list article { border-top: 1px solid var(--border); padding-block: .6rem; }
.change-list article:target, .file-row:target { outline: 2px solid var(--action); outline-offset: 3px; }
.new-activity { margin-top: .4rem; padding: .5rem 0; font-weight: 600; }
/* private draft: one quiet line under the form title; a found draft is a small notice with two actions */
.draft-bar { margin: -.25rem 0 .9rem; }
.draft-line { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; margin: 0; color: var(--muted); font-size: var(--fs-xs, .8rem); line-height: 1.5; }
.draft-line .draft-note { color: var(--muted); }
.draft-line .link-button { font-size: inherit; color: var(--link); padding: 0; min-height: 0; margin-left: .2rem; }
.draft-state { display: inline-flex; color: var(--muted); }
.draft-state[data-kind="ok"] { color: var(--ok-text, var(--muted)); }
.draft-state[data-kind="warn"] { color: var(--warn-text); }
.draft-state[data-kind="busy"] { opacity: .55; }
.draft-found { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .6rem; padding: .6rem .8rem; border-radius: var(--r); background: var(--info-bg); color: var(--info-text); }
.draft-found p { flex: 1 1 16rem; margin: 0; font-size: .92rem; }
.draft-found .muted { color: inherit; opacity: .85; }
.draft-found-icon { display: inline-flex; }
.draft-found-actions { display: flex; gap: .4rem; }

/* short explanations (click/tap/keyboard; never hover-only) */
.hint { margin: .25rem 0 .5rem; }
.hint > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; cursor: pointer; color: var(--link); font-size: .92rem; list-style: none; }
.hint > summary::-webkit-details-marker { display: none; }
.hint > summary span { text-decoration: underline; text-underline-offset: 2px; }
.writing-guide { margin-top: -.5rem; }
.writing-guide ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.writing-guide li { margin: .25rem 0; }
.hint-compact { margin: 0; display: inline-block; position: relative; }
.hint-compact > summary { min-width: 36px; min-height: 36px; justify-content: center; border-radius: 999px; color: var(--muted); }
.hint-compact > summary:hover { background: var(--surface-2); color: var(--link); }
.hint-compact .hint-body { position: absolute; z-index: 4; top: 100%; left: 50%; transform: translateX(-50%); width: min(320px, 80vw); box-shadow: var(--shadow-pop); }
@media (max-width: 640px) { .hint-compact .hint-body { left: auto; right: -2.5rem; transform: none; } }
.hint-body { max-width: 60ch; background: var(--info-bg); color: var(--info-text); border-radius: var(--r-sm); padding: .65rem .85rem; font-size: .93rem; font-weight: 400; }

/* conversation */
.thread-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.thread { list-style: none; margin: .5rem 0 1.25rem; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.post { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .75rem; padding: .9rem 1rem; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.post:first-child { border-top: 0; }
.post:target, .post:focus { background: var(--info-bg); outline: none; }
.post-help { box-shadow: none; }
.post-help_reply { box-shadow: none; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: 0 0 .25rem; font-size: .92rem; }
.post-meta time { color: var(--muted); }
.post-body { overflow-wrap: anywhere; line-height: 1.6; }
.post-main { min-width: 0; }
.composer, .help-reply { max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; margin-top: 1rem; scroll-margin-top: 80px; }
.help-reply { background: var(--warn-bg); border-color: transparent; }
.help-reply h3 { margin-top: 0; display: flex; align-items: center; gap: .45rem; }
.composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.composer-actions p { margin: 0; }

/* files */
.file-groups { display: grid; gap: 1.25rem; }
.file-group h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .1rem; }
.files { list-style: none; padding: 0; margin: .5rem 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.file-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem .85rem; align-items: start; padding: .75rem 1rem; border-top: 1px solid var(--border); }
.file-row:first-child { border-top: 0; }
.file-icon { color: var(--muted); padding-top: .15rem; width: 32px; }
.file-name { font-weight: 600; overflow-wrap: anywhere; margin: 0; }
.file-meta { color: var(--muted); font-size: .9rem; margin: .1rem 0 0; overflow-wrap: anywhere; }
.file-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.file-removed .file-name { font-weight: 500; color: var(--muted); }
.file-main { min-width: 0; }
.file-thumbnail { width: 76px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.file-thumbnail img { width: 76px; height: 58px; object-fit: cover; }
.file-row:has(.file-thumbnail:not([hidden])) > .file-icon { display: none; }
.preview > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; cursor: pointer; color: var(--link); }
.preview video { display: block; width: 100%; max-width: 640px; max-height: 360px; margin-top: .35rem; background: #000; border-radius: var(--r-sm); }
.preview audio { display: block; margin-top: .35rem; max-width: 100%; }
@media (max-width: 640px) {
  .file-row { grid-template-columns: auto minmax(0, 1fr); }
  .file-actions { grid-column: 2; justify-content: flex-start; }
}
.upload-box { max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; margin-top: 1.25rem; }
.upload-box h3 { margin-top: 0; display: flex; align-items: center; gap: .45rem; }
.uploader { display: grid; gap: .25rem; }
.uploader > * { min-width: 0; }
input[type=file] { max-width: 100%; width: 100%; font: inherit; }
input[type=file]::file-selector-button { min-height: 44px; margin-right: .75rem; padding: .45rem 1rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--muted); }
.upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.uploader progress { flex: 1 1 200px; height: 12px; accent-color: var(--action); }
.upload-status { min-height: 1.5em; font-weight: 600; }
.formats > summary, .link-box > summary { cursor: pointer; color: var(--link); min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.link-box { border-top: 1px solid var(--border); margin-top: .75rem; padding-top: .25rem; }
.link-form { margin-top: .5rem; }
.image-viewer { width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; }
.image-viewer::backdrop { background: rgba(0, 0, 0, .65); }
.image-viewer h2 { font-size: 1.1rem; padding-right: 5rem; }
.image-viewer img { display: block; max-width: 100%; max-height: 65vh; margin: 1rem auto; object-fit: contain; }
@media (max-width: 640px) { .image-viewer h2 { padding-right: 0; } }

/* native dialogs (completion) */
.dialog { width: min(92vw, 540px); max-height: 90vh; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; background: var(--surface); color: var(--text); box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.dialog::backdrop { background: rgba(10, 14, 20, .55); }
.dialog .complete-form { border: 0; border-radius: 0; max-width: none; padding: 1.25rem; background: transparent; }
.dialog[open], .image-viewer[open] { animation: dialog-in var(--t) var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: none; } }

/* optional tour */
.tour-invite { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .9rem 1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.tour-invite > div { flex: 1 1 260px; }
.tour-invite h2 { margin: 0; font-size: 1.05rem; }
.tour-invite p { margin: .2rem 0 0; color: var(--muted); }
.tour-invite-icon { color: var(--link); }
.tour-invite-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
dialog.tour { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--text); }
dialog.tour::backdrop { background: transparent; }
[data-tour], .file-groups, .composer { scroll-margin-top: 76px; } /* clear the sticky top bar when the tour scrolls */
.tour-ring { position: fixed; border: 3px solid var(--focus); border-radius: var(--r); box-shadow: 0 0 0 9999px rgba(10, 14, 20, .5); pointer-events: none; }
.tour-card { position: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: 0 12px 36px rgba(0,0,0,.35); max-height: calc(100vh - 24px); overflow-y: auto; }
.tour-card:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.tour-card h2 { margin: .1rem 2.5rem .35rem 0; font-size: 1.1rem; }
.tour-progress { margin: 0; font-size: .85rem; color: var(--muted); font-weight: 600; }
.tour-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .75rem; }
.tour-skip { display: inline-block; margin-top: .5rem; min-height: 40px; }
.tour-close { position: absolute; top: .4rem; right: .4rem; font-size: 1.5rem; line-height: 1; }

/* motion vocabulary: brief, optional, never required to use the page; all of it is disabled by reduced motion (top) */
.btn, .icon-button, .bell, .menu > summary, .menu-panel > a, .menu-item-button, .tool-btn,
.nav a, .tabs a, .quick a, .seg a, .hint > summary, .metric, .chip, .rte-btn, .file-row, .tasks tbody tr, .notif-item, .row-peek, .cal-date, .day-item,
details.filters-disclosure > summary, details.chart-empty-weeks > summary, details[data-bulk-options] > summary {
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.btn:active:not([disabled]):not([aria-disabled="true"]):not([aria-busy="true"]), .icon-button:active:not([disabled]) { transform: translateY(1px); transition-duration: 60ms; }
.account-menu > summary > .icon { transition: rotate var(--t-fast) var(--ease-out); }
.account-menu[open] > summary > .icon { rotate: 180deg; }
.post { transition: background-color 200ms ease; }
details.menu[open] > .menu-panel, .hint[open] > .hint-body, .person-card[open] > .person-card-body, .tool-pop[open] > .tool-panel { animation: pop-in var(--t-fast) var(--ease-out); }
/* Individual translate preserves the help bubble's existing transform used for horizontal centring. */
@keyframes pop-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: none; } }
@keyframes drawer-in { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.post.just-posted { box-shadow: inset 3px 0 0 var(--ok-text); }
.post.just-posted::after { content: "Publicado"; display: block; padding: .2rem .75rem; color: var(--ok-text); font-size: var(--fs-xs); font-weight: 600; }

/* ---------------------------------------------------------------- notifications (full page and bell quick view) */
.notif-groups { display: grid; gap: 1.25rem; }
.notif-group h2 { margin: 0 0 .5rem; font-family: var(--font); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.notif-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.bell-panel .notif-list { border: 0; border-radius: 0; }
.bell-panel .notif-group h2 { padding: .65rem .9rem .2rem; margin: 0; }
.bell-panel .notif-groups { gap: 0; }
.notif-item { border-top: 1px solid var(--border); }
.notif-item:first-child { border-top: 0; }
.notif-item.unread { background: var(--selected-bg); }
.notif-item form { margin: 0; }
.notif-open { display: grid; grid-template-columns: 36px minmax(0, 1fr) 10px; gap: .75rem; align-items: start; width: 100%; padding: .75rem 1rem; background: none; border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.notif-open:hover { background: var(--surface-2); }
.notif-item.unread .notif-open:hover { background: transparent; }
.notif-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r); background: var(--surface-2); color: var(--muted); }
.notif-icon.tone-info { background: var(--info-bg); color: var(--info-text); }
.notif-icon.tone-warn { background: var(--warn-bg); color: var(--warn-text); }
.notif-icon.tone-danger { background: var(--danger-bg); color: var(--danger-text); }
.notif-icon.tone-ok { background: var(--ok-bg); color: var(--ok-text); }
.notif-text { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.notif-text strong { font-weight: 650; }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin-top: .2rem; color: var(--muted); font-size: .85rem; }
.notif-dot { width: 9px; height: 9px; margin-top: .45rem; border-radius: 50%; background: var(--action); }
.notif-read .notif-dot { visibility: hidden; }
.notice-empty { display: flex; align-items: center; gap: .6rem; color: var(--muted); }

/* ---------------------------------------------------------------- calendar */
/* controls in few rows: view · previous/today/next · period title · what to show; then states, search and «Filtros» */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin: .75rem 0 .6rem; }
.cal-toolbar .push-right { margin-left: auto; }
.cal-nav { display: flex; gap: .3rem; }
.cal-title { margin: 0; font-size: 1.15rem; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
/* key above the grid: the swatches ARE the event classes below (fill + edge), so key, events and phone day counts match */
.cal-key { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; margin: 0 0 .75rem; padding: 0; list-style: none; color: var(--muted); font-size: .85rem; }
.cal-key li { display: inline-flex; align-items: center; gap: .4rem; }
.ev-key { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1rem; border-radius: 3px; flex-shrink: 0; font-size: var(--fs-micro); line-height: 1; }
.cal { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); container: cal / inline-size; } /* cells adapt to the grid's own width (phone, 900 px beside the menu, beside the open day) */
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head span { padding: .45rem .55rem; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-day { min-width: 0; min-height: 112px; padding: .35rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.cal-week .cal-day:last-child { border-right: 0; }
.cal-week:last-child .cal-day { border-bottom: 0; }
.is-other { background: var(--surface-2); color: var(--muted); }
.cal-events { list-style: none; padding: 0; margin: 0; }
.ev { font-size: var(--fs-xs); margin-bottom: .25rem; border-radius: 5px; padding: .2rem .35rem .2rem .4rem; overflow-wrap: anywhere; position: relative; }
.ev a { color: var(--text); text-decoration: none; display: block; }
.ev a:hover .ev-title { text-decoration: underline; }
.ev-kind { display: flex; align-items: center; gap: .25rem; font-weight: 600; font-size: var(--fs-xs); }
.ev-kind .prio-icon { width: 12px; height: 12px; }
.ev-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cal-semana .ev-title, .agenda-events .ev-title { display: inline; -webkit-line-clamp: unset; line-clamp: unset; }
/* each event in one category, with an edge of at least 3:1 in every theme: activity = blue tint and blue edge; delivery =
   neutral with a control edge; overdue delivery = danger; closed = dashed. The words on the event say it too. */
.ev-activity { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-border); }
.ev-deadline { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--control-border); }
.ev-overdue { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger); }
.ev-urgent .ev-kind { color: var(--danger-text); }
/* closed: quieter text and a dashed edge instead of fading (fading would take the words below 4.5:1) */
.ev-closed { background: var(--surface-2); box-shadow: none; outline: 1px dashed var(--control-border); outline-offset: -1px; }
.mark-urgent { background: var(--danger); color: #fff; font-weight: 800; } /* «!»: white on --danger, 6.6 light / 4.6 dark */
.ev-closed a { color: var(--muted); }
.ev-done .ev-kind { color: var(--ok-text); }
.ev-cancelled .ev-title { text-decoration: line-through; text-decoration-color: var(--muted); }
/* state words stay visible in every view (never colour alone): Urgente, Vencida, Terminada, Cancelada */
.ev-flags { display: flex; flex-wrap: wrap; gap: 0 .4rem; margin-top: .1rem; }
.ev-state { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.ev-state-late, .ev-state.prio-text-urgent { color: var(--danger-text); }
.ev-state-done { color: var(--ok-text); }
@container cal (max-width: 45rem) {
  .cal-day { min-height: 72px; padding: .2rem; }
  .cal-mes .ev { padding: .15rem .25rem .15rem .3rem; }
  .cal-mes .ev-kind, .cal-mes .ev a, .cal-mes .ev-state { font-size: var(--fs-xs); }
  .cal-semana .cal-week { grid-template-columns: 1fr; }
  .cal-semana .cal-day { min-height: 0; border-right: 0; }
}
/* narrow month (a grid under 640 px: phones, 900 px beside the menu, beside the open day): a 45–90 px cell cannot hold
   «Entrega 9:00» or «Vencida» without cutting the words, so each day shows how many it has of each kind (the key's own
   swatches, «!» for urgent) and the whole cell opens that day's full list. The counts are spoken with the day; every
   event, with its time, words and link, is in the day list. A wider grid keeps the dense month with the events. */
.cal-marks, .cal-marks-note { display: none; }
@container cal (max-width: 40rem) {
  .cal-mes .cal-day { position: relative; min-height: 64px; padding: .2rem .15rem; }
  .cal-mes .cal-events, .cal-mes .more { display: none; }
  .cal-mes .cal-date::after { content: ""; position: absolute; inset: 0; } /* the whole cell is the day's target */
  .cal-mes .cal-day:has(.cal-date:hover) { background: var(--surface-2); }
  .cal-marks { display: flex; flex-wrap: wrap; gap: 3px; margin: .1rem 0 0; }
  .mark { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.1rem; padding: 0 .2rem; border-radius: 4px; color: var(--text); font-size: var(--fs-micro); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .mark.ev-overdue { color: var(--danger-text); }
  .mark.ev-closed { color: var(--muted); }
  .mark.mark-urgent { color: #fff; }
  .cal-marks-note { display: block; margin: 0; padding: .5rem .6rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
  .cal-marks-note .ev-key { vertical-align: -.15rem; margin-right: .1rem; }
}
@media print { /* paper keeps the events in words, whatever the cell width */
  .cal-marks, .cal-marks-note { display: none !important; }
  .cal-mes .cal-events { display: block !important; }
  .cal-mes .more { display: inline-flex !important; }
}
.agenda-day { margin: 1.25rem 0 .4rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
.agenda-day.is-today { color: var(--link); }
.agenda-events { list-style: none; padding: 0; margin: 0; }
.agenda-events .ev { font-size: .95rem; padding: .6rem .8rem; margin-bottom: .4rem; }
.agenda-events .ev a { display: inline; font-weight: 600; }
.ev-time { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.agenda-gap { color: var(--muted); font-style: italic; margin: .75rem 0; }

/* ---------------------------------------------------------------- V2: shared work, preview, rich text, profile */
/* avatars: initials are always there; a photo, when present and allowed, covers them */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; background: var(--selected-bg); color: var(--selected-text); border: 1px solid var(--border); position: relative; overflow: hidden; flex-shrink: 0; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-micro); }
.avatar-lg { width: 96px; height: 96px; font-size: 1.8rem; }
.avatars { display: inline-flex; }
.avatars .avatar { border: 2px solid var(--surface); }
.avatars .avatar + .avatar { margin-left: -8px; }

/* team */
.mode-line { margin: 0 0 .5rem; }
.team-list { list-style: none; margin: .25rem 0 .75rem; padding: 0; }
.team-list li { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.team-list li:last-child { border-bottom: 0; }
.team-list.wide { max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0 1rem; }
.team-list.wide form { margin-left: auto; }
.team-main { flex: 1; min-width: 0; }
.team-main p { margin: 0; overflow-wrap: anywhere; }
.team-meta { color: var(--muted); font-size: .9rem; }
.team-check { color: var(--ok-text); margin-top: .35rem; }
.person-name { margin: 0; }
.person-card > summary { cursor: pointer; list-style: none; min-height: 28px; text-decoration: underline dotted; text-underline-offset: 3px; }
.person-card > summary::-webkit-details-marker { display: none; }
.person-card-body { font-size: .9rem; padding: .3rem 0; }
.person-card-body p { margin: .1rem 0; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: .25rem 0 .35rem; }
.progress span { display: block; height: 100%; background: var(--ok-text); }
.completed-by { display: flex; gap: .4rem; align-items: flex-start; color: var(--ok-text); font-size: .93rem; }
.completed-by .icon { margin-top: .2rem; }
.recent { margin-top: 1.25rem; }
.recent-list { list-style: none; margin: .4rem 0 0; padding: 0 1.15rem; max-width: 72ch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.recent-list li { display: flex; gap: .7rem; padding: .8rem 0; border-top: 1px solid var(--border); }
.recent-list li:first-child { border-top: 0; }
.recent-list li > div { min-width: 0; }
.recent-text { margin: 0; overflow-wrap: anywhere; }

/* create */
.create-grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) { .create-grid { grid-template-columns: minmax(0, 1fr) 300px; } .side-card { position: sticky; top: 76px; } }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; min-width: 0; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; }
.side-card h2 { margin-top: 0; font-size: 1.05rem; }
.how-lead { font-weight: 600; }
.how-list { padding-left: 1.1rem; margin: .4rem 0; }
.how-list li { margin: .3rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding: .2rem .4rem .2rem .75rem; border-radius: 999px; border: 1px solid var(--action); background: var(--info-bg); color: var(--info-text); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.chip span { font-size: 1.15rem; line-height: 1; padding: 0 .25rem; }
.chip:hover { background: var(--surface-2); }
.mode-choice[hidden] { display: none; }
.mode-option { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: .5rem; cursor: pointer; font-weight: 400; background: var(--surface); }
.mode-option input { margin-top: .2rem; }
.mode-option:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); background: var(--selected-bg); }
.mode-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* calendar preview (B): side sheet on wide screens, full width on phones */
.peek-dialog { width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; border-width: 0 0 0 1px; flex-direction: column; }
.peek-dialog[open] { display: flex; animation: peek-in var(--t) var(--ease-out); }
@keyframes peek-in { from { translate: 12px 0; opacity: 0; } to { translate: none; opacity: 1; } }

/* Closing is immediate: no outgoing ghost surface or section interpolation. */
.peek-bar { display: flex; justify-content: flex-end; padding: .25rem .25rem 0; background: var(--surface); }
.peek-bar .icon-button { font-size: 1.6rem; line-height: 1; }
.peek-body { padding: 0 1.25rem 1.25rem; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.peek-loading { color: var(--muted); padding: 1rem 0; }
.peek h2 { margin: .1rem 0 .4rem; font-size: 1.25rem; overflow-wrap: anywhere; }
.peek h2:focus { outline: none; }
.peek h3 { font-size: .95rem; margin: 1rem 0 .35rem; }
.peek-facts { margin: .8rem 0; border: 1px solid var(--border); border-radius: var(--r); }
.peek-facts > div { padding: .5rem .75rem; border-top: 1px solid var(--border); }
.peek-facts > div:first-child { border-top: 0; border-radius: var(--r) var(--r) 0 0; }
.peek-facts > div:last-child { border-radius: 0 0 var(--r) var(--r); }
.peek-facts dt { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .88rem; }
.peek-facts dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.peek-facts .is-selected { background: var(--selected-bg); }
.peek-facts .is-selected dt { color: var(--selected-text); }
.peek-tag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.peek-people { display: flex; align-items: center; gap: .6rem; margin: .75rem 0; }
.peek-people p { margin: 0; overflow-wrap: anywhere; }
.peek-text { overflow-wrap: anywhere; }
.peek-update { display: flex; gap: .6rem; }
.peek-update p { margin: 0; overflow-wrap: anywhere; }
.peek-actions { margin: 1.25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
/* «Abrir asignación» stays reachable at the bottom of the panel however long the preview is */
.peek-foot { position: sticky; bottom: -1.25rem; margin: 1rem -1.25rem -1.25rem; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.peek-foot p { margin: .4rem 0 0; }
@media (max-width: 640px) { .peek-dialog { width: 100vw; border-width: 0; } }

/* rich text (sanitized server-side; same rendering for instructions and messages) */
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 .6rem; }
.rich ul, .rich ol { margin: .3rem 0 .6rem; padding-left: 1.4rem; }
.rich h2 { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.rich h3 { font-size: 1.02rem; margin: .9rem 0 .35rem; }
.rich blockquote { margin: .5rem 0; padding: .25rem .9rem; border-left: 3px solid var(--border-strong); color: var(--muted); }
.rich img { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); margin: .5rem 0; background: var(--surface-2); }
.rich img[data-size="s"], .rte-content img[data-size="s"] { max-width: min(220px, 100%); }
.rich img[data-size="m"], .rte-content img[data-size="m"] { max-width: min(440px, 100%); }
.rich s { text-decoration-thickness: 1.5px; }
.rich hr, .rte-content hr { border: 0; border-top: 1px solid var(--border-strong); margin: 1.1rem 0; }
/* images with layout (richtext.figure; the editor's image block uses the same data attributes):
   width = % of the text column (or the older s/m sizes), align = left (default) / center / right, optional caption */
.rich .rt-figure, .rte-image-block { position: relative; width: fit-content; max-width: 100%; margin: .75rem 0; }
.rich .rt-figure img, .rte-image-block img { display: block; max-width: 100%; height: auto; margin: 0; border-radius: var(--r-sm); background: var(--surface-2); }
.rich .rt-figure[data-width] img, .rte-image-block[data-width] img, .rte-image-block.is-resizing img { width: 100%; }
.rich .rt-figure[data-width="25"], .rte-image-block[data-width="25"] { width: 25%; }
.rich .rt-figure[data-width="50"], .rte-image-block[data-width="50"] { width: 50%; }
.rich .rt-figure[data-width="75"], .rte-image-block[data-width="75"] { width: 75%; }
.rich .rt-figure[data-width="100"], .rte-image-block[data-width="100"] { width: 100%; }
.rich .rt-figure[data-size="s"], .rte-image-block[data-size="s"] { max-width: min(220px, 100%); }
.rich .rt-figure[data-size="m"], .rte-image-block[data-size="m"] { max-width: min(440px, 100%); }
.rich .rt-figure[data-align="center"], .rte-image-block[data-align="center"] { margin-left: auto; margin-right: auto; }
.rich .rt-figure[data-align="right"], .rte-image-block[data-align="right"] { margin-left: auto; margin-right: 0; }
.rich .rt-figure figcaption, .rte-image-block figcaption { margin-top: .4rem; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.rich .rt-figure[data-align="center"] figcaption, .rte-image-block[data-align="center"] figcaption { text-align: center; }
.rich .rt-figure[data-align="right"] figcaption, .rte-image-block[data-align="right"] figcaption { text-align: right; }
@media (max-width: 640px) { /* a quarter of a phone column is too small to read */
  .rich .rt-figure[data-width="25"], .rte-image-block[data-width="25"] { width: 50%; }
}
.rich a { overflow-wrap: anywhere; }
/* editor (progressive: without it the plain textarea is used) */
.rte { border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); container: rte / inline-size; }
.has-error .rte { border: 2px solid var(--danger); }
.rte:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 8px 8px 0 0; }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 .4rem; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.rte-btn:hover { background: var(--surface); border-color: var(--border); }
.rte-btn[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-text); border-color: var(--action); }
.rte-btn:disabled { opacity: .4; cursor: default; }
.rte-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -1px; }
.rte-sep { width: 1px; align-self: stretch; margin: 6px 3px; background: var(--border); }
@media (pointer: fine) { .rte-toolbar .rte-btn:not(.rte-btn-text), .rte-image-tools .rte-btn:not(.rte-btn-text) { min-width: 34px; min-height: 36px; } } /* mouse: one row in a form column; touch keeps 40 px */
.rte-content { min-height: 7rem; max-height: 60vh; overflow-y: auto; padding: .6rem .75rem; outline: none; line-height: 1.6; overflow-wrap: anywhere; }
.rte-content p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--muted); float: left; height: 0; pointer-events: none; }
.rte-content img.ProseMirror-selectednode, .rte-content hr.ProseMirror-selectednode { outline: 3px solid var(--focus); }
/* image block in the editor: click to select (image toolbar appears), drag to move, drag the right edge to resize */
.rte-image-block { cursor: grab; }
.rte-image-block:active { cursor: grabbing; }
.rte-image-block::after { content: ""; position: absolute; inset: -4px; border-radius: calc(var(--r-sm) + 4px); pointer-events: none;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow var(--t-fast) var(--ease-out); }
.rte-image-block:hover::after { box-shadow: 0 0 0 1px var(--border-strong); }
.rte-image-block.is-selected::after { box-shadow: 0 0 0 3px var(--focus); }
.rte-image-block figcaption:empty { display: none; }
.rte-image-resize { position: absolute; top: 50%; right: -8px; z-index: 1; width: 16px; height: 44px; padding: 0; transform: translateY(-50%);
  border: 2px solid var(--surface); border-radius: 8px; background: var(--action); color: transparent; font-size: 0; cursor: ew-resize;
  opacity: 0; transition: opacity var(--t-fast) var(--ease-out); touch-action: none; }
.rte-image-resize::before { content: ""; position: absolute; inset: -8px -10px; } /* larger touch target */
.rte-image-block:hover .rte-image-resize, .rte-image-block.is-selected .rte-image-resize, .rte-image-resize:focus-visible { opacity: 1; }
.rte-image-resize:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.rte-image-block.is-resizing { cursor: ew-resize; }
@media (hover: none) { .rte-image-block.is-selected .rte-image-resize { width: 22px; right: -11px; } }
/* contextual toolbar for the selected image (Google Docs style): width, alignment, caption, description, order, remove */
.rte-image-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border);
  background: var(--selected-bg); animation: pop-in var(--t-fast) var(--ease-out); }
.rte-image-tools[hidden] { display: none; }
.rte-image-tools-label { padding: 0 .5rem 0 .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--selected-text); }
.rte-image-tools .rte-btn-text { min-width: 44px; font-variant-numeric: tabular-nums; font-size: .82rem; }
.rte-image-tools .rte-btn:hover { background: var(--surface); }
.rte-image-tools .rte-btn[aria-label="Quitar imagen"]:hover { color: var(--danger-text); }
/* upload placeholder card where the image will appear: preview, progress, retry/remove */
.rte-upload-card { display: flex; align-items: center; gap: .7rem; max-width: 26rem; margin: .5rem 0; padding: .5rem .6rem; border: 1px dashed var(--border-strong);
  border-radius: 10px; background: var(--surface-2); font-size: .88rem; line-height: 1.35; user-select: none; }
.rte-upload-card > img { flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 6px; margin: 0; }
.rte-upload-details { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.rte-upload-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rte-upload-details > span { color: var(--muted); }
.rte-upload-details progress { width: 100%; height: 6px; accent-color: var(--action); }
.rte-upload-action { flex: none; min-height: 36px; padding: 0 .6rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.rte-upload-action:hover { border-color: var(--border-strong); }
.rte-upload-card.is-error { border-color: var(--danger); background: var(--danger-bg); }
.rte-upload-card.is-error .rte-upload-details > span { color: var(--danger-text); font-weight: 600; }
/* footer: what you can do here + characters used */
.rte-footer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; padding: .35rem .75rem;
  border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.rte-counter { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rte-counter.is-near { color: var(--warn-text); font-weight: 600; }
.rte-counter.is-over { color: var(--danger-text); font-weight: 700; }
/* «/» quick insert menu (same surface as the mention menu) */
.slash-menu { width: min(300px, calc(100vw - 24px)); max-height: 320px; }
.slash-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); }
.slash-option[aria-selected="true"] .slash-icon { background: var(--surface); border-color: var(--action); }
/* focus mode: the editor fills the window for long texts; Escape or the same button returns */
html.rte-has-expanded { overflow: hidden; }
.rte.rte-expanded { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; border: 0; border-radius: 0; outline: none; animation: pop-in var(--t) var(--ease-out); }
.rte-expanded .rte-toolbar { justify-content: center; border-radius: 0; }
.rte-expanded .rte-image-tools { justify-content: center; }
.rte-expanded .rte-area { flex: 1; min-height: 0; overflow-y: auto; }
.rte-expanded .rte-content { max-width: 46rem; max-height: none; min-height: 100%; margin: 0 auto; padding: 2rem 1.25rem 4rem; font-size: 1.05rem; }
.rte-expanded .rte-footer { justify-content: center; }
.rte-expanded .rte-counter { margin-left: 0; }
.rte-content a { cursor: text; }
.rte-status { margin: 0; padding: 0 .75rem; font-size: .88rem; color: var(--muted); }
.rte-status:empty { display: none; }
.rte-status.is-error { color: var(--danger-text); font-weight: 600; padding-bottom: .4rem; }
.rte-dialog label { display: block; font-weight: 600; margin-bottom: .3rem; }
.rte-content img.rte-img-missing { outline: 3px dashed var(--danger); min-height: 3rem; min-width: 8rem; }
/* secondary commands fold behind a labelled «Más» button whenever the editor is too narrow for one row of commands
   (a phone, or the work column of the create form); a wide editor shows everything */
.rte-more { display: none; }
.rte-more-label { font-size: .85rem; }
@container rte (max-width: 40rem) { /* one row of commands needs ≈630 px */
  .rte-more { display: inline-flex; gap: .2rem; margin-left: auto; }
  .rte-more[aria-expanded="true"] { background: var(--surface); border-color: var(--border); }
  .rte-toolbar:not(.rte-more-open) .rte-secondary, .rte-toolbar:not(.rte-more-open) .rte-sep { display: none; }
}
/* formatted text without the editor: readable preview + explicit replacement (hidden while the editor works) */
.js:not(.editor-failed) .rich-fallback { display: none; }
.rich-fallback { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: .75rem 1rem; margin-bottom: .6rem; }
.rich-fallback-note { margin: 0 0 .5rem; }
.rich-fallback-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .6rem .8rem; max-height: 45vh; overflow-y: auto; margin-bottom: .5rem; }
.rich-fallback .field-check { margin: 0; flex-wrap: nowrap; }
.rich-fallback .field-check label { flex: 1; font-weight: 500; }
.ProseMirror { white-space: pre-wrap; word-wrap: break-word; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--text); }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.rt-missing { display: inline-block; padding: .4rem .7rem; margin: .3rem 0; border: 1px dashed var(--border); border-radius: var(--r-sm); color: var(--muted); font-size: .9rem; }

/* profile */
.profile-sidebar { min-width: 0; }
.account-nav { display: grid; gap: .2rem; margin-bottom: 1rem; }
.account-nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; min-height: 44px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); }
.account-nav a:hover, .account-nav a:focus-visible { background: var(--surface-2); }
.profile-main > section { scroll-margin-top: 90px; min-width: 0; }
@media (min-width: 960px) { .profile-sidebar { position: sticky; top: 84px; } }
@media (max-width: 959px) { .account-nav { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.profile-photo-help { margin-top: .75rem; text-align: left; }
.profile-photo-help > summary { cursor: pointer; min-height: 44px; padding: .5rem 0; font-size: .85rem; color: var(--muted); }
.profile-photo-help p { line-height: 1.5; }
.profile-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 960px) { .profile-grid { grid-template-columns: 280px minmax(0, 1fr); } }
.profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; text-align: center; }
.profile-card h2 { margin: .75rem 0 .1rem; }
.profile-card .avatar-form { margin-top: 1rem; }
.profile-card .avatar-form .field { margin-bottom: .25rem; }
.profile-main > section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; }
.profile-main > section + section { margin-top: 1rem; }
.avatar-form.is-enhanced input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* the button-styled label opens it */
.avatar-form.is-enhanced:has(input[type=file]:focus-visible) [data-avatar-pick] { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-actions { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; margin: .5rem auto .25rem; max-width: 15rem; }
.photo-actions [hidden] { display: none; }
.profile-main h2 { margin-top: 0; display: flex; align-items: center; gap: .5rem; }
.profile-main h2 .icon { color: var(--muted); }
.avatar.is-preview { outline: 3px dashed var(--action); outline-offset: 3px; }
.avatar-note { font-size: .9rem; color: var(--info-text); }
.avatar-note:empty { display: none; }
.avatar-note.is-error { color: var(--danger-text); font-weight: 600; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
.theme-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; padding: .7rem; border: 1px solid var(--control-border); border-radius: var(--r); cursor: pointer; background: var(--surface); }
.theme-option:hover { border-color: var(--link); }
.theme-option:has(:checked) { border-color: var(--focus); outline: 1px solid var(--focus); }
.theme-option:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-option input { margin: .25rem 0 0; accent-color: var(--action); }
.theme-option-copy { display: grid; gap: .15rem; line-height: 1.4; }
.theme-option-copy > span { color: var(--muted); font-size: .8rem; }
.theme-preview { --preview-page: #f3f5f9; --preview-surface: #fff; --preview-line: #c3ccd9; --preview-action: #123179; display: grid; grid-template-columns: 25% minmax(0, 1fr); grid-column: 1 / -1; grid-row: 1; height: 90px; overflow: hidden; border: 1px solid var(--preview-line); border-radius: 5px; background: var(--preview-page); }
.theme-option-dark .theme-preview { --preview-page: #0d1424; --preview-surface: #141d31; --preview-line: #3a4870; --preview-action: #4a6fd6; }
.theme-option-oled .theme-preview { --preview-page: #000; --preview-surface: #000; --preview-line: #505050; --preview-action: #4a6fd6; }
.theme-preview-nav { display: grid; align-content: start; gap: 7px; padding: 12px 6px; background: var(--preview-surface); border-right: 1px solid var(--preview-line); }
.theme-preview-nav > span { display: block; height: 4px; background: var(--preview-line); border-radius: 2px; }
.theme-preview-nav > span:first-child { background: var(--preview-action); }
.theme-preview-main { display: grid; align-content: start; gap: 7px; padding: 12px 10px; }
.theme-preview-title { display: block; width: 65%; height: 5px; background: var(--preview-line); }
.theme-preview-row { display: block; height: 12px; background: var(--preview-surface); border: 1px solid var(--preview-line); border-radius: 2px; }
.theme-preview-action { display: block; width: 40%; height: 8px; background: var(--preview-action); border-radius: 2px; }
@media (prefers-color-scheme: dark) { .theme-option-system .theme-preview { --preview-page: #0d1424; --preview-surface: #141d31; --preview-line: #3a4870; --preview-action: #4a6fd6; } }
@media (max-width: 380px) { .theme-options { grid-template-columns: 1fr; } }


/* ---------------------------------------------------------------- help page (the employee guide, in the portal) */
.help-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1000px) { .help-layout { grid-template-columns: 230px minmax(0, 1fr); } .help-toc { position: sticky; top: 76px; } }
.help-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .75rem; }
.help-toc p { margin: 0 0 .35rem; padding: 0 .4rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.help-toc ol { list-style: none; margin: 0; padding: 0; }
.help-toc a { display: block; padding: .35rem .4rem; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: .93rem; }
.help-toc a:hover { background: var(--surface-2); }
.help-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; max-width: 80ch; line-height: 1.65; }
.help-doc h2 { margin: 1.75rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); scroll-margin-top: 76px; }
.help-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.help-doc h3 { margin-top: 1.25rem; }
.help-doc ul, .help-doc ol { padding-left: 1.3rem; }
.help-doc li { margin: .3rem 0; }

/* ---------------------------------------------------------------- error pages */
.error-page { max-width: 560px; margin: 2rem auto; text-align: center; }
.error-page .error-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--selected-bg); color: var(--selected-text); margin-bottom: .75rem; }
.error-page h1 { margin-bottom: .5rem; }
.error-page .actions { justify-content: center; margin-top: 1.25rem; }
.auth-card .error-page { max-width: none; margin: 0; text-align: left; }
.prio-icon-urgent { color: var(--danger-text); }
.prio-icon-high { color: var(--warn); }

/* ---------------------------------------------------------------- administration: settings */
.settings-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1000px) { .settings-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; margin-bottom: 1rem; scroll-margin-top: 76px; }
.settings-card h2 { margin-top: 0; display: flex; align-items: center; gap: .5rem; }
.settings-card h2 .icon { color: var(--muted); }
.settings-card .settings-grid { margin-top: .5rem; }
.status-line { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; border-radius: var(--r); }
.status-line.ok { background: var(--ok-bg); color: var(--ok-text); }
.status-line.warn { background: var(--warn-bg); color: var(--warn-text); }
.status-line .icon { margin-top: .15rem; }
.facts.compact { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); background: var(--surface-2); border: 0; }
.list-rows { list-style: none; margin: .25rem 0 .5rem; padding: 0; border: 1px solid var(--border); border-radius: var(--r); }
.list-rows li { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-top: 1px solid var(--border); }
.list-rows li:first-child { border-top: 0; }
.list-rows .is-off a { color: var(--muted); }
.list-icon { color: var(--muted); display: inline-flex; }
.email-preview-grid { display: grid; gap: 1rem; }
.email-frame { width: 100%; max-width: 680px; height: 1150px; border: 1px solid var(--border); border-radius: var(--r-lg); background: #f3f5f9; }
.email-text { white-space: pre-wrap; font-size: .85rem; background: var(--surface-2); padding: .75rem; border-radius: var(--r); max-width: 680px; overflow-x: auto; }

.prefs-form .pref-row { border: 0; padding: .8rem 0; margin: 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; }
.prefs-form .pref-row:first-of-type { border-top: 0; }
.prefs-form .pref-row legend { float: left; display: flex; flex-direction: column; gap: .1rem; padding: 0; }
.prefs-form .segmented label { min-height: 40px; padding: .3rem .7rem; font-size: .92rem; }
@media (max-width: 760px) { .prefs-form .pref-row { grid-template-columns: 1fr; } }
.feed-box { background: var(--surface-2); border-radius: var(--r); padding: .8rem 1rem; margin: .5rem 0 1rem; }
.feed-box label { font-weight: 600; display: block; margin-bottom: .3rem; }
.security-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.security-row p { margin: .15rem 0 0; }
.session-list { list-style: none; padding: 0; margin: .3rem 0; font-size: .92rem; }
.session-list li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .4rem; list-style: none; padding: 0; max-width: 40rem; }
.recovery-codes code { display: block; font-size: 1.05rem; padding: .45rem .6rem; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.setup-steps { padding-left: 1.3rem; display: grid; gap: 1rem; max-width: 46rem; }
.setup-steps li::marker { font-weight: 700; color: var(--action); }
.qr { display: inline-block; margin: .6rem 0 .2rem; padding: .5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r); }
.qr svg { display: block; width: 200px; height: 200px; }
.setup-key { font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
.inline-form { display: inline; }
.strip-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; margin-left: .25rem; }
@media (min-width: 641px) { .task-title .overline { display: flex; flex-wrap: wrap; gap: .1rem .6rem; } }
.task-title .overline > span + span::before { content: "·"; margin-right: .6rem; color: var(--border-strong); }
.overline .kind { display: inline-flex; align-items: center; gap: .3rem; color: var(--selected-text); }

/* ---------------------------------------------------------------- charts (Reportes, supervisor Inicio) */
.report-panel { margin: 1.5rem 0 1.25rem; }
.report-panel h2 { margin: 0 0 .5rem; }
/* charts draw in a 520-unit box that scales with the card: two columns only when each card stays wide enough for ≈10 px labels */
.chart-grid { display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
@media (min-width: 1200px) { .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow); min-width: 0; }
.chart-card h3 { margin: 0; font-size: 1rem; }
.chart-sub { margin: .15rem 0 .5rem; font-size: .85rem; color: var(--muted); }
.stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.stat-big { margin: .2rem 0; font-family: var(--display); font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spark { width: 130px; flex-shrink: 0; }
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .35rem; font-size: .85rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend .key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.key.s1 { background: var(--series-1); }
.key.s2 { background: var(--series-2); }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
svg.chart .s1 { fill: var(--series-1); }
svg.chart .s2 { fill: var(--series-2); }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis { fill: var(--muted); font: 13px var(--font); } /* viewBox units: ≈12 px at full card width */
svg.chart .value { fill: var(--text); font: 600 13px var(--font); }
.chart-card { container: chart-card / inline-size; }
@container chart-card (max-width: 26rem) { svg.chart .axis, svg.chart .value { font-size: 16px; } } /* phone card: ≈9.5 px instead of 6.5 */
svg.chart .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
svg.chart .today { fill: var(--selected-bg); }
svg.chart .zero { fill: var(--grid); }
svg.chart .hit { fill: transparent; }
svg.chart a:focus-visible { outline: none; }
svg.chart a:focus-visible .hit { stroke: var(--focus); stroke-width: 2; }
svg.chart path:hover, svg.chart a:hover path { opacity: .85; }
.chart-data { margin-top: .4rem; font-size: .88rem; }
.chart-data > summary { cursor: pointer; color: var(--link); min-height: var(--choice-h); display: inline-flex; align-items: center; }
.chart-data table { border-collapse: collapse; margin-top: .3rem; }
.chart-data td, .chart-data th { padding: .15rem 1rem .15rem 0; text-align: left; }
/* report charts as responsive HTML bars: labels and counts are page text (never a scaled SVG), so they stay
   readable on a 320 px phone with no clipped labels and no page-level horizontal scroll */
.chart-bars { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.chart-bar { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto; gap: .15rem .75rem; align-items: center; min-width: 0; }
.chart-bar-label { min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
.chart-bar-track { display: flex; min-width: 0; height: 14px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.chart-bar-seg { display: block; height: 100%; }
.chart-bar-seg.s1 { background: var(--series-1); }
.chart-bar-seg.s2 { background: var(--series-2); }
.chart-bar-value { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container chart-card (max-width: 26rem) {
  .chart-bar { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .chart-bar-label { font-size: 1rem; }
  .chart-bar-track { height: 12px; }
  .chart-bar-value { font-size: .95rem; white-space: normal; overflow-wrap: anywhere; }
}
.report-panel .stat-row { flex-wrap: wrap; }
.chart-wide { grid-column: 1 / -1; }
.chart-note { margin-top: .6rem; }
/* summary row: four key figures, each with the sentence that says what it counts */
.stat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .9rem 1.1rem; box-shadow: var(--shadow); min-width: 0; }
.stat-tile h4 { margin: 0; font-size: .95rem; }
.stat-tile .stat-row { align-items: center; gap: .5rem; }
.stat-tile .spark { width: 96px; }
.stat-tile .chart-sub { margin-bottom: 0; }
/* time series as columns: one per date, baseline at the bottom, day number under it and the month when it changes */
.chart-cols { --col-h: 130px; list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; } /* no gap: the baseline runs unbroken */
.chart-col { display: grid; grid-template-rows: var(--col-h) auto; align-content: start; justify-items: center; min-width: 0; }
/* the track reserves room at the top for the count, which sits right on top of its column */
.chart-col-track { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 100%; height: 100%; padding-top: 1.4em; border-bottom: 1px solid var(--border-strong); }
.chart-col-value { font-size: .85rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); }
.chart-col-seg { display: block; flex: 0 0 auto; width: min(72%, 30px); min-height: 2px; }
.chart-col-seg:nth-last-child(1 of .chart-col-seg) { border-radius: 4px 4px 0 0; }
.chart-col-seg.s1 { background: var(--series-1); }
.chart-col-seg.s2 { background: var(--series-2); }
.chart-col-label { display: grid; justify-items: center; padding-top: .3rem; font-size: .85rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--muted); }
.chart-col-label small { font-size: .82rem; } /* 13 px: the portal type floor (test_council_geometry) */
.chart-col.is-today .chart-col-label { color: var(--text); font-weight: 700; }
.chart-col:hover .chart-col-seg { opacity: .85; }
@media screen { .chart-col-value:not(.is-key) { visibility: hidden; } .chart-col:hover .chart-col-value { visibility: visible; } }
@container chart-card (max-width: 26rem) { .chart-cols { --col-h: 110px; } .chart-col-label, .chart-col-label small { font-size: .82rem; } }
.report-list-head { margin-top: 1.5rem; }
.report-list-head h2 { margin: 0 0 .5rem; }
.print-head { display: none; }

/* ---------------------------------------------------------------- printing: a document, not a screenshot of the page
   Paper gets the light palette (the dark themes are screen-only, see the top of this file), the brand header, page
   numbers, and only content: every control (buttons, menus, tabs, view switches, forms to write) stays on screen. */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; @bottom-left { content: "Portal interno TelePaís"; font: 8pt system-ui, sans-serif; color: #555; } @bottom-right { content: "Página " counter(page) " de " counter(pages); font: 8pt system-ui, sans-serif; color: #555; } }
  @page report { size: A4 landscape; margin: 10mm 10mm 13mm; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 10.5pt; line-height: 1.4; display: block; min-height: 0; }
  .sidenav, .topbar, .skip, .filter-bar, .quick, .cal-filters, .head-actions, .actions, .tabs, .composer, .help-reply, .upload-box,
  .hint, .saved-views, .pager, .messages, .tour-invite, .chart-data, .crumbs, .live-toast, .row-peek, .tour-list, .applied,
  button, .btn, .link-button, input:not([type="hidden"]), select, textarea, .menu, .post-actions, .page-tabs, .seg, .cal-nav,
  .draft-bar, .read-check, .thread-info, .no-print, .link-box, details:not([open]), .new-activity, .bulk-bar { display: none !important; }
  .print-only { display: block !important; }
  /* a person's name is the summary of their contact card: the name prints, the card does not */
  details.person-card:not([open]), details.person-card[open] { display: inline !important; }
  details.person-card > summary { display: inline !important; list-style: none; }
  details.person-card > summary::-webkit-details-marker { display: none; }
  .person-card-body { display: none !important; }
  h1 { font-size: 18pt; margin: 0 0 4pt; }
  h2 { font-size: 13pt; break-after: avoid; }
  h3 { font-size: 11pt; break-after: avoid; }
  .page-head, .section-row { break-after: avoid; margin-bottom: 6pt; }
  .page-kicker, .page-sub .muted { font-size: 9.5pt; color: #333; }
  .print-head span { font-size: 9pt; line-height: 1.35; }
  .print-head .print-when { margin-left: auto; text-align: right; color: #333; }
  /* reports: landscape, every column fits, full names (on screen they are shortened to first names) */
  body[data-page="reports"] main { page: report; }
  .tasks { font-size: 9pt; table-layout: auto; width: 100%; border-collapse: collapse; }
  .tasks thead { display: table-header-group; } /* the column names repeat on every page */
  .tasks tr { break-inside: avoid; }
  .tasks th { background: #eef1f6 !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tasks th, .tasks td { padding: 4px 6px; min-width: 0 !important; white-space: normal !important; border-bottom: 1px solid #c8ced8; vertical-align: top; }
  .tasks .t-when time, .tasks .t-done time { white-space: nowrap; }
  .tasks .t-title a { font-size: 9.5pt; font-weight: 700; }
  .t-sub, .t-meta { color: #333 !important; }
  .tasks .t-title, .tasks .t-people, .tasks-report .t-people { min-width: 0; }
  .people .stack, .people .people-text { display: none !important; }
  .people .people-full { display: inline !important; }
  .t-meta .rel, .t-meta .t-kind .icon { display: none; }
  .due, .badge, .prio { border: 1px solid #999; background: none !important; color: #000 !important; box-shadow: none !important; }
  .print-meta { margin: 0 0 10px; font-size: 10pt; }
  .print-meta p { margin: 0 0 2px; }
  .shell { background: none; display: block; }
  body main { max-width: none; padding: 0; } /* «body» outranks the later screen rule «main { padding: 1.75rem 2rem 3.5rem }», whose bottom padding could spill a blank last page */
  .print-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 3px solid #b6252b; }
  .print-head img { width: 36px; height: 36px; }
  /* a long table or text flows across pages; only small blocks are kept whole */
  .chart-card, .metrics, .team-card, .team-dept-row, .post, .file-row { box-shadow: none; break-inside: avoid; }
  .table-card, .instructions, .summary-aside { box-shadow: none; }
  /* Browsers drop background colours on paper unless «Background graphics» is ticked, which left every bar empty.
     Borders always print, so each coloured fill is redrawn as a border of the same size and colour. */
  .chart-bar-track { height: auto; border: 1px solid #999; background: none; }
  .chart-bar-seg { height: 0; background: none !important; border-top: 12px solid; }
  .chart-bar-seg.s1, .chart-col-seg.s1 { border-color: var(--series-1); }
  .chart-bar-seg.s2, .chart-col-seg.s2 { border-color: var(--series-2); }
  .chart-col-seg { width: 0; min-height: 0; background: none !important; border-left: 18px solid; border-radius: 0 !important; }
  .chart-cols { --col-h: 80px; }
  .chart-col-label, .chart-col-value { color: #000; }
  .legend .key { width: 0; height: 0; background: none !important; border: 6px solid; border-radius: 2px; }
  .legend .key.s1 { border-color: var(--series-1); }
  .legend .key.s2 { border-color: var(--series-2); }
  .stat-tile { box-shadow: none; border: 1px solid #c8ced8; break-inside: avoid; }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  /* compact on paper so the summary and the current state share the first page */
  .stat-tile { padding: 6pt 9pt; }
  .stat-tile .stat-big, .report-panel .stat-big { font-size: 17pt; margin: 2pt 0; }
  .stat-tile .chart-sub, .chart-card .chart-sub { font-size: 8.5pt; }
  .chart-card { padding: 8pt 10pt; }
  .report-panel { margin: 10pt 0; }
  .report-block + .report-block { margin-top: 10pt; }
  .chart-grid { gap: 8px; }
  .chart-bars { gap: 4px; margin-top: 4pt; }
  .chart-bar-label, .chart-bar-value { font-size: 9pt; }
  svg.chart .line { stroke: #2a78d6; } svg.chart .dot { fill: #2a78d6; stroke: #fff; }
  .table-card { overflow: visible; container-type: normal; border: 0; border-radius: 0; }
  .chart-grid { grid-template-columns: 1fr 1fr; }
  .chart-card, .metrics { border: 1px solid #c8ced8; }
  a { color: #000; text-decoration: none; }
  .js .panel[hidden] { display: block !important; }
  .panel { padding: 0; border: 0; box-shadow: none; }
  .js .panel-title { position: static !important; width: auto !important; height: auto !important; overflow: visible; clip: auto !important; white-space: normal; margin: 14pt 0 6pt !important;
    padding-bottom: 3pt; border-bottom: 1px solid #999; font-size: 12pt; }
  .muted, .help { color: #444 !important; }

  /* one assignment: a work sheet (facts table, instructions, conversation, files, signatures) */
  body[data-page="task"] .task-due, body[data-page="task"] .task-when, body[data-page="task"] .task-status,
  body[data-page="task"] .summary-aside, body[data-page="task"] .history, body[data-page="task"] .file-thumbnail { display: none !important; }
  body[data-page="task"] .summary-grid { display: block; }
  .print-doc-type { margin: 0 0 2pt; font-size: 8.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b6252b; }
  .print-facts { width: 100%; border-collapse: collapse; margin: 6pt 0 10pt; font-size: 9.5pt; }
  .print-facts th, .print-facts td { border: 1px solid #c8ced8; padding: 4pt 6pt; text-align: left; vertical-align: top; }
  .print-facts th { width: 16%; background: #eef1f6 !important; font-weight: 600; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-facts thead th { width: auto; }
  .print-sign { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 18pt; margin-top: 28pt; break-inside: avoid; }
  .print-sign div { border-top: 1px solid #000; padding-top: 3pt; font-size: 9pt; }
  .post { grid-template-columns: 1fr; padding: 5pt 0; }
  .post .avatar { display: none; }
  .empty { padding: 0; }

  /* team overview: the print-only tables replace the controls and the per-person cards */
  .team-controls, .team-totals, .team-group, .team-how { display: none !important; }
  .team-print h3 { margin: 12pt 0 4pt; }
  .team-print .print-facts { table-layout: fixed; }
  .team-print .print-facts th { width: auto; }
  .print-facts .print-danger { color: #a01d25; font-weight: 700; } /* overdue counts: text colour prints without «Background graphics» */
  .team-dept-table th:first-child { width: 46%; }
  .team-dept-table :is(th, td):nth-child(n+2) { text-align: right; }
  .team-people-table th:nth-child(1) { width: 34%; }
  .team-people-table th:nth-child(2) { width: 18%; }
  .team-people-table th:nth-child(3) { width: 14%; }
  .team-people-table td:nth-child(3) { white-space: nowrap; }
  .team-people-table :is(th, td):nth-child(n+4) { text-align: right; }

  /* calendar: the period title stays, the controls go; the colour key stays because the events use it */
  .cal-toolbar { display: block; margin: 0 0 6pt; }
  .cal-title { margin: 0; font-size: 13pt; }
  .cal-day { break-inside: avoid; }
  .agenda-events .ev { break-inside: avoid; border: 1px solid #c8ced8; }
  .ev, .cal-key .ev-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.news-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.news-list li { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem 0; border-top: 1px solid var(--border); font-size: .92rem; overflow-wrap: anywhere; }
.news-list li:first-child { border-top: 0; }
.news-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.strip-item { flex-wrap: wrap; }
@media (max-width: 640px) { .strip-link { display: none; } } /* on phones it stays in the ⋯ menu */
@media (max-width: 640px) { .strip-item { min-height: 28px; } .task-strip .hint-compact > summary { min-height: 28px; } }

/* ---------------------------------------------------------------- relationship: is it mine, my part, or do I only supervise it?
   Icon + words (never colour alone). Filled = yours; outlined = you can see it but it is not assigned to you. */
.rel { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; padding: .05rem .5rem .05rem .4rem; border-radius: 999px; white-space: nowrap; }
.rel-mine { background: var(--selected-bg); color: var(--selected-text); }
.rel-done { background: var(--ok-bg); color: var(--ok-text); }
.rel-watch { color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
.rel-help { display: block; margin-top: .2rem; color: var(--muted); font-size: .88rem; }
.task-rel { margin: .45rem 0 0; }
.peek-rel { margin: .35rem 0 .5rem; }
.scope-tag { font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0 .5rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); letter-spacing: 0; }
.section-why { margin: -.35rem 0 .6rem; }

/* ---------------------------------------------------------------- in-place updates: keep what is there readable, say it is updating */
.filter-feedback.is-loading::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .45rem; border: 2px solid var(--border-strong); border-top-color: var(--action); border-radius: 50%; vertical-align: -.05em; }
.filter-feedback .link-button { color: var(--link); font-weight: 600; min-height: 44px; }
.live-toast { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; max-width: calc(100vw - 2rem); padding: .55rem 1.1rem; border-radius: 999px; background: var(--text); color: var(--page); font-size: .92rem; box-shadow: var(--shadow-pop); animation: toast-in var(--t) var(--ease-out); }
.live-toast[hidden] { display: none; }
.live-toast.is-error { background: var(--danger-bg); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger), var(--shadow-pop); border-radius: var(--r); }
.live-toast .link-button { color: inherit; font-weight: 700; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pending-note { color: var(--warn-text); font-weight: 600; font-size: .88rem; }
.filter-actions .help { margin: 0; }

/* Native disclosures change layout immediately; their chevrons provide the local motion cue. */

/* ---------------------------------------------------------------- loading placeholders: only for surfaces opening without data, after a short delay */
.sk { display: block; border-radius: 6px; background: var(--surface-2); animation: sk-pulse 1.1s ease-in-out infinite alternate; }
.sk-line { height: .8rem; margin: .55rem 0; }
.sk-title { height: 1.5rem; width: 75%; margin: .7rem 0; }
.sk-block { height: 8rem; margin: 1rem 0; border-radius: var(--r); }
.sk-row { height: 3.1rem; margin: .55rem .9rem; border-radius: var(--r); }
.w-40 { width: 40%; } .w-60 { width: 60%; } .w-80 { width: 80%; }
.peek.skeleton { padding-top: .25rem; }
@keyframes sk-pulse { from { opacity: 1; } to { opacity: .5; } }

/* Loading skeleton while another portal page is on its way (main[data-loading]). It sits on the page background, where
   --surface-2 is nearly invisible, so the tint is mixed from the text colour (every theme). */
.page-skeleton .sk { background: var(--surface-2); background: color-mix(in srgb, var(--text) 8%, transparent); }
main[data-loading] > :not(.page-skeleton) { display: none !important; }
.page-skeleton { animation: sk-in var(--t) ease-out both; }
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }
.sk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.sk-head > div { flex: 1; min-width: 0; }
.sk-head .sk-title { width: 16rem; max-width: 70%; height: 1.9rem; margin: .1rem 0 .55rem; }
.sk-head .sk-line { max-width: 26rem; margin: 0; }
.sk-pill { flex: none; width: 8.5rem; height: 2.4rem; border-radius: var(--r); }
.sk-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sk-toolbar .sk-pill { width: 6.5rem; }
.sk-search { flex: 1 1 12rem; max-width: 22rem; height: 2.4rem; border-radius: var(--r); margin-left: auto; }
.page-skeleton .sk-row { height: 3.4rem; margin: 0 0 .6rem; }
.sk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.sk-cell { height: 5.5rem; border-radius: var(--r); }
.sk-tiles, .sk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.sk-cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.sk-tile { height: 5.5rem; border-radius: var(--r); }
.sk-card { height: 9.5rem; border-radius: var(--r); }
.sk-chart { height: 16rem; }
.sk-split { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; }
.sk-split .sk-block { height: 14rem; }
.sk-aside { height: 18rem; border-radius: var(--r); }
.sk-form { max-width: 40rem; }
.sk-form > div { margin-bottom: 1.1rem; }
.sk-label { width: 9rem; margin: 0 0 .45rem; }
.sk-input { height: 2.6rem; border-radius: var(--r); }
.sk-submit { margin-top: 1.5rem; }
@media (max-width: 800px) {
  .sk-split { grid-template-columns: 1fr; }
  .sk-aside { height: 8rem; }
  .sk-head > .sk-pill, .sk-toolbar .sk-pill:nth-child(n+3) { display: none; }
  .sk-cell { height: 3.25rem; }
  .sk-search { margin-left: 0; max-width: none; }
}
@media print { .page-skeleton { display: none; } }

/* ---------------------------------------------------------------- Inicio: 14 days with the chosen day beside the chart */
.days-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1000px) { .days-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.days-chart svg.chart a[aria-current] .hit { stroke: var(--action); stroke-width: 1.5; }
.days-chart svg.chart a { cursor: pointer; }
.news-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .25rem 1.1rem; }

/* one day, one entry per assignment (Inicio and the calendar) */
.day-agenda { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .85rem 1rem; box-shadow: var(--shadow); min-width: 0; scroll-margin-top: 76px; }
.day-agenda:focus { outline: none; }
.day-agenda-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.day-agenda-head h3 { margin: 0; font-size: 1.02rem; }
.day-agenda-head p { margin: .1rem 0 0; }
.day-close { margin: -.4rem -.5rem 0 0; }
.units-note { display: block; font-size: .82rem; }
.day-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.day-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .85rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.day-item:first-child { border-top: 0; }
.day-times { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.when { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.when-activity { background: var(--info-bg); color: var(--info-text); box-shadow: inset 0 0 0 1px var(--info-border); }
/* a delivery is neutral, exactly like the key's «Entrega» swatch (amber would read as «close»); overdue is danger with the
   word «vencida»; a close delivery says so in words beside the title («Vence en 3 h», .due-soon) */
.when-deadline { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--control-border); }
.when-deadline.is-late { background: var(--danger-bg); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger); }
.day-main { min-width: 0; overflow-wrap: anywhere; }
.day-title { font-weight: 600; color: var(--text); text-decoration: none; }
.day-title:hover { color: var(--link); text-decoration: underline; }
.day-item.is-urgent .day-title::before { content: "!"; display: inline-block; margin-right: .3rem; padding: 0 .35rem; border-radius: 4px; background: var(--danger); color: #fff; font-size: var(--fs-micro); font-weight: 800; vertical-align: 1px; }
.day-people { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .35rem; font-size: .88rem; }
.day-people .muted { display: inline-flex; align-items: center; gap: .25rem; }
.day-foot { margin: .4rem 0 0; padding-top: .55rem; border-top: 1px solid var(--border); font-size: .92rem; }
.day-agenda { container-type: inline-size; }
@container (max-width: 480px) { .day-item { grid-template-columns: minmax(0, 1fr); } .day-times { flex-direction: row; flex-wrap: wrap; } }

/* ---------------------------------------------------------------- calendar: cells are an overview, the day panel has the detail */
.flip { display: inline-flex; }
.flip svg { transform: scaleX(-1); }
.seg-quiet a:not([aria-current="true"]) { color: var(--muted); } /* quieter words, same geometry as every one-of-N choice */
.cal-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1100px) {
  .cal-layout.has-day { grid-template-columns: minmax(0, 1fr) 360px; }
  .cal-layout .day-agenda { position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100vh - var(--topbar-h) - 2rem); overflow-y: auto; }
}
@media (max-width: 1099px) { .cal-layout .day-agenda { order: -1; } }
@media (max-width: 640px) { .cal-mes ~ .day-agenda { order: 1; } } /* phone month: the month stays on top to choose from; the chosen day follows */
.cal-day-head { display: flex; align-items: center; gap: .3rem; margin: 0 0 .25rem; font: inherit; }
/* the date is the way into the whole day: at least a 32 px target, not a 20 px digit; in the narrowest month grid (below
   40rem) the whole cell is the target instead (.cal-date::after) */
.cal-date { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0 .4rem; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--text); text-decoration: none; }
.cal-date:hover { background: var(--surface-2); text-decoration: underline; }
.is-today .cal-date { color: var(--action-text); background: var(--action); }
.is-other .cal-date { color: var(--muted); font-weight: 500; }
@container cal (max-width: 45rem) { .cal-mes .cal-date { padding: 0 .2rem; font-size: .85rem; } } /* keeps the 32 px target; below 40rem the whole cell is the target */
.cal-day.is-selected { background: var(--selected-bg); }
.cal-day.is-selected:not(.is-today) .cal-date { box-shadow: inset 0 0 0 2px var(--action); }
.cal-semana .cal-day { min-height: 200px; }
.cal-semana .ev-title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; }
/* month cells: time on one line, the title on one line, then the state in words when there is one */
.cal-mes .ev-title { -webkit-line-clamp: 1; line-clamp: 1; }
.cal-mes .ev-kind { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container cal (max-width: 45rem) { .cal-mes .ev-title { -webkit-line-clamp: 2; line-clamp: 2; } } /* narrow cells: two short lines beat one cut word */
.more { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .45rem; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; }
.more:hover { background: var(--surface-2); text-decoration: underline; }
.agenda-events .t-meta { margin-top: .2rem; }

/* ---------------------------------------------------------------- forms: the error summary links to each field; availability states */
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.error-summary ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.error-summary li { margin: .15rem 0; }
.error-summary a { color: inherit; font-weight: 700; }
.conflict-checking { background: var(--surface-2); color: var(--muted); border-color: transparent; }
.conflict-ok { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.conflict-warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.conflict-error { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }

/* ---------------------------------------------------------------- notifications: open, or only mark as read */
.notif-item { display: flex; align-items: center; }
.notif-item > form:first-child { flex: 1; min-width: 0; }
.notif-mark { margin: 0 .4rem 0 0; }
.notif-mark .icon-button { color: var(--muted); }
.notif-mark .icon-button:hover { color: var(--ok-text); background: var(--ok-bg); }

/* ---------------------------------------------------------------- reports: current state and period results kept apart */
.report-block + .report-block { margin-top: 1.75rem; }
.report-block-title { margin: 0 0 .5rem; font-size: 1.05rem; }
.chart-card h4 { margin: 0; font-size: 1rem; }
.stat-warn { color: var(--warn-text); }
.print-only { display: none; }

/* ---------------------------------------------------------------- preview extras, help page */
.peek-list { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
.peek-list li { margin: .15rem 0; overflow-wrap: anywhere; }
.tour-list { margin: 0 0 1.5rem; }
.tour-list h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; }
.tour-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); list-style: none; margin: .75rem 0 .5rem; padding: 0; }
.tour-cards a { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.tour-cards a:hover { border-color: var(--action); background: var(--selected-bg); }
.tour-cards span { color: var(--muted); font-size: .88rem; }
.help-search { margin: 0 0 .5rem; }
.help-search input { min-height: 40px; }
.help-toc li[hidden] { display: none; }

/* ---------------------------------------------------------------- create/edit: «¿Cuándo?» — deadline vs. when the work happens */
.dates { border: 1px solid var(--border); border-radius: var(--r-lg); padding: .5rem 1rem 1rem; margin: 1.25rem 0; background: var(--surface-2); min-width: 0; }
.dates > legend { display: flex; align-items: center; gap: .4rem; padding: 0 .35rem; font-weight: 700; }
.dates-block { margin: .5rem 0 0; }
.dates-title { margin: .25rem 0 0; }
.dates-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0 .45rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-strong); margin-left: .25rem; }
.dates details.section { background: var(--surface); margin: .75rem 0 .25rem; }
.dates-summary { margin: .75rem 0 0; padding: .55rem .8rem; border-radius: var(--r); background: var(--info-bg); color: var(--info-text); font-weight: 600; }
.dates-summary:empty { display: none; }
.dates-summary.is-warning { background: var(--warn-bg); color: var(--warn-text); }

/* ---------------------------------------------------------------- new notification while the page is open; reminder on Inicio */
.notif-arrival { position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: center; gap: .6rem; width: min(420px, calc(100vw - 2rem)); padding: .7rem .5rem .7rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--action); border-radius: var(--r); box-shadow: var(--shadow-pop); animation: arrival-in var(--t) var(--ease-out); }
.notif-arrival.is-request { border-left-color: var(--warn); }
.notif-arrival p { flex: 1; margin: 0; overflow-wrap: anywhere; font-size: .93rem; }
@keyframes arrival-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.unread-strip { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--r); background: var(--info-bg); color: var(--info-text); text-decoration: none; }
.unread-strip span { flex: 1; }
.unread-strip:hover { text-decoration: underline; }
.unread-strip-go { flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.unread-strip-go .icon { transform: scaleX(-1); }
@media print { .notif-arrival, .unread-strip { display: none !important; } }

/* ---------------------------------------------------------------- conversation: edited / deleted progress notes */
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .35rem; }
.post-actions form { margin: 0; }
.post-actions .link-button { display: inline-flex; align-items: center; gap: .25rem; min-height: var(--choice-h); padding-inline: .15rem; text-decoration: none; color: var(--muted); }
.post-actions .link-button:hover { color: var(--link); text-decoration: underline; }
.post-actions .danger-text:hover { color: var(--danger-text); }
.post-edited { color: var(--muted); font-size: .85rem; }
.post-deleted { display: flex; align-items: center; gap: .35rem; margin: .1rem 0; color: var(--muted); font-style: italic; }
.post-history { margin-top: .4rem; font-size: .9rem; }
.post-history > summary { cursor: pointer; color: var(--link); }
.post-history ol { margin: .4rem 0 0; padding-left: 1.1rem; }
.post-history li { margin: .4rem 0; padding: .4rem .6rem; background: var(--surface-2); border-radius: var(--r-sm); }

.compose-section { padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--border); }
.compose-section > h2 { font-size: 1.1rem; margin: 0 0 1.2rem; }
.compose-section .dates { border: 0; padding: 1rem; margin: 0; }
.compose-section .dates > .dates-block:first-of-type { margin-top: 0; }
.compose-section .dates > legend { font-size: .95rem; }
.recipient-tools { display: flex; align-items: end; flex-wrap: wrap; gap: .7rem 1rem; margin-bottom: .7rem; }
.recipient-tools > label { flex: 1 1 230px; font-size: .85rem; color: var(--muted); }
.recipient-tools select { margin-top: .3rem; }
.recipient-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.recipient-bulk .btn { white-space: normal; }
.friendly-create .form-actions > p { flex: 1 1 220px; max-width: 45ch; }
.account-create { max-width: 850px; }
.account-create #id_scope_people, .account-create #id_scope_departments { max-height: 300px; overflow-y: auto; }
.account-create #id_scope_people label, .account-create #id_scope_departments label { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; }
.account-review { padding: 1rem 1.2rem; background: var(--surface-2); border-radius: var(--r); margin-bottom: 1rem; }
.account-review h2 { font-size: 1rem; margin: 0 0 .4rem; }
.read-confirmation { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .4rem; }
.comment-person .person-card { display: inline-block; max-width: 100%; }
.comment-person .person-card summary { min-height: 36px; display: flex; align-items: center; gap: .35rem; }
.person-card { position: relative; }
.person-card-body { position: absolute; z-index: 4; top: calc(100% + 4px); left: 0; width: min(290px, 65vw); background: var(--surface); border: 1px solid var(--border); padding: .8rem 1rem; border-radius: var(--r); box-shadow: var(--shadow-pop); color: var(--text); overflow-wrap: anywhere; }
.person-card-body p { margin: .25rem 0; }
.mentions { position: relative; margin: .8rem 0; }
.mentions > label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 600; }
.mention-options { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); padding: .35rem; margin-top: .3rem; }
.mention-options button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); padding: .65rem; font: inherit; cursor: pointer; }
.mention-options button:hover { background: var(--selected-bg); }
.create-file-list { list-style: none; padding: 0; margin: .6rem 0; }
.create-file-list li { overflow-wrap: anywhere; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.create-submit-status { padding: 1rem; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r); margin-bottom: 1rem; overflow-wrap: anywhere; }
.create-submit-status .btn { margin-top: .6rem; }
.install-guide { width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 1.4rem; }
.install-guide h2 { font-size: 1.15rem; margin: 0; }
.install-guide h3 { font-size: 1rem; }
.install-guide-head { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.install-guide ol { padding-left: 1.3rem; }
.install-guide li { margin: .7rem 0; }
@media (max-width: 640px) {
  .compose-section { margin-bottom: 1.1rem; padding-bottom: 1.1rem; }
  .friendly-create { padding: 1rem; }
}

/* ================================================================ UX revision (oct 2026)
   One control system, a calm Inicio, the people picker and in-editor mentions. Rules here intentionally refine the
   component rules above; colours come only from the tokens, so light/dark/system follow automatically. */

/* ---------------------------------------------------------------- controls
   Primary: one per group, the thing to do now. Default (.btn): secondary. Quiet: low emphasis (Cancelar, Quitar
   filtros). Danger: only on the confirmation step of a destructive action. Small: dense places (lists, footers). */
.btn { min-height: 44px; padding: .5rem 1rem; border-radius: 8px; font-size: 1rem; line-height: 1.25; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text); font-weight: 600; }
.btn-quiet:hover { background: var(--surface-2); }
.btn-danger:hover { background: var(--danger-text); border-color: var(--danger-text); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: .9em; height: .9em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-actions { align-items: center; }
.form-actions.spread > div { margin-left: auto; }
.tabs { overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- cards and Inicio */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; min-width: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.card-head h2 { margin: 0; font-size: 1.1rem; }
.card-head h2.eyebrow { font: 700 .78rem/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow { font: 700 .78rem/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.count-pill { font-size: .8rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: var(--selected-bg); color: var(--selected-text); white-space: nowrap; }
.home-head { align-items: center; }
/* Inicio: own work about two thirds, notifications one third */
.home-grid { display: grid; gap: 1.5rem 2rem; align-items: start; }
@media (min-width: 960px) { .home-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } }
.next-status { font-size: .9rem; font-weight: 600; color: var(--muted); }
.next-status.is-late { color: var(--danger-text); }
.next-tags { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; margin: 0 0 .6rem; }
.prio-text { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 700; padding: .15rem .6rem; border-radius: 6px; background: var(--surface-2); color: var(--text); }
.prio-text.prio-urgent { background: var(--danger-bg); color: var(--danger-text); }
.prio-text.prio-high { background: var(--high-bg); color: var(--warn-text); }
.prio-text.prio-low { color: var(--muted); }
.part-state { font-size: .88rem; color: var(--muted); }
.next-title { font: 600 1.35rem/1.3 var(--display); letter-spacing: -.015em; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.next-title a { color: var(--text); text-decoration: none; }
.next-title a:hover { text-decoration: underline; }
.next-when { margin: 0; font-size: 1.05rem; }
.next-when.is-late strong { color: var(--danger-text); }
.next-context { margin: .25rem 0 0; color: var(--muted); font-size: .93rem; overflow-wrap: anywhere; }
.next-cta { margin-top: 1.1rem; }
.next-later { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.next-later ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.next-later li + li { border-top: 1px solid var(--border); }
.next-later a { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .5rem; margin: 0 -.5rem; border-radius: var(--r-sm); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.next-later a:hover { background: var(--surface-2); }
:where(.next-later a) span { color: var(--muted); font-size: .88rem; } /* low specificity: named parts and priority words keep their colours */
.notice-mini { list-style: none; margin: 0; padding: 0; }
.notice-mini li + li { border-top: 1px solid var(--border); }
.notice-mini form { margin: 0; }
.notice-mini-open { display: flex; gap: .65rem; width: calc(100% + 1rem); padding: .7rem .5rem; margin: 0 -.5rem; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.notice-mini-open:hover { background: var(--surface-2); }
.notice-mini-dot { flex: 0 0 8px; height: 8px; margin-top: .5rem; border-radius: 50%; }
.is-unread .notice-mini-dot { background: var(--action); }
.notice-mini-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.notice-mini-text strong { font-weight: 600; }
.is-unread .notice-mini-text strong { font-weight: 700; }
.notice-mini-task { font-size: .93rem; }
.notice-mini-meta { color: var(--muted); font-size: .83rem; }
.card-foot-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .6rem; min-height: 40px; font-weight: 600; text-decoration: none; }
.card-foot-link:hover { text-decoration: underline; }
.home-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1.1rem 0 0; }
.home-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; text-decoration: none; }
.home-links a .icon { color: var(--muted); }
.home-links a:hover { text-decoration: underline; }
.home-alert { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; padding: .65rem .9rem; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-text); }
.home-alert .icon { margin-top: .15rem; }
.home-alert a { color: inherit; font-weight: 700; }
.tour-invite { padding: .6rem .9rem; gap: .5rem 1rem; }
.tour-invite > p { flex: 1 1 260px; margin: 0; color: var(--text); }
@media (max-width: 640px) {
  .card { padding: 1rem; }
  .next-cta { width: 100%; }
  .home-head .btn { width: 100%; }
}

/* ---------------------------------------------------------------- people picker */
.picker-field { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding: .7rem .8rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); }
.has-error .picker-field { border: 2px solid var(--danger); }
.picker-summary { flex: 1 1 220px; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.picker-summary span { color: var(--muted); font-size: .92rem; }
.picker-dialog { width: min(640px, calc(100vw - 24px)); max-width: none; max-height: min(760px, calc(100dvh - 24px)); }
.picker-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.picker-dialog .picker-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
html:not(.js) .picker-panel { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); }
html:not(.js) .picker-scroll { max-height: 360px; }
.picker-top { padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--border); display: grid; gap: .65rem; }
.picker-title { margin: 0; font-size: 1.15rem; }
.picker-depts { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .15rem; }
.picker-dept { flex: 0 0 auto; min-height: 36px; padding: .25rem .8rem; border-radius: 999px; border: 1px solid var(--control-border); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.picker-dept:hover { border-color: var(--muted); }
.picker-dept[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--action); color: var(--selected-text); font-weight: 600; }
.picker-scroll { overflow-y: auto; flex: 1; min-height: 0; padding: .35rem .6rem .6rem; overscroll-behavior: contain; }
.picker-row { display: flex; align-items: center; gap: .7rem; padding: .5rem; min-height: 48px; border-radius: var(--r-sm); cursor: pointer; font-weight: 400; }
.picker-row:hover { background: var(--surface-2); }
.picker-row > input { flex-shrink: 0; margin: 0; }
.picker-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.picker-row-text > span { color: var(--muted); font-size: .86rem; }
.picker-person:has(input:checked) { background: var(--selected-bg); }
.picker-person:has(input:checked) .picker-row-text strong { color: var(--selected-text); }
.picker-row.is-covered { opacity: .6; cursor: default; }
.picker-row.is-covered .picker-row-text > span::after { content: " · incluida en el departamento"; }
.picker-all { margin: .2rem 0 .35rem; border: 1px dashed var(--border-strong); }
.picker-results { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; padding: .35rem .5rem .6rem; color: var(--muted); font-size: .9rem; }
.picker-group { margin-top: .35rem; }
.picker-group-head { position: sticky; top: -.35rem; z-index: 1; background: var(--surface-2); }
.picker-group-head:hover { background: var(--surface-2); }
.picker-people { list-style: none; margin: 0; padding: 0 0 0 .6rem; }
.picker-none { color: var(--muted); padding: .5rem; margin: 0; font-size: .92rem; }
.picker-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .75rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface); }
.picker-count { margin: 0; font-weight: 700; flex: 1 1 auto; }
.picker-foot [aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-text); }
.picker-foot-actions { display: flex; gap: .5rem; margin-left: auto; }
.picker-row .load-tag { margin: 0; padding: 0; font-size: inherit; }
.load-tag.is-busy { color: var(--warn-text); font-weight: 600; }
@media (max-width: 640px) {
  .picker-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .picker-field .btn { width: 100%; }
  .picker-foot-actions { width: 100%; }
  .picker-foot-actions .btn { flex: 1; }
}

/* ---------------------------------------------------------------- mentions (editor and published comments) */
.rte-content [data-mention], .mention { display: inline; padding: 0 .2em; border-radius: 4px; background: var(--selected-bg); color: var(--selected-text); font: inherit; font-weight: 600; white-space: nowrap; }
button.mention { border: 0; margin: 0; cursor: pointer; line-height: inherit; }
button.mention:hover { text-decoration: underline; }
.mention-plain { background: var(--surface-2); color: var(--text); font-weight: 500; }
.mention-card { position: fixed; inset: auto; margin: 0; width: min(280px, calc(100vw - 16px)); padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow-wrap: anywhere; }
.mention-card:popover-open { display: grid; gap: .15rem; animation: pop-in var(--t-fast) var(--ease-out); }
.mention-card span { font-size: .9rem; }
.mention-menu { z-index: 60; width: min(320px, calc(100vw - 24px)); max-height: 280px; overflow-y: auto; padding: .3rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-pop); }
.mention-option { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; min-height: 44px; border-radius: var(--r-sm); cursor: pointer; }
.mention-option[aria-selected="true"], .mention-option:hover { background: var(--selected-bg); }
.mention-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mention-option-text > span { color: var(--muted); font-size: .85rem; }

/* ---------------------------------------------------------------- assignment page: one status line, calmer team panel */
.task-status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: .55rem 0 0; font-size: .97rem; }
.task-status a { font-weight: 600; }
.task-status .icon { vertical-align: -2px; }
@media (min-width: 1024px) { .summary-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.instructions, .recent-list { max-width: none; }
.aside-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.aside-head h3 { margin: 0 0 .35rem; }
.aside-more { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .92rem; }
.aside-more > summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.aside-more p { margin: .45rem 0; }
.person-card > summary { text-decoration: none; border-radius: 4px; }
.person-card > summary:hover { color: var(--link); }
.team-check { color: var(--ok-text); }
/* deadline strip: the text wraps inside its line instead of dropping below the icon */
.strip-item { flex-wrap: nowrap; align-items: flex-start; }
.strip-item > .icon { margin-top: .2rem; }
.strip-item > span { min-width: 0; flex: 0 1 auto; }

/* ================================================================ 2026 company redesign (docs/ux-company-redesign)
   Where am I, what needs me, what can I do next, did it work. Flat surfaces, neutral borders, 6–8 px radii, one blue
   primary action per decision, states in words. No side strips, glow, gradients or decorative cards. These rules refine
   the components above; colours come only from the tokens, so light / dark / system follow. */

/* shell: a labelled navigation column, a short top bar that says where you are */
.sidenav { width: 232px; background: var(--surface); border-right: 1px solid var(--border); padding: 1rem .75rem; gap: .25rem; }
.sidenav .brand { border-bottom: 0; padding: .25rem .5rem 1.1rem; }
.nav li + li { margin-top: 2px; }
.nav a { padding: .55rem .8rem; border-radius: 6px; font-weight: 500; }
.nav a[aria-current="page"] { background: var(--selected-bg); color: var(--selected-text); font-weight: 600; }
.nav a > span:not([class]) { min-width: 0; } /* a long label wraps before the count is squeezed */
.nav a:has(> .nav-count) { padding-right: .4rem; gap: .55rem; }
/* counts say what they count: overdue = danger (filled), requests waiting = warning, unread = neutral. The word is always
   in the accessible name; in the drawer (phones, no hover) its first sr-only part is shown, in the narrow column it is the tooltip. */
.nav-count { margin-left: auto; flex-shrink: 0; min-width: 1.6rem; padding: 0 .45rem; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.55; text-align: center; white-space: nowrap;
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.nav-count-danger { background: var(--danger); color: #fff; box-shadow: none; } /* white on --danger: 6.60 light, 4.56 dark/OLED */
.nav-count-warn { background: var(--warn-bg); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn); }
.drawer-panel .nav-count > .sr-only:first-of-type { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-weight: 600; }
.nav-utils { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.sidenav-foot { border-top: 0; padding: .75rem .8rem 0; }
.sidenav-foot a { color: var(--link); font-weight: 600; min-height: 44px; }
.topbar { min-height: var(--topbar-h); padding: .4rem 2rem; gap: 1rem; }
.topbar-where { flex: 0 1 auto; margin: 0; color: var(--muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.utils { gap: .75rem; }
.bell { width: auto; padding: 0 .6rem; gap: .25rem; color: var(--text); font-size: .95rem; }
.bell .count { font-weight: 600; font-variant-numeric: tabular-nums; } /* «(3)» in the bell's own colour: unread is neutral, like its nav count */
.bell:hover { background: var(--surface-2); }
.account-menu > summary { gap: .45rem; font-size: .95rem; }
main { max-width: 1440px; padding: 1.75rem 2rem 3.5rem; }
@media (max-width: 899px) {
  .topbar { padding: .4rem 1rem; gap: .5rem; }
  .drawer > summary { flex-shrink: 0; gap: .35rem; padding: 0 .55rem; border: 1px solid var(--control-border); font-weight: 600; }
  /* without the column, the bar says where you are (the drawer marks it too); it gives way first when space is short */
  .topbar-where { color: var(--text); font-weight: 600; font-size: .92rem; }
  .brand-compact { display: none; }
  main { padding: 1.25rem 1rem 3rem; }
}
@media (max-width: 640px) { .menu-name { display: none; } } /* on phones the place beats my own name (it stays in the menu) */
@media (max-width: 480px) {
  .account-menu summary > .icon { display: none; }
  .account-menu > summary { padding: 0 .25rem; }
  .bell { padding: 0 .35rem; }
}
@media (max-width: 400px) { /* short bell: icon + count; the link keeps «Notificaciones: N sin leer» as its name */
  .topbar { padding: .4rem .75rem; gap: .4rem; }
  .utils { gap: .25rem; }
  .bell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bell .count { font-weight: 700; }
}
@media (max-width: 359px) { .topbar-where { display: none; } }

/* page heads: title, one line of context, one primary action */
.page-head { align-items: flex-start; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.75rem; }
.page-kicker { font-size: .97rem; }
@media (max-width: 640px) { .page-head .head-actions { width: 100%; } .page-head .head-actions .btn-primary { width: 100%; } }

/* page tabs (Seguimiento, Administración): links that change the view, underlined when current */
.page-tabs { display: flex; flex-wrap: wrap; gap: 0 1.5rem; border-bottom: 1px solid var(--border); margin: 0 0 1.1rem; }
.page-tabs a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; color: var(--muted); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--text); }
.page-tabs a[aria-current="page"] { color: var(--selected-text); border-bottom-color: var(--action); }
@media (max-width: 640px) { .page-tabs { column-gap: 1rem; } } /* three tabs keep one line at 390 px */
.tab-count { font-weight: 600; }
.scope-line { margin: 0 0 .9rem; color: var(--muted); font-size: .95rem; max-width: 80ch; }
.scope-line strong { color: var(--text); }

/* filters: a few states, the search, the rest under «Filtros» */
.filter-bar { margin: 0 0 1rem; }
.quick { gap: .4rem; margin: 0 0 .8rem; }
.filters { gap: 0 .75rem; align-items: flex-start; }
.filters .field-search { flex: 1 1 360px; max-width: 640px; margin-bottom: .25rem; }
.filters .field-search .help { margin: .2rem 0 0; font-size: .85rem; }
.filters .field-dept { flex: 0 1 260px; }
.more-filters { flex-basis: 100%; }
.more-filters > summary { list-style: none; color: var(--text); font-weight: 600; padding: 0 .9rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters[open] > summary { background: var(--surface-2); }
.more-filters[open] { padding: .9rem 0 .25rem; }
.filter-count { color: var(--selected-text); }
.more-filters .filters-grid { margin-top: .9rem; }
.more-filters .field { flex: 1 1 200px; max-width: 280px; }
.applied { margin: .5rem 0 0; }

/* rows: title first, a short line of context, date and state in words (table layout: «tables & lists» above) */
.t-meta > * + *::before { content: "·"; margin-right: .4rem; color: var(--muted); font-weight: 400; }
.t-meta .ref { font-size: inherit; }
.due-over { color: var(--danger-text); background: none; }
.due-soon { color: var(--warn-text); background: none; }
.state { font-weight: 600; font-size: .95rem; }
.state-danger { color: var(--danger-text); }
.state-ok { color: var(--ok-text); }
.state-info, .state-neutral { color: var(--text); }
.state-muted { color: var(--muted); }
.prio-text { padding: 0; background: none; font-size: inherit; font-weight: 600; border-radius: 0; }
.prio-text-urgent { color: var(--danger-text); }
.prio-text-high { color: var(--warn-text); }
.help-text { color: var(--warn-text); font-weight: 600; }
.rel-text { color: var(--selected-text); font-weight: 600; }

/* requests (Seguimiento): who asked, where, what, how long ago, and the answer button */
.request-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.request-row { display: flex; align-items: center; gap: .75rem 1.25rem; padding: .9rem 1rem; }
.request-row + .request-row { border-top: 1px solid var(--border); }
.request-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.request-title, .request-excerpt, .request-meta { margin: 0; }
.request-excerpt { margin-top: .2rem; max-width: 80ch; }
.request-meta { margin-top: .2rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .request-row { flex-direction: column; align-items: stretch; } }

.home-requests { margin: 0 0 1.1rem; }
.home-requests a { font-weight: 600; }
.next-work { padding: 1.25rem 1.4rem; }
.next-work > .eyebrow { text-transform: none; letter-spacing: 0; font: 600 .92rem/1.3 var(--font); color: var(--muted); margin: 0 0 .6rem; }
.next-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.next-text { flex: 1 1 320px; min-width: 0; }
.next-title { font-size: 1.4rem; margin: 0 0 .6rem; }
.next-when { font-size: 1.05rem; }
.next-sub { margin: .3rem 0 0; color: var(--muted); font-size: .93rem; }
.next-cta { margin-top: 0; }
.next-later .eyebrow { text-transform: none; letter-spacing: 0; font: 600 .92rem/1.3 var(--font); }
.next-later a { display: inline; padding: 0; margin: 0; color: var(--link); font-weight: 600; }
.next-later a:hover { background: none; text-decoration: underline; }
.next-later li { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0; }
:where(.next-later li) span { color: var(--muted); font-size: .9rem; }
.next-empty { font-weight: 600; margin: 0; }
.home-more { margin: 1rem 0 0; }
.home-more a { font-weight: 600; }
.home-notices h2 { margin: .25rem 0 .5rem; font-size: 1.1rem; }
.notice-mini-open { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: .75rem; padding: .7rem .5rem; }
.notice-mini-text { gap: .15rem; }
.notice-mini-label { color: var(--link); font-weight: 600; }
.is-unread .notice-mini-label { font-weight: 700; }
.notice-mini-meta { font-size: .88rem; }
.tour-invite { box-shadow: none; border-radius: 8px; }
@media (max-width: 640px) { .next-cta { width: 100%; } .next-work { padding: 1rem; } }

/* assignment page: back + reference, title, when, whose part, one main action; then Instrucciones · Comentarios · Archivos */
.task-head .crumbs { display: flex; align-items: center; gap: .4rem; margin: 0 0 .9rem; font-size: .95rem; }
.task-head .crumbs a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }
.task-head .crumbs a:hover { text-decoration: underline; }
.task-head .overline { display: flex; flex-wrap: wrap; gap: 0 .4rem; font-weight: 500; }
.task-head .overline span + span::before { content: "·"; margin-right: .4rem; }
.task-head h1 { font-size: 1.75rem; margin: .1rem 0 .55rem; overflow-wrap: anywhere; max-width: 60ch; }
.task-due { margin: 0; font-size: 1.05rem; }
.task-due .due { display: inline; margin-left: .5rem; padding: 0; background: none; font-size: .95rem; }
.task-due .sep { color: var(--muted); }
.task-when { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.task-status { gap: .25rem .9rem; margin: .5rem 0 0; }
.task-head .actions { margin: 1rem 0 .5rem; gap: .5rem; align-items: center; justify-content: flex-start; }
.task-head .actions form { margin: 0; }
.task-tools .menu-panel, .admin-menu .menu-panel { left: 0; right: auto; }
.task-tools .complete > summary { list-style: none; }
.task-tools .complete > summary::-webkit-details-marker { display: none; }
.tabs { margin-top: 1rem; gap: 1.25rem; }
.tabs a { padding: .4rem 0; border-bottom-width: 2px; gap: .3rem; }
.tabs a[aria-selected="true"] { color: var(--selected-text); }
.tabs .count { background: none; border: 0; padding: 0; font-weight: 600; color: inherit; }
.tabs .count::before { content: "· "; }
.panel { padding-top: 1.25rem; }
.summary-main { min-width: 0; }
.summary-main > h3:first-of-type, .pinned-update + h3 { margin-top: 0; }
.instructions, .expected-output, .coverage-details, .read-check, .change-list, .pinned-update { max-width: 75ch; }
.instructions { font-size: 1rem; line-height: 1.6; background: none; border: 0; border-radius: 0; padding: 0; }
.expected-output { margin-top: 1.25rem; }
.expected-output h3 { margin-top: 0; }
.expected-output ul { margin: .4rem 0 0; padding-left: 1.25rem; }
.expected-output li + li { margin-top: .3rem; }
.pinned-update { padding: .75rem 1rem; margin: 0 0 1.25rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); box-shadow: none; }
.pinned-head { margin: 0 0 .35rem; }
.read-check { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.read-check form { margin-top: .35rem; }
.summary-aside { background: none; border: 0; padding: 0; box-shadow: none; }
@media (min-width: 1024px) { .summary-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem; } }
.summary-aside h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.team-list { list-style: none; margin: 0; padding: 0; }
.team-list li { padding: .45rem 0; }
.team-list li + li { border-top: 0; }
.team-meta { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.completed-by { font-size: .92rem; margin: .75rem 0 0; }
.aside-more { border-top: 0; padding-top: 0; margin-top: .5rem; }
.composer h3, .help-reply h3 { margin-top: 0; }
.composer.is-help { border-color: var(--high-border); }
@media (max-width: 640px) {
  .task-head h1 { font-size: 1.45rem; }
  .task-head .actions > form, .task-head .actions > .complete, .task-head .actions > .btn-primary { flex: 1 1 100%; }
  .task-head .actions > form .btn, .task-head .actions > .complete > summary { width: 100%; }
}

/* calendar: scope as tabs, events named in words (Actividad / Entrega), agenda one row per assignment */
.cal-scope { margin-top: -.25rem; }
.cal-legend { max-width: 75ch; }
/* filters on the calendar: the same shared bar, laid out as one row (states · search · «Filtros» · saved views) under the
   date controls; the search hint stays in the field's description for assistive technology */
.cal-filters { margin: 0 0 1rem; }
.cal-filters .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: 0; }
.cal-filters .quick { margin: 0 0 2px; }
.cal-filters .filters { flex: 1 1 26rem; margin: 0; align-items: flex-end; }
.cal-filters .filters .field-search { flex: 1 1 16rem; max-width: 32rem; margin: 0; }
.cal-filters .field-search .help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cal-filters .more-filters { flex: 0 0 auto; }
.cal-filters .field-sort { display: none; } /* events are always in time order here; the value still travels with the form */
.cal-filters .more-filters[open] { flex-basis: 100%; padding-top: 0; }
.cal-filters .saved-views { margin: 0; }
.cal-filters .filter-bar > :is(.filter-feedback, .applied, [data-swap="filter-errors"]) { flex-basis: 100%; margin: 0; }
.cal-filters .applied:empty { display: none; }
@media (max-width: 640px) {
  /* title and «Ver en lista» share the first row; the explanation follows */
  .page-head[data-calendar] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem .75rem; margin-bottom: 1rem; }
  .page-head[data-calendar] > div:first-child { display: contents; }
  .page-head[data-calendar] > .head-actions { grid-area: 1 / 2; }
  .page-head[data-calendar] [data-print] { display: none; } /* phones share the link; printing is a desk task */
  .page-head[data-calendar] .cal-legend { grid-area: 2 / 1 / 3 / -1; font-size: .9rem; }
  /* view switch full width; previous · today · next beside the period title; what to show below */
  .cal-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; }
  .cal-toolbar > .seg:first-child { grid-column: 1 / -1; display: flex; }
  .cal-toolbar > .seg:first-child a { flex: 1 1 0; justify-content: center; }
  .cal-toolbar .cal-title { font-size: 1.05rem; line-height: 1.25; }
  .cal-toolbar > .seg-quiet { grid-column: 1 / -1; margin-left: 0; justify-self: start; }
  .cal-filters .quick { gap: .35rem; }
  .cal-filters .filters .field-search { max-width: none; }
}
.agenda-events { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.agenda-row { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: .25rem 1.25rem; padding: .8rem 1rem; }
.agenda-row + .agenda-row { border-top: 1px solid var(--border); }
.agenda-row.is-cancelled .ev-title { text-decoration: line-through; }
.agenda-times { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.agenda-times .when { font-weight: 600; font-size: var(--fs-sm); max-width: 100%; white-space: normal; }  /* a dated overdue chip wraps in its column instead of covering the title */
.agenda-main { min-width: 0; overflow-wrap: anywhere; }
.agenda-main a { font-weight: 600; text-decoration: none; }
.agenda-main a:hover { text-decoration: underline; }
.agenda-main .t-meta { margin-top: .2rem; }
.day-item.is-urgent { box-shadow: none; }
.day-times .when { font-weight: 600; }
@media (max-width: 640px) { .agenda-row { grid-template-columns: 1fr; } }

/* in-page section links (Ajustes, Mi cuenta) */
.in-page { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 1.25rem; font-size: .95rem; }
.in-page a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }

/* administration */
.admin-section-head { align-items: flex-start; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.admin-section-head .scope-line { flex: 1 1 320px; margin: 0; }
.settings-card { border-radius: 8px; box-shadow: none; }
.settings-card section + section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.settings-card h2 { margin-top: 0; }
.system-block { margin-bottom: 1.25rem; }
.admin-log td { font-size: .95rem; }

/* account */
.account-sub { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.account-sub h3 { margin-top: 0; }
.profile-main > section h2 { margin-top: 0; }

/* help: questions first */
.help-questions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.help-questions a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.help-questions h2, .tour-list h2 { margin-top: .5rem; }
.tour-links { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.tour-links a { display: inline-flex; min-height: 44px; align-items: center; }

/* phone filters: chips wrap instead of scrolling sideways */
@media (max-width: 640px) {
  .quick { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
}
/* forms keep a comfortable reading width (create, edit, simple forms) */
.form-flow { max-width: 880px; }
.form-flow .compose-section + .compose-section, .form-flow .review-box { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1.5rem; }
.review-box h2 { margin-top: 0; }
.page-kicker.cal-legend { display: block; }

.friendly-create { max-width: none; }
.compose-layout { display: grid; gap: 1.5rem; align-items: start; }
.compose-layout > section { min-width: 0; }
.compose-layout .compose-section, .compose-layout .compose-section + .compose-section { margin: 0; padding: 0; border: 0; }
.compose-layout .compose-section > h2, .compose-layout .review-box > h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.compose-intro { margin: -.25rem 0 1rem; color: var(--muted); font-size: .9rem; }
.compose-layout .review-box { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.compose-actions { position: sticky; bottom: 0; z-index: 3; align-items: center; border-top: 1px solid var(--border); margin-top: 1.5rem; padding: 1rem 0; background: var(--surface); }
.friendly-create .compose-actions > p { margin: 0; flex: 1; max-width: none; }
.friendly-create :is(input, textarea, [contenteditable], summary) { scroll-margin-bottom: 110px; }
@media (max-width: 640px) { .friendly-create .compose-actions > p { display: none; } .compose-actions .btn-primary { flex: 1; } }
@media (min-width: 1160px) {
  .compose-layout { grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr); grid-template-areas: "work people" "work when" "more review"; }
  .compose-layout > [aria-labelledby="h-work"] { grid-area: work; }
  .compose-layout > [aria-labelledby="h-work"] .rte-content { min-height: 13rem; }
  .compose-layout > [aria-labelledby="h-people"] { grid-area: people; }
  .compose-layout > [aria-labelledby="h-when"] { grid-area: when; }
  .compose-layout > [aria-labelledby="h-more"] { grid-area: more; }
  .compose-layout > [aria-labelledby="h-how"] { grid-area: review; }
  .compose-layout > [aria-labelledby="h-people"], .compose-layout > [aria-labelledby="h-when"] { border-left: 1px solid var(--border); padding-left: 1.5rem; }
}

/* ---------------------------------------------------------------- comunicados
   Company-wide notices. Unread = the words «Sin leer» + a bold title + a navy edge (never red, never colour alone);
   «Nuevo» (published in the last seven days) is an independent, quieter word. */
.ann-list { list-style: none; margin: 0; padding: 0; }
.ann-list.card { padding: .25rem 1.4rem; }
@media (max-width: 640px) { .ann-list.card { padding: .1rem 1rem; } }
.ann-item { position: relative; min-width: 0; padding: .85rem 0; border-top: 1px solid var(--border); }
.ann-item:first-child { border-top: 0; }
.ann-item.is-unread::before { content: ""; position: absolute; left: -.8rem; top: .9rem; bottom: .9rem; width: 3px; border-radius: 3px; background: var(--action); }
.ann-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.ann-line form { margin: 0; min-width: 0; }
.ann-open { display: inline-block; min-height: 32px; padding: .2rem 0; margin: 0; border: 0; background: none; font: inherit; font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--link); text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; overflow-wrap: anywhere; cursor: pointer; }
.ann-open:hover { text-decoration-color: currentColor; }
.is-unread .ann-open { font-weight: 700; }
.ann-badges { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.badge-unread { background: var(--selected-bg); color: var(--selected-text); border-color: var(--action); }
.badge-unread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-new { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.ann-excerpt { margin: .15rem 0 0; max-width: 80ch; font-size: .95rem; overflow-wrap: anywhere; }
.ann-meta { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.home-announcements { margin-top: 1.5rem; }
.home-announcements .card-head { align-items: flex-start; margin-bottom: .25rem; }
.home-announcements h2 { margin: 0; font-size: 1.1rem; }
.ann-summary { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.ann-summary strong { color: var(--text); }
.ann-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: -.5rem 0 1rem; }
.ann-mark { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; }
.ann-read-done { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .92rem; }
.ann-read-done .icon { color: var(--ok-text); }
.ann-body { max-width: 75ch; font-size: 1.02rem; line-height: 1.65; overflow-wrap: anywhere; }
@media (max-width: 640px) { .home-announcements .card-head .btn { width: 100%; } .ann-item.is-unread::before { left: -.65rem; } }
@media print { .ann-mark, .ann-head .head-actions { display: none; } .ann-body { border: 0; padding: 0; } }

/* ================================================================ council cycle 4 (Opus): show the work sooner on phones
   Measured with fictional renders at 360 px: the filter controls of Mis asignaciones / Seguimiento / Reportes / Calendario
   took 420–670 px before the first record. The same controls stay, in fewer rows:
   - one-of-N choices: one geometry everywhere (--choice-h, same radius and selected look), compact padding on phones;
   - the search field's visible name is its adjacent «Buscar» button (WCAG technique G167); the label stays its accessible
     name and the example hint its description;
   - department: full width, its value never cut; order: its label beside the select, one row;
   - «Filtros» keeps its active count and pending note; the applied summary («N asignaciones · … · Quitar filtros») stays. */
@media (max-width: 640px) {
  .quick, .cal-filters .quick { gap: .35rem; margin-bottom: .6rem; }
  .quick a, .seg a, .team-periods a { padding-inline: .6rem; font-size: .9rem; }
  .filters { gap: .5rem .75rem; }
  .filters .field, .cal-filters .filters .field-search { margin-bottom: 0; }
  .filters .field-search > label, .filters .field-search .help { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filters .field-dept { flex: 1 1 100%; max-width: none; } /* full width: «Todos los departamentos» is never cut */
  .filters .field-dept > label { margin-bottom: .2rem; }
  .filters .field-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; flex: 1 1 100%; max-width: none; }
  .filters .field-sort > label { flex: 0 0 auto; margin: 0; }
  .filters .field-sort > select { flex: 1 1 0; width: auto; min-width: 0; }
  .filters .field-sort > .error { flex-basis: 100%; }
  .cal-filters .filters .field-search { flex: 1 1 13.5rem; } /* search and «Filtros» share a row from 360 px (search input ≥ 150 px); they wrap at 320 */
  .more-filters[open] { padding-top: .25rem; }
  .saved-views { margin: .35rem 0 0; }
  .applied { margin-top: .35rem; }
  /* calendar: the period controls in three short rows; «Qué mostrar» shares the states' geometry */
  .page-head[data-calendar] { margin-bottom: .75rem; }
  .cal-toolbar { margin: .5rem 0; gap: .5rem; }
  .cal-filters .filter-bar { gap: .35rem .75rem; }
}
/* a page's one-line context with its compact «?» hint: the hint follows the last word instead of dropping to a row of its
   own, and its panel opens under the text block (left-aligned, never past the screen edge) */
.page-sub { display: block; position: relative; }
.page-sub > p { display: inline; margin: 0; }
.page-sub > .hint-compact { position: static; vertical-align: middle; margin-left: .15rem; }
.page-sub > .hint-compact .hint-body { left: 0; transform: none; width: min(360px, 100%); }

/* Agenda: deliveries already overdue before the dates shown (same scope and filters), a short preview above the days */
.agenda-overdue { margin: 0 0 1.25rem; }
.agenda-overdue .agenda-day { margin-top: .5rem; }
.agenda-day.is-late { color: var(--danger-text); border-bottom-color: var(--danger); }
.agenda-overdue .agenda-events { margin-bottom: .5rem; }
.agenda-overdue-more { margin: 0; font-size: .95rem; }
.agenda-overdue-more a { display: inline-flex; align-items: center; min-height: var(--choice-h); font-weight: 600; }

/* disclosures that hold secondary controls or quiet data share one summary look: a compact control (--choice-h) with an
   edge and a turning chevron; the words say what is inside and whether it is in use */
details.filters-disclosure { margin: 0 0 1rem; }
details.filters-disclosure > summary, details.chart-empty-weeks > summary { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; min-height: var(--choice-h); padding: .3rem .85rem; border: 1px solid var(--control-border); border-radius: var(--r); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; list-style: none; }
details.chart-empty-weeks > summary { border-color: var(--border-strong); color: var(--muted); font-size: .92rem; font-weight: 500; } /* quiet: weeks with nothing to show */
:is(details.filters-disclosure, details.chart-empty-weeks) > summary::-webkit-details-marker { display: none; }
:is(details.filters-disclosure, details.chart-empty-weeks) > summary::before { content: ""; flex: 0 0 auto; width: .45rem; height: .45rem; margin-right: .1rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-out); }
:is(details.filters-disclosure, details.chart-empty-weeks)[open] > summary::before { transform: rotate(45deg); }
:is(details.filters-disclosure, details.chart-empty-weeks) > summary:hover { border-color: var(--muted); }
details.filters-disclosure[open] > summary { background: var(--surface-2); }
details.filters-disclosure > .filters { margin-top: .75rem; }
details.chart-empty-weeks { margin: .6rem 0 0; }
details.chart-empty-weeks > .chart-bars { margin-top: .5rem; }
@media print { details.filters-disclosure { display: none; } }


/* deadline beside priority: the four priority choices keep one line whenever the row has room for them and a usable
   date field (≈ 640 px of section, e.g. the single-column create form at 1024 px); otherwise priority takes its own row.
   A two-column grid split them 50/50, so «Urgente» wrapped under the others and left a blank block under the date. */
.two-col:has(> fieldset .segmented) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1rem; }
.two-col:has(> fieldset .segmented) > .field:not(fieldset) { flex: 1 1 14rem; min-width: 0; }
.two-col:has(> fieldset .segmented) > fieldset { flex: 0 1 auto; max-width: 100%; }
.two-col:has(> fieldset .segmented) > fieldset :is(.help, .error) { contain: inline-size; } /* the choices, not the sentence, size the column */

/* a comment's author line: name and «(tú)» flow as one line of text (wrapping together on a narrow screen) instead of two
   centred flex items, so the self-label sits on the name's baseline */
.comment-person .person-card summary { display: block; min-height: 36px; padding-block: .3rem; line-height: 1.45; }
@media (max-width: 400px) { .page-tabs { column-gap: .8rem; font-size: .94rem; } } /* four tabs (Administración) keep one line at 360 px */

/* ================================================================ one toolbar per list (Mis asignaciones, Seguimiento,
   Calendario, Reportes; partials/filters.html). Before, every control was its own block: chips, a labelled search with a
   separate «Buscar» and a hint line, labelled selects, «Filtros» on a row of its own and «Guardar esta vista» on another.
   Now: one row in one box, every control --choice-h tall with the same edge and radius:
     [Por hacer|Vencidas|Terminadas|Todas]  [🔍 Buscar…]  [Departamento ▾]  [Orden ▾]  [Filtros 2]  [Mis vistas]
   - one-of-N choices are ONE joined control everywhere (.quick like .seg: Mes|Semana|Agenda, Todo|Actividades|Entregas);
   - a select carries its name inside its own box («Orden  Recomendado ▾»), so no label row is needed;
   - «Filtros» and «Mis vistas» open a panel anchored under the toolbar (its right edge, never past the screen), closed by
     a click elsewhere or Escape; on a phone the panel takes the toolbar's full width. */
.filter-bar { margin: 0 0 1rem; }
.toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.toolbar > * { min-width: 0; }
.toolbar-break { display: none; }
/* below ≈1600 px (content under ≈1280 px beside the sidebar) a list's toolbar is two tidy rows instead of a ragged wrap;
   a viewport query, not a container query: containment would trap the panels under the results */
@media (max-width: 1600px) { .toolbar-break { display: block; flex-basis: 100%; height: 0; margin-top: -.5rem; } }

/* one-of-N: joined segments (standalone lists such as Comunicados and Notificaciones get the same control) */
.quick { display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%; margin: 0 0 1rem; padding: 0; overflow-x: auto; scrollbar-width: none; } /* a long one-of-N list scrolls inside its own control instead of widening the page */
.quick::-webkit-scrollbar { display: none; }
.toolbar .quick, .cal-filters .quick { margin: 0; }
.quick a { position: relative; flex-shrink: 0; border-radius: 0; white-space: nowrap; }
.quick a + a { margin-left: -1px; }
.quick a:first-child { border-radius: var(--choice-r) 0 0 var(--choice-r); }
.quick a:last-child { border-radius: 0 var(--choice-r) var(--choice-r) 0; }
.quick a:only-child { border-radius: var(--choice-r); }
.quick a:hover, .quick a[aria-current="true"], .quick a:focus-visible { z-index: 1; }

/* the search: icon inside the field, results follow the typing (its name and example are read aloud) */
.toolbar .filters { display: contents; } /* its fields are the toolbar's own items: one row, wrapping as one group (the form keeps its search role) */
.toolbar .filters .field, .cal-filters .filters .field-search { flex: 0 1 auto; min-width: 0; max-width: none; margin: 0; }
.toolbar .filters .field-search { flex: 1 1 15rem; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box > svg { position: absolute; left: .7rem; color: var(--muted); pointer-events: none; }
.toolbar input[type=search] { min-height: var(--choice-h); padding-block: .35rem; padding-left: 2.2rem; }

/* a select with its name inside the same box */
.field-inline { display: flex; align-items: center; min-height: var(--choice-h); border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); }
.field-inline:hover { border-color: var(--muted); }
.field-inline:has(select:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-inline > label, .filters .field-inline > label { flex: 0 0 auto; margin: 0; padding: 0 0 0 .75rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
.field-inline > select, .filters .field-inline > select { flex: 1 1 auto; width: auto; min-width: 0; min-height: calc(var(--choice-h) - 2px); padding-block: .3rem; padding-left: .45rem; border: 0; background-color: transparent; font-weight: 600; }
.field-inline > select:focus-visible { outline: none; }
.field-inline.has-error { border: 2px solid var(--danger); flex-wrap: wrap; }
.field-inline > .error { flex-basis: 100%; padding: 0 .75rem .4rem; }

/* «Filtros» and «Mis vistas»: the same compact button; the number says how many are in use */
.tool-btn, .more-filters > summary.tool-btn, .saved-views summary.tool-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--choice-h); padding: 0 .8rem; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 600; white-space: nowrap; cursor: pointer; list-style: none; }
.tool-btn::-webkit-details-marker { display: none; }
.tool-btn:hover { border-color: var(--muted); }
.tool-btn > svg { color: var(--muted); }
details[open] > .tool-btn, .more-filters[open] > summary.tool-btn { background: var(--selected-bg); border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); color: var(--selected-text); }
details[open] > .tool-btn > svg { color: currentColor; }
.filter-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--action); color: var(--action-text); font-size: var(--fs-xs); font-weight: 700; line-height: 1; }
.pending-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--warn); }
.pending-dot[hidden], .pending-note[hidden] { display: none; }

/* the panels: anchored under the toolbar's right edge */
.toolbar .more-filters, .toolbar .more-filters[open], .cal-filters .more-filters[open] { flex: 0 0 auto; flex-basis: auto; padding: 0; }
details.more-filters.tool-pop::details-content, details.more-filters.tool-pop[open]::details-content { overflow: visible; }
.tool-pop { position: static; }
.tool-panel { position: absolute; z-index: 40; top: calc(100% + .4rem); right: 0; width: min(40rem, 100%); max-height: min(70vh, 40rem); overflow-y: auto; padding: 1rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-pop); text-align: left; font-size: 1rem; font-weight: 400; }
.tool-panel .filters-grid, .more-filters .tool-panel .filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .25rem 1rem; margin: 0; }
.tool-panel .filters-grid .field, .more-filters .tool-panel .field { max-width: none; margin: 0 0 .75rem; }
.tool-panel .filter-actions { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 0; }
.tool-panel-title { margin: 0 0 .5rem; font-weight: 700; }

/* saved views inside their panel: name to open, «Eliminar» beside it, then the save form.
   margin-left: auto keeps them at the end of their row (a third row when the refinement row is full). */
.saved-slot { margin-left: auto; }
.saved-views { margin: 0; font-size: 1rem; }
.saved-views .saved-list { display: block; margin: 0 0 .75rem; padding: 0; list-style: none; }
.saved-views .saved-list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: var(--choice-h); border-bottom: 1px solid var(--border); }
.saved-views .saved-list a { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; color: var(--link); font-size: 1rem; font-weight: 600; text-decoration: none; }
.saved-views .saved-list a:hover { text-decoration: underline; }
.save-view-form { display: block; padding: 0; }
.save-view-form label { display: block; margin-bottom: .3rem; font-weight: 600; }
.save-view-form .search-row { display: flex; gap: .5rem; }
.save-view-form input { width: auto; flex: 1 1 auto; min-width: 0; }

/* the applied summary under the box */
.filter-bar > .applied { margin: .6rem 0 0; }
.filter-bar > .applied:empty, .filter-bar > .filter-feedback:empty { display: none; }

/* calendar: previous · today · next as one joined control, like the view switch beside it */
.cal-nav { display: inline-flex; gap: 0; }
.cal-nav .btn { min-height: var(--choice-h); padding: .3rem .8rem; border-radius: 0; }
.cal-nav .btn + .btn { margin-left: -1px; }
.cal-nav .btn:first-child { border-radius: var(--choice-r) 0 0 var(--choice-r); }
.cal-nav .btn:last-child { border-radius: 0 var(--choice-r) var(--choice-r) 0; }
.cal-nav .btn:hover, .cal-nav .btn:focus-visible { position: relative; z-index: 1; }
.cal-filters { margin: 0 0 1rem; }
.cal-filters .filter-bar { display: block; margin: 0; }
.cal-filters .filter-bar > :is(.filter-feedback, .applied, [data-swap="filter-errors"]) { margin: .5rem 0 0; }

@media (max-width: 640px) {
  .toolbar { gap: .5rem; padding: .5rem; }
  .toolbar .quick, .cal-filters .quick { display: flex; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar .quick a { flex: 1 0 auto; justify-content: center; }
  .quick a:focus-visible { outline-offset: -3px; } /* inside the scrolling row, never clipped */
  .toolbar .filters .field-search { flex: 1 1 100%; }
  .toolbar .filters .field-dept, .filters .field-dept { flex: 1 1 100%; max-width: none; }
  .toolbar .filters .field-sort, .filters .field-sort { display: flex; flex-wrap: nowrap; flex: 1 1 100%; max-width: none; gap: 0; }
  .filters .field-inline > label { margin: 0; }
  .toolbar .more-filters, .toolbar .more-filters[open], .toolbar .saved-slot { flex: 1 1 0; }
  .toolbar .tool-btn { width: 100%; justify-content: center; }
  .toolbar-break { display: none !important; }
  .cal-filters .toolbar .filters .field-search { flex: 1 1 10rem; } /* the calendar has no order: search and «Filtros» share the row */
  .cal-filters .toolbar .saved-slot { flex: 1 1 100%; } /* …and «Mis vistas» gets the row below, never a squeezed sliver */
  .saved-slot { margin-left: 0; }
  .toolbar .more-filters[open], .toolbar .saved-slot:has(details[open]) { flex: 1 1 100%; }
  .tool-panel { position: static; width: auto; max-height: none; margin-top: .5rem; } /* in the page flow: no results hidden underneath */
  .toolbar .quick a, .seg a { padding-inline: .6rem; }
}
@media print { .toolbar { display: none !important; } }