/* ═══════════════════════════════════════════════════
   Ficha Clínica — fc.css  v1.0
   Prefijo: .fc-*
   Tokens: LUZOkit standard (--bg-*, --tx-*, --c-brand-*, --border, --font-*)
   ═══════════════════════════════════════════════════ */

/* ── Root layout ───────────────────────────────────────────── */
.fc-mod {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-body);
  overflow: hidden;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.fc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--bg-body);
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.fc-topbar-left  { display: flex; align-items: center; gap: 10px; }
.fc-topbar-right { display: flex; align-items: center; gap: 8px; }

.fc-topbar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--tx-base);
}

.fc-pending-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-brand);
  background: var(--c-brand-soft);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ── Split body ─────────────────────────────────────────────── */
.fc-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── List panel ─────────────────────────────────────────────── */
.fc-panel-list {
  width: 296px;
  flex-shrink: 0;
  border-right: 0.5px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fc-list-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Search */
.fc-list-search-wrap {
  position: relative;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border-soft);
  flex-shrink: 0;
}

.fc-list-search-ico {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tx-muted);
  pointer-events: none;
  display: flex;
}

.fc-list-search {
  width: 100%;
  padding: 7px 10px 7px 34px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-size: var(--font-sm);
  color: var(--tx-base);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.fc-list-search:focus { border-color: var(--c-brand); }

/* Filter pills */
.fc-list-filters {
  display: flex;
  gap: 4px;
  padding: 7px 12px;
  border-bottom: 0.5px solid var(--border-soft);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.fc-list-filters::-webkit-scrollbar { display: none; }

.fc-filter-pill {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  color: var(--tx-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fc-filter-pill--active {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.fc-filter-pill:hover:not(.fc-filter-pill--active) {
  background: var(--bg-hover);
}

/* List items */
.fc-list-items {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
}

.fc-list-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 2px;
  border: 0.5px solid transparent;
  transition: background 0.12s;
  outline: none;
}
.fc-list-item:hover   { background: var(--bg-hover); }
.fc-list-item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.fc-list-item--active {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-muted);
}

.fc-list-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.fc-list-item-folio {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--tx-base);
}

.fc-list-item-pac {
  font-size: var(--font-sm);
  color: var(--tx-base);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-list-item-meta {
  font-size: 11px;
  color: var(--tx-muted);
}

.fc-list-loading,
.fc-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  color: var(--tx-muted);
  font-size: var(--font-sm);
  text-align: center;
}

/* ── Status pills ───────────────────────────────────────────── */
.fc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.fc-pill-gray   { background: #f1f5f9; color: #64748b; }
.fc-pill-blue   { background: #eff6ff; color: #2563eb; }
.fc-pill-amber  { background: #fffbeb; color: #d97706; }
.fc-pill-green  { background: #f0fdf4; color: #059669; }
.fc-pill-red    { background: #fff1f2; color: #e11d48; }

/* ── Form panel ─────────────────────────────────────────────── */
.fc-panel-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
}

.fc-form-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fc-form-empty,
.fc-form-loading,
.fc-form-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--tx-muted);
  font-size: var(--font-sm);
}

.fc-form-empty-ico { opacity: 0.25; }

/* Header */
.fc-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.fc-form-header-main { display: flex; flex-direction: column; gap: 4px; }

.fc-form-folio {
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--tx-base);
}

.fc-form-pac {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-sm);
  color: var(--tx-muted);
}

.fc-form-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fc-form-date  { font-size: 11px; color: var(--tx-muted); }

.fc-status-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.fc-status-draft        { background: #f1f5f9; color: #64748b; }
.fc-status-active       { background: #eff6ff; color: #2563eb; }
.fc-status-pending_sign { background: #fffbeb; color: #d97706; }
.fc-status-signed       { background: #f0fdf4; color: #059669; }
.fc-status-voided       { background: #fff1f2; color: #e11d48; }

.fc-form-timer-slot { display: flex; align-items: center; }

/* Body (scrollable form area) */
.fc-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Field groups ───────────────────────────────────────────── */
.fc-field-group { display: flex; flex-direction: column; gap: 6px; }

.fc-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--tx-base);
  display: flex;
  align-items: center;
  gap: 5px;
}

.fc-ges-label {
  flex-direction: row;
  font-weight: 400;
  color: var(--tx-muted);
  cursor: pointer;
  margin-top: 4px;
}

.fc-textarea,
.fc-input {
  width: 100%;
  padding: 8px 12px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: var(--font-sm);
  color: var(--tx-base);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  font-family: var(--font-sans, inherit);
  line-height: 1.55;
  transition: border-color 0.15s;
}
.fc-textarea:focus, .fc-input:focus { border-color: var(--c-brand); background: var(--bg-card); }
.fc-textarea[readonly] { background: var(--bg-body); color: var(--tx-muted); resize: none; cursor: default; }
.fc-textarea--sm       { resize: none; }

/* ── Tipo pills ─────────────────────────────────────────────── */
.fc-type-pills { display: flex; gap: 5px; flex-wrap: wrap; }

.fc-type-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 500;
  border: 0.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--tx-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fc-type-pill:hover:not(:disabled):not(.fc-type-pill--active) { background: var(--bg-hover); }
.fc-type-pill--active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.fc-type-pill:disabled { opacity: 0.5; cursor: default; }

/* ── Risk pills ─────────────────────────────────────────────── */
.fc-risk-pills { display: flex; gap: 4px; flex-wrap: wrap; }

.fc-risk-pill {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  border: 0.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--tx-muted);
  cursor: pointer;
  transition: background 0.12s;
}
.fc-risk-pill:disabled { opacity: 0.5; cursor: default; }
.fc-risk-low      { background: #f0fdf4 !important; border-color: #86efac !important; color: #059669 !important; }
.fc-risk-medium   { background: #fffbeb !important; border-color: #fcd34d !important; color: #d97706 !important; }
.fc-risk-high     { background: #fff1f2 !important; border-color: #fecdd3 !important; color: #e11d48 !important; }
.fc-risk-critical { background: #7f1d1d !important; border-color: #7f1d1d !important; color: #fff    !important; }

/* ── CIE-11 ─────────────────────────────────────────────────── */
.fc-cie11-wrap   { position: relative; }

.fc-cie11-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.fc-cie11-ico {
  position: absolute;
  left: 10px;
  color: var(--tx-muted);
  pointer-events: none;
  display: flex;
}

.fc-cie11-input {
  width: 100%;
  padding: 7px 32px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: var(--font-sm);
  color: var(--tx-base);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.fc-cie11-input:focus { border-color: var(--c-brand); }

.fc-cie11-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tx-muted);
  padding: 2px;
  display: flex;
  align-items: center;
  opacity: 0.6;
}
.fc-cie11-clear:hover { opacity: 1; }

.fc-cie11-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.fc-cie11-opt {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  align-items: baseline;
}
.fc-cie11-opt:hover { background: var(--bg-hover); }

.fc-cie11-opt-code {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-brand);
  min-width: 50px;
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
}

.fc-cie11-opt-desc {
  font-size: var(--font-sm);
  color: var(--tx-base);
}

.fc-cie11-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--c-brand-soft);
  border-radius: 6px;
  font-size: var(--font-sm);
  margin-top: 4px;
}

.fc-cie11-code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-brand);
}

.fc-cie11-readonly {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  color: var(--tx-muted);
  padding: 6px 0;
}

/* ── Alertas ─────────────────────────────────────────────────── */
.fc-alertas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 32px;
}

.fc-alerta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fffbeb;
  border: 0.5px solid #fcd34d;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}

.fc-alerta-rm {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #92400e;
  display: flex;
  align-items: center;
  opacity: 0.55;
  transition: opacity 0.12s;
}
.fc-alerta-rm:hover { opacity: 1; }

.fc-alerta-input {
  flex: 1;
  min-width: 140px;
  padding: 3px 8px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg-surface);
  outline: none;
  transition: border-color 0.15s;
}
.fc-alerta-input:focus { border-color: var(--c-brand); }

/* ── Form footer ────────────────────────────────────────────── */
.fc-form-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 0.5px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.fc-save-status {
  flex: 1;
  font-size: 11px;
  color: var(--tx-muted);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.fc-btn-new,
.fc-btn-save,
.fc-btn-sign,
.fc-btn-rectify,
.fc-btn-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid transparent;
  transition: background 0.12s, opacity 0.12s;
  white-space: nowrap;
}

.fc-btn-new {
  background: var(--c-brand);
  color: #fff;
}
.fc-btn-new:hover { opacity: 0.9; }

.fc-btn-save {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--tx-base);
}
.fc-btn-save:hover { background: var(--bg-hover); }

.fc-btn-sign {
  background: var(--c-brand);
  color: #fff;
}
.fc-btn-sign:hover { opacity: 0.88; }

.fc-btn-rectify {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--tx-muted);
}
.fc-btn-rectify:hover { background: var(--bg-hover); color: var(--tx-base); }

.fc-btn-more {
  width: calc(100% - 16px);
  margin: 6px 8px;
  justify-content: center;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  color: var(--tx-muted);
}
.fc-btn-more:hover { background: var(--bg-hover); }

/* ── Timer ──────────────────────────────────────────────────── */
.fc-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: var(--font-sm);
  font-weight: 500;
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  color: var(--tx-muted);
  transition: background 0.3s, color 0.3s;
}
.fc-timer--warning { background: #fffbeb; border-color: #fcd34d; color: #d97706; }
.fc-timer--urgent  { background: #fff1f2; border-color: #fecdd3; color: #e11d48; }
.fc-timer--done    { background: #7f1d1d; border-color: #7f1d1d; color: #fff; }

.fc-timer-display {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  letter-spacing: 0.5px;
}

.fc-timer-stop {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: inherit;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.12s;
}
.fc-timer-stop:hover { opacity: 1; }

/* ── Sign modal ─────────────────────────────────────────────── */
.fc-sign-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
  text-align: center;
}

.fc-sign-ico  { color: var(--c-brand); opacity: 0.75; }
.fc-sign-folio{ font-size: var(--font-lg); font-weight: 500; color: var(--tx-base); }
.fc-sign-pac  { font-size: var(--font-sm); color: var(--tx-muted); }

.fc-sign-warning {
  font-size: var(--font-sm);
  color: var(--tx-muted);
  background: #fffbeb;
  border: 0.5px solid #fcd34d;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
}

.fc-sign-key {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--tx-muted);
}

/* ── Post-session modal ─────────────────────────────────────── */
.fc-post-session {
  font-size: var(--font-sm);
  color: var(--tx-muted);
  line-height: 1.55;
  padding: 4px 0;
}