/* ═══════════════════════════════════════════════════════════════════════
   cita-visor.css v2 — Visor transversal de citas clínicas — LUZOcrm v2
   Namespace: .cv-*  |  Tokens: var() exclusivos, cero hex hardcodeados
   Tipografía: 13-14px base, alineada al sistema
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes cv-fade-in  { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
@keyframes cv-fade-tab { from { opacity:0; transform:translateX(4px);  } to { opacity:1; transform:translateX(0); } }

.cv-root {
  display:flex; flex-direction:column;
  height:100%; min-height:0; overflow:hidden;
  background:var(--bg-card,var(--color-background-primary));
  font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* ── Header ── */
.cv-hdr {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px;
  border-bottom:0.5px solid var(--border,var(--color-border-tertiary));
  flex-shrink:0;
}
.cv-av {
  width:44px; height:44px; border-radius:50%;
  background:var(--color-background-info);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:500; color:var(--color-text-info); flex-shrink:0; overflow:hidden;
}
.cv-hdr-c   { flex:1; min-width:0; }
.cv-hdr-name {
  font-size:16px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:5px; color:var(--tx-base,var(--color-text-primary));
}
.cv-hdr-meta {
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  overflow:hidden; font-size:13px; color:var(--tx-muted,var(--color-text-secondary));
}
.cv-sep { color:var(--border,var(--color-border-secondary)); font-size:13px; flex-shrink:0; }

.cv-copy-chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-family:var(--font-mono,monospace);
  background:var(--bg-body,var(--color-background-secondary));
  border:0.5px solid var(--border,var(--color-border-secondary));
  border-radius:5px; padding:2px 8px; height:22px;
  color:var(--tx-muted,var(--color-text-secondary)); cursor:pointer; user-select:none;
  transition:border-color .12s,color .12s;
}
.cv-copy-chip:hover { border-color:var(--c-brand,#6d28d9); color:var(--c-brand,#6d28d9); }
.cv-copy-chip svg   { opacity:.4; transition:opacity .12s; flex-shrink:0; }
.cv-copy-chip:hover svg { opacity:1; }

.cv-badge-visibles {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; height:22px; border-radius:20px;
  font-size:12px; font-weight:500; white-space:nowrap; flex-shrink:0;
  background:linear-gradient(100deg,#e8178b,#e75225); color:#fff;
}

.cv-hdr-folio { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:3px; }
.cv-folio-lbl {
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tx-muted,var(--color-text-secondary));
}
.cv-folio-chip {
  display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:500; font-family:var(--font-mono,monospace);
  color:var(--tx-base,var(--color-text-primary)); cursor:pointer;
  padding:3px 10px; border-radius:6px;
  background:var(--bg-body,var(--color-background-secondary));
  border:0.5px solid var(--border,var(--color-border-secondary));
  transition:border-color .12s,color .12s;
}
.cv-folio-chip:hover { border-color:var(--c-brand,#6d28d9); color:var(--c-brand,#6d28d9); }
.cv-folio-chip svg   { opacity:.4; transition:opacity .12s; }
.cv-folio-chip:hover svg { opacity:.8; }

/* ── Banner urgente ── */
.cv-banner {
  display:flex; align-items:center; gap:12px;
  padding:10px 20px;
  border-bottom:0.5px solid var(--color-border-warning);
  flex-shrink:0; animation:cv-fade-in .16s ease both;
}
.cv-banner--warn     { background:var(--color-background-warning); }
.cv-banner--critical { background:#fef2f2; border-bottom-color:#fca5a5; }
.cv-banner-ico {
  width:32px; height:32px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cv-banner--warn     .cv-banner-ico { background:var(--color-text-warning); }
.cv-banner--critical .cv-banner-ico { background:#dc2626; }
.cv-banner-ico svg { color:#fff; }
.cv-banner-txt  { flex:1; min-width:0; }
.cv-banner-title { font-size:13px; font-weight:500; }
.cv-banner--warn     .cv-banner-title { color:var(--color-text-warning); }
.cv-banner--critical .cv-banner-title { color:#dc2626; }
.cv-banner-sub {
  font-size:12px; color:var(--tx-muted,var(--color-text-secondary));
  margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cv-banner-btn {
  padding:5px 12px; border-radius:6px; font-size:13px; font-weight:500;
  cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; flex-shrink:0; transition:background .12s;
  background:var(--bg-card,var(--color-background-primary));
}
.cv-banner-btn--warn     { border:0.5px solid var(--color-border-warning); color:var(--color-text-warning); }
.cv-banner-btn--warn:hover { background:var(--color-background-warning); }
.cv-banner-btn--critical { border:0.5px solid #fca5a5; color:#dc2626; }
.cv-banner-btn--critical:hover { background:#fef2f2; }

/* ── Progreso Visibles ── */
.cv-prog-strip {
  display:flex; align-items:center; gap:14px;
  padding:10px 20px;
  border-bottom:0.5px solid var(--border,var(--color-border-tertiary));
  background:var(--bg-body,var(--color-background-secondary)); flex-shrink:0;
}
.cv-prog-label {
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tx-muted,var(--color-text-secondary)); white-space:nowrap; flex-shrink:0;
}
.cv-prog-track {
  flex:1; height:5px; background:var(--border,var(--color-border-tertiary));
  border-radius:3px; overflow:hidden;
}
.cv-prog-fill { height:100%; border-radius:3px; background:var(--c-brand,#6d28d9); transition:width .3s ease; }
.cv-prog-count { font-size:13px; color:var(--tx-muted,var(--color-text-secondary)); white-space:nowrap; flex-shrink:0; }
.cv-prog-count b { color:var(--tx-base,var(--color-text-primary)); font-weight:500; }

/* ── Body 3 columnas ── */
.cv-body { display:grid; grid-template-columns:30% 28% 42%; flex:1; min-height:0; overflow:hidden; min-width:0; }

.cv-col {
  padding:18px 20px;
  border-right:0.5px solid var(--border,var(--color-border-tertiary));
  min-width:0; overflow-y:auto;
}
.cv-col:last-child  { border-right:none; padding:0; }
.cv-col::-webkit-scrollbar { width:3px; }
.cv-col::-webkit-scrollbar-thumb { background:var(--border,var(--color-border-tertiary)); border-radius:2px; }
.cv-col { scrollbar-width:thin; scrollbar-color:var(--border,#e2e8f0) transparent; }

/* ── Secciones ── */
.cv-sec {
  font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tx-muted,var(--color-text-secondary)); margin:0 0 12px;
  display:flex; align-items:center; gap:6px;
}
.cv-sec svg     { flex-shrink:0; opacity:.5; }
.cv-sec--mt     { margin-top:20px; }

/* ── Campos sin separadores ── */
.cv-f {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:5px 0; gap:10px; min-width:0;
}
.cv-fl { font-size:13px; color:var(--tx-muted,var(--color-text-secondary)); white-space:nowrap; flex-shrink:0; }
.cv-fv {
  font-size:14px; font-weight:500; color:var(--tx-base,var(--color-text-primary));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
}
.cv-fv--monto { color:var(--color-text-success,#15803d); }
.cv-fv--mono  { font-family:var(--font-mono,monospace); font-size:13px; }

.cv-f-copy { display:flex; justify-content:space-between; align-items:center; padding:5px 0; gap:10px; min-width:0; }
.cv-f-copy .cv-fl { font-size:13px; color:var(--tx-muted,var(--color-text-secondary)); white-space:nowrap; flex-shrink:0; }
.cv-f-copy-val { display:flex; align-items:center; gap:6px; min-width:0; justify-content:flex-end; }
.cv-f-copy-text { font-size:13px; font-weight:500; font-family:var(--font-mono,monospace); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tx-base,var(--color-text-primary)); }
.cv-copy-ico {
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:4px;
  border:0.5px solid var(--border,var(--color-border-secondary));
  background:var(--bg-body,var(--color-background-secondary));
  cursor:pointer; flex-shrink:0; transition:border-color .12s,color .12s;
  color:var(--tx-muted,var(--color-text-secondary));
}
.cv-copy-ico:hover { border-color:var(--c-brand,#6d28d9); color:var(--c-brand,#6d28d9); }
.cv-copy-ico svg  { opacity:.5; transition:opacity .12s; }
.cv-copy-ico:hover svg { opacity:1; }

/* ── Prof row ── */
.cv-prof-row { display:flex; align-items:center; gap:10px; padding:8px 0; }
.cv-prof-halo {
  width:34px; height:34px; border-radius:50%; background:#ede9fe;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; color:var(--c-brand,#6d28d9); flex-shrink:0; overflow:hidden;
}
.cv-prof-info { flex:1; min-width:0; }
.cv-prof-name { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tx-base,var(--color-text-primary)); }
.cv-prof-esp  { font-size:12px; color:var(--tx-muted,var(--color-text-secondary)); }

/* ── Colapsables ── */
.cv-coll { border:0.5px solid var(--border,var(--color-border-tertiary)); border-radius:8px; overflow:hidden; margin-top:10px; transition:border-color .15s; }
.cv-coll:first-child { margin-top:0; }
.cv-coll--ok   { border-color:var(--color-border-success); }
.cv-coll--warn { border-color:var(--color-border-warning); }
.cv-coll-hdr {
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  cursor:pointer; user-select:none; transition:background .12s;
}
.cv-coll-hdr:hover             { background:var(--bg-body,var(--color-background-secondary)); }
.cv-coll--ok   .cv-coll-hdr   { background:var(--color-background-success); }
.cv-coll--warn .cv-coll-hdr   { background:var(--color-background-warning); }
.cv-coll-ico { flex-shrink:0; }
.cv-ct       { flex:1; min-width:0; }
.cv-ct-title { font-size:14px; font-weight:500; white-space:nowrap; }
.cv-coll--ok   .cv-ct-title { color:var(--color-text-success); }
.cv-coll--warn .cv-ct-title { color:var(--color-text-warning); }
.cv-ct-sub   { font-size:12px; color:var(--tx-muted,var(--color-text-secondary)); white-space:nowrap; margin-top:1px; }
.cv-chev { flex-shrink:0; color:var(--tx-muted,var(--color-text-secondary)); transition:transform .18s ease; }
.cv-coll-body {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .22s ease,opacity .18s ease;
}
.cv-coll-body--open {
  max-height:240px; opacity:1;
  padding:10px 12px;
  border-top:0.5px solid var(--border,var(--color-border-tertiary));
  background:var(--bg-body,var(--color-background-secondary));
}
.cv-coll--ok   .cv-coll-body--open { border-top-color:var(--color-border-success); }
.cv-coll--warn .cv-coll-body--open { border-top-color:var(--color-border-warning); }
.cv-coll-act {
  font-size:13px; color:var(--c-brand,#6d28d9); cursor:pointer;
  display:flex; align-items:center; gap:4px;
  background:none; border:none; padding:0; font-family:inherit;
  margin-top:8px; transition:opacity .12s;
}
.cv-coll-act:hover { opacity:.7; }
.cv-action-btn {
  width:100%; padding:7px 10px; border-radius:6px;
  font-size:13px; font-weight:500; cursor:pointer;
  border:0.5px solid var(--border,var(--color-border-secondary));
  background:var(--bg-card,var(--color-background-primary));
  color:var(--tx-base,var(--color-text-primary));
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:8px; transition:border-color .12s,color .12s;
}
.cv-action-btn:hover { border-color:var(--c-brand,#6d28d9); color:var(--c-brand,#6d28d9); }
.cv-action-btn--brand { background:var(--c-brand,#6d28d9); color:#fff; border-color:var(--c-brand,#6d28d9); }
.cv-action-btn--brand:hover { opacity:.88; color:#fff; border-color:var(--c-brand,#6d28d9); }

/* ── Badges (ancho uniforme) ── */
.cv-badge {
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:500; border-radius:4px;
  white-space:nowrap; flex-shrink:0; height:18px; width:70px;
}
.cv-badge--ok   { background:var(--color-background-success); color:var(--color-text-success); border:0.5px solid var(--color-border-success); }
.cv-badge--pac  { background:#ede9fe; color:#5b21b6; border:0.5px solid #c4b5fd; }
.cv-badge--prof { background:var(--color-background-info); color:var(--color-text-info); border:0.5px solid var(--color-border-info); }
.cv-badge--sys  { background:var(--bg-body,var(--color-background-secondary)); color:var(--tx-muted,var(--color-text-secondary)); border:0.5px solid var(--border,var(--color-border-tertiary)); }
.cv-badge--warn { background:var(--color-background-warning); color:var(--color-text-warning); border:0.5px solid var(--color-border-warning); }

.cv-dr  { display:flex; gap:8px; padding:3px 0; }
.cv-dl  { font-size:12px; color:var(--tx-muted,var(--color-text-secondary)); width:68px; flex-shrink:0; }
.cv-dv  { font-size:13px; font-family:var(--font-mono,monospace); color:var(--tx-base,var(--color-text-primary)); word-break:break-all; }
.cv-dv--text { font-family:var(--font-sans,-apple-system,sans-serif); }

/* ── Col historial ── */
.cv-col--hist { overflow:hidden; display:flex; flex-direction:column; }
.cv-hist-nav {
  display:flex; align-items:center; gap:8px;
  padding:14px 20px 10px;
  border-bottom:0.5px solid var(--border,var(--color-border-tertiary));
  flex-shrink:0;
}
.cv-hn {
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tx-muted,var(--color-text-secondary)); cursor:pointer;
  background:none; border:none; padding:0; font-family:inherit;
  display:flex; align-items:center; gap:5px; user-select:none; transition:color .12s;
}
.cv-hn:hover   { color:var(--tx-base,var(--color-text-primary)); }
.cv-hn--on     { color:var(--tx-base,var(--color-text-primary)); }
.cv-hn svg     { opacity:.4; transition:opacity .12s; }
.cv-hn--on svg { opacity:.8; }
.cv-hn-sep     { color:var(--border,var(--color-border-secondary)); font-size:12px; pointer-events:none; }
.cv-hist-panel     { display:none; flex:1; overflow-y:auto; padding:14px 20px; }
.cv-hist-panel--on { display:block; animation:cv-fade-tab .16s ease both; }
.cv-hist-panel::-webkit-scrollbar { width:3px; }
.cv-hist-panel::-webkit-scrollbar-thumb { background:var(--border,var(--color-border-tertiary)); border-radius:2px; }

/* ── Timeline ── */
.cv-tl         { padding-left:18px; position:relative; }
.cv-tl-line    { position:absolute; left:4px; top:10px; bottom:10px; width:0.5px; background:var(--border,var(--color-border-secondary)); }
.cv-tn         { position:relative; padding:6px 0; }
.cv-tn+.cv-tn  { border-top:0.5px solid var(--border,var(--color-border-tertiary)); }
.cv-td {
  position:absolute; left:-18px; top:10px;
  width:9px; height:9px; border-radius:50%;
  background:var(--border,var(--color-border-secondary));
  border:2px solid var(--bg-card,var(--color-background-primary));
  transition:background .15s;
}
.cv-td--ok   { background:var(--color-text-success); }
.cv-td--warn { background:var(--color-text-warning); }
.cv-tn-hdr   { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.cv-tn-main  { flex:1; min-width:0; }
.cv-ta       { font-size:14px; font-weight:500; color:var(--tx-base,var(--color-text-primary)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-tt       { font-size:12px; font-family:var(--font-mono,monospace); color:var(--tx-muted,var(--color-text-secondary)); margin-top:2px; }
.cv-tn-chev  { flex-shrink:0; color:var(--tx-muted,var(--color-text-secondary)); transition:transform .15s ease; }
.cv-tn-detail { max-height:0; overflow:hidden; opacity:0; transition:max-height .2s ease,opacity .15s ease; }
.cv-tn-detail--open { max-height:160px; opacity:1; margin-top:6px; }
.cv-tn-inner {
  padding:8px 10px;
  background:var(--bg-body,var(--color-background-secondary));
  border-radius:6px; border:0.5px solid var(--border,var(--color-border-tertiary));
}

/* ── Últimas citas ── */
.cv-cita-item  { padding:8px 0; }
.cv-cita-item+.cv-cita-item { border-top:0.5px solid var(--border,var(--color-border-tertiary)); }
.cv-cita-row   { display:flex; align-items:center; gap:8px; }
.cv-cita-fecha { font-size:14px; font-weight:500; white-space:nowrap; flex-shrink:0; color:var(--tx-base,var(--color-text-primary)); }
.cv-cita-folio { font-size:12px; font-family:var(--font-mono,monospace); color:var(--tx-muted,var(--color-text-secondary)); margin-left:auto; flex-shrink:0; }
.cv-cita-sub   { font-size:13px; color:var(--tx-muted,var(--color-text-secondary)); margin-top:2px; }
.cv-empty      { font-size:13px; color:var(--tx-muted,var(--color-text-secondary)); padding:16px 0; }

/* ── Actions bar ── */
.cv-actions {
  display:flex; align-items:center; gap:8px;
  padding:12px 20px;
  border-top:0.5px solid var(--border,var(--color-border-tertiary));
  background:var(--bg-body,var(--color-background-secondary));
  flex-shrink:0; flex-wrap:nowrap; width:100%;
}
.cv-btn {
  padding:7px 14px; border-radius:7px; font-size:14px; font-weight:500;
  cursor:pointer; border:0.5px solid var(--border,var(--color-border-secondary));
  background:transparent; color:var(--tx-base,var(--color-text-primary));
  white-space:nowrap; display:flex; align-items:center; gap:6px;
  transition:background .12s,transform .08s;
}
.cv-btn:hover          { background:var(--bg-card,var(--color-background-primary)); }
.cv-btn:active         { transform:scale(.97); }
.cv-btn--brand         { background:var(--c-brand,#6d28d9); color:#fff; border-color:var(--c-brand,#6d28d9); }
.cv-btn--brand:hover   { opacity:.9; }
.cv-spc  { flex:1; }
.cv-lock { font-size:12px; color:var(--tx-muted,var(--color-text-secondary)); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cv-split-wrap  { display:flex; position:relative; }
.cv-split-main  {
  padding:7px 12px; border-radius:7px 0 0 7px; font-size:14px; font-weight:500;
  cursor:pointer; border:0.5px solid var(--color-border-danger); border-right:none;
  background:transparent; color:var(--color-text-danger);
  white-space:nowrap; display:flex; align-items:center; gap:6px; transition:background .12s;
}
.cv-split-main:hover  { background:var(--color-background-warning); }
.cv-split-arr {
  padding:7px 9px; border-radius:0 7px 7px 0; cursor:pointer;
  border:0.5px solid var(--color-border-danger); background:transparent;
  color:var(--color-text-danger); display:flex; align-items:center; transition:background .12s;
}
.cv-split-arr:hover   { background:var(--color-background-warning); }
.cv-split-menu {
  position:absolute; bottom:calc(100% + 6px); right:0;
  background:var(--bg-card,var(--color-background-primary));
  border:0.5px solid var(--border,var(--color-border-secondary));
  border-radius:8px; box-shadow:0 -4px 20px rgba(0,0,0,.1);
  z-index:100; min-width:220px; overflow:hidden; display:none;
  animation:cv-fade-in .14s ease both;
}
.cv-split-menu--open { display:block; }
.cv-sm-item {
  padding:10px 14px; font-size:14px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  color:var(--color-text-danger); transition:background .1s;
}
.cv-sm-item:hover { background:var(--color-background-warning); }

/* ── Skeleton ── */
.cv-skel { padding:20px; display:flex; flex-direction:column; gap:10px; }

/* controles header */
.cv-hdr-controls { display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:8px; }
.cv-ctrl-btn {
  width:28px; height:28px; border-radius:6px;
  border:0.5px solid var(--border,var(--color-border-secondary));
  background:transparent; color:var(--tx-muted,var(--color-text-secondary));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s,color .12s;
}
.cv-ctrl-btn:hover { background:var(--bg-body,var(--color-background-secondary)); color:var(--tx-base,var(--color-text-primary)); }

/* ── Override ld-blade-body para cv-root ── */
.ld-blade-body:has(.cv-root) {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}