/* ════════════════════════════════════════════════════════════════════════
 * fc2v2-smartview.css · v1.0.0
 * LUZOcrm V2 / TRANSED ONG · Ficha Clínica 2.0
 *
 * SmartView v5 (altura fija 48 px · cronómetro tiempo restante ·
 * badges de eventos · barra absoluta) + paciente strip corregido
 * (sin RUT lit · con PIXD · sin sesión · con nombre CIE-10).
 *
 * Clases namespaced fc2sv-* y fc2pac-* para no chocar con sv-* / fc-pac-*
 * del editor v4.2.0 actual.
 * ════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
 * Tokens locales · usan los tokens del sistema con fallback
 * ────────────────────────────────────────────────────────────────────── */
:root {
  --fc2sv-bg:          var(--bg-card,       #161B22);
  --fc2sv-bg-surface:  var(--bg-surface,    #1C232E);
  --fc2sv-bg-hover:    var(--bg-hover,      rgba(255,255,255,0.04));
  --fc2sv-tx-base:     var(--tx-base,       #E6EDF3);
  --fc2sv-tx-muted:    var(--tx-muted,      #8B949E);
  --fc2sv-tx-soft:     var(--tx-soft,       #6E7681);
  --fc2sv-border:      var(--border,        rgba(255,255,255,0.10));
  --fc2sv-border-soft: var(--border-soft,   rgba(255,255,255,0.06));

  --fc2sv-brand:       var(--c-brand,       #6d28d9);
  --fc2sv-brand-soft:  var(--c-brand-soft,  #A78BFA);
  --fc2sv-brand-muted: var(--c-brand-muted, rgba(127,119,221,0.18));
  --fc2sv-brand-bd:    var(--lk-brand-border, rgba(127,119,221,0.30));

  --fc2sv-green:       var(--green-base,    #5DCAA5);
  --fc2sv-green-bg:    var(--green-bg,      rgba(29,158,117,0.10));
  --fc2sv-green-bd:    var(--green-bd,      rgba(29,158,117,0.28));

  --fc2sv-amber:       var(--amber-base,    #EF9F27);
  --fc2sv-amber-bg:    var(--amber-bg,      rgba(186,117,23,0.10));
  --fc2sv-amber-bd:    var(--amber-bd,      rgba(186,117,23,0.28));

  --fc2sv-red:         var(--red-base,      #E24B4A);
  --fc2sv-red-soft:    var(--red-soft,      #F09595);
  --fc2sv-red-bg:      var(--red-bg,        rgba(163,45,45,0.10));
  --fc2sv-red-bd:      var(--red-bd,        rgba(226,75,74,0.30));

  --fc2sv-blue:        var(--blue-base,     #85B7EB);
  --fc2sv-blue-bg:     var(--blue-bg,       rgba(133,183,235,0.08));
  --fc2sv-blue-bd:     var(--blue-bd,       rgba(133,183,235,0.24));

  --fc2sv-gray-bg:     var(--gray-bg,       rgba(255,255,255,0.04));
  --fc2sv-gray-bd:     var(--gray-bd,       rgba(255,255,255,0.10));
}

/* ══════════════════════════════════════════════════════════════════════
 * SmartView bar — altura fija 48 px
 * ══════════════════════════════════════════════════════════════════════ */
.fc2sv-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  margin-top: 14px;
  background: var(--fc2sv-bg);
  border-bottom: 0.5px solid var(--fc2sv-border);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Trigger SmartView (sin chevron) */
.fc2sv-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px;
  border-radius: 8px;
  background: var(--fc2sv-brand-muted);
  border: 0.5px solid var(--fc2sv-brand-bd);
  color: var(--fc2sv-brand-soft);
  font-size: 13px; font-weight: 500;
  flex-shrink: 0;
  position: relative;
  margin-right: 10px;
  animation: fc2sv-trigger-in 0.45s cubic-bezier(.34,1.4,.64,1) backwards;
}
.fc2sv-trigger svg { width: 14px; height: 14px; }
.fc2sv-trigger::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 10px;
  box-shadow: 0 0 0 0 var(--fc2sv-brand-muted);
  animation: fc2sv-trigger-pulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fc2sv-trigger-in {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fc2sv-trigger-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-brand-muted); }
  50%      { box-shadow: 0 0 0 6px rgba(127,119,221,0); }
}

/* Separador dot pequeño */
.fc2sv-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fc2sv-tx-soft); opacity: 0.45;
  flex-shrink: 0;
}

/* KPI inline */
.fc2sv-kpi {
  display: inline-flex; align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  animation: fc2sv-fade-in 0.5s ease backwards;
}
.fc2sv-kpi:nth-of-type(1) { animation-delay: 0.08s; }
.fc2sv-kpi:nth-of-type(2) { animation-delay: 0.14s; }
.fc2sv-kpi:nth-of-type(3) { animation-delay: 0.20s; }
.fc2sv-kpi:nth-of-type(4) { animation-delay: 0.26s; }
.fc2sv-kpi-lbl {
  font-size: 9.5px; color: var(--fc2sv-tx-soft);
  letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 600;
}
.fc2sv-kpi-val {
  font-size: 12.5px; color: var(--fc2sv-tx-base); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fc2sv-kpi-val.is-good { color: var(--fc2sv-green); }
.fc2sv-kpi-val.is-warn { color: var(--fc2sv-amber); }
.fc2sv-kpi-val.is-bad  { color: var(--fc2sv-red-soft); }

@keyframes fc2sv-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Spacer */
.fc2sv-spacer { flex: 1; min-width: 12px; }

/* ──────────────────────────────────────────────────────────────────────
 * Badges de evento
 * Variantes: wait · next · cancel · risk · overtime · doc
 * ────────────────────────────────────────────────────────────────────── */
.fc2sv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  flex-shrink: 0;
  border: 0.5px solid;
  animation: fc2sv-badge-in 0.45s cubic-bezier(.34,1.4,.64,1) backwards;
}
.fc2sv-badge svg { width: 11px; height: 11px; }
.fc2sv-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.fc2sv-badge-name { color: var(--fc2sv-tx-base); font-weight: 500; }
.fc2sv-badge-strong { font-weight: 600; }
@keyframes fc2sv-badge-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.fc2sv-badge--wait {
  background: var(--fc2sv-amber-bg);
  border-color: var(--fc2sv-amber-bd);
  color: var(--fc2sv-amber);
}
.fc2sv-badge--wait .fc2sv-badge-dot {
  animation: fc2sv-dot-amber 1.4s ease-in-out infinite;
}
@keyframes fc2sv-dot-amber {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-amber); opacity: 1; }
  50%      { box-shadow: 0 0 0 4px rgba(239,159,39,0); opacity: 0.55; }
}

.fc2sv-badge--next {
  background: var(--fc2sv-blue-bg);
  border-color: var(--fc2sv-blue-bd);
  color: var(--fc2sv-blue);
}
.fc2sv-badge--next .fc2sv-badge-dot {
  animation: fc2sv-dot-blue 2s ease-in-out infinite;
}
@keyframes fc2sv-dot-blue {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-blue); opacity: 1; }
  50%      { box-shadow: 0 0 0 4px rgba(133,183,235,0); opacity: 0.6; }
}

.fc2sv-badge--cancel {
  background: var(--fc2sv-gray-bg);
  border-color: var(--fc2sv-gray-bd);
  color: var(--fc2sv-tx-muted);
}

.fc2sv-badge--risk {
  background: var(--fc2sv-red-bg);
  border-color: var(--fc2sv-red-bd);
  color: var(--fc2sv-red-soft);
  animation:
    fc2sv-badge-in 0.45s cubic-bezier(.34,1.4,.64,1) backwards,
    fc2sv-risk-pulse 1.6s ease-in-out 0.6s infinite;
}
.fc2sv-badge--risk .fc2sv-badge-dot {
  animation: fc2sv-dot-red 1s ease-in-out infinite;
}
@keyframes fc2sv-risk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-red-bd); }
  50%      { box-shadow: 0 0 0 5px rgba(226,75,74,0); }
}
@keyframes fc2sv-dot-red {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-red); opacity: 1; }
  50%      { box-shadow: 0 0 0 4px rgba(226,75,74,0); opacity: 0.5; }
}

.fc2sv-badge--overtime {
  background: var(--fc2sv-red-bg);
  border-color: var(--fc2sv-red-bd);
  color: var(--fc2sv-red-soft);
  font-weight: 700;
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase;
  animation:
    fc2sv-overtime-shake 0.45s cubic-bezier(.34,1.4,.64,1) 0.20s backwards,
    fc2sv-overtime-pulse 1.4s ease-in-out 0.7s infinite;
}
@keyframes fc2sv-overtime-shake {
  0%   { opacity: 0; transform: translateX(0); }
  20%  { opacity: 1; transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes fc2sv-overtime-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-red-bd); }
  50%      { box-shadow: 0 0 0 5px rgba(226,75,74,0); }
}

.fc2sv-badge--doc {
  background: var(--fc2sv-brand-muted);
  border-color: var(--fc2sv-brand-bd);
  color: var(--fc2sv-brand-soft);
}
.fc2sv-badge--doc .fc2sv-badge-dot {
  animation: fc2sv-dot-brand 2s ease-in-out infinite;
}
@keyframes fc2sv-dot-brand {
  0%, 100% { box-shadow: 0 0 0 0 var(--fc2sv-brand-soft); opacity: 1; }
  50%      { box-shadow: 0 0 0 4px rgba(167,139,250,0); opacity: 0.6; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Paciente en la SmartView (icono user + nombre)
 * ────────────────────────────────────────────────────────────────────── */
.fc2sv-pac {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  color: var(--fc2sv-tx-muted);
  animation: fc2sv-fade-in 0.5s ease 0.16s backwards;
}
.fc2sv-pac svg { width: 13px; height: 13px; }
.fc2sv-pac-name {
  font-size: 12.5px;
  color: var(--fc2sv-tx-base);
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc2sv-divider {
  width: 1px; height: 16px;
  background: var(--fc2sv-border);
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────
 * Cronómetro (tiempo restante)
 * ────────────────────────────────────────────────────────────────────── */
.fc2sv-clock {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0;
  animation: fc2sv-clock-in 0.5s cubic-bezier(.34,1.4,.64,1) 0.18s backwards;
}
@keyframes fc2sv-clock-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.fc2sv-clock-ico {
  color: var(--fc2sv-tx-muted);
  display: inline-flex;
  animation: fc2sv-clock-ico-pulse 1.6s ease-in-out infinite;
}
.fc2sv-clock-ico svg { width: 14px; height: 14px; }
.fc2sv-clock-ico.is-warn { color: var(--fc2sv-amber); animation-duration: 0.9s; }
.fc2sv-clock-ico.is-bad  { color: var(--fc2sv-red-soft);   animation-duration: 0.55s; }
@keyframes fc2sv-clock-ico-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.10); opacity: 1;    }
}

.fc2sv-clock-time {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 17px; font-weight: 500;
  color: var(--fc2sv-tx-base);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.fc2sv-clock-time.is-warn { color: var(--fc2sv-amber); }
.fc2sv-clock-time.is-bad  {
  color: var(--fc2sv-red-soft);
  animation: fc2sv-clock-bad 0.9s ease-in-out infinite;
}
@keyframes fc2sv-clock-bad {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 transparent; }
  50%      { opacity: 0.75; text-shadow: 0 0 8px rgba(240,149,149,0.35); }
}
.fc2sv-clock-secs { animation: fc2sv-clock-secs 2s ease-in-out infinite; }
@keyframes fc2sv-clock-secs {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.fc2sv-clock-time.is-bad .fc2sv-clock-secs {
  animation: fc2sv-clock-secs-fast 0.7s ease-in-out infinite;
}
@keyframes fc2sv-clock-secs-fast {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.40; }
}

.fc2sv-clock-tag {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--fc2sv-tx-soft);
  letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 600;
  margin-left: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
 * Barra de progreso · 3 px absoluta · NO añade altura
 * ────────────────────────────────────────────────────────────────────── */
.fc2sv-progress {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  pointer-events: none;
}
.fc2sv-progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    var(--fc2sv-brand) 0%,
    var(--fc2sv-brand-soft) 50%,
    var(--fc2sv-brand) 100%);
  background-size: 220% 100%;
  border-radius: 0 2px 2px 0;
  transform-origin: left;
  animation:
    fc2sv-bar-grow 1.2s cubic-bezier(.34,1.4,.64,1) 0.25s backwards,
    fc2sv-bar-shimmer 3.2s linear 1.4s infinite;
}
.fc2sv-progress-fill.is-warn {
  background: linear-gradient(90deg, var(--fc2sv-amber) 0%, #f7c067 50%, var(--fc2sv-amber) 100%);
  background-size: 220% 100%;
  animation:
    fc2sv-bar-grow 1.2s cubic-bezier(.34,1.4,.64,1) 0.25s backwards,
    fc2sv-bar-shimmer 2.2s linear 1.4s infinite;
}
.fc2sv-progress-fill.is-bad {
  background: linear-gradient(90deg, var(--fc2sv-red) 0%, var(--fc2sv-red-soft) 50%, var(--fc2sv-red) 100%);
  background-size: 220% 100%;
  animation:
    fc2sv-bar-grow 1.2s cubic-bezier(.34,1.4,.64,1) 0.25s backwards,
    fc2sv-bar-shimmer 1.4s linear 1.4s infinite,
    fc2sv-bar-bad 1.1s ease-in-out 1.4s infinite;
}
@keyframes fc2sv-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fc2sv-bar-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}
@keyframes fc2sv-bar-bad {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ══════════════════════════════════════════════════════════════════════
 * Paciente strip (cuerpo de la ficha) · corregido
 * sin RUT lit · con PIXD · sin sesión · con nombre CIE-10
 * ══════════════════════════════════════════════════════════════════════ */
.fc2pac-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--fc2sv-bg-surface);
  border: 0.5px solid var(--fc2sv-border-soft);
  border-radius: 10px;
  margin-bottom: 14px;
}
.fc2pac-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: #EEEDFE; color: #534AB7;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.fc2pac-info { flex: 1; min-width: 0; }
.fc2pac-name {
  font-size: 13.5px; font-weight: 500;
  color: var(--fc2sv-tx-base);
  line-height: 1.2;
}
.fc2pac-meta {
  font-size: 11.5px;
  color: var(--fc2sv-tx-muted);
  margin-top: 2px;
}
.fc2pac-rut {
  font-family: ui-monospace, monospace;
  color: var(--fc2sv-tx-muted);
}
.fc2pac-pixd {
  font-family: ui-monospace, monospace;
  color: var(--fc2sv-brand-soft);
}
.fc2pac-cie10-code {
  font-family: ui-monospace, monospace;
  color: var(--fc2sv-brand-soft);
  font-weight: 500;
}
.fc2pac-cie10-name {
  color: var(--fc2sv-tx-base);
}
.fc2pac-tipo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fc2sv-brand-muted);
  color: var(--fc2sv-brand-soft);
  border: 0.5px solid var(--fc2sv-brand-bd);
  font-size: 10.5px; font-weight: 500;
  flex-shrink: 0;
}
.fc2pac-tipo svg { width: 11px; height: 11px; }