/* ============================================================
   WHITE WORLD — overlays: modals, wizards (step flows), drawers, dialogs
   Spec: docs/design-system/WHITE_WORLD_DESIGN_SYSTEM.md (sections 2.3.1 and 4).
   Every rule is scoped to :root[data-visual-system="white-world"][data-design-system].
   Loaded after components.css on every page.

   components.css already gives every .modal-* / .ds-modal-* its chrome (radius 12,
   e3, header 20/24, body 24, footer 16/24 on gray 25, 32 px close). This sheet adds
   what makes a modal calm to use, for the two modal families the app has:
     - Bootstrap:  .modal > .modal-dialog > .modal-content > .modal-header/body/footer
     - DS overlay: .ds-overlay > .ds-modal > .ds-modal-header/body/footer
   1. Widths on one scale (sm 400 / md 560 / lg 800 / xl 1140); viewers keep theirs.
   2. Height: header and footer stay put, only the body scrolls.
   3. Header: title icon in a 32 px chip (the page header's pattern at modal size),
      subtitle in gray; legacy tinted/dark headers back to white.
   4. Body rhythm: no trailing margin, quiet help text, section headings in ink.
   5. Footer: actions 8 apart, primary last on the right, destructive far left;
      legacy green/amber confirm buttons read as the one primary action.
   6. Accent directs attention: a disabled primary drops to neutral (it is not
      where the user can act yet); the wizard's current step carries the turquoise.
   7. Phone (<576): near full-screen sheet, 16 px insets, actions share the row.
   ============================================================ */

/* ---------- 1. Widths ---------- */
:root[data-visual-system="white-world"][data-design-system] .modal { --bs-modal-width: 560px; --bs-modal-margin: 28px; }
:root[data-visual-system="white-world"][data-design-system] .modal-sm { --bs-modal-width: 400px; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal-sm { max-width: 400px !important; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal-lg { max-width: 800px !important; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal-xl { max-width: 1140px !important; }

/* ---------- 2. Height: fixed header and footer, scrolling body ---------- */
@media (min-width: 576px) {
    :root[data-visual-system="white-world"][data-design-system] .modal-dialog:not(.modal-fullscreen) > .modal-content {
        max-height: calc(100dvh - 2 * var(--bs-modal-margin));
    }
}
:root[data-visual-system="white-world"][data-design-system] .modal-content > :is(.modal-header, .modal-footer) { flex-shrink: 0; }
:root[data-visual-system="white-world"][data-design-system] .modal-content > .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* a <form> wrapping header/body/footer must pass the flex column through */
:root[data-visual-system="white-world"][data-design-system] .modal-content > form:has(> .modal-body) { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
:root[data-visual-system="white-world"][data-design-system] .modal-content > form > .modal-body { min-height: 0; overflow-y: auto; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal { max-height: calc(100dvh - 2 * var(--ww-s-8)) !important; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal > :is(.ds-modal-header, .ds-modal-footer) { flex-shrink: 0; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal > .ds-modal-body { min-height: 0; overscroll-behavior: contain; }

/* ---------- 3. Header ---------- */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) { align-items: center; min-height: 72px; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) {
    display: flex; align-items: center; gap: var(--ww-stack-gap); margin: 0; min-width: 0;
    color: var(--ww-text) !important; line-height: 1.2 !important; letter-spacing: -.005em;
}
:root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) > i:first-child {
    flex: none; width: 32px; height: 32px; border-radius: var(--ww-r-inner); display: inline-grid !important; place-items: center;
    background: var(--ww-selected) !important; color: var(--ww-t-700) !important; font-size: 16px !important; margin: 0 !important;
}
/* semantic dialogs keep their state colour in the chip, never in the bar */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) > i:first-child:is(.fa-exclamation-triangle, .fa-triangle-exclamation) { background: var(--ww-warn-bg) !important; color: var(--ww-warn-text) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) > i:first-child:is(.fa-trash, .fa-trash-alt, .fa-trash-can) { background: var(--ww-err-bg) !important; color: var(--ww-err-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .mh-warning :is(.modal-title, .ds-modal-title) > i:first-child { background: var(--ww-warn-bg) !important; color: var(--ww-warn-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .mh-danger :is(.modal-title, .ds-modal-title) > i:first-child { background: var(--ww-err-bg) !important; color: var(--ww-err-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .mh-success :is(.modal-title, .ds-modal-title) > i:first-child { background: var(--ww-ok-bg) !important; color: var(--ww-ok-text) !important; }
/* subtitle / intro line under the title */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) :is(p, small, .text-muted, .modal-subtitle, .ds-modal-subtitle, .ds-confirm-subtitle):not(.modal-title) {
    color: var(--ww-text-2) !important; font-size: var(--ww-fs-13) !important; line-height: 1.45; margin: 4px 0 0 !important; font-weight: var(--ww-fw-regular);
}
/* legacy tinted, dark or inline-coloured header bars -> the white header */
:root[data-visual-system="white-world"][data-design-system] .modal-header:is([class*="bg-"], .text-white, [style*="background"]) {
    background: var(--ww-surface) !important; background-image: none !important; color: var(--ww-text) !important; border-bottom: 1px solid var(--ww-border) !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-header:is([class*="bg-"], .text-white, [style*="background"]) :is(.modal-title, .modal-title *) { color: var(--ww-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-title[style*="color"] { color: var(--ww-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-header::before { content: none !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-header .btn-close-white { filter: none !important; }
/* close: neutral (it used to turn red on hover), with the system focus ring */
:root[data-visual-system="white-world"][data-design-system] .modal { --bs-btn-close-focus-shadow: var(--ww-focus-ring); }
:root[data-visual-system="white-world"][data-design-system] .ds-modal-close {
    flex: none; width: 32px !important; height: 32px !important; border-radius: var(--ww-r-inner) !important; margin-inline-start: auto;
    background: transparent !important; color: var(--ww-text-2) !important; border: 0 !important;
}
:root[data-visual-system="white-world"][data-design-system] .ds-modal-close:hover { background: var(--ww-hover) !important; color: var(--ww-text) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.btn-close, .ds-modal-close):focus-visible { box-shadow: var(--ww-focus-ring) !important; opacity: 1; }

/* ---------- 4. Body rhythm ---------- */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) { color: var(--ww-text); font-size: var(--ww-fs-14); line-height: var(--ww-lh-body); }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) > :last-child,
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) > form > :last-child { margin-bottom: 0 !important; }
@media (min-width: 768px) {
    :root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(> .row:last-child, > form > .row:last-child) > [class*="col"] { margin-bottom: 0 !important; }
}
/* a form group inside a flex/grid that already spaces its children must not add its own
   16 px on top (the gap + margin gave 32-40 px between fields) */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(.ds-flex, .d-flex, .d-grid, .ds-grid, .ds-grid-2, .ds-grid-3, [style*="gap"]) > :is(.mb-3, .ds-form-group, .ds-field) { margin-bottom: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) form[style*="gap"] { gap: var(--ww-field-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(.ds-grid-2, .ds-grid-3) { column-gap: var(--ww-field-gap) !important; row-gap: var(--ww-field-gap) !important; }
/* checkbox rows: .ds-check-group is a column of items; used around a single box + label it put
   the box alone above its label. Box and label on one line. */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body, .aio-step) .ds-check-group:has(> .ds-check-input) { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: var(--ww-s-3); margin-bottom: var(--ww-stack-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body, .aio-step) .ds-check-group > .ds-check-input { flex: none; margin: 2px 0 0 !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body, .aio-step) .ds-check-group > .ds-check-label { margin: 0 !important; line-height: 1.45; }
:root[data-visual-system="white-world"][data-design-system] #autoStartConfirmModal .ds-check-label > i.fa-check-circle { display: none; }
:root[data-visual-system="white-world"][data-design-system] #autoStartConfirmModal .auto-start-checklist { margin: var(--ww-s-4) 0; }
/* help text: short and gray, 4 px under its field */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(.form-text, .ds-help, .ds-field-hint, .ds-hint) {
    color: var(--ww-text-3) !important; font-size: var(--ww-fs-12) !important; line-height: 1.4; margin-top: 4px !important;
}
/* block headings inside a modal: ink 14/600, sentence case (never tracked capitals) */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(h6, .h6, .text-uppercase, .ds-overline, .ds-eyebrow) {
    text-transform: none !important; letter-spacing: 0 !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(h6, .h6) { font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text) !important; }
/* no box inside the box: a card inside a modal is a flat, bordered group */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(.card, .ds-card) { box-shadow: none !important; border-radius: var(--ww-r-inner) !important; }
/* a lone full-width primary at the end of a body (forms without a footer) sits like a footer action */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(.ds-btn-primary, .btn-primary):is(.ds-w-full, .w-100):last-child {
    width: auto !important; min-height: var(--ww-control) !important; display: flex !important; margin: var(--ww-s-6) 0 0 auto !important; padding: 0 16px !important; font-size: var(--ww-fs-14) !important;
}

/* status notes inside a dialog are part of the flow: 16 below them, like a field */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-body, .ds-modal-body) :is(.alert, .ds-alert):not(:last-child) { margin-bottom: var(--ww-block-gap) !important; }

/* Confirm / prompt dialogs (ui-feedback.js): header and message read as one block */
:root[data-visual-system="white-world"][data-design-system] .ds-modal-header.ds-confirm-header { border-bottom: 0 !important; padding-bottom: var(--ww-s-2) !important; min-height: 0; }
:root[data-visual-system="white-world"][data-design-system] .ds-modal-body.ds-confirm-body { padding-top: var(--ww-s-2) !important; padding-left: calc(var(--ww-modal-pad) + 40px + var(--ww-s-3)) !important; color: var(--ww-text-2); }
:root[data-visual-system="white-world"][data-design-system] .ds-confirm-badge { width: 40px !important; height: 40px !important; border-radius: 10px !important; border: 0 !important; font-size: 18px !important; }
:root[data-visual-system="white-world"][data-design-system] .ds-confirm-headline { color: var(--ww-text) !important; font-weight: var(--ww-fw-semibold) !important; }

/* ---------- 5. Footer ---------- */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer):not(.flex-column) > :is(.btn-primary, .ds-btn-primary, .btn-danger, .ds-btn-danger) { order: 10; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :is(.btn-outline-danger, .ds-btn-outline-danger) { order: -1; margin-inline-end: auto !important; }
/* a help link that opens the footer ("¿No ves tu marca?") sits on the left, away from the actions */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer):not(.flex-column) > :is(.btn-link, .ds-btn-link, a:not(.btn):not(.ds-btn)):first-child { margin-inline-end: auto !important; }
/* components.css zeroes footer margins; the templates' own me-auto / ms-auto splits must survive */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > .me-auto { margin-inline-end: auto !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > .ms-auto { margin-inline-start: auto !important; }
/* status text in a footer (cost, step count, last saved) sits on the left; the actions group on the right */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer):not(.flex-column) > :not(button, a, .btn, .ds-btn, [hidden]):first-child { margin-inline-end: auto !important; color: var(--ww-text-2); font-size: var(--ww-fs-13); }
/* legacy green / amber confirm buttons in a dialog footer are its primary action */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :is(.btn-success, .ds-btn-success, .btn-warning, .ds-btn-warning, .btn-info) {
    position: relative; background: var(--ww-action) !important; border: 1px solid var(--ww-action) !important; color: #fff !important;
    border-top-right-radius: 0 !important; box-shadow: var(--ww-e1) !important;
    clip-path: polygon(0 0, calc(100% - var(--ww-chamfer)) 0, 100% var(--ww-chamfer), 100% 100%, 0 100%);
}
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :is(.btn-success, .ds-btn-success, .btn-warning, .ds-btn-warning, .btn-info):hover { background: var(--ww-action-hover) !important; border-color: var(--ww-action-hover) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :is(.btn-success, .ds-btn-success, .btn-warning, .ds-btn-warning, .btn-info) :is(i, .fa, .fas, .far) { color: #fff !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer):not(.flex-column) > :is(.btn-success, .ds-btn-success, .btn-warning, .ds-btn-warning, .btn-info) { order: 10; }
/* cancel in a footer is a quiet secondary: no leading icon competing with the action */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :is(.btn-secondary, .ds-btn-secondary, .btn-outline-secondary, .btn-light, .btn-ghost, .ds-btn-ghost):is([data-bs-dismiss], [data-modal-id], [data-action="close-modal"]) > :is(i, .fa, .fas):first-child { display: none; }

/* ---------- 6. Accent directs attention ---------- */
/* A disabled primary is not where the user can act yet: neutral, no chamfer glow. */
:root[data-visual-system="white-world"][data-design-system] :is(.modal, .ds-overlay, .aio-wizard-nav, [class*="setup-footer"]) :is(.btn-primary, .ds-btn-primary, :is(.modal-footer, .ds-modal-footer) > :is(.btn-success, .ds-btn-success, .btn-warning, .ds-btn-warning, .btn-info)):is(:disabled, .disabled) {
    opacity: 1 !important; background: var(--ww-sunken) !important; border-color: var(--ww-sunken) !important; color: var(--ww-text-disabled) !important; box-shadow: none !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(.modal, .ds-overlay, .aio-wizard-nav, [class*="setup-footer"]) :is(.btn-primary, .ds-btn-primary, :is(.modal-footer, .ds-modal-footer) > :is(.btn-success, .ds-btn-success, .btn-warning, .ds-btn-warning, .btn-info)):is(:disabled, .disabled) :is(i, .fa, .fas, .far) { color: var(--ww-text-disabled) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal, .ds-overlay, .aio-wizard-nav, [class*="setup-footer"]) :is(.btn-primary, .ds-btn-primary):is(:disabled, .disabled)::after { opacity: 0 !important; }

/* ---------- 8. No decorative capitals anywhere inside a dialog ---------- */
:root[data-visual-system="white-world"][data-design-system] :is(.modal-content, .ds-modal) :where(*) { text-transform: none !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-content, .ds-modal) :is([class*="section-title"], [class*="eyebrow"], [class*="overline"], [class*="kicker"], .text-uppercase, h6, legend, th) { letter-spacing: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.modal-content, .ds-modal) :is([class*="section-title"], [class*="eyebrow"], [class*="overline"]):not(h1, h2, h3, h4, h5) {
    font-size: var(--ww-fs-13) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text-2) !important;
}

/* ============================================================
   DRAWERS (Bootstrap offcanvas, the fabrication workflow drawer, the help drawer)
   Same chrome as a dialog: white, e3, header 20/24 with an Archivo 20 title and the
   32 px close, body 24; side edge without a second border.
   ============================================================ */
:root[data-visual-system="white-world"][data-design-system] :is(.offcanvas, .workflow-drawer) {
    background: var(--ww-surface) !important; border: 0 !important; box-shadow: var(--ww-e3) !important; color: var(--ww-text);
}
:root[data-visual-system="white-world"][data-design-system] .offcanvas-backdrop.show { background: var(--ww-n-900) !important; opacity: .45 !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.offcanvas-header, .workflow-drawer-header) {
    min-height: 72px; padding: 20px var(--ww-modal-pad) !important; border-bottom: 1px solid var(--ww-border) !important; background: var(--ww-surface) !important; gap: var(--ww-stack-gap);
}
:root[data-visual-system="white-world"][data-design-system] :is(.offcanvas-title, .workflow-drawer-header h5) {
    display: flex; align-items: center; gap: var(--ww-stack-gap); margin: 0;
    font-family: var(--ww-font-display); font-stretch: 85%; font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-20) !important; line-height: 1.2; color: var(--ww-text) !important;
}
:root[data-visual-system="white-world"][data-design-system] .offcanvas-title > i:first-child {
    flex: none; width: 32px; height: 32px; border-radius: var(--ww-r-inner); display: inline-grid !important; place-items: center;
    background: var(--ww-selected) !important; color: var(--ww-t-700) !important; font-size: 16px !important; margin: 0 !important;
}
:root[data-visual-system="white-world"][data-design-system] .offcanvas-header .btn-close { margin: 0 0 0 auto !important; width: 32px; height: 32px; padding: 0 !important; border-radius: var(--ww-r-inner); background-size: 12px; opacity: .6; }
:root[data-visual-system="white-world"][data-design-system] .offcanvas-header .btn-close:hover { background-color: var(--ww-hover); opacity: 1; }
:root[data-visual-system="white-world"][data-design-system] :is(.offcanvas-body, .workflow-drawer-body) { padding: var(--ww-modal-pad) !important; }
:root[data-visual-system="white-world"][data-design-system] .workflow-drawer-section + .workflow-drawer-section { margin-top: var(--ww-s-6) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.workflow-drawer-section-title, .ds-help-drawer-section-title) {
    font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 var(--ww-s-2) !important;
}
:root[data-visual-system="white-world"][data-design-system] .ds-help-drawer-section + .ds-help-drawer-section { margin-top: var(--ww-s-6) !important; }
:root[data-visual-system="white-world"][data-design-system] .ds-help-drawer-section-body { color: var(--ww-text-2) !important; font-size: var(--ww-fs-14) !important; line-height: var(--ww-lh-body); margin: 0; }

/* ============================================================
   WIZARDS (step flows inside dialogs)
   One stepper for every flow: a number dot and a label per step, joined by a
   2 px track. Pending = gray ring; current = turquoise ring with a halo and the
   label in ink (the one place the eye should go); done = filled turquoise, label
   stays gray. No boxed step pills (they read as buttons and double the frame).
   ============================================================ */
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) {
    display: flex !important; gap: 0 !important; margin: 0 0 var(--ww-s-6) !important; padding: 0 !important; list-style: none;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 0 !important; display: flex !important; flex-direction: column; align-items: center; gap: var(--ww-s-2) !important;
    padding: 0 4px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ww-text-2) !important; text-align: center;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li + li::before {
    content: ""; position: absolute; top: 12px; right: calc(50% + 18px); left: calc(-50% + 18px); height: 2px; border-radius: 2px; background: var(--ww-border);
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li:is(.is-active, .is-complete)::before { background: var(--ww-t-300) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li > span:first-child {
    width: 26px !important; height: 26px !important; flex: none; display: inline-grid !important; place-items: center; border-radius: 999px !important;
    background: var(--ww-surface) !important; border: 1.5px solid var(--ww-border-strong) !important; color: var(--ww-text-2) !important;
    font: var(--ww-fw-semibold) 12px/1 var(--ww-font-ui) !important; font-variant-numeric: tabular-nums;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li > strong {
    font-size: var(--ww-fs-13) !important; font-weight: var(--ww-fw-semibold) !important; color: inherit !important; line-height: 1.3; overflow-wrap: anywhere;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li.is-active { color: var(--ww-text) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li.is-active > span:first-child {
    border-color: var(--ww-accent) !important; color: var(--ww-t-700) !important; box-shadow: 0 0 0 4px var(--ww-selected) !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li.is-complete:not(.is-active) > span:first-child {
    background: var(--ww-accent) !important; border-color: var(--ww-accent) !important; color: #fff !important;
}
/* segmented progress bar (messaging wizard): done = quiet turquoise, current = full turquoise */
:root[data-visual-system="white-world"][data-design-system] .messaging-wizard-progress { gap: 4px !important; margin-bottom: var(--ww-s-6) !important; }
:root[data-visual-system="white-world"][data-design-system] .messaging-wizard-progress span { height: 4px !important; background: var(--ww-sunken) !important; }
:root[data-visual-system="white-world"][data-design-system] .messaging-wizard-progress span.is-done { background: var(--ww-t-200) !important; }
:root[data-visual-system="white-world"][data-design-system] .messaging-wizard-progress span.is-current { background: var(--ww-accent) !important; }
:root[data-visual-system="white-world"][data-design-system] .messaging-wizard-progress:empty { display: none; }
:root[data-visual-system="white-world"][data-design-system] .modal-body .messaging-wizard-step > h6 { font-family: var(--ww-font-display); font-stretch: 85%; font-size: var(--ww-fs-17) !important; font-weight: var(--ww-fw-bold) !important; margin-bottom: var(--ww-s-2) !important; }
:root[data-visual-system="white-world"][data-design-system] .messaging-wizard-step > p { color: var(--ww-text-2) !important; margin-bottom: var(--ww-s-4) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.messaging-wizard-checklist, .messaging-wizard-steps-list) { padding-left: 20px !important; margin-bottom: var(--ww-s-4) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.messaging-wizard-checklist, .messaging-wizard-steps-list) li { margin-bottom: var(--ww-s-2) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.messaging-wizard-checklist, .messaging-wizard-steps-list) li::marker { color: var(--ww-text-3); }

/* Bridge connection wizards (scanner, RX/CBCT, face scanner) inside a dialog: the dialog is
   the frame, so the panel loses its own box and its title (the dialog title already says
   it); the intro line and the two utility actions stay on one quiet row. */
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-panel, .radiology-intake-panel, .design_aux-intake-panel, .design-aux-intake-panel) {
    border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-panel-header, .radiology-intake-panel-header, .design_aux-intake-panel-header, .design-aux-intake-panel-header) {
    padding: 0 0 var(--ww-s-6) !important; margin: 0 !important; border: 0 !important; background: transparent !important; align-items: center !important; gap: var(--ww-block-gap) !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-panel-header, .radiology-intake-panel-header, .design_aux-intake-panel-header, .design-aux-intake-panel-header) h2 {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-panel-header, .radiology-intake-panel-header, .design_aux-intake-panel-header, .design-aux-intake-panel-header) p {
    margin: 0 !important; color: var(--ww-text-2) !important; font-size: var(--ww-fs-14) !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-setup-body, .radiology-setup-body, .design_aux-setup-body) { padding: 0 !important; gap: var(--ww-block-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-setup, .radiology-intake-setup, .design_aux-intake-setup) { margin: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-setup-panel-copy, .radiology-setup-panel-copy, .design_aux-setup-panel-copy) h3 {
    font-family: var(--ww-font-display); font-stretch: 85%; font-size: var(--ww-fs-17) !important; font-weight: var(--ww-fw-bold) !important; margin: 0 0 4px !important; color: var(--ww-text) !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-setup-panel-copy, .radiology-setup-panel-copy, .design_aux-setup-panel-copy) p { color: var(--ww-text-2) !important; }

/* Choice cards in a wizard step (provider / scanner): the selection pattern */
:root[data-visual-system="white-world"][data-design-system] :is(.ios-provider-choice, .radiology-provider-choice, .design_aux-provider-choice) {
    border: 1px solid var(--ww-border-strong) !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-surface) !important; box-shadow: none !important;
    transition: border-color var(--ww-t-fast), background-color var(--ww-t-fast);
}
:root[data-visual-system="white-world"][data-design-system] :is(.ios-provider-choice, .radiology-provider-choice, .design_aux-provider-choice):hover { border-color: var(--ww-border-hover) !important; background: var(--ww-n-25) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.ios-provider-choice, .radiology-provider-choice, .design_aux-provider-choice):focus-visible { box-shadow: var(--ww-focus-ring) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.ios-provider-choice, .radiology-provider-choice, .design_aux-provider-choice):is(.is-selected, [aria-pressed="true"]) {
    border-color: var(--ww-t-200) !important; background: var(--ww-t-25) !important; box-shadow: inset 0 0 0 1px var(--ww-t-200) !important;
}

/* ============================================================
   FILE DROP TILES (uploads inside dialogs)
   Quiet empty-state tile: gray 25, 1 px dashed, icon chip in turquoise 50; turquoise
   border only while dragging or focused (where the file will land); a chosen file
   reads as done (solid border, green chip), never a green wash.
   ============================================================ */
:root[data-visual-system="white-world"][data-design-system] .p360-upload-dropzone {
    min-height: 76px !important; padding: var(--ww-s-4) !important; gap: var(--ww-s-3) !important; text-align: start !important;
    border: 1px dashed var(--ww-border-strong) !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-n-25) !important; box-shadow: none !important; transform: none !important;
}
:root[data-visual-system="white-world"][data-design-system] .p360-upload-dropzone:is(:hover, .is-dragover) { border-color: var(--ww-t-300) !important; background: var(--ww-t-25) !important; }
:root[data-visual-system="white-world"][data-design-system] .p360-upload-dropzone:focus-within { border-color: var(--ww-t-500) !important; box-shadow: var(--ww-focus-ring) !important; }
:root[data-visual-system="white-world"][data-design-system] .p360-upload-icon {
    width: 36px !important; height: 36px !important; border: 0 !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-selected) !important; color: var(--ww-t-700) !important;
}
:root[data-visual-system="white-world"][data-design-system] .p360-upload-copy { text-align: start !important; min-width: 0; }
:root[data-visual-system="white-world"][data-design-system] .p360-upload-copy strong { font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .p360-upload-hint { font-size: var(--ww-fs-12) !important; color: var(--ww-text-3) !important; }
:root[data-visual-system="white-world"][data-design-system] .p360-upload-dropzone:is(.is-selected, .is-filled) { border-style: solid !important; border-color: var(--ww-ok-border) !important; background: var(--ww-surface) !important; }
:root[data-visual-system="white-world"][data-design-system] .p360-upload-dropzone:is(.is-selected, .is-filled) .p360-upload-icon { background: var(--ww-ok-bg) !important; color: var(--ww-ok-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body .row:has(> [class*="col"] > .p360-upload-dropzone) { --bs-gutter-x: var(--ww-block-gap); }

/* Shared file dropper (static/js/shared/file_dropper.js: recipe wizards, Todo en uno, uploads):
   same quiet tile, stacked (icon chip, title, hint). "Required" is said by the badge, not by a
   turquoise frame: the frame lights up only while dragging or focused. */
:root[data-visual-system="white-world"][data-design-system] :is(.ml-file-dropper, .upload-zone) {
    border: 1px dashed var(--ww-border-strong) !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-n-25) !important;
    box-shadow: none !important; transform: none !important; padding: var(--ww-s-6) var(--ww-s-4) !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ml-file-dropper, .upload-zone):is(:hover, .is-dragover, .drag-over, .dragover, .ds-drag-over) { border-color: var(--ww-t-300) !important; background: var(--ww-t-25) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.ml-file-dropper, .upload-zone):focus-visible { border-color: var(--ww-t-500) !important; box-shadow: var(--ww-focus-ring) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.ml-file-dropper, .upload-zone):is(.has-file, .remote-file) { border-style: solid !important; border-color: var(--ww-ok-border) !important; background: var(--ww-surface) !important; }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__content { gap: var(--ww-s-1) !important; }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__icon {
    width: 40px; height: 40px; display: inline-grid !important; place-items: center; margin: 0 0 var(--ww-s-2) !important; border-radius: var(--ww-r-inner);
    background: var(--ww-selected) !important; color: var(--ww-t-700) !important; font-size: 20px !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(.ml-file-dropper.has-file, .ml-file-dropper.remote-file) .ml-file-dropper__icon { background: var(--ww-ok-bg) !important; color: var(--ww-ok-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__title { font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text) !important; gap: var(--ww-inline-gap); }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__hint { font-size: var(--ww-fs-12) !important; color: var(--ww-text-3) !important; }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__badge { min-height: 20px !important; padding: 0 8px !important; font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-medium) !important; }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__badge--required { background: var(--ww-sunken) !important; border-color: transparent !important; color: var(--ww-text-2) !important; }
:root[data-visual-system="white-world"][data-design-system] .ml-file-dropper__badge--optional { background: transparent !important; border-color: var(--ww-border) !important; color: var(--ww-text-3) !important; }
/* recipe wizard: the slot label repeats the tile title; kept for screen readers only */
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-file-slot-label {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-file-slot-grid { column-gap: var(--ww-block-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step > h6:first-child { display: flex; align-items: center; gap: var(--ww-inline-gap); margin-bottom: var(--ww-s-4) !important; }
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step > h6:first-child > i { color: var(--ww-icon); }

/* Recipe parameter steps (Diseña recipe wizard and Todo en uno share them; which params show is
   the live catalog's call, docs/POLITICA_PARAMETROS_RECETA_UI.md - only their look changes here).
   Sections were gray boxes inside the dialog, with turquoise headings: now flat blocks split by a
   hairline, headings in ink. Selected options use the selection pattern; the "what you get"
   choice was a solid turquoise slab whose description vanished (turquoise text on turquoise). */
:root[data-visual-system="white-world"][data-design-system] .disena-service-step > hr:first-child { display: none; }
:root[data-visual-system="white-world"][data-design-system] :is(#serviceModal, .aio-step) .param-section {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(#serviceModal, .aio-step) .param-section ~ :is(.param-section, section) {
    margin-top: var(--ww-s-6) !important; padding-top: var(--ww-s-6) !important; border-top: 1px solid var(--ww-border) !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(#serviceModal, .aio-step) :is(.param-section h6, #designOutputSelection > h6) {
    display: flex; align-items: center; gap: var(--ww-inline-gap); color: var(--ww-text) !important; font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; margin-bottom: var(--ww-s-4) !important;
}
:root[data-visual-system="white-world"][data-design-system] :is(#serviceModal, .aio-step) :is(.param-section h6, #designOutputSelection > h6) > i:first-child { color: var(--ww-icon) !important; }
:root[data-visual-system="white-world"][data-design-system] #designOutputSelection > h6:has(+ p) { margin-bottom: 4px !important; }
:root[data-visual-system="white-world"][data-design-system] #designOutputSelection > h6 + p { margin-bottom: var(--ww-s-6) !important; color: var(--ww-text-2) !important; font-size: var(--ww-fs-13) !important; }
:root[data-visual-system="white-world"][data-design-system] .recipe-param-description { display: block; color: var(--ww-text-3) !important; font-size: var(--ww-fs-12) !important; margin: 2px 0 var(--ww-s-2); }
:root[data-visual-system="white-world"][data-design-system] .recipe-param-splint-half-label { color: var(--ww-text-2) !important; font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold); }
:root[data-visual-system="white-world"][data-design-system] .recipe-param-option-gallery { gap: var(--ww-inline-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] .recipe-param-option-card {
    border: 1px solid var(--ww-border-strong) !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-surface) !important; box-shadow: none !important;
    font-size: var(--ww-fs-12) !important; color: var(--ww-text-2) !important; transition: border-color var(--ww-t-fast), background-color var(--ww-t-fast);
}
:root[data-visual-system="white-world"][data-design-system] .recipe-param-option-card:hover:not(:disabled) { border-color: var(--ww-border-hover) !important; background: var(--ww-n-25) !important; }
:root[data-visual-system="white-world"][data-design-system] .recipe-param-option-card:focus-visible { outline: none !important; box-shadow: var(--ww-focus-ring) !important; }
:root[data-visual-system="white-world"][data-design-system] .recipe-param-option-card.is-selected {
    border-color: var(--ww-t-500) !important; background: var(--ww-t-25) !important; box-shadow: inset 0 0 0 1px var(--ww-t-500) !important; color: var(--ww-t-800) !important; font-weight: var(--ww-fw-semibold);
}
/* "what to print when the design is ready" */
:root[data-visual-system="white-world"][data-design-system] .output-type-group + .output-type-group { margin-top: var(--ww-s-6) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-group-header { margin-bottom: var(--ww-s-2) !important; align-items: baseline; }
:root[data-visual-system="white-world"][data-design-system] .output-type-group-title { color: var(--ww-text) !important; font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; display: inline-flex; align-items: center; gap: var(--ww-inline-gap); }
:root[data-visual-system="white-world"][data-design-system] .output-type-group-count {
    background: var(--ww-sunken) !important; color: var(--ww-text-2) !important; border: 0 !important; border-radius: var(--ww-r-pill) !important; padding: 0 8px !important; font-size: var(--ww-fs-12) !important; font-weight: var(--ww-fw-semibold); font-variant-numeric: tabular-nums; line-height: 20px;
}
:root[data-visual-system="white-world"][data-design-system] .output-type-group-note { color: var(--ww-text-3) !important; font-size: var(--ww-fs-12) !important; }
:root[data-visual-system="white-world"][data-design-system] :is(.output-type-grid, .output-type-selector:not(.grouped)) { gap: var(--ww-inline-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn {
    border: 1px solid var(--ww-border-strong) !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-surface) !important; color: var(--ww-text) !important;
    padding: var(--ww-s-4) !important; box-shadow: none !important; transition: border-color var(--ww-t-fast), background-color var(--ww-t-fast) !important;
}
:root[data-visual-system="white-world"][data-design-system] .output-type-btn:hover { border-color: var(--ww-border-hover) !important; background: var(--ww-n-25) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn:focus-within { box-shadow: var(--ww-focus-ring) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn > i { color: var(--ww-icon) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn strong { font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn .output-type-description { color: var(--ww-text-2) !important; font-size: var(--ww-fs-12) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn.active {
    border-color: var(--ww-t-500) !important; background: var(--ww-t-25) !important; box-shadow: inset 0 0 0 1px var(--ww-t-500) !important;
}
:root[data-visual-system="white-world"][data-design-system] .output-type-btn.active > i { color: var(--ww-t-700) !important; }
:root[data-visual-system="white-world"][data-design-system] .output-type-btn.active .output-type-description { color: var(--ww-t-800) !important; }
:root[data-visual-system="white-world"][data-design-system] .disena-autoprint-card {
    border: 1px solid var(--ww-border) !important; border-radius: var(--ww-r-inner) !important; background: var(--ww-n-25) !important; box-shadow: none !important; padding: var(--ww-s-4) !important; margin: var(--ww-s-6) 0 0 !important;
}
:root[data-visual-system="white-world"][data-design-system] .disena-autoprint-card .form-check-label { font-size: var(--ww-fs-14); }

/* ============================================================
   SPECIFIC DIALOGS (scoped by id)
   ============================================================ */

/* Nuevo paciente (/patients): 13 fields in one column. A hairline and 24 px group them
   without new labels: identity + contact | document & admin | address | consent & notes. */
:root[data-visual-system="white-world"][data-design-system] #patientForm > .mb-3:has(#patientAddress),
:root[data-visual-system="white-world"][data-design-system] #patientForm > .form-check:has(#patientLopd) { margin-top: var(--ww-s-2) !important; padding-top: var(--ww-s-6) !important; border-top: 1px solid var(--ww-border); }
/* a .row spans its gutters, so its hairline is a full-width flex item inset by half a gutter */
:root[data-visual-system="white-world"][data-design-system] #patientForm > .row:has(#patientNationalIdKind) { margin-top: var(--ww-s-2) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientForm > .row:has(#patientNationalIdKind)::before {
    content: ""; flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x)); margin: 0 calc(var(--bs-gutter-x) * .5) var(--ww-s-6); border-top: 1px solid var(--ww-border);
}
:root[data-visual-system="white-world"][data-design-system] #patientForm > .form-check:has(#patientLopd) { padding-left: 1.75em !important; }

/* Dictado clínico (patient file): three rows lit in turn */
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-body { gap: var(--ww-block-gap) !important; align-content: start; }
/* full-screen below 992: the close button stays in the corner; title on its own row, objective under it */
@media (max-width: 991.98px) {
    :root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-header { position: relative; flex-wrap: wrap; padding-inline-end: 64px !important; row-gap: var(--ww-s-3); }
    :root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-header-side { flex: 1 1 100%; margin: 0 !important; }
    :root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-header-side .form-select { flex: 1 1 auto; }
    :root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-header-side .btn-close { position: absolute; top: 14px; inset-inline-end: 16px; }
}
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row { padding: var(--ww-s-4) var(--ww-s-5) !important; border-radius: var(--ww-r-card) !important; border-color: var(--ww-border) !important; background: var(--ww-surface) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row[data-state="active"] { border-color: var(--ww-t-200) !important; box-shadow: 0 0 0 3px var(--ww-selected) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row[data-state="locked"] { opacity: 1 !important; background: var(--ww-n-25) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row[data-state="locked"] .p360-dict-row-title { color: var(--ww-text-3) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row-head { gap: var(--ww-inline-gap) !important; margin-bottom: var(--ww-s-4) !important; min-height: 28px; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row:is([data-state="locked"], [data-state="done"]:not(.is-expanded)) .p360-dict-row-head { margin-bottom: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row-num {
    width: 26px !important; height: 26px !important; font: var(--ww-fw-semibold) 12px/1 var(--ww-font-ui) !important; font-variant-numeric: tabular-nums;
    background: var(--ww-surface) !important; border: 1.5px solid var(--ww-border-strong); color: var(--ww-text-3) !important;
}
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row[data-state="active"] .p360-dict-row-num { border-color: var(--ww-accent); color: var(--ww-t-700) !important; box-shadow: 0 0 0 4px var(--ww-selected); }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row[data-state="done"] .p360-dict-row-num { background: var(--ww-accent) !important; border-color: var(--ww-accent); color: #fff !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row-title { font-family: var(--ww-font-display); font-stretch: 85%; font-weight: var(--ww-fw-bold); font-size: var(--ww-fs-17) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row-lock { font-size: var(--ww-fs-13) !important; color: var(--ww-text-3) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-row-body { gap: var(--ww-stack-gap) !important; }
/* the transcript label repeats the row title ("Dictar" / "Dictado"): kept for screen readers only */
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal label[for="patientDictationTranscript"] {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-meta { font-size: var(--ww-fs-12) !important; color: var(--ww-text-3) !important; font-variant-numeric: tabular-nums; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-header-side { gap: var(--ww-inline-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-header-side .ds-label { color: var(--ww-text-2) !important; font-weight: var(--ww-fw-medium) !important; font-size: var(--ww-fs-13) !important; }
/* footer: traceability left, actions right on one row; the open trace drops below */
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-footer { justify-content: space-between !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-trace:not([open]) { flex: 0 1 auto !important; order: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-trace[open] { order: 2 !important; }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-trace > summary { font-size: var(--ww-fs-13); color: var(--ww-text-2); }
:root[data-visual-system="white-world"][data-design-system] #patientDictationModal .p360-dict-footer-actions { margin-inline-start: auto !important; gap: var(--ww-inline-gap) !important; }

/* Recipe wizard (Diseña, serviceModal): step 1 opened with an info box that repeats the
   recipe name; it becomes a plain intro line (name + cost), so the field is the focus. */
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step[data-step-key="patient"] > .ds-alert-info:first-child {
    background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 var(--ww-s-6) !important; color: var(--ww-text-2) !important; display: block;
}
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step[data-step-key="patient"] > .ds-alert-info:first-child > i:first-child { display: none; }
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step[data-step-key="patient"] > .ds-alert-info:first-child > strong { color: var(--ww-text) !important; font-weight: var(--ww-fw-medium) !important; font-size: var(--ww-fs-14); }
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step[data-step-key="patient"] > .ds-alert-info:first-child > small { font-size: var(--ww-fs-13); color: var(--ww-text-2); font-variant-numeric: tabular-nums; }
:root[data-visual-system="white-world"][data-design-system] #serviceModal .disena-service-step > .mb-4:last-child { margin-bottom: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] :is(#serviceModal, #implantPlanningModal) .ds-label > i:first-child { color: var(--ww-icon); margin-inline-end: 4px; }
/* the reason why "Next" is disabled sits by the footer, quiet */
:root[data-visual-system="white-world"][data-design-system] .recipe-wizard-blocked-hint { margin-top: var(--ww-s-4) !important; color: var(--ww-text-3) !important; font-size: var(--ww-fs-12) !important; text-align: end; }

/* Intake detail dialogs (IOS batch, RX/CBCT study, face scan): the title is a div; the
   section headings were tracked capitals */
:root[data-visual-system="white-world"][data-design-system] .modal-header :is(.ios-intake-detail-title, .radiology-intake-detail-title, .design_aux-intake-detail-title) {
    font-family: var(--ww-font-display); font-stretch: 85%; font-weight: var(--ww-fw-bold) !important; font-size: var(--ww-fs-20) !important; line-height: 1.2; color: var(--ww-text) !important; overflow-wrap: anywhere;
}
:root[data-visual-system="white-world"][data-design-system] .modal-header :is(.ios-batch-modal-tags, .radiology-detail-modal-tags, .design_aux-detail-modal-tags) { display: flex; flex-wrap: wrap; gap: var(--ww-inline-gap); margin-top: var(--ww-s-2); }
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-batch-modal-section-title, .radiology-detail-modal-section-title, .design_aux-detail-modal-section-title) {
    font-family: var(--ww-font-ui) !important; font-size: var(--ww-fs-14) !important; font-weight: var(--ww-fw-semibold) !important; color: var(--ww-text) !important; margin: 0 0 var(--ww-s-2) !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-batch-modal-assign, .radiology-detail-modal-assign, .design_aux-detail-modal-assign) { margin-top: var(--ww-s-6) !important; padding-top: var(--ww-s-6) !important; gap: var(--ww-stack-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-batch-modal-assign, .radiology-detail-modal-assign, .design_aux-detail-modal-assign) > :is(h3, [class*="section-title"]) { margin: 0 !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-batch-modal-assign-sub, .radiology-detail-modal-assign-sub, .design_aux-detail-modal-assign-sub) { color: var(--ww-text-2) !important; font-size: var(--ww-fs-13) !important; margin: calc(-1 * var(--ww-s-2)) 0 var(--ww-s-1) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-detail-meta, .radiology-intake-detail-meta) { color: var(--ww-text-2); font-size: var(--ww-fs-13); margin-bottom: var(--ww-s-4) !important; font-variant-numeric: tabular-nums; }

/* Confirmación de facturación (/microlai): the header chip already warns; the amount is a figure, not an error */
:root[data-visual-system="white-world"][data-design-system] #billingConfirmModal .modal-body > .text-center:has(> .fa-exclamation-triangle) { display: none; }
:root[data-visual-system="white-world"][data-design-system] #billingConfirmModal #billingEstimateAmount { color: var(--ww-text) !important; font-variant-numeric: tabular-nums; }
:root[data-visual-system="white-world"][data-design-system] #billingConfirmModal .modal-body > p.fs-5 { font-size: var(--ww-fs-16) !important; text-align: start !important; margin-bottom: var(--ww-s-4) !important; }

/* Cambio de resina (/microlai): values as quiet figures, not centred headlines */
:root[data-visual-system="white-world"][data-design-system] #resinChangeModal :is(#resinChangeTankName, #resinChangeSelectedName) {
    font-size: var(--ww-fs-16) !important; text-align: start !important; padding: 0 !important; margin: 4px 0 var(--ww-s-4) !important; color: var(--ww-text) !important;
}
:root[data-visual-system="white-world"][data-design-system] #resinChangeModal .modal-body > p:not([id]) { margin: 0; color: var(--ww-text-2); font-size: var(--ww-fs-13); }

/* Sala / recurso nuevos (/preferences, clinic layout): the mini-form was a box inside the
   dialog, its label repeated the title, and its submit is the dialog's one action. */
:root[data-visual-system="white-world"][data-design-system] .modal-body > .clinic-layout-mini-form {
    border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; display: grid !important; gap: var(--ww-stack-gap) !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body > .clinic-layout-mini-form > .form-label:first-child {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
:root[data-visual-system="white-world"][data-design-system] .modal-body > .clinic-layout-mini-form > button[type="submit"] {
    justify-self: end; width: auto !important; margin-top: var(--ww-s-3); position: relative; background: var(--ww-action) !important; border: 1px solid var(--ww-action) !important; color: #fff !important;
    border-top-right-radius: 0 !important; box-shadow: none !important; clip-path: polygon(0 0, calc(100% - var(--ww-chamfer)) 0, 100% var(--ww-chamfer), 100% 100%, 0 100%);
}
:root[data-visual-system="white-world"][data-design-system] .modal-body > .clinic-layout-mini-form > button[type="submit"]:hover { background: var(--ww-action-hover) !important; }
:root[data-visual-system="white-world"][data-design-system] .modal-body > .clinic-layout-mini-form > button[type="submit"] i { color: #fff !important; }

/* ---------- 7. Phone: near full-screen sheet ---------- */
@media (max-width: 575.98px) {
    :root[data-visual-system="white-world"][data-design-system] .modal { --bs-modal-margin: 8px; }
    :root[data-visual-system="white-world"][data-design-system] .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]) > .modal-content { max-height: calc(100dvh - 16px); }
    :root[data-visual-system="white-world"][data-design-system] .ds-overlay { padding: 8px !important; }
    :root[data-visual-system="white-world"][data-design-system] .ds-modal { max-height: calc(100dvh - 16px) !important; }
    :root[data-visual-system="white-world"][data-design-system] :is(.modal-header, .ds-modal-header) { min-height: 60px; padding: 14px var(--ww-modal-pad) !important; }
    :root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) { font-size: var(--ww-fs-17) !important; }
    :root[data-visual-system="white-world"][data-design-system] :is(.modal-title, .ds-modal-title) > i:first-child { width: 28px; height: 28px; font-size: 14px !important; }
    :root[data-visual-system="white-world"][data-design-system] :is(.modal-footer, .ds-modal-footer) > :is(.btn, .ds-btn) { flex: 1 1 auto; min-height: 40px; }
    :root[data-visual-system="white-world"][data-design-system] .ds-modal-body.ds-confirm-body { padding-left: var(--ww-modal-pad) !important; }
    /* steppers: one row; only the current step keeps its label on screen (all stay for screen readers) */
    :root[data-visual-system="white-world"][data-design-system] :is(.ios-setup-steps, .radiology-setup-steps, .design_aux-setup-steps) > li:not(.is-active) > strong {
        position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
    }
    :root[data-visual-system="white-world"][data-design-system] .modal-body :is(.ios-intake-panel-header, .radiology-intake-panel-header, .design_aux-intake-panel-header) { flex-wrap: wrap; }
}

/* ---------- Recipe wizards: why «Siguiente» is disabled, said next to it ----------
   recipe_wizard.js inserts the hint between the body and the footer. On white, after the body's
   24 px and its own 16 px margin, it floated ~50 px away from the button it explains. It now joins
   the footer: same grey, the divider moves above it, and the footer below loses its own line. */
:root[data-visual-system="white-world"][data-design-system] .recipe-wizard-blocked-hint:not([hidden]) {
    margin: 0 !important; padding: var(--ww-stack-gap) var(--ww-modal-pad) 0 !important; text-align: right;
    background: var(--ww-n-25); border-top: 1px solid var(--ww-border); color: var(--ww-text-2) !important; font-size: var(--ww-fs-13);
}
:root[data-visual-system="white-world"][data-design-system] .recipe-wizard-blocked-hint:not([hidden]) > div + div { margin-top: var(--ww-s-1); }
:root[data-visual-system="white-world"][data-design-system] .recipe-wizard-blocked-hint:not([hidden]) i { color: var(--ww-warn-solid) !important; }
:root[data-visual-system="white-world"][data-design-system] .recipe-wizard-blocked-hint:not([hidden]) + :is(.ds-modal-footer, .modal-footer, .recipe-wizard-footer) { border-top: 0 !important; padding-top: var(--ww-inline-gap) !important; }

/* Step 1 rhythm: «Cambiar elección» is its own block (16 below); field -> patient buttons 12; help 8. */
:root[data-visual-system="white-world"][data-design-system] .disena-service-step > .ds-btn-link:first-child { margin-bottom: var(--ww-block-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] .patient-selector-input-group { row-gap: var(--ww-stack-gap) !important; column-gap: var(--ww-inline-gap) !important; }
:root[data-visual-system="white-world"][data-design-system] .patient-selector-container + .form-text { margin-top: var(--ww-inline-gap) !important; display: block; }

/* Todo en uno (page wizard): the same «why is Siguiente disabled» hint joins its nav bar. */
:root[data-visual-system="white-world"][data-design-system] #aioNewFlowPanel .aio-wizard-blocked-hint:not([hidden]) {
    margin: var(--ww-header-gap) 0 0 !important; padding-top: var(--ww-card-pad); border-top: 1px solid var(--ww-border);
    text-align: right; color: var(--ww-text-2) !important; font-size: var(--ww-fs-13);
}
:root[data-visual-system="white-world"][data-design-system] #aioNewFlowPanel .aio-wizard-blocked-hint:not([hidden]) i { color: var(--ww-warn-solid) !important; }
:root[data-visual-system="white-world"][data-design-system] #aioNewFlowPanel .aio-wizard-blocked-hint:not([hidden]) + .aio-wizard-nav { margin-top: var(--ww-inline-gap) !important; padding-top: 0 !important; border-top: 0 !important; }

/* Recipe stepper on a phone: one line; only the current step keeps its label (it wrapped to 2 rows). */
@media (max-width: 575.98px) {
    :root[data-visual-system="white-world"][data-design-system] .recipe-stepper { flex-wrap: nowrap !important; }
    :root[data-visual-system="white-world"][data-design-system] .recipe-stepper__item { flex: 1 1 0 !important; min-width: 0 !important; }
    :root[data-visual-system="white-world"][data-design-system] .recipe-stepper__item:not(.is-current) .recipe-stepper__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    :root[data-visual-system="white-world"][data-design-system] .recipe-stepper__item.is-current .recipe-stepper__label { white-space: nowrap; }
}