/* AFIS — American Fiure platform. One stylesheet for the shell and every module. */

:root {
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #f1f0ec;
  --border: #e3e2dc;
  --border-strong: #cfcdc5;
  --ink: #161615;
  --ink-2: #4c4b47;
  --muted: #6b6964;
  --brand: #0b3b9e;
  --brand-hover: #082f80;
  --brand-ink: #ffffff;
  --brand-soft: #e9eefb;
  --ok: #17703a;
  --ok-soft: #e4f3e9;
  --warn: #9a5a07;
  --warn-soft: #fbf0dd;
  --bad: #b83030;
  --bad-soft: #fbe7e6;
  --lvl-view: #1d63b8;
  --lvl-view-soft: #e6effa;
  --lvl-edit: #157a55;
  --lvl-edit-soft: #e2f3ec;
  --lvl-manage: #0b3b9e;
  --lvl-manage-soft: #e3e9fa;
  --shadow: 0 1px 2px rgba(20, 20, 18, .05), 0 1px 1px rgba(20, 20, 18, .03);
  --radius: 10px;
  /* The charts' colours, for widgets, pages and dots alike. Ten, for the long lists (a sales team): after the first
     seven, olive, sienna and indigo. A salesperson's place here is fixed: maestros.SalesRep.color. */
  --series-0: #2a78d6; --series-1: #eb6834; --series-2: #1baf7a; --series-3: #8a5cd1; --series-4: #d1a21f;
  --series-5: #d64f8a; --series-6: #4a9fb5; --series-7: #7a8a1f; --series-8: #a0522d; --series-9: #3d4fbf;
  /* What belongs to nobody («Sin asignar») has no colour of its own: the grey in stripes, beside Oficina Central's plain grey.
     For a legend; on a canvas widgets.js draws the same. */
  --striped: repeating-linear-gradient(-45deg, var(--muted) 0 2px, transparent 2px 4px);
  --sidebar-w: 256px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6964' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f0e; --surface: #191918; --surface-2: #222220; --border: #2d2d2b; --border-strong: #3c3c39;
    --ink: #f1f1ee; --ink-2: #c4c3bb; --muted: #8f8d86;
    --brand: #7ea4f6; --brand-hover: #9bb9fa; --brand-ink: #0a1430; --brand-soft: #1a2647;
    --ok: #5cc98a; --ok-soft: #15301f; --warn: #e3a54a; --warn-soft: #33260f; --bad: #ef7b74; --bad-soft: #3a1a18;
    --lvl-view: #79aef0; --lvl-view-soft: #172a44; --lvl-edit: #5fcf9f; --lvl-edit-soft: #133126;
    --lvl-manage: #9db8fa; --lvl-manage-soft: #1d2a50;
    --series-0: #3987e5; --series-1: #d95926; --series-2: #199e70; --series-3: #a07ae6; --series-4: #e0b43a;
    --series-5: #e56aa0; --series-6: #5fb6cc; --series-7: #98a83a; --series-8: #c06a3e; --series-9: #6577e0;
    --shadow: none;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8d86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f0e; --surface: #191918; --surface-2: #222220; --border: #2d2d2b; --border-strong: #3c3c39;
  --ink: #f1f1ee; --ink-2: #c4c3bb; --muted: #8f8d86;
  --brand: #7ea4f6; --brand-hover: #9bb9fa; --brand-ink: #0a1430; --brand-soft: #1a2647;
  --ok: #5cc98a; --ok-soft: #15301f; --warn: #e3a54a; --warn-soft: #33260f; --bad: #ef7b74; --bad-soft: #3a1a18;
  --lvl-view: #79aef0; --lvl-view-soft: #172a44; --lvl-edit: #5fcf9f; --lvl-edit-soft: #133126;
  --lvl-manage: #9db8fa; --lvl-manage-soft: #1d2a50;
  --series-0: #3987e5; --series-1: #d95926; --series-2: #199e70; --series-3: #a07ae6; --series-4: #e0b43a;
  --series-5: #e56aa0; --series-6: #5fb6cc; --series-7: #98a83a; --series-8: #c06a3e; --series-9: #6577e0;
  --shadow: none;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8d86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.75rem; letter-spacing: -.015em; }  /* every page's title, every module */
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
.icon { flex: none; display: block; }
.icon.inline { display: inline-block; vertical-align: -2px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: "Cascadia Mono", Consolas, "SFMono-Regular", monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- logo (image is cropped tight, 870x112) ---------- */
.logo { display: block; height: auto; width: 100%; max-width: 212px; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: calc(20px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
.sidebar-brand { padding: 4px 10px 20px; }
.sidebar-brand .product { display: block; margin-top: 8px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nav-section { margin: 16px 10px 6px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500; text-decoration: none;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: var(--brand-soft); color: var(--brand); }
.nav .sub { margin: 2px 0 4px 40px; display: flex; flex-direction: column; }
.nav .sub a { padding: 4px 8px; font-weight: 400; font-size: .9rem; }
.sidebar-foot { position: relative; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand); color: var(--brand-ink); font-size: .78rem; font-weight: 600;
}
.who { flex: 1; min-width: 0; line-height: 1.2; }
.who a {
  color: var(--ink); font-weight: 500; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.who span { font-size: .78rem; color: var(--muted); }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.main { min-width: 0; display: flex; flex-direction: column; grid-column: -2 / -1; grid-row: 1; }
.scrim { display: none; }
.topbar { display: none; }
.content {
  width: 100%; max-width: 1180px; margin: 0 auto;
  /* below: room for the round note button (.note-fab), so a page's last figures can scroll clear of it */
  padding: 32px calc(36px + env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) 36px;
}

.content.wide { max-width: 1440px; } /* dashboards and module pages full of charts */

/* Small laptops and large iPads in landscape: slimmer sidebar, tighter gutters. */
@media (max-width: 1180px) and (min-width: 901px) {
  :root { --sidebar-w: 228px; }
  .content { padding: 26px calc(24px + env(safe-area-inset-right)) 88px 24px; }
}

/* Phones, Surface Duo and iPads in portrait: the menu slides in from a top bar. */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); z-index: 30;
    transform: translateX(-100%); transition: transform .2s ease; visibility: hidden;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.18); }
  body.nav-open { overflow: hidden; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
  .topbar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10;
    padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .topbar .icon-btn { flex: none; }
  .topbar .logo { flex: 0 1 auto; min-width: 0; width: auto; height: 24px; max-width: none; object-fit: contain; object-position: left center; }
  .content { padding: 24px calc(24px + env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); }
}
@media (max-width: 600px) {
  .content { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); padding-top: 20px; }
  h1 { font-size: 1.32rem; }
  .card-body { padding: 18px 16px; }
  .card-head, .filters, .form-actions, .pagination { padding-left: 16px; padding-right: 16px; }
  .page-head { margin-bottom: 18px; }
  .page-head .actions { width: 100%; }
  .filters .search { max-width: none; flex-basis: 100%; }
  .filters select { flex: 1 1 100%; }
  .form-actions .btn { flex: 1 1 auto; }
}

/* ---------- page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
/* bank days of the month gone by (core_tags.month_progress) */
.month-progress { width: 340px; max-width: 100%; margin-top: 12px; }
.month-progress .mp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px;
  font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.month-progress .mp-top b { color: var(--ink); font-weight: 600; }
.month-progress .mp-pct { color: var(--ink); font-weight: 600; }
/* one segment per bank day; a little more room between weeks */
.month-progress .mp-days { display: flex; align-items: center; gap: 2px; height: 14px; }
.month-progress .mp-days i { flex: 1 1 0; height: 8px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.month-progress .mp-days i:first-child, .month-progress .mp-days i.wk { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.month-progress .mp-days i:last-child, .month-progress .mp-days i:has(+ .wk) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.month-progress .mp-days i.wk { margin-left: 6px; }
.month-progress .mp-days i.done { background: color-mix(in srgb, var(--brand) 70%, transparent); }
.month-progress .mp-days i.today { height: 14px; border-radius: 3px; background: var(--brand); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-body { padding: 18px 20px; }
.card-head { padding: 16px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card + .card, .card + form, form + .card { margin-top: 20px; }
.grid > .card, .split > .card, .split > .stack { margin-top: 0; }
.stack > * + * { margin-top: 20px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } }

.module-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; color: inherit; text-decoration: none; transition: border-color .15s; }
.module-card:hover { border-color: var(--brand); text-decoration: none; }
.module-card .mc-top { display: flex; align-items: center; justify-content: space-between; }
.module-card .mc-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.module-card p { color: var(--ink-2); font-size: .92rem; margin: 0; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--ink-2);
}
.lvl-none { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.lvl-view { background: var(--lvl-view-soft); color: var(--lvl-view); }
.lvl-edit { background: var(--lvl-edit-soft); color: var(--lvl-edit); }
.lvl-manage { background: var(--lvl-manage-soft); color: var(--lvl-manage); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font: 500 .92rem var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.block { width: 100%; }
.btn.sm { height: 32px; padding: 0 12px; font-size: .86rem; }
form.inline { display: inline; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th {
  text-align: left; font-weight: 600; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .center { text-align: center; }
/* Roles y permisos: every module in view from a laptop up; narrower, it scrolls under the pinned role. */
.role-matrix th.center { white-space: normal; padding: 10px 4px; font-size: .72rem; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.role-matrix td.center { padding: 12px 4px; }
.role-matrix .badge { padding: 2px 7px; }
.role-matrix .role-cell { min-width: 220px; }
.role-desc { display: block; }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-user .avatar { width: 30px; height: 30px; font-size: .72rem; }
.cell-user small { display: block; color: var(--muted); }
.row-link { color: var(--ink); font-weight: 500; }
.table tbody tr:has(a.row-link) { cursor: pointer; }
.table tbody tr:has(a.row-link):hover .row-link { color: var(--brand); text-decoration: underline; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }

/* ---------- filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border); }
.filters .search { position: relative; flex: 1 1 220px; max-width: 360px; }
.filters .search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filters .search input { padding-left: 36px; }

/* ---------- forms ---------- */
/* Every field looks the same in every browser: same height, font, border and colors. Dates are turned into
   dd/mm/aaaa fields with a calendar by core/datepicker.js (input[type=date] is the look without it). */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], input[type="date"], input[type="month"], select, textarea {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; line-height: normal;
}
input[type="date"], input[type="month"] { font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
/* the browser's own arrow differs everywhere (and ignores the dark theme): one drawn here. !important because
   some module styles set the shorthand `background`, which would wipe it. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: var(--chevron) !important; background-repeat: no-repeat !important;
  background-position: right 11px center !important; padding-right: 32px !important;
}
select option { background: var(--surface); color: var(--ink); }
textarea { height: auto; min-height: 90px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
input:disabled, select:disabled, textarea:disabled, input[readonly]:not(.dp-text), textarea[readonly] {
  background-color: var(--surface-2); color: var(--ink-2); cursor: default;
}
select:disabled { opacity: .75; }
.filters select { width: auto; min-width: 150px; }
.filter-day { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.filter-day .dp, .filter-day input[type="date"] { width: 150px; }
.field { margin-bottom: 18px; }
.field > label, .field-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field .help { font-size: .82rem; color: var(--muted); margin-top: 5px; }
.field .errorlist, .errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--bad); font-size: .85rem; }
.form-errors { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.form-errors .errorlist { margin: 0; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .fields-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); }
.check strong { display: block; font-size: .92rem; }
.check span { display: block; font-size: .82rem; color: var(--muted); }
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.choice-list label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 500; }
.choice-list input { width: 16px; height: 16px; accent-color: var(--brand); }
.choice-list label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--border); }

/* ---------- permission matrix ---------- */
.matrix { width: 100%; border-collapse: collapse; }
.matrix td { padding: 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.matrix tr:last-child td { border-bottom: 0; }
.matrix .m-name { display: flex; align-items: center; gap: 10px; font-weight: 500; padding-right: 16px; }
.matrix .m-name .icon { color: var(--muted); }
.segmented { display: inline-flex; flex-wrap: nowrap; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.segmented label { white-space: nowrap; }
.segmented > div { display: contents; }
.segmented label { position: relative; padding: 6px 12px; font-size: .86rem; cursor: pointer; border-right: 1px solid var(--border); color: var(--ink-2); user-select: none; }
.segmented label:last-of-type { border-right: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--brand); color: var(--brand-ink); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
select.override { width: auto; min-width: 170px; height: 34px; }
.matrix tr.cap-row td { padding-top: 0; }
.check.cap-check { margin: 0 0 4px 24px; }
@media (max-width: 1180px) and (min-width: 1001px), (max-width: 640px) {
  .matrix:has(.segmented) tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .matrix:has(.segmented) tr:last-child { border-bottom: 0; }
  .matrix:has(.segmented) td { display: block; border: 0; padding: 4px 0; text-align: left !important; }
}
@media (max-width: 640px) {
  .matrix tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .matrix td { display: block; border: 0; padding: 4px 0; }
}

/* ---------- alerts ---------- */
/* Pinned to the top of the window: a save often comes back to the line it was about, far down the page, and what it says
   has to be in sight there, in every module. The «x» takes it away. An anchor leaves room for it. */
.messages { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; position: sticky; z-index: 15;
  top: calc(var(--env-h, 0px) + var(--viewas-h, 0px) + 8px); max-height: 50vh; overflow-y: auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.18)); }
.messages .alert { display: flex; align-items: flex-start; gap: 10px; }
.messages .alert > span { flex: 1; min-width: 0; }
.msg-close { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer; }
.msg-close:hover { background: rgba(127,127,127,.2); }
html:has(.messages) { scroll-padding-top: 120px; }
@media (max-width: 900px) {
  .messages { top: calc(var(--env-h, 0px) + var(--viewas-h, 0px) + env(safe-area-inset-top) + 70px); }
  html:has(.messages) { scroll-padding-top: 200px; }
}
.alert { padding: 11px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: .92rem; }
.alert.success { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.alert.error { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.alert.warning { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.alert.info { background: var(--brand-soft); border-color: transparent; color: var(--brand); }

/* ---------- login ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .card-body { padding: 32px 30px; }
.auth-card .logo { width: 82%; max-width: 290px; margin: 6px auto 12px; }
.auth-card .product { text-align: center; color: var(--muted); font-size: .85rem; margin-bottom: 26px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .82rem; color: var(--muted); }

/* ---------- misc ---------- */
.secret {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 10px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 1.35rem; letter-spacing: .06em;
}
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.details-json { font-size: .82rem; color: var(--ink-2); width: 38%; }
.details-json div { overflow-wrap: anywhere; }
.table:has(.details-json) .badge { white-space: normal; }  /* the long action names, or Detalle gets what they leave */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); }
/* ---------- tables that become cards on phones ---------- */
@media (max-width: 640px) {
  table.stack-sm thead { display: none; }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tfoot, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  table.stack-sm tr:last-child { border-bottom: 0; }
  table.stack-sm td { border: 0; padding: 3px 0; }
  table.stack-sm td[data-label]::before {
    content: attr(data-label); display: block; font-size: .72rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); margin-top: 6px;
  }
  table.stack-sm td.empty { padding: 24px 0; }
  table.stack-sm tbody tr:hover td { background: none; }
}
/* Wide matrices scroll sideways with the first column pinned. */
.table.sticky-first th:first-child, .table.sticky-first td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
}
@media (max-width: 640px) {
  .role-matrix .role-cell { min-width: 0; width: 40vw; max-width: 40vw; padding-left: 10px; padding-right: 8px; }
  .role-matrix .role-cell .badge { white-space: normal; border-radius: 10px; }
  .role-desc { display: none; }
  .role-matrix th.center, .role-matrix td.center { min-width: 62px; }
}

/* ---------- touch screens (iPad, iPhone, Duo) ---------- */
@media (pointer: coarse) { input, select, textarea { font-size: 16px; } } /* below 16px, iOS zooms the page on focus */
html { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  .nav a { min-height: 44px; }
  .nav .sub a { min-height: 36px; display: flex; align-items: center; }
  .icon-btn { width: 44px; height: 44px; }
  .btn { height: 44px; }
  .btn.sm { height: 38px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="month"], select { height: 46px; font-size: 16px; }
  textarea { font-size: 16px; }
  select.override { height: 44px; }
  .segmented label { padding: 10px 14px; }
  .choice-list label, .check { min-height: 48px; }
  .module-card:hover { border-color: var(--border); }
  .module-card:active { border-color: var(--brand); }
}

.hint { display: flex; gap: 10px; padding: 12px 14px; background: var(--surface-2); border-radius: 8px; font-size: .88rem; color: var(--ink-2); }
.hint .icon { color: var(--muted); margin-top: 1px; }

/* ---------- pages people can rearrange (core/static/core/page_layout.js) ---------- */
.layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.layout > [data-section] { grid-column: 1 / -1; min-width: 0; position: relative; }
.layout > [data-section][data-span="half"] { grid-column: span 1; align-self: stretch; }
.layout > [data-section][data-span="half"].is-alone { grid-column: 1 / -1; }
/* widgets in a page's sections: a pair of them is as tall as the taller one, the charts filling it */
.layout > [data-section] > .w-card { height: 100%; }
.layout > [data-section] > .w-card .w-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.layout > [data-section] > .w-card .w-plot { flex: 1 0 260px; height: auto; }
@media (max-width: 900px) { .layout > [data-section][data-span="half"] { grid-column: 1 / -1; } }
.layout > [data-section].is-hidden { display: none; }
/* minimized: only the header (core/page_layout.js) */
.layout > [data-section].is-collapsed [data-collapse-body], .layout > [data-section].is-collapsed [data-expanded-only] { display: none !important; }
.layout > [data-section]:not(.is-collapsed) [data-collapsed-only] { display: none !important; }
.layout > [data-section].is-collapsed [data-auto-head] ~ * { display: none !important; }
.layout > [data-section].is-collapsed [data-auto-head] { border-bottom-color: transparent; margin-bottom: 0; }
.layout > [data-section].is-collapsed { align-self: start; }
[data-auto-head] { position: relative; padding-right: 52px !important; }
[data-auto-head] > .collapse-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; }
.collapse-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: auto; flex: 0 0 auto; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; }
.collapse-btn:hover { background: var(--surface-2); color: var(--ink); }
.collapse-btn .icon { transition: transform .15s; }
.is-collapsed .collapse-btn .icon { transform: rotate(-90deg); }
@media (pointer: coarse) { .collapse-btn { width: 40px; height: 40px; } }
.lay-bar { display: none; }
.layout.organizing > [data-section] { outline: 2px dashed var(--border-strong); outline-offset: 6px; border-radius: var(--radius); }
.layout.organizing > [data-section].is-hidden { display: block; opacity: .5; }
.layout.organizing > [data-section].is-hidden > :not(.lay-bar) { display: none; }
.layout.organizing > [data-section].is-dragging { outline-color: var(--brand); opacity: .75; }
.layout.organizing .lay-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand); font-size: .86rem; font-weight: 600; user-select: none; }
.lay-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-grip, .lay-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent;
  color: inherit; cursor: pointer; font: 600 .82rem var(--font); padding: 0 6px; }
.lay-grip { cursor: grab; touch-action: none; }
.lay-btn:hover, .lay-grip:hover { background: var(--surface); }
.lay-btn:disabled { opacity: .35; cursor: default; }
.lay-hide { padding: 0 10px; }
@media (pointer: coarse) { .lay-grip, .lay-btn { min-width: 40px; height: 40px; } }
.layout-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand); font-size: .9rem; margin-bottom: 4px; }
.layout-note[hidden] { display: none; }

/* ---------- heat maps (core/heat.js): the same switch, swatch and legend in every module ---------- */
.heat-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font: 600 .88rem var(--font); cursor: pointer; }
.heat-btn[aria-pressed="true"] { border-color: var(--ink-2); background: var(--surface-2); }
@media (pointer: coarse) { .heat-btn { height: 44px; } }
.heat-swatch { width: 26px; height: 10px; border-radius: 3px; background: var(--surface-2); }
[data-heat-palette][hidden] { display: none; }
.heat-legend { display: none; align-items: center; gap: 8px; font-size: .76rem; color: var(--muted); margin-top: -4px; }
.heat-legend i { width: 160px; height: 8px; border-radius: 4px; }
.heat .heat-legend { display: flex; }

/* ---------- Para revisar (core/review.js): folds to its title and count; NUEVO when something appeared ---------- */
.review-box > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.review-box > summary::-webkit-details-marker { display: none; }
.review-box > summary h2 { margin: 0; }
.review-box > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.review-chev { margin-left: auto; display: inline-flex; color: var(--ink-2); transition: transform .15s; }
.review-box[open] .review-chev { transform: rotate(180deg); }
.review-box:not([open]) { padding-top: 12px; padding-bottom: 12px; }
.review-new { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-ink); background: var(--brand); border-radius: 999px; padding: 2px 9px; }
.review-new[hidden] { display: none; }
[data-review-item].is-new strong::after { content: "nuevo"; margin-left: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border-radius: 4px; padding: 1px 6px; vertical-align: 1px; }
details.review-box { display: block; }
details.review-box > :not(summary) { margin-top: 10px; }
.addto-host > summary .review-chev { margin-right: 34px; }

/* ---------- notes in the modules (core/notes.py, core/_notes.html) ---------- */
.notes { margin-bottom: 20px; }
.notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.notes-head h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .8rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.notes-head .notes-add { margin-left: auto; }
.notes-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: inherit; cursor: pointer; }
.notes-toggle:hover { background: var(--surface-2); }
.notes-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.notes-toggle { letter-spacing: inherit; text-transform: inherit; font-weight: inherit; }
.notes-count { font-size: .8rem; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
.notes-chev { display: inline-flex; transition: transform .15s; }
.notes.is-collapsed .notes-chev { transform: rotate(-90deg); }
.notes.is-collapsed .notes-body { display: none; }
.notes.is-collapsed { padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
.notes.is-collapsed .notes-head { margin-bottom: 0; }
.notes-none { font-size: .82rem; color: var(--muted); }
.notes.is-empty { padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius); margin-bottom: 18px; }
.notes.is-empty .notes-head { margin-bottom: 0; }
.notes.is-empty .notes-hidden { margin-top: 8px; }
.notes.is-empty .notes-hidden summary { margin-bottom: 0; }
.notes.is-empty .notes-hidden[open] summary { margin-bottom: 10px; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 12px; align-items: start; }
.note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; position: relative; scroll-margin-top: 80px; }
.note::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--border-strong); }
.note.is-new::before { background: var(--brand); }
.note.is-hidden { opacity: .75; }
.note:target { box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow); }
.note header { display: flex; align-items: center; gap: 9px; }
.avatar.sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar.xs { width: 22px; height: 22px; font-size: .62rem; }
.note-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.note-who b { font-size: .88rem; }
.note-who time { font-size: .74rem; color: var(--muted); }
.note header .badge { margin-left: auto; }
/* each person's pin: the note stays first in their list (core.notes), in the module or in Notas */
.note-pin-form { margin-left: auto; }
.note header .badge + .note-pin-form { margin-left: 2px; }
.note-pin { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s, color .15s; }
.note:hover .note-pin, .note-pin:focus-visible { opacity: 1; }
.note-pin:hover { background: var(--surface-2); color: var(--ink); }
.note-pin.is-on { opacity: 1; color: var(--brand); }
.note-pin.is-on svg { fill: currentColor; }
.note.is-pinned { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
@media (hover: none) { .note-pin { opacity: 1; } }
.note-text { font-size: .92rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; max-height: 7.3em; overflow: hidden; }
.note-text.is-long { cursor: pointer; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.note-text.is-long.is-open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.note footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 8px; }
.note-for, .note-reads summary { display: inline-flex; align-items: center; gap: 5px; }
.note-reads summary { cursor: pointer; list-style: none; }
.note-reads summary::-webkit-details-marker { display: none; }
.note-reads summary:hover { color: var(--ink); }
.note-reads-list { margin-top: 6px; display: grid; gap: 3px; color: var(--ink-2); }
.note-reads-list .ok { color: var(--ok); }
.note-acts { margin-left: auto; display: flex; gap: 2px; }
.note-acts .btn.sm { padding: 3px 8px; min-height: 0; font-size: .76rem; }
.btn.danger-text { color: var(--bad); }
.notes-hidden { margin-top: 12px; }
.notes-hidden summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
/* z-index: over the page's own bars, under whatever opens on top of the page (the 20 of a drawer's or the menu's backdrop) */
.note-fab { position: fixed; right: 24px; bottom: 24px; z-index: 19; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); transition: transform .15s ease; }
.note-fab:hover { transform: scale(1.06); background: var(--brand-hover); }
.note-dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 14px; padding: 0;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.note-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.note-dialog form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 16px; }
.nd-head { display: flex; align-items: center; justify-content: space-between; }
.nd-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.note-dialog textarea { width: 100%; resize: vertical; min-height: 110px; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink); }
.nd-for { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.nd-for legend { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.nd-opt { display: flex; gap: 9px; align-items: center; font-size: .9rem; cursor: pointer; }
.nd-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 4px 0 0 24px; max-height: 210px; overflow-y: auto; }
.nd-people.nd-need { outline: 2px solid var(--bad); outline-offset: 4px; border-radius: 6px; }
.nd-person { display: flex; align-items: center; gap: 8px; font-size: .86rem; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.nd-person:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.nd-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.nd-actions .muted { margin-right: auto; }
.nav-notes { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font-size: .7rem; font-weight: 700; }
.nav-alert { margin-left: auto; width: 10px; height: 10px; border-radius: 999px; background: var(--bad); flex: none; }
/* Alerts (core.alerts): who first, then what; yellow, orange and red, always with their words (core/_alerts_band.html) */
.tone-yellow { --al: #f2c200; --al-ink: #161615; --al-soft: #fff7cf; }
.tone-orange { --al: #f08319; --al-ink: #161615; --al-soft: #ffe8d2; }
.tone-red { --al: #c92a2a; --al-ink: #ffffff; --al-soft: #fde1df; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tone-yellow { --al-soft: #3a3208; }
  :root:not([data-theme="light"]) .tone-orange { --al-soft: #40260c; }
  :root:not([data-theme="light"]) .tone-red { --al-soft: #451b19; }
}
:root[data-theme="dark"] .tone-yellow { --al-soft: #3a3208; }
:root[data-theme="dark"] .tone-orange { --al-soft: #40260c; }
:root[data-theme="dark"] .tone-red { --al-soft: #451b19; }
.nav-alerts { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--al); color: var(--al-ink); font-size: .7rem; font-weight: 700; }
.nav-notes + .nav-alerts { margin-left: 0; }
.ac-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--al); color: var(--al-ink); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.alert-band { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.alert-client { border: 1px solid var(--border); border-left: 6px solid var(--al); border-radius: var(--radius); background: var(--al-soft); color: var(--ink); padding: 12px 16px; }
.content > .alert-client { margin-bottom: 14px; scroll-margin-top: 80px; }
.ac-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ac-head > svg { color: var(--al); flex: none; }
.ac-name { font-size: 1.08rem; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.ac-name:hover { text-decoration: underline; }
.ac-name small { font-weight: 400; font-size: .8rem; color: var(--ink-2); }
.ac-head form, .ac-head .inline { margin-left: auto; }
.ac-head .badge + form { margin-left: 0; }
.ac-lines { list-style: none; margin: 8px 0 0; padding: 0 0 0 30px; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.ac-lines li { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.ac-lines .mono { min-width: 190px; color: var(--ink-2); }
.ac-lines b { min-width: 72px; }
.ac-lines .muted { color: var(--ink-2); }
.ac-amount { font-variant-numeric: tabular-nums; }
.ac-sum { margin: 6px 0 10px; font-size: .88rem; color: var(--ink-2); }
.ac-table { background: var(--surface); border-radius: 8px; }
.ac-table td, .ac-table th { padding: 7px 12px; }
.ac-fold > .ac-sum { cursor: pointer; }
.ac-fold:not([open]) > .ac-sum { margin-bottom: 0; }
/* on a phone each invoice is a few lines, as in the alert band: its number, then days and balance, then the rest */
@media (max-width: 640px) {
  .ac-stack thead { display: none; }
  .ac-stack, .ac-stack tbody { display: block; }
  .ac-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
  .ac-stack tr:last-child { border-bottom: 0; }
  .ac-stack td, .ac-stack td.num { border: 0; padding: 0; text-align: left; }
  .ac-stack td.mono { width: 100%; color: var(--ink-2); }
  .ac-stack .ac-days::after { content: " días"; }
  .ac-stack .ac-date { order: 1; font-size: .8rem; color: var(--ink-2); }
  .ac-stack .ac-date::before { content: attr(data-label) " "; color: var(--muted); }
}
.ab-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.alert-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 16px; padding: 9px 14px; border: 1px solid var(--border); border-left: 6px solid var(--al);
  border-radius: 8px; background: var(--al-soft); color: var(--ink); font-size: .92rem; text-decoration: none; }
.alert-line > svg { color: var(--al); flex: none; }
.alert-line-go { margin-left: auto; font-weight: 600; text-decoration: underline; }
.alerts-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 16px; margin-bottom: 16px; }
.alerts-filters label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--ink-2); }
.alerts-filters .alerts-new { flex-direction: row; align-items: center; gap: 6px; height: 36px; }
.alerts-levels { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.alerts-level { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .86rem; }
.alerts-level.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (max-width: 700px) { .ac-name { flex: 1 1 calc(100% - 30px); min-width: 0; } .ac-lines { padding-left: 0; } .ac-lines .mono { min-width: 0; width: 100%; } .alert-line-go { margin-left: 0; width: 100%; } }
@media print { .alert-band, .alert-line { display: none; } }
/* Notas: every note in one page; each says its module and goes to it */
.note-module { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: .76rem; font-weight: 550; }
.note-module:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.nl-card { margin: 20px 0 16px; }
/* «Elegir varias»: a box on each note, and the bar that deletes or hides them */
.note-pick { display: none; width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand); cursor: pointer; }
body.nl-picking .note-pick { display: block; }
body.nl-picking .nl-grid .note { cursor: pointer; }
.note.is-picked { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow); }
.nl-bulk { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center;
  flex-wrap: wrap; justify-content: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.nl-bulk[hidden] { display: none; }
.nl-bulk-count { font-size: .88rem; font-weight: 600; margin-right: 4px; }
body.nl-picking .nl-grid { padding-bottom: 80px; }
.nl-count { padding: 8px 22px 10px; }
/* the notice of unread notes, on opening the site (base.html) */
.notes-toast { position: fixed; top: 16px; right: 16px; z-index: 300; width: min(360px, calc(100vw - 32px)); display: flex; gap: 12px;
  align-items: flex-start; padding: 14px 14px 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .2); }
.notes-toast[hidden] { display: none; }
.notes-toast > svg { color: var(--brand); flex: none; margin-top: 2px; }
.notes-toast-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; font-size: .9rem; }
.notes-toast-body span { color: var(--muted); font-size: .82rem; }
.notes-toast-body .btn { align-self: flex-start; }
.notes-toast .icon-btn { margin: -4px -4px 0 0; }
@media (max-width: 700px) { .note-fab { right: 16px; bottom: 16px; width: 48px; height: 48px; } .nd-actions .muted { display: none; } }
@media print { .note-fab, .notes { display: none; } }

/* Two-step verification (core/two_factor.html) */
.auth-card.wide { max-width: 460px; }
.tf-steps { padding-left: 20px; margin: 0 0 20px; font-size: .92rem; }
.tf-steps li { margin-bottom: 10px; }
.tf-qr { margin: 10px 0; }
.tf-qr svg { display: block; margin: 0 auto; width: 200px; max-width: 100%; aspect-ratio: 1; height: auto; border-radius: 8px; }
.tf-secret { word-break: break-all; }
.tf-code { font-size: 1.4rem; letter-spacing: .25em; text-align: center; }
.tf-codes { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-codes code { display: block; text-align: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; }

/* Files dropped on a page (core/drop.js) */
.drop-over { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(2px); pointer-events: none; }
.drop-over[hidden] { display: none; }
.drop-over-box { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 440px;
  padding: 36px 40px; border: 2px dashed var(--brand); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.drop-over-box svg { color: var(--brand); }
.drop-over-box strong { font-size: 1.15rem; }
.drop-over-box span { font-size: .88rem; color: var(--muted); }
/* the page waiting for the server (app.js afisBusy): takes every click, unlike the drop layer */
.busy { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; cursor: progress;
  background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(2px); }
.busy-box { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 440px;
  padding: 32px 40px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.busy-box strong { font-size: 1.1rem; }
.busy-box span { font-size: .88rem; color: var(--muted); }
.busy-box .busy-spin { width: 32px; height: 32px; border: 3px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%;
  animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-box .busy-spin { animation-duration: 2.4s; } }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 240px; padding: 32px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface);
  color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone:hover, .drop-zone.is-over, .drop-zone:focus-within { border-color: var(--brand); background: var(--brand-soft); }
.drop-zone svg { color: var(--brand); }
.drop-zone strong { font-size: 1.2rem; color: var(--ink); }
.drop-zone .btn { margin-top: 4px; }

/* ------------------------------------------------------------------ one look for every module
   The same pieces in every module look and behave the same: these rules are the only ones for them (each module's
   stylesheet keeps only what is its own). A module's own prefix stays on its markup (cf Cash Flow, cb Cobranzas,
   gx Gastos, cx Comercio Exterior, vx Ventas, bk Banco, dd Deuda); the plain names are for new pages. */

/* the page's head: a kicker (the module, what the page is), the title, the month and its arrows, the actions */
.mod-head, .cf-head, .cb-head, .gx-head, .cx-head, .vx-head, .dd-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.mod-head .actions, .cf-head .actions, .dd-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kicker, .cf-kicker, .cb-kicker, .gx-kicker, .cx-kicker, .vx-kicker, .bk-kicker {
  font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: 4px; letter-spacing: 0; text-transform: none; }
.mod-month, .cb-month, .gx-month, .vx-month { display: flex; align-items: center; gap: 10px; }
.mod-month h1, .cb-month h1, .gx-month h1, .vx-month h1 { margin: 0; }
.mod-nav, .cb-nav, .gx-nav, .vx-nav { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.mod-nav:hover, .cb-nav:hover, .gx-nav:hover, .vx-nav:hover { background: var(--surface-2); text-decoration: none; }
.mod-nav.flip svg, .cb-nav.flip svg, .gx-nav.flip svg, .vx-nav.flip svg { transform: scaleX(-1); }

/* the figures at the top: a card each — what it is, the figure, a line about it */
.kpis, .cf-cards, .cb-cards, .gx-cards, .cx-cards, .vx-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.kpis-5 { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }  /* five short figures in one row */
.kpi, .cf-card, .cb-card, .gx-card, .cx-card, .vx-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi h2, .cf-card h2, .cb-card h2, .gx-card h2, .cx-card h2, .vx-card h2 { font-size: .9rem; font-weight: 500; color: var(--muted); }
.kpi h2 span, .cf-card h2 span, .cb-card h2 span, .gx-card h2 span, .cx-card h2 span, .vx-card h2 span {
  font-size: .8rem; font-weight: 400; margin-left: 4px; }
.kpi-big, .cf-big, .cb-big, .gx-big, .cx-big, .vx-big {
  font-size: clamp(1.6rem, 1rem + 1.25vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-big small, .cf-big small, .cb-big small, .gx-big small, .cx-big small, .vx-big small {
  font-size: .9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi-note, .cb-note, .gx-note, .vx-note, .cx-card .cx-note { margin: auto 0 0; font-size: .8rem; color: var(--muted); }
.cx-card .cx-note { display: block; padding: 0; border-top: 0; }  /* not Comercio Exterior's review rows of the same name */

/* a section: a card with its head (title, a line about it, its tools) over its body */
.panel, .cf-panel, .cb-panel, .gx-panel, .cx-panel, .vx-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.panel-head, .cf-panel-head, .gx-panel-head, .cx-panel-head, .vx-panel-head, .card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.panel-head h2, .cf-panel-head h2, .cb-panel-head h2, .gx-panel-head h2, .cx-panel-head h2, .vx-panel-head h2, .card-head h2, .gx-mes-head h2 {
  font-size: 1.05rem; font-weight: 600; }
.panel-head > .muted, .cf-panel-head > .muted, .cb-panel-head > .muted, .gx-panel-head > .muted, .cx-panel-head > .muted,
.vx-panel-head > .muted, .card-head > .muted { flex: 1 1 280px; }

/* «Para revisar», every module the same (core/_review.html, core/_reviewed.html): the box, each topic with its items
   and their buttons; «Revisados», by topic */
.rv { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--radius);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.review-box > summary h2 span { font-size: .82rem; font-weight: 500; color: var(--warn); margin-left: 6px; }
.rv-topic { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; }
.rv-topic strong { font-size: .92rem; }
.rv-topic.lvl-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.rv-topic.lvl-bad strong { color: var(--bad); }
.rv-topic.lvl-info strong { color: var(--ink-2); }
.rv-topic-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rv-detail { font-size: .84rem; color: var(--ink-2); }
.rv-detail a { font-weight: 600; white-space: nowrap; }
.rv-items { list-style: none; margin: 4px 0 0; padding: 0; font-size: .86rem; color: var(--ink-2); display: flex; flex-direction: column; }
.rv-item { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.rv-item:first-child { border-top: 0; }
.rv-item-body { flex: 1 1 auto; min-width: 0; }
.rv-item-body a { color: inherit; }
.rv-item-body a:hover { color: var(--brand); }
.rv-note { font-size: .8rem; color: var(--muted); }
.rv-state { display: block; font-size: .78rem; color: var(--ok); margin-top: 2px; }
.rv-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: none; margin: 0; }
.rv-more summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.rv-more-li { padding-top: 6px; }
.rv-reviewed-link { align-self: flex-start; font-size: .84rem; font-weight: 600; }
.rv-allclear { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: .9rem; font-weight: 500; }
.rv-allclear a { font-weight: 600; }
.rv-closed { margin: 10px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rv-closed:last-child { margin-bottom: 16px; }
.rv-closed > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer;
  list-style: none; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.rv-closed > summary::-webkit-details-marker { display: none; }
.rv-closed[open] > summary .rv-chev { transform: rotate(180deg); }
.rv-closed.lvl-bad > summary { color: var(--bad); }
.rv-closed .rv-items { margin: 0; padding: 0 14px 6px; }
.rv-chev { color: var(--muted); display: inline-flex; transition: transform .15s; }
.rv.addto-host > summary { padding-right: 36px; }
@container (max-width: 560px) { .rv-item { flex-wrap: wrap; } .rv-acts { width: 100%; justify-content: flex-end; } }
.danger-text { color: var(--bad); }
.cf-chev, .gx-chev, .cx-chev { color: var(--muted); display: inline-flex; transition: transform .15s; }

/* a line's «pagado» tick (Gastos, Comercio Exterior) */
.gx-tick-form, .cx-tick-form { margin: 0; }
.gx-tick, .cx-tick { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); color: var(--muted); box-sizing: border-box; }
.gx-tick:hover, .cx-tick:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.gx-tick:focus-visible, .cx-tick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) { .gx-tick, .cx-tick { width: 36px; height: 36px; } }

/* suggestions under a field (Gastos' concept, Ventas' client) */
/* one client's page (core/clients.py): a section per module, its figures and its tables; the name that leads there, which
   does not shout from a table of hundreds; the search in the side menu, outside the menu's scroll so its list can show */
.client-page { display: flex; flex-direction: column; gap: 32px; margin-top: 20px; }
.client-list { margin-top: 20px; }
.client-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.client-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.client-section-head h2 { font-size: 1.2rem; font-weight: 600; }
.client-section-head .actions { margin-left: auto; }
.client-section-note { margin: 0; max-width: 90ch; }
.client-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.client-link:hover { color: var(--brand); text-decoration-color: currentColor; }
.client-search { position: relative; margin: 0 0 10px; }
.client-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.client-search input { padding-left: 34px; }
.sugg-box { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); overflow: hidden; max-height: 340px; overflow-y: auto; }
.sugg-box [role="option"] { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; cursor: pointer; }
.sugg-box [role="option"] + [role="option"] { border-top: 1px solid var(--border); }
.sugg-box [role="option"][aria-selected="true"], .sugg-box [role="option"]:hover { background: var(--brand-soft); }
.sugg-box b { font-weight: 600; font-size: .92rem; color: var(--ink); }
.sugg-box span { font-size: .78rem; color: var(--muted); }
.sugg-box .none { padding: 10px 12px; font-size: .84rem; color: var(--muted); }

/* the test install (AFIS_ENV_LABEL): a strip on every page, so it is never taken for production */
.env-strip { position: sticky; top: 0; z-index: 900; height: var(--env-h); padding: 0 16px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; font-weight: 600;
  letter-spacing: .02em; background: repeating-linear-gradient(-45deg, #b45309 0 14px, #c2620f 14px 28px); color: #fff; }
body.has-env { --env-h: 26px; }
body.has-env .sidebar { top: var(--env-h); height: calc(100vh - var(--env-h)); height: calc(100dvh - var(--env-h)); }
body.has-env .app { min-height: calc(100dvh - var(--env-h)); }
@media (max-width: 900px) { body.has-env .sidebar { top: var(--env-h); height: auto; } }

/* «Ver como» (core.view_as): an administrator seeing the platform as someone else must never take it for their own */
.viewas-strip { position: sticky; top: var(--env-h, 0px); z-index: 900; height: var(--viewas-h); padding: 0 16px; display: flex; align-items: center;
  gap: 12px; background: var(--warn); color: var(--surface); font-size: .9rem; font-weight: 600; }
.viewas-strip > svg { flex: none; }
.viewas-who { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.viewas-strip form { display: flex; align-items: center; gap: 6px; margin: 0; }
.viewas-strip select { width: 170px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: .86rem; }
body.has-viewas { --viewas-h: 48px; }
body.has-viewas .sidebar { top: calc(var(--env-h, 0px) + var(--viewas-h)); height: calc(100vh - var(--env-h, 0px) - var(--viewas-h)); height: calc(100dvh - var(--env-h, 0px) - var(--viewas-h)); }
body.has-viewas .app { min-height: calc(100dvh - var(--env-h, 0px) - var(--viewas-h)); }
body.has-viewas .dash-editbar { top: var(--viewas-h); }
.viewas-mini { margin-left: auto; flex: none; max-width: 55%; min-width: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: var(--warn); color: var(--surface); font-size: .78rem; }
.viewas-mini svg { flex: none; }
.viewas-mini b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
/* on a phone the strip takes the lines it needs and scrolls away; the top bar, always there, keeps saying it */
@media (max-width: 900px) {
  .viewas-strip { position: static; height: auto; padding: 8px 16px; flex-wrap: wrap; gap: 8px; }
  .viewas-who { flex: 1 1 calc(100% - 30px); white-space: normal; overflow-wrap: anywhere; }
  .viewas-switch { flex: 1 1 100%; min-width: 0; }
  .viewas-strip select { flex: 1 1 0; width: auto; min-width: 0; height: 38px; }
  .viewas-strip form:last-child { flex: 1 1 100%; }
  .viewas-strip form:last-child .btn { width: 100%; }
  body.has-viewas { --viewas-h: 0px; }
}
@media print { .viewas-strip, .viewas-mini { display: none; } }
.viewas-start > summary { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .78rem; color: var(--ink-2); cursor: pointer; list-style: none; }
.viewas-start > summary::-webkit-details-marker { display: none; }
.viewas-start > summary:hover { color: var(--ink); text-decoration: underline; }
.viewas-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.viewas-pop label { font-size: .84rem; font-weight: 500; color: var(--ink); }