/* ConciliA: shared tokens, primitives, components and responsive states. */
@font-face { font-family: Inter; src: url("/assets/InterVariable.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --brand-red: #FF0000;
  --brand-black: #000000;
  --brand-yellow: #FFC400;
  --gray-dark: #2B2B2B;
  --gray-medium: #6E6E6E;
  --gray-light: #EDEDED;
  --white: #FFFFFF;
  --color-bg: #fafafa;
  --color-surface: var(--white);
  --color-surface-alt: #f7f7f7;
  --color-surface-hover: var(--gray-light);
  --color-surface-sunken: #e5e5e5;
  --color-border: #dddddd;
  --color-text: var(--gray-dark);
  --color-text-muted: var(--gray-medium);
  --color-on-fill: var(--white);
  --color-primary: var(--gray-dark);
  --color-primary-h: var(--brand-black);
  --color-info-bg: var(--color-surface-alt);
  --color-info-bd: var(--color-border);
  --color-info-strong: var(--gray-light);
  --color-ghost-bg: var(--color-info-bg);
  --color-dragover: var(--color-info-bg);
  --color-intelligence: var(--gray-dark);
  --color-intelligence-bg: var(--gray-light);
  --color-success: #16805b;
  --color-success-h: #106446;
  --color-success-bg: #f1faf5;
  --color-success-chip: #e4f5ec;
  --color-success-text: #156443;
  --color-success-bd: #b7deca;
  --color-success-bd-soft: #d5ecdf;
  --color-warning: #95620e;
  --color-warning-bg: #fffaed;
  --color-warning-bd: #e9ce8d;
  --color-warn-chip: #fff2d0;
  --color-warn-chip-text: #795009;
  --color-warn-chip-bd: #eedaa6;
  --color-pend-chip: #fff2d0;
  --color-pend-chip-text: #795009;
  --color-warn-soft-bg: #fff5ec;
  --color-warn-soft-bd: #f1d3b7;
  --color-warn-text: #a44c17;
  --color-resaltado: #fff5f5;
  --color-danger: #c63847;
  --color-danger-h: #a12432;
  --color-danger-bg: #fff3f4;
  --color-danger-bd: #f0c1c7;
  --color-danger-bd-alt: var(--color-danger-bd);
  --color-danger-bd-soft: #fae2e5;
  --color-danger-text: #962b38;
  --color-inverse-bg: var(--gray-dark);
  --color-inverse-text: var(--white);
  --color-overlay: rgba(0, 0, 0, .45);
  --color-halo: rgba(0, 0, 0, .035);
  --color-focus: rgba(255, 0, 0, .12);
  --color-spinner-dark: var(--brand-black);
  --color-spinner-accent: var(--brand-red);
  --color-spinner-light: var(--color-surface);
  --color-disabled-bg: var(--gray-light);
  --color-disabled-text: var(--gray-medium);
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --shadow: none;
  --shadow-raised: none;
  --geometry-opacity: .06;
  --geometry-opacity-secondary: .035;
  --color-grid: rgba(0, 0, 0, .035);
  --grid-size: 72px;
  --geometry-red-opacity: .22;
  --geometry-yellow-opacity: .48;
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, .2);
  --shadow-tooltip: 0 4px 14px rgba(0, 0, 0, .18);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --text-xs: .75rem;
  --text-xxs: .65rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-title: clamp(1.85rem, 3vw, 2.75rem);
  --text-financial: clamp(1.05rem, 1.35vw, 1.2rem);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --width-app: 1240px;
  --width-modal: 900px;
  --width-wizard: 1200px;
  --width-prefs: 720px;
  --width-result: 760px;
  --width-tooltip: 20rem;
  --width-label: 10rem;
  --width-mapping-label: clamp(140px, 36%, 190px);
  --width-home: 1480px;
  --color-home-bg: #F8FAFC;
  --color-home-border: #DDE1E7;
  --color-home-header: #17191D;
  --color-home-module: rgba(110, 110, 110, .12);
  --color-home-dot: rgba(110, 110, 110, .32);
  --color-home-rose: rgba(255, 0, 0, .07);
  --color-home-connector: #CDD1D8;
  --shadow-home-card: 0 10px 30px rgba(20, 25, 35, .07);
  --shadow-home-stepper: 0 6px 24px rgba(20, 25, 35, .05);
  --color-cta-hover: #E60000;
  --color-cabecera-chip: rgba(255, 255, 255, .12);
  --color-cabecera-borde: rgba(255, 255, 255, .45);
  --alto-cabecera-accion: 44px;
  --size-reporte: 52px;
  --size-miniatura: 56px;
  --z-reporte: 800;
  --shadow-reporte: 0 6px 20px rgba(20, 25, 35, .22);
  --shadow-cta-hover: 0 8px 20px rgba(255, 0, 0, .16);
  --width-home-cta: 360px;
  --height-home-header: 132px;
  --size-home-step: 52px;
  --height-home-file-loaded: 176px;
  --width-short-input: 6rem;
  --width-cell: 200px;
  --height-dropzone: 216px;
  --height-preview: 280px;
  --alto-modal: min(92dvh, 960px);
  --alto-modal-cuerpo: calc(var(--alto-modal) - 22rem);
  --tamano-control: 36px;
  --alto-control: 40px;
  --size-icon: 20px;
  --size-icon-sm: 16px;
  --size-icon-xs: 15px;
  --size-icon-help: 17px;
  --size-step: 30px;
  --height-cta: 52px;
  --size-mark: 40px;
  --width-brand-logo: 160px;
  --width-pipeline: 780px;
  --size-pipeline-core: 144px;
  --size-pipeline-mark: 104px;
  --width-pipeline-source: 128px;
  --size-pipeline-tile: 72px;
  --easing: cubic-bezier(.22, 1, .36, 1);
  --duration: 220ms;
  --duration-view: 340ms;
  --transition: var(--duration) var(--easing);
  --z-overlay: 1000;
  --z-wizard: 1200;
  --z-tooltip: 1500;
  --z-profile-picker: 900;
  --z-toast: 2000;
  /* Sobre los diálogos y sus tooltips: el recorrido señala lo que hay en ellos. */
  --z-recorrido: 1700;
  --width-recorrido: 22rem;
  --radius-recorrido: 10px;
  --color-recorrido-velo: rgba(20, 25, 35, .32);
  font: 16px var(--font);
  color-scheme: light;
}

/* Base and accessible primitives */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  isolation: isolate;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  font-weight: 500;
  padding: var(--space-4) var(--space-8) var(--space-6);
}
body:has(.modal-overlay, .wizard-overlay) { overflow: hidden; }

/* The grid and cropped brand outlines sit behind every view, never over controls. */
.brand-backdrop {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1;
  background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.brand-backdrop > span { position: absolute; display: block; pointer-events: none; }
.brand-backdrop__frame {
  width: clamp(180px, 18vw, 300px); height: clamp(240px, 34vh, 380px);
  left: -110px; top: 12%; border: 2px solid var(--brand-red); opacity: var(--geometry-red-opacity);
}
.brand-backdrop__circle {
  width: clamp(130px, 12vw, 200px); aspect-ratio: 1; right: 5%; top: 7%;
  border: 2px solid var(--brand-yellow); border-radius: 50%; opacity: var(--geometry-yellow-opacity);
}
.brand-backdrop__diamond {
  width: clamp(240px, 28vw, 440px); aspect-ratio: 1; right: 3%; bottom: -190px;
  border: 2px solid var(--brand-red); transform: rotate(45deg); opacity: var(--geometry-red-opacity);
}
/* Local neutral frames support the surfaces without competing with the backdrop. */
.review-view__resumen::before, .result-view::before, .result-view::after {
  content: ""; pointer-events: none; z-index: -1; position: absolute;
  border: 1px solid var(--gray-dark); opacity: var(--geometry-opacity);
}
.review-view__resumen, .result-view { position: relative; isolation: isolate; }
.review-view__resumen::before {
  inset: -10px 10px 10px -10px; border-right: 0; border-bottom: 0;
}
.result-view::before { inset: -12px 12px 12px -12px; }
.result-view::after {
  width: var(--space-2); height: var(--space-2); top: -12px; left: -12px;
  border: 0; background: var(--brand-red);
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: var(--color-primary); }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
#app-content:focus, #wiz-body:focus { outline: none; }
.icon { width: var(--size-icon); height: var(--size-icon); display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.brand-mark { width: var(--size-mark); height: var(--size-mark); display: block; object-fit: contain; }
.eyebrow { font-size: var(--text-xs); font-weight: 650; letter-spacing: .12em; color: var(--color-text-muted); }
.title-dot { color: var(--brand-red); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--alto-control); padding: var(--space-2) var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 600; text-decoration: none; line-height: 1.35;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-fill); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-h); border-bottom-color: var(--brand-red); }
.btn--success { background: var(--color-success); color: var(--color-on-fill); }
.btn--success:hover:not(:disabled) { background: var(--color-success-h); }
.btn--danger { background: var(--color-danger); color: var(--color-on-fill); }
.btn--danger:hover:not(:disabled) { background: var(--color-danger-h); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn--secondary:hover:not(:disabled) { border-color: var(--gray-medium); background: var(--color-surface-alt); color: var(--color-text); }
.btn--ghost, .btn--link { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover:not(:disabled), .btn--link:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.btn--danger-outline { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger-bd); }
.btn--danger-outline:hover:not(:disabled) { background: var(--color-danger-bg); }
.btn--large { min-height: var(--height-cta); padding: var(--space-4) var(--space-8); }
.btn--sm, .btn--link { font-size: var(--text-sm); min-height: var(--tamano-control); padding: var(--space-2) var(--space-3); }
.btn--sm .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.btn:disabled { color: var(--color-disabled-text); background: var(--color-disabled-bg); border-color: var(--color-border); box-shadow: none; cursor: not-allowed; }
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), select {
  min-width: 0; min-height: var(--alto-control); width: 100%; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
  padding: var(--space-2) var(--space-3); font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
select { padding-right: var(--space-8); text-overflow: ellipsis; }
input::placeholder { color: var(--color-text-muted); opacity: .8; }
input:not(:disabled):hover, select:not(:disabled):hover { border-color: var(--gray-medium); }
input:focus-visible, select:focus-visible { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 3px var(--color-focus); }
input:disabled { background: var(--color-surface-alt); color: var(--color-disabled-text); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); flex-shrink: 0; width: var(--size-icon-help); height: var(--size-icon-help); }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

/* App shell */
.app-shell { max-width: var(--width-app); width: 100%; margin: 0 auto; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.app-header__brand { display: flex; gap: var(--space-3); align-items: center; color: var(--color-text); text-decoration: none; }
.app-header__logo { display: block; width: var(--width-brand-logo); max-width: 100%; height: auto; object-fit: contain; }
.app-header__tools { display: flex; align-items: center; }
.app-content { padding-top: var(--space-6); }
.upload-view, .review-view { display: flex; flex-direction: column; gap: var(--space-6); animation: view-in var(--duration-view) var(--easing) both; }
.review-view__header { text-align: left; }
.review-view__title, .result-view__title, .processing-view__title { font-size: var(--text-title); font-weight: 700; letter-spacing: -.045em; line-height: 1.15; }
.review-view__subtitle { max-width: 680px; font-size: var(--text-base); color: var(--color-text-muted); margin-top: var(--space-2); line-height: 1.5; }
.workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: var(--space-4) 0; border-block: 1px solid var(--color-border); gap: var(--space-4); }
.workflow__step { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.workflow__step > span { font-size: var(--text-xs); font-variant-numeric: tabular-nums; width: var(--size-step); height: var(--size-step); display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.workflow__step.is-active { color: var(--color-primary); font-weight: 600; }
.workflow__step.is-active > span { background: var(--color-primary); border-color: var(--color-primary); border-bottom: 3px solid var(--brand-red); border-radius: var(--radius-sm); color: var(--color-on-fill); }

/* Source cards and preparation */
.upload-view__dropzones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.upload-zone-group { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; animation: view-in var(--duration-view) var(--easing) both; }
.upload-zone-group:nth-child(2) { animation-delay: 70ms; }
.source-card__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.source-card__header h2 { font-size: var(--text-lg); font-weight: 700; }
.source-card__number { color: var(--gray-medium); font-size: var(--text-xs); font-weight: 650; }
.source-card__type { margin-left: auto; font-size: var(--text-xxs); color: var(--color-text-muted); letter-spacing: .09em; }
.dropzone { margin: var(--space-5) var(--space-6); border: 1px dashed var(--color-info-bd); background: var(--color-surface-alt); border-radius: var(--radius-sm); min-height: var(--height-dropzone); display: grid; place-items: center; padding: var(--space-6); position: relative; min-width: 0; transition: border-color var(--transition), background var(--transition); }
.dropzone:hover, .dropzone--dragover { border-color: var(--color-primary); background: var(--color-dragover); }
.dropzone--dragover { box-shadow: inset 0 0 0 1px var(--color-primary); }
.dropzone--loaded { min-height: 168px; border-style: solid; border-color: var(--color-border); background: var(--color-surface-alt); }
.dropzone__content--loaded .dropzone__icon { width: 36px; height: 36px; margin-bottom: var(--space-2); }
.dropzone--error { border-color: var(--color-danger); background: var(--color-danger-bg); }
.dropzone__error { margin-top: var(--space-3); color: var(--color-danger-text); font-size: var(--text-sm); text-align: center; }
.dropzone__input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dropzone:has(.dropzone__input:focus-visible) { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.dropzone--loaded .dropzone__input { display: none; }
.dropzone__content { width: 100%; min-width: 0; text-align: center; pointer-events: none; }
.dropzone__content--loaded { pointer-events: auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); text-align: left; align-items: center; }
.dropzone__content--loaded .dropzone__icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }
.dropzone__content--loaded .dropzone__loaded-label, .dropzone__content--loaded .dropzone__filename, .dropzone__content--loaded .dropzone__size { grid-column: 2; margin: 0; }
.dropzone__content--loaded .dropzone__actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--space-2); }
.dropzone__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--color-info-bd); background: var(--color-surface); border-radius: var(--radius); color: var(--color-primary); margin: 0 auto var(--space-3); }
.dropzone__icon .icon { width: 24px; height: 24px; }
.dropzone__formats, .dropzone__size { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.dropzone__choose { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-primary); background: var(--color-surface); border: 1px solid var(--color-info-bd); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); margin-top: var(--space-4); font-weight: 600; }
.dropzone__formats { font-size: var(--text-xs); }
.dropzone__loaded-label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-success-text); font-weight: 600; font-size: var(--text-sm); }
.dropzone__loaded-label .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.dropzone__filename { font-weight: 600; margin-top: var(--space-2); font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.dropzone__actions .dropzone__change { background: var(--gray-dark); border-color: var(--gray-dark); color: var(--white); }
.dropzone__actions .dropzone__change:is(:hover, :focus-visible):not(:disabled) { background: var(--brand-black); border-color: var(--brand-black); color: var(--white); }
.dropzone__actions .dropzone__remove { background: var(--color-surface); border-color: var(--color-border); color: var(--gray-dark); }
.dropzone__actions .dropzone__remove:is(:hover, :focus-visible):not(:disabled) { background: var(--color-surface); border-color: var(--brand-red); color: var(--brand-red); }
.profile-selector { padding: 0 var(--space-6) var(--space-5); }
.profile-selector__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.profile-selector__select { flex-basis: 100%; }
.profile-picker__trigger { width: 100%; min-width: 0; min-height: var(--alto-control); padding: var(--space-2) var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.profile-picker__trigger:hover, .profile-picker__trigger[aria-expanded="true"] { border-color: var(--gray-dark); }
.profile-picker__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-picker__chevron { display: flex; flex-shrink: 0; transition: transform var(--transition); }
.profile-picker__trigger[aria-expanded="true"] .profile-picker__chevron { transform: rotate(180deg); }
.profile-picker__panel { position: fixed; z-index: var(--z-profile-picker); display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-tooltip); padding: var(--space-1); }
.profile-picker__search { flex-shrink: 0; margin: var(--space-1); width: calc(100% - var(--space-2)); }
.profile-picker__list { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.profile-picker__option { min-height: var(--alto-control); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid transparent; cursor: pointer; }
.profile-picker__option:hover, .profile-picker__option.is-active { background: var(--gray-light); }
.profile-picker__option[aria-selected="true"] { border-left-color: var(--brand-red); }
.profile-picker__option > span { min-width: 0; overflow-wrap: anywhere; }
.profile-picker__option strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.profile-picker__option small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.profile-picker__option > .icon { flex-shrink: 0; color: var(--gray-dark); }
.profile-picker__empty { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.profile-selector__create { width: var(--alto-control); min-height: var(--alto-control); padding: 0; flex-shrink: 0; }
.upload-view__launch { display: flex; align-items: center; justify-content: flex-end; }
.upload-view__launch .btn { flex-shrink: 0; }
.upload-view__privacy { display: flex; gap: var(--space-2); align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--text-xs); }
.upload-view__privacy .icon { color: var(--color-intelligence); width: var(--size-icon-sm); height: var(--size-icon-sm); }
.upload-view__error:has(.upload-view__error-accion) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.upload-view__error-accion { flex-shrink: 0; }
.upload-view__error, .review-view__error, .wiz-form__error { padding: var(--space-3) var(--space-4); background: var(--color-danger-bg); border: 1px solid var(--color-danger-bd); border-radius: var(--radius-sm); color: var(--color-danger-text); font-size: var(--text-base); }

/* Modal primitives: only the body scrolls; footers remain reachable. */
.modal-overlay, .wizard-overlay { position: fixed; inset: 0; background: var(--color-overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-6); z-index: var(--z-overlay); animation: overlay-in var(--duration) var(--easing) both; }
.wizard-overlay { z-index: var(--z-wizard); padding-block: var(--space-4); }
.modal-panel, .wizard-modal { background: var(--color-surface); width: 100%; max-width: var(--width-modal); max-height: var(--alto-modal); display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; animation: modal-in var(--duration-view) var(--easing) both; }
.modal-panel--prefs { max-width: var(--width-prefs); }
.wizard-modal--sm { max-width: var(--width-prefs); }
.wizard-modal--ancho { max-width: var(--width-wizard); }
.modal-header, .wizard-modal__header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-8); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.modal-header__icon { color: var(--color-primary); }
.modal-header__icon .brand-mark { width: 36px; height: 36px; }
.modal-header__title { font-size: var(--text-xl); font-weight: 700; flex: 1; letter-spacing: -.025em; line-height: 1.3; }
.modal-close, .wizard-modal__close { display: grid; place-items: center; flex-shrink: 0; width: var(--tamano-control); height: var(--tamano-control); color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.modal-close:hover, .wizard-modal__close:hover { background: var(--color-surface-hover); color: var(--color-text); }
.modal-close:focus-visible, .wizard-modal__close:focus-visible { outline-width: 2px; outline-offset: 2px; }
.app-header__settings { gap: var(--space-2); }
.app-header__settings .icon, .btn .icon { width: 18px; height: 18px; }
.wizard-modal { max-height: calc(100dvh - 32px); }
.modal-body, .wizard-modal__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-8); overscroll-behavior: contain; }
.modal-body { display: flex; flex-direction: column; gap: var(--space-6); }
.modal-footer, .wizard-modal__footer { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5) var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-surface-alt); }
.wizard-modal__identity { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-2); }
.wizard-modal__identity-icon { display: grid; place-items: center; color: var(--color-primary); background: var(--color-info-bg); width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; }
.wizard-modal__identity h2 { font-size: var(--text-lg); font-weight: 700; }
.wizard-modal__source { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-sm); }
.wizard-modal__header { padding: var(--space-2) var(--space-6) var(--space-3); }
.wizard-modal__body { padding: var(--space-5) var(--space-6); }
.wizard-modal__footer { padding: var(--space-3) var(--space-6); }
.wizard-modal__header h3 { font-size: var(--text-lg); flex: 1; }
.wizard-modal__action-hint { margin-right: auto; max-width: 40%; font-size: var(--text-xs); color: var(--color-text-muted); }
.wiz-tip-wrap { display: inline-flex; }
.wizard-steps { display: flex; align-items: center; flex: 1; max-width: 600px; }
.wizard-step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.wizard-step__num { width: var(--size-step); height: var(--size-step); display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--color-surface-alt); }
.wizard-step__num .icon { width: var(--size-icon-help); height: var(--size-icon-help); }
.wizard-step.active { color: var(--color-primary); font-weight: 650; }
.wizard-step.active .wizard-step__num { background: var(--color-primary); color: var(--color-on-fill); border-color: var(--color-primary); border-bottom: 3px solid var(--brand-red); border-radius: var(--radius-sm); }
.wizard-step.done { color: var(--color-success-text); }
.wizard-step.done .wizard-step__num { color: var(--color-success-text); background: var(--color-success-chip); border-color: var(--color-success-bd); }
.wizard-step__line { flex: 1; height: 1px; background: var(--color-border); margin: 0 var(--space-4); }

/* Welcome and preferences */
.onboarding-intro { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 600px; }
.onboarding-steps__title, .onboarding-tnc__title { font-size: var(--text-base); font-weight: 650; margin-bottom: var(--space-4); }
.onboarding-steps__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); list-style: none; counter-reset: onboarding; }
.onboarding-steps__list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.step-icon { color: var(--color-primary); background: var(--color-info-bg); border-radius: var(--radius-sm); padding: var(--space-2); display: inline-flex; }
.onboarding-steps__list strong { display: block; font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); }
.onboarding-steps__list p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.onboarding-tnc { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
.onboarding-tnc__body { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.75; }
.onboarding-tnc__body h4 { color: var(--color-text); margin: var(--space-5) 0 var(--space-2); font-weight: 600; }
.onboarding-tnc__body p { margin-bottom: var(--space-3); }
.modal-footer--onboarding { align-items: center; justify-content: space-between; }
.onboarding-accept { max-width: 580px; }
.onboarding-accept__label { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; }
.onboarding-accept__checkbox { margin-top: var(--space-1); }
.modal-panel--onboarding .modal-header { background: var(--color-home-header); color: var(--white); border-bottom: 3px solid var(--brand-red); }
.modal-panel--onboarding .modal-header__icon { display: grid; place-items: center; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-home-border); border-radius: var(--radius); flex-shrink: 0; }
.modal-panel--onboarding .modal-body { background: var(--color-home-bg); gap: var(--space-5); }
.modal-panel--onboarding .onboarding-intro { color: var(--gray-dark); font-size: var(--text-base); }
.modal-panel--onboarding .onboarding-steps__list { gap: var(--space-4); }
.modal-panel--onboarding .onboarding-steps__list li { padding: var(--space-4); background: var(--color-surface); border-color: var(--color-home-border); border-left: 3px solid var(--gray-dark); }
.modal-panel--onboarding .step-icon { background: var(--gray-light); color: var(--gray-dark); border-radius: var(--radius-sm); flex-shrink: 0; }
.modal-panel--onboarding .onboarding-tnc { padding: var(--space-4); border: 1px solid var(--color-home-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.modal-panel--onboarding .onboarding-tnc__title { padding: var(--space-2) var(--space-3); background: var(--gray-light); border-left: 3px solid var(--brand-red); border-radius: var(--radius-sm); }
.modal-panel--onboarding .modal-footer { background: var(--gray-light); border-top-color: var(--color-home-border); gap: var(--space-4); }
.modal-panel--onboarding .onboarding-accept__label { color: var(--gray-dark); }
.modal-panel--onboarding .onboarding-accept__checkbox { accent-color: var(--brand-red); }
.modal-panel--onboarding #btn-comenzar:not(:disabled) { background: var(--brand-red); border-color: var(--brand-red); color: var(--white); }
.modal-panel--onboarding #btn-comenzar:is(:hover, :focus-visible):not(:disabled) { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
#btn-comenzar:not(:disabled) { animation: view-in var(--duration) var(--easing); }
.prefs-section { border: 0; border-bottom: 1px solid var(--color-border); padding: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.prefs-section:last-child { border-bottom: 0; padding-bottom: 0; }
.prefs-section__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 650; margin-bottom: var(--space-5); }
.prefs-section__title .icon { color: var(--color-primary); }
.prefs-field { display: flex; flex-direction: column; gap: var(--space-2); }
.prefs-label { font-size: var(--text-sm); font-weight: 550; }
.prefs-obligatorio { font-weight: 400; color: var(--color-text-muted); }
.prefs-error { font-size: var(--text-sm); color: var(--color-danger-text); }
.prefs-input[aria-invalid] { border-color: var(--color-danger-bd); }
.prefs-input--short { max-width: 160px; }
.prefs-section--future { color: var(--color-text-muted); }
.prefs-section--future .icon { color: var(--color-text-muted); }
.prefs-badge { font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); background: var(--color-surface-sunken); color: var(--color-text-muted); }
.modal-panel--prefs .modal-header { background: var(--color-home-header); color: var(--white); border-bottom: 3px solid var(--brand-red); }
.modal-panel--prefs .modal-header__icon { color: var(--white); }
.modal-panel--prefs .modal-close { background: var(--color-surface); border-color: var(--color-surface); color: var(--gray-dark); }
.modal-panel--prefs .modal-close:hover { background: var(--gray-light); border-color: var(--gray-light); color: var(--brand-black); }
.modal-panel--prefs .modal-body { background: var(--color-home-bg); gap: var(--space-4); }
.modal-panel--prefs .prefs-section { background: var(--color-surface); border: 1px solid var(--color-home-border); border-radius: var(--radius-sm); padding: var(--space-4); gap: var(--space-3); }
.modal-panel--prefs .prefs-section:last-child { border-bottom: 1px solid var(--color-home-border); padding-bottom: var(--space-4); }
.modal-panel--prefs .prefs-section__title { background: var(--gray-light); border-left: 3px solid var(--brand-red); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); margin-bottom: var(--space-3); }
.modal-panel--prefs .prefs-section__title .icon { color: var(--gray-dark); }
.modal-panel--prefs .prefs-section--future .prefs-section__title { border-left-color: var(--color-border); color: var(--color-text-muted); }
.modal-panel--prefs .prefs-section--future .prefs-section__title .icon { color: var(--color-text-muted); }
.modal-panel--prefs .modal-footer { background: var(--gray-light); border-top-color: var(--color-home-border); }
.modal-panel--prefs #btn-prefs-cancel { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--gray-dark); }
.modal-panel--prefs #btn-prefs-cancel:is(:hover, :focus-visible) { border-color: var(--gray-dark); color: var(--brand-black); }
.modal-panel--prefs #btn-prefs-save:is(:hover, :focus-visible) { background: var(--brand-black); border-color: var(--brand-black); }
.toast { position: fixed; z-index: var(--z-toast); bottom: var(--space-8); left: 50%; transform: translate(-50%, var(--space-4)); display: flex; align-items: center; gap: var(--space-2); background: var(--color-inverse-bg); color: var(--color-inverse-text); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); box-shadow: var(--shadow-tooltip); font-size: var(--text-sm); opacity: 0; pointer-events: none; max-width: calc(100vw - var(--space-8)); transition: opacity var(--transition), transform var(--transition); }
.toast--visible { opacity: 1; transform: translate(-50%, 0); }

/* Login: pantalla completa, porque no hay nada mas que hacer hasta pasarla. */
.login-view { display: grid; place-items: center; min-height: 60dvh; padding: var(--space-6) 0; }
.login-card {
  width: min(380px, 100%); display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-surface); border: 1px solid var(--color-home-border);
  border-radius: var(--radius); box-shadow: var(--shadow-home-card);
  animation: view-in var(--duration-view) var(--easing) both;
}
.login-card__logo {
  width: var(--width-brand-logo); height: auto; object-fit: contain;
  margin: 0 auto var(--space-2);
}
.login-card__campo { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.login-card__error {
  display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3);
  background: var(--color-danger-bg); border: 1px solid var(--color-danger-bd);
  border-radius: var(--radius-sm); color: var(--color-danger-text);
  font-size: var(--text-sm); font-weight: 500;
}
.login-card__error .icon { flex: 0 0 auto; color: var(--color-danger); }
.login-card__enviar { width: 100%; }
.login-card__pie {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-1); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5;
}
.login-card__pie .icon { flex: 0 0 auto; width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Quien esta usando la aplicacion, al lado de sus herramientas. */
.app-header__tools { gap: var(--space-3); }
.app-header__usuario { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Reporte de problemas: el boton vive sobre la aplicacion, nunca sobre un
   modal —por eso queda debajo de --z-overlay—, y se aparta del pie en pantallas
   angostas, donde ahi abajo esta la accion principal. */
.reporte-flotante {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-reporte);
  display: grid; place-items: center;
  width: var(--size-reporte); height: var(--size-reporte);
  border: 1px solid var(--color-home-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-reporte);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.reporte-flotante .icon { width: var(--size-icon); height: var(--size-icon); }
.reporte-flotante:hover { background: var(--color-inverse-bg); color: var(--color-inverse-text); }
.reporte-flotante:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }
body:has(.modal-overlay, .wizard-overlay) .reporte-flotante { display: none; }

.modal-panel--reporte { width: min(560px, 100%); }

/* Recorrido guiado. Un velo apenas oscuro sobre todo menos el elemento que
   se señala, con el borde fundido hacia adentro y una respiración lenta: se
   entiende dónde mirar sin un recuadro que grite. No intercepta clics: el
   usuario hace lo que el paso le pide sobre la aplicación real. */
.recorrido {
  position: fixed; inset: 0; z-index: var(--z-recorrido); pointer-events: none;
  transition: opacity var(--duration) var(--easing), visibility 0s;
}
/* Aparece y se retira fundiéndose: nunca de golpe. */
.recorrido--oculto { opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--easing), visibility 0s var(--duration); }
.recorrido__velo { position: fixed; inset: 0; width: 100%; height: 100%; }
.recorrido__sombra { fill: var(--color-recorrido-velo); }
/* Un hueco por cada cosa que el paso deja a la vista. Negro en la máscara es
   transparente en el velo; el filtro difumina el borde y el trazo que respira
   lo abre y lo cierra apenas. */
.recorrido__hueco {
  fill: black; stroke: black; stroke-width: 0; rx: var(--radius-recorrido);
  animation: recorrido-respira 2.8s ease-in-out infinite;
}
/* Solo al pasar de un paso al otro: el resto del tiempo el velo sigue al
   contenido cuadro a cuadro, sin quedar atrás cuando se scrollea. */
.recorrido--cambiando .recorrido__hueco {
  transition: x var(--duration-view) var(--easing), y var(--duration-view) var(--easing),
    width var(--duration-view) var(--easing), height var(--duration-view) var(--easing);
}
@keyframes recorrido-respira { 50% { stroke-width: var(--space-1); } }
.recorrido__tarjeta {
  position: fixed; pointer-events: auto; width: min(var(--width-recorrido), calc(100vw - 2 * var(--space-4)));
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-top: 3px solid var(--brand-red);
  border-radius: var(--radius); box-shadow: var(--shadow-modal);
  animation: view-in var(--duration) var(--easing) both;
}
.recorrido--cambiando .recorrido__tarjeta { transition: top var(--duration-view) var(--easing), left var(--duration-view) var(--easing); }
.recorrido__etapa { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.recorrido__titulo { font-size: var(--text-lg); font-weight: 650; }
.recorrido__texto { font-size: var(--text-base); line-height: 1.5; }
.recorrido__pie { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.recorrido__omitir { padding-inline: 0; }
.recorrido__progreso { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.recorrido__flecha { width: var(--alto-cabecera-accion); min-height: var(--alto-cabecera-accion); padding: 0; justify-content: center; }
@media (max-width: 599px) {
  .recorrido__tarjeta { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: auto; }
}
.reporte-form { gap: var(--space-5); }
.reporte-campo { display: flex; flex-direction: column; gap: var(--space-2); }
.reporte-campo__label { font-size: var(--text-sm); font-weight: 600; }
.reporte-campo__label em { font-style: normal; font-weight: 500; color: var(--color-text-muted); }
.reporte-campo__ayuda { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
.reporte-form textarea {
  width: 100%; min-height: 0; resize: vertical;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-3); font: inherit; font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.reporte-form textarea:focus-visible { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 3px var(--color-focus); }
/* El selector de archivo: el control nativo no se puede estilar, asi que se
   oculta y se opera desde su etiqueta, con el mismo par boton + nombre de la
   zona de carga. El foco del teclado se dibuja sobre la etiqueta. */
.reporte-archivo {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface-alt);
  transition: border-color var(--transition), background var(--transition);
}
.reporte-archivo--soltar { border-color: var(--brand-red); border-style: solid; background: var(--color-dragover); }
.reporte-archivo--soltar > * { pointer-events: none; }
.reporte-archivo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.reporte-archivo__boton {
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  min-height: var(--tamano-control); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-info-bd); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-primary);
  font-size: var(--text-sm); font-weight: 600;
  transition: border-color var(--transition), background var(--transition);
}
.reporte-archivo__boton:hover { border-color: var(--gray-medium); background: var(--color-surface-alt); }
.reporte-archivo__boton .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.reporte-archivo input:focus-visible + .reporte-archivo__boton { outline: 2px solid var(--brand-red); outline-offset: 3px; }
.reporte-archivo__nombre { flex: 1 1 8rem; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.reporte-archivo__nombre--vacio { color: var(--color-text-muted); }
/* Los adjuntos ya sumados: miniaturas cuadradas en una fila. Crecen a lo ancho
   y no a lo alto, para que cinco archivos no empujen el boton de enviar fuera
   de la vista. El nombre y el peso viven en el tooltip. */
/* Ocupa una fila entera dentro de la zona: es el mismo cuadro que el boton,
   no un recuadro nuevo debajo. */
.reporte-lista { flex: 1 0 100%; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reporte-lista:empty { display: none; }
.reporte-miniatura {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: var(--size-miniatura); height: var(--size-miniatura);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.reporte-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reporte-miniatura__ext { font-size: var(--text-xxs); font-weight: 700; letter-spacing: .04em; color: var(--color-text-muted); }
.reporte-miniatura__quitar {
  position: absolute; top: 3px; right: 3px; display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--color-inverse-bg); color: var(--color-inverse-text);
  opacity: .85; transition: opacity var(--transition);
}
.reporte-miniatura__quitar:hover { opacity: 1; background: var(--color-danger); }
.reporte-miniatura__quitar .icon { width: 10px; height: 10px; }
.reporte-archivo__quitar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: var(--tamano-control); height: var(--tamano-control);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.reporte-archivo__quitar:hover { background: var(--color-surface); border-color: var(--color-danger-bd); color: var(--color-danger); }
.reporte-archivo__quitar .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.reporte-consentimiento {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
  background: var(--color-warn-soft-bg); border: 1px solid var(--color-warn-soft-bd);
  border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.5;
  cursor: pointer;
}
.reporte-consentimiento input { margin-top: 2px; }
.reporte-estado {
  display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500;
}
.reporte-estado .icon { flex: 0 0 auto; }
.reporte-estado--error { background: var(--color-danger-bg); border: 1px solid var(--color-danger-bd); color: var(--color-danger-text); }
.reporte-estado--exito { background: var(--color-success-bg); border: 1px solid var(--color-success-bd); color: var(--color-success-text); }

/* Detection, mapping and data preview */
.wiz-detect { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: var(--space-6); align-items: start; }
.wiz-detect__overview, .wiz-detect__workspace { min-width: 0; }
.wiz-detect__workspace .wiz-encabezado { margin-top: 0; }
.wiz-detect__workspace .wiz-encabezado__label { display: block; font-size: var(--text-lg); }
.wiz-detect__workspace .wiz-encabezado__hint { display: block; margin-top: var(--space-2); font-size: var(--text-sm); }
.wiz-encabezado__selection { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.wiz-detect__title { font-size: var(--text-xl); font-weight: 650; letter-spacing: -.025em; }
.wiz-detect__file { display: flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; margin: var(--space-2) 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.wiz-detect__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.wiz-meta-item { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--color-surface-alt); }
.wiz-meta-item > div { display: flex; flex-direction: column; gap: var(--space-2); }
.wiz-meta-item strong { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 550; }
.wiz-meta-item span { font-size: var(--text-sm); font-weight: 600; }
.wiz-detect__chips-label { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); }
.wiz-detect__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.wiz-chip { border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); overflow-wrap: anywhere; max-width: 100%; }
.wiz-chip--low { border-color: var(--color-warning-bd); }
.wiz-detect__hojas { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.wiz-detect__hojas select { margin-top: var(--space-2); }
.wiz-encabezado { min-width: 0; margin-top: var(--space-5); }
.wiz-encabezado__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); }
.wiz-encabezado__hint { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.wiz-encabezado__tabla-wrap { overflow: auto; max-height: var(--height-preview); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.wiz-encabezado__tabla { border-spacing: 0; width: 100%; font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wiz-encabezado__fila { cursor: pointer; }
.wiz-encabezado__fila:nth-child(even) { background: var(--color-surface-alt); }
.wiz-encabezado__fila:hover { background: var(--color-surface-hover); }
.wiz-encabezado__fila td { border-bottom: 1px solid var(--color-border); padding: var(--space-3); max-width: var(--width-cell); overflow: hidden; text-overflow: ellipsis; transition: background var(--transition); }
.wiz-encabezado__num { position: sticky; left: 0; z-index: 2; color: var(--color-text-muted); background: var(--color-surface-alt); text-align: right; border-right: 1px solid var(--color-border); }
.wiz-encabezado__fila.is-selected { background: var(--color-info-bg); font-weight: 600; }
.wiz-encabezado__fila.is-selected td { border-bottom-color: var(--color-info-bd); }
.wiz-encabezado__fila.is-selected .wiz-encabezado__num { background: var(--color-info-strong); color: var(--color-primary); box-shadow: inset 3px 0 var(--brand-red); }
.wiz-encabezado--lectura .wiz-encabezado__fila { cursor: default; }
.wiz-encabezado--lectura .wiz-encabezado__fila.is-selected { background: var(--color-surface-alt); }
.wiz-encabezado--lectura .wiz-encabezado__fila.is-selected td { position: sticky; top: 0; z-index: 1; background: var(--color-surface-alt); border-bottom-color: var(--color-border); }
.wiz-encabezado--lectura .wiz-encabezado__fila.is-selected .wiz-encabezado__num { z-index: 3; background: var(--color-surface-alt); color: var(--color-text-muted); box-shadow: none; }
.wiz-encabezado td.is-col-resaltada, .wiz-encabezado--lectura .wiz-encabezado__fila.is-selected td.is-col-resaltada { background: var(--color-resaltado); color: var(--color-text); font-weight: 600; box-shadow: inset 2px 0 var(--brand-red); }
.wiz-paso2 { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); gap: var(--space-6); align-items: stretch; }
.wiz-paso2__preview { min-width: 0; }
.wiz-paso2__preview .wiz-encabezado { position: sticky; top: 0; margin-top: 0; }
.wiz-paso2__preview .wiz-encabezado__tabla-wrap { max-height: var(--alto-modal-cuerpo); }
.wiz-form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.wiz-form__section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); }
.wiz-form__section-title { font-size: var(--text-xs); text-transform: uppercase; font-weight: 650; letter-spacing: .07em; margin-bottom: var(--space-3); color: var(--color-text-muted); }
.wiz-form__row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); min-width: 0; }
.wiz-form__row:last-child { margin-bottom: 0; }
.wiz-form__row label { font-size: var(--text-sm); font-weight: 550; }
.wiz-form__row select, .wiz-form__row input { flex: 1; }
.wiz-paso2 .wiz-form__row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.wiz-form__row-split-inputs { display: flex; min-width: 0; gap: var(--space-2); flex: 1; }
.wiz-form__row-split-inputs > * { min-width: 0; }
.wiz-form__row--compacto input[type="number"] { max-width: var(--width-short-input); flex: none; font-variant-numeric: tabular-nums; text-align: center; }
.wiz-form__radio-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.wiz-form__radio-group label { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--text-sm); cursor: pointer; min-height: var(--alto-control); }
.wiz-form__radio-group label:has(input:checked) { background: var(--color-info-bg); border-color: var(--color-info-bd); color: var(--color-primary-h); }
.req { color: var(--color-danger); }
.wiz-warning, .wiz-validar-warn { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); background: var(--color-warning-bg); border: 1px solid var(--color-warning-bd); color: var(--color-warn-chip-text); padding: var(--space-4); border-radius: var(--radius-sm); margin-top: var(--space-3); }
.wiz-validar-ok { border: 1px solid var(--color-success-bd); background: var(--color-success-bg); padding: var(--space-5); border-radius: var(--radius-sm); }
.verification-heading { display: flex; align-items: center; gap: var(--space-3); color: var(--color-success-text); margin-bottom: var(--space-4); }
.verification-heading > .icon { width: 28px; height: 28px; }
.verification-heading > div { display: flex; flex-direction: column; gap: var(--space-1); }
.verification-heading strong { font-size: var(--text-base); font-weight: 650; }
.verification-heading span { font-size: var(--text-sm); color: var(--color-text-muted); }
.wiz-validar-ok__msg { font-size: var(--text-sm); color: var(--color-success-text); margin-bottom: var(--space-3); }
.wiz-val-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.wiz-val-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-success-bd-soft); overflow-wrap: anywhere; }
.wiz-val__key { font-weight: 550; color: var(--color-success-text); width: 35%; }
.wiz-val__val { font-variant-numeric: tabular-nums; }
.wiz-aviso { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); margin-top: var(--space-3); }
.wiz-aviso::before { content: "i"; display: inline-grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-pill); width: 15px; height: 15px; margin-right: var(--space-2); font-size: var(--text-xs); }
#wf-validar-result:not([hidden]) { animation: view-in var(--duration) var(--easing) both; }
.wiz-save { display: flex; flex-direction: column; gap: var(--space-6); }
.wiz-save__summary { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); background: var(--color-surface-alt); border-radius: var(--radius); }
.wiz-save__stat { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); color: var(--color-text-muted); }
.wiz-save__stat:first-child { font-weight: 650; color: var(--color-text); }

/* Body-level tooltips: never clipped by modal overflow or transforms. */
.info-tip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--size-icon-help); height: var(--size-icon-help); margin-left: var(--space-1); color: var(--color-text-muted); font-style: normal; line-height: 1; vertical-align: middle; cursor: default; }
.info-tip > .icon { display: block; width: var(--size-icon-help); height: var(--size-icon-help); flex-shrink: 0; }
.info-tip:hover, .info-tip:focus-visible { color: var(--color-primary); }
.info-tip__contenido { display: none; }
.info-tip__flotante { position: fixed; top: 0; left: 0; z-index: var(--z-tooltip); visibility: hidden; opacity: 0; pointer-events: none; width: max-content; max-width: min(var(--width-tooltip), calc(100vw - var(--space-8))); max-height: calc(100dvh - var(--space-8)); padding: var(--space-3) var(--space-4); background: var(--color-inverse-bg); color: var(--color-inverse-text); border-radius: var(--radius-sm); box-shadow: var(--shadow-tooltip); font-size: var(--text-sm); font-weight: 400; line-height: 1.6; text-transform: none; letter-spacing: normal; transition: opacity var(--transition); }
.info-tip__flotante--visible { visibility: visible; opacity: 1; }
.info-tip__flotante::after { content: ""; position: absolute; top: 100%; left: var(--info-tip-flecha, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-inverse-bg); }
.info-tip__flotante--abajo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--color-inverse-bg); }

/* Indeterminate processing, never implying backend milestones. */
.processing-view { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding: var(--space-12) var(--space-8); min-height: 520px; animation: view-in var(--duration-view) var(--easing) both; }
.intelligence-pipeline { display: flex; align-items: center; justify-content: center; width: min(100%, var(--width-pipeline)); margin: var(--space-10) 0 var(--space-8); }
.pipeline-source { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); flex-shrink: 0; color: var(--color-text-muted); font-size: var(--text-base); font-weight: 550; width: var(--width-pipeline-source); }
.pipeline-source > .icon { width: var(--size-pipeline-tile); height: var(--size-pipeline-tile); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-primary); box-shadow: var(--shadow); }
.pipeline-core { display: grid; place-items: center; background: var(--color-surface); color: var(--color-on-fill); width: var(--size-pipeline-core); height: var(--size-pipeline-core); border-radius: var(--radius-lg); border: 1px solid var(--color-border); flex-shrink: 0; position: relative; }
.pipeline-core .illusion { --illusion-size: calc(var(--size-pipeline-core) - var(--space-4)); }
.pipeline-core::before, .pipeline-core::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--gray-dark); border-radius: 0; opacity: var(--geometry-opacity); }
.pipeline-core::before { inset: -16px; transform: translate(-6px, -6px); }
.pipeline-core::after { inset: -28px; transform: translate(6px, 6px); opacity: var(--geometry-opacity-secondary); }
.pipeline-line { height: 2px; flex: 1; min-width: 0; margin: 0 var(--space-4); background: var(--color-info-bd); position: relative; overflow: hidden; }
.pipeline-line::after { content: ""; display: block; width: 45%; height: 100%; background: var(--color-primary); border-right: 2px solid var(--brand-red); animation: pipeline-flow 2s linear infinite; }
.pipeline-line--reverse::after { animation-direction: reverse; }
.processing-view__hint { color: var(--color-text-muted); max-width: 560px; font-size: var(--text-base); line-height: 1.7; }
.processing-view__concepts { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.processing-view__concepts > span { color: var(--color-intelligence); background: var(--color-intelligence-bg); font-size: var(--text-sm); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }
.processing-view__footnote { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-5); }
.processing-view__footnote .icon { width: var(--size-icon-xs); height: var(--size-icon-xs); }
.wiz-loading, .wiz-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: var(--space-12) 0; overflow-wrap: anywhere; color: var(--color-text-muted); }
.wiz-error__icon { color: var(--color-danger); }
.wiz-error__icon .icon { width: 40px; height: 40px; }
.wiz-error__msg { color: var(--color-danger-text); font-weight: 600; }
.wiz-error__hint { font-size: var(--text-sm); }
/* The supplied illusion scales proportionally without viewport positioning:
   its host owns centering, so rotation cannot move the surrounding layout. */
.illusion, .spinner, .wiz-spinner, .spinner-inline {
  --illusion-size: 150px; display: block; position: relative; flex-shrink: 0;
  width: var(--illusion-size); height: var(--illusion-size); border-radius: 50%;
  background: linear-gradient(90deg, var(--color-spinner-dark), var(--color-spinner-accent));
  animation: spin 5s linear infinite; pointer-events: none;
}
.illusion::before, .spinner::before, .wiz-spinner::before, .spinner-inline::before {
  content: ""; position: absolute; width: 86.6667%; height: 86.6667%; top: 6.6667%; right: 0;
  border-radius: 50%; background: linear-gradient(270deg, var(--color-spinner-dark), var(--color-spinner-accent));
}
.illusion::after, .spinner::after, .wiz-spinner::after, .spinner-inline::after {
  content: ""; position: absolute; width: 73.3333%; height: 73.3333%; top: 13.3333%; left: 13.3333%;
  border-radius: 50%; background: var(--color-spinner-light);
}
.spinner, .wiz-spinner { --illusion-size: 32px; }
.spinner-inline { --illusion-size: 24px; margin: var(--space-8) auto; }

/* Human review: financial values come directly from the existing summary. */
.review-view__resumen { display: flex; flex-direction: column; gap: var(--space-5); }
.review-summary { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); overflow: hidden; }
.period-row + .period-row { border-top: 1px solid var(--color-border); }
.period-row__note { font-size: var(--text-xs); color: var(--color-pend-chip-text); margin-top: var(--space-2); }
.financial-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: var(--space-5) 0; }
.financial-stat { padding: 0 var(--space-4); border-right: 1px solid var(--color-border); min-width: 0; }
.financial-stat:last-child { border-right: 0; }
.financial-stat dt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.financial-stat dt .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.financial-stat dd { font-size: var(--text-financial); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--space-3); overflow-wrap: anywhere; }
.financial-stat--state dd { font-size: var(--text-base); letter-spacing: normal; }
.financial-stat dd small { font-size: var(--text-xs); font-weight: 400; letter-spacing: normal; color: var(--color-text-muted); }
.financial-stat p { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text-muted); margin-top: var(--space-1); }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 650; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3); white-space: nowrap; }
.badge .icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.badge--ok { background: var(--color-success-chip); color: var(--color-success-text); }
.badge--pend { background: var(--color-pend-chip); color: var(--color-pend-chip-text); }
.badge--warn { background: var(--color-warn-soft-bg); color: var(--color-warn-text); }
.resumen-pre { padding: var(--space-6); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.resumen-empty { color: var(--color-text-muted); padding: var(--space-8); text-align: center; }
.review-view__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.review-view__warning { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-left: 3px solid var(--brand-red); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.review-view__warning .icon { color: var(--color-primary); }

/* Result and profile management */
.result-view { max-width: var(--width-result); margin: var(--space-8) auto; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-raised); padding: var(--space-12); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); animation: view-in var(--duration-view) var(--easing) both; }
.result-view__icon { width: 76px; height: 76px; border-radius: var(--radius-pill); display: grid; place-items: center; margin-top: var(--space-4); }
.result-view__icon .icon { width: 36px; height: 36px; }
.result-view__icon--ok { color: var(--color-success-text); background: var(--color-success-chip); animation: view-in var(--duration-view) var(--easing) both; }
.result-view__icon--cancel { color: var(--color-text-muted); background: var(--color-surface-sunken); }
.result-view__icon--error { color: var(--color-danger); background: var(--color-danger-bg); }
.result-view__title { font-size: clamp(1.6rem, 2.5vw, 2.35rem); margin-top: 0; }
.result-view__periodo { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.result-view__periodo strong { font-size: var(--text-lg); color: var(--color-text); font-weight: 600; }
.result-view__hint { max-width: 440px; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; }
.result-view__btn-nueva { margin-top: var(--space-4); }
.result-view__error-card { text-align: left; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-base); }
.result-view__error-detail { color: var(--color-text-muted); }
.result-view__error-suggestion { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); padding: var(--space-5); }
.result-view__suggestion-label { display: block; font-size: var(--text-sm); font-weight: 650; margin-bottom: var(--space-2); }
.result-view { padding: 0; gap: 0; align-items: stretch; overflow: hidden; text-align: left; }
.result-view::before, .result-view::after { display: none; }
.result-view__header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); background: var(--color-home-header); color: var(--white); border-bottom: 3px solid var(--brand-red); }
.result-view__header .result-view__icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius); margin: 0; }
.result-view__header .result-view__icon .icon { width: 28px; height: 28px; }
.result-view__header .result-view__title { min-width: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--white); letter-spacing: -.025em; }
.result-view__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.result-view__body .result-view__periodo { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface-alt); border: 1px solid var(--color-home-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.result-view__body .result-view__hint { max-width: none; line-height: 1.6; }
.result-view__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-home-border); background: var(--color-surface-alt); display: flex; justify-content: flex-end; }
.result-view__footer .result-view__btn-nueva { margin: 0; min-height: 44px; }
.result-view__footer .result-view__btn-nueva:is(:hover, :focus-visible) { background: var(--brand-black); }
.pm-empty { text-align: center; padding: var(--space-8); color: var(--color-text-muted); }
.pm-empty__hint { font-size: var(--text-sm); margin-top: var(--space-3); }
.pm-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.pm-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.pm-item__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.pm-item__nombre { font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item__banco, .pm-item__fecha { color: var(--color-text-muted); font-size: var(--text-xs); }
.pm-item__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.pm-nota { background: var(--color-info-bg); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.pm-acciones { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.pm-confirm { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; font-size: var(--text-sm); }
.pm-confirm > div { display: flex; gap: var(--space-2); }
.pm-import-result { border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.pm-import-result.is-ok { color: var(--color-success-text); background: var(--color-success-bg); }
.pm-import-result.is-error { color: var(--color-danger-text); background: var(--color-danger-bg); }
.pm-import-result ul { padding-left: var(--space-5); margin-top: var(--space-2); }
.profiles-manager .wizard-modal__header { padding: var(--space-5) var(--space-6); background: var(--color-home-header); color: var(--white); border-bottom: 3px solid var(--brand-red); }
.profiles-manager .wizard-modal__header h3 { flex: 1; min-width: 0; font-size: var(--text-xl); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.profiles-manager .wizard-modal__close { background: var(--color-surface); border-color: var(--color-surface); color: var(--gray-dark); }
.profiles-manager .wizard-modal__close:hover { background: var(--gray-light); border-color: var(--gray-light); color: var(--brand-black); }
.profiles-manager .wizard-modal__body { background: var(--color-home-bg); }
.profiles-manager .pm-acciones { flex-wrap: wrap; padding: var(--space-3); border: 1px solid var(--color-home-border); border-radius: var(--radius-sm); background: var(--gray-light); margin-bottom: var(--space-4); }
.profiles-manager .pm-list { gap: var(--space-2); }
.profiles-manager .pm-item { background: var(--color-surface); border-color: var(--color-home-border); padding: var(--space-3) var(--space-4); transition: border-color var(--transition), background var(--transition); }
.profiles-manager .pm-item:hover, .profiles-manager .pm-item:focus-within { background: var(--color-surface-alt); border-color: var(--gray-medium); }
.profiles-manager .pm-item__nombre { font-weight: 700; }
.profiles-manager .pm-item__fecha { font-size: var(--text-xs); }
.profiles-manager .pm-edit:not(:disabled) { background: var(--gray-dark); border-color: var(--gray-dark); color: var(--white); }
.profiles-manager .pm-edit:is(:hover, :focus-visible):not(:disabled) { background: var(--brand-black); border-color: var(--brand-black); color: var(--white); }
.profiles-manager .pm-delete { background: var(--color-surface); border-color: var(--color-border); color: var(--gray-dark); }
.profiles-manager .pm-delete:is(:hover, :focus-visible):not(:disabled) { background: var(--color-surface); border-color: var(--brand-red); color: var(--brand-red); }

/* Motion */
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pipeline-flow { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

/* Shared branding stays stable as navigation replaces the content view. */
body:has(.app-shell) { padding: 0 0 var(--space-6); background: var(--color-home-bg); }
.app-shell { max-width: none; }
.app-shell .app-header {
  position: relative; isolation: isolate; overflow: hidden; min-height: var(--height-home-header);
  padding: var(--space-4) max(var(--space-8), calc((100% - var(--width-home)) / 2));
  background: var(--color-home-header); border-bottom: 1px solid var(--gray-dark);
}
.app-shell .app-header::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  width: 30%; height: 300%; right: 24%; top: -100%; transform: skew(-43deg);
  background: var(--color-home-module); border-right: 80px solid var(--brand-black);
}
.app-shell .app-header::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  width: 3px; height: 3px; border-radius: 50%; right: var(--space-10); top: var(--space-8); background: var(--color-home-dot);
  box-shadow: -20px 0 var(--color-home-dot), -40px 0 var(--color-home-dot), -60px 0 var(--color-home-dot), 0 20px var(--color-home-dot), -20px 20px var(--color-home-dot), -40px 20px var(--color-home-dot), -60px 20px var(--color-home-dot), 0 40px var(--color-home-dot), -20px 40px var(--color-home-dot), -40px 40px var(--color-home-dot), -60px 40px var(--color-home-dot), 0 60px var(--color-home-dot), -20px 60px var(--color-home-dot), -40px 60px var(--color-home-dot), -60px 60px var(--color-home-dot);
}
.app-shell .app-header__logo { width: 280px; }
/* Usuario, Preferencias y Salir comparten alto, tipografia y radio. Cambian
   solo en el relleno, que es lo que ordena las tres jerarquias: la accion
   principal llena, la secundaria delineada y la identidad sin borde. */
.app-shell .app-header__usuario,
.app-shell .app-header__settings,
.app-shell .app-header__salir {
  min-height: var(--alto-cabecera-accion); padding-inline: var(--space-4);
  border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600;
}
.app-shell .app-header__settings { background: var(--color-surface); color: var(--brand-black); }
/* Ayuda: mismo alto que los demás, cuadrado y delineado como Salir. */
.app-shell .app-header__ayuda {
  width: var(--alto-cabecera-accion); min-height: var(--alto-cabecera-accion); padding: 0; justify-content: center;
  border-radius: var(--radius-sm); background: transparent; color: var(--color-on-fill);
  border: 1px solid var(--color-cabecera-borde);
}
.app-shell .app-header__ayuda:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-surface); color: var(--brand-black); }
.app-shell .app-header__salir {
  background: var(--color-cabecera-chip); color: var(--color-on-fill);
  border: 1px solid var(--color-cabecera-borde);
}
.app-shell .app-header__salir:hover:not(:disabled) { background: var(--color-surface); border-color: var(--color-surface); color: var(--brand-black); }
/* El usuario no es un control: mismo alto y misma tipografia, sin fondo ni
   borde, para que no compita con los dos botones que si se pulsan. */
.app-shell .app-header__usuario { color: var(--color-on-fill); padding-inline: var(--space-2); }
.app-shell .app-header__usuario .icon { opacity: .6; }
.app-shell .app-content { width: calc(100% - var(--space-16)); max-width: var(--width-home); margin-inline: auto; padding-top: var(--space-6); }
body:has(.app-shell) .brand-backdrop { background-image: none; }
body:has(.app-shell) .brand-backdrop__frame { width: 300px; height: 500px; left: -220px; top: auto; bottom: -140px; border: 0; background: var(--color-home-module); opacity: .45; transform: rotate(-45deg); }
body:has(.app-shell) .brand-backdrop__circle { width: 3px; height: 3px; right: auto; left: 12%; top: auto; bottom: 5%; border: 0; border-radius: 50%; opacity: .45; background: var(--color-home-dot); box-shadow: 18px 0 var(--color-home-dot), 36px 0 var(--color-home-dot), 54px 0 var(--color-home-dot), 0 -18px var(--color-home-dot), 18px -18px var(--color-home-dot), 36px -18px var(--color-home-dot), 54px -18px var(--color-home-dot), 0 -36px var(--color-home-dot), 18px -36px var(--color-home-dot), 36px -36px var(--color-home-dot), 54px -36px var(--color-home-dot); }
body:has(.app-shell) .brand-backdrop__diamond { width: 110px; height: 620px; right: 4%; bottom: -250px; border: 0; background: var(--color-home-rose); opacity: 1; transform: rotate(45deg); }
.review-summary, .result-view { border-color: var(--color-home-border); box-shadow: var(--shadow-home-card); }
.pipeline-source > .icon { border-color: var(--color-home-border); box-shadow: var(--shadow-home-stepper); }
.upload-view { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
.upload-view > .workflow, .upload-view__dropzones, .upload-view__error { grid-column: 1 / -1; }
.upload-view .workflow { background: var(--color-surface); border: 1px solid var(--color-home-border); border-radius: var(--radius); box-shadow: var(--shadow-home-stepper); padding: var(--space-5) var(--space-6); gap: var(--space-6); }
.upload-view .workflow__step { position: relative; font-size: var(--text-base); gap: var(--space-4); min-width: 0; padding-bottom: var(--space-3); }
.upload-view .workflow__step > span { width: var(--size-home-step); height: var(--size-home-step); flex-shrink: 0; font-size: var(--text-lg); font-weight: 600; color: var(--gray-dark); background: var(--color-home-bg); }
.upload-view .workflow__step.is-active > span { border: 1px solid var(--color-home-header); border-radius: 50%; background: var(--color-home-header); color: var(--white); }
.upload-view .workflow__step.is-active::before { content: ""; position: absolute; bottom: 0; left: 0; width: min(150px, 100%); height: 4px; border-radius: var(--radius-sm); background: var(--brand-red); }
.upload-view .workflow__step:not(:last-child)::after { content: ""; flex: 1 0 16px; height: 2px; background: var(--color-home-connector); margin-left: var(--space-2); }
.upload-view__dropzones { gap: var(--space-8); }
.upload-zone-group { border-color: var(--color-home-border); box-shadow: var(--shadow-home-card); }
.source-card__header { padding: var(--space-4) var(--space-6); background: var(--gray-light); box-shadow: inset 3px 0 var(--brand-red); }
.source-card__header h2 { font-size: clamp(1.125rem, 1.7vw, 1.5rem); }
.source-card__number { font-size: var(--text-lg); color: var(--gray-dark); }
.source-card__type { font-size: var(--text-xs); }
.upload-view .dropzone { margin: var(--space-4) var(--space-5); min-height: 216px; }
.upload-view .dropzone--loaded { min-height: var(--height-home-file-loaded); padding: var(--space-4); }
.upload-view .dropzone__content--loaded { grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-5); }
.upload-view .dropzone__content--loaded .dropzone__icon { width: 52px; height: 52px; }
.upload-view .dropzone__filename { font-size: var(--text-lg); }
.upload-view .dropzone__loaded-label, .upload-view .dropzone__size { font-size: var(--text-base); }
.upload-view .dropzone__content--loaded .dropzone__actions { margin-top: var(--space-3); }
.upload-view .profile-selector { padding: 0 var(--space-5) var(--space-5); }
.upload-view__footer { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-6); }
.upload-view__footer .upload-view__privacy { order: -1; flex: 1; font-size: var(--text-sm); justify-content: flex-start; text-align: left; }
.upload-view__privacy .icon { width: 24px; height: 24px; }
.upload-view #btn-iniciar { width: var(--width-home-cta); height: 68px; font-size: var(--text-lg); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.upload-view #btn-iniciar .icon { transition: transform var(--transition); }
.upload-view #btn-iniciar:not(:disabled) { background: var(--brand-red); color: var(--white); border-color: var(--brand-red); }
.upload-view #btn-iniciar:not(:disabled):focus-visible { background: var(--color-cta-hover); border-color: var(--color-cta-hover); box-shadow: var(--shadow-cta-hover); }
@media (hover: hover) and (pointer: fine) {
  .upload-view #btn-iniciar:not(:disabled):hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); box-shadow: var(--shadow-cta-hover); transform: translateY(-2px); }
  .upload-view #btn-iniciar:not(:disabled):hover .icon { transform: translateX(4px); }
  .upload-view #btn-iniciar:not(:disabled):active { transform: translateY(0); box-shadow: none; }
}
@media (min-width: 1001px) {
  .upload-view .profile-selector__row { flex-wrap: nowrap; }
  .upload-view .profile-selector__select { flex: 1 1 0; min-width: 0; width: 0; }
  .upload-view .profile-selector__row > button, .upload-view .profile-selector__row > .wiz-tip-wrap { flex-shrink: 0; }
}
@media (max-width: 1199px) and (min-width: 701px) {
  .upload-view .workflow__step { gap: var(--space-2); font-size: var(--text-sm); }
  .upload-view .workflow__step:not(:last-child)::after { display: none; }
}
@media (max-width: 700px) {
  /* Con tres controles, la fila no entra en un telefono: se permite que baje
     en vez de recortar el logotipo y el ultimo boton. */
  .app-shell .app-header { min-height: 92px; padding: var(--space-4); flex-wrap: wrap; row-gap: var(--space-3); }
  .app-shell .app-header__logo { width: 160px; }
  .app-shell .app-header__tools { width: 100%; justify-content: flex-start; gap: var(--space-2); }
  .app-shell .app-header__usuario,
  .app-shell .app-header__settings,
  .app-shell .app-header__salir { min-height: 44px; padding-inline: var(--space-3); font-size: var(--text-xs); }
  .app-shell .app-content { width: calc(100% - var(--space-8)); }
  .reporte-flotante { right: var(--space-4); bottom: var(--space-4); }
  .upload-view { display: flex; }
  .upload-view .workflow { padding: var(--space-4); gap: var(--space-4); }
  .upload-view .workflow__step { font-size: var(--text-xs); gap: var(--space-2); }
  .upload-view .workflow__step > span { width: 32px; height: 32px; font-size: var(--text-sm); }
  .upload-view .workflow__step:not(:last-child)::after { display: none; }
  .upload-view #btn-iniciar { width: 100%; max-width: var(--width-home-cta); }
  .upload-view__launch .wiz-tip-wrap { width: 100%; justify-content: flex-end; }
  .upload-view__privacy { font-size: var(--text-xs); }
  .upload-view__footer { flex-direction: column; align-items: stretch; }
  .upload-view__footer .upload-view__privacy { order: 0; font-size: var(--text-xs); }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .app-shell .app-header { min-height: 120px; }
  .app-shell .app-content { padding-top: var(--space-5); }
  .upload-view { gap: var(--space-5); }
  .upload-view .workflow { padding-block: var(--space-3); }
  .upload-view .workflow__step > span { width: 40px; height: 40px; }
  .upload-view .source-card__header { padding: var(--space-4) var(--space-5); }
  .upload-view .dropzone { min-height: 168px; margin-block: var(--space-3); }
  .upload-view #btn-iniciar { height: 64px; }
}

/* Responsive. Grid minima and narrow labels must never inherit content width. */
@media (min-width: 701px) {
  .wiz-paso2 .wiz-form__section--rows .wiz-form__row { flex-direction: row; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
  .wiz-paso2 .wiz-form__section--rows .wiz-form__row:last-child { margin-bottom: 0; }
  .wiz-paso2 .wiz-form__section--rows .wiz-form__row > label { flex: 0 0 var(--width-mapping-label); min-width: 0; overflow-wrap: anywhere; }
  .wiz-paso2 .wiz-form__section--rows .wiz-form__row > select,
  .wiz-paso2 .wiz-form__section--rows .wiz-form__row > .wiz-form__row-split-inputs { flex: 1 1 0; min-width: 0; width: 0; }
  /* La columna y el código se leen juntos: van en la misma línea. */
  .wiz-paso2 .wiz-form__section--rows .wiz-form__row-split-inputs > * { flex: 1 1 0; }
}
@media (min-width: 901px) { .wiz-save .wiz-form__row label { flex: 0 0 var(--width-label); } }
@media (min-width: 1001px) {
  .dropzone__icon { width: 36px; height: 36px; margin-bottom: var(--space-2); }
  .dropzone__choose { margin-top: var(--space-2); }
  .dropzone__actions { margin-top: var(--space-2); }
  .profile-selector { padding: 0 var(--space-4) var(--space-3); min-height: 0; }
  .profile-selector__select { flex: 1 1 180px; min-width: 160px; width: 0; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .wiz-detect__file, .wiz-detect__meta, .wiz-detect__chips { margin-bottom: var(--space-4); }
  .wiz-meta-item { padding: var(--space-3); }
  .wiz-form { gap: var(--space-3); }
  .wiz-form__row { margin-bottom: var(--space-3); }
}
@media (max-width: 1000px) {
  .wiz-detect { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 701px) and (max-width: 1199px) {
  .financial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) 0; }
  .financial-stat:nth-child(3n) { border-right: 0; }
}
@media (max-width: 900px) {
  .wiz-paso2 { grid-template-columns: minmax(0, 1fr); }
  .wiz-paso2__preview .wiz-encabezado { position: static; }
  .wiz-paso2__preview .wiz-encabezado__tabla-wrap { max-height: var(--height-preview); }
  .wizard-modal__action-hint { flex-basis: 100%; max-width: 100%; }
  .wizard-modal__footer { flex-wrap: wrap; }
  .source-card__header { flex-wrap: wrap; }
  .source-card__type { display: none; }
}
@media (max-width: 700px) {
  .brand-backdrop > span { display: none; }
  .review-view__resumen::before, .result-view::before, .result-view::after,
  .pipeline-core::before, .pipeline-core::after { display: none; }
  body { padding: var(--space-4) var(--space-4) var(--space-10); }
  .app-header { padding-block: var(--space-3) var(--space-5); }
  .app-content { padding-top: var(--space-6); }
  .upload-view, .review-view { gap: var(--space-6); }
  .upload-view__dropzones { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .workflow__step { font-size: var(--text-xs); gap: var(--space-2); }
  .onboarding-steps__list { grid-template-columns: minmax(0, 1fr); }
  .modal-header, .wizard-modal__header, .modal-body, .wizard-modal__body, .modal-footer, .wizard-modal__footer { padding: var(--space-5); }
  .wizard-modal__identity { padding: var(--space-5) var(--space-5) var(--space-3); }
  .wizard-modal__source { display: none; }
  .modal-footer--onboarding { flex-direction: column; align-items: stretch; }
  .modal-footer--onboarding .btn { width: 100%; }
  .wiz-form__row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .wiz-detect__meta { gap: var(--space-2); }
  .wiz-meta-item { padding: var(--space-3); }
  .financial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) 0; }
  .financial-stat:nth-child(2n) { border-right: 0; }
  .review-view__actions { flex-direction: column-reverse; }
  .review-view__actions .btn { width: 100%; }
  .result-view { padding: 0; margin-top: var(--space-5); }
  .result-view__header, .result-view__body { padding: var(--space-5); }
  .result-view__footer { padding: var(--space-4) var(--space-5); }
  .result-view__footer .result-view__btn-nueva { width: 100%; }
  .processing-view { padding: var(--space-8) 0; min-height: auto; }
  .intelligence-pipeline { margin-block: var(--space-8); }
  .intelligence-pipeline { --size-pipeline-core: 84px; --size-pipeline-mark: 60px; --width-pipeline-source: 64px; --size-pipeline-tile: 56px; }
  .pipeline-source { font-size: var(--text-xs); }
  .pipeline-source > .icon { padding: var(--space-3); }
  .pipeline-line { margin-inline: var(--space-3); }
  .pm-item, .pm-confirm { flex-direction: column; align-items: stretch; }
  .pm-item__actions { justify-content: flex-end; }
  .upload-view__privacy { align-items: flex-start; text-align: left; }
}
@media (max-width: 520px) {
  :root { --alto-modal: 100dvh; --alto-modal-cuerpo: 55dvh; }
  .modal-overlay, .wizard-overlay { padding: 0; }
  .modal-panel, .wizard-modal { max-height: 100dvh; border-radius: 0; border: 0; }
  .modal-header__title { font-size: var(--text-lg); }
  .wizard-modal__identity h2 { font-size: var(--text-base); }
  .wizard-step { font-size: var(--text-xs); gap: var(--space-1); }
  .wizard-step__line { margin-inline: var(--space-2); }
  .wizard-step__num { width: 25px; height: 25px; }
  .wizard-modal__footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding-bottom: max(var(--space-5), env(safe-area-inset-bottom)); }
  .wizard-modal__footer > * { min-width: 0; }
  .wizard-modal__footer .btn, .wizard-modal__footer .wiz-tip-wrap { width: 100%; }
  .wizard-modal__footer .btn--primary, .wizard-modal__footer #wiz-next-tip, .wizard-modal__action-hint { grid-column: 1 / -1; }
  .wizard-modal__action-hint { margin-bottom: var(--space-2); }
  .modal-footer--prefs { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); gap: var(--space-2); }
  .modal-footer--prefs .btn { padding-inline: var(--space-3); font-size: var(--text-sm); }
  .source-card__header { padding-inline: var(--space-5); }
  .dropzone { margin-inline: var(--space-5); padding: var(--space-5); }
  .profile-selector { padding-inline: var(--space-5); }
  .app-header__usuario,
  .app-header__settings,
  .app-header__salir { font-size: var(--text-xs); padding: var(--space-2); }
  .financial-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .financial-stat { border-right: 0; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); }
  .financial-stat:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (pointer: coarse) {
  :root { --tamano-control: 44px; --alto-control: 44px; }
  .info-tip { min-width: 26px; min-height: 26px; }
  .onboarding-accept__label { min-height: 44px; align-items: center; }
  .wiz-encabezado__fila[role="button"] td { padding-block: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .recorrido, .recorrido--oculto, .recorrido__hueco, .recorrido__tarjeta, .recorrido--cambiando .recorrido__hueco, .recorrido--cambiando .recorrido__tarjeta { transition: none; animation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .upload-view #btn-iniciar:not(:disabled):hover,
  .upload-view #btn-iniciar:not(:disabled):hover .icon { transform: none; }
}