:root {
  --ivory: #f4f1ea; --white: #fff; --navy: #0c2340; --navy-mid: #173b5e;
  --gold: #c9a227; --gold-on-light: #7a5f0e;
  --ink: #0c2340; --ink-body: #3c4a5c; --ink-muted: #5a646e;
  --pos: #2f7d54; --neg: #a3372f; --neu: #7c8794;
  --line: rgba(12,35,64,.12); --line-strong: rgba(12,35,64,.22);
  --font-serif: 'Source Serif 4','Source Serif 4 Variable',Georgia,serif;
  --font-sans: 'Inter','Inter Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow: 0 14px 34px rgba(12,35,64,.10);
}
* { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--ivory); color: var(--ink-body); line-height: 1.5; }
a { color: var(--navy-mid); text-decoration: none; }
a:hover { color: var(--navy); }
h1,h2,h3 { font-family: var(--font-serif); color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

/* ---- Top nav ---- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; }
.topbar__in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 0 24px; height: 62px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand b { font-family: var(--font-serif); font-size: 21px; color: #fff; }
.brand span { font-size: 9px; letter-spacing: .22em; color: #b7cbdc; text-transform: uppercase; }
.topnav { display: flex; gap: 22px; margin-left: 10px; }
.topnav a { color: #cdd9e6; font-size: 14px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.topnav a:hover { color: #fff; }
.topnav a.active { color: #fff; border-bottom-color: var(--gold); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topbar__user { color: #b7cbdc; font-size: 13px; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---- Layout ---- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 24px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 30px; margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--ink-muted); font-size: 14px; }
.eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-on-light); font-weight: 600; margin-bottom: 8px; }

/* ---- Period switcher ---- */
.periods { display: inline-flex; border: 1px solid var(--line-strong); background: var(--white); }
.periods a { padding: 8px 15px; font-size: 13px; color: var(--ink-body); border-right: 1px solid var(--line); }
.periods a:last-child { border-right: 0; }
.periods a.active { background: var(--navy); color: #fff; }

/* ---- KPI tiles ---- */
.kpis { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 22px; }
.kpi { background: var(--white); padding: 18px 20px; }
.kpi__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.kpi__value { font-family: var(--font-serif); font-size: 30px; color: var(--navy); margin-top: 6px; font-weight: 600; }
.kpi__sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.kpi--alert .kpi__value { color: var(--neg); }

/* ---- Chart grid ---- */
.grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.card { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 20px 22px; }
.card h3 { font-size: 17px; margin: 0 0 2px; }
.card .hint { font-size: 12px; color: var(--ink-muted); margin: 0 0 14px; }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-5 { grid-column: span 5; }
.col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 340px; }

/* ---- Report cards / findings ---- */
.report-strip { background: var(--navy); color: var(--on-navy,#dce6ef); padding: 22px; margin-bottom: 22px; }
.report-strip h3 { color: #fff; }
.report-strip .resumen { color: #cdd9e6; font-size: 14.5px; max-width: 78ch; }
.findings { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; margin-top: 16px; }
.finding { border-left: 3px solid var(--gold); padding: 2px 0 2px 14px; }
.finding .tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.finding .txt { font-size: 13px; color: #cdd9e6; margin-top: 4px; }
.narr { margin: 14px 0 0; padding: 0; list-style: none; }
.narr li { font-size: 13.5px; color: #cdd9e6; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.12); }

.rep-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 16px; }
.rep { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 20px; }
.rep .kind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-on-light); font-weight: 600; }
.rep .date { font-family: var(--font-serif); font-size: 20px; color: var(--navy); margin: 6px 0 14px; }
.rep .actions { display: flex; gap: 10px; }
.btn { display: inline-block; font-size: 13px; padding: 9px 16px; font-weight: 500; cursor: pointer; border: 0; font-family: inherit; }
.btn--primary { background: var(--navy); color: #fff; } .btn--primary:hover { background: var(--navy-mid); color:#fff; }
.btn--line { background: var(--white); color: var(--navy); border: 1px solid var(--line-strong); }
.btn--line:hover { background: var(--ivory); }

.viewer { width: 100%; height: 78vh; border: 1px solid var(--line-strong); background: var(--white); }

/* ---- Auth pages ---- */
.auth { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(1200px 600px at 50% -10%, #14304f 0%, var(--navy) 60%); padding: 24px; }
.auth__card { width: 100%; max-width: 400px; background: var(--white); box-shadow: 0 30px 70px rgba(0,0,0,.3); padding: 38px 34px; }
.auth__brand { text-align: center; margin-bottom: 24px; }
.auth__brand b { font-family: var(--font-serif); font-size: 26px; color: var(--navy); }
.auth__brand span { display: block; font-size: 9.5px; letter-spacing: .24em; color: var(--ink-muted); text-transform: uppercase; margin-top: 3px; }
.auth h1 { font-size: 21px; text-align: center; margin: 0 0 20px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.field input { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); font-size: 15px; font-family: inherit; background: #fff; }
.field input:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
.btn-block { width: 100%; background: var(--navy); color: #fff; border: 0; padding: 13px; font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-block:hover { background: var(--navy-mid); }
.auth__foot { text-align: center; margin-top: 16px; font-size: 13px; }
.alert { background: #fbeceb; border: 1px solid #e6b3ae; color: var(--neg); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }
/* `overflow-wrap: anywhere` and NOT `word-break: break-all`: notices carry
   Spanish prose, and break-all split it at any character ("verifi/cación",
   "Ingrése/lo") with no hyphen. `anywhere` breaks only a token that genuinely
   does not fit, so long email addresses and codes still stay inside the box. */
.notice { background: #eef3f8; border: 1px solid #cdddec; color: var(--navy); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; overflow-wrap: anywhere; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); margin-top: 10px; }
.legend i { width: 11px; height: 11px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2,1fr); }
  .col-4,.col-6,.col-7,.col-5,.col-8 { grid-column: span 12; }
  .topnav { display: none; }
}

/* ================= Auth + account module (v0.2) ================= */
.auth__hint { font-size: 13px; color: var(--ink-muted); margin: -6px 0 16px; }
.auth__or { display: flex; align-items: center; text-align: center; color: var(--ink-muted); font-size: 12px; margin: 16px 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth__or span { padding: 0 12px; }
.auth__details { margin-top: 14px; font-size: 13px; }
.auth__details summary { cursor: pointer; color: var(--navy-mid); }
.btn-ghost-block { width: 100%; background: var(--white); color: var(--navy); border: 1px solid var(--line-strong); padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-ghost-block:hover { background: var(--ivory); }
.field__hint { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 6px; text-transform: none; letter-spacing: 0; }
.field select { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); font-size: 15px; font-family: inherit; background: #fff; }
/* `.field input` and `.field select` both force background: #fff, which wipes
   out the UA's disabled appearance — so a server-disabled field (the "Correo"
   on admin-user-edit, and "Rol"/"Estado" on your own account) looked perfectly
   editable and silently rejected input. Restate the state ourselves. */
.field input:disabled, .field select:disabled { background: #f1f3f8; color: var(--ink-muted); cursor: not-allowed; }

.wrap--narrow { max-width: 720px; }
.wrap .card { margin-bottom: 18px; }
.wrap .card h2 { font-size: 18px; margin: 0 0 10px; }
.btn--danger { background: #a3372f; color: #fff; } .btn--danger:hover { background: #872c25; color: #fff; }
.btn--sm { padding: 6px 11px; font-size: 12px; }
/* login.js and account.js disable these buttons at runtime (account.js leaves
   the passkey button disabled for good on a browser that cannot do WebAuthn),
   and every variant sets its own background, so nothing marked the state. */
.btn:disabled, .btn-block:disabled, .btn-ghost-block:disabled { opacity: .55; cursor: not-allowed; }
.btn + .btn, .btn + form, form + .btn, form + form { margin-left: 8px; }
/* The adjacency margin above is the only gutter in flow layout (mfa-setup, the
   admin tables), but a flex row already spaces its children with `gap`, and
   `gap` spaces margin boxes — so the second .btn was getting 10 + 8 = 18px. */
.rep .actions > .btn, .form-actions > .btn { margin-left: 0; }

.badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: #e7ebf0; color: var(--ink-muted); }
.badge--ok { background: #e2f1e8; color: var(--pos); }
.badge--warn { background: #fbf1dc; color: #8a6d16; }

.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.kv td:first-child { color: var(--ink-muted); width: 130px; }
.kv tr:last-child td { border-bottom: 0; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 10px; border-bottom: 2px solid var(--line-strong); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

.grid-2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; align-items: start; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.qr-wrap { display: flex; justify-content: center; padding: 14px; background: #fff; }
.qr-wrap img { border: 1px solid var(--line); }
.secret { display: inline-block; background: #f1f3f8; padding: 6px 10px; border-radius: 5px; font-size: 15px; letter-spacing: 2px; word-break: break-all; }
.backup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.backup-grid code { background: #f1f3f8; padding: 10px; text-align: center; font-size: 15px; letter-spacing: 1px; border-radius: 5px; }
.cf-turnstile { margin: 8px 0 16px; }

/* ================= Media Monitor dashboard (docs/32 v1.2) ================= */
:root { --mm-navy:#0c2340; --mm-navy-2:#0a1c33; --mm-slate:#2b3f5c; --mm-gold:#c9a227;
  --mm-ivory:#f4f1ea; --mm-line:rgba(12,35,64,.12); --mm-tan:#cdbf9a; --mm-amber:#f5efdc; }
body { background: var(--mm-ivory); }

/* Top bar */
.mm-top { background: var(--mm-navy); color:#fff; }
.mm-top__in { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:26px; padding:0 26px; height:76px; }
.mm-brand { display:flex; align-items:center; gap:12px; }
.mm-brand__mark { display:inline-flex; flex-direction:column; gap:3px; }
.mm-brand__mark i { display:block; height:3px; border-radius:2px; background:var(--mm-gold); }
.mm-brand__mark i:nth-child(1){width:26px} .mm-brand__mark i:nth-child(2){width:18px;background:#8ea6c2} .mm-brand__mark i:nth-child(3){width:22px}
.mm-brand__name b { font-family:var(--font-serif); font-size:23px; color:#fff; }
.mm-brand__name span { font-size:10px; letter-spacing:.24em; color:#9db3cc; text-transform:uppercase; margin-left:8px; }
.mm-user { display:flex; align-items:center; gap:11px; padding-left:26px; border-left:1px solid rgba(255,255,255,.15); }
.mm-user__av { width:38px; height:38px; border-radius:50%; background:#20385a; color:#cdd9e6; display:grid; place-items:center; font-size:13px; font-weight:600; }
.mm-user__meta { display:flex; flex-direction:column; line-height:1.35; }
.mm-user__meta strong { font-size:14px; } .mm-user__meta span { font-size:11px; color:#9db3cc; }
.mm-clock { margin-left:auto; text-align:right; line-height:1.35; }
.mm-clock strong { display:block; font-size:13px; } .mm-clock span { font-size:11px; color:#9db3cc; font-variant-numeric:tabular-nums; }
.mm-top__actions { display:flex; align-items:center; gap:14px; padding-left:22px; border-left:1px solid rgba(255,255,255,.15); }
.mm-iconlink { background:none; border:0; color:#cdd9e6; font:inherit; font-size:12.5px; cursor:pointer; padding:0; }
.mm-iconlink:hover { color:#fff; }
.mm-top__actions form { margin:0; }

/* Filter bar */
.mm-filters { background:#fff; border-bottom:1px solid var(--mm-line); }
.mm-filters__in { max-width:1200px; margin:0 auto; padding:16px 26px; display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; }
.mm-filters__in--row2 { padding-top:0; padding-bottom:18px; align-items:center; }
.mm-fgroup { display:flex; flex-direction:column; gap:8px; }
.mm-fgroup--right { margin-left:auto; text-align:right; align-items:flex-end; }
.mm-flabel { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; }
.mm-chips { display:flex; gap:8px; flex-wrap:wrap; }
.mm-chip { border:1px solid var(--line-strong); background:#fff; color:var(--mm-navy); font:inherit; font-size:13px; padding:8px 14px; cursor:pointer; border-radius:2px; }
.mm-chip.is-on { background:var(--mm-navy); color:#fff; border-color:var(--mm-navy); }
.mm-chip--more { border-style:dashed; color:var(--ink-muted); }
.mm-select { border:1px solid var(--line-strong); background:#fff; font:inherit; font-size:14px; padding:9px 12px; min-width:260px; border-radius:2px; }
.mm-periods { display:inline-flex; border:1px solid var(--line-strong); border-radius:2px; overflow:hidden; }
.mm-period { padding:8px 15px; font-size:13px; color:var(--mm-navy); border-right:1px solid var(--mm-line); }
.mm-period:last-child{border-right:0} .mm-period.is-on{ background:var(--mm-navy); color:#fff; }
.mm-range { font-size:13px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }

/* Zone head + limit strip */
.mm-wrap { max-width:1200px; margin:0 auto; padding:24px 26px 60px; }
.mm-zonehead { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0 14px; border-bottom:1px solid var(--mm-line); flex-wrap:wrap; }
.mm-zonehead__l { display:flex; align-items:center; gap:12px; }
.mm-zonehead__l h2 { font-size:20px; margin:0; }
.mm-dot { width:9px; height:9px; border-radius:50%; background:#3f7d54; box-shadow:0 0 0 4px rgba(63,125,84,.15); }
.mm-badge { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--ink-muted); border:1px solid var(--line-strong); padding:4px 9px; border-radius:2px; }
.mm-zonehead__r { font-size:12.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.mm-limit { background:var(--mm-amber); border-left:3px solid var(--mm-gold); padding:14px 18px; margin:18px 0; font-size:13.5px; color:#5a4e2a; line-height:1.6; }
.mm-limit strong { color:#3d3212; }

/* Card grid */
.mm-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.mm-col6 { grid-column:span 6; } .mm-col12 { grid-column:span 12; }
@media (max-width:860px){ .mm-col6,.mm-col12{grid-column:span 12} }
.mm-card { background:#fff; border:1px solid var(--mm-line); box-shadow:0 12px 30px rgba(12,35,64,.06); padding:22px 24px; }
.mm-card__h { display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; }
.mm-card__h h3 { font-size:18px; margin:0; }
.mm-kicker { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-on-light); font-weight:700; margin-bottom:3px; }
.mm-card__unit { margin-left:auto; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.mm-i { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--line-strong); border-radius:3px; font-size:10px; font-style:italic; color:var(--ink-muted); cursor:help; flex:0 0 auto; }

/* Bars (volumen / variacion) */
.mm-bars,.mm-vars,.mm-sent { list-style:none; margin:0; padding:0; }
.mm-bars li,.mm-vars li { display:grid; grid-template-columns:1fr 44% auto; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--mm-line); }
.mm-bars li:last-child,.mm-vars li:last-child{border-bottom:0}
.mm-bars__t { font-size:14px; color:var(--mm-navy); }
.mm-bars__track { height:8px; background:#eef1f5; border-radius:2px; overflow:hidden; }
.mm-bars__track i { display:block; height:100%; background:var(--mm-navy); }
.mm-bars__v { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.mm-vars__v { font-size:13.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.mm-bars__track i.up{ background:var(--mm-gold); } .mm-bars__track i.down{ background:var(--mm-slate); }
.mm-vars__v.up{ color:var(--gold-on-light); } .mm-vars__v.down{ color:var(--mm-slate); }
.mm-note { font-size:12px; color:var(--ink-muted); font-style:italic; margin:12px 0 0; line-height:1.5; }
.mm-empty { font-size:13px; color:var(--ink-muted); }

/* Segmented control */
.mm-seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:2px; margin-bottom:14px; overflow:hidden; }
.mm-seg button { background:#fff; border:0; border-right:1px solid var(--mm-line); font:inherit; font-size:12.5px; padding:7px 13px; color:var(--mm-navy); cursor:pointer; }
.mm-seg button:last-child{border-right:0} .mm-seg button.is-on{ background:var(--mm-navy); color:#fff; }

/* Sentiment stacked */
/* No cursor:pointer here: dashboard.js binds the click to .mm-sent__toggle
   alone, which carries its own pointer, so a row-wide hand advertised the
   stacked bar and the expanded emotion panel as clickable when they are not. */
.mm-sent__row { padding:12px 0; border-bottom:1px solid var(--mm-line); }
.mm-sent__row:last-child{border-bottom:0}
.mm-sent__head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.mm-sent__t { font-size:14px; color:var(--mm-navy); }
.mm-sent__neg { font-size:13px; color:var(--ink-body); font-variant-numeric:tabular-nums; }
.mm-sent__hint { color:var(--ink-muted); font-size:11.5px; }
.mm-stack { display:flex; height:12px; border-radius:2px; overflow:hidden; }
.mm-stack i.s-neg{ background:var(--mm-navy); } .mm-stack i.s-neu{ background:var(--mm-tan); } .mm-stack i.s-pos{ background:var(--mm-gold); }
.mm-emo { margin-top:12px; background:#faf7ef; border:1px solid #e8e0cc; padding:14px 16px; }
.mm-emo h4 { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8a6d16; margin:0 0 10px; }
.mm-emo__row { display:grid; grid-template-columns:1fr 42% auto; gap:12px; align-items:center; padding:6px 0; font-size:13px; }
.mm-emo__row .t2 { height:7px; background:#ece5d3; border-radius:2px; overflow:hidden; }
.mm-emo__row .t2 i { display:block; height:100%; background:var(--mm-slate); }
.mm-emo__v { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-muted); }
.mm-emo__note { font-size:11.5px; color:var(--ink-muted); font-style:italic; margin:10px 0 0; }

/* Matrix heatmap */
.mm-matrix-wrap { overflow-x:auto; }
.mm-matrix { width:100%; border-collapse:separate; border-spacing:6px; }
.mm-matrix th { font-size:12px; color:var(--ink-muted); font-weight:600; padding:4px 6px; text-align:center; white-space:nowrap; }
.mm-matrix tbody th { text-align:left; color:var(--mm-navy); font-weight:500; font-size:13.5px; }
.mm-matrix td { padding:0; }
/* The text colour must STEP, not fade. Interpolating it from navy to white
   alongside a background going the other way made the two converge in the
   middle of the scale: at t≈0.5 the measured contrast was 1.06:1 — the number
   in the cell was invisible, and everything from t≈0.25 to t≈0.75 failed
   WCAG AA. --flip is 0 below the crossover and 1 above it, so each cell gets
   whichever of black/white actually contrasts with its own background. Worst
   case across the whole ramp is now 4.6:1, which clears AA for 13px text. */
.mm-cell { display:block; padding:16px 8px; text-align:center; font-size:13px; font-weight:600; border-radius:3px; font-variant-numeric:tabular-nums;
  --flip: clamp(0, (var(--t) - 0.63) * 100, 1);
  background:color-mix(in srgb, var(--mm-navy) calc(var(--t) * 82% + 8%), #eef2f7);
  color:color-mix(in srgb, #fff calc(var(--flip) * 100%), #000); }
.mm-matrix-foot { display:flex; justify-content:space-between; gap:14px; margin-top:14px; font-size:12.5px; color:var(--ink-muted); flex-wrap:wrap; }
.mm-scale { display:inline-flex; align-items:center; gap:8px; }
.mm-scale__ramp { display:inline-block; width:120px; height:8px; border-radius:2px; background:linear-gradient(90deg,#eef2f7,var(--mm-navy)); }

/* Validated (dark) section */
.mm-validated { background:var(--mm-navy); color:#dbe4ee; margin:30px 0 0; padding:34px 34px 40px; border-top:3px solid var(--mm-gold); }
.mm-validated__kicker { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mm-gold); font-weight:700; }
.mm-validated h2 { color:#fff; font-size:26px; margin:8px 0 10px; }
.mm-validated__lead { font-size:14px; color:#b7c6d8; max-width:760px; line-height:1.6; margin:0 0 22px; }
.mm-seal { border:1px solid rgba(201,162,39,.5); background:rgba(201,162,39,.06); padding:18px 20px; max-width:560px; margin-bottom:24px; }
.mm-seal__head { color:var(--mm-gold); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:10px; }
.mm-seal__by { color:#fff; font-weight:600; font-size:14px; }
.mm-seal__meta { color:#9db3cc; font-size:12.5px; font-variant-numeric:tabular-nums; margin-top:3px; }
.mm-doc { border:1px solid rgba(255,255,255,.12); }
.mm-doc__bar { display:flex; align-items:center; gap:16px; padding:16px 18px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.12); }
.mm-select--dark { background:var(--mm-navy-2); color:#fff; border-color:rgba(255,255,255,.25); }
.mm-doc__file { font-size:12.5px; color:#9db3cc; font-family:monospace; }
.mm-doc__actions { margin-left:auto; display:flex; gap:10px; }
.mm-btn { display:inline-block; font-size:13px; padding:9px 16px; font-weight:600; border-radius:2px; cursor:pointer; }
.mm-btn--gold { background:var(--mm-gold); color:var(--mm-navy); } .mm-btn--gold:hover{ background:#d8b53f; color:var(--mm-navy); }
.mm-btn--line-gold { border:1px solid var(--mm-gold); color:var(--mm-gold); } .mm-btn--line-gold:hover{ background:rgba(201,162,39,.12); color:var(--mm-gold); }
.mm-doc__view { background:#0e1116; }
.mm-doc__view iframe { width:100%; height:520px; border:0; display:block; background:#fff; }

/* Attribution footer */
.mm-attrib { display:flex; gap:26px; flex-wrap:wrap; padding:22px 2px 0; margin-top:26px; font-size:12px; color:var(--ink-muted); }

/* ================= Custom dropdown (select.js) ================= */
.sel { position: relative; display: inline-block; }
.sel--wide { display: block; min-width: 260px; }
.sel__native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.sel__btn { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border: 1px solid var(--line-strong); color: var(--mm-navy, #0c2340); font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 2px; cursor: pointer; text-align: left; }
.sel__btn:hover { border-color: var(--mm-navy, #0c2340); }
.sel.is-open .sel__btn, .sel__btn:focus-visible { outline: 2px solid var(--mm-navy, #0c2340); outline-offset: -1px; }
.sel__label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__label.is-placeholder { color: var(--ink-muted, #5a646e); }
.sel__arrow { flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; opacity: .6; transition: transform .12s ease; }
.sel.is-open .sel__arrow { transform: rotate(180deg); }
.sel__list { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; min-width: 100%; max-height: 280px; overflow-y: auto; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(12,35,64,.18); border-radius: 2px; padding: 4px; }
.sel__opt { padding: 10px 12px; font-size: 14px; color: var(--mm-navy, #0c2340); cursor: pointer; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__opt:hover, .sel__opt.is-hi { background: #eef2f7; }
.sel__opt.is-sel { font-weight: 600; }
.sel__opt.is-sel::after { content: "✓"; float: right; color: var(--mm-gold, #c9a227); margin-left: 10px; }

/* Dark variant (validated report selector on the navy section) */
.sel--dark .sel__btn { background: var(--mm-navy-2, #0a1c33); color: #fff; border-color: rgba(255,255,255,.25); }
.sel--dark .sel__btn:hover { border-color: rgba(255,255,255,.5); }
.sel--dark.is-open .sel__btn, .sel--dark .sel__btn:focus-visible { outline-color: var(--mm-gold, #c9a227); }
.sel--dark .sel__list { background: #0e1b30; border-color: rgba(255,255,255,.2); }
.sel--dark .sel__opt { color: #dbe4ee; }
.sel--dark .sel__opt:hover, .sel--dark .sel__opt.is-hi { background: rgba(255,255,255,.08); }

/* select.js copies `disabled` from the native <select> onto the button it
   builds, but .sel__btn hard-codes white / navy / pointer, so a disabled
   dropdown was pixel-identical to a live one and still lit up on hover. This
   sits AFTER the dark variant so its equal-specificity :hover above cannot
   win on source order. */
.sel__btn:disabled { background: #f1f3f8; color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
.sel__btn:disabled:hover { border-color: var(--line); }
.sel__btn:disabled .sel__arrow { opacity: .25; }

/* Two-line volume bars (label+value over a full-width bar) — matches docs/32 */
.mm-bars--stacked li { display: block; grid-template-columns: none; padding: 11px 0; }
.mm-bar2__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mm-bars--stacked .mm-bars__track { height: 10px; }
.mm-bars--stacked .mm-bars__v { font-size: 14px; }

/* Search-and-select panel */
.sel__panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; min-width: 100%; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(12,35,64,.18); border-radius: 2px; padding: 4px; }
.sel__search { display: block; width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 9px 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--line-strong); border-radius: 2px; background: #f7f8fa; }
.sel__search:focus { outline: 2px solid var(--mm-navy, #0c2340); outline-offset: -1px; background: #fff; }
.sel__list { position: static; box-shadow: none; border: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sel__empty { padding: 10px 12px; font-size: 13px; color: var(--ink-muted); }
.sel--dark .sel__panel { background: #0e1b30; border-color: rgba(255,255,255,.2); }
.sel--dark .sel__search { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.2); }
.sel--dark .sel__search:focus { outline-color: var(--mm-gold, #c9a227); background: rgba(255,255,255,.1); }

/* Data table: toolbar, sortable headers, pager */
.tbl-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.tbl-search { flex: 1 1 220px; padding: 9px 12px; font: inherit; font-size: 13.5px; border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; }
.tbl-search:focus { outline: 2px solid var(--mm-navy, #0c2340); outline-offset: -1px; }
.tbl-per { font-size: 12.5px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 8px; }
.tbl-per .sel { min-width: 70px; } .tbl-per .sel__btn { padding: 7px 10px; font-size: 13px; }
.tbl th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.is-sortable::after { content: "↕"; opacity: .35; margin-left: 6px; font-size: 10px; }
.tbl th.is-asc::after { content: "↑"; opacity: 1; color: var(--mm-gold, #c9a227); }
.tbl th.is-desc::after { content: "↓"; opacity: 1; color: var(--mm-gold, #c9a227); }
.tbl .tbl-idx { color: var(--ink-muted); width: 34px; font-variant-numeric: tabular-nums; }
.tbl-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink-muted); flex-wrap: wrap; }
.tbl-pager__nav { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; }
.tbl-pager__nav button { background: #fff; border: 0; border-right: 1px solid var(--line); font: inherit; font-size: 12.5px; padding: 6px 11px; color: var(--mm-navy, #0c2340); cursor: pointer; min-width: 34px; }
.tbl-pager__nav button:last-child { border-right: 0; }
.tbl-pager__nav button:hover:not(:disabled) { background: #eef2f7; }
.tbl-pager__nav button.is-current { background: var(--mm-navy, #0c2340); color: #fff; }
.tbl-pager__nav button:disabled { opacity: .4; cursor: default; }

/* Review fixes: chart sizing, responsive nav, a11y controls, sessions, admin */
.chart-box { position: relative; height: 240px; width: 100%; }
@media (max-width: 980px) {
  .topnav { display: flex !important; flex-wrap: wrap; gap: 14px; margin-left: 0; }
  .topbar__in { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 12px 20px; }
  .mm-top__in { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px 18px; }
  .mm-clock { margin-left: 0; text-align: left; }
  .mm-user, .mm-top__actions { border-left: 0; padding-left: 0; }
}
.mm-sent__toggle { display: flex; width: 100%; justify-content: space-between; align-items: baseline; background: none; border: 0; padding: 0; margin-bottom: 7px; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.mm-sent__toggle:focus-visible { outline: 2px solid var(--mm-navy); outline-offset: 3px; }
.mm-i { cursor: help; } .mm-i:focus-visible { outline: 2px solid var(--mm-navy); }
/* .mm-periods, .mm-seg and .tbl-pager__nav all clip their children with
   overflow:hidden to round their inner corners, and the UA paints a focus ring
   OUTSIDE the child's border box — i.e. entirely outside the clip rect, so it
   disappeared and a keyboard user could not tell which segment Enter would
   activate. A negative offset pulls the ring inside the clip. Navy on the white
   segments; gold on the selected navy one, where navy would be invisible. */
.mm-period:focus-visible,
.mm-seg button:focus-visible,
.tbl-pager__nav button:focus-visible { outline: 2px solid var(--mm-navy, #0c2340); outline-offset: -3px; }
.mm-period.is-on:focus-visible,
.mm-seg button.is-on:focus-visible,
.tbl-pager__nav button.is-current:focus-visible { outline-color: var(--mm-gold, #c9a227); }
.mm-chip[hidden] { display: none; }
.mm-chip--clear { border-color: transparent; color: var(--ink-muted); text-decoration: underline; }
.tbl-sortbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit; }
.tbl-sortbtn::after { content: "↕"; opacity: .35; margin-left: 6px; font-size: 10px; }
.tbl th.is-asc .tbl-sortbtn::after { content: "↑"; opacity: 1; color: var(--mm-gold, #c9a227); }
.tbl th.is-desc .tbl-sortbtn::after { content: "↓"; opacity: 1; color: var(--mm-gold, #c9a227); }
.tbl th.is-sortable::after { content: none; }
.sessions td:first-child { width: auto; }
.badge--lock { background: #fbe9e7; color: #a3372f; }
.form-inline { display: inline; margin: 0; }
.form-inline .field { display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
.form-inline .field input { width: 200px; padding: 7px 10px; font-size: 13px; }
.admin-links { display: flex; gap: 14px; font-size: 13px; margin: -6px 0 16px; }
.mono { font-family: monospace; font-size: 12px; }
.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; }
.btn-site { display:inline-block; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:12.5px; padding:7px 13px; border-radius:2px; white-space:nowrap; }
.btn-site:hover { background:rgba(255,255,255,.12); color:#fff; }
.mm-iconlink--site { border:1px solid rgba(255,255,255,.3); padding:6px 11px; border-radius:2px; }
.mm-iconlink--site:hover { background:rgba(255,255,255,.12); }

/* Multi-select: checkbox affordance + action footer */
.sel--multi .sel__opt { padding-left: 34px; position: relative; }
.sel--multi .sel__opt::before { content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; }
.sel--multi .sel__opt.is-sel::before { background: var(--mm-navy, #0c2340); border-color: var(--mm-navy, #0c2340); }
.sel--multi .sel__opt.is-sel::after { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 10px; float: none; margin: 0; }
.sel__foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px 2px; margin-top: 4px; border-top: 1px solid var(--line-12, rgba(12,35,64,.12)); }
.sel__foot-clear, .sel__foot-apply { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 2px; cursor: pointer; }
.sel__foot-clear { background: none; border: 0; color: var(--ink-muted); text-decoration: underline; }
.sel__foot-apply { background: var(--mm-navy, #0c2340); color: #fff; border: 0; font-weight: 600; }
.sel__foot-apply:hover { background: var(--mm-navy-2, #0a1c33); }
.sel--dark .sel__foot { border-top-color: rgba(255,255,255,.15); }
.sel--dark .sel__foot-apply { background: var(--mm-gold, #c9a227); color: var(--mm-navy, #0c2340); }


/* Period switcher: equal-width segments so "Todo" doesn't dwarf "7 d".
   .mm-fgroup is a COLUMN flex container, so its default align-items:stretch was
   blowing the switcher out to the width of the widest sibling (the "Del … al …"
   date line). The segments stayed 64px each and the leftover ~31px showed up as
   dead space between "Todo" and the group's right border. Shrink-to-fit instead. */
.mm-periods { align-self: flex-start; }
.mm-period { min-width: 64px; text-align: center; }

/* ============ Admin layout: full-width stack, responsive form grid ============ */
.admin-stack { display: block; }
.admin-stack > .card { margin-bottom: 18px; }

/* Fields reflow from 4 columns to 1 with no media queries and no truncation. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
.form-grid .field { margin-bottom: 0; min-width: 0; }
.field__opt { text-transform: none; letter-spacing: 0; color: var(--ink-muted); font-weight: 400; }
.field input::placeholder { color: #9aa3b0; }
/* The submit sits on its own row so it can never be squeezed out of the card. */
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-actions .btn { padding: 12px 22px; font-size: 14px; }
@media (max-width: 560px) { .form-actions { justify-content: stretch; } .form-actions .btn { width: 100%; text-align: center; } }

/* An open dropdown must paint ABOVE the card that follows it, and may be wider
   than its trigger so long option labels are never clipped. */
.sel.is-open { z-index: 200; }
.sel__panel { right: auto; width: max-content; min-width: 100%; max-width: min(420px, 92vw); }
.sel__opt { white-space: normal; overflow: visible; text-overflow: clip; }
.sel__opt.is-sel::after { float: none; margin-left: 8px; }

/* ============ Generated-password helper (public/js/pwgen.js) ============
   The host <div class="pwgen"> ships empty and hidden; the script builds the
   button and the result panel inside it, so with JS off nothing renders. */
.pwgen { margin: 10px 0 0; }
.pwgen__btn { display: block; width: 100%; background: var(--white); color: var(--navy); border: 1px solid var(--line-strong);
  font: inherit; font-size: 13px; font-weight: 500; padding: 10px 12px; border-radius: 2px; cursor: pointer; }
.pwgen__btn:hover { background: var(--ivory); border-color: var(--navy); }
.pwgen__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.pwgen__out { margin-top: 10px; padding: 12px 14px; background: #f7f8fa; border: 1px solid var(--line-strong); border-left: 3px solid var(--gold); }
.pwgen__label { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.pwgen__value { display: block; margin: 7px 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; letter-spacing: 1px; color: var(--navy); word-break: break-all; user-select: all; }
/* An explicit display: block beats the UA's [hidden] rule, so "Ocultar" would
   leave the plaintext credential on screen. Restate it at higher specificity. */
.pwgen__value[hidden] { display: none; }
.pwgen__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pwgen__act { background: none; border: 1px solid var(--line-strong); color: var(--navy); font: inherit; font-size: 12px;
  padding: 5px 10px; border-radius: 2px; cursor: pointer; }
.pwgen__act:hover { background: #fff; border-color: var(--navy); }
.pwgen__act:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.pwgen__note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-muted); }
.pwgen__status { margin: 8px 0 0; font-size: 11.5px; color: var(--pos); min-height: 1em; }
.pwgen__status:empty { margin: 0; }

/* Wide tables scroll inside their card instead of breaking the page. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll .tbl { min-width: 720px; }
@media (max-width: 700px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .card { padding: 16px; }
  .tbl-bar { flex-direction: column; align-items: stretch; }
  .tbl-per { justify-content: space-between; }
  .page-head h1 { font-size: 24px; }
}