:root {
  --ink: #1d1d1b;
  --muted: #6f6b62;
  --navy: #252522;
  --teal: #c99a1b;
  --teal-dark: #8a6710;
  --teal-soft: #f8f0d9;
  --gold: #d6a817;
  --gold-soft: #fff8e7;
  --line: #e2ded3;
  --surface: #ffffff;
  --canvas: #f7f5ef;
  --danger: #b34141;
  --shadow: 0 22px 58px rgba(31, 28, 20, 0.13);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 13px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(214, 168, 23, 0.10), transparent 28rem),
    linear-gradient(180deg, #fbfaf7 0%, var(--canvas) 100%);
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  min-height: 88px;
  padding: 14px clamp(20px, 4vw, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.brand img { width: 190px; max-height: 58px; object-fit: contain; object-position: left center; }

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a9d72;
  box-shadow: 0 0 0 5px rgba(74,157,114,.12);
}
.status-dot[data-state="loading"] { background: #c59b27; box-shadow: 0 0 0 5px rgba(197,155,39,.14); }
.status-dot[data-state="ready"] { background: #4a9d72; box-shadow: 0 0 0 5px rgba(74,157,114,.12); }
.status-dot[data-state="delayed"] { background: #c59b27; box-shadow: 0 0 0 5px rgba(197,155,39,.14); }
.status-dot[data-state="error"] { background: #b94b45; box-shadow: 0 0 0 5px rgba(185,75,69,.12); }
.status-dot[data-state="blocked"] { background: #b94b45; box-shadow: 0 0 0 5px rgba(185,75,69,.12); }

.main-content {
  display: grid;
  align-items: center;
  padding: clamp(28px, 5vw, 70px) clamp(20px, 5vw, 70px);
}

.welcome-panel {
  width: min(980px, 100%);
  margin: 0 auto;
}

.welcome-copy { max-width: 700px; margin-bottom: 34px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 13px; font-size: clamp(2.1rem, 5vw, 4.1rem); line-height: 1.04; letter-spacing: -0.045em; }
h2 { margin-bottom: 8px; font-size: 1.7rem; letter-spacing: -0.025em; }
.lead { margin-bottom: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5; }

.action-grid { display: grid; gap: 18px; }

.action-card {
  width: 100%;
  min-height: 126px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(31,85,107,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.action-card:hover, .action-card:focus-visible { transform: translateY(-2px); border-color: #a8c5cc; box-shadow: var(--shadow); outline: none; }
.action-card:active { transform: scale(.995); }
.action-card--primary { background: linear-gradient(135deg, #20201e 0%, #34332e 100%); color: white; border-color: rgba(214,168,23,.65); }

.action-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  font-size: 2rem;
  font-weight: 300;
}

.action-card:not(.action-card--primary) .action-icon { background: var(--teal-soft); color: var(--teal-dark); }
.action-card--primary .action-icon { background: linear-gradient(145deg, rgba(214,168,23,.35), rgba(214,168,23,.15)); color: #f6df8a; }
.action-icon--lock { font-size: 2.35rem; transform: rotate(90deg); }
.action-text { display: grid; gap: 7px; }
.action-text strong { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.action-text small { color: inherit; opacity: .76; font-size: .98rem; line-height: 1.4; }
.action-arrow { font-size: 1.65rem; opacity: .76; }
.privacy-note { margin: 24px 4px 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }

.footerbar {
  min-height: 52px;
  padding: 14px clamp(20px, 4vw, 54px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: .8rem;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.75);
}

.synchronization-monitor { margin: 0 0 18px; padding: 15px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid #bddacb; border-radius: 15px; background: #edf8f2; color: #286749; }
.synchronization-monitor .status-dot { flex: 0 0 auto; margin: 0; }
.synchronization-monitor div { display: grid; gap: 3px; }
.synchronization-monitor strong { font-size: 1rem; }
.synchronization-monitor small { color: inherit; opacity: .82; font-size: .83rem; }
.synchronization-monitor--delayed { border-color: #ead18b; background: #fff7df; color: #725711; }
.synchronization-monitor--delayed .status-dot { background: #c59b27; box-shadow: 0 0 0 5px rgba(197,155,39,.14); }
.synchronization-monitor--stopped { border-color: #e3aaa6; background: #fff0ef; color: #8e302b; }
.synchronization-monitor--stopped .status-dot { background: #b94b45; box-shadow: 0 0 0 5px rgba(185,75,69,.12); }

.pin-dialog { border: 0; padding: 0; border-radius: 26px; box-shadow: 0 28px 80px rgba(8,35,49,.28); }
.pin-dialog::backdrop { background: rgba(16,42,54,.55); backdrop-filter: blur(5px); }
.pin-card { position: relative; width: min(430px, calc(100vw - 32px)); padding: 36px; background: white; }
.dialog-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.pin-symbol { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 16px; background: var(--teal-soft); color: var(--teal-dark); font-size: 2rem; transform: rotate(90deg); }
.pin-card > p:not(.eyebrow):not(.field-error) { color: var(--muted); line-height: 1.5; }
.field-label { display: block; margin: 23px 0 8px; font-weight: 750; }
.pin-input { width: 100%; height: 58px; border: 1px solid #bfcdd2; border-radius: 13px; padding: 0 16px; font-size: 1.45rem; letter-spacing: .45em; text-align: center; outline: none; }
.pin-input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(201,154,27,.15); }
.field-error { min-height: 22px; margin: 8px 0 6px; color: var(--danger); font-size: .9rem; }
.button { min-height: 54px; border-radius: 13px; border: 1px solid transparent; padding: 0 22px; font-weight: 760; cursor: pointer; }
.button--primary { background: #242421; color: #fff; border-color: #242421; }
.button--primary:hover { background: #0e0e0d; }
.button--gold { background: var(--gold); color: #17150f; border-color: var(--gold); }
.button--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.button--danger { background: #fff; color: var(--danger); border-color: #e8bcbc; }
.button--full { width: 100%; }

.placeholder-page { width: min(900px, 100%); margin: 0 auto; padding: 34px; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.placeholder-page p { color: var(--muted); line-height: 1.55; }

/* Form experience */
.form-page { width: min(1080px, 100%); margin: 0 auto; }
.form-header { margin-bottom: 24px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.form-header h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 7px; }
.form-header p { color: var(--muted); margin-bottom: 0; line-height: 1.5; }
.form-kicker { color: var(--teal-dark); font-weight: 850; letter-spacing: .11em; text-transform: uppercase; font-size: .76rem; }
.step-counter { flex: 0 0 auto; color: var(--muted); font-size: .9rem; font-weight: 700; }
.progress-track { height: 5px; margin: 0 0 28px; border-radius: 999px; background: #e5e1d7; overflow: hidden; }
.progress-value { height: 100%; background: linear-gradient(90deg, #b9870b, #e0b63b); border-radius: inherit; transition: width .22s ease; }
.step-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 22px; }
.step-tab { padding: 9px 8px; border-radius: 999px; text-align: center; font-size: .78rem; font-weight: 750; color: #8a857b; background: #ebe8df; }
.step-tab.is-active { color: #1d1b15; background: #f2d67f; }
.step-tab.is-done { color: #fff; background: #4b4942; }

.form-card { background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.section-band { padding: 22px clamp(20px,4vw,38px); background: linear-gradient(90deg, #232321, #3a3934); color: white; }
.section-band h2 { margin: 0 0 5px; font-size: clamp(1.35rem,3vw,1.75rem); }
.section-band p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.45; }
.form-body { padding: clamp(22px,4vw,40px); }
.form-section + .form-section { margin-top: 36px; padding-top: 34px; border-top: 1px solid var(--line); }
.form-section h3 { margin: 0 0 18px; font-size: 1.15rem; color: #2f2e2a; }
.form-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.field { grid-column: span 6; }
.field--third { grid-column: span 4; }
.field--two-thirds { grid-column: span 8; }
.field--quarter { grid-column: span 3; }
.field--full { grid-column: 1 / -1; }
.field > label, .group-label { display: block; margin: 0 0 8px; font-size: .9rem; font-weight: 780; color: #34332f; }
.required { color: #a33a2c !important; }
.required::after { content: " *"; color: #c65331; font-weight: 900; }
.form-requirement { margin: 0 0 14px; font-weight: 800; }
.input, .select, .textarea { width: 100%; border: 1px solid #cfc9bc; border-radius: var(--radius-sm); background: #fff; color: var(--ink); outline: none; transition: border .15s ease, box-shadow .15s ease; }
.input:required:not([readonly]), .select:required:not([readonly]), .textarea:required:not([readonly]),
.field > label.required + .input:not([readonly]), .field > label.required + .select:not([readonly]), .field > label.required + .textarea:not([readonly]),
.field > label.required ~ .wide-select-button, .wide-select-button.is-required {
  border-color: #d8a327;
  background: #fff2cf;
  box-shadow: inset 0 0 0 1px rgba(216,163,39,.22);
}
.input:required:not([readonly]):focus, .select:required:not([readonly]):focus, .textarea:required:not([readonly]):focus,
.wide-select-button.is-required:focus { border-color: #b7790a; box-shadow: 0 0 0 4px rgba(214,168,23,.22); }
.input, .select { height: 54px; padding: 0 15px; }
.textarea { font-family: inherit; font-size: 1rem; line-height: 1.55; min-height: 108px; max-height: none; padding: 14px 15px; overflow-y: hidden; resize: none; }
#visit-form .textarea { font-family: inherit; font-size: 1rem; line-height: 1.55; min-height: 108px; max-height: none; overflow-y: hidden; resize: none; }
#visit-form .field > label { font-size: 1rem; }
.wide-select-button { height: auto; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; font: inherit; font-size: 1rem; line-height: 1.45; padding: 12px 15px; }
.wide-select-button span:first-child { min-width: 0; overflow-wrap: anywhere; }
.wide-picker { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: 88vh; max-height: 88dvh; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px #0004; }
.wide-picker[open] { display: flex; flex-direction: column; }
.wide-picker::backdrop { background: #19181188; }
.wide-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.wide-picker-header h2 { margin: 0; font-size: 1.2rem; }
.wide-picker-search { padding: 14px 22px; flex-shrink: 0; }
.wide-picker-search label { display: block; margin-bottom: 8px; font-weight: 700; }
.wide-picker-options { overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 16px; min-height: 0; }
.wide-picker-option { display: block; width: 100%; min-height: 56px; border: 1px solid transparent; border-bottom-color: var(--line); background: #fff; padding: 14px 16px; text-align: left; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.wide-picker-option[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); border-radius: 10px; font-weight: 700; }
.wide-picker-option:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.wide-picker-empty { padding: 0 22px 20px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214,168,23,.14); }
.field-hint { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.validation-error { margin: 16px 0 0; padding: 13px 15px; border-radius: 12px; background: #fff1f1; color: #973636; font-weight: 650; }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { min-height: 48px; min-width: 108px; padding: 0 17px; border: 1px solid #cec8ba; border-radius: 12px; display: grid; place-items: center; background: #fff; font-weight: 720; cursor: pointer; }
.choice input:checked + span { background: var(--gold-soft); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: #6b4e08; }
.choice input:focus-visible + span { outline: 3px solid rgba(214,168,23,.25); }
.conditional { margin-top: 13px; }
.question-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fcfbf8; }
.question-card:has(> .group-label.required) { border-color: #d8a327; background: #fff8e7; }
.question-card + .question-card { margin-top: 15px; }
.question-card .group-label { font-size: 1rem; }

.form-actions { display: flex; justify-content: space-between; gap: 12px; padding: 22px clamp(20px,4vw,38px); border-top: 1px solid var(--line); background: #faf9f5; }
.form-actions-right { margin-left: auto; display: flex; gap: 12px; }

.legal-card { padding: clamp(20px,4vw,32px); border: 1px solid var(--line); border-radius: 18px; background: #fcfbf7; }
.legal-card + .legal-card { margin-top: 20px; }
.legal-card h3 { margin: 0 0 12px; }
.legal-text { max-height: 260px; overflow: auto; padding: 18px; border-radius: 12px; background: #fff; border: 1px solid #e7e2d7; color: #4d4941; line-height: 1.58; font-size: .93rem; }
.legal-warning { margin: 12px 0 0; color: #896713; font-size: .82rem; font-weight: 700; }
.check-line { margin-top: 17px; display: flex; gap: 12px; align-items: flex-start; font-weight: 700; line-height: 1.45; }
.check-line input { width: 23px; height: 23px; margin: 0; accent-color: var(--gold); flex: 0 0 auto; }
.check-line:has(.required) { padding: 12px 14px; border: 1px solid #d8a327; border-radius: 12px; background: #fff2cf; }

.review-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.review-block { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fcfbf8; }
.review-block h3 { margin: 0 0 14px; }
.review-list { display: grid; gap: 10px; }
.review-row { display: grid; grid-template-columns: 150px 1fr; gap: 15px; font-size: .92rem; line-height: 1.45; }
.review-row dt { color: var(--muted); font-weight: 700; }
.review-row dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.signature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 22px; }
.signature-grid--single { grid-template-columns: minmax(0, 610px); }
.signature-card { padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.signature-card:has(.required) { border-color: #d8a327; background: #fff8e7; }
.signature-card h3 { margin: 0 0 6px; font-size: 1rem; }
.signature-card p { margin: 0 0 12px; color: var(--muted); font-size: .83rem; }
.signature-canvas { width: 100%; height: 180px; display: block; border: 1px dashed #aca595; border-radius: 12px; background: #fdfcf8; touch-action: none; }
.signature-tools { margin-top: 10px; display: flex; justify-content: flex-end; }
.link-button { border: 0; background: transparent; color: #735710; font-weight: 750; cursor: pointer; padding: 7px; }

.success-card { width: min(760px,100%); margin: 0 auto; padding: clamp(30px,6vw,62px); text-align: center; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.success-mark { width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: #f4df9c; color: #4a390b; font-size: 2rem; font-weight: 850; }
.success-card h1 { font-size: clamp(2rem,5vw,3rem); }
.success-card p { color: var(--muted); line-height: 1.6; }
.demo-badge { display: inline-block; margin: 12px 0 24px; padding: 8px 12px; border-radius: 999px; background: #fff2d1; color: #74560d; font-weight: 800; font-size: .78rem; }

.staff-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.staff-card { min-height: 135px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; text-align: left; cursor: pointer; }
.staff-card strong { display: block; margin-bottom: 8px; font-size: 1.08rem; }
.staff-card span { color: var(--muted); line-height: 1.45; }
.staff-card:hover, .staff-card:focus-visible { border-color: var(--gold); box-shadow: 0 10px 28px rgba(31,28,20,.09); outline: none; }
.staff-card--patient-action { border-color: #d6b455; background: linear-gradient(145deg, #fffaf0, #f8edc8); }
.staff-card--patient-action strong { color: #5d470c; }
.staff-card--patient-action:hover, .staff-card--patient-action:focus-visible { border-color: #b88b13; }
.staff-card--patient-info { border-color: #9fc7b5; background: linear-gradient(145deg, #f7fcf9, #e8f5ef); }
.staff-card--patient-info strong { color: #285c47; }
.staff-card--patient-info:hover, .staff-card--patient-info:focus-visible { border-color: #4f9275; }
.staff-card--system { border-color: #c6ccd3; background: linear-gradient(145deg, #fafbfc, #edf0f3); }
.staff-card--system strong { color: #39444f; }
.staff-card--system:hover, .staff-card--system:focus-visible { border-color: #8794a1; }
.visit-alert { margin-bottom: 28px; padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start; border: 1px solid #c9d8d1; border-radius: 14px; background: #eff7f3; color: #315a49; line-height: 1.45; }
.visit-alert strong { flex: 0 0 auto; }
.visit-alert ul { margin: 0; padding-left: 20px; }
.visit-alert--active { border-color: #e0b85b; background: #fff5d8; color: #6d5010; }
.visit-alert--active strong { color: #513b08; }
.visit-alert--compact { flex: 1 1 auto; margin-bottom: 0; }
.visit-context-bar { margin-bottom: 28px; display: flex; align-items: stretch; gap: 12px; }
.visit-context-actions { flex: 0 0 auto; display: flex; align-items: center; }
.clinical-access-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.clinical-access-card { padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 15px 17px; align-items: start; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.clinical-access-card h2 { margin: 0 0 7px; font-size: 1.13rem; }
.clinical-access-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.clinical-access-card .button { grid-column: 1 / -1; }
.clinical-access-icon { width: 54px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: #ece8dc; color: #4f4a40; font-size: .72rem; font-weight: 900; letter-spacing: .04em; }
.history-dialog { width: min(1180px,96vw); height: min(920px,94vh); padding: 0; border: 0; border-radius: 22px; background: #f7f5ef; box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.history-dialog::backdrop { background: rgba(20,20,18,.72); backdrop-filter: blur(4px); }
.history-viewer { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.history-viewer__header { padding: 18px 22px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--line); background: #fff; }
.history-viewer__header h2 { margin: 3px 0 4px; }
.history-viewer__header p { margin: 0; color: var(--muted); }
.history-viewer__header .eyebrow { color: #80610e; }
.dialog-close--viewer { position: static; flex: 0 0 auto; }
.history-viewer iframe { width: 100%; height: 100%; border: 0; background: #6d6b67; }
.history-viewer__footer { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .84rem; }
.output-field { min-height: 54px; padding: 0 15px; display: flex; align-items: center; border: 1px solid #d9d4c7; border-radius: var(--radius-sm); background: #f5f3ed; color: #4d4941; font-weight: 800; }
.appointment-priority { padding: 14px; border: 2px solid rgba(20,126,112,.55); border-radius: 14px; background: #eef8f5; }
.appointment-priority > label { color: var(--teal-dark); }
.priority-badge { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: var(--teal-dark); color: #fff; font-size: .66rem; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; vertical-align: middle; }
.payment-check { margin-top: 22px; padding: 17px 19px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid #dfc66e; border-radius: 14px; background: #fff8df; color: #6f5818; line-height: 1.45; }
.payment-check strong { flex: 0 0 auto; color: #513d08; }
.money-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.money-summary > div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.money-summary span, .money-summary strong { display: block; }
.money-summary span { margin-bottom: 5px; color: var(--muted); font-size: .78rem; font-weight: 750; }
.money-summary strong { font-size: 1.05rem; }
.money-summary .is-pending { border-color: #e3bb62; background: #fff4d5; color: #765506; }
.money-summary .is-balanced { border-color: #b9d6c8; background: #edf8f2; color: #286249; }
.visit-clinical-review { margin-top: 18px; }
.visit-clinical-review .review-row { grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); }
.button--compact { min-height: 42px; padding: 9px 14px; }
.doctor-list { display: grid; gap: 12px; }
.doctor-row { padding: 16px; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(210px,.8fr) auto; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.doctor-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.doctor-row.is-inactive { opacity: .68; background: #f4f2ec; }
.doctor-identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
.doctor-identity strong, .doctor-identity small { display: block; }
.doctor-identity small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.doctor-avatar { width: 66px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fbfaf6; color: var(--muted); font-weight: 800; }
.doctor-avatar img { width: 100%; height: 100%; object-fit: contain; }
.doctor-status { color: var(--muted); font-size: .86rem; line-height: 1.35; }
.status-dot { width: 9px; height: 9px; margin-right: 7px; display: inline-block; border-radius: 50%; background: #c59b27; }
.status-dot.is-ready { background: #458265; }
.doctor-assets { margin-top: 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.doctor-image-field { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fbfaf6; }
.doctor-image-field > div:first-child p { margin: 5px 0 14px; color: var(--muted); font-size: .83rem; }
.doctor-image-control { display: grid; grid-template-columns: minmax(130px,1fr) minmax(150px,.8fr); gap: 14px; align-items: center; }
.doctor-image-preview { height: 110px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #bdb6a7; border-radius: 12px; background: white; color: var(--muted); font-size: .83rem; }
.doctor-image-preview img { display: block; width: 100%; height: 100px; min-height: 0; object-fit: contain; }
.operator-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.operator-button { min-height: 70px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 800; cursor: pointer; }
.operator-button:hover, .operator-button:focus-visible { border-color: var(--gold); background: var(--gold-soft); outline: none; }
.prototype-notice { margin: 0 0 24px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #ead28c; border-radius: 13px; background: #fff8e5; color: #6f5818; font-size: .86rem; line-height: 1.35; }
.prototype-notice strong { padding: 4px 8px; border-radius: 999px; background: #e6ba3a; color: #241e0d; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.prototype-notice--warning { border-color: #e7b9b5; background: #fff1f0; color: #7a312c; }
.prototype-notice--warning strong { background: #b94b45; color: #fff; }
.current-data-callout { margin-bottom: 20px; padding: 15px 17px; display: grid; gap: 4px; border: 1px solid #cadbd4; border-radius: 13px; background: #f0f7f4; }
.current-data-callout span { color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.current-data-callout strong { color: #255946; font-size: 1.04rem; }
.current-data-callout small { color: var(--muted); }
.current-data-callout dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 10px 0 6px; }
.current-data-callout dl div { min-width: 0; }
.current-data-callout dt { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.current-data-callout dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.patient-mode-banner { margin: -8px 0 24px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #ccd9d3; border-radius: 13px; background: #eff7f3; color: #315a49; font-size: .86rem; line-height: 1.4; }
.patient-mode-banner strong { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #39785d; color: white; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.standalone-action { margin-top: 24px; display: flex; justify-content: flex-end; }
.guardian-review { margin-top: 18px; }
.staff-access-page .operator-grid { margin-top: 24px; }
.search-card { padding: clamp(22px,4vw,38px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.search-form > label { display: block; margin-bottom: 9px; font-weight: 800; }
.search-line { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.results-meta { min-height: 48px; padding: 20px 2px 10px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.patient-results { display: grid; gap: 9px; }
.patient-result { width: 100%; min-height: 76px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fcfbf7; color: var(--ink); text-align: left; cursor: pointer; }
.patient-result:hover, .patient-result:focus-visible { border-color: var(--gold); background: var(--gold-soft); outline: none; }
.patient-result strong, .patient-result small { display: block; }
.patient-result strong { margin-bottom: 5px; font-size: 1.02rem; }
.patient-result small { color: var(--muted); }
.result-arrow { color: var(--teal-dark); font-size: 1.35rem; }
.empty-results { padding: 34px 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.pagination { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; }
.pagination button:disabled { opacity: .38; cursor: default; }
.patient-code { padding: 8px 12px; border: 1px solid #dac67d; border-radius: 999px; background: var(--gold-soft); color: #6d540e; font-size: .82rem; font-weight: 850; }
.signature-card--single { max-width: 610px; }
.consent-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.consent-required-label + .consent-type-grid { padding: 14px; border: 1px solid #d8a327; border-radius: 16px; background: #fff8e7; }
.consent-tabs { margin-bottom: 20px; padding: 5px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; border-radius: 15px; background: #ece9e0; }
.consent-tab { min-height: 50px; padding: 8px 14px; border: 0; border-radius: 11px; background: transparent; color: #716d64; font-weight: 800; cursor: pointer; }
.consent-tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(31,28,20,.09); }
.consent-type { position: relative; }
.consent-type input { position: absolute; opacity: 0; pointer-events: none; }
.consent-type span { min-height: 122px; padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 17px; background: #fcfbf8; cursor: pointer; }
.consent-type strong, .consent-type small { display: block; }
.consent-type strong { font-size: 1.04rem; }
.consent-type small { color: var(--muted); line-height: 1.4; }
.consent-type input:checked + span { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.consent-type input:focus-visible + span { outline: 3px solid rgba(214,168,23,.24); }
.draft-warning { margin-bottom: 20px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid #e1c76f; border-radius: 13px; background: #fff8df; color: #6f5818; line-height: 1.45; }
.draft-warning strong { flex: 0 0 auto; }
.consent-document { padding: clamp(20px,4vw,34px); border: 1px solid var(--line); border-radius: 18px; background: #fff; color: #403e38; line-height: 1.62; }
.consent-document h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.05rem; }
.consent-document p { margin: 0; }
.document-identification { padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.consent-section { padding: 22px 0; border-bottom: 1px solid #ebe7dd; }
.consent-section:last-child { border-bottom: 0; }
.consent-section h3 { letter-spacing: .015em; }
.consent-section.consent-declaration { margin: 18px 0 0; padding: 20px; border: 1px solid #dfca83; border-radius: 14px; background: #fffaf0; }
.doctor-authorization { margin: 0 0 8px !important; }
.doctor-validation { margin-top: 26px; padding: 20px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(180px,.6fr); gap: 22px; align-items: center; border: 1px solid #d7c58b; border-radius: 15px; background: #fffaf0; }
.doctor-validation > div { min-width: 0; }
.doctor-validation strong, .doctor-validation span { display: block; }
.doctor-validation span { margin-top: 4px; color: var(--muted); font-size: .86rem; }
.doctor-credential-placeholder { min-height: 86px; padding: 16px; display: grid; align-content: center; border: 1px dashed #cbbd91; border-radius: 11px; background: rgba(255,255,255,.72); }
.readonly-value { min-height: 52px; padding: 12px 14px; display: grid; gap: 3px; align-content: center; border: 1px solid var(--line); border-radius: 11px; background: #f7f8f7; }
.readonly-value strong, .readonly-value span { display: block; }
.readonly-value span { color: var(--muted); font-size: .83rem; }
.staff-card.is-disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.25); }
.doctor-validation-label { margin: 0 0 8px !important; color: #81661b; font-size: .78rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.doctor-signature-image { width: min(280px,100%); height: 74px; margin-top: 12px; display: block; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.doctor-stamp-image { width: 100%; height: 116px; display: block; object-fit: contain; mix-blend-mode: multiply; }
.doctor-validation--combined { grid-template-columns: minmax(220px,.7fr) minmax(320px,1.3fr); }
.doctor-credential-image { width: min(520px,100%); height: 150px; display: block; object-fit: contain; object-position: left center; }
.consent-list { margin: 10px 0 0; padding-left: 22px; }
.consent-list li { margin: 7px 0; padding-left: 4px; }
.consent-zones { margin: 22px 0 4px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #f8f7f3; }
.consent-zones > p { color: var(--muted); }
.consent-product { margin: 22px 0 4px; padding: 20px; border: 1px solid rgba(184,139,45,.35); border-radius: 15px; background: #fffaf0; }
.consent-product > p { margin: 14px 0 0; color: var(--muted); font-size: .92rem; }
.zone-options { margin-top: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.zone-options label { min-height: 48px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-weight: 750; }
.zone-options input[type="checkbox"] { width: 21px; height: 21px; accent-color: var(--gold); flex: 0 0 auto; }
.zone-options .zone-other { grid-column: 1 / -1; }
.zone-options .zone-other .input { min-width: 0; margin-left: 6px; flex: 1; }
.privacy-callout { margin-top: 22px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid #d9d4c7; border-radius: 14px; background: #f8f7f3; color: #4f4b43; line-height: 1.45; }
.privacy-callout strong { flex: 0 0 auto; color: var(--ink); }
.photo-capture-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-requirement.required + .photo-capture-grid { padding: 14px; border: 1px solid #d8a327; border-radius: 16px; background: #fff8e7; }
.photo-capture-card { min-height: 166px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fcfbf7; }
.photo-capture-copy p { margin: 7px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.photo-category { color: var(--ink); font-size: 1.04rem; font-weight: 850; }
.photo-add-button { position: relative; min-height: 50px; padding: 0 16px; display: grid; place-items: center; border: 1px solid #d5ae36; border-radius: 12px; background: var(--gold-soft); color: #604805; font-weight: 800; text-align: center; cursor: pointer; }
.photo-add-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-add-button:focus-within { outline: 3px solid rgba(214,168,23,.24); }
.photo-preview-section { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.photo-preview-heading { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.photo-preview-heading h3 { margin: 0 0 5px; }
.photo-preview-heading p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.photo-preview-heading > strong { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #2d2c28; color: white; }
.photo-preview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.empty-photo-state { grid-column: 1 / -1; padding: 34px 18px; border: 1px dashed #c9c3b6; border-radius: 14px; color: var(--muted); text-align: center; background: #fbfaf7; }
.photo-preview { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; }
.photo-preview img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: #ece9e1; }
.photo-preview > div { padding: 11px 42px 12px 12px; }
.photo-preview strong, .photo-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-preview strong { margin-bottom: 4px; font-size: .85rem; }
.photo-preview small { color: var(--muted); font-size: .75rem; }
.photo-preview button { position: absolute; right: 8px; bottom: 10px; width: 30px; height: 30px; padding: 0; border: 1px solid #e4c4c4; border-radius: 50%; background: #fff4f4; color: var(--danger); font-size: 1.25rem; cursor: pointer; }
.session-destination { margin-bottom: 20px; padding: 15px 17px; display: grid; gap: 5px; border: 1px solid #dfca83; border-radius: 13px; background: #fffaf0; }
.session-destination span { color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.session-destination strong { overflow-wrap: anywhere; }
.success-path { margin: 14px auto 18px; padding: 13px 16px; max-width: 620px; border: 1px solid #dfca83; border-radius: 12px; background: #fffaf0; color: #5f490d; font-weight: 800; overflow-wrap: anywhere; }
.connection-pill { flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; font-size: .82rem; font-weight: 850; }
.connection-pill.is-online { background: #e5f5ec; color: #246b48; }
.connection-pill.is-offline { background: #fff0e1; color: #99591d; }
.transfer-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.transfer-summary { padding: 22px clamp(20px,4vw,34px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); background: #faf9f5; }
.transfer-summary > div { min-width: 94px; }
.transfer-summary span, .transfer-summary strong { display: block; }
.transfer-summary span { color: var(--muted); font-size: .77rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.transfer-summary strong { margin-top: 2px; font-size: 2rem; }
.transfer-summary p { margin: 0; color: var(--muted); line-height: 1.45; }
.transfer-feedback { margin: 20px 24px 0; padding: 13px 15px; border-radius: 12px; background: #edf7f1; color: #296647; font-weight: 720; }
.transfer-list { padding: clamp(20px,4vw,34px); }
.transfer-row { padding: 16px; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fcfbf8; }
.transfer-row + .transfer-row { margin-top: 11px; }
.transfer-type { color: #6a500d; font-size: .82rem; font-weight: 850; }
.transfer-main { min-width: 0; }
.transfer-main strong, .transfer-main span, .transfer-main small { display: block; }
.transfer-main span { margin: 4px 0; color: #4c4942; }
.transfer-main small { color: var(--muted); overflow-wrap: anywhere; }
.transfer-empty { padding: 42px 20px; text-align: center; }
.transfer-empty > span { width: 58px; height: 58px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: #e5f5ec; color: #2e7a55; font-size: 1.5rem; font-weight: 900; }
.transfer-empty strong { display: block; margin-bottom: 7px; font-size: 1.12rem; }
.transfer-empty p { margin: 0; color: var(--muted); }

.photo-viewer { max-width: 1180px; grid-template-rows: max-content max-content minmax(0,1fr) max-content; }
.photos-toolbar { padding: 15px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: #fffaf0; }
.photos-toolbar > div { display: grid; gap: 3px; }
.photos-toolbar span { color: var(--muted); font-size: .8rem; }
.photos-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 18px; padding: 22px; overflow: auto; background: #f4f6f5; }
.photo-card { margin: 0; overflow: hidden; border: 1px solid #dce3df; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgb(20 43 35 / 8%); }
.photo-card--selectable { position: relative; display: block; }
.photo-card__select { display: block; cursor: pointer; }
.photo-card--selectable input { position: absolute; opacity: 0; pointer-events: none; }
.photo-card--selectable.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214,168,23,.22), 0 8px 24px rgb(20 43 35 / 8%); }
.photo-delete { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #b3261e; box-shadow: 0 3px 12px rgba(0,0,0,.28); font: 800 1.65rem/1 Arial,sans-serif; cursor: pointer; }
.photo-delete:hover,.photo-delete:focus-visible { background: #8f1914; outline: 3px solid rgba(179,38,30,.28); outline-offset: 2px; }
.photo-delete:disabled { opacity: .7; cursor: wait; }
.photo-check { position: absolute; z-index: 2; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: rgba(37,37,34,.72); color: #fff; font-weight: 900; }
.photo-card--selectable.is-selected .photo-check { background: var(--gold); }
.photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e8ecea; }
.photo-card figcaption { display: grid; gap: 4px; padding: 12px 14px; font-size: .78rem; }
.photo-card figcaption span { color: #65706c; overflow-wrap: anywhere; }
.photos-limit { grid-column: 1 / -1; margin: 0; color: #65706c; text-align: center; }
.photo-session { grid-column: 1 / -1; }
.photo-session + .photo-session { padding-top: 10px; border-top: 1px solid #dce3df; }
.photo-session > header { margin-bottom: 12px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.photo-session h3 { margin: 0; color: var(--teal-dark); font-size: 1rem; }
.photo-session header span { color: var(--muted); font-size: .78rem; }
.photo-session-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 18px; }
.photos-gallery--evolution { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; }
.evolution-photo { position: relative; margin: 0; overflow: hidden; border: 1px solid #d8d5cb; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgb(20 43 35 / 9%); }
.evolution-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #1f2422; }
.evolution-photo figcaption { padding: 13px 15px; display: grid; gap: 3px; }
.evolution-photo figcaption span { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.evolution-order { position: absolute; z-index: 2; top: 11px; left: 11px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 900; box-shadow: 0 4px 12px rgb(0 0 0 / 22%); }

.legal-text--scroll, .consent-document--scroll { max-height: min(54vh,560px); padding-right: 12px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.legal-text--scroll section + section { margin-top: 22px; }
.legal-text--scroll h4 { margin: 0 0 8px; color: var(--teal-dark); font-size: .86rem; letter-spacing: .035em; text-transform: uppercase; }
.read-hint { margin: 12px 0; color: var(--muted); font-size: .82rem; font-style: italic; }
.check-line input:disabled + span { color: #8b918e; }
.check-line--compact { margin: 0; padding: 10px 12px; background: #faf9f5; }
.signature-guidance { margin: 18px 0 12px; padding: 12px 15px; border-left: 4px solid var(--gold); border-radius: 8px; background: #fffaf0; color: #5f4b17; font-weight: 750; }
.signature-card.is-disabled { opacity: .55; pointer-events: none; }
.selected-patient-panel { margin-bottom: 22px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(20,126,112,.28); border-radius: 16px; background: #f1f8f6; }
.selected-patient { min-width: 0; display: grid; gap: 3px; }
.selected-patient > span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.selected-patient > strong { color: var(--teal-dark); font-size: 1.03rem; overflow-wrap: anywhere; }
.selected-patient > small { color: var(--muted); }
.pending-counter { min-width: 92px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; }
.pending-counter span, .pending-counter strong { display: block; }
.pending-counter span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.pending-counter strong { margin-top: 2px; color: var(--teal-dark); font-size: 1.35rem; }
.decision-actions { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.duplicate-operator { width: min(420px,100%); margin: 22px auto 0; text-align: left; }
.photo-reminder { margin-top: 18px; padding: 14px 16px; border: 1px solid #dfca83; border-radius: 12px; background: #fffaf0; color: #624c13; line-height: 1.45; }
.idle-card { text-align: center; }

@media (max-width: 760px) {
  .form-header { align-items: flex-start; }
  .step-tabs { grid-template-columns: repeat(2,1fr); }
  .field, .field--third, .field--two-thirds, .field--quarter { grid-column: 1 / -1; }
  .review-grid, .signature-grid, .staff-grid, .doctor-assets, .clinical-access-grid { grid-template-columns: 1fr; }
  .visit-context-bar { flex-direction: column; }
  .visit-context-actions .button { width: 100%; }
  .history-viewer__footer { align-items: stretch; flex-direction: column; }
  .photos-toolbar { align-items: stretch; flex-direction: column; }
  .photos-toolbar .button { width: 100%; }
  .money-summary { grid-template-columns: 1fr; }
  .doctor-row { grid-template-columns: 1fr auto; }
  .doctor-status { grid-column: 1 / -1; grid-row: 2; }
  .review-row { grid-template-columns: 1fr; gap: 2px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions-right { width: 100%; }
  .form-actions-right .button { flex: 1; }
  .photo-preview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .transfer-summary, .transfer-row { grid-template-columns: 1fr; align-items: stretch; }
  .transfer-summary .button, .transfer-row .button { width: 100%; }
}

@media (max-width: 640px) {
  .zone-options { grid-template-columns: 1fr; }
  .zone-options .zone-other { grid-column: auto; align-items: flex-start; flex-wrap: wrap; }
  .zone-options .zone-other .input { width: 100%; margin: 3px 0 0 31px; flex-basis: calc(100% - 31px); }
  .topbar { min-height: 74px; padding: 10px 18px; }
  .brand img { width: 145px; }
  .topbar-meta span:last-child { max-width: 150px; font-size: .78rem; line-height: 1.2; text-align: right; }
  .main-content { padding: 28px 16px; align-items: start; }
  .action-card { min-height: 112px; padding: 18px; gap: 14px; }
  .action-icon { width: 54px; height: 54px; border-radius: 15px; }
  .footerbar { padding: 13px 18px; }
  .footerbar span:last-child { display: none; }
  .search-line { grid-template-columns: 1fr; }
  .consent-type-grid { grid-template-columns: 1fr; }
  .consent-tabs { grid-template-columns: 1fr; }
  .draft-warning { flex-direction: column; }
  .patient-mode-banner { flex-direction: column; align-items: flex-start; }
  .privacy-callout { flex-direction: column; }
  .photo-capture-grid, .photo-preview-grid { grid-template-columns: 1fr; }
  .photos-gallery--evolution { grid-template-columns: 1fr; }
  .doctor-image-control, .doctor-validation, .doctor-row { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (min-width: 850px) {
  .action-grid { grid-template-columns: 1fr 1fr; }
  .action-card { min-height: 172px; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; }
  .action-icon { grid-column: 1; grid-row: 1; }
  .action-text { grid-column: 1 / -1; grid-row: 2; }
  .action-arrow { grid-column: 2; grid-row: 1; }
}

/* Seguimiento: lectura y contacto desde tablet. */
.followup-list { display: grid; gap: 16px; }
.followup-card { background: white; border: 1px solid #ded8cb; border-radius: 16px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.followup-card h2 { font-size: 21px; margin: 0 0 8px; }
.followup-card p { margin: 7px 0; overflow-wrap: anywhere; }
.followup-toolbar { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin: 20px 0; }
.followup-toolbar label { flex: 1; min-width: 180px; }
.followup-alert { color: #8b431c; font-weight: 600; }
.followup-pending, .followup-warning { background: #fff4d8; padding: 14px; border-radius: 10px; }
.followup-notes { white-space: pre-wrap; }
.followup-handover { margin: 28px 0; padding: 20px; border: 1px solid #ded8cb; border-radius: 12px; }
.followup-handover label { display: block; max-width: 320px; margin: 16px 0; }
@media(max-width: 650px) { .followup-card { flex-direction: column; align-items: stretch; padding: 18px; } }

#fu-error:empty { display:none; }

/* Seguimiento ampliado */
.followup-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,230px); align-items:start; }
.followup-actions { display:grid; gap:12px; }
.followup-actions button { width:100%; }
.followup-actions details { padding:8px 0; overflow-wrap:anywhere; }
.followup-alert { white-space:pre-line; }
@media(max-width:700px) { .followup-card { grid-template-columns:1fr; } }

.followup-states{border:0;padding:0;display:flex;gap:.75rem;flex-wrap:wrap}.followup-quick{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}.followup-quick button{min-height:40px}

/* Documentos, recetas sin visita e informe mixto */
.patient-result small{display:block;color:#66716c;margin-top:.35rem}.prescription-summary{padding:1rem;background:#edf5f1;border-radius:12px;margin:1rem 0;white-space:pre-wrap}.evolution-report-form{grid-column:1/-1;width:100%;box-sizing:border-box}.report-thumbnails{display:flex;gap:.7rem;overflow:auto;margin:1rem 0}.report-thumbnails img{width:120px;height:120px;object-fit:contain;background:#f3f4f0}#rx-details summary,.evolution-report-form summary{padding:1rem 0;cursor:pointer;font-weight:600}
:is(#rx-error, #report-error):empty { display: none; }

/* Exploración de la carpeta del paciente */
.folder-breadcrumbs,.folder-summary { display:flex;flex-wrap:wrap;align-items:center;gap:8px; }
.folder-breadcrumbs { margin-bottom:16px; }
.folder-breadcrumbs button { max-width:100%;white-space:normal;overflow-wrap:anywhere; }
.patient-folder .patient-result { width:100%;text-align:left; }
.patient-folder .patient-result > span:first-child { min-width:0;overflow-wrap:anywhere; }
.patient-folder .patient-result > span:last-child { flex-shrink:0; }
.patient-folder .pagination { margin-block:16px; }



/* Seguimiento comercial y pendientes clínicos */
.visit-date-notice,.visit-date-review { padding:11px 13px; border:1px solid #dfc66e; border-radius:11px; background:#fff8df; color:#6f5818; line-height:1.4; }
.visit-date-notice { margin:9px 0 0; font-size:.8rem; font-weight:700; }
.visit-date-notice[hidden] { display:none; }
.visit-date-review { display:flex; gap:10px; align-items:flex-start; margin:0 0 18px; }
.visit-date-review strong { flex:0 0 auto; color:#513d08; }
.followup-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; margin:18px 0 24px; }
.followup-summary div { padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.followup-summary span,.followup-summary strong { display:block; }
.followup-summary span { min-height:2.2em; color:var(--muted); font-size:.74rem; font-weight:750; }
.followup-summary strong { margin-top:4px; color:var(--teal-dark); font-size:1.65rem; }
.followup-summary-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0 24px; }
.followup-summary-group { padding:12px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.followup-summary-group--status { border:2px solid #9fcabc; background:#edf7f3; box-shadow:0 5px 16px rgb(34 105 82 / 10%); }
.followup-summary-group--activity { border:2px solid #e3c566; background:#fff8df; box-shadow:0 5px 16px rgb(145 104 0 / 10%); }
.followup-summary-groups--commercial { grid-template-columns:1fr; }
.followup-summary-groups--commercial .followup-summary-group--activity .followup-summary--group { grid-template-columns:repeat(3,minmax(0,1fr)); }
.followup-summary-groups--commercial .followup-summary-group--status .followup-summary--group { grid-template-columns:repeat(4,minmax(0,1fr)); }
.followup-summary-groups--commercial .followup-summary-group--activity .followup-summary--group div { border-color:#ead79c; background:rgb(255 255 255 / 78%); }
.followup-summary-groups--commercial .followup-summary-group--status .followup-summary--group div:first-child { border-color:#8fc7b2; background:#e2f4ed; }
.followup-summary-group__title { margin:0 3px 10px; color:#544f46; font-size:.78rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.followup-summary--group { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.followup-summary--group div { padding:12px; }
.followup-summary-group--status .followup-summary--group div { border-color:#c3ded5; background:rgb(255 255 255 / 75%); }
.followup-status-filter { margin:0 0 20px; padding:14px 16px 16px; border:2px solid #9fcabc; border-radius:15px; background:#edf7f3; }
.followup-status-filter legend { padding:0 7px; color:#315f51; font-weight:850; }
.followup-status-filter > p { margin:0 0 11px; color:#5f6d67; font-size:.8rem; }
.followup-status-filter > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.followup-status-filter label { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; min-height:48px; padding:10px 12px; border:1px solid #c3ded5; border-radius:11px; background:#fff; font-weight:800; cursor:pointer; }
.followup-status-filter input { width:21px; height:21px; margin:0; accent-color:#28785d; }
.followup-status-filter strong { min-width:30px; padding:3px 8px; border-radius:999px; background:#e4f1ec; color:#226952; text-align:center; }
.followup-chart { display:grid; grid-template-columns:260px 1fr; align-items:center; gap:18px; margin:0 0 22px; padding:16px 20px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.followup-chart strong,.followup-chart small { display:block; }
.followup-chart small { margin-top:7px; color:var(--muted); line-height:1.4; }
.followup-chart svg { width:100%; height:125px; overflow:visible; }
.followup-chart__axis { stroke:#d8d2c5; stroke-width:1; }
.followup-chart__dots { fill:#b78a00; }
.followup-chart__months { fill:#777268; font-size:12px; text-anchor:middle; }
.followup-chart__value { fill:#735510; font-size:14px; font-weight:800; text-anchor:middle; }
.followup-delay-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:6px 0 10px; }
.followup-delay-heading strong,.followup-delay-heading span { display:block; }
.followup-delay-heading strong { font-size:1.08rem; }
.followup-delay-heading span { margin-top:3px; color:var(--muted); font-size:.82rem; }
.followup-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:6px; border-radius:15px; background:#ece9e0; }
.followup-tabs--delay { grid-template-columns:repeat(5,1fr); }
.followup-tabs button { min-height:48px; padding:8px 12px; border:0; border-radius:11px; background:transparent; color:var(--muted); font:inherit; font-weight:800; }
.followup-tabs--delay button span,.followup-tabs--delay button strong { display:block; }
.followup-tabs--delay button strong { margin-top:4px; color:var(--teal-dark); font-size:1.3rem; }
.followup-tabs button.is-active { background:#fff; color:var(--ink); box-shadow:0 3px 10px rgb(20 43 35 / 9%); }
.followup-simple-tools { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin:18px 0 12px; }
.followup-simple-tools label { flex:1; min-width:190px; }
.followup-reason-guide { margin:12px 0 4px; padding:11px 14px; border:1px solid #ddd5c5; border-radius:12px; background:#fffdf7; }
.followup-reason-guide > strong { display:block; margin-bottom:6px; color:#554b34; font-size:.75rem; }
.followup-reason-guide div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.followup-reason-guide p { margin:0; color:var(--muted); font-size:.68rem; line-height:1.35; }
.followup-reason-guide b { color:#4d473d; }
.followup-status-guide { margin:0 0 18px; border-color:#b9d8cc; background:#f5fbf8; }
.followup-status-guide > strong { color:#315f51; }
.followup-status-guide b { color:#285846; }
.followup-status-guide small { display:block; margin-top:9px; color:#507267; font-size:.69rem; line-height:1.4; }
.followup-historical { margin-top:26px; padding-top:22px; border-top:2px solid #d8d4ca; }
.followup-count { color:var(--muted); font-weight:700; }
.followup-lines { display:grid; gap:9px; }
.followup-line { width:100%; display:grid; grid-template-columns:minmax(230px,1.2fr) minmax(250px,1fr) 90px; align-items:center; gap:18px; padding:16px 18px; border:1px solid #ded8cb; border-radius:13px; background:#fff; color:var(--ink); text-align:left; font:inherit; }
.followup-line:active { transform:translateY(1px); }
.followup-line span { min-width:0; }
.followup-line strong,.followup-line small { display:block; overflow-wrap:anywhere; }
.followup-line small { margin-top:4px; color:var(--muted); }
.followup-line__patient > strong { font-size:1rem; }
.followup-delay { justify-self:end; padding:7px 10px; border-radius:999px; background:#fff4d8; color:#735510; font-weight:850; text-align:center; }
.followup-pagination { display:flex; justify-content:center; align-items:center; gap:14px; margin:20px 0; }
.followup-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.followup-detail-head h2 { margin:0; }
.followup-detail-head > strong { max-width:45%; padding:8px 12px; border-radius:10px; background:#fff4d8; color:#735510; text-align:right; }
.followup-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.followup-detail-grid p { margin:0; padding:13px 15px; border:1px solid var(--line); border-radius:12px; }
.followup-detail-grid span,.followup-detail-grid strong { display:block; }
.followup-detail-grid span { margin-bottom:4px; color:var(--muted); font-size:.76rem; }
@media(max-width:700px) {
  .followup-summary-groups { grid-template-columns:1fr; }
  .followup-summary--group { grid-template-columns:1fr; }
  .followup-summary-groups--commercial .followup-summary--group { grid-template-columns:1fr; }
  .followup-status-filter > div { grid-template-columns:1fr; }
  .followup-reason-guide div { grid-template-columns:1fr; }
  .followup-chart { grid-template-columns:1fr; }
  .followup-tabs,.followup-detail-grid { grid-template-columns:1fr; }
  .followup-line { grid-template-columns:1fr; gap:8px; }
  .followup-delay { justify-self:start; }
  .followup-detail-head { display:block; }
  .followup-detail-head > strong { display:block; max-width:none; margin-top:12px; text-align:left; }
}

/* Validation: highlight the exact field without clearing its value. */
#app .form-card .field [aria-invalid="true"] { border: 2px solid #b53e24 !important; background-color: #fff1e8 !important; box-shadow: 0 0 0 2px #b53e2420 !important; }
.validation-field-message { margin: 8px 0 0; color: #a3321c; font-size: 0.94rem; line-height: 1.4; }

/* Inline validation and the prescription warning use existing clinic colours. */
#app .validation-group-invalid { border-radius: 10px; outline: 2px solid #b53e24; outline-offset: 3px; background-color: #fff1e8; }
.prescription-advice { flex-direction: column; gap: 6px; }
.prescription-advice.visit-alert--active { border: 2px solid #b53e24; border-left-width: 6px; background: #fff1e8; color: #80301d; }
.prescription-advice.visit-alert--active strong { color: #80301d; }
.activity-report{max-width:1200px;margin-inline:auto}
.activity-filters{display:grid;grid-template-columns:1fr 1fr 1.35fr auto;gap:18px;align-items:end;background:#fff;padding:24px;border:1px solid #d9e4df;border-radius:20px}
.activity-filters>.field{grid-column:auto;min-width:0}
.activity-report [data-activity-message]:empty{display:none}
.activity-shortcuts{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.activity-shortcuts .button{min-height:44px;padding:10px 20px}
.activity-shortcuts span,.activity-updated,.activity-note{color:#556960;font-size:.95rem;line-height:1.5}
.activity-period-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:28px}
.activity-period-heading h2{font-size:1.65rem;margin:0}
.activity-period-heading p{color:#556960}
.activity-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.activity-counters>div{display:flex;flex-direction:column;gap:12px;background:#edf6f0;border:1px solid #b8d4c5;border-radius:16px;padding:19px}
.activity-counters span{color:#375b49;font-size:.95rem}
.activity-counters strong{font-size:2rem;color:#176c5d}
.activity-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.activity-report table{border-collapse:collapse;width:100%;font-size:.95rem;background:#fff}
.activity-report caption{text-align:left;font-size:1.25rem;font-weight:700;margin:0 0 14px}
.activity-report th,.activity-report td{padding:15px 12px;border-bottom:1px solid #e0e7e2;text-align:left;vertical-align:top;line-height:1.35}
.activity-report thead{background:#edf3ef;color:#285a43}
.activity-report th{font-weight:700}
.activity-staff-table th:not(:first-child),.activity-staff-table td{text-align:center}
.activity-report tbody tr:nth-child(even){background:#f9fbfa}
.activity-patients{margin-top:30px}
.activity-patients>h2{font-size:1.5rem;margin:0 0 8px}
.activity-patients>p{color:#556960;margin:0 0 18px}
.activity-patient{background:#fff;border:1px solid #dbe5df;border-radius:14px;margin:10px 0;overflow:hidden}
.activity-patient>summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;padding:20px;min-height:76px;list-style:none}
.activity-patient>summary::-webkit-details-marker{display:none}
.activity-patient>summary:after{content:"+";font-size:1.7rem;color:#176c5d}
.activity-patient[open]>summary:after{content:"−"}
.activity-patient>summary>div{min-width:210px;flex:1}
.activity-patient strong{display:block;font-size:1.1rem;color:#244d3b}
.activity-patient small{display:block;color:#64756c;margin-top:6px}
.activity-patient>summary>span{flex:1.2;color:#53665c;font-size:.95rem;line-height:1.5}
.activity-detail-table{min-width:690px}
.activity-patient[open]>summary{background:#f0f6f2}
.activity-pagination{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:15px 0}
.activity-empty{padding:34px;background:#fff;border:1px solid #dbe5df;border-radius:14px}
@media(max-width:760px){.activity-filters{grid-template-columns:1fr 1fr;padding:18px}.activity-filters>.button{height:52px}.activity-counters{grid-template-columns:repeat(2,minmax(0,1fr))}.activity-period-heading{align-items:flex-start}.activity-period-heading .button{max-width:155px}.activity-patient>summary{gap:12px;flex-wrap:wrap}.activity-patient>summary>div{min-width:65%}.activity-patient>summary>span{flex-basis:90%;order:2}.activity-report .form-header{align-items:flex-start}}

/* Commercial history is a read-only view. The chart keeps its 125px plot. */
.followup-chart--dual .followup-chart__legend { min-width:0; }
.followup-chart--dual .followup-chart__key { font-size:.70rem; margin-top:4px; line-height:1.3; }
.followup-chart__key::before { content:""; display:inline-block; width:20px; border-top:3px solid #b78a00; margin-right:5px; vertical-align:middle; }
.followup-chart__key--appointments::before { border-color:#177a67; border-top-style:dashed; }
.followup-chart--dual #followup-chart-info { margin:6px 0 0; font-size:.72rem; line-height:1.3; font-weight:700; min-height:2.6em; }
.followup-chart--dual .followup-chart__hint { font-size:.65rem; margin-top:3px; }
.followup-chart__ticks { font-size:13px; }
.followup-chart--dual .followup-chart__axis { fill:none; }
#followup-history-error:empty { display:none; }
.followup-chart [data-followup-month] { cursor:pointer; }
.followup-chart [data-followup-month]:focus { outline:none; }
.followup-chart [data-followup-month]:focus rect { fill:rgb(23 122 103 / 9%); stroke:#177a67; stroke-width:1; }
.followup-chart [data-followup-month][aria-pressed="true"] text { font-weight:850; fill:#252d29; }
.followup-history-filter { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.followup-history-filter label { flex:1 1 180px; font-weight:700; }
.followup-history-filter .input,.followup-history-search .input { display:block; width:100%; margin-top:5px; }
.followup-history-search { display:block; margin:14px 0; font-weight:700; }
.followup-history-entry { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; overflow-wrap:anywhere; }
.followup-history-entry__head { display:flex; gap:12px; justify-content:space-between; align-items:baseline; }
.followup-history-entry__head span { color:var(--muted); font-size:.85rem; }
.followup-history-entry p { margin:8px 0 0; }
.followup-history-entry__notes { white-space:pre-wrap; }
@media(max-width:700px) {
 .followup-delay-heading { flex-wrap:wrap; }
 .followup-history-entry__head { display:block; }
 .followup-history-entry__head span { display:block; margin-top:5px; }
}
