/* ALFRED MATERIALS v3.1 (brand pack v3.1, RULES sections 3, 5 and 7; locked 15 Oct 2026). Surfaces, layers and motion for every shared part: the card (a 1px line and the soft shadow),
   raised (hover, the lead band, the advice card), the floating panel, the dialog, the menu, the scrim, the shimmer. Replaces Materials v2.1 (the dark desk, the 22px sheet, the 16px cards,
   the frosted layers): retired. There is no switch: Alfred is not launched, so v3.1 replaces v2 directly (IMPLEMENTATION.md step 1).
   Every rule is scoped body.al so it outranks the older shared rules; the per-screen sheets carry the same template and follow it. No screen is restyled by hand. */

/* CARD: white, a 1px line #E6EAF0 and the soft shadow; the corners are 6. Rows inside are divided by hairlines, never by a fill. */
body.al [id^="view-"] :is(.al-region, .depth-card, .ml-card, .mx-card, .al-card) {
  border-radius: var(--al-r-card); border: 1px solid var(--al-divider); box-shadow: var(--al-shadow-card); background: var(--al-card);
}
body.al [id^="view-"] .al-region .al-flow { background: none; border-radius: 0; padding-inline: 0; }
/* RAISED: a clickable card rises 2px and takes the raised shadow on hover (RULES section 17) */
body.al [id^="view-"] :is(.al-region, .mx-card)[role="button"]:hover,
body.al [id^="view-"] a.al-region:hover { box-shadow: var(--v3-shadow-raised); transform: translateY(var(--v3-lift)); transition: box-shadow var(--al-t-hover) var(--al-ease), transform var(--al-t-hover) var(--al-ease); }

/* TABS: text tabs on a hairline; the selected one is navy and bold with a brass underline (brass marks "this one") */
body.al [id^="view-"] .alf-tabs { background: none; border-radius: 0; padding: 0; gap: 26px; border: 0; border-bottom: 1px solid var(--al-divider); }
body.al [id^="view-"] .alf-tab { height: 40px; border-radius: 0; padding: 0; background: none; box-shadow: none; color: var(--al-text-2); font-weight: 500; }
body.al [id^="view-"] .alf-tab:hover { background: none; color: var(--al-action); box-shadow: inset 0 -2px 0 var(--al-selected); }
body.al [id^="view-"] .alf-tab[aria-selected="true"] { background: none; color: var(--al-action); font-weight: 700; box-shadow: inset 0 -2px 0 var(--al-brass); }

/* LEAD (B9): one sentence, why, one action. A raised white card with the brass edge. Only where the backend has a "needs you" source. No tinted fill, no dark card. */
body.al [id^="view-"] .al-lead { background: var(--al-card); box-shadow: var(--v3-shadow-raised), inset 3px 0 0 var(--al-brass); color: var(--al-text); border: 0; border-radius: var(--al-r-card); }

/* FLOAT: side panels, the Alfred drawer, menus and dialogs sit above the work. The panel floats 12px in from the top, the right and the bottom; the page behind it is dimmed 26%. */
body.al .ml-scrim, body.al #view-matter .mx-scrim, body.al #view-postsale .ps-scrim, body.al .rv-scrim, body.al .cv-scrim { background: var(--v3-scrim); }
body.al .ml-panel, body.al #view-matter .mx-side, body.al .al-pop.al-dialogue {
  top: calc(var(--al-topbar-h) + var(--v3-layer-inset)); right: var(--v3-layer-inset); bottom: var(--v3-layer-inset);
  width: min(436px, calc(100vw - 2 * var(--v3-layer-inset)));
  background: var(--al-card); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-radius: var(--v3-radius-layer); box-shadow: var(--v3-shadow-layer); overflow: hidden;
}
/* one side panel everywhere (audits AC-9, MA): the Accounting, Cash desk, Relationships, Tasks and Agencies panels float like the Matters list panel, the close mark on the title line */
body.al .rv-panel {
  top: calc(var(--al-topbar-h) + var(--v3-layer-inset)); right: var(--v3-layer-inset); bottom: var(--v3-layer-inset);
  max-width: calc(100vw - 2 * var(--v3-layer-inset)); background: var(--al-card);
  border: 0; border-radius: var(--v3-radius-layer); box-shadow: var(--v3-shadow-layer); overflow: hidden;
}
body.al .rv-panel .rv-panel-hd { align-items: center; padding-top: 0; min-height: 56px; }
body.al .al-menu, body.al .al-pop:not(.al-dialogue) {
  background: var(--al-card); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-radius: var(--v3-radius-menu); box-shadow: var(--v3-shadow-menu);
}
body.al dialog.depth-dialog, body.al .al-dialog {
  background: var(--al-card); -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-radius: var(--v3-radius-layer); box-shadow: var(--v3-shadow-layer);
}
body.al dialog.depth-dialog::backdrop { background: var(--v3-scrim); }
body.al:has(.al-pop.al-dialogue.is-open)::before { content: ""; position: fixed; top: var(--al-topbar-h); left: 0; right: 0; bottom: 0; z-index: 59; background: var(--v3-scrim); pointer-events: none; }

/* The Matter: the header stays put while the page scrolls under it, on white with a hairline (no frosted glass). The wrapper is in 26_matter.js. */
body.al #view-matter { position: relative; }
body.al #view-matter .mx-glass { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: var(--al-z-sticky); padding-bottom: 12px; background: var(--al-card); box-shadow: 0 1px 0 var(--al-divider); }
body.al #view-matter .mx-glass #mx-head[data-mode="full"] { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding-top: 0; padding-bottom: 0; }
body.al #view-matter#view-matter #mx-tabbody#mx-tabbody { padding-top: calc(var(--mx-glass-h, 0px) + var(--al-pad-card)); }
body.al #view-matter #mx-tabs { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; gap: 26px; margin-top: 12px; width: fit-content; max-width: calc(100% - 2 * var(--mx-gutter)); border-bottom: 0; }
body.al #view-matter #mx-tabs .al-tab { height: 40px; border-radius: 0; padding: 0; background: none; box-shadow: none; color: var(--al-text-2); font-weight: 500; }
body.al #view-matter #mx-tabs .al-tab:hover { background: none; color: var(--al-action); box-shadow: inset 0 -2px 0 var(--al-selected); }
body.al #view-matter #mx-tabs .al-tab[aria-selected="true"] { background: none; color: var(--al-action); font-weight: 700; box-shadow: inset 0 -2px 0 var(--al-brass); }
body.al #view-matter #mx-tabs [data-tab="personas"]::before { display: none; }
body.al #view-matter:has(#mx-head[data-mode="line"]) #mx-head { background: transparent; }
body.al #view-matter:has(#mx-head[data-mode="line"]) #mx-tabs { background: none; border-radius: 0; padding: 0; margin: 0 var(--mx-gutter); border-bottom: 0; box-shadow: none; width: fit-content; max-width: calc(100% - 2 * var(--mx-gutter)); }

/* The Alfred drawer: solid white, the writing box at the bottom, the double-ring A by its title */
body.al .al-pop.al-dialogue .al-dialogue-body { flex: 1; min-height: 0; }
body.al .al-pop.al-dialogue .al-dialogue-ft { margin-top: auto; }
body.al .al-pop.al-dialogue .al-alfred-name { display: inline-flex; align-items: center; gap: 10px; }
body.al .al-pop.al-dialogue .al-alfred-name::before { content: "A"; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--al-action), inset 0 0 0 3px var(--al-card), inset 0 0 0 4px var(--al-brass); display: inline-flex; align-items: center; justify-content: center; font-family: var(--al-font-identity); font-size: 18px; font-weight: 500; color: var(--al-action); }
body.al .al-pop.al-dialogue #al-rm-fb-open { background: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--al-line-strong); color: var(--al-text-2); height: 28px; padding: 0 12px; }
body.al .al-pop.al-dialogue .al-rm-hint { margin: 0; color: var(--al-text-2); font-size: var(--al-fs-label); line-height: 1.5; }
body.al .al-pop.al-dialogue .al-dialogue-body:has(#al-rm-heard:not([hidden])) .al-rm-hint, body.al .al-pop.al-dialogue .al-dialogue-body:has(#al-rm-plan:not([hidden])) .al-rm-hint, body.al .al-pop.al-dialogue .al-dialogue-body:has(#al-rm-fb:not([hidden])) .al-rm-hint, body.al .al-pop.al-dialogue .al-dialogue-body:has(#al-rm-fail:not([hidden])) .al-rm-hint { display: none; }
body.al .main-wrap { min-height: calc(100vh - var(--al-topbar-h)); }
body.al .main-wrap > .al-main { flex: 1 0 auto; }

/* Loading: a bare "Cargando..." line (marked al-skel by 47_alf_kit.js) is drawn as shimmer bars in the shape of the content, never as words */
body.al .al-skel { background: none !important; box-shadow: none; position: relative; min-height: 56px; color: transparent !important; user-select: none; pointer-events: none; overflow: hidden; }
body.al .al-skel::before, body.al .al-skel::after { content: ""; position: absolute; left: 0; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--al-selected) 0, var(--v3-grid) 120px, var(--al-selected) 240px); background-size: 600px 100%; animation: alShimmer var(--v3-t-shimmer) linear infinite; }
body.al .al-skel::before { top: 4px; width: 80%; }
body.al .al-skel::after { top: 28px; width: 60%; }

/* Alfred advice (the Matter's and Comunicaciones' advice panels): white, the brass edge, the double-ring A. Always a proposal. No tinted fill. */
body.al .co-advice-body, body.al .mx-advice-body { background: var(--al-card); box-shadow: inset 3px 0 0 var(--al-brass); border-radius: var(--al-r-card); padding: 14px 16px; }
body.al .co-advice-hd h3::before, body.al .mx-advice-hd h3::before { content: "A"; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--al-action), inset 0 0 0 3px var(--al-card), inset 0 0 0 4px var(--al-brass); font-family: var(--al-font-identity); font-size: 16px; font-weight: 500; color: var(--al-action); vertical-align: middle; }

/* The old inline looks of index.html (the old side panels, modals, forms and banners): the same surfaces as the kit, over the inline values */
body.al #client-profile-panel,
body.al #network-contact-panel,
body.al #case-overview-panel,
body.al #client-funds-panel,
body.al #client-payments-panel,
body.al #transfers-panel,
body.al #fees-panel {
  top: calc(var(--al-topbar-h) + var(--v3-layer-inset)) !important; right: var(--v3-layer-inset) !important; bottom: var(--v3-layer-inset) !important;
  background: var(--al-card) !important; border: 0 !important; border-radius: var(--v3-radius-layer) !important; box-shadow: var(--v3-shadow-layer) !important; overflow: hidden;
}
body.al #cf-add-form,
body.al #cp2-add-form,
body.al #tr-cf-add-form,
body.al #tr-cp-add-form,
body.al #fees-propose-preview,
body.al #fees-add-form,
body.al #notify-changes-summary,
body.al #cp-alfred-response,
body.al #ncp-alfred-response,
body.al #dwo-upload-result { background: var(--al-selected) !important; border: 0 !important; border-radius: var(--al-r-card) !important; }
body.al #fee-legal-pct,
body.al #fee-nie-count,
body.al #fee-digicert-count,
body.al #fee-poa-count,
body.al #fee-admin-amount,
body.al #fee-other-label,
body.al #fee-other-amount,
body.al #crm-score-signal,
body.al #crm-score-note,
body.al #dmm-recipient-name,
body.al #dmm-recipient-addr,
body.al #dmm-re-line,
body.al #dmm-lawyer,
body.al #dmm-lang,
body.al #draft-email-to,
body.al #draft-email-name,
body.al #draft-email-subject,
body.al #draft-email-body,
body.al #cp-alfred-btn,
body.al #ncp-alfred-btn { background: var(--al-card) !important; border-color: var(--al-line-strong) !important; border-radius: var(--al-r-control) !important; }
body.al #ar-tier-banner,
body.al #ap-import-banner { background: var(--al-selected) !important; border: 0 !important; border-radius: var(--al-r-card) !important; }
body.al #client-profile-panel *,
body.al #network-contact-panel *,
body.al #case-overview-panel *,
body.al #client-funds-panel *,
body.al #client-payments-panel *,
body.al #transfers-panel *,
body.al #fees-panel *,
body.al #crm-score-modal > div *,
body.al #doc-meta-modal > div *,
body.al #dd-modal > div *,
body.al #draft-email-modal > div * { font-family: var(--al-font-ui) !important; text-transform: none !important; letter-spacing: normal !important; }
body.al #client-profile-overlay,
body.al #network-contact-overlay,
body.al #case-overview-overlay,
body.al #client-funds-overlay,
body.al #client-payments-overlay,
body.al #transfers-overlay,
body.al #fees-overlay,
body.al #crm-score-modal,
body.al #doc-meta-modal,
body.al #dd-modal,
body.al #draft-email-modal { background: var(--v3-scrim) !important; }
body.al #crm-score-modal > div,
body.al #doc-meta-modal > div,
body.al #dd-modal > div,
body.al #draft-email-modal > div { background: var(--al-card) !important; border: 0 !important; border-radius: var(--v3-radius-layer) !important; box-shadow: var(--v3-shadow-layer) !important; }

/* v3.1 step 1 audit v2 (Claude Design, 15 Oct 2026), S1-1 to S1-7 */
/* S1-2: a tab strip wider than its room scrolls and fades at the edge it continues past; it never cuts a tab silently (kit JS sets has-more-right / has-more-left) */
body.al :is(.alf-tabs, .al-tabs, #mx-tabs) { scrollbar-width: none; }
body.al :is(.alf-tabs, .al-tabs, #mx-tabs)::-webkit-scrollbar { display: none; }
body.al :is(.alf-tabs, .al-tabs, #mx-tabs).has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
body.al :is(.alf-tabs, .al-tabs, #mx-tabs).has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); }
body.al :is(.alf-tabs, .al-tabs, #mx-tabs).has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
body.al #view-matter #mx-tabs { overflow-x: auto; }
/* S1-5: the lead band (B9) is the page's one starting point: white, the 3px brass left edge, the raised shadow, a 17/700 title. The id scope beats the per-screen card rules */
body.al #view-firm .al-region.al-lead { background: var(--al-card); border: 0; border-radius: var(--al-r-card); box-shadow: var(--v3-shadow-raised), inset 3px 0 0 var(--al-brass); }
body.al .al-lead .al-region-hd .al-label { font-size: 17px; font-weight: 700; }
/* S1-7: one link style inside cards: 14.5/600 navy, a chevron icon at the end, never a typed arrow */
body.al .al-prov { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: var(--al-fs-ui); color: var(--al-text); }
body.al .al-prov a, body.al a[data-fo-signoffs] { display: inline-flex; align-items: center; gap: 2px; color: var(--al-action); font-size: var(--al-fs-ui); font-weight: 600; text-decoration: none; }
body.al .al-prov a:hover, body.al a[data-fo-signoffs]:hover { text-decoration: underline; }
body.al .al-prov a .alf-icon, body.al a[data-fo-signoffs] .alf-icon { width: 16px; height: 16px; flex: none; stroke: currentColor; }
/* S1-6: both Communications columns run to the bottom with the 24px end space; the empty reader is the kit empty state, centred */
body.al #view-inbox #co-reader #co-read { border: 0; }
body.al #view-inbox #co-read:has(> .alf-state) { display: flex; }
body.al .alf-state .alf-state-icon { width: 32px; height: 32px; stroke: var(--v3-text-3); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body.al .alf-state > strong { font-size: var(--al-fs-ui); font-weight: 600; color: var(--al-text-2); }

/* BD-30 and BD-32 (CD audit, 17 Oct), every side panel: the close is a 40x40 quiet icon button centred on the title line (RULES section 19), and the scrim also covers the menu's logo cell so the menu dims as one piece while the top bar stays bright */
body.al .rv-panel .rv-panel-hd { align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 64px !important; }
body.al .rv-panel .rv-panel-hd > button[id$="-panel-x"], body.al .rv-panel .rv-panel-hd > .alf-button--icon { flex: none; width: 40px; min-width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; margin-right: -8px; }
body.al .rv-panel .rv-panel-hd > button[id$="-panel-x"] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
body.al .rv-scrim::before { content: ""; position: fixed; left: 0; top: 0; width: var(--al-rail-w); height: var(--al-topbar-h); background: var(--v3-scrim); }