/* ──────────────────────────────────────────────────────────────────────────────
 * fc2-ui.css  ·  Ficha Clínica V2.0 · UI Components Styles
 * ──────────────────────────────────────────────────────────────────────────────
 * Estilos para los componentes definidos en fc2-ui-atoms.js, fc2-ui-molecules.js
 * y fc2-ui-reactive.js. Complementa fc2.css (que tiene tokens y componentes
 * base: badges, urgencias, list-item, hero, blade, lock-banner, autosave).
 *
 * Todo scopeado a .fc2-host o como clases globales reutilizables (fc2-pill,
 * fc2-avatar, fc2-chip — útiles fuera del host también).
 * ────────────────────────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════════
 *  AVATARS (atoms.Avatar)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-avatar {
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}
.fc2-avatar--brand {
  background: var(--c-brand-muted, rgba(109,40,217,.15));
  color:      var(--c-brand-soft, #7c3aed);
}
.fc2-avatar--amber {
  background: var(--lk-amber-soft, rgba(217,119,6,.10));
  color:      var(--tx-amber, #d97706);
}
.fc2-avatar--green {
  background: var(--lk-green-soft, rgba(22,163,74,.10));
  color:      var(--tx-green, #16a34a);
}
.fc2-avatar--red {
  background: var(--lk-red-soft, rgba(220,38,38,.10));
  color:      var(--tx-red, #dc2626);
}
.fc2-avatar--muted {
  background: var(--bg-hover, rgba(0,0,0,.05));
  color:      var(--tx-muted, #475569);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  PILLS (atoms.Pill)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-pill {
  display: inline-flex;
  align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--lk-font-xs, 11px);
  font-weight: 500;
  background: var(--bg-hover, rgba(0,0,0,.05));
  color:      var(--tx-muted, #475569);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
}
.fc2-pill svg { width: 11px; height: 11px; }
.fc2-pill--brand {
  background: var(--c-brand-muted, rgba(109,40,217,.15));
  color:      var(--c-brand-soft, #7c3aed);
  border-color: var(--lk-brand-border, rgba(109,40,217,.30));
}
.fc2-pill--success {
  background: var(--lk-green-soft, rgba(22,163,74,.10));
  color:      var(--tx-green, #16a34a);
}
.fc2-pill--amber {
  background: var(--lk-amber-soft, rgba(217,119,6,.10));
  color:      var(--tx-amber, #d97706);
}
.fc2-pill--danger {
  background: var(--lk-red-soft, rgba(220,38,38,.10));
  color:      var(--tx-red, #dc2626);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  CHIPS (molecules.FilterBar)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: var(--lk-font-sm, 12px);
  font-weight: 500;
  background: var(--bg-card, #ffffff);
  color:      var(--tx-muted, #475569);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
  cursor: pointer;
  font-family: inherit;
  transition: background var(--lk-transition-fast, 120ms ease),
              border-color var(--lk-transition-fast, 120ms ease),
              color var(--lk-transition-fast, 120ms ease);
}
.fc2-chip:hover {
  background: var(--bg-hover, rgba(0,0,0,.05));
  color:      var(--tx-base, #0f172a);
}
.fc2-chip--active {
  background: var(--c-brand-muted, rgba(109,40,217,.15));
  color:      var(--c-brand, #6d28d9);
  border-color: var(--lk-brand-border, rgba(109,40,217,.30));
  font-weight: 600;
}
.fc2-chip--active:hover {
  background: var(--c-brand-muted, rgba(109,40,217,.15));
  filter: brightness(.95);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  ICON wrapper (atoms.Icon)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  line-height: 0;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  BUTTONS (atoms.Btn)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: var(--lk-radius-sm, 4px);
  font-size: var(--lk-font-sm, 12px);
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--lk-transition-fast, 120ms ease);
}
.fc2-btn:hover {
  background:   var(--bg-hover, rgba(0,0,0,.05));
  border-color: var(--border, rgba(0,0,0,.12));
}
.fc2-btn:disabled, .fc2-btn[disabled] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.fc2-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.fc2-btn--primary {
  background: var(--c-brand, #6d28d9);
  border-color: var(--c-brand, #6d28d9);
  color: var(--lk-text-inverse, #ffffff);
}
.fc2-btn--primary:hover {
  background: var(--c-brand-soft, #7c3aed);
  border-color: var(--c-brand-soft, #7c3aed);
}
.fc2-btn--danger {
  color: var(--tx-red, #dc2626);
  border-color: color-mix(in srgb, var(--tx-red, #dc2626) 25%, transparent);
}
.fc2-btn--danger:hover {
  background: var(--lk-red-soft, rgba(220,38,38,.10));
  border-color: var(--tx-red, #dc2626);
}
.fc2-btn--ghost {
  background: transparent;
  border-color: transparent;
}
.fc2-btn--ghost:hover {
  background: var(--bg-hover, rgba(0,0,0,.05));
}
.fc2-btn--sm {
  padding: 4px 8px;
  font-size: var(--lk-font-xs, 11px);
}
.fc2-btn--sm svg { width: 12px; height: 12px; }

.fc2-btn-icon {
  padding: 6px;
  width: 30px; height: 30px;
  justify-content: center;
  background: transparent;
  border-color: transparent;
}
.fc2-btn-icon:hover {
  background: var(--bg-hover, rgba(0,0,0,.05));
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  STATS ROW (molecules.StatsRow)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host .fc2-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--lk-space-3, 12px);
  margin-bottom: var(--lk-space-4, 16px);
}
.fc2-host .fc2-stat-card {
  display: flex; align-items: center; gap: 10px;
  padding: var(--lk-space-3, 12px) var(--lk-space-4, 16px);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
  border-radius: var(--lk-radius-md, 8px);
}
.fc2-host .fc2-stat-card-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fc2-host .fc2-stat-card--brand .fc2-stat-card-icon {
  background: var(--c-brand-muted, rgba(109,40,217,.15));
  color: var(--c-brand, #6d28d9);
}
.fc2-host .fc2-stat-card--danger .fc2-stat-card-icon {
  background: var(--lk-red-soft, rgba(220,38,38,.10));
  color: var(--tx-red, #dc2626);
}
.fc2-host .fc2-stat-card--amber .fc2-stat-card-icon {
  background: var(--lk-amber-soft, rgba(217,119,6,.10));
  color: var(--tx-amber, #d97706);
}
.fc2-host .fc2-stat-card--success .fc2-stat-card-icon {
  background: var(--lk-green-soft, rgba(22,163,74,.10));
  color: var(--tx-green, #16a34a);
}
.fc2-host .fc2-stat-card-meta {
  display: flex; flex-direction: column;
}
.fc2-host .fc2-stat-card-value {
  font-size: var(--lk-font-xl, 18px);
  font-weight: 700;
  color: var(--tx-base, #0f172a);
  line-height: 1.1;
}
.fc2-host .fc2-stat-card-label {
  font-size: var(--lk-font-xs, 11px);
  color: var(--tx-muted, #475569);
  margin-top: 2px;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  FILTER BAR (molecules.FilterBar)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host .fc2-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--lk-space-2, 8px);
  flex-wrap: wrap;
  padding: var(--lk-space-3, 12px);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
  border-radius: var(--lk-radius-md, 8px);
  margin-bottom: var(--lk-space-3, 12px);
}
.fc2-host .fc2-filter-search {
  display: inline-flex; align-items: center;
  background: var(--bg-surface, #f8fafc);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
  border-radius: var(--lk-radius-sm, 4px);
  padding: 0 10px;
  flex: 1; min-width: 200px; max-width: 320px;
  color: var(--tx-muted, #475569);
}
.fc2-host .fc2-filter-search:focus-within {
  border-color: var(--c-brand, #6d28d9);
}
.fc2-host .fc2-filter-search-input {
  border: none; outline: none;
  background: transparent;
  padding: 7px 8px;
  flex: 1; min-width: 0;
  font-size: var(--lk-font-sm, 12px);
  font-family: inherit;
  color: var(--tx-base, #0f172a);
}
.fc2-host .fc2-filter-group {
  display: inline-flex; gap: 4px;
  padding-left: var(--lk-space-2, 8px);
  border-left: 1px solid var(--border-soft, rgba(0,0,0,.06));
  flex-wrap: wrap;
}
.fc2-host .fc2-filter-group:first-of-type {
  border-left: none;
  padding-left: 0;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  SORT DROPDOWN (molecules.SortDropdown)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host .fc2-sort-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
  border-radius: var(--lk-radius-sm, 4px);
  color: var(--tx-muted, #475569);
}
.fc2-host .fc2-sort-select {
  border: none; outline: none;
  background: transparent;
  padding: 7px 4px;
  font-size: var(--lk-font-sm, 12px);
  font-family: inherit;
  color: var(--tx-base, #0f172a);
  cursor: pointer;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  BULK ACTIONS (molecules.BulkActions)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host .fc2-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--lk-space-3, 12px);
  padding: var(--lk-space-3, 12px) var(--lk-space-4, 16px);
  background: var(--c-brand-muted, rgba(109,40,217,.15));
  border-top: 1px solid var(--lk-brand-border, rgba(109,40,217,.30));
  position: sticky; bottom: 0;
  z-index: 10;
  animation: fc2-fade-in var(--lk-transition-normal, 220ms ease);
}
.fc2-host .fc2-bulk-label {
  font-size: var(--lk-font-sm, 12px);
  font-weight: 600;
  color: var(--c-brand, #6d28d9);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  LIST ITEM CHECK / META (molecules.ListItem)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host .fc2-list-item-check,
.fc2-host .fc2-list-item-check-spacer {
  width: 18px; height: 18px;
  margin: 0;
  flex-shrink: 0;
}
.fc2-host .fc2-list-item-badges {
  display: flex; gap: 6px;
  flex-shrink: 0;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  PATIENT HEADER (molecules.PatientHeader)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host .fc2-patient-header {
  display: flex; align-items: center; gap: var(--lk-space-3, 12px);
  padding: var(--lk-space-4, 16px) 0;
  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,.06));
  margin-bottom: var(--lk-space-4, 16px);
}
.fc2-host .fc2-patient-header-meta {
  flex: 1; min-width: 0;
}
.fc2-host .fc2-patient-header-name {
  font-size: var(--lk-font-lg, 15px);
  font-weight: 600;
  color: var(--tx-base, #0f172a);
}
.fc2-host .fc2-patient-header-sub {
  font-size: var(--lk-font-sm, 12px);
  color: var(--tx-muted, #475569);
  margin-top: 2px;
}
.fc2-host .fc2-patient-alerts {
  display: flex; gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  CONSENT BANNER (molecules.ConsentBanner)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-consent-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--lk-radius-md, 8px);
  font-size: var(--lk-font-sm, 12px);
  font-weight: 500;
  margin-bottom: var(--lk-space-3, 12px);
}
.fc2-consent-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.fc2-consent-banner > span { flex: 1; }
.fc2-consent-banner--success {
  background: var(--lk-green-soft, rgba(22,163,74,.10));
  color: var(--tx-green, #16a34a);
  border: 1px solid color-mix(in srgb, var(--tx-green, #16a34a) 25%, transparent);
}
.fc2-consent-banner--amber {
  background: var(--lk-amber-soft, rgba(217,119,6,.10));
  color: var(--tx-amber, #d97706);
  border: 1px solid color-mix(in srgb, var(--tx-amber, #d97706) 25%, transparent);
}
.fc2-consent-banner--danger {
  background: var(--lk-red-soft, rgba(220,38,38,.10));
  color: var(--tx-red, #dc2626);
  border: 1px solid color-mix(in srgb, var(--tx-red, #dc2626) 25%, transparent);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  LOADING DOTS (atoms.LoadingDots)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-loading-dots {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--tx-muted, #475569);
  font-size: var(--lk-font-sm, 12px);
}
.fc2-loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: fc2-dot-pulse 1.4s ease-in-out infinite;
}
.fc2-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.fc2-loading-dot:nth-child(3) { animation-delay: 0.4s; }
.fc2-loading-dot:nth-child(4) { animation-delay: 0.6s; }
.fc2-loading-label { margin-right: 4px; }
@keyframes fc2-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1; transform: scale(1); }
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  ONLINE USERS (reactive.OnlineUsers)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-online-users {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-hover, rgba(0,0,0,.05));
  font-size: var(--lk-font-xs, 11px);
  color: var(--tx-muted, #475569);
  font-weight: 500;
}
.fc2-online-users--empty {
  color: var(--tx-muted, #475569);
  opacity: 0.6;
}
.fc2-online-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tx-green, #16a34a);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tx-green, #16a34a) 20%, transparent);
  animation: fc2-pulse-dot 2s ease-in-out infinite;
}
@keyframes fc2-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tx-green, #16a34a) 20%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tx-green, #16a34a) 10%, transparent); }
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  CONNECTION STATUS (reactive.ConnectionStatus)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-conn-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--lk-font-xs, 11px);
  font-weight: 500;
}
.fc2-conn-status--ok {
  background: var(--lk-green-soft, rgba(22,163,74,.10));
  color: var(--tx-green, #16a34a);
}
.fc2-conn-status--off {
  background: var(--lk-red-soft, rgba(220,38,38,.10));
  color: var(--tx-red, #dc2626);
}
.fc2-conn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fc2-conn-status--ok .fc2-conn-dot {
  animation: fc2-pulse-dot 2s ease-in-out infinite;
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  AUTOSAVE error/saved states (extends fc2.css)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-autosave-error {
  color: var(--tx-red, #dc2626);
}
.fc2-autosave-saved svg { animation: none; }


/* ═════════════════════════════════════════════════════════════════════════════
 *  DIVIDER (atoms.Divider)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-divider {
  border: none;
  border-top: 1px solid var(--border-soft, rgba(0,0,0,.06));
  margin: var(--lk-space-3, 12px) 0;
}
.fc2-divider-text {
  display: flex; align-items: center;
  margin: var(--lk-space-3, 12px) 0;
  color: var(--tx-muted, #475569);
  font-size: var(--lk-font-xs, 11px);
}
.fc2-divider-text::before,
.fc2-divider-text::after {
  content: ''; flex: 1;
  border-top: 1px solid var(--border-soft, rgba(0,0,0,.06));
}
.fc2-divider-text > span {
  padding: 0 var(--lk-space-3, 12px);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  SKELETON ROW wrapper
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-skel-row {
  padding: 10px 14px;
  margin-bottom: var(--lk-space-2, 8px);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-soft, rgba(0,0,0,.06));
  border-radius: var(--lk-radius-md, 8px);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  REDUCED MOTION
 * ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fc2-loading-dot,
  .fc2-online-dot,
  .fc2-conn-status--ok .fc2-conn-dot,
  .fc2-bulk-actions {
    animation: none !important;
  }
  .fc2-chip,
  .fc2-btn {
    transition: none !important;
  }
}