/* ──────────────────────────────────────────────────────────────────────────────
 * fc2.css  ·  Ficha Clínica V2.0 · Design System
 * ──────────────────────────────────────────────────────────────────────────────
 * Estrategia (alineada con kernel LUZOkit lk-tokens.css v2.3):
 *   1. Wrapper local --fc2-* scopeado a .fc2-host. Mapea a tokens canonical
 *      --lk-* con legacy --c-/--tx-/--bg- como fallback para módulos no migrados.
 *   2. Extiende .cl-badge (definido en lk-components.css) con modifiers FC2
 *      específicos de estados de ficha. NO redefine .cl-badge.
 *   3. Define únicamente componentes que NO existen en el kernel:
 *      urgencias, lock-banner, autosave indicator, list-item FC2, hero, blade.
 *   4. Cero colores hex/rgba en reglas (solo en :scope wrappers como fallback).
 *
 * Uso:
 *   <div class="fc2-host"> ... UI FC2 ... </div>
 *
 * Tokens canonical del kernel (lk-tokens.css):
 *   --lk-brand, --lk-brand-soft, --lk-brand-muted, --lk-brand-border
 *   --lk-bg-body, --lk-bg-card, --lk-bg-surface, --lk-bg-hover, --lk-bg-active
 *   --lk-text-primary/secondary/muted/faint
 *   --lk-border, --lk-border-soft
 *   --lk-red, --lk-red-soft, --lk-green, --lk-green-soft, --lk-amber, --lk-amber-soft
 *   --lk-blue, --lk-blue-soft, --lk-teal, --lk-teal-soft
 *   --lk-radius-sm/md/lg/xl, --lk-space-1/2/3/4, --lk-font-xs/sm/md/lg/xl
 *   --lk-transition-fast/normal, --lk-font-sans/mono
 *
 * Aliases legacy (bridge en luzokit + lk-components):
 *   --c-brand, --c-brand-muted, --c-brand-soft
 *   --bg-card, --bg-hover, --bg-active, --bg-body, --bg-surface
 *   --tx-base, --tx-muted, --tx-red, --tx-green, --tx-amber
 *   --border, --border-soft
 * ────────────────────────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════════
 *  1 · WRAPPER LOCAL · scopeado a .fc2-host
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-host {
  --fc2-brand:        var(--lk-brand,         var(--c-brand,         #6d28d9));
  --fc2-brand-soft:   var(--lk-brand-soft,    var(--c-brand-soft,    #7c3aed));
  --fc2-brand-muted:  var(--lk-brand-muted,   var(--c-brand-muted,   rgba(109,40,217,.15)));
  --fc2-brand-border: var(--lk-brand-border,                          rgba(109,40,217,.30));

  --fc2-bg-body:      var(--lk-bg-body,       var(--bg-body,         #f1f5f9));
  --fc2-bg-card:      var(--lk-bg-card,       var(--bg-card,         #ffffff));
  --fc2-bg-surface:   var(--lk-bg-surface,    var(--bg-surface,      #f8fafc));
  --fc2-bg-hover:     var(--lk-bg-hover,      var(--bg-hover,        rgba(0,0,0,.05)));
  --fc2-bg-active:    var(--lk-bg-active,     var(--bg-active,       rgba(109,40,217,.10)));

  --fc2-tx:           var(--lk-text-primary,  var(--tx-base,         #0f172a));
  --fc2-tx-sub:       var(--lk-text-secondary,#334155);
  --fc2-tx-muted:     var(--lk-text-muted,    var(--tx-muted,        #475569));
  --fc2-tx-faint:     var(--lk-text-faint,                           #94a3b8);

  --fc2-border:       var(--lk-border,        var(--border,          rgba(0,0,0,.12)));
  --fc2-border-soft:  var(--lk-border-soft,   var(--border-soft,     rgba(0,0,0,.06)));

  --fc2-red:          var(--lk-red,           var(--tx-red,          #dc2626));
  --fc2-red-soft:     var(--lk-red-soft,                              rgba(220,38,38,.10));
  --fc2-green:        var(--lk-green,         var(--tx-green,        #16a34a));
  --fc2-green-soft:   var(--lk-green-soft,                            rgba(22,163,74,.10));
  --fc2-amber:        var(--lk-amber,         var(--tx-amber,        #d97706));
  --fc2-amber-soft:   var(--lk-amber-soft,                            rgba(217,119,6,.10));
  --fc2-blue:         var(--lk-blue,                                  #2563eb);
  --fc2-blue-soft:    var(--lk-blue-soft,                             rgba(37,99,235,.10));

  /* Estructurales heredados del kernel */
  --fc2-rad-sm:       var(--lk-radius-sm,   4px);
  --fc2-rad-md:       var(--lk-radius-md,   8px);
  --fc2-rad-lg:       var(--lk-radius-lg,  12px);
  --fc2-rad-pill:     20px;
  --fc2-space-1:      var(--lk-space-1, 4px);
  --fc2-space-2:      var(--lk-space-2, 8px);
  --fc2-space-3:      var(--lk-space-3, 12px);
  --fc2-space-4:      var(--lk-space-4, 16px);
  --fc2-fs-xs:        var(--lk-font-xs, 11px);
  --fc2-fs-sm:        var(--lk-font-sm, 12px);
  --fc2-fs-md:        var(--lk-font-md, 13px);
  --fc2-fs-lg:        var(--lk-font-lg, 15px);
  --fc2-fs-xl:        var(--lk-font-xl, 18px);
  --fc2-dur-fast:     var(--lk-transition-fast,   120ms ease);
  --fc2-dur-base:     var(--lk-transition-normal, 220ms ease);

  --fc2-sh-card:      0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02);
  --fc2-sh-blade:     0 4px 24px rgba(15, 23, 42, .08);

  /* Reset suave dentro del host */
  font-family: var(--lk-font-sans, system-ui, sans-serif);
  font-size:   var(--fc2-fs-md);
  color:       var(--fc2-tx);
  line-height: 1.45;
}
.fc2-host *,
.fc2-host *::before,
.fc2-host *::after { box-sizing: border-box; }
.fc2-host svg { display: block; }


/* ═════════════════════════════════════════════════════════════════════════════
 *  2 · BADGES DE ESTADO · extiende .cl-badge (lk-components.css)
 *      Los modifiers FC2 funcionan en cualquier .cl-badge global del sistema.
 * ═════════════════════════════════════════════════════════════════════════════ */

.cl-badge--borrador {
  background: var(--bg-hover);
  color:      var(--tx-muted);
  border:     1px solid var(--border-soft);
}
.cl-badge--en_revision,
.cl-badge--review {
  background: var(--lk-amber-soft);
  color:      var(--tx-amber);
  border:     1px solid color-mix(in srgb, var(--tx-amber, #d97706) 30%, transparent);
}
.cl-badge--firmada,
.cl-badge--signed {
  background: var(--lk-green-soft);
  color:      var(--tx-green);
  border:     1px solid color-mix(in srgb, var(--tx-green, #16a34a) 30%, transparent);
}
.cl-badge--rectificada,
.cl-badge--rect {
  background: var(--c-brand-muted);
  color:      var(--c-brand-soft);
  border:     1px solid var(--lk-brand-border);
}
.cl-badge--archivada,
.cl-badge--archived {
  background: var(--bg-hover);
  color:      var(--tx-muted);
  border:     1px solid var(--border-soft);
  opacity:    0.75;
}

/* Compatibilidad: LK_FC2.rules.estadoBadge() retorna clases fc2-badge-{state}.
   Las soportamos también, con la misma estética. */
.fc2-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--lk-font-xs, 11px);
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}
.fc2-badge svg { width: 12px; height: 12px; }

.fc2-badge-draft,
.fc2-badge-borrador {
  background: var(--bg-hover);
  color:      var(--tx-muted);
  border-color: var(--border-soft);
}
.fc2-badge-review,
.fc2-badge-en_revision {
  background: var(--lk-amber-soft);
  color:      var(--tx-amber);
  border-color: color-mix(in srgb, var(--tx-amber, #d97706) 30%, transparent);
}
.fc2-badge-signed,
.fc2-badge-firmada {
  background: var(--lk-green-soft);
  color:      var(--tx-green);
  border-color: color-mix(in srgb, var(--tx-green, #16a34a) 30%, transparent);
}
.fc2-badge-rect,
.fc2-badge-rectificada {
  background: var(--c-brand-muted);
  color:      var(--c-brand-soft);
  border-color: var(--lk-brand-border);
}
.fc2-badge-archived,
.fc2-badge-archivada {
  background: var(--bg-hover);
  color:      var(--tx-muted);
  border-color: var(--border-soft);
  opacity:    0.75;
}
.fc2-badge-unknown {
  background: var(--bg-hover);
  color:      var(--tx-muted);
  border-color: var(--border-soft);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  3 · URGENCIAS VENCIMIENTO · únicas a FC2 (Ley 20.584)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-urg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--lk-font-xs, 11px);
  font-weight: 600;
  border: 1px solid transparent;
}
.fc2-urg svg { width: 11px; height: 11px; }

.fc2-urg-al_dia {
  background: var(--lk-green-soft);
  color:      var(--tx-green);
}
.fc2-urg-vence_pronto {
  background: var(--lk-amber-soft);
  color:      var(--tx-amber);
}
.fc2-urg-vence_hoy {
  background: color-mix(in srgb, var(--tx-amber, #d97706) 18%, transparent);
  color:      var(--tx-amber);
  font-weight: 700;
}
.fc2-urg-vencida {
  background: var(--lk-red-soft);
  color:      var(--tx-red);
  font-weight: 700;
  animation:  fc2-pulse-urgent 2s ease-in-out infinite;
}
.fc2-urg-sin_plazo {
  background: var(--bg-hover);
  color:      var(--tx-muted);
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  4 · COMPONENTES FC2 ÚNICOS
 * ═════════════════════════════════════════════════════════════════════════════ */

/* ─── LIST ITEM bandeja/expedientes ──────────────────────────────────── */
.fc2-host .fc2-list {
  display: flex; flex-direction: column; gap: var(--fc2-space-2);
}
.fc2-host .fc2-list-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: var(--fc2-space-3) 14px;
  background: var(--fc2-bg-card);
  border: 1px solid var(--fc2-border-soft);
  border-radius: var(--fc2-rad-md);
  cursor: pointer;
  transition: background var(--fc2-dur-fast), border-color var(--fc2-dur-fast);
}
.fc2-host .fc2-list-item:hover {
  background: var(--fc2-bg-surface);
  border-color: var(--fc2-border);
}
.fc2-host .fc2-list-item.fc2-is-selected {
  background: var(--fc2-bg-active);
  border-color: var(--fc2-brand-border);
}
.fc2-host .fc2-list-item-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.fc2-host .fc2-list-item-title {
  font-size: var(--fc2-fs-md);
  font-weight: 600;
  color: var(--fc2-tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc2-host .fc2-list-item-sub {
  font-size: var(--fc2-fs-sm);
  color: var(--fc2-tx-sub);
}
.fc2-host .fc2-list-item-actions {
  display: flex; gap: 6px;
  opacity: 0;
  transition: opacity var(--fc2-dur-fast);
}
.fc2-host .fc2-list-item:hover .fc2-list-item-actions { opacity: 1; }


/* ─── HERO FICHA (cabecera visor/editor) ─────────────────────────────── */
.fc2-host .fc2-hero {
  padding: 20px 24px;
  background: linear-gradient(180deg, var(--fc2-bg-card) 0%, var(--fc2-bg-surface) 100%);
  border-bottom: 1px solid var(--fc2-border-soft);
}
.fc2-host .fc2-hero-row {
  display: flex; align-items: center; gap: var(--fc2-space-3);
  flex-wrap: wrap;
}
.fc2-host .fc2-hero-folio {
  font-family: var(--lk-font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--fc2-fs-sm);
  color: var(--fc2-tx-faint);
  letter-spacing: 0.5px;
}
.fc2-host .fc2-hero-title {
  font-size: var(--fc2-fs-xl);
  font-weight: 600;
  color: var(--fc2-tx);
  margin-top: var(--fc2-space-1);
}
.fc2-host .fc2-hero-sub {
  font-size: var(--fc2-fs-sm);
  color: var(--fc2-tx-sub);
  margin-top: 2px;
}


/* ─── BLADE / EDITOR ─────────────────────────────────────────────────── */
.fc2-host .fc2-blade {
  background: var(--fc2-bg-card);
  display: flex; flex-direction: column;
  height: 100%;
}
.fc2-host .fc2-blade-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px;
}
.fc2-host .fc2-blade-footer {
  border-top: 1px solid var(--fc2-border-soft);
  padding: 14px 24px;
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--fc2-bg-surface);
}


/* ─── LOCK BANNER (otro editor) ──────────────────────────────────────── */
.fc2-lock-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--lk-amber-soft);
  border: 1px solid color-mix(in srgb, var(--tx-amber, #d97706) 30%, transparent);
  border-radius: var(--lk-radius-md, 8px);
  color: var(--tx-amber);
  font-size: var(--lk-font-sm, 12px);
  font-weight: 500;
}
.fc2-lock-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.fc2-lock-banner-users { margin-left: auto; display: flex; }
.fc2-lock-banner-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--tx-amber, #d97706);
  color: var(--lk-bg-card, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  border: 2px solid var(--lk-amber-soft);
  margin-left: -8px;
}
.fc2-lock-banner-avatar:first-child { margin-left: 0; }


/* ─── AUTOSAVE INDICATOR ─────────────────────────────────────────────── */
.fc2-autosave {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--lk-font-xs, 11px);
  color: var(--tx-muted);
}
.fc2-autosave-active { color: var(--tx-amber); }
.fc2-autosave-active svg { animation: fc2-spin 1s linear infinite; }
.fc2-autosave-saved   { color: var(--tx-green); }


/* ─── EMPTY STATE ────────────────────────────────────────────────────── */
.fc2-host .fc2-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--fc2-tx-faint);
}
.fc2-host .fc2-empty-icon {
  width: 48px; height: 48px;
  margin-bottom: var(--fc2-space-3);
  opacity: 0.5;
}
.fc2-host .fc2-empty-title {
  font-size: var(--fc2-fs-md);
  font-weight: 500;
  color: var(--fc2-tx-sub);
}
.fc2-host .fc2-empty-sub {
  font-size: var(--fc2-fs-sm);
  margin-top: var(--fc2-space-1);
}


/* ─── SKELETONS / LOADING ────────────────────────────────────────────── */
.fc2-skel {
  display: block;
  background: linear-gradient(
    90deg,
    var(--bg-hover, rgba(0,0,0,.05)) 25%,
    var(--border-soft, rgba(0,0,0,.06)) 50%,
    var(--bg-hover, rgba(0,0,0,.05)) 75%
  );
  background-size: 200% 100%;
  animation: fc2-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--lk-radius-sm, 4px);
  height: 14px;
}
.fc2-skel-title    { height: 18px; width: 60%; }
.fc2-skel-line     { height: 12px; width: 100%; }
.fc2-skel-line-sm  { height: 10px; width: 40%; }
.fc2-skel-avatar   { height: 36px; width: 36px; border-radius: 50%; }


/* ═════════════════════════════════════════════════════════════════════════════
 *  5 · ANIMACIONES propias FC2
 * ═════════════════════════════════════════════════════════════════════════════ */
@keyframes fc2-pulse-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
@keyframes fc2-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fc2-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes fc2-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fc2-fade-in { animation: fc2-fade-in var(--lk-transition-normal, 220ms ease); }


/* ═════════════════════════════════════════════════════════════════════════════
 *  6 · ACCESIBILIDAD · prefers-reduced-motion
 * ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fc2-skel,
  .fc2-urg-vencida,
  .fc2-autosave-active svg,
  .fc2-fade-in {
    animation: none !important;
    transition: none !important;
  }
  .fc2-host .fc2-list-item {
    transition: none !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  7 · MOBILE / RESPONSIVE
 * ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .fc2-host .fc2-hero { padding: var(--fc2-space-4); }
  .fc2-host .fc2-blade-body { padding: var(--fc2-space-4); }
  .fc2-host .fc2-list-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--fc2-space-2);
  }
  .fc2-host .fc2-list-item-actions { opacity: 1; }
}


/* ═════════════════════════════════════════════════════════════════════════════
 *  8 · UTILITIES (scopeadas a .fc2-host)
 * ═════════════════════════════════════════════════════════════════════════════ */
.fc2-hidden     { display: none !important; }
.fc2-host .fc2-flex     { display: flex; }
.fc2-host .fc2-flex-1   { flex: 1; min-width: 0; }
.fc2-host .fc2-gap-2    { gap: var(--fc2-space-2); }
.fc2-host .fc2-gap-3    { gap: var(--fc2-space-3); }
.fc2-host .fc2-gap-4    { gap: var(--fc2-space-4); }
.fc2-host .fc2-mt-1     { margin-top: var(--fc2-space-1); }
.fc2-host .fc2-mt-2     { margin-top: var(--fc2-space-2); }
.fc2-host .fc2-mt-3     { margin-top: var(--fc2-space-3); }
.fc2-host .fc2-mt-4     { margin-top: var(--fc2-space-4); }
.fc2-host .fc2-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc2-host .fc2-monospace {
  font-family: var(--lk-font-mono, ui-monospace, Menlo, monospace);
}