/* ==========================================================================
   ScribeClin - Fichas Estruturadas
   Estilos do form-engine, da lista de pacientes e da linha do tempo.
   Usa os mesmos tokens de design definidos em style.css.
   ========================================================================== */

/* --- Sidebar: busca e novo paciente --- */
.patient-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.patient-search-bar i { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.patient-search-bar input {
    background: none; border: none; outline: none;
    color: var(--text-main); font-family: var(--font-sans);
    font-size: 0.82rem; width: 100%;
}
.btn-new-patient { margin-bottom: 12px; }
.btn-xs {
    padding: 4px 9px; font-size: 0.72rem; gap: 5px;
    border-radius: 6px; line-height: 1.4;
}
.btn-xs i { width: 13px; height: 13px; }

/* --- Linha do tempo de registros --- */
.record-timeline {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}
.timeline-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.timeline-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted);
}
.timeline-title i { width: 14px; height: 14px; }
.timeline-items { display: flex; flex-wrap: wrap; gap: 7px; }
.timeline-item {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 7px 11px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: var(--transition-smooth);
}
.timeline-item:hover { border-color: rgba(var(--color-primary-rgb), 0.5); transform: translateY(-1px); }
.timeline-item.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb), 0.35);
}
.timeline-kind {
    font-size: 0.72rem; font-weight: 600; color: var(--text-main);
    padding: 2px 7px; border-radius: 5px;
    background: rgba(var(--color-primary-rgb), 0.12);
}
.timeline-kind-evolucao { background: rgba(59, 130, 246, 0.15); }
.timeline-kind-soap { background: rgba(112, 0, 255, 0.15); }
.timeline-date { font-size: 0.72rem; color: var(--text-muted); }
.timeline-del {
    color: var(--text-muted); font-size: 0.95rem; line-height: 1;
    padding: 0 2px; border-radius: 4px; opacity: 0;
    transition: var(--transition-smooth);
}
.timeline-item:hover .timeline-del { opacity: 1; }
.timeline-del:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.timeline-empty { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }

/* --- Mini gráfico de progressão da EVA --- */
.eva-chart { margin-top: 14px; color: var(--color-primary); }
.eva-chart-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.74rem; color: var(--text-muted); margin-bottom: 6px;
}
.eva-chart-head span { display: flex; align-items: center; gap: 6px; }
.eva-chart-head i { width: 13px; height: 13px; }
.eva-chart-trend { font-weight: 600; }
.eva-chart-trend.good { color: var(--status-ready); }
.eva-chart-trend.bad { color: var(--status-recording); }
.eva-spark { width: 100%; height: 44px; overflow: visible; }

/* --- Banner de bandeiras vermelhas --- */
.red-flags-banner {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(239, 68, 68, 0.09);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.red-flags-banner > i { width: 18px; height: 18px; color: #ef4444; flex-shrink: 0; margin-top: 1px; }
.red-flags-banner strong { color: #fca5a5; font-size: 0.82rem; }
.red-flags-banner ul { margin: 5px 0 0; padding-left: 16px; }
.red-flags-banner li { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }

/* --- Barra de ferramentas da ficha --- */
.ficha-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.ficha-completion { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.completion-bar {
    flex: 1; height: 6px; background: var(--bg-tertiary);
    border-radius: 99px; overflow: hidden; max-width: 260px;
}
.completion-bar span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 99px; transition: width 0.35s ease;
}
#completion-label { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.ficha-toolbar-actions { display: flex; gap: 7px; }

/* --- Grupos (accordion) --- */
.ficha-container { display: flex; flex-direction: column; gap: 10px; }
.ff-group {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    overflow: hidden;
}
.ff-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px; cursor: pointer;
    transition: var(--transition-smooth);
    user-select: none;
}
.ff-group-header:hover { background: rgba(255, 255, 255, 0.02); }
.ff-group-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.ff-group-icon { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }
.ff-group-header h4 {
    flex: 1; font-family: var(--font-display);
    font-size: 0.9rem; font-weight: 600; color: var(--text-main);
}
.ff-group-progress {
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    background: var(--bg-secondary); padding: 2px 8px; border-radius: 99px;
    border: 1px solid var(--border-glass);
}
.ff-group-progress.is-complete { color: var(--status-ready); border-color: rgba(16, 185, 129, 0.4); }
.ff-group-progress.is-empty { opacity: 0.5; }
.ff-group-chevron {
    width: 16px; height: 16px; color: var(--text-muted);
    transition: transform 0.25s ease;
}
.ff-group[data-open] .ff-group-chevron { transform: rotate(180deg); }
.ff-group-body { display: none; padding: 0 15px 16px; }
.ff-group[data-open] .ff-group-body { display: block; }

.ff-note {
    font-size: 0.76rem; color: var(--text-muted); line-height: 1.6;
    background: rgba(var(--color-primary-rgb), 0.06);
    border-left: 2px solid rgba(var(--color-primary-rgb), 0.5);
    padding: 8px 11px; border-radius: 0 6px 6px 0; margin-bottom: 14px;
}

/* --- Grade de campos --- */
.ff-fields {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
}
.ff-field { grid-column: span 12; position: relative; }
.ff-w-sm { grid-column: span 3; }
.ff-w-md { grid-column: span 4; }
.ff-w-lg { grid-column: span 6; }
.ff-w-full { grid-column: span 12; }
@media (max-width: 1100px) {
    .ff-w-sm { grid-column: span 6; }
    .ff-w-md, .ff-w-lg { grid-column: span 12; }
}

.ff-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 500; color: var(--text-muted);
    margin-bottom: 6px; line-height: 1.4;
}
.ff-ai-badge { width: 12px; height: 12px; color: var(--color-secondary); opacity: 0.65; flex-shrink: 0; }
.field-ref { display: block; font-size: 0.7rem; color: var(--text-muted); opacity: 0.65; margin-top: 4px; }
.field-input-wrap { position: relative; display: flex; align-items: center; }
.field-unit {
    position: absolute; right: 11px; font-size: 0.74rem;
    color: var(--text-muted); pointer-events: none;
}

.ff-input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    transition: var(--transition-smooth);
}
.ff-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
.ff-textarea { resize: vertical; line-height: 1.6; min-height: 62px; }
select.ff-input { cursor: pointer; }
input[type="date"].ff-input::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; }

/* Destaque dos campos preenchidos pela IA (pendentes de revisão) */
.ff-field.ai-filled .ff-input,
.ff-field.ai-filled .ff-binary,
.ff-field.ai-filled .ff-eva {
    border-color: rgba(112, 0, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(112, 0, 255, 0.09);
}
.ff-field.ai-filled .ff-label::after {
    content: 'IA · revisar';
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
    color: #c4b5fd; background: rgba(112, 0, 255, 0.16);
    padding: 1px 6px; border-radius: 99px;
}

/* --- Chips (radio / checkbox) --- */
.ff-radio-row, .ff-check-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ff-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 99px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: var(--transition-smooth);
    user-select: none;
}
.ff-chip:hover { border-color: rgba(var(--color-primary-rgb), 0.45); color: var(--text-main); }
.ff-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ff-chip:has(input:checked) {
    background: rgba(var(--color-primary-rgb), 0.14);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}
.ff-chip-yes:has(input:checked) {
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
}
.ff-chip-no:has(input:checked) {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.6);
    color: #6ee7b7;
}
.ff-chip:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ff-clear {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 0.7rem;
    text-decoration: underline; opacity: 0.5;
    font-family: var(--font-sans); padding: 2px 4px;
}
.ff-clear:hover { opacity: 1; color: var(--text-main); }

/* --- Campos binários (Sim/Não, Positivo/Negativo) --- */
.ff-binary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 11px 12px;
    transition: var(--transition-smooth);
}
.ff-obs {
    width: 100%; margin-top: 9px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 7px; padding: 7px 10px;
    color: var(--text-main); font-family: var(--font-sans); font-size: 0.79rem;
}
.ff-obs:focus { outline: none; border-color: var(--color-primary); }
.ff-extra { margin-top: 9px; }
.ff-extra label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 4px; }
.ff-extra input, .ff-extra textarea {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 7px; padding: 7px 10px;
    color: var(--text-main); font-family: var(--font-sans); font-size: 0.79rem;
    resize: vertical;
}
.ff-extra input:focus, .ff-extra textarea:focus { outline: none; border-color: var(--color-primary); }

/* --- EVA --- */
.ff-eva {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 12px 14px;
    transition: var(--transition-smooth);
}
.ff-eva-range {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 7px; border-radius: 99px; outline: none; cursor: pointer;
    background: linear-gradient(90deg, var(--eva-color, #94a3b8) var(--eva-pct, 0%), var(--bg-tertiary) var(--eva-pct, 0%));
}
.ff-eva-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 3px solid var(--eva-color, #94a3b8);
    cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ff-eva-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 3px solid var(--eva-color, #94a3b8); cursor: pointer;
}
.ff-eva-readout { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.ff-eva-value {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; border-radius: 8px;
    font-weight: 700; font-size: 0.92rem; color: #fff;
    background: #94a3b8; font-family: var(--font-display);
}
.ff-eva-label { font-size: 0.76rem; color: var(--text-muted); }

/* --- Mapa de dores --- */
.ff-painmap {
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 10px; padding: 14px;
}
.painmap-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.painmap-hint { font-size: 0.72rem; color: var(--text-muted); }
.painmap-intensity {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem; color: var(--text-muted);
}
.painmap-intensity input { width: 96px; accent-color: var(--color-primary); cursor: pointer; }
.painmap-intensity b { color: var(--text-main); min-width: 14px; }
.painmap-views { display: flex; gap: 18px; justify-content: center; }
.painmap-views figure { margin: 0; text-align: center; }
.painmap-svg {
    width: 132px; height: 224px; cursor: crosshair;
    background: var(--bg-tertiary); border-radius: 8px;
}
.painmap-views figcaption { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; }
.painmap-marker { cursor: pointer; }
.painmap-marker:hover circle { stroke: #ef4444; stroke-width: 2.5; }
.painmap-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.painmap-tag {
    font-size: 0.7rem; color: var(--text-muted);
    border: 1px solid; border-radius: 99px; padding: 2px 9px;
}
.painmap-empty { font-size: 0.72rem; color: var(--text-muted); font-style: italic; opacity: 0.7; }

/* --- Grade muscular --- */
.ff-muscles {
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 10px; padding: 6px 12px 12px;
}
.muscles-head, .muscles-row {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr;
    gap: 10px; align-items: center;
}
.muscles-head {
    padding: 9px 0; font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
    border-bottom: 1px solid var(--border-glass);
}
.muscles-row { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.muscles-row:last-child { border-bottom: none; }
.muscles-name { font-size: 0.79rem; color: var(--text-main); }
.muscles-row select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 6px; padding: 5px 7px;
    color: var(--text-main); font-family: var(--font-sans);
    font-size: 0.75rem; cursor: pointer; width: 100%;
}
.muscles-row select:focus { outline: none; border-color: var(--color-primary); }
.muscles-na { font-size: 0.75rem; color: var(--text-muted); opacity: 0.4; text-align: center; }

/* --- Achados por lado --- */
.ff-sides {
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 10px; padding: 12px;
    display: flex; flex-direction: column; gap: 9px;
}
.sides-row {
    display: grid; grid-template-columns: 1.1fr auto auto 1.4fr;
    gap: 9px; align-items: center;
}
.sides-name { font-size: 0.79rem; color: var(--text-main); }
.sides-row .ff-obs { margin-top: 0; }
@media (max-width: 900px) {
    .sides-row { grid-template-columns: 1fr; }
}

/* --- IMC calculado --- */
.ff-imc {
    display: flex; align-items: center; gap: 9px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-glass);
    border-radius: 8px; padding: 9px 11px; min-height: 38px;
}
.imc-value { font-weight: 700; color: var(--text-main); font-family: var(--font-display); font-size: 0.88rem; }
.imc-class { font-size: 0.72rem; padding: 2px 8px; border-radius: 99px; }
.imc-ok { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.imc-warn { background: rgba(245, 158, 11, 0.14); color: #fcd34d; }
.imc-bad { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }

/* --- Sugestões de CID dentro da ficha --- */
.ff-cid-suggestions {
    position: absolute; z-index: 30; left: 0; right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-glass);
    border-radius: 8px; margin-top: 4px;
    box-shadow: var(--shadow-premium);
    overflow: hidden;
}