/* v1.15 · Identidad de la guía: azul, amarillo y un espacio tranquilo para atender.
   Capa visual compartida; los módulos conservan sus datos, orden y comportamiento.
   Sin fuentes remotas, imágenes externas ni dependencias. */
:root {
  --brand-blue: var(--color-action);
  --brand-blue-deep: var(--color-action-hover);
  --brand-yellow: var(--color-brand-accent);
  --bitel-yellow: var(--brand-yellow);
  --bitel-yellow-soft: var(--color-warning-soft);
  --teal: var(--brand-blue);
  --teal-dark: var(--color-link);
  --teal-soft: var(--color-info-soft);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border-subtle);
  --surface: var(--color-surface);
  --canvas: var(--color-canvas);
  --field: var(--color-surface);
  --field-hover: var(--color-surface-subtle);
  --speech: var(--color-info-soft);
  --section: var(--color-surface-subtle);
  --shadow: 0 10px 28px rgba(24, 44, 56, .09);
  --hero: var(--color-surface);
  --hero-ink: var(--color-text);
  --soft-yellow: var(--color-warning-soft);
  --focus: var(--color-focus);
  --control-line: var(--color-border-control);
  --radius: var(--radius-group);
  --danger: var(--color-error);
  --danger-soft: var(--color-error-soft);
  --success: var(--color-success);
  --info: var(--color-info);
  font-family: var(--font-family-ui);
  color-scheme: light;
}

html[data-theme="dark"] {
  --field: var(--color-surface);
  --field-hover: var(--color-surface-subtle);
  --speech: var(--color-info-soft);
  --section: var(--color-surface-subtle);
  --bitel-yellow-soft: var(--color-warning-soft);
  --shadow: 0 8px 24px rgba(0, 0, 0, .22);
  color-scheme: dark;
}

html[data-theme] body { background: var(--canvas); }
body { min-height: 100vh; display: flex; flex-direction: column; }
#app { flex: 1; }
#app:focus { outline: none; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea, summary { scroll-margin-top: 112px; }
button, a { touch-action: manipulation; }
button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 4px;
}
button:disabled { cursor: not-allowed; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
::selection { background: #ffed00; color: #173346; }
.guide-icon { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }

/* Encabezado compacto: controles estables durante toda la atención. */
html[data-theme] .topbar {
  height: auto; min-height: 82px; padding: 10px clamp(18px, 3vw, 44px);
  border-bottom: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 3px 14px rgba(25, 47, 65, .03); gap: 18px;
}
.topbar::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--brand-yellow); }
.brand { padding: 5px 0; gap: 12px; flex-shrink: 0; }
.brand strong { font-size: .95rem; color: var(--ink); font-weight: 750; letter-spacing: -.025em; }
.brand small { font-size: .69rem; color: var(--muted); margin-top: 2px; }
.brand-mark { width: 44px; height: 44px; border-radius: 13px; background: var(--brand-yellow); flex-shrink: 0; }
.brand-mark i { background: var(--brand-blue); border-radius: 11px 4px; }
.brand-mark i:first-child { left: 14px; top: 8px; width: 20px; height: 13px; }
.brand-mark i:last-child { left: 9px; bottom: 8px; width: 23px; height: 14px; }
.top-actions { gap: 7px; }
.top-actions button { font-size: .76rem; min-height: 40px; padding: 8px 12px; border-radius: 10px; font-weight: 650; }
.text-size-button { min-width: 115px; }
html[data-theme] .icon-button { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme] .icon-button:hover { background: var(--section); border-color: var(--teal); }
.auth-email { max-width: 145px; }

/* Inicio. La ilustración de conversación es original y está construida en CSS. */
.home-shell { max-width: 1240px; padding: 30px 30px 34px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); align-items: center; gap: 24px; min-height: 248px; padding: 32px 42px; border-radius: 24px; background: var(--hero); position: relative; overflow: hidden; }
.home-hero-copy { position: relative; z-index: 1; }
.home-hero .eyebrow { font-size: .67rem; letter-spacing: .13em; display: flex; align-items: center; gap: 8px; color: var(--hero-ink); }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; background: var(--brand-blue); border: 2px solid var(--hero-ink); border-radius: 50%; }
.home-hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.65rem); font-weight: 760; line-height: 1.14; letter-spacing: -.045em; margin: 13px 0 15px; color: var(--hero-ink); }
.home-hero h1 span { position: relative; display: inline-block; z-index: 0; }
.home-hero h1 span::after { content: ""; position: absolute; left: 0; right: -5px; bottom: 1px; height: 9px; border-radius: 5px 0 5px 0; background: var(--brand-yellow); z-index: -1; opacity: .85; }
html[data-theme="dark"] .home-hero h1 span::after { opacity: .32; }
.home-hero .lead { max-width: 510px; font-size: .91rem; line-height: 1.65; color: var(--muted); }
.home-art { position: relative; justify-self: center; width: 280px; height: 212px; }
.art-orbit { position: absolute; inset: 1px 20px; border: 1px solid color-mix(in srgb, var(--hero-ink) 14%, transparent); border-radius: 50%; transform: rotate(-23deg); }
.art-orbit::after { content: ""; position: absolute; inset: 26px -20px; border: inherit; border-radius: 50%; }
.art-spark { position: absolute; right: 2px; top: -3px; color: var(--brand-blue); font-size: 36px; }
html[data-theme="dark"] .art-spark { color: var(--brand-yellow); }
.art-bubble { position: absolute; border-radius: 22px 22px 22px 5px; }
.art-bubble-back { top: 18px; left: 25px; width: 137px; height: 86px; background: var(--brand-yellow); display: flex; align-items: center; justify-content: center; gap: 11px; transform: rotate(-8deg); }
.art-bubble-back span { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-blue); }
.art-bubble-front { top: 88px; left: 50px; width: 218px; height: 101px; padding: 20px; display: flex; align-items: center; gap: 13px; background: var(--brand-blue); color: white; box-shadow: 0 12px 24px rgba(0, 66, 111, .13); transform: rotate(4deg); }
.art-bubble-front .guide-icon { width: 30px; height: 30px; color: var(--brand-yellow); }
.art-bubble-front span { font-size: .78rem; line-height: 1.5; }
.art-bubble-front strong { font-size: 1rem; font-weight: 700; }
.art-check { position: absolute; left: 20px; bottom: 10px; width: 40px; height: 40px; padding: 10px; background: var(--surface); color: var(--teal-dark); border-radius: 50%; box-shadow: var(--shadow); }
.home-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 27px; }
.home-section-heading h2 { margin: 0; font-size: 1.15rem; font-weight: 720; letter-spacing: -.025em; }
.home-section-heading>span { color: var(--muted); font-size: .75rem; }
.home-shell .mode-grid { gap: 20px; margin: 16px 0 25px; }
html[data-theme] .mode-card { position: relative; min-height: 238px; padding: 24px 27px; border-radius: var(--radius); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; transition: transform .18s, box-shadow .18s, border-color .18s; overflow: hidden; }
html[data-theme] .mode-card.primary-card { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }
.mode-heading { display: flex; align-items: center; gap: 12px; width: 100%; }
.mode-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--section); color: var(--teal-dark); }
.primary-card .mode-icon { background: #ffffff20; color: white; }
.mode-kind { font-size: .64rem; letter-spacing: .1em; font-weight: 700; }
.mode-number { display: inline; margin-left: auto; width: auto; height: auto; background: none; color: var(--muted); font-size: .85rem; font-weight: 650; }
.primary-card .mode-number { color: #d1e9f7; }
.mode-card h2 { font-size: 1.38rem; letter-spacing: -.03em; font-weight: 740; margin: 16px 0 8px; }
.mode-card p { font-size: .87rem; line-height: 1.65; max-width: 440px; opacity: 1; color: var(--muted); margin-bottom: 18px; }
.primary-card p { color: #e2f1fa; }
.mode-card .arrow { font-size: .79rem; color: var(--teal-dark); display: inline-flex; align-items: center; font-weight: 750; }
.primary-card .arrow { background: var(--brand-yellow); color: #073b60; border-radius: 9px; padding: 9px 15px; }
.mode-card:not(.primary-card) .arrow { padding: 9px 0; }
.mode-card:not(.primary-card)::after { content: ""; position: absolute; right: -21px; bottom: -27px; width: 82px; height: 82px; border: 16px solid var(--brand-yellow); border-radius: 50%; opacity: .8; }
html[data-theme] .mode-card:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 10px 24px rgba(0, 75, 120, .12); }
html[data-theme] .quick-strip { padding: 0; border: 0; border-radius: 0; background: transparent; }
.quick-strip .home-section-heading { margin: 0 0 15px; }
.quick-strip .home-section-heading h2 { font-size: 1rem; }
.quick-strip .chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
html[data-theme] .quick-strip .chip { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-radius: 14px; min-height: 99px; padding: 13px 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: .73rem; font-weight: 650; line-height: 1.35; }
.quick-strip .chip .guide-icon { color: var(--teal-dark); width: 25px; height: 25px; }
html[data-theme] .quick-strip .chip:hover { background: var(--section); border-color: var(--teal); }
.home-notes { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); }
.home-notes .privacy-note { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .65rem; line-height: 1.6; max-width: 640px; }
.home-notes .privacy-note:last-child { max-width: 245px; }
.home-notes .guide-icon { width: 21px; height: 21px; color: var(--teal-dark); }

/* Recorridos: navegación ligera y un lienzo continuo de lectura. */
.workspace { max-width: 1500px; grid-template-columns: 245px minmax(0, 1fr); gap: 27px; padding-top: 26px; }
.sar-workspace { max-width: 1500px; grid-template-columns: 250px minmax(0, 1fr); }
html[data-theme] .side { background: transparent; padding: 6px 0; border: 0; border-radius: 0; top: 106px; max-height: calc(100vh - 126px); overflow-y: auto; scrollbar-width: thin; }
.side-title { color: var(--teal-dark); font-size: .67rem; font-weight: 750; letter-spacing: .09em; margin: 4px 12px 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.step-list { gap: 5px; }
.step-list button { padding: 12px; font-size: .8rem; line-height: 1.45; min-height: 46px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); }
.step-list button:hover { background: var(--section); color: var(--teal-dark); }
.step-list button.current { background: var(--surface); border-color: var(--line); color: var(--teal-dark); box-shadow: inset 4px 0 0 var(--brand-blue), var(--shadow); font-weight: 750; }
.step-list button.done { color: var(--teal-dark); }
.progress-row { margin-bottom: 9px; font-size: .73rem; }
.progress { background: var(--line); height: 5px; margin-bottom: 18px; }
.progress i { background: var(--brand-blue); border-radius: inherit; }
html[data-theme] .panel { border-radius: 20px; padding: clamp(22px, 3vw, 36px); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme] .sar-panel { border-top: 3px solid var(--brand-yellow); }
.panel>.eyebrow { font-size: .66rem; letter-spacing: .12em; margin-bottom: 11px; }
.panel h1 { font-size: clamp(1.55rem, 2.5vw, 2rem); letter-spacing: -.035em; font-weight: 750; line-height: 1.18; }
.panel>.lead { font-size: .91rem; line-height: 1.6; max-width: 900px; }
.nav-row { border-top: 1px solid var(--line); padding-top: 19px; margin-top: 27px; }
.primary, .secondary { border-radius: 10px; padding: 10px 17px; font-size: .87rem; font-weight: 700; min-height: 44px; }
.primary:hover:not(:disabled) { background: var(--brand-blue-deep); }
html[data-theme] .secondary:hover:not(:disabled) { background: var(--section); border-color: var(--teal); }
.secondary:disabled { opacity: .48; }

/* Sistema común de los siete pasos: una navegación estable y superficies por niveles. */
.sar-step-body { margin-top: 26px; }
html[data-theme] .side {
  position: sticky; background: color-mix(in srgb, var(--surface) 72%, var(--canvas)); padding: 17px 13px 15px;
  border: 1px solid var(--line); border-top: 3px solid var(--brand-yellow); border-radius: 17px;
  box-shadow: 0 10px 26px rgba(18, 59, 87, .07); top: 106px;
}
.side-title { margin-inline: 8px; }
.step-list button.current {
  background: var(--section); border-color: color-mix(in srgb, var(--brand-blue) 34%, var(--line));
  color: var(--brand-blue-deep); box-shadow: inset 4px 0 0 var(--brand-yellow), 0 4px 12px rgba(18, 59, 87, .07);
}
html[data-theme="dark"] .step-list button.current { color: var(--teal-dark); }
html[data-theme] .section-box,
html[data-theme] .sar-detail,
html[data-theme] .sar-evidence-section,
html[data-theme] .sar-cc-register {
  box-shadow: 0 8px 22px rgba(18, 59, 87, .07), inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* El speech es la pieza principal de lectura. Su texto permanece intacto. */
.section-box { border-radius: 14px; border-color: var(--line); margin-top: 24px; }
html[data-theme] .section-label { font-size: .72rem; letter-spacing: .06em; font-weight: 750; padding: 12px 18px; background: var(--section); color: var(--teal-dark); border-left: 3px solid var(--brand-yellow); }
.section-body { padding: 18px; }
html[data-theme] .speech {
  background: var(--speech); color: var(--ink); border-left: 4px solid var(--brand-blue);
  border-radius: 3px 11px 11px 3px; padding: 20px 23px;
  font-family: "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  font-size: .9rem; font-weight: 500; line-height: 1.85; letter-spacing: -.018em;
  overflow-wrap: anywhere;
}
html[data-theme] .copy-button { background: var(--surface); color: var(--teal-dark); border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; font-size: .78rem; font-weight: 700; min-height: 40px; }
.copy-button::before { content: ""; display: inline-block; width: 10px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: -3px -3px 0 -1px var(--surface), -3px -3px 0 0 currentColor; margin-right: 9px; vertical-align: -1px; }
html[data-theme] .copy-button:hover:not(:disabled) { background: var(--section); border-color: var(--teal); }
.speech+.copy-button { margin-top: 12px; }
html[data-theme] .notice { padding: 15px 18px; border-radius: 11px; background: var(--bitel-yellow-soft); color: var(--ink); border-left: 4px solid #cfad00; font-size: .89rem; line-height: 1.65; }
html[data-theme] .notice.info { background: var(--section); border-left-color: var(--info); color: var(--ink); }
html[data-theme] .notice.danger { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); }
.notice p { margin: 8px 0; }
.notice p:last-child { margin-bottom: 0; }
.choice { padding: 15px 17px; border-width: 1px; border-radius: 12px; font-size: .91rem; }
html[data-theme] .choice.selected { background: var(--section); border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); }
.reference-details { border-radius: 11px; }
html[data-theme] .reference-details summary { background: var(--canvas); color: var(--muted); font-size: .7rem; padding: 10px 14px; }
.reference-details[open] summary { border-bottom: 1px solid var(--line); }

/* Formularios, fechas, evidencias y réplica de Customer Care. */
.sar-fields { gap: 20px; margin: 22px 0; }
.sar-field { font-size: .88rem; gap: 8px; font-weight: 650; }
.sar-field input, .sar-field select, .sar-field textarea { border-radius: 10px; padding: 11px 13px; font-size: .9rem; }
html[data-theme] :is(input, select, textarea) { border-color: var(--control-line); }
.sar-field input:focus, .sar-field select:focus, .sar-field textarea:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid color-mix(in srgb, var(--focus) 22%, transparent); outline-offset: 1px; border-color: var(--focus); }
.sar-help { font-size: .79rem; line-height: 1.65; }
.sar-section-head h2 { font-size: 1.04rem; }
.sar-section-head .secondary { font-size: .76rem; min-height: 38px; padding: 7px 12px; }
.sar-check { font-size: .88rem; line-height: 1.65; }
.sar-evidence-section { border-width: 1px; border-radius: 12px; padding: 14px; }
.sar-evidence-section.selected { box-shadow: inset 3px 0 var(--teal); }
.sar-paste-zone { border-width: 1px; border-radius: 15px; padding: 26px 18px; }
.sar-paste-zone strong { color: var(--teal-dark); }
.sar-cc-register { border-radius: 14px; background: var(--canvas); }
.sar-cc-titlebar { background: var(--section); }
.sar-cc-label, .sar-cc-time-field .sar-time-copy>label { font-size: .8rem; }
.sar-cc-control { font-size: .91rem; border-radius: 9px; }
.sar-cc-time-field .sar-time-value { font-family: "Cascadia Mono", Consolas, monospace; font-size: 1rem; font-weight: 650; letter-spacing: .06em; color: var(--teal-dark); }
.sar-time-copy-button { border-radius: 9px; font-size: .8rem; font-weight: 650; }
.sar-cc-template { font-size: .85rem; line-height: 1.8; }
.form-field>span { font-size: .79rem; }
.template-preview { line-height: 1.7; }

/* Biblioteca, ventanas y pie de página. */
.library { padding-top: 32px; }
.library h1 { font-size: 2rem; letter-spacing: -.035em; }
.library-card { border-radius: 14px; padding: 22px; }
.library-card h2 { font-size: 1.12rem; letter-spacing: -.02em; }
html[data-theme] .tab { background: var(--surface); border-radius: 10px; font-size: .83rem; font-weight: 650; }
html[data-theme] .tab.active { background: var(--teal); border-color: var(--teal); color: white; }
.library-head input { background: var(--field); color: var(--ink); font-size: .88rem; border-radius: 11px; }
.sms-option { border-radius: 15px; min-height: 180px; }
.sms-message { font-family: "Cascadia Mono", Consolas, monospace; font-size: .89rem; line-height: 1.8; }
dialog { border: 1px solid var(--line); border-radius: 18px; }
dialog::backdrop { background: rgba(7, 26, 43, .62); }
.dialog-head label { font-size: 1rem; }
html[data-theme] .dialog-head button { color: var(--ink); }
.search-dialog>input { font-size: .92rem; }
.changelog-entry.changelog-current { background: var(--section); border-color: var(--line); border-left: 4px solid var(--teal); }
.site-footer { margin-top: auto; padding: 18px clamp(18px, 3vw, 44px); background: var(--surface); font-size: .65rem; align-items: center; }
.changelog-trigger { padding: 6px 10px; border-radius: 8px; font-size: .65rem; font-weight: 650; }
.toast { background: var(--brand-blue-deep); border: 1px solid #ffffff26; font-size: .87rem; border-radius: 10px; }

@media (max-width: 1180px) {
  .brand strong { font-size: .86rem; }
  .top-actions button { padding: 8px 9px; }
  .workspace { gap: 20px; }
  .home-shell { padding-inline: 26px; }
}
@media (max-width: 980px) {
  .workspace, .sar-workspace { display: block; }
  html[data-theme] .side { position: static; margin-bottom: 19px; max-height: none; overflow: visible; }
  .side-title { margin: 0 4px 9px; border: 0; padding: 0; }
  .home-hero { padding: 28px; grid-template-columns: minmax(0, 1fr) 245px; }
  .home-art { transform: scale(.86); transform-origin: center; }
  .home-notes { gap: 20px; }
  .topbar .brand { flex-shrink: 1; }
}
@media (max-width: 820px) {
  .home-shell .mode-grid { grid-template-columns: 1fr; }
  .home-hero { grid-template-columns: 1fr; padding: 28px; min-height: 0; }
  .home-art { display: none; }
  .home-hero h1 { font-size: 2.3rem; }
  .home-hero .lead { max-width: 600px; }
  html[data-theme] .mode-card { min-height: 215px; }
  .quick-strip .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand small { display: block; }
  .brand-mark { width: 39px; height: 42px; }
  .topbar .top-actions { max-width: 60%; }
  .home-notes { display: block; }
  .home-notes .privacy-note:last-child { max-width: none; margin-top: 10px; padding-left: 31px; }
  .nav-row { z-index: 4; padding-bottom: 8px; }
}
@media (max-width: 600px) {
  html[data-theme] .topbar { position: relative; padding: 12px 15px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .topbar .brand { align-self: flex-start; }
  .brand strong { font-size: .96rem; }
  .topbar .top-actions { max-width: none; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .top-actions button { min-height: 38px; }
  .text-size-button { min-width: 40px; }
  .brand small { font-size: .69rem; }
  button, a, input, select, textarea, summary { scroll-margin-top: 24px; }
  .home-shell { padding: 19px 16px 26px; }
  .home-hero { padding: 24px; border-radius: 18px; }
  .home-hero h1 { font-size: clamp(1.8rem, 7vw, 2.2rem); }
  .home-hero .lead { font-size: .85rem; }
  .home-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-section-heading h2 { font-size: 1.1rem; }
  .home-section-heading>span { font-size: .72rem; }
  .home-shell .mode-grid { gap: 14px; }
  html[data-theme] .mode-card { padding: 22px; }
  .mode-card h2 { font-size: 1.28rem; }
  .mode-kind { font-size: .6rem; }
  .quick-strip .chip { overflow-wrap: anywhere; }
  .workspace { padding: 18px 12px 35px; }
  html[data-theme] .panel { padding: 22px 17px; border-radius: 15px; }
  .progress-row { font-size: .65rem; gap: 14px; }
  .sar-fields { gap: 18px; }
  .section-body { padding: 13px; }
  html[data-theme] .speech { padding: 16px; font-size: .87rem; line-height: 1.8; }
  .nav-row { flex-wrap: wrap; }
  .sar-cc-time-field .sar-time-copy-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; }
  .site-footer-left { display: flex; gap: 9px; }
  .site-footer-left .changelog-trigger { margin: 0; }
  .site-footer>span { margin: 0; }
  .reference-details summary { align-items: flex-start; }
  .changelog-dialog-head { padding-inline: 16px; }
}
@media print {
  html[data-theme] body, html[data-theme] .panel { background: white; color: black; }
  .home-art, .home-notes, .site-footer { display: none; }
  html[data-theme] .speech { background: #f5f5f5; color: black; }
}

/* Reclamos · Paso 2: un mismo lenguaje para datos, instrucciones y resultados. */
.deadline-kicker { display: block; color: var(--teal-dark); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="dark"] .field-rule-error { color: #ff9c96; }
.otp-crop { position: relative; overflow: hidden; border: 0; padding: 0; background: white; border-radius: 8px; }
.otp-crop img { position: absolute; height: auto; max-width: none; margin: 0; display: block; }
.workspace.validation-workspace { box-sizing: border-box; max-width: 1180px; padding: 28px 40px 64px; }
.process-progress { min-width: 0; margin: 0 0 24px; color: var(--color-text-muted); font-size: .875rem; }
.process-progress-top, .process-progress-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; }
.process-progress-top > span:first-child { font-size: .9375rem; font-weight: 600; }
.process-progress-bottom strong { color: var(--color-text); }
.process-progress-track { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.process-progress-track > li { flex: 1; min-width: 0; }
.process-progress .process-progress-step { display: flex; align-items: center; width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 5px; background: transparent; box-shadow: none; cursor: pointer; }
.process-progress-step > span { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--color-border-control); }
.process-progress-step.is-previous > span { background: var(--color-action); }
.process-progress-step.is-current > span { background: var(--color-brand-accent); }
.process-progress-step:hover:not(:disabled) > span { filter: brightness(1.2); }
.process-progress .process-progress-step:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.process-progress .process-progress-step:disabled { opacity: .5; cursor: not-allowed; }
.validation-flow {
  --teal: var(--color-action); --teal-dark: var(--color-link);
  --ink: var(--color-text); --muted: var(--color-text-muted); --line: #c9d3d9;
  --surface: var(--color-surface); --field: var(--color-canvas); --section: var(--color-surface-subtle);
  --danger: var(--color-error); --danger-soft: var(--color-error-soft); --info: var(--color-info);
  --focus: var(--color-focus);
  font-size: 1rem; line-height: 1.5;
}
html[data-theme="dark"] .validation-flow { --line: var(--color-border-subtle); }
html[data-theme] .panel.validation-flow { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1100px; margin-inline: auto; padding: 0; }
.validation-flow .validation-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin: 0; }
html[data-theme] .validation-heading h1 { margin: 0; padding: 0; border: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.validation-heading > div > p { max-width: 60ch; margin: 8px 0 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.validation-flow :is(button, summary, input, a) { scroll-margin-top: 112px; }
.validation-flow .section-box { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: clip; }
.validation-flow .section-body { padding: 24px; }
.validation-flow .section-label { margin: 0 0 20px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.08rem; letter-spacing: 0; text-transform: none; }
.validation-flow .section-box > .section-label::before { content: none; display: none; }
.validation-flow .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-theme] .validation-flow .choice { min-height: 52px; padding: 12px 20px; border: 2px solid var(--control-line); border-radius: 10px; background: transparent; color: var(--ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
html[data-theme] .validation-flow .choice.selected { border-color: var(--color-action); background: var(--color-info-soft); box-shadow: none; }
.validation-flow .validation-person-selector { margin: 0; padding: 0; border: 0; background: transparent; }
.validation-flow .validation-person-selector > h2 { margin: 0 0 16px; font-size: 1.15rem; }
.validation-flow .validation-person-selector > .choice-grid { gap: 20px; }
html[data-theme] .validation-flow .validation-person-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; border: 1.5px solid var(--control-line); border-radius: 14px; background: var(--surface); text-align: left; }
.validation-flow .validation-person-card:hover { border-color: var(--color-action); background: var(--section); }
.validation-flow .validation-person-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--section); color: var(--color-link); }
.validation-flow .validation-person-card[data-value="nacional"] .validation-person-icon { background: var(--brand-yellow); color: #182c38; }
.validation-flow .validation-person-icon .guide-icon { width: 28px; height: 28px; }
.validation-flow .validation-person-card strong { display: block; font-size: 1.375rem; font-weight: 700; }
.validation-flow .validation-person-card small { display: block; max-width: 38ch; margin-top: 6px; color: var(--muted); font-size: 1rem; font-weight: 400; line-height: 1.5; }
.validation-flow .validation-person-selector--selected { position: relative; margin: 0; }
.validation-flow .validation-person-selector--selected > summary { display: flex; align-items: center; width: fit-content; min-height: 48px; list-style: none; cursor: pointer; }
.validation-flow .validation-person-selector--selected > summary::-webkit-details-marker { display: none; }
.validation-flow .validation-person-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--section); color: var(--ink); font-size: 1rem; font-weight: 600; }
.validation-flow .validation-person-pill .guide-icon { width: 18px; height: 18px; color: inherit; }
.validation-flow .validation-person-chevron { display: flex; margin-left: 4px; }
.validation-flow .validation-person-selector--selected > summary:is(:hover, :focus-visible) .validation-person-pill { border-color: var(--color-link); }
.validation-flow .validation-disclosure-action { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--control-line); border-radius: 8px; color: var(--color-link); font-size: .875rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.validation-flow .validation-disclosure-action .guide-icon { flex: 0 0 auto; width: 18px; height: 18px; }
.validation-flow summary:is(:hover, :focus-visible) > .validation-disclosure-action { background: var(--section); border-color: var(--color-link); }
.validation-flow .validation-person-selector[open] > summary .validation-person-chevron { transform: rotate(180deg); }
.validation-flow .validation-person-selector--selected > .choice-grid { position: absolute; z-index: 5; right: 0; top: 100%; width: min(640px, calc(100vw - 32px)); margin-top: 6px; padding: 16px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--surface); }
html[data-theme] .validation-flow .validation-person-selector--selected .validation-person-card { min-height: 0; gap: 8px; padding: 16px; }
.validation-flow .validation-person-selector--selected .validation-person-card strong { font-size: 1rem; }
.validation-flow .validation-person-selector--selected .validation-person-card small { font-size: .85rem; }
.validation-flow .validation-help { margin: 12px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.validation-flow .validation-level-progress { margin: 0; }
/* Shared geometry follows the supplied HTML; no fixed preview heights. */
.validation-flow ol.validation-level-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.validation-flow .validation-level-progress li { display: flex; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.validation-flow .validation-level-link { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 44px; padding: 14px 16px; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; box-shadow: none; }
.validation-flow .validation-level-link:hover:not(:disabled) { background: color-mix(in srgb, currentColor 4%, transparent); }
.validation-flow .validation-level-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.validation-flow .validation-level-link:disabled { opacity: 1; }
.validation-flow .validation-level-progress li.is-optional { border-style: dashed; background: transparent; }
.validation-flow .validation-level-progress li.is-current { border-color: var(--control-line); color: var(--ink); }
.validation-flow .validation-level-progress li.is-complete { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.validation-flow .validation-level-progress li.is-info { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning); }
.validation-flow .validation-level-progress li.is-rejected { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-error); }
.validation-flow .validation-progress-number { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--control-line); border-radius: 50%; font-size: 1rem; font-weight: 800; }
.validation-flow .is-optional .validation-progress-number { border-style: dashed; }
.validation-flow .is-current .validation-progress-number { border-color: var(--brand-yellow); background: var(--brand-yellow); color: #182c38; }
.validation-flow .is-complete .validation-progress-number { border-color: transparent; background: var(--color-success); color: var(--color-success-soft); }
.validation-flow .is-info .validation-progress-number { border-color: var(--color-warning); color: var(--color-warning); }
.validation-flow .is-rejected .validation-progress-number { border-color: transparent; background: var(--color-error); color: var(--color-error-soft); }
.validation-flow .validation-level-progress strong { display: block; font-size: 1rem; line-height: 1.4; }
.validation-flow .validation-progress-compact { display: none; }
.validation-flow .validation-level-progress small { display: block; margin-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.validation-flow .validation-level-progress :is(.is-complete, .is-info, .is-rejected) small { color: inherit; }
.validation-flow .validation-level-details { min-width: 0; }
.validation-flow .validation-level-summary { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 16px 24px; list-style: none; cursor: pointer; }
.validation-flow .validation-level-summary::-webkit-details-marker { display: none; }
.validation-flow .validation-level-details[open] > .validation-level-summary { border-bottom: 1px solid var(--line); }
.validation-flow .validation-level-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; background: var(--brand-yellow); color: #182c38; }
.validation-flow .validation-level-icon .guide-icon { width: 22px; height: 22px; }
.validation-flow .is-complete > .validation-level-summary .validation-level-icon { background: var(--color-success-soft); color: var(--color-success); }
.validation-flow .is-info > .validation-level-summary .validation-level-icon { background: var(--color-warning-soft); color: var(--color-warning); }
.validation-flow .is-rejected > .validation-level-summary .validation-level-icon { background: var(--color-error-soft); color: var(--color-error); }
.validation-flow .validation-level-heading { min-width: 0; flex: 1; }
.validation-flow .validation-level-heading > strong { display: block; font-size: 1.3125rem; font-weight: 650; line-height: 1.35; }
.validation-flow .validation-level-heading > small { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.validation-flow .is-active[open] > .validation-level-summary .validation-level-heading > small { display: none; }
.validation-flow .validation-level-details[open] > .validation-level-summary .validation-level-review { display: none; }
.validation-flow .validation-level-one .section-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; align-items: start; padding: 0; }
.validation-flow .validation-level-one-foreign .section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.validation-flow .validation-level-card { min-width: 0; padding: 24px; border: 0; background: transparent; }
.validation-flow .validation-level-grid { display: grid; gap: 20px; }
.validation-flow .validation-task-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--ink); font-size: 1.125rem; font-weight: 650; line-height: 1.4; }
.validation-flow .validation-task-number { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--control-line); border-radius: 50%; background: transparent; color: var(--ink); font-size: .875rem; font-weight: 800; }
.validation-flow .validation-data-grid { display: grid; gap: 0; margin: 0; }
.validation-flow .validation-data-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 6px 14px; min-width: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.validation-flow .validation-data-item:last-child { border-bottom: 0; }
.validation-flow .validation-data-icon { color: var(--color-link); }
.validation-flow .validation-data-icon .guide-icon { width: 22px; height: 22px; }
.validation-flow .validation-data-item h4 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.validation-flow .validation-data-item p { grid-column: 2; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.validation-flow .issue-date-capture { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; }
.validation-flow .issue-date-capture label { font-size: 1rem; font-weight: 650; }
.validation-flow .issue-date-capture input { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--field); color: var(--ink); font: inherit; }
.validation-flow .issue-date-capture input[aria-invalid="true"] { border-color: var(--danger); }
.validation-flow .issue-date-capture small { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.validation-flow .issue-date-capture .field-error { color: var(--danger); font-size: .9rem; font-weight: 650; }
.validation-flow .validation-capture-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html[data-theme] :is(.validation-flow, .cc-sim-intro) .validation-capture-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 44px; padding: 9px 14px; border: 1px solid var(--color-warning); border-radius: 8px; background: var(--color-warning-soft); color: var(--color-link); font-size: .9375rem; font-weight: 600; line-height: 1.4; text-align: center; }
.validation-flow .issue-date-capture > .validation-capture-link { justify-self: center; }
:is(.validation-flow, .cc-sim-intro) .validation-capture-link::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--color-warning); border-radius: inherit; opacity: 0; pointer-events: none; animation: validation-capture-attention 4.8s ease-in-out infinite; }
:is(.validation-flow, .cc-sim-intro) .validation-capture-link:is(:hover, :focus)::after,
html:has(#imageDialog[open]) :is(.validation-flow, .cc-sim-intro) .validation-capture-link::after { animation-play-state: paused; visibility: hidden; }
@keyframes validation-capture-attention { 0%, 48%, 100% { opacity: 0; } 70%, 82% { opacity: .9; } }
:is(.validation-flow, .cc-sim-intro) .validation-capture-link .guide-icon { width: 18px; height: 18px; }
.validation-flow .issue-date-guidance { align-self: stretch; min-width: 0; margin: 0; padding: 24px; border: 0; border-left: 1px solid var(--line); }
.validation-flow .validation-task-help { margin: -6px 0 16px 38px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.validation-flow .issue-date-rules { display: grid; gap: 10px; margin-top: 0; }
.validation-flow .issue-date-scenario { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--section); }
.validation-flow .issue-date-scenario > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; align-items: start; gap: 12px; min-height: 60px; padding: 14px 16px; list-style: none; cursor: pointer; }
.validation-flow .issue-date-scenario > summary::-webkit-details-marker { display: none; }
.validation-flow :is(.issue-date-scenario, .validation-person-selector, .validation-level-details) > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.validation-flow .validation-level-details > summary:focus-visible { outline-offset: -3px; }
.validation-flow .issue-date-outcome { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 112px; padding: 5px 12px; border-radius: 999px; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.validation-flow .issue-date-outcome-positive { color: var(--color-success); background: var(--color-success-soft); }
.validation-flow .issue-date-outcome-negative { color: var(--color-error); background: var(--color-error-soft); }
.validation-flow .issue-date-condition { min-width: 0; }
.validation-flow .issue-date-scenario-number { display: none; }
.validation-flow .issue-date-condition > strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.validation-flow .issue-date-caret { display: flex; align-self: center; color: var(--muted); transition: transform .15s; }
.validation-flow .issue-date-caret .guide-icon { width: 18px; height: 18px; }
.validation-flow .issue-date-scenario[open] .issue-date-caret { transform: rotate(180deg); }
.validation-flow .issue-date-summary-action { display: block; margin-top: 7px; color: var(--color-warning); font-size: .85rem; font-weight: 600; line-height: 1.5; }
.validation-flow .issue-date-detail { padding: 0 16px 16px; }
.validation-flow .issue-date-detail p { margin: 0; font-size: 1rem; line-height: 1.55; }
.validation-flow .issue-date-detail .issue-date-example { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--soft-yellow); color: var(--color-warning); font-size: .9375rem; }
.validation-flow .issue-date-guidance > .source { margin: 14px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
html[data-theme] .validation-flow .notice { border-radius: 10px; font-size: 1rem; line-height: 1.55; }
html[data-theme] .validation-flow :is(.notice.warning, .validation-issue-blank) { border: 0; background: var(--soft-yellow); color: var(--color-warning); }
.validation-flow .validation-issue-blank { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 18px; }
.validation-flow .validation-issue-blank .guide-icon { color: var(--color-warning); }
.validation-flow .validation-issue-blank p { margin: 0; }
.validation-flow .validation-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; grid-column: 1 / -1; min-width: 0; margin: 0; padding: 20px 24px; border-top: 1px solid var(--line); background: var(--section); }
.validation-flow .validation-result-copy { min-width: 0; flex: 1 1 280px; }
.validation-flow .validation-result-copy .validation-task-title { margin: 0; }
.validation-flow .validation-result-copy .validation-task-number { border: 1px solid var(--line); background: var(--surface); }
.validation-flow .validation-result > .choice-grid { flex: 1 1 370px; max-width: 470px; }
.validation-flow :is(.validation-result-choice, .otp-access-choices .choice, .otp-result-choices .choice) { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
html[data-theme] .validation-flow .validation-result-choice[aria-pressed="true"]:is([data-level1-result="correcta"], [data-value="correcta"]) { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); box-shadow: none; }
html[data-theme] .validation-flow .validation-result-choice[aria-pressed="true"]:is([data-level1-result="incorrecta"], [data-value="incorrecta"]) { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-error); box-shadow: none; }
.validation-flow :is([data-level1-result="correcta"], [data-otp-access="si"], [data-otp-result="correcto"], [data-select="validation"][data-value="correcta"]) { --validation-choice-accent: var(--color-success); --validation-choice-surface: var(--color-success-soft); }
.validation-flow :is([data-level1-result="incorrecta"], [data-otp-access="no"], [data-otp-result="incorrecto"], [data-select="validation"][data-value="incorrecta"]) { --validation-choice-accent: var(--color-error); --validation-choice-surface: var(--color-error-soft); }
html[data-theme] .validation-flow .choice:is([data-level1-result], [data-otp-access], [data-otp-result], [data-select="validation"]) { border-color: var(--validation-choice-accent); background: var(--validation-choice-surface); color: var(--validation-choice-accent); }
html[data-theme] .validation-flow .choice:is([data-level1-result], [data-otp-access], [data-otp-result], [data-select="validation"]):hover:not(:disabled) { background: color-mix(in srgb, var(--validation-choice-accent) 8%, var(--validation-choice-surface)); }
html[data-theme] .validation-flow .choice:is([data-level1-result], [data-otp-access], [data-otp-result], [data-select="validation"])[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--validation-choice-accent); }
html[data-theme] .validation-flow .choice[data-level1-result]:disabled { border-color: var(--control-line); background: var(--section); color: var(--muted); box-shadow: none; }
html[data-theme] .validation-flow .choice[data-level1-result]:disabled > span[aria-hidden] { color: inherit; }
.validation-flow .validation-status { --status-accent: var(--color-text-muted); --status-surface: var(--section); margin: 12px 0 0; padding: 12px 16px; border-radius: 9px; background: var(--status-surface); color: var(--status-accent); font-size: .95rem; line-height: 1.5; }
.validation-flow .validation-status--success { --status-accent: var(--color-success); --status-surface: var(--color-success-soft); }
.validation-flow .validation-status--danger { --status-accent: var(--color-error); --status-surface: var(--color-error-soft); }
.validation-flow .validation-status--warning { --status-accent: var(--color-warning); --status-surface: var(--color-warning-soft); }
.validation-flow .validation-status--info { --status-accent: var(--color-info); --status-surface: var(--color-info-soft); }
.validation-flow .validation-result-copy .validation-status { margin: 5px 0 0 36px; padding: 0; background: transparent; font-size: .85rem; }
.validation-flow .validation-failure { flex: 1 1 100%; min-width: 0; }
.validation-flow .validation-failure .client-speech { margin: 0 0 12px; }
.validation-flow .validation-next-level { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
.validation-flow .validation-next-level strong { color: var(--ink); font-size: .95rem; font-weight: 600; }
.validation-flow .validation-next-level p { margin: 3px 0 0; font-size: .9rem; line-height: 1.5; }
.validation-flow .validation-complete { margin: 0; padding: 16px 20px; border-radius: 10px; background: var(--color-success-soft); color: var(--color-success); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.validation-flow :is(.otp-level-card, .validation-level-three, .validation-result) { scroll-margin-top: 112px; }
.validation-flow .otp-level-card .section-body { display: grid; gap: 16px; }
.validation-flow .otp-key-rules { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding: 12px 18px; border-radius: 10px; background: var(--soft-yellow); color: var(--color-warning); list-style: none; }
.validation-flow .otp-key-rules > li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; line-height: 1.5; }
.validation-flow .otp-key-rules .guide-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--color-warning); }
.validation-flow .otp-action-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.validation-flow .otp-action { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px 16px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.validation-flow .otp-action > * { grid-column: 2; min-width: 0; }
.validation-flow .otp-action-title { position: relative; margin: 3px 0 2px; padding: 0; color: var(--ink); font-size: 1.125rem; font-weight: 650; line-height: 1.4; }
.validation-flow .otp-action-title .guide-icon { display: none; }
.validation-flow .otp-action-number { position: absolute; left: -48px; top: -3px; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--control-line); border-radius: 50%; background: var(--section); color: var(--ink); font-size: 1rem; font-weight: 800; }
.validation-flow .otp-action--current { border: 1.5px solid var(--control-line); }
.validation-flow .otp-action--current .otp-action-number { border-color: var(--brand-yellow); background: var(--brand-yellow); color: #182c38; }
.validation-flow .otp-action--locked { gap: 6px 16px; padding: 16px 20px; border-style: dashed; color: var(--muted); }
.validation-flow .otp-action--locked .otp-action-number { border-style: dashed; background: transparent; color: var(--muted); }
.validation-flow .otp-action--locked .otp-action-title { margin: 0; color: var(--muted); }
.validation-flow .otp-action p { margin: 0; line-height: 1.55; }
.validation-flow .otp-prepare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.validation-flow .otp-prepare-operation { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-right: 24px; }
.validation-flow .otp-prepare-operation + .otp-prepare-operation { padding: 0 0 0 24px; border-left: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.validation-flow .otp-prepare-operation > h4 { margin: 0; color: var(--color-link); font-size: 1rem; font-weight: 650; }
.validation-flow .otp-prepare-operation > p { flex: 1; min-width: 0; margin: 0; }
.validation-flow .otp-prepare-operation > .validation-capture-links { justify-content: flex-start; }
html[data-theme] .validation-flow .otp-prepare-operation .validation-capture-link { min-width: 146px; }
html[data-theme] .validation-flow [data-otp-crop="prepareCallCenterInstruction"] { min-width: 0; padding-inline: 4px; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.validation-flow .otp-access-choices .choice { flex-direction: column; gap: 4px; }
.validation-flow .otp-access-choices .choice small { margin: 0; color: inherit; font-size: .875rem; font-weight: 400; }
.validation-flow :is([data-level1-result="correcta"], [data-select="validation"][data-value="correcta"], [data-otp-result="correcto"]) > span[aria-hidden] { color: var(--color-success); }
.validation-flow :is([data-level1-result="incorrecta"], [data-select="validation"][data-value="incorrecta"], [data-otp-result="incorrecto"]) > span[aria-hidden] { color: var(--color-error); }
.validation-flow .otp-foreign-note { color: var(--muted); font-size: .9rem; }
.validation-flow .otp-result-panel { display: grid; gap: 14px; margin: 0; }
.validation-flow .otp-result-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; border-radius: 9px; background: var(--section); }
.validation-flow .otp-result-meta:has(.validation-status--warning) { background: var(--color-warning-soft); }
.validation-flow .otp-result-meta:has(.validation-status--success) { background: var(--color-success-soft); }
.validation-flow .otp-result-meta .otp-status { flex: 1 1 280px; margin: 0; padding: 0; background: transparent; }
.validation-flow .otp-result-meta .validation-status--pending { color: var(--muted); font-size: .9rem; }
.validation-flow .otp-attempt { flex: 0 0 auto; color: var(--color-warning); font-size: .95rem; font-weight: 700; white-space: nowrap; }
.validation-flow :is(.otp-action, .validation-level-one, .otp-level-card, .validation-level-three, .validation-result, .validation-complete)[tabindex="-1"]:focus { outline: none; }
.validation-flow :is(.otp-action, .validation-level-one, .otp-level-card, .validation-level-three, .validation-result, .validation-complete)[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.validation-flow .otp-result-reference { margin: 0; }
.validation-flow .reference-details { margin: 0; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme] .validation-flow .reference-details > summary { min-height: 44px; padding: 11px 14px; background: transparent; color: var(--color-link); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
.validation-flow .otp-retry-note ul { margin: 0; padding: 14px 18px 16px 36px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.validation-flow .otp-retry-note li + li { margin-top: 7px; }
.validation-flow .otp-crop { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.validation-flow .validation-level-three .section-body { padding: 0; }
.validation-flow .validation-alternative-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.validation-flow :is(.validation-intro, .validation-questions) { min-width: 0; padding: 24px; }
.validation-flow .validation-intro > p { margin: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.validation-flow .validation-questions { border-left: 1px solid var(--line); }
.validation-flow .validation-alternative-grid--foreign { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; }
.validation-flow .validation-alternative-grid--foreign :is(.validation-intro, .validation-questions) { padding: 0; border: 0; }
.validation-flow .validation-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.validation-flow .validation-service-grid--single { grid-template-columns: minmax(0, 1fr); }
.validation-flow .validation-service-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: transparent; overflow: hidden; }
.validation-flow .validation-service-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--section); color: var(--ink); }
.validation-flow .validation-service-head :is(h3, h4) { margin: 0; color: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.validation-flow .validation-question-count { color: var(--muted); font-size: .875rem; font-weight: 500; }
.validation-flow .validation-minimum { display: flex; align-items: center; gap: 16px; margin: 18px; padding: 12px 14px; border-radius: 10px; background: var(--soft-yellow); }
.validation-flow .validation-minimum-badge { display: grid; place-items: center; flex: 0 0 auto; min-width: 88px; padding: 14px 12px; border-radius: 8px; background: var(--brand-yellow); color: #182c38; }
.validation-flow .validation-minimum-badge strong { display: flex; align-items: baseline; gap: 5px; font-size: 1.375rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.validation-flow .validation-minimum-badge strong span { font-size: .875rem; font-weight: 600; }
.validation-flow .validation-minimum-label { display: grid; gap: 4px; min-width: 0; color: var(--color-warning); line-height: 1.4; }
.validation-flow .validation-minimum-label strong { font-size: 1rem; font-weight: 700; }
.validation-flow .validation-minimum-label > span { font-size: .9375rem; }
.validation-flow .validation-question-list { display: grid; gap: 0; margin: 0; padding: 0 18px 18px; list-style: none; }
.validation-flow .validation-question-list li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.validation-flow .validation-question-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.validation-flow .validation-question-list .guide-icon { width: 22px; height: 22px; color: var(--color-link); }
.validation-flow .validation-service-grid--single .validation-service-card { border: 0; overflow: visible; }
.validation-flow .validation-service-grid--single .validation-service-head { display: none; }
.validation-flow .validation-service-grid--single .validation-minimum { margin: 0 0 16px; }
.validation-flow .validation-service-grid--single .validation-question-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 0; }
.validation-flow .validation-service-grid--single .validation-question-list li { align-items: center; padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
html[data-theme] .validation-flow .nav-row { margin: 0; background: transparent; }
@media (max-width: 900px) {
  .validation-flow .validation-person-selector--selected { width: 100%; }
  .validation-flow .validation-person-selector--selected > .choice-grid { position: static; width: 100%; }
  .validation-flow .validation-level-one .section-body, .validation-flow .validation-alternative-grid { grid-template-columns: minmax(0, 1fr); }
  .validation-flow .issue-date-guidance, .validation-flow .validation-questions { border-left: 0; border-top: 1px solid var(--line); }
  .validation-flow .validation-result > .choice-grid { flex-basis: 100%; max-width: none; }
  .validation-flow .validation-service-grid { grid-template-columns: minmax(0, 1fr); }
  .validation-flow ol.validation-level-progress { gap: 12px; }
  .validation-flow .validation-level-link { align-items: flex-start; padding: 12px; gap: 8px; }
  .validation-flow .validation-level-progress strong { font-size: .85rem; }
  .validation-flow .validation-progress-number { width: 26px; height: 26px; }
  .validation-flow .otp-prepare-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .validation-flow .otp-prepare-operation { padding: 0; }
  .validation-flow .otp-prepare-operation + .otp-prepare-operation { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .validation-flow .otp-prepare-operation > .validation-capture-links { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .workspace.validation-workspace { padding: 20px 16px 40px; }
  .process-progress { font-size: .8rem; }
  .process-progress-top, .process-progress-bottom { align-items: flex-start; gap: 4px; }
  .process-progress-top > span:last-child { flex-basis: 100%; }
  .process-progress-track { gap: 4px; }
  html[data-theme] .panel.validation-flow { gap: 20px; }
  .validation-flow .validation-heading { align-items: stretch; gap: 12px; }
  html[data-theme] .validation-heading h1 { font-size: 1.875rem; }
  .validation-heading > div > p { font-size: 1rem; }
  .validation-flow .validation-person-selector--selected { width: 100%; }
  .validation-flow .validation-person-selector--selected > .choice-grid { position: static; width: 100%; padding: 12px; }
  .validation-flow .choice-grid, .validation-flow .validation-service-grid, .validation-flow .validation-service-grid--single .validation-question-list { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .validation-flow .validation-person-card { min-height: 0; gap: 16px; padding: 24px; }
  .validation-flow .validation-person-icon { width: 44px; height: 44px; }
  .validation-flow ol.validation-level-progress { gap: 10px; }
  .validation-flow .validation-level-link { flex-direction: column; gap: 6px; padding: 10px 8px; }
  .validation-flow .validation-level-progress strong { font-size: .8rem; }
  .validation-flow .validation-progress-label { display: none; }
  .validation-flow .validation-progress-compact { display: inline; }
  .validation-flow .validation-level-progress small { font-size: .75rem; }
  .validation-flow .validation-level-summary { gap: 8px; min-height: 56px; padding: 14px 16px; }
  .validation-flow .validation-level-heading > strong { font-size: 1rem; }
  .validation-flow .validation-level-heading > small { font-size: .85rem; }
  .validation-flow .validation-level-review { font-size: .8rem; }
  .validation-flow .validation-level-icon { width: 30px; height: 30px; }
  .validation-flow .validation-level-icon .guide-icon { width: 22px; height: 22px; }
  .validation-flow :is(.validation-level-card, .issue-date-guidance, .validation-intro, .validation-questions, .section-body) { padding: 20px 16px; }
  .validation-flow :is(.validation-level-one, .validation-level-three) .section-body { padding: 0; }
  .validation-flow .validation-result { padding: 18px; gap: 16px; }
  .validation-flow .validation-result-copy { flex-basis: 100%; }
  .validation-flow .validation-result > .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-theme] .validation-flow .validation-result-choice { padding-inline: 10px; font-size: .95rem; }
  .validation-flow .issue-date-scenario > summary { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px; padding: 14px 16px; }
  .validation-flow .issue-date-outcome { grid-column: 1; grid-row: 1; justify-self: start; min-width: 112px; padding: 5px 12px; font-size: .9rem; }
  .validation-flow .issue-date-condition { grid-column: 1 / -1; }
  .validation-flow .issue-date-caret { grid-column: 2; grid-row: 1; }
  .validation-flow .issue-date-condition > strong { font-size: 1rem; }
  .validation-flow .otp-action { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .validation-flow .otp-action > * { grid-column: 1; }
  .validation-flow .otp-action-title { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
  .validation-flow .otp-action-number { position: static; flex: 0 0 32px; }
  .validation-flow .validation-alternative-grid--foreign { padding: 20px 16px; }
  .validation-flow :is(.otp-level-card, .validation-level-three, .validation-result) { scroll-margin-top: 24px; }
}
.deadline-card { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 14px 0; padding: 16px 18px; border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: 11px; background: var(--section); }
.deadline-card>div { display: grid; gap: 4px; }
.deadline-card>div strong { font-size: .95rem; }
.deadline-card>div>span:not(.deadline-kicker) { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.deadline-card>small { max-width: 38%; color: var(--muted); font-size: .69rem; line-height: 1.5; }
.deadline-pending { border-inline-start-color: #d59a00; }
.matter-deadline-section { margin: 18px 0 8px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.matter-deadline-date { display: grid; grid-template-columns: minmax(180px, auto) minmax(220px, 1fr); gap: 7px 12px; align-items: center; }
.matter-deadline-date>label { font-size: .77rem; font-weight: 800; }
.matter-deadline-date .field-widget { min-width: 0; }
.matter-deadline-date .field-widget input { min-height: 40px; }
.matter-deadline-date>small { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.matter-deadline-result { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.matter-deadline-registration { margin: 0 0 5px; color: var(--muted); font-size: .76rem; }
.matter-deadline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.matter-deadline-grid .deadline-card { min-width: 0; margin: 6px 0; padding: 13px; }
.matter-deadline-grid .deadline-card>div strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.matter-deadline-grid .deadline-card>div>span:not(.deadline-kicker) { color: var(--muted); font-size: .7rem; }
.matter-deadline-pending { padding: 12px; border-inline-start: 4px solid #b58b00; border-radius: 8px; background: var(--soft-yellow); }
.matter-deadline-pending .matter-deadline-copy { display: grid; gap: 5px; }
.matter-deadline-pending .matter-deadline-copy>strong { font-size: 1rem; }
.matter-deadline-pending .matter-deadline-copy>span,.matter-deadline-pending .matter-deadline-copy>p { margin: 0; font-size: .75rem; line-height: 1.5; }
.matter-deadline-pending .notice { margin: 8px 0 0; }
.claim-intake-section { margin-bottom: 18px; }
.claim-intake-fields { display: grid; gap: 18px; }
.claim-words-field { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }
.claim-words-field>label, .claim-agent-fields .form-field>label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 800; line-height: 1.45; }
.claim-words-field>label strong { color: var(--danger, #b42318); }
.claim-words-field textarea { display: block; width: 100%; min-height: 116px; border: 1px solid var(--control-line); border-radius: 8px; padding: 11px 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; resize: vertical; }
.claim-words-field em, .claim-agent-fields .form-field em { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; font-style: normal; line-height: 1.5; }
.claim-agent-fields { padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); }
.claim-agent-fields>h4 { margin: 0 0 6px; font-size: .96rem; }
.claim-agent-fields .case-help { margin-bottom: 14px; }
.claim-agent-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.claim-agent-field-grid .form-field:last-child { grid-column: 1 / -1; }
.claim-agent-field-grid input { min-height: 43px; }
.more-information-output .template-preview { max-height: 440px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.more-information-output button:disabled, .saved-claim button:disabled { cursor: not-allowed; opacity: .55; }
.field-rule-error { display: block; margin-top: 4px; color: #a52822; font-size: .69rem; font-weight: 750; line-height: 1.4; }
.field-rule-error:empty { display: none; }
.form-field input[aria-invalid="true"] { border-color: #b42318; }
.email-capture-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto; }
.email-capture-row .email-capture-input { min-width: 0; }
.email-user-wrap { position: relative; min-width: 0; }
.section-box:has(.email-domain-suggestions:not([hidden])) { overflow: visible; }
.email-domain-suggestions { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; display: grid; gap: 2px; width: min(100%, 260px); max-height: 230px; overflow: auto; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 26px rgba(0, 0, 0, .24); }
.email-domain-suggestions[hidden] { display: none; }
.email-domain-suggestions button { width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.email-domain-suggestions button:hover, .email-domain-suggestions button:focus-visible { background: color-mix(in srgb, var(--focus) 16%, var(--surface)); outline: 2px solid var(--focus); outline-offset: -2px; }
.email-domain-select { min-width: 155px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px; background: var(--field); color: var(--ink); font: inherit; font-size: .82rem; }
.email-domain-select:focus { outline: 3px solid color-mix(in srgb, var(--focus) 22%, transparent); border-color: var(--focus); }
.email-domain-select option { background-color: var(--field); color: var(--ink); }
.email-capture-custom-domain { display: block; margin-top: 10px; }
.email-capture-custom-domain[hidden] { display: none; }
.email-capture-custom-domain input { display: block; width: 100%; margin-top: 5px; }
.email-capture-preview { margin-top: 12px; }
.email-capture-preview-label { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 800; }
.email-complete-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.email-complete-address { display: flex; min-width: 0; min-height: 43px; align-items: center; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); font-size: .88rem; }
.email-complete-address[data-empty="true"] { color: var(--muted); font-style: italic; }
.email-constancy-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.email-required-tag { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.email-capture-compact { margin: 0; padding: 0; border: 0; }
.email-capture-row-compact { grid-template-columns: minmax(0, 1fr); }
.email-address-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(155px, 210px); min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.email-address-control:focus-within { border-color: var(--focus); outline: 3px solid color-mix(in srgb, var(--focus) 22%, transparent); }
.email-address-control .email-capture-input { min-height: 43px; border: 0; background: transparent; }
.email-address-control .email-capture-input:focus { border-color: transparent; outline: 0; }
.email-address-control .email-domain-select { min-width: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0 7px 7px 0; background: transparent; }
.email-address-control .email-domain-select:focus { border-color: var(--line); outline: 0; }
.email-capture-preview-compact { margin-top: 9px; }
.email-complete-row-compact { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.email-complete-row-compact .email-complete-address { min-height: 0; padding: 0; border: 0; background: transparent; font-size: .86rem; font-weight: 700; line-height: 1.4; }
.email-complete-row-compact .email-complete-address[data-empty="true"] { font-weight: 500; }
.email-complete-row-compact .email-copy-button, .email-complete-row-compact .email-verifier-button { min-height: 34px; padding: 5px 10px; font-size: .78rem; }
.email-capture-compact .email-capture-help { margin-top: 5px; }
.saved-claim-copy-block { margin-top: 12px; }
.saved-claim-copy-block>strong { display: block; margin-bottom: 5px; font-size: .75rem; }

@media (max-width: 760px) {
  .claim-agent-field-grid { grid-template-columns: 1fr; }
  .claim-agent-field-grid .form-field:last-child { grid-column: auto; }
  .deadline-card { align-items: flex-start; flex-direction: column; }
  .deadline-card>small { max-width: none; }
  .claim-agent-fields { padding: 14px; }
  .matter-deadline-date { grid-template-columns: 1fr; }
  .matter-deadline-date>small { grid-column: auto; }
  .matter-deadline-grid { grid-template-columns: 1fr; }
  .email-capture-row { grid-template-columns: 1fr; }
  .email-complete-row { grid-template-columns: 1fr; }
  .email-complete-row-compact { display: flex; }
}

@media (max-width: 480px) {
  .email-address-control { grid-template-columns: minmax(0, 1fr); }
  .email-address-control .email-domain-select { border-top: 1px solid var(--line); border-left: 0; border-radius: 0 0 7px 7px; }
}

/* Inicio */
body { color: var(--color-text); font-family: var(--font-family-ui); line-height: 1.55; }
.topbar { min-height: 68px; border-bottom: 1px solid var(--color-border-subtle); box-shadow: none; }
.topbar::before { width: 6px; height: 100%; background: var(--color-brand-accent); }
.top-actions button { border-radius: var(--radius-control); }
.home-shell { display: block; max-width: 1024px; padding: 39px 30px 30px; }
.home-hero { display: block; min-height: 0; padding: 0 0 18px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.home-hero .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-text-muted); font-size: .75rem; letter-spacing: .04em; }
.eyebrow-dot { width: 7px; height: 7px; border: 0; border-radius: 0; background: var(--color-brand-accent); }
.home-hero h1 { max-width: none; margin: 10px 0 6px; color: var(--color-text); font-size: clamp(2rem, 3.8vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.18; }
.home-hero h1 span::after { display: none; }
.home-hero .lead { max-width: 68ch; margin: 0; color: var(--color-text-muted); font-size: 1rem; line-height: 1.55; }
.home-art { display: none; }
.home-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 24px; }
.home-section-heading h2 { margin: 0; font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
.home-section-heading > span { color: var(--color-text-muted); font-size: .9rem; }
.home-shell > .mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 18px 0 0; }
html[data-theme] .home-shell .mode-card { display: flex; flex-direction: column; align-items: stretch; min-height: 388px; padding: 32px; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: var(--color-surface); box-shadow: none; color: var(--color-text); text-align: left; overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
html[data-theme] .home-shell .mode-card.primary-card { border-color: var(--color-border-subtle); background: var(--color-surface); color: var(--color-text); }
html[data-theme] .home-shell .mode-card:not(.primary-card)::after { content: none; }
html[data-theme] .home-shell .mode-card:hover { transform: translateY(-2px); border-color: var(--color-action); box-shadow: 0 8px 20px rgb(0 75 120 / 12%); }
.home-shell .mode-card:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mode-card .mode-heading { display: grid; justify-items: start; gap: 22px; width: 100%; }
.mode-card .mode-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--color-brand-accent); color: #18364a; }
.mode-card .mode-icon .guide-icon { width: 27px; height: 27px; }
.mode-card .mode-kind { color: var(--color-text-muted); font-size: .82rem; font-weight: 700; letter-spacing: .03em; }
.mode-card h2 { margin: 7px 0 8px; color: var(--color-text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.mode-card p { max-width: 52ch; margin: 0 0 14px; color: var(--color-text-muted); font-size: 1rem; line-height: 1.55; opacity: 1; }
.process-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.process-badges > span { padding: 5px 12px; border: 1px solid var(--color-border-subtle); border-radius: 999px; background: transparent; color: var(--color-text); font-size: .82rem; font-weight: 600; }
.mode-card .arrow { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 52px; margin-top: auto; padding: 12px 16px; border-radius: 7px; background: var(--color-action); color: var(--color-on-action); font-size: 1rem; font-weight: 650; white-space: normal; }
html[data-theme] .home-shell .mode-card:hover .arrow { background: var(--color-action-hover); }
.quick-strip { margin-top: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.quick-strip .home-section-heading { margin: 0 0 18px; }
.quick-strip .home-section-heading h2 { font-size: 1.2rem; font-weight: 650; }
.quick-strip .home-section-heading > span { font-size: .88rem; }
.quick-strip .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html[data-theme] .quick-strip .chip { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px; min-height: 78px; padding: 10px 18px; border: 1px solid var(--color-border-subtle); border-radius: 11px; background: var(--color-surface); color: var(--color-text); font-size: .98rem; font-weight: 600; line-height: 1.3; text-align: left; transition: background-color .16s ease, border-color .16s ease; }
.quick-strip .chip .guide-icon { display: block; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 9px; background: var(--color-surface-subtle); color: var(--color-action); }
html[data-theme="dark"] .quick-strip .chip .guide-icon { color: var(--color-link); }
.quick-strip .chip::after { content: "→"; margin-left: auto; color: var(--color-text-muted); font-size: 1rem; font-weight: 400; }
html[data-theme] .quick-strip .chip:hover { border-color: var(--color-action); background: var(--color-surface-subtle); }
.quick-strip .chip:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.home-notes { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--color-border-subtle); }
.home-notes .privacy-note { display: flex; align-items: center; gap: 9px; max-width: 640px; margin: 0; color: var(--color-text-muted); font-size: .76rem; line-height: 1.5; }
.home-notes .privacy-note:last-child { max-width: 300px; }
.home-notes .guide-icon { flex: 0 0 21px; width: 21px; height: 21px; color: var(--color-action); }
.workspace, .sar-workspace {
  display: block; max-width: 1480px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 40px) 48px;
}
.side, html[data-theme] .side {
  position: static; max-height: none; overflow: visible; margin: 0 0 18px; padding: 0 0 12px;
  border: 0; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0;
  background: transparent; box-shadow: none; top: auto;
}
.side-title { margin: 0 0 8px; padding: 0; border: 0; color: var(--color-text-muted); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.workspace:not(.sar-workspace) .step-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; padding: 0; align-items: stretch; }
.workspace:not(.sar-workspace) .step-list li { display: flex; flex: 0 0 calc((100% - 64px) / 9); max-width: 132px; min-width: 0; }
.workspace:not(.sar-workspace) .step-list button {
  display: flex; flex: 1 1 auto; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; width: 100%; min-width: 0;
  min-height: 54px; padding: 9px 8px; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: transparent; color: var(--color-text-muted); font-size: .81rem; font-weight: 500; line-height: 1.35;
  text-align: left; white-space: normal; overflow-wrap: break-word;
}
.workspace:not(.sar-workspace) .step-list button:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.workspace:not(.sar-workspace) .step-list button.current { border-bottom-color: var(--color-action); border-radius: 0; background: transparent; box-shadow: none; color: var(--color-text); font-weight: 700; }
.workspace:not(.sar-workspace) .step-list button.done { color: var(--color-link); }
.content { min-width: 0; }
.progress-row { margin: 0 0 6px; color: var(--color-text-muted); font-size: .82rem; }
.progress { height: 3px; margin: 0 0 16px; border-radius: 0; background: var(--color-border-subtle); }
.progress i { border-radius: 0; background: var(--color-action); }
.panel, html[data-theme] .panel {
  min-width: 0; padding: 24px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.panel > .eyebrow { margin: 0 0 8px; color: var(--color-link); font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: none; }
.panel h1 { max-width: 28ch; margin: 0 0 10px; padding-left: 14px; border-left: 4px solid var(--color-brand-accent); color: var(--color-text); font-size: clamp(1.55rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.22; }
.panel > .lead { max-width: 76ch; color: var(--color-text-muted); font-size: 1rem; line-height: 1.55; }
.sar-step-body { margin-top: 28px; }
.nav-row { position: static; margin-top: 28px; padding: 16px 0 0; border-top: 1px solid var(--color-border-subtle); background: transparent; }
.primary, .secondary { min-height: 44px; padding: 9px 14px; border-radius: var(--radius-control); font-size: .92rem; font-weight: 600; }
.primary { border-color: var(--color-action); background: var(--color-action); color: var(--color-on-action); }
.primary:hover:not(:disabled) { border-color: var(--color-action-hover); background: var(--color-action-hover); }
.secondary { border-color: var(--color-border-control); background: var(--color-surface); color: var(--color-text); }
.secondary:hover:not(:disabled) { border-color: var(--color-action); background: var(--color-surface-subtle); }
.section-box, .sar-detail, .sar-evidence-section, .sar-cc-register, html[data-theme] .section-box, html[data-theme] .sar-detail, html[data-theme] .sar-evidence-section, html[data-theme] .sar-cc-register { box-shadow: none; }
.section-box { border-radius: var(--radius-group); }
.section-label, html[data-theme] .section-label { border-left: 3px solid var(--color-brand-accent); background: var(--color-surface-subtle); color: var(--color-text); font-size: .9rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.speech, html[data-theme] .speech { border-left-color: var(--color-action); border-radius: 0 var(--radius-group) var(--radius-group) 0; background: var(--color-info-soft); font-family: var(--font-family-code); font-size: .92rem; line-height: 1.65; letter-spacing: 0; }
.client-speech { margin: 16px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--section); }
.client-speech-heading { display: flex; align-items: center; gap: 12px; }
.client-speech-icon { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding-top: 5px; border-radius: 9px; background: var(--brand-yellow); color: #182c38; font: 800 2rem/1 Georgia, "Times New Roman", serif; }
.client-speech-label { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.45; }
.client-speech-context { color: var(--muted); font-weight: 500; }
html[data-theme] .client-speech .speech { margin: 10px 0 0 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--font-family-speech); font-size: 1.08rem; font-style: italic; font-variant-numeric: lining-nums tabular-nums; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-align: justify; text-justify: inter-word; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere; }
.client-speech-mark { color: var(--teal-dark); font-size: 1.14em; font-style: normal; }
@media (max-width: 700px) {
  .client-speech { padding: 14px; }
  html[data-theme] .client-speech .speech { margin-left: 42px; font-size: 1rem; }
}
.notice { border-radius: var(--radius-group); border-left-width: 3px; line-height: 1.55; }
.notice.info { border-left-color: var(--color-info); background: var(--color-info-soft); }
.notice.danger { color: var(--color-error); background: var(--color-error-soft); }
.sar-field, .form-field { color: var(--color-text); font-size: .92rem; font-weight: 600; }
.sar-field input, .sar-field select, .sar-field textarea, .form-field input, .form-field select, .form-field textarea, html[data-theme] :is(input, select, textarea) { border-radius: var(--radius-control); }
.sar-field input:focus, .sar-field select:focus, .sar-field textarea:focus, .form-field input:focus, .form-field select:focus, .form-field textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 32%, transparent); outline-offset: 2px; border-color: var(--color-focus); }
.sar-help, .form-field em { color: var(--color-text-muted); font-size: .86rem; line-height: 1.55; }
.sar-fields { gap: 16px 20px; }
.sar-offer-shared { border-radius: var(--radius-group); box-shadow: none; background: var(--color-surface-subtle); }
.site-footer { background: var(--color-surface); font-size: .78rem; }

@media (max-width: 1400px) {
  .workspace:not(.sar-workspace) .step-list li { flex-basis: calc((100% - 32px) / 5); max-width: clamp(180px, 15.5vw, 214px); }
}
@media (max-width: 980px) {
  .workspace:not(.sar-workspace) .step-list li { flex-basis: calc((100% - 16px) / 3); max-width: none; }
}
@media (max-width: 920px) {
  .home-shell { grid-template-columns: 1fr; }
  .home-shell > .home-section-heading { grid-column: 1; grid-row: 2; }
  .home-shell > .mode-grid { grid-column: 1; grid-row: 3; }
  .home-shell > .quick-strip { grid-column: 1; grid-row: 4; margin-top: 18px; }
  .home-shell > .home-notes { grid-column: 1; grid-row: 5; }
  .quick-strip .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
@media (max-width: 600px) {
  .home-shell { padding: 20px 16px 32px; }
  .home-hero { grid-template-columns: 1fr; gap: 12px; padding: 4px 0 18px; }
  .home-hero h1 { font-size: 1.65rem; }
  .home-art { justify-self: stretch; }
  .home-art .art-bubble-front { width: 100%; }
  .home-shell .mode-card { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
  .mode-card .mode-number { grid-column: 1; grid-row: 1 / 4; font-size: 1.3rem; }
  .mode-card .mode-kind, .mode-card h2, .mode-card p { grid-column: 2; }
  .mode-card .arrow { grid-column: 2; grid-row: 4; justify-self: start; margin: 6px 0 0; }
  .quick-strip .chips { grid-template-columns: 1fr; }
  .workspace, .sar-workspace { padding: 16px 16px 32px; }
  .workspace:not(.sar-workspace) .step-list { gap: 2px 8px; }
  .workspace:not(.sar-workspace) .step-list li { flex-basis: calc((100% - 8px) / 2); }
  .workspace:not(.sar-workspace) .step-list button { min-height: 48px; padding: 8px 6px; font-size: .82rem; }
  .panel, html[data-theme] .panel { padding: 18px 0; }
  .panel h1 { font-size: 1.5rem; }
  .nav-row { padding-bottom: 8px; }
}
@media (max-width: 360px) {
  .workspace:not(.sar-workspace) .step-list li { flex-basis: 100%; }
}

html[data-theme="light"] :is(
  .brand small, .home-hero .lead, .home-section-heading > span, .mode-card p,
  .home-notes .privacy-note, .site-footer
) { font-weight: 500; }
html[data-theme="light"] .mode-card .mode-kind { font-weight: 700; }