:root {
  color-scheme: light;
  --ink: #172230;
  --muted: #5d6a78;
  --line: #d8e0e7;
  --surface: #ffffff;
  --surface-soft: #f5f7f9;
  --navy: #123047;
  --navy-dark: #0b2234;
  --blue: #176ca4;
  --blue-soft: #e7f3fb;
  --green: #157348;
  --green-soft: #e7f6ee;
  --amber: #8a5700;
  --amber-soft: #fff4d9;
  --red: #a63838;
  --red-soft: #fcecec;
  --shadow: 0 8px 28px rgba(20, 43, 61, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #eef2f5; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary, [tabindex] { outline-offset: 3px; }
:focus-visible { outline: 3px solid #f4a62a; }
button:disabled { cursor: wait; opacity: .58; }
a { color: var(--blue); font-weight: 700; }
h1, h2, h3, p, dl { margin-top: 0; }
h1 { margin-bottom: .3rem; font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.1; letter-spacing: -.03em; }
h2 { margin-bottom: .55rem; font-size: 1.12rem; line-height: 1.2; }
h3 { margin-bottom: .75rem; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
kbd { display: inline-block; min-width: 1.55rem; padding: .1rem .35rem; border: 1px solid currentColor; border-radius: 5px; font-size: .72em; text-align: center; opacity: .78; }
.hidden { display: none !important; }

.app-header { position: sticky; z-index: 100; top: 0; color: #fff; background: var(--navy-dark); box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.header-inner { display: flex; width: 100%; min-width: 0; min-height: 58px; padding: 6px clamp(12px, 1.5vw, 24px); align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; min-width: 0; color: #fff; text-decoration: none; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 38px; height: 38px; border-radius: 10px; color: var(--navy-dark); background: #7dd3b4; font-weight: 900; place-items: center; }
.brand span:last-child { display: grid; line-height: 1.15; }
.brand small, .session-tools small { color: #b8cad6; font-size: .72rem; font-weight: 500; }
.session-tools { display: flex; min-width: 0; align-items: center; gap: clamp(12px, 3vw, 30px); }
.session-tools > span { display: grid; line-height: 1.15; }

.app-shell { width: 100%; max-width: none; margin: 0; padding: clamp(10px, 1.25vw, 20px); }
.card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.eyebrow { margin-bottom: .4rem; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.lead { max-width: 68ch; color: var(--muted); font-size: 1.05rem; }

.login-layout { display: grid; max-width: 1120px; margin: clamp(24px, 8vh, 90px) auto; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
.login-card, .credentials-card { padding: clamp(24px, 4vw, 48px); }
.credentials-card { color: #fff; border-color: #214a65; background: var(--navy); }
.credentials-card .eyebrow { color: #7dd3b4; }
.credentials-card p { color: #c9d7e0; }
.table-responsive { max-width: 100%; overflow-x: auto; }
.credentials-table { width: 100%; border-collapse: collapse; }
.credentials-table th, .credentials-table td { padding: 13px 10px; border-bottom: 1px solid rgba(255,255,255,.18); text-align: left; white-space: nowrap; }
.credentials-table th { color: #a9c5d6; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.credentials-table code { padding: 4px 8px; border-radius: 5px; color: #0b3125; background: #a7e3cd; font-size: 1rem; font-weight: 850; }

.form-stack { display: grid; margin-top: 28px; gap: 18px; }
label { display: grid; min-width: 0; gap: 6px; color: #354454; font-size: .84rem; font-weight: 750; }
input, select, textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #b9c5cf; border-radius: 8px; color: var(--ink); background: #fff; }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #7f94a4; }
.button { display: inline-flex; min-height: 40px; padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; align-items: center; justify-content: center; gap: 7px; color: #fff; background: var(--navy); font-weight: 780; line-height: 1.15; cursor: pointer; }
.button:hover:not(:disabled) { filter: brightness(.94); }
.button-primary { border-color: #0d5d8f; background: var(--blue); }
.button-quiet { border-color: #b8c5cf; color: var(--ink); background: #fff; }
.app-header .button-quiet { border-color: #557083; color: #fff; background: transparent; }
.button-large { min-height: 50px; font-size: 1rem; }

.modal { position: fixed; z-index: 160; inset: 0; display: grid; padding: clamp(10px, 3vw, 28px); background: rgba(11, 24, 34, .52); place-items: center; }
.modal-card { width: min(760px, 100%); max-height: min(92vh, 860px); padding: 14px; overflow: auto; }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.modal-header h2 { margin-bottom: .15rem; }
.import-confirm { display: flex; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 700; }
.import-confirm input { width: auto; }

.utility-bar { position: sticky; z-index: 80; top: 66px; display: grid; margin-bottom: 10px; padding: 10px 12px; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: end; gap: 12px; }
.progress-copy { min-width: 0; }
.progress-copy > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.progress-copy strong { overflow-wrap: anywhere; }
.progress-copy span { color: var(--muted); font-weight: 800; }
.progress-track { height: 7px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #dbe3e9; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .3s ease; }
.navigation { display: flex; flex-wrap: wrap; gap: 7px; }
.case-search { min-width: 148px; }
.case-search label { margin-bottom: 4px; font-size: .7rem; }
.case-search > div { display: flex; }
.case-search input { border-radius: 8px 0 0 8px; }
.case-search button { border-radius: 0 8px 8px 0; }

.case-heading { display: flex; min-width: 0; margin-bottom: 10px; padding: 12px 16px; align-items: center; justify-content: space-between; gap: 16px; border-left: 5px solid var(--blue); }
.case-heading .eyebrow { margin-bottom: .2rem; }
.case-heading-copy { min-width: 0; }
.case-heading h1 { overflow-wrap: anywhere; }
.case-identity { margin: 0; color: var(--muted); font-weight: 680; overflow-wrap: anywhere; }
.status-badge { flex: none; padding: 8px 13px; border: 1px solid; border-radius: 999px; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.status-pending { border-color: #e3ad3c; color: var(--amber); background: var(--amber-soft); }
.status-reviewed { border-color: #69b18e; color: var(--green); background: var(--green-soft); }

.previous-card { display: grid; margin-bottom: 10px; padding: 14px; grid-template-columns: minmax(180px, .4fr) minmax(0, 1.6fr); align-items: start; gap: 12px; border-color: #e0ae4d; background: #fffbef; }
.previous-card .field-list { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.warning-copy { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-left: 4px solid #d3971f; color: #654300; background: var(--amber-soft); font-weight: 700; }

.case-grid { display: grid; margin-bottom: 10px; grid-template-columns: minmax(420px, 1.35fr) minmax(430px, 1fr) minmax(380px, .9fr); gap: 10px; }
.case-grid > .card { padding: 14px; }
.model-card { border-top: 5px solid #7b61a8; background: linear-gradient(150deg, #fff 50%, #f5f1fb); }
.compare-card { border-top: 5px solid #8296a6; }
.card-heading { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 12px; }
.confidence-pill { flex: none; max-width: 150px; padding: 5px 9px; border-radius: 999px; color: #553c7d; background: #ebe2f7; font-size: .76rem; font-weight: 850; overflow-wrap: anywhere; }
.field-list { display: grid; min-width: 0; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.field-list > div { min-width: 0; padding: 7px 8px; border: 1px solid #d4dde5; border-radius: 7px; background: #f7f9fa; }
.field-list dt { color: #263849; font-size: .7rem; font-weight: 900; letter-spacing: .025em; line-height: 1.15; text-transform: uppercase; }
.field-list dd { margin: 3px 0 0; color: #111b25; font-size: .88rem; font-weight: 720; line-height: 1.25; overflow-wrap: anywhere; }
.field-list .field-important { grid-column: span 2; border-color: #8fb6ce; background: #eaf4fa; }
.field-list .field-important dt { color: #0d4e76; }
.field-list .field-important dd { font-size: .96rem; font-weight: 820; }
.field-list .field-wide { grid-column: 1 / -1; }
#model-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#aquacis-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#system-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#system-fields .field-wide { grid-column: 1 / -1; }
.reason-box { margin-top: 7px; padding: 8px 9px; border: 1px solid #d7cbe9; border-radius: 7px; background: rgba(255,255,255,.78); }
.reason-box strong { color: #3f2b60; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.reason-box p { margin: 5px 0 0; color: #465464; overflow-wrap: anywhere; white-space: pre-wrap; }

.candidates-card { margin-bottom: 10px; overflow: hidden; }
.candidates-toolbar { display: flex; min-width: 0; padding: 10px 14px; align-items: end; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.candidates-toolbar h2 { margin-bottom: .25rem; }
.selection-copy { margin: 0; color: var(--muted); font-size: .88rem; font-weight: 650; }
.candidate-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.candidate-controls span { padding: 5px 9px; border-radius: 999px; color: #314555; background: #edf2f5; font-size: .8rem; font-weight: 850; }
.candidate-rank-picker { display: flex; align-items: center; gap: 8px; color: #263849; font-size: .78rem; font-weight: 900; }
.candidate-rank-picker input { width: 94px; padding: 7px 9px; font-size: 1rem; font-weight: 850; }
.candidates-scroll { position: relative; width: 100%; height: clamp(460px, 54vh, 560px); overflow-x: auto; overflow-y: scroll; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.candidates-table { width: max(100%, 1460px); border-spacing: 0; border-collapse: separate; table-layout: auto; font-size: .82rem; }
.candidates-table th, .candidates-table td { min-width: 0; max-width: 300px; padding: 8px 9px; border-right: 1px solid #e4e9ed; border-bottom: 1px solid #dfe5ea; background: #fff; text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.candidates-table th { position: sticky; z-index: 5; top: 0; color: #fff; background: var(--navy); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.candidates-table th:first-child, .candidates-table td:first-child { position: sticky; z-index: 4; left: 0; width: 66px; min-width: 66px; text-align: center; }
.candidates-table th:first-child { z-index: 7; background: var(--navy-dark); }
.candidates-table tbody tr:nth-child(even) td { background: #f6f8fa; }
.candidates-table tbody tr:nth-child(even) td:first-child { background: #edf2f5; }
.candidates-table tbody tr:hover td { background: #e9f4fa; cursor: pointer; }
.candidates-table tbody tr:hover td:first-child { background: #dbeef8; }
.candidates-table tbody tr.model-candidate td { box-shadow: inset 0 2px #8162ae, inset 0 -2px #8162ae; }
.candidates-table tbody tr.model-candidate td:first-child::after { display: block; content: "Modelo"; color: #614586; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.candidates-table tbody tr.candidate-selected td { color: #0d482f; background: #dff4e9; box-shadow: inset 0 2px #24835a, inset 0 -2px #24835a; }
.candidates-table tbody tr.candidate-selected td:first-child { background: #ccebdc; }
.rank-cell { font-size: 1rem; font-weight: 900; }
.reference-cell { width: 230px; min-width: 190px; }
.reference-cell strong, .reference-cell small { display: block; max-width: 230px; overflow-wrap: anywhere; }
.reference-cell small { margin-top: 3px; color: var(--muted); }
.address-cell { width: 280px; min-width: 220px; }

.digest-card { margin-bottom: 10px; overflow: hidden; }
.digest-card summary { padding: 11px 14px; cursor: pointer; list-style-position: inside; }
.digest-card summary span { display: inline-grid; margin-left: 7px; }
.digest-card summary small { color: var(--muted); font-weight: 500; }
.digest-content { max-height: 340px; margin: 0; padding: 18px 20px; overflow: auto; border-top: 1px solid var(--line); color: #dbe9f2; background: #132735; font: .8rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; word-break: break-word; }

.decision-card { margin-bottom: 10px; padding: 14px; }
.decision-intro p:last-child { color: var(--muted); }
.always-notes-field { display: grid; margin: 8px 0 10px; padding: 9px 11px; border: 1px solid #b8c9d5; border-radius: 9px; background: #f4f8fa; grid-template-columns: auto minmax(220px, .7fr) minmax(360px, 2fr); align-items: center; gap: 10px; }
.always-notes-field strong { color: #18364b; font-size: .85rem; }
.always-notes-field span { color: var(--muted); font-size: .76rem; font-weight: 550; }
.always-notes-field textarea { min-height: 52px; max-height: 120px; padding: 8px 10px; }
.decision-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.decision-button { display: grid; min-width: 0; min-height: 88px; padding: 10px 12px; border: 2px solid; border-radius: 9px; align-content: start; gap: 5px; text-align: left; cursor: pointer; }
.decision-button strong { font-size: .94rem; line-height: 1.25; overflow-wrap: anywhere; }
.decision-button span { font-size: .78rem; line-height: 1.35; }
.decision-positive { border-color: #5aa482; color: #0b5737; background: var(--green-soft); }
.decision-choice { border-color: #62a1c9; color: #124f76; background: var(--blue-soft); }
.decision-negative { border-color: #d48989; color: #862828; background: var(--red-soft); }
.decision-neutral { border-color: #d4a74c; color: #714900; background: var(--amber-soft); }
.decision-button:hover:not(:disabled) { box-shadow: inset 0 0 0 2px currentColor; transform: translateY(-1px); }
.context-panel { display: grid; margin-top: 12px; padding: 14px; border: 1px solid #9bb9cd; border-radius: 10px; background: #f3f8fb; gap: 12px; }
.context-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.context-section > .eyebrow, .context-section > h3, .context-heading { grid-column: 1 / -1; }
.context-heading p:last-child { margin: 0; color: var(--muted); font-size: .86rem; }
.reason-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.notes-field { grid-column: 1 / -1; }
.context-actions { display: flex; justify-content: flex-end; gap: 8px; }

.review-footer { display: flex; padding: 7px 3px 30px; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .82rem; }
.review-footer span:last-child { display: flex; flex-wrap: wrap; gap: 18px; }
.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; max-width: min(440px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 9px; color: #fff; background: #174e39; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-weight: 700; overflow-wrap: anywhere; }
.toast-error { background: #8e2e2e; }
.is-loading { cursor: progress; }

@media (max-width: 1100px) {
  .utility-bar { grid-template-columns: 1fr auto; }
  .case-search { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(180px, 1fr); align-items: center; gap: 10px; }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-card { grid-column: 1 / -1; }
  .decision-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .header-inner { min-height: 58px; }
  .brand small, .session-tools small { display: none; }
  .session-tools { gap: 8px; }
  .session-tools > span { display: none; }
  .app-shell { padding: 12px; }
  .login-layout, .case-grid { grid-template-columns: minmax(0, 1fr); }
  .login-layout { margin-top: 20px; }
  .login-card, .credentials-card { padding: 24px 18px; }
  .utility-bar { position: static; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navigation #btn-next-pending { grid-column: 1 / -1; }
  .case-search { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .case-heading { align-items: flex-start; }
  .previous-card { grid-template-columns: minmax(0, 1fr); }
  .previous-card .field-list, .field-list, #model-fields, #aquacis-fields, #system-fields { grid-template-columns: minmax(0, 1fr); }
  .field-list .field-important, .field-list .field-wide { grid-column: 1 / -1; }
  .candidates-toolbar { align-items: stretch; flex-direction: column; }
  .candidate-controls { justify-content: flex-start; }
  .candidate-controls span { width: 100%; }
  .candidates-scroll { height: 440px; }
  .decision-buttons { grid-template-columns: minmax(0, 1fr); }
  .always-notes-field { grid-template-columns: minmax(0, 1fr); }
  .decision-button { min-height: 86px; }
  .context-section, .reason-fields { grid-template-columns: minmax(0, 1fr); }
  .review-footer { flex-direction: column; }
  .toast { right: 16px; bottom: 16px; left: 16px; }
  .modal-card { padding: 12px; }
  .modal-header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}