/* ==========================================================================
   PsiJulia — Components
   Cards, Buttons, Inputs, FAB, Badges, Avatars, BottomSheet, Modal,
   Toast, Skeleton, Timeline, Editor, EmptyState, SegmentedControl
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
  white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn--block { width: 100%; }
.btn--lg { height: 54px; font-size: var(--fs-lg); }
.btn--sm { height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--primary { background: var(--brand); color: var(--text-on-brand); box-shadow: var(--sh-brand); }
.btn--primary:active { background: var(--brand-hover); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--soft { background: var(--brand-soft); color: var(--brand); }
.btn--ghost { background: transparent; color: var(--text-base); }
.btn--ghost:active { background: var(--bg-surface-2); }
.btn--outline { background: var(--bg-surface); color: var(--text-strong); border: 1px solid var(--border-strong); }
.btn--danger { background: var(--c-danger-500); color: #fff; }
.btn .ico { width: 20px; height: 20px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-sm);
}
.card--flat { box-shadow: none; }
.card--pad-0 { padding: 0; }
.card--interactive { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.card--interactive:active { transform: scale(.985); box-shadow: var(--sh-md); }
.card__header { display: flex; align-items: center; gap: var(--sp-3); }
.card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.card__sub { font-size: var(--fs-sm); color: var(--text-muted); }

/* List row (tappable) */
.list-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--bg-surface);
  transition: background var(--dur-fast);
}
.list-row:active { background: var(--bg-surface-2); }
.list-row + .list-row { border-top: 1px solid var(--border); }
.list-row__chevron { color: var(--text-faint); width: 18px; height: 18px; margin-left: auto; }

/* ---------- Avatar ---------- */
.avatar {
  width: 44px; height: 44px; border-radius: var(--r-full); flex: none;
  display: grid; place-items: center; font-weight: var(--fw-semibold);
  color: #fff; font-size: var(--fs-md); letter-spacing: .02em;
  background: linear-gradient(135deg, var(--c-brand-500), var(--c-accent-500));
}
.avatar--sm { width: 34px; height: 34px; font-size: var(--fs-sm); }
.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-xl); }

/* ---------- Badge / Pill ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4;
  background: var(--bg-surface-2); color: var(--text-base);
}
.badge--brand { background: var(--brand-soft); color: var(--brand); }
.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--success { background: color-mix(in srgb, var(--c-success-500) 16%, transparent); color: var(--c-success-600); }
.badge--warning { background: color-mix(in srgb, var(--c-warning-500) 18%, transparent); color: var(--c-warning-500); }
.badge--danger { background: color-mix(in srgb, var(--c-danger-500) 16%, transparent); color: var(--c-danger-600); }
.badge--draft { background: color-mix(in srgb, var(--c-warning-500) 20%, transparent); color: #b45309; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-base); }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field__error { font-size: var(--fs-xs); color: var(--c-danger-500); }
.input, .textarea, .select {
  width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  background: var(--bg-surface); color: var(--text-strong);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-md); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  appearance: none;
}
.textarea { padding: var(--sp-3) var(--sp-4); min-height: 110px; resize: vertical; line-height: var(--lh-base); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field--invalid .input, .field--invalid .textarea, .field--invalid .select { border-color: var(--c-danger-500); }
.input-icon { position: relative; }
.input-icon .ico { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-faint); pointer-events: none; }
.input-icon .input { padding-left: 44px; }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: var(--sp-4); top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.select { padding-right: 40px; }

/* ---------- Segmented control / tabs ---------- */
.segmented { display: flex; background: var(--bg-surface-2); border-radius: var(--r-md); padding: 4px; gap: 2px; }
.segmented__item { flex: 1; height: 38px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); display: grid; place-items: center; transition: all var(--dur-fast); }
.segmented__item[aria-selected="true"] { background: var(--bg-surface); color: var(--text-strong); box-shadow: var(--sh-sm); }

/* ---------- FAB ---------- */
.fab {
  position: absolute; right: var(--sp-4);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sp-4));
  z-index: var(--z-fab);
  height: 56px; min-width: 56px; padding: 0 var(--sp-5);
  border-radius: var(--r-full); display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--brand); color: #fff; font-weight: var(--fw-semibold);
  box-shadow: var(--sh-brand); transition: transform var(--dur-base) var(--ease-spring);
}
.fab:active { transform: scale(.92); }
.fab .ico { width: 24px; height: 24px; }
.fab--enter { animation: fab-in var(--dur-slow) var(--ease-spring) both; }
@keyframes fab-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Overlay ---------- */
.overlay {
  position: absolute; inset: 0; z-index: var(--z-sheet);
  background: var(--bg-overlay); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.overlay.is-open { opacity: 1; }

/* ---------- Bottom Sheet ---------- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  background: var(--bg-elevated); border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--sh-lg); padding: var(--sp-3) var(--sp-4) calc(var(--safe-bottom) + var(--sp-5));
  transform: translateY(100%); transition: transform var(--dur-slow) var(--ease-out);
  max-height: 88%; overflow-y: auto;
}
.sheet.is-open { transform: none; }
.sheet__grip { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--border-strong); margin: 4px auto var(--sp-3); }
.sheet__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--sp-3); }

/* ---------- Modal (center) ---------- */
.modal {
  position: absolute; left: 50%; top: 50%; z-index: var(--z-modal);
  transform: translate(-50%, -46%) scale(.96); opacity: 0;
  width: calc(100% - var(--sp-8)); max-width: 420px;
  background: var(--bg-elevated); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: var(--sp-5);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--sp-2); }
.modal__body { color: var(--text-base); font-size: var(--fs-base); }
.modal__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.modal__actions .btn { flex: 1; }

/* ---------- Toast ---------- */
.toast-stack {
  position: absolute; left: var(--sp-4); right: var(--sp-4);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sp-3));
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--c-n-900); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: var(--fs-sm);
  animation: toast-in var(--dur-base) var(--ease-spring) both; pointer-events: auto;
}
:root[data-theme="dark"] .toast { background: var(--c-n-700); }
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-in-out) both; }
.toast__ico { width: 20px; height: 20px; flex: none; }
.toast--success .toast__ico { color: var(--c-success-500); }
.toast--error .toast__ico { color: var(--c-danger-500); }
.toast--info .toast__ico { color: var(--c-info-500); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Skeleton ---------- */
.skel { background: linear-gradient(100deg, var(--bg-surface-2) 30%, var(--border) 50%, var(--bg-surface-2) 70%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; border-radius: var(--r-sm); }
.skel--text { height: 12px; margin: 6px 0; }
.skel--title { height: 18px; width: 60%; }
.skel--avatar { width: 44px; height: 44px; border-radius: var(--r-full); }
.skel--card { height: 84px; border-radius: var(--r-lg); }
.skel--line-80 { width: 80%; } .skel--line-50 { width: 50%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Timeline (sessions) ---------- */
.timeline { position: relative; padding-left: var(--sp-6); }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline__item { position: relative; padding-bottom: var(--sp-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: calc(-1 * var(--sp-6) + 2px); top: 4px; width: 16px; height: 16px; border-radius: var(--r-full); background: var(--bg-surface); border: 3px solid var(--brand); }
.timeline__item--accent .timeline__dot { border-color: var(--accent); }
.timeline__date { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); margin-bottom: 4px; }
.timeline__card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--sh-sm); }

/* ---------- Report editor ---------- */
.editor { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.editor__toolbar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--bg-surface-2); position: sticky; top: 0; z-index: 2; overflow-x: auto; }
.editor__tool { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-base); flex: none; transition: background var(--dur-fast); }
.editor__tool:active, .editor__tool.is-active { background: var(--brand-soft); color: var(--brand); }
.editor__area { min-height: 220px; padding: var(--sp-4); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--text-strong); outline: none; }
.editor__area:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.editor__section { margin-bottom: var(--sp-4); }
.editor__section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--brand); font-weight: var(--fw-semibold); margin-bottom: 4px; }
/* traceability marker for JulIA generated passages */
.trace { background: var(--accent-soft); border-bottom: 2px dotted var(--accent); cursor: help; border-radius: 3px; padding: 0 1px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); }
.empty__ico { width: 56px; height: 56px; margin: 0 auto var(--sp-3); color: var(--text-faint); }
.empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-base); margin-bottom: 4px; }
.empty__desc { font-size: var(--fs-sm); max-width: 280px; margin: 0 auto var(--sp-4); }

/* ---------- Search bar ---------- */
.searchbar { display: flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-3); background: var(--bg-surface-2); border-radius: var(--r-md); }
.searchbar .ico { width: 20px; height: 20px; color: var(--text-faint); }
.searchbar input { flex: 1; background: none; border: none; outline: none; font-size: var(--fs-base); color: var(--text-strong); }

/* ---------- Stepper (report flow) ---------- */
.stepper { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.stepper__step { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); background: var(--bg-surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; flex: none; }
.stepper__step.is-active { background: var(--brand); color: #fff; }
.stepper__step.is-done { background: color-mix(in srgb, var(--c-success-500) 18%, transparent); color: var(--c-success-600); }

/* editor+badge icon fix */
.editor__tool .ico, .editor__tool svg { width: 20px; height: 20px; }
.badge .ico, .badge svg { width: 14px; height: 14px; }
.list-row > span:first-child .ico, .list-row > span:first-child svg { width: 22px; height: 22px; }
.btn .ico, .btn svg { width: 20px; height: 20px; }
.fab .ico, .fab svg { width: 24px; height: 24px; }
.app-header__back .ico, .app-header__action .ico { width: 22px; height: 22px; }
.empty__ico svg { width: 56px; height: 56px; }
.toast__ico svg { width: 20px; height: 20px; }

/* Laudo view screen */
.laudo-actions{display:flex;flex-wrap:wrap;gap:.5rem;}
.laudo-actions .btn{flex:1 1 auto;min-width:130px;justify-content:center;}
.laudo-frame{overflow:hidden;padding:0;}
.laudo-frame__doc{width:100%;height:75vh;border:0;display:block;background:#fff;}
@media (max-width:600px){.laudo-frame__doc{height:65vh;}}
@media print{.app-header,.app-nav,.laudo-actions,.bottom-nav,.card__title,.badge{display:none !important;}.laudo-frame__doc{height:auto;}}


/* Laudo inline editor */
.laudo-edit-field{width:100%;box-sizing:border-box;border:1px solid var(--border,#e2e4ea);border-radius:12px;padding:12px 14px;font:inherit;line-height:1.5;color:inherit;background:var(--surface,#fff);resize:vertical;min-height:120px;}
.laudo-edit-field:focus{outline:none;border-color:var(--brand,#5b4bdb);box-shadow:0 0 0 3px rgba(91,75,219,.15);}
.laudo-edit-card .editor__section-label{font-weight:600;font-size:.9rem;color:var(--brand,#5b4bdb);}
.laudo-actions{flex-wrap:wrap;}

.perfil-logo-preview{display:block;max-height:120px;max-width:220px;object-fit:contain;border:1px solid var(--border,#e2e4ea);border-radius:12px;padding:8px;background:#fff;}


/* Laudo edit - dynamic sections */
.laudo-edit-head{margin-bottom:16px}
.laudo-edit-head h2{margin:0 0 4px}
.laudo-extra-card{border:1px solid var(--border,#e3e3ef)}
.laudo-extra-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.laudo-extra-title{flex:1;font-weight:600;font-size:.95rem;padding:9px 12px;border:1px solid var(--border,#d8d8e4);border-radius:8px;background:#fff;color:inherit}
.laudo-extra-title:focus{outline:none;border-color:var(--primary,#5b4fe0)}
.laudo-extra-del{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border,#e3e3ef);background:#fff;border-radius:8px;cursor:pointer;color:#b3261e;transition:.18s}
.laudo-extra-del:hover{background:#fdecea;border-color:#f3c2bd}
.laudo-extra-del svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.laudo-add-btn{display:inline-flex;align-items:center;gap:8px;margin:6px 0 18px}
.laudo-add-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.laudo-edit-actions{display:flex;gap:12px;align-items:center;margin-top:8px;padding-bottom:24px}