/* ============================================================================
   Evolução Clínica — Shared Components v2 (Medical Modernism)
   Depends on design-tokens.css. Load order: tokens → components → app
   ============================================================================ */

/* ── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg-void);
    background-image:
        radial-gradient(ellipse 120% 60% at 50% -10%, rgba(8, 145, 178, 0.08), transparent 55%),
        radial-gradient(ellipse 80% 50% at 50% 120%, rgba(5, 150, 105, 0.05), transparent 55%);
    background-attachment: fixed;
    min-height: 100dvh;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); }

img, svg, video {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

/* ── FOCUS VISIBLE (accessibility) ─────────────────────────────────────── */
:focus { outline: none; }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-2);
}

/* ── TYPOGRAPHY UTILITIES ──────────────────────────────────────────────── */
.display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-tight);
}
.display-1 { font-size: clamp(2.25rem, 5vw + 1rem, var(--fs-4xl)); }
.display-2 { font-size: clamp(1.75rem, 4vw + 0.5rem, var(--fs-3xl)); }
.display-3 { font-size: clamp(1.5rem, 3vw + 0.25rem, var(--fs-2xl)); }

.heading-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.heading-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.heading-md { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-snug); }

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--text-3);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.text-muted { color: var(--text-3); }
.text-soft  { color: var(--text-2); }
.text-accent { color: var(--accent); }
.text-context { color: var(--context); }
.text-danger  { color: var(--triage-red-soft); }
.text-warning { color: var(--triage-amber-soft); }
.text-success { color: var(--triage-green-soft); }
.text-center  { text-align: center; }
.text-nowrap  { white-space: nowrap; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── ICON WRAPPER ──────────────────────────────────────────────────────── */
.icon {
    display: inline-block;
    width: var(--icon-md);
    height: var(--icon-md);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.icon-xs  { width: var(--icon-xs); height: var(--icon-xs); }
.icon-sm  { width: var(--icon-sm); height: var(--icon-sm); }
.icon-lg  { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl  { width: var(--icon-xl); height: var(--icon-xl); }
.icon-2xl { width: var(--icon-2xl); height: var(--icon-2xl); stroke-width: 1.5; }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--touch-min);
    padding: 0 var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    cursor: pointer;
    user-select: none;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        transform var(--dur-fast) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out);
    text-decoration: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.btn:hover:not(:disabled) {
    background: var(--bg-peak);
    border-color: var(--border-strong);
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn-primary {
    color: var(--accent-on);
    background: var(--accent);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(8, 145, 178, 0.24);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-lift);
    box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 12px 32px rgba(8, 145, 178, 0.34);
}
.btn-primary:active:not(:disabled) { background: var(--accent-press); }

.btn-context {
    color: var(--context-on);
    background: var(--context);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px var(--context-glow);
}
.btn-context:hover:not(:disabled) { background: var(--context-lift); }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-2);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--bg-raised);
    color: var(--text);
}

.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-2);
}
.btn-outline:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.btn-danger {
    color: #fff;
    background: var(--triage-red);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(220, 38, 38, 0.28);
}
.btn-danger:hover:not(:disabled) { background: #EF4444; }

/* Sizes */
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-2); }
.btn-lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-md); border-radius: var(--r-4); }
.btn-icon { min-width: var(--touch-min); aspect-ratio: 1 / 1; padding: 0; }
.btn-block { width: 100%; }

/* ── CARDS ─────────────────────────────────────────────────────────────── */
.card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-4);
    overflow: hidden;
    transition:
        border-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out);
}

.card-elevated { box-shadow: var(--elev-2); }

.card-interactive {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.card-interactive:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--elev-3);
}
.card-interactive:active {
    transform: translateY(0) scale(0.995);
}
.card-interactive:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--elev-3);
}

/* Accent line on card top (optional) */
.card-accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--context-sheen);
}

.card-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.card-body { padding: var(--sp-5); }

/* ── GLASS LAYER ───────────────────────────────────────────────────────── */
.glass {
    background: var(--glass-80);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--border);
}

/* ── APP HEADER ────────────────────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: calc(var(--header-h) + env(safe-area-inset-top, 0));
    padding: env(safe-area-inset-top, 0) var(--sp-5) 0;
    background: var(--glass-80);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid var(--divider);
}

.app-header::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--context) 30%,
        var(--context) 70%,
        transparent 100%);
    opacity: 0.35;
    pointer-events: none;
}

.app-header-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Brand mark — decorative accent inside header */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-3);
    background: var(--context-dim);
    color: var(--context);
    border: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
}
.brand-mark::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--context-sheen);
    opacity: 0.15;
    pointer-events: none;
}

/* ── INPUTS / FORMS ────────────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--text-3);
}

.input,
.textarea,
.select {
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--text);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-raised);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.input::placeholder, .textarea::placeholder { color: var(--text-4); }

.textarea {
    resize: vertical;
    min-height: 100px;
    line-height: var(--lh-base);
}

.helper-text { font-size: var(--fs-xs); color: var(--text-4); }
.error-text  { font-size: var(--fs-xs); color: var(--triage-red-soft); display: flex; align-items: center; gap: var(--sp-1); }

/* ── BADGES ────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    border-radius: var(--r-full);
    background: var(--bg-raised);
    color: var(--text-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.badge-accent  { background: var(--accent-dim);    color: var(--accent-lift);     border-color: var(--accent-border); }
.badge-context { background: var(--context-dim);   color: var(--context-lift);    border-color: var(--border-strong); }
.badge-red     { background: var(--triage-red-bg); color: var(--triage-red-soft); border-color: var(--triage-red-br); }
.badge-amber   { background: var(--triage-amber-bg); color: var(--triage-amber-soft); border-color: var(--triage-amber-br); }
.badge-blue    { background: var(--triage-blue-bg); color: var(--triage-blue-soft); border-color: var(--triage-blue-br); }
.badge-green   { background: var(--triage-green-bg); color: var(--triage-green-soft); border-color: var(--triage-green-br); }

/* ── TRIAGE (ícone + cor — não só cor) ─────────────────────────────────── */
.triage-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--r-3);
    border: 1px solid transparent;
    min-height: 40px;
}
.triage-flag .icon { width: var(--icon-sm); height: var(--icon-sm); }
.triage-flag-red    { color: var(--triage-red-soft);   background: var(--triage-red-bg);   border-color: var(--triage-red-br); }
.triage-flag-amber  { color: var(--triage-amber-soft); background: var(--triage-amber-bg); border-color: var(--triage-amber-br); }
.triage-flag-blue   { color: var(--triage-blue-soft);  background: var(--triage-blue-bg);  border-color: var(--triage-blue-br); }
.triage-flag-green  { color: var(--triage-green-soft); background: var(--triage-green-bg); border-color: var(--triage-green-br); }

/* Stripe indicator on patient rows */
.triage-stripe {
    border-left: 4px solid var(--border);
    padding-left: var(--sp-4);
}
.triage-stripe-red    { border-left-color: var(--triage-red); }
.triage-stripe-amber  { border-left-color: var(--triage-amber); }
.triage-stripe-blue   { border-left-color: var(--triage-blue); }
.triage-stripe-green  { border-left-color: var(--triage-green); }

/* Pulsing dot indicator */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: currentColor;
    animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

.is-pulsing { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.92); }
}

/* ── FAB ───────────────────────────────────────────────────────────────── */
.fab {
    position: fixed;
    right: var(--sp-5);
    bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0));
    width: 60px;
    height: 60px;
    border-radius: var(--r-full);
    background: var(--context-sheen);
    color: var(--context-on);
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 28px var(--context-glow), 0 2px 4px rgba(0,0,0,0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fab);
    transition:
        transform var(--dur-base) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px var(--context-glow), 0 4px 8px rgba(0,0,0,0.38);
}
.fab:active { transform: scale(0.92); }
.fab:focus-visible { box-shadow: var(--focus-ring), 0 10px 28px var(--context-glow); }
.fab .icon { width: 26px; height: 26px; stroke-width: 2.5; }

/* ── BOTTOM SHEET (action sheet) ───────────────────────────────────────── */
.bottom-sheet {
    position: fixed;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
    background: var(--glass-90);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: var(--r-5);
    box-shadow: var(--elev-4);
    padding: var(--sp-3);
    z-index: var(--z-fab);
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: space-between;
}

/* ── MODAL / DIALOG ────────────────────────────────────────────────────── */
dialog.modal, .modal {
    border: 1px solid var(--border);
    border-radius: var(--r-5);
    background: var(--bg-surface);
    color: var(--text);
    box-shadow: var(--elev-4);
    padding: 0;
    width: min(92vw, 480px);
    max-height: 88dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
dialog.modal::backdrop {
    background: rgba(5, 8, 20, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--divider);
}
.modal-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
.modal-body { padding: var(--sp-5) var(--sp-6); overflow-y: auto; flex: 1; }
.modal-footer {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--divider);
    justify-content: flex-end;
}
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text-3);
    border: none;
    cursor: pointer;
    transition: background var(--dur-base), color var(--dur-base);
}
.modal-close:hover { background: var(--bg-raised); color: var(--text); }

/* ── OFFLINE BANNER ────────────────────────────────────────────────────── */
.offline-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-banner);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    padding-top: calc(var(--sp-2) + env(safe-area-inset-top, 0));
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--triage-amber-soft);
    background: var(--triage-amber-bg);
    border-bottom: 1px solid var(--triage-amber-br);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.offline-banner[hidden] { display: none; }

/* ── EMPTY / LOADING ───────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-16) var(--sp-6);
    text-align: center;
    color: var(--text-3);
}
.empty-state .icon {
    width: 56px;
    height: 56px;
    stroke-width: 1.25;
    color: var(--text-4);
    opacity: 0.7;
}
.empty-state-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--text);
}
.empty-state-hint { font-size: var(--fs-sm); color: var(--text-4); max-width: 32ch; }

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-surface) 0%,
        var(--bg-peak) 50%,
        var(--bg-surface) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: var(--r-2);
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── TOAST ─────────────────────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
    width: min(92vw, 420px);
}
.toast {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-3);
    background: var(--glass-90);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--elev-3);
    font-size: var(--fs-sm);
    pointer-events: auto;
    animation: toast-in var(--dur-slow) var(--ease-spring);
}
.toast-success { border-left: 3px solid var(--triage-green); }
.toast-error   { border-left: 3px solid var(--triage-red); }
.toast-warning { border-left: 3px solid var(--triage-amber); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── ENTRY ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anim-enter         { animation: enter var(--dur-slow) var(--ease-spring) both; }
.anim-enter-delay-1 { animation-delay: 80ms; }
.anim-enter-delay-2 { animation-delay: 140ms; }
.anim-enter-delay-3 { animation-delay: 200ms; }
.anim-enter-delay-4 { animation-delay: 260ms; }
.anim-enter-delay-5 { animation-delay: 320ms; }

/* ── UTILITY ───────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
[hidden] { display: none !important; }

.stack > * + * { margin-top: var(--sp-3); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.stack-xl > * + * { margin-top: var(--sp-8); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-tight { gap: var(--sp-2); }
.row-wide  { gap: var(--sp-5); }
.row-wrap  { flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.spacer { flex: 1; }

.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-md { font-size: var(--fs-md); }
.fs-lg { font-size: var(--fs-lg); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }