/*
 * UFIS design system: tokens and components.
 *
 * The approved previews (docs/design/previews/) turned into one stylesheet. Rules:
 * - Every colour lives in the token blocks below; components use only var(--token).
 * - Light is the default. Dark applies with html[data-theme="dark"], or when the person has
 *   not chosen (no data-theme) and the system prefers dark. The two dark blocks must stay
 *   identical (tests/ui checks this and the WCAG contrast of the token pairs).
 * - Olive #C3C94D is a fill (with dark text) or a decorative rule, never text on light.
 * - Templates never set style= or colours; they use these classes through the macros in
 *   ufis/ui/templates/components/.
 */

/* ------------------------------------------------------------------ tokens: light */
:root {
  --paper: #FAFAF6;
  --surface: #FFFFFF;
  --sunken: #F2F1EA;
  --line: #E3E2D8;
  --line-2: #D3D2C4;
  --text: #23262B;
  --text-2: #5F6158;
  --navy: #424F62;
  --navy-deep: #2C3545;
  --navy-wash: #E6E9EE;
  --olive: #C3C94D;
  --on-olive: #2C3545;
  --olive-ink: #5C6220;
  --olive-wash: #EEF1CF;
  --ok: #2B7455;
  --ok-wash: #E4F1EA;
  --warn: #8F5F0E;
  --warn-wash: #F8EDD6;
  --danger: #A8473C;
  --danger-wash: #F8E5E2;
  --info: #424F62;
  --info-wash: #E6E9EE;
  --primary: #424F62;
  --primary-hover: #2C3545;
  --on-primary: #FFFFFF;
  --link: #424F62;
  --link-hover: #2C3545;
  --focus: #424F62;
  --selected: #424F62;
  --selected-wash: #E6E9EE;
  --tab-on: #424F62;
  --logo: #424F62;
  --on-logo: #FFFFFF;
  --logo-border: #424F62;
  --avatar: #2C3545;
  --on-avatar: #FFFFFF;
  --admin: #2C3545;
  --on-admin: #FFFFFF;
  --hero: #1E242C;
  --map: #E7E8DD;
  --map-line: #D6D7CA;
  --map-edge: #FFFFFF;
  --map-label: #FFFFFF;
  --cat-1: #424F62;
  --cat-2: #9AA35A;
  --cat-3: #B5A179;
  --cat-4: #7C8A9E;
  --cat-5: #5C6220;
  --cat-6: #A0644B;
  /* map data (ufis-map.js): four more categories, "other", a sequential ramp (viridis, the
     end nearest the paper clipped) and the five harvest classes (one ink, light to dark) */
  --cat-7: #4F7A8A;
  --cat-8: #8E6C8A;
  --cat-9: #C4914A;
  --cat-10: #6B8F71;
  --cat-other: #8A9078;
  --seq-1: #440154;
  --seq-2: #472C7A;
  --seq-3: #3B518B;
  --seq-4: #2D718E;
  --seq-5: #218F8D;
  --seq-6: #25AC82;
  --seq-7: #58C765;
  --cls-1: #D8AA50;
  --cls-2: #C08F37;
  --cls-3: #A37324;
  --cls-4: #84581A;
  --cls-5: #654113;
  --chart-1: #385580;
  --chart-2: #8D981F;
  --chart-3: #705829;
  --chart-4: #798BA5;
  --chart-5: #148555;
  --chart-6: #6F4A0B;
  --chart-seq-lo: #E6E9EE;
  --chart-seq-hi: #2C3545;
  --scrim: rgba(35, 38, 43, .28);
  --shadow: 0 1px 2px rgba(35, 38, 43, .05), 0 6px 20px rgba(35, 38, 43, .06);
  --shadow-float: 0 1px 2px rgba(35, 38, 43, .08), 0 8px 24px rgba(35, 38, 43, .10);
  --shadow-drawer: 0 12px 40px rgba(35, 38, 43, .18);
  --shadow-seg: 0 1px 2px rgba(35, 38, 43, .12);
  --skeleton: #ECEBE3;
  --skeleton-shine: #F6F5EF;
  color-scheme: light;
}

/* ------------------------------------------------------------------ tokens: dark */
html[data-theme="dark"] {
  --paper: #1B2230;
  --surface: #232B39;
  --sunken: #1F2633;
  --line: #323C4D;
  --line-2: #3E4A5C;
  --text: #E8E9E3;
  --text-2: #A9AFB8;
  --navy: #C9D0DA;
  --navy-deep: #2C3545;
  --navy-wash: #2A3446;
  --olive: #C3C94D;
  --on-olive: #2C3545;
  --olive-ink: #D3D88A;
  --olive-wash: #363C26;
  --ok: #7FC3A0;
  --ok-wash: #203A30;
  --warn: #E2B866;
  --warn-wash: #3A3020;
  --danger: #E59A8F;
  --danger-wash: #3E2724;
  --info: #C9D0DA;
  --info-wash: #2A3446;
  --primary: #C3C94D;
  --primary-hover: #D3D88A;
  --on-primary: #1B2230;
  --link: #D3D88A;
  --link-hover: #E6E9B8;
  --focus: #C3C94D;
  --selected: #C3C94D;
  --selected-wash: #363C26;
  --tab-on: #C3C94D;
  --logo: #2E3646;
  --on-logo: #C3C94D;
  --logo-border: #3E4A5C;
  --avatar: #3E4A5C;
  --on-avatar: #FFFFFF;
  --admin: #C9D0DA;
  --on-admin: #1B2230;
  --hero: #171D27;
  --map: #1E2531;
  --map-line: #2C3545;
  --map-edge: #1B2230;
  --map-label: #FFFFFF;
  --cat-1: #6F7F98;
  --cat-2: #9AA35A;
  --cat-3: #B5A179;
  --cat-4: #7C8A9E;
  --cat-5: #C3C94D;
  --cat-6: #C08468;
  --cat-7: #7FA8B8;
  --cat-8: #B28FAE;
  --cat-9: #D9A866;
  --cat-10: #8FB596;
  --cat-other: #8A9078;
  --seq-1: #32648E;
  --seq-2: #27808E;
  --seq-3: #1E9B8A;
  --seq-4: #32B67A;
  --seq-5: #69CD5B;
  --seq-6: #B2DD2D;
  --seq-7: #FDE725;
  --cls-1: #F2D68C;
  --cls-2: #E0BC61;
  --cls-3: #CBA33E;
  --cls-4: #B0872F;
  --cls-5: #8E6B2B;
  --chart-1: #7993B9;
  --chart-2: #767F1A;
  --chart-3: #C09C54;
  --chart-4: #677B98;
  --chart-5: #2FBB80;
  --chart-6: #B87300;
  --chart-seq-lo: #2A3446;
  --chart-seq-hi: #C9D0DA;
  --scrim: rgba(0, 0, 0, .45);
  --shadow: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-drawer: 0 12px 40px rgba(0, 0, 0, .5);
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, .35);
  --skeleton: #2A3342;
  --skeleton-shine: #323C4D;
  color-scheme: dark;
}

/* No explicit choice: follow the system. Keep identical to the block above. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper: #1B2230;
    --surface: #232B39;
    --sunken: #1F2633;
    --line: #323C4D;
    --line-2: #3E4A5C;
    --text: #E8E9E3;
    --text-2: #A9AFB8;
    --navy: #C9D0DA;
    --navy-deep: #2C3545;
    --navy-wash: #2A3446;
    --olive: #C3C94D;
    --on-olive: #2C3545;
    --olive-ink: #D3D88A;
    --olive-wash: #363C26;
    --ok: #7FC3A0;
    --ok-wash: #203A30;
    --warn: #E2B866;
    --warn-wash: #3A3020;
    --danger: #E59A8F;
    --danger-wash: #3E2724;
    --info: #C9D0DA;
    --info-wash: #2A3446;
    --primary: #C3C94D;
    --primary-hover: #D3D88A;
    --on-primary: #1B2230;
    --link: #D3D88A;
    --link-hover: #E6E9B8;
    --focus: #C3C94D;
    --selected: #C3C94D;
    --selected-wash: #363C26;
    --tab-on: #C3C94D;
    --logo: #2E3646;
    --on-logo: #C3C94D;
    --logo-border: #3E4A5C;
    --avatar: #3E4A5C;
    --on-avatar: #FFFFFF;
    --admin: #C9D0DA;
    --on-admin: #1B2230;
    --hero: #171D27;
    --map: #1E2531;
    --map-line: #2C3545;
    --map-edge: #1B2230;
    --map-label: #FFFFFF;
    --cat-1: #6F7F98;
    --cat-2: #9AA35A;
    --cat-3: #B5A179;
    --cat-4: #7C8A9E;
    --cat-5: #C3C94D;
    --cat-6: #C08468;
    --cat-7: #7FA8B8;
    --cat-8: #B28FAE;
    --cat-9: #D9A866;
    --cat-10: #8FB596;
    --cat-other: #8A9078;
    --seq-1: #32648E;
    --seq-2: #27808E;
    --seq-3: #1E9B8A;
    --seq-4: #32B67A;
    --seq-5: #69CD5B;
    --seq-6: #B2DD2D;
    --seq-7: #FDE725;
    --cls-1: #F2D68C;
    --cls-2: #E0BC61;
    --cls-3: #CBA33E;
    --cls-4: #B0872F;
    --cls-5: #8E6B2B;
    --chart-1: #7993B9;
    --chart-2: #767F1A;
    --chart-3: #C09C54;
    --chart-4: #677B98;
    --chart-5: #2FBB80;
    --chart-6: #B87300;
    --chart-seq-lo: #2A3446;
    --chart-seq-hi: #C9D0DA;
    --scrim: rgba(0, 0, 0, .45);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-float: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-drawer: 0 12px 40px rgba(0, 0, 0, .5);
    --shadow-seg: 0 1px 2px rgba(0, 0, 0, .35);
    --skeleton: #2A3342;
    --skeleton-shine: #323C4D;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ type and sizes */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-logo: "Century Gothic", "Futura", "Avenir Next", sans-serif;
  --radius-s: 6px;
  --radius: 9px;
  --radius-m: 10px;
  --radius-l: 12px;
  --radius-xl: 14px;
  --control: 36px;
  --touch: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden], [x-cloak] { display: none !important; }
b, strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important; 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: 16px; top: -60px; z-index: 100; padding: 10px 14px;
  border-radius: var(--radius); background: var(--primary); color: var(--on-primary);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--on-primary); }

.muted { color: var(--text-2); }
.small { font-size: 13px; }
.xsmall { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ml-auto { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.stack-l { display: flex; flex-direction: column; gap: 30px; }

/* ------------------------------------------------------------------ icons */
svg.i {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
svg.i-s { width: 16px; height: 16px; flex-basis: 16px; }
svg.i-xs { width: 14px; height: 14px; flex-basis: 14px; }
svg.i-l { width: 22px; height: 22px; flex-basis: 22px; }

/* ------------------------------------------------------------------ page frame */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.page { display: flex; flex-direction: column; gap: 30px; padding-top: 28px; padding-bottom: 56px; }
.page-tight { gap: 16px; padding-top: 22px; }
.bleed { padding-bottom: 0; }
/* The header's company choice narrows the page (layout.html): above a full-width map too. */
.bleed > .scope-note { margin-top: 16px; margin-bottom: 12px; }
main:focus { outline: none; }
/* after a navigation link the page's heading takes the focus (ufis.js, U4-12): it is read out,
   not drawn, like <main> above; the next Tab goes on from there */
.titles h1:focus { outline: none; }

/* header */
.hdr {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 0 16px; border-bottom: 3px solid var(--olive);
}
.logo {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px;
  background: var(--logo); color: var(--on-logo); border: 1px solid var(--logo-border);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: var(--font-logo); font-weight: 700; font-size: 13px; letter-spacing: .6px;
}
.logo:hover { color: var(--on-logo); }
.titles { flex: 1 1 auto; min-width: 0; }
.titles h1 { font-size: 22px; font-weight: 650; letter-spacing: -.2px; overflow-wrap: anywhere; }
.titles .sub { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.crumbs { margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* a "›" always travels with the item after it, so a wrapped line never starts or ends with one alone */
.crumbs li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-2); }
.acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctl {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
  color: var(--text); white-space: nowrap; text-decoration: none;
}
.ctl:hover { border-color: var(--line-2); color: var(--text); }
.ctl[aria-expanded="true"] { border-color: var(--navy); }
/* a filter is on (company switcher with one company: "Solo FAP") */
.ctl.is-set { border-color: var(--navy); background: var(--navy-wash); color: var(--navy); }
.ctl.is-set:hover { color: var(--navy); }
.ctl .only-phone { display: none; }
/* the phone face of the company switcher: "solo" over the company's short code */
.ctl-code { flex-direction: column; align-items: center; line-height: 1.1; font-size: 13px; }
.ctl-code-only { font-size: 11px; font-weight: 550; }
.ctl-code b { max-width: 7ch; overflow: hidden; text-overflow: ellipsis; }
.kbd { font-size: 11.5px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0 5px; color: var(--text-2); font-family: var(--font); }
.dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--olive); }
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 0; padding: 0;
  background: var(--avatar); color: var(--on-avatar); font-size: 13px; font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ menus */
.menu { position: relative; display: inline-flex; }
.menu-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 240px; max-width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto;
  padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-float);
}
.menu-pop.start { left: 0; right: auto; }
.menu-pop form { margin: 0; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head b, .menu-head span { display: block; }
.menu-label { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); border: 0; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left;
  text-decoration: none; font-size: 14px;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--sunken); color: var(--text); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item .check { margin-left: auto; color: var(--text); visibility: hidden; }
.menu-item[aria-checked="true"] { font-weight: 650; }
.menu-item[aria-checked="true"] .check { visibility: visible; }
.menu-item .i { color: var(--text-2); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control); padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 550; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { border-color: var(--navy); color: var(--text); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--sunken); border-color: transparent; }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); color: var(--danger); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 15px; }
.btn[aria-pressed="true"], .btn.is-on { background: var(--olive-wash); border-color: var(--olive); color: var(--olive-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .i { margin-left: -2px; }
.iconbtn {
  width: var(--control); height: var(--control); flex: 0 0 var(--control); padding: 0;
  border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { border-color: var(--line-2); background: var(--sunken); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* htmx request indicator (htmx's own injected style is off for the CSP) */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ------------------------------------------------------------------ cards, sections */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.h2 { font-size: 15px; font-weight: 650; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head .note-inline { font-size: 13px; color: var(--text-2); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px 5px; }
.card-head a { font-size: 13px; }
/* standalone text links, not inside a sentence ("Ver todo", "Abrir ficha", a "Detalle" summary):
   at least 24 px tall to tap, 44 px on phones (below); links in running text keep the line */
.card-head > a, .map-panel a:not(.btn), .link-tap { display: inline-flex; align-items: center; min-height: 24px; }
summary { min-height: 24px; padding-block: 2px; cursor: pointer; }

/* pending badge: what is yours to do */
.pend {
  min-width: 28px; height: 24px; padding: 0 8px; border-radius: 12px; flex: 0 0 auto;
  background: var(--olive); color: var(--on-olive); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.pend-sm { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; }

/* waiting for you */
.wait { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line); }
.wait:first-child { border-top: 0; }
.wait-text { flex: 1 1 auto; min-width: 0; }
.wait-title { font-weight: 600; }
.wait-meta { font-size: 13px; color: var(--text-2); }
.wait-list { display: flex; flex-direction: column; }

/* module cards (home) */
.mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mod {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; min-height: 96px;
  text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  transition: border-color .12s, box-shadow .12s;
}
.mod:hover { border-color: var(--navy); box-shadow: var(--shadow); color: inherit; }
.ico {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
  background: var(--olive-wash); color: var(--olive-ink);
  display: flex; align-items: center; justify-content: center;
}
.ico svg.i { width: 22px; height: 22px; flex-basis: 22px; }
.mod-text { flex: 1 1 auto; min-width: 0; }
.mod-name { display: block; font-size: 16px; font-weight: 650; }
.mod-role { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 8px; }
.mod-info { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.mod .go { color: var(--text-2); }

/* planned modules (admins only) */
.planned { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pl {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 44px;
  border: 1px dashed var(--line-2); border-radius: var(--radius-l); color: var(--text-2);
  text-decoration: none; font-size: 13.5px;
}
.pl:hover { color: var(--text); border-color: var(--navy); }

/* Fernando's ecosystem picture */
.hero { margin: 10px auto 0; max-width: 820px; width: 100%; }
.hero-frame { background: var(--hero); border-radius: 18px; padding: 12px; border: 1px solid var(--line); }
.hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); }
.hero figcaption { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--text-2); }

/* ------------------------------------------------------------------ module page */
.stats { display: flex; gap: 36px; flex-wrap: wrap; margin: 0; }
.stat { margin: 0; display: flex; flex-direction: column-reverse; }
.stat dd { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.3px; line-height: 1.15; }
.stat dt { font-size: 13px; color: var(--text-2); }
.stats-inline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; }
.stats-inline div { display: flex; gap: 4px; font-size: 13px; color: var(--text-2); align-items: baseline; }
.stats-inline dd { margin: 0; order: -1; color: var(--text); font-weight: 650; font-size: 14px; }
.stats-inline dt { margin: 0; }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.mode {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; min-height: 210px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--olive);
  border-radius: var(--radius-xl); text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.mode:hover { border-color: var(--navy); border-top-color: var(--olive); box-shadow: var(--shadow); color: inherit; }
.mode-title { font-size: 18px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.mode-text { color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
.chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--sunken); color: var(--text-2); }

/* activity feed */
.feed-section { max-width: 760px; }
.feed-section .h2 { margin-bottom: 6px; }
.feed { margin: 0; padding: 0; list-style: none; }
.feed li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
/* a long file name without spaces wraps anywhere instead of running under "Deshacer" (U4-5) */
.feed li > .grow { overflow-wrap: anywhere; }
.feed li > .btn { flex: none; }
.feed li:first-child { border-top: 0; }
.who {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--sunken);
  color: var(--text-2); font-size: 11px; font-weight: 650; display: flex; align-items: center; justify-content: center;
}
.feed-when { font-size: 12.5px; color: var(--text-2); }

/* ------------------------------------------------------------------ mode switch, tabs, subtabs */
.modenav { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.seg {
  display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 11px;
}
.seg a {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 8px;
  text-decoration: none; color: var(--text-2); font-weight: 550; font-size: 13.5px; white-space: nowrap;
}
.seg a:hover { color: var(--text); }
.seg a[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: 650; box-shadow: var(--shadow-seg); }

.tabs-bar { display: flex; align-items: flex-end; gap: 8px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs-bar > nav { min-width: 0; max-width: 100%; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.tabs a {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 14px; margin-bottom: -1px;
  text-decoration: none; color: var(--text-2); font-weight: 550; font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); font-weight: 650; border-bottom-color: var(--tab-on); }
.tabs-aside { margin-left: auto; display: flex; align-items: center; gap: 18px; padding-bottom: 8px; flex-wrap: wrap; }

.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.subtabs a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px;
  text-decoration: none; color: var(--text-2); font-size: 13px; font-weight: 550; white-space: nowrap;
}
.subtabs a:hover { color: var(--text); background: var(--sunken); }
.subtabs a[aria-current="page"] { background: var(--navy-wash); color: var(--navy); font-weight: 650; }

/* Rows that scroll sideways when they do not fit ([data-ufis-scroller]: breadcrumbs, mode
   switch, tabs and subtabs on a phone). ufis.js sets data-ufis-fade to the side(s) where more
   is hidden; the edge fades out as the cue. Only the mask's alpha counts, so currentColor
   stands for "opaque". While focus is inside, nothing is faded. */
[data-ufis-fade="end"] {
  -webkit-mask-image: linear-gradient(to left, transparent, currentColor 36px);
  mask-image: linear-gradient(to left, transparent, currentColor 36px);
}
[data-ufis-fade="start"] {
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 36px);
  mask-image: linear-gradient(to right, transparent, currentColor 36px);
}
[data-ufis-fade="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 36px, currentColor calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, currentColor 36px, currentColor calc(100% - 36px), transparent);
}
[data-ufis-fade]:focus-within { -webkit-mask-image: none; mask-image: none; }

/* ------------------------------------------------------------------ page intro, filters */
.intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.intro-text { color: var(--text-2); max-width: 70ch; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.search-input {
  display: flex; align-items: center; gap: 8px; height: var(--control); padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--text-2);
}
.filters .search-input { flex: 1 1 240px; max-width: 320px; }
.search-input:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search-input input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); padding: 0; }
.search-input input:focus { outline: none; }
.search-input input::placeholder { color: var(--text-2); opacity: 1; }
/* a chip is never wider than its row: a long "Filtro: valor" ends in "…" (the full text stays
   the button's name and its title); the chevron sits in the right padding */
.filters .menu { min-width: 0; max-width: 100%; }
.chip-filter {
  position: relative; display: inline-block; max-width: 100%; height: 34px; padding: 0 32px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px;
  line-height: 32px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-filter:hover { border-color: var(--line-2); }
.chip-filter.is-set { border-color: var(--navy); background: var(--navy-wash); }
.chip-filter .i { position: absolute; right: 11px; top: 50%; margin-top: -8px; color: var(--text-2); }
.count { margin-left: auto; font-size: 13px; color: var(--text-2); }

/* ------------------------------------------------------------------ charts (components/charts.html) */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.chart {
  margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
}
.chart-wide { grid-column: 1 / -1; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chart-title { font-size: 14.5px; font-weight: 650; }
.chart-note { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-2); margin-top: 2px; }
.chart-canvas { width: 100%; height: 280px; }
.chart-canvas.h-s { height: 200px; }
.chart-canvas.h-l { height: 380px; }
.chart-canvas.h-xl { height: 480px; }
.chart-table > summary {
  width: max-content; min-height: 40px; display: flex; align-items: center; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--link);
}
.chart-table > summary:hover { color: var(--link-hover); }
.chart-table .table-box { max-height: 340px; overflow: auto; }
.chart-empty { color: var(--text-2); font-size: 13px; padding: 28px 0; text-align: center; }
.summary-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.summary-filters .field { margin: 0; min-width: 150px; }

/* ------------------------------------------------------------------ data table */
.table-box { border: 1px solid var(--line); border-radius: var(--radius-l); overflow-x: auto; background: var(--surface); }
.table-box:focus-visible { outline-offset: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl caption { text-align: left; padding: 12px 14px 0; font-weight: 650; }
.tbl th {
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--text-2); padding: 10px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface);
  position: sticky; top: 0; z-index: 1;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--paper); }
/* the record just saved (U10): a selected wash and a bar at the start; text stays ≥ 4.5:1 */
.tbl tbody tr.is-new td, .tbl tbody tr.is-new:hover td { background: var(--selected-wash); }
.tbl tbody tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--selected); }
.tbl tbody tr.is-new:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tbl .num { text-align: right; }
.tbl .wrap-cell { white-space: normal; min-width: 220px; }
.tbl tfoot td { font-weight: 650; border-top: 1px solid var(--line-2); border-bottom: 0; background: var(--sunken); }
.tbl .code { font-size: 12px; font-weight: 650; color: var(--text-2); }
.tbl a.row-link { color: inherit; text-decoration: none; font-weight: 550; }
.tbl a.row-link:hover { text-decoration: underline; }
.sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; font-weight: 600; white-space: nowrap; border-radius: 4px;
}
.sort:hover { color: var(--text); }
.sort .i { color: var(--text-2); opacity: 0; transition: opacity .12s; }
.sort:hover .i, .sort:focus-visible .i { opacity: .7; }
th[aria-sort] .sort { color: var(--text); }
th[aria-sort] .sort .i { opacity: 1; color: var(--text); }
.tbl .num .sort { flex-direction: row-reverse; }
.empty-row td { padding: 28px 14px; text-align: center; color: var(--text-2); white-space: normal; }
.table-region { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.pager-btns { display: flex; gap: 6px; }

/* status tags (workflow) */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-s);
  font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; line-height: 1;
}
.tag-loaded { background: var(--sunken); color: var(--text-2); border-color: var(--line); }
.tag-validated { background: var(--ok-wash); color: var(--ok); }
.tag-booked { background: var(--navy-wash); color: var(--navy); }
.tag-returned { background: var(--danger-wash); color: var(--danger); }
.tag-unknown { background: var(--surface); color: var(--text-2); border-color: var(--line-2); }
.tag-ext { height: 18px; padding: 0 6px; margin-left: 6px; font-size: 11.5px; border-radius: 5px; background: var(--warn-wash); color: var(--warn); }

/* role chips (access) */
.role { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-s); font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; line-height: 1; }
.r-read { background: var(--sunken); color: var(--text-2); border-color: var(--line); }
.r-load { background: var(--navy-wash); color: var(--navy); }
.r-review { background: var(--olive-wash); color: var(--olive-ink); }
.r-control { background: var(--surface); color: var(--navy); border-color: var(--navy); }
.r-admin { background: var(--admin); color: var(--on-admin); }
.r-unknown { background: var(--surface); color: var(--text-2); border-color: var(--line-2); }
.role-legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------------ forms */
.form { display: flex; flex-direction: column; }
.fs { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; border-top: 1px solid var(--line); }
.gx-box > .fs:first-child, .form > .fs:first-child { border-top: 0; }
.fs-title { font-size: 13px; font-weight: 650; color: var(--text-2); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.label, .field > label, .field > legend { font-size: 13px; font-weight: 600; padding: 0; }
.req { color: var(--danger); margin-left: 2px; }
.hint { font-size: 12.5px; color: var(--text-2); }
.msg { font-size: 12.5px; color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.msg .i { margin-top: 1px; }
.in {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--paper); color: var(--text);
}
.in::placeholder { color: var(--text-2); opacity: 1; }
.in:hover { border-color: var(--text-2); }
.in:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
textarea.in { height: auto; min-height: 96px; padding: 9px 12px; resize: vertical; line-height: 1.45; }
select.in {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.in[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); }
.in:disabled { opacity: .6; cursor: not-allowed; }
.in-unit { display: flex; align-items: center; }
.in-unit .in { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.unit {
  height: 38px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line-2); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--sunken); color: var(--text-2); font-size: 13px;
}
.in.num { text-align: right; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* checkbox row */
.chk { display: flex; align-items: center; gap: 10px; font-size: 13.5px; min-height: 28px; cursor: pointer; }
.chk input { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; accent-color: var(--primary); }
.chk .n { margin-left: auto; color: var(--text-2); font-size: 12px; }
.chk-block { align-items: flex-start; }
.chk-block input { margin-top: 2px; }

/* radio option cards */
.opts { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; border: 0; min-width: 0; }
.opts legend { font-size: 13px; font-weight: 650; color: var(--text-2); padding: 0; margin-bottom: 9px; }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.opt:hover { border-color: var(--line-2); }
.opt input { margin: 3px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.opt-title { display: block; font-weight: 650; }
.opt-hint { display: block; font-size: 12.5px; color: var(--text-2); }
.opt:has(input:checked) { border-color: var(--selected); background: var(--selected-wash); }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt input:focus-visible { outline: none; }

/* segmented pick (radios that look like a segmented control) */
.pick { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.pick label { flex: 1 1 0; position: relative; display: flex; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.pick span {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 10px;
  background: var(--paper); color: var(--text); cursor: pointer; white-space: nowrap;
}
.pick label + label span { border-left: 1px solid var(--line-2); }
.pick input:checked + span { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.pick.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); }

/* switch: a real checkbox with role="switch" */
.sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sw-text { min-width: 0; }
.sw-text .label { display: block; }
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative; flex: 0 0 42px;
  width: 42px; height: 24px; border-radius: 12px; background: var(--line-2); cursor: pointer;
  transition: background-color .15s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); transition: transform .15s var(--ease);
}
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(18px); background: var(--on-primary); }

.note { font-size: 12.5px; color: var(--text-2); background: var(--sunken); border-radius: var(--radius); padding: 10px 12px; }

/* ------------------------------------------------------------------ drawer and dialogs */
dialog { color: var(--text); }
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: 420px; max-width: 100%; height: 100%; max-height: 100%;
  padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-drawer); flex-direction: column; overflow: hidden;
}
.drawer[open] { display: flex; animation: ufis-drawer-in .22s var(--ease); }
.drawer-wide { width: 560px; }
.drawer::backdrop, .dialog::backdrop { background: var(--scrim); }
.drawer-form { display: contents; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; flex: 0 0 auto; }
.drawer-title { font-size: 17px; font-weight: 650; }
.drawer-sub { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.drawer-body:focus-visible { outline-offset: -3px; }
.drawer-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.drawer-foot .start { margin-right: auto; }

.dialog {
  width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--surface); box-shadow: var(--shadow-drawer);
}
.dialog[open] { animation: ufis-fade-in .15s ease-out; }
.dialog-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 8px; }
.dialog-title { font-size: 17px; font-weight: 650; }
.dialog-text { color: var(--text-2); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 16px 22px 20px; }
.dialog-foot form { margin: 0; }

@keyframes ufis-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ufis-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* search dialog */
.search-dialog { width: min(620px, calc(100vw - 32px)); margin-top: 12vh; }
.search-box { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.search-box input { flex: 1 1 auto; min-width: 0; height: 32px; border: 0; background: none; font-size: 16px; color: var(--text); }
.search-box input:focus { outline: none; }
/* the dialog's own close button ("Cerrar la búsqueda") is its only "×": no clear button of the
   browser beside it, on a touch screen or with a mouse (QA round 5, U5-3; one rule each: a
   browser drops a whole list with a part it does not know) */
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-box input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-box:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.search-results { max-height: 50vh; overflow-y: auto; padding: 6px; margin: 0; }
.search-list { margin: 0; padding: 0; list-style: none; }
.search-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; min-height: 40px; }
.search-list a:hover, .search-list a:focus-visible { background: var(--sunken); }
.search-list a:focus-visible { outline-offset: -2px; }
.search-list .kind { margin-left: auto; font-size: 12px; color: var(--text-2); }
.search-hint { padding: 10px 18px 14px; font-size: 12.5px; color: var(--text-2); display: flex; gap: 12px; flex-wrap: wrap; }
/* touch screens have no Esc or arrow keys: a close button instead of the key hints (U4-10, in
   the "pointer: coarse" rules below) */
.search-close { display: none; margin: -6px -10px -6px 0; border-color: transparent; background: none; }

/* ------------------------------------------------------------------ toasts */
.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--info);
  border-radius: var(--radius-l); box-shadow: var(--shadow-float); animation: ufis-fade-in .18s ease-out;
}
.toast-text { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.toast .i { margin-top: 1px; }
.toast-ok { border-left-color: var(--ok); }
.toast-ok > .i { color: var(--ok); }
.toast-warn { border-left-color: var(--warn); }
.toast-warn > .i { color: var(--warn); }
.toast-danger { border-left-color: var(--danger); }
.toast-danger > .i { color: var(--danger); }
.toast-info > .i { color: var(--info); }
.toast .iconbtn { width: 28px; height: 28px; flex-basis: 28px; border: 0; background: none; margin: -4px -4px -4px 0; }
.toast .iconbtn:hover { background: var(--sunken); }

/* ------------------------------------------------------------------ notices */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-l); border: 1px solid transparent; }
.notice > .i { margin-top: 1px; }
.notice-body { flex: 1 1 auto; min-width: 0; }
.notice-title { font-weight: 650; }
.notice-info { background: var(--info-wash); color: var(--info); }
.notice-ok { background: var(--ok-wash); color: var(--ok); }
.notice-warn { background: var(--warn-wash); color: var(--warn); }
.notice-danger { background: var(--danger-wash); color: var(--danger); }
.notice a { color: inherit; font-weight: 600; }
.notice:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.error-list { margin: 4px 0 0; padding-left: 18px; }

/* ------------------------------------------------------------------ empty and loading */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; }
.empty .ico { margin-bottom: 4px; }
.empty-title { font-size: 15px; font-weight: 650; }
.empty-text { color: var(--text-2); max-width: 48ch; }
.empty .actions { margin-top: 8px; justify-content: center; }

.skeleton { display: flex; flex-direction: column; gap: 10px; }
.sk { height: 12px; border-radius: 6px; background: var(--skeleton); background-image: linear-gradient(90deg, var(--skeleton) 0, var(--skeleton-shine) 50%, var(--skeleton) 100%); background-size: 200% 100%; animation: ufis-shine 1.4s linear infinite; }
.sk-title { height: 18px; width: 40%; }
.sk-w90 { width: 90%; }
.sk-w75 { width: 75%; }
.sk-w60 { width: 60%; }
.sk-row { height: 38px; border-radius: 8px; }
.sk-card { height: 96px; border-radius: var(--radius-xl); }
@keyframes ufis-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ------------------------------------------------------------------ map */
.map { position: relative; min-height: 700px; margin-top: 16px; background: var(--map); overflow: hidden; border-top: 1px solid var(--line); }
.map-canvas { position: absolute; inset: 0; }
/* MapLibre (ufis-map.js) marks its container position: relative; the canvas keeps the layout */
.map-canvas.maplibregl-map { position: absolute; }
.map-canvas > svg { width: 100%; height: 100%; display: block; }
.map-panel {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px;
  max-width: calc(100% - 32px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-float);
}
.map-panel-title { font-size: 14px; font-weight: 650; }
.map-panel.tl { top: 16px; left: 16px; width: 248px; }
.map-panel.tr { top: 16px; right: 16px; width: 280px; gap: 10px; }
.map-panel.bc { left: 50%; bottom: 20px; transform: translateX(-30%); width: 320px; padding: 16px 18px; }
.map-panel .sub { font-size: 13px; color: var(--text-2); }
.map-panel .drawer-title { font-size: 17px; }
.map-group-label { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.zoom {
  position: absolute; z-index: 2; right: 16px; bottom: 20px; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-float);
}
.zoom button { width: 36px; height: 36px; border: 0; background: none; color: var(--text); display: flex; align-items: center; justify-content: center; }
.zoom button:hover { background: var(--sunken); }
.zoom button + button { border-top: 1px solid var(--line); }
.zoom button:focus-visible { outline-offset: -3px; }
.select-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--control); padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--text);
}

/* legend rows (one per category; a button filters to it) */
.legend { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lg {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; color: inherit; font-size: 13px; text-align: left;
}
button.lg:hover { background: var(--sunken); }
.lg[aria-pressed="true"] { background: var(--selected-wash); font-weight: 600; }
.lg .n { margin-left: auto; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.swatch { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 4px; background: var(--sunken); border: 1px solid var(--line-2); }
.swatch-line { height: 4px; border-radius: 2px; border: 0; }
.sw-1 { background: var(--cat-1); border-color: var(--cat-1); }
.sw-2 { background: var(--cat-2); border-color: var(--cat-2); }
.sw-3 { background: var(--cat-3); border-color: var(--cat-3); }
.sw-4 { background: var(--cat-4); border-color: var(--cat-4); }
.sw-5 { background: var(--cat-5); border-color: var(--cat-5); }
.sw-6 { background: var(--cat-6); border-color: var(--cat-6); }
.sw-ok { background: var(--ok); border-color: var(--ok); }
.sw-warn { background: var(--warn); border-color: var(--warn); }
.sw-danger { background: var(--danger); border-color: var(--danger); }

/* key/value list (block card, record summaries) */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; text-align: right; font-weight: 550; }

/* sample map drawing (gallery): fills come from the categorical tokens */
.mp-road { fill: none; stroke: var(--map-line); stroke-width: 2; }
.mp-block { stroke: var(--map-edge); stroke-width: 1.5; stroke-linejoin: round; fill-opacity: .9; }
.mp-c1 { fill: var(--cat-1); }
.mp-c2 { fill: var(--cat-2); }
.mp-c3 { fill: var(--cat-3); }
.mp-c4 { fill: var(--cat-4); }
.mp-estancia { fill: none; stroke: var(--olive-ink); stroke-width: 2.5; stroke-dasharray: 8 6; }
.mp-sel { fill: none; stroke: var(--olive); stroke-width: 4; }
.mp-label { fill: var(--map-label); font-family: var(--font); font-size: 13px; font-weight: 600; text-anchor: middle; }
.mp-name { fill: var(--olive-ink); font-family: var(--font); font-size: 15px; font-weight: 700; }

/* ------------------------------------------------------------------ access matrix */
.mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.mx th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--text-2); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mx th.who-col { width: 32%; }
.mx td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mx tbody th { font-size: inherit; font-weight: inherit; color: inherit; white-space: normal; vertical-align: top; padding: 10px 14px; }
.mx tbody tr:last-child td, .mx tbody tr:last-child th { border-bottom: 0; }
.mx tr.grp th { background: var(--sunken); font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 7px 14px; }
.cell {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 6px 8px; margin: -6px -8px;
  border-radius: 8px; border: 1px solid transparent; background: none; color: inherit; text-align: left;
}
button.cell:hover { border-color: var(--line-2); }
.cell[aria-pressed="true"], .cell.is-selected { border-color: var(--selected); box-shadow: 0 0 0 3px var(--selected-wash); }
.scope { font-size: 12px; color: var(--text-2); }
.none { color: var(--text-2); font-size: 13px; }
.person { display: flex; align-items: center; gap: 10px; }
.person-name { font-weight: 600; }
.pic {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--sunken); color: var(--text-2);
  font-size: 11px; font-weight: 650; display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------ gallery (dev only) */
.gx-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.gx-section { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.gx-section > h2 { font-size: 18px; font-weight: 650; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.gx-item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gx-item > h3 { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.gx-wide { grid-column: 1 / -1; }
.gx-start { align-items: flex-start; }
.gx-box { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 12px; }
.gx-box-flush { padding: 0; overflow: hidden; }
.gx-map { position: relative; min-height: 520px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); }
.gx-toasts { position: static; width: 100%; pointer-events: auto; }
.menu-pop.gx-menu { position: static; box-shadow: none; max-height: none; margin-top: 8px; }
.menu:has(.gx-menu) { flex-direction: column; align-items: flex-start; }
.gx-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gx-token { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.gx-chipset { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tk { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; border: 1px solid var(--line-2); }
.tk-paper { background: var(--paper); }
.tk-surface { background: var(--surface); }
.tk-sunken { background: var(--sunken); }
.tk-line { background: var(--line); }
.tk-text { background: var(--text); }
.tk-text-2 { background: var(--text-2); }
.tk-navy { background: var(--navy); }
.tk-olive { background: var(--olive); }
.tk-olive-ink { background: var(--olive-ink); }
.tk-olive-wash { background: var(--olive-wash); }
.tk-ok { background: var(--ok); }
.tk-warn { background: var(--warn); }
.tk-danger { background: var(--danger); }
.tk-primary { background: var(--primary); }

/* ------------------------------------------------------------------ phones and touch */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px; }
  .page { gap: 22px; padding-top: 18px; padding-bottom: 32px; }
  .page-tight { gap: 14px; }

  .hdr { gap: 10px 12px; padding: 16px 0 12px; }
  .logo { width: 44px; height: 44px; flex-basis: 44px; font-size: 12px; letter-spacing: .5px; }
  .titles { flex: 1 1 0; }
  .titles h1 { font-size: 20px; }
  .acts { gap: 6px; flex-wrap: nowrap; }
  .ctl { height: var(--touch); min-width: var(--touch); padding: 0 11px; justify-content: center; }
  .ctl .kbd, .ctl .chev { display: none; }
  /* the label stays the button's accessible name on phones, only visually hidden */
  .ctl .ctl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ctl .only-phone { display: inline-flex; }
  .ctl.has-code { padding: 0 8px; }
  .ctl .dot { position: absolute; margin: -14px -16px 0 0; }
  .ctl.has-code .dot { top: 4px; right: 4px; margin: 0; }
  /* breadcrumbs: a row of their own under logo, title and buttons, on one line that scrolls
     sideways when it is too long (never wraps); links tall enough to tap */
  .hdr:has(.titles > nav) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; row-gap: 0; }
  .titles:has(> nav) { display: contents; }
  .titles > nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .crumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 -10px; }
  .crumbs::-webkit-scrollbar { display: none; }
  .crumbs li { flex: 0 0 auto; }
  .crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 40px; }
  [data-ufis-scroller] a:focus-visible { outline-offset: -3px; }
  .ctl { position: relative; }
  .avatar { width: var(--touch); height: var(--touch); flex-basis: var(--touch); font-size: 14px; }
  .menu-pop { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; max-width: none; max-height: 75vh; }
  .menu-pop.gx-menu { position: static; max-width: 100%; }
  .menu-item { min-height: var(--touch); }

  .card-head > a, .map-panel a:not(.btn), .link-tap { min-height: var(--touch); }
  summary { min-height: var(--touch); padding-block: 12px; }
  /* 16 px in every text field: iOS zooms into smaller ones */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }

  .btn, .btn-sm { height: var(--touch); }
  .iconbtn { width: var(--touch); height: var(--touch); flex-basis: var(--touch); }
  .chip-filter { height: 40px; line-height: 38px; }
  .search-input { height: var(--touch); }
  .filters .search-input { flex-basis: 100%; max-width: none; }
  .count { margin-left: 0; width: 100%; }
  .in, .unit { height: var(--touch); font-size: 16px; }
  .pick span { height: var(--touch); }
  .chk { min-height: 40px; }
  .opt { min-height: var(--touch); }

  .wait { flex-wrap: wrap; padding: 13px 16px; }
  .wait-text { flex: 1 1 200px; }
  .wait .btn { margin-left: 42px; }
  .mods { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mod { padding: 16px; min-height: 76px; gap: 14px; border-radius: 16px; }
  .ico { width: 44px; height: 44px; flex-basis: 44px; }
  .planned { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .stats { gap: 16px 28px; }
  .stat dd { font-size: 20px; }
  .mode { min-height: 0; padding: 18px; }

  .modenav { gap: 12px; padding-top: 14px; }
  .seg { align-self: stretch; gap: 0; }
  .seg { scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg a { height: 40px; flex: 1 0 auto; justify-content: center; padding: 0 10px; gap: 6px; font-size: 13px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; overscroll-behavior-x: contain; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs-bar { flex-wrap: wrap; }
  .tabs-bar > nav { width: 100%; }
  .tabs li, .subtabs li { flex: 0 0 auto; }
  .tabs a { min-height: var(--touch); }
  .tabs-aside { margin-left: 0; padding: 8px 0 10px; width: 100%; }
  .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; overscroll-behavior-x: contain; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs a { height: 40px; }

  .tbl th .sort { min-height: 40px; }
  .cell { min-height: 40px; justify-content: center; }
  .pager { justify-content: center; }
  .pager-btns { width: 100%; }
  .pager-btns .btn { flex: 1 1 0; }

  .drawer, .drawer-wide { width: 100%; border-left: 0; }
  .drawer[open] { animation-name: ufis-sheet-in; }
  .fs { padding: 16px; }
  .drawer-head, .drawer-foot { padding-left: 16px; padding-right: 16px; }
  .drawer-foot .btn { flex: 1 1 auto; }
  .two { grid-template-columns: minmax(0, 1fr); }

  .toasts { left: 16px; right: 16px; bottom: 16px; width: auto; }

  .map { min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
  .map-canvas { position: relative; height: 62vh; min-height: 320px; background: var(--map); }
  .map-canvas.maplibregl-map { position: relative; }
  .map-panel, .map-panel.tl, .map-panel.tr, .map-panel.bc {
    position: static; transform: none; width: auto; max-width: none; margin: 12px 16px 0; box-shadow: none;
  }
  .zoom { top: 12px; bottom: auto; right: 12px; }
  .zoom button { width: var(--touch); height: var(--touch); }
  .lg { min-height: 40px; }
  .gx-map { min-height: 0; }
  /* a map panel opened from its button as a sheet over the map (ufisMap.sheet in ufis-map.js:
     the Áreas filters and legend, the LiDAR layers and cell; QA round 2, U2-10). `:not([hidden])`
     keeps it above a module's own panel rules (".areas-map .map-panel.tl"). */
  .map .map-panel.is-sheet:not([hidden]) {
    position: fixed; z-index: 41; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none;
    max-height: 55vh; margin: 0; overflow-y: auto; transform: none; border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-float);
    padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
  }
  /* while a sheet is open the page can scroll the map up to the top of the window */
  .map:has(> .map-panel.is-sheet:not([hidden])) { padding-bottom: 55vh; }
  .map .map-panel.is-sheet > h2 { display: flex; align-items: center; min-height: 40px; padding-right: 52px; }
  .map .map-sheet-close { position: absolute; top: 14px; right: 12px; width: var(--touch); height: var(--touch); }
  .map .map-sheet-foot { position: sticky; bottom: 0; padding-top: 8px; background: var(--surface); }
  .map .map-sheet-foot .btn { width: 100%; height: var(--touch); }
}
@keyframes ufis-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (pointer: coarse) {
  .btn, .ctl { min-height: 40px; }
  .menu-item { min-height: var(--touch); }
  .seg a, button.cell { min-height: 40px; }
  /* the search dialog: a close button instead of the key hints (U4-10) */
  .search-dialog .search-keys { display: none; }
  .search-dialog .search-close { display: inline-flex; width: var(--touch); height: var(--touch); flex-basis: var(--touch); }
}

/* ------------------------------------------------------------------ motion and print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .sk { animation: none; background-image: none; }
}
@media print {
  .acts, .modenav .seg, .toasts, .skip, .map-panel, .zoom, .pager-btns { display: none !important; }
  .hdr { border-bottom-color: var(--line-2); }
  body { background: var(--surface); }
}