/* ibbssMedia Studio — estilo "true-black flat" (tasteskill, seed 1912704219).
   Movimiento: elevación solo por luminosidad (#000 suelo, #111 tarjeta, #2a2a2a panel interior), sin bordes ni sombras
   en tarjetas; el color va solo a los datos. Cara del producto: el amarillo de nuestros subtítulos (la palabra activa)
   es el único tono de datos, y el nombre del canal se marca como en un subtítulo.
   Rejilla: sidebar 220 + lienzo fluido con 29px de margen; contenido 1fr + rail 360 con 14px de hueco. */
:root{
  --ground:#000;--surface:#111;--raised:#2a2a2a;--active:#1d1d1d;--border:#1a1a1a;--rule:#1f1f1f;--control:#444;
  --text:#fff;--muted:#b4b4b4;--faint:#949494;
  --accent:#f5c04a;--accent-ink:#000;
  --positive:#3fc07a;--negative:#e5484d;--warning:#e5a93b;
  --pill-positive-bg:#172a1d;--pill-positive-ink:#3fc07a;--pill-negative-bg:#2c1a20;--pill-negative-ink:#e5566f;
  --pill-warning-bg:#2b2414;--pill-warning-ink:#e5a93b;--pill-neutral-bg:#222;--pill-neutral-ink:#fff;
  --chart-1:var(--accent);--chart-2:#e6e6e6;--chart-3:#6b6b6b;--chart-muted:#4a4a4a;--chart-mark:#fff;--chart-span:.12;
  --grid:#232323;--axis-ink:#949494;--ink:#fff;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-title:20px;--fs-section:16px;--fs-kpi:24px;--fs-body:14px;--fs-small:12px;
  --radius-card:20px;--radius-control:999px;--gap:14px;--pad:22px;--control-height:36px;--sidebar-width:220px;
  --ease-out:cubic-bezier(.23,1,.32,1);--t-press:140ms;--t-hover:150ms;--t-ui:200ms;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font:var(--fs-body)/20px var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}ul[class],ol[class]{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num,table,.kpi-value{font-variant-numeric:tabular-nums}

/* ---- armazón: T con reglas de 1px ---- */
.app{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100svh}
.sidebar{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;border-right:1px solid var(--border);padding:0 12px 16px;overflow:auto;background:var(--ground)}
.brand{display:flex;align-items:center;gap:10px;height:64px;padding:0 8px;margin:0 -12px 8px;padding-left:20px;border-bottom:1px solid var(--border);font-weight:600}
.mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#000;display:grid;place-items:center;font-weight:600;font-size:13px;letter-spacing:-.02em}
.group-label{margin:18px 8px 6px;font-size:var(--fs-small);color:var(--faint)}
.nav-item{display:flex;align-items:center;gap:10px;height:32px;margin-bottom:2px;padding:0 8px;border-radius:8px;color:#bbb;transition:color var(--t-hover) ease,background-color var(--t-hover) ease}
.nav-item svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{color:#fff}
.nav-item[aria-current=page]{color:#fff;background:var(--active)}
.nav-item .count{margin-left:auto;font-size:var(--fs-small);color:#000;background:var(--accent);border-radius:999px;padding:0 7px;line-height:18px;font-weight:600}
.sidebar .bottom{margin-top:auto;padding-top:12px}
.me{display:flex;align-items:center;gap:10px;padding:8px;color:var(--muted)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;display:flex;align-items:center;gap:16px;padding:0 29px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--ground);z-index:5}
.topbar .crumb{color:var(--muted)}.topbar .crumb b{color:var(--text);font-weight:500}
.topbar .spacer{flex:1}
.topbar .divider{align-self:stretch;width:1px;background:var(--border)}
.canvas{padding:24px 29px 64px;min-width:0}
.btn.menu-toggle{display:none}

/* ---- título ---- */
.title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.title-row h1{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.title-row .sub{margin-top:6px;color:var(--muted);max-width:70ch}
.hl{background:var(--accent);color:#000;border-radius:5px;padding:0 5px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---- botones: el primario se hace por inversión ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-height);padding:0 16px;border-radius:var(--radius-control);border:1px solid var(--control);background:transparent;color:var(--text);font-weight:500;cursor:pointer;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--active)}.btn.primary:hover{background:#e6e6e6}}
.btn.primary{background:#fff;color:#000;border-color:transparent}
.btn.small{height:30px;padding:0 12px;font-size:13px}
.btn.danger{color:#e5566f}
.btn.ok{background:#fff;color:#000;border-color:transparent}

/* ---- rejilla y tarjetas (sin borde ni sombra) ---- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap);align-items:start}
.stack{display:grid;gap:var(--gap);min-width:0}
.card{background:var(--surface);border-radius:var(--radius-card);padding:var(--pad);min-width:0}
.card>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.card h2,.rail h2{font-size:var(--fs-section);font-weight:600;line-height:1.3}
.meta{color:var(--faint);font-size:var(--fs-small)}
.rail{display:grid;gap:8px;align-content:start}
.rail h2{margin:8px 0 0}
.rail h2:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}

/* ---- KPI: tipo, no baldosas ---- */
.kpis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--surface);border-radius:var(--radius-card)}
.kpi{padding:18px var(--pad)}
.kpi+.kpi{border-left:1px solid var(--ground)}
.kpi-label{color:var(--muted)}
.kpi-value{margin-top:6px;font-size:var(--fs-kpi);line-height:1.15;font-weight:500;letter-spacing:-.01em}
.kpi-value small{font-size:.55em;color:var(--muted);font-weight:400;margin-left:3px}
.caption{margin-top:4px;font-size:var(--fs-small);color:var(--faint)}
.up{color:var(--positive)}.down{color:var(--negative)}

/* ---- listas y tablas ---- */
.rows{display:grid;grid-template-columns:minmax(0,1fr)}
.lrow{display:flex;align-items:center;gap:12px;min-height:45px;padding:10px 0}
.lrow+.lrow{border-top:1px solid var(--rule)}
.lrow .grow{flex:1;min-width:0}
.lrow .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .s{display:block;font-size:var(--fs-small);color:var(--faint);margin-top:2px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{height:36px;padding:0 12px;text-align:left;font-weight:400;font-size:var(--fs-small);color:var(--faint);border-bottom:1px solid var(--rule);white-space:nowrap}
th a{color:inherit}th a[aria-sort]{color:var(--text)}
td{padding:14px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th.n,td.n{text-align:right}
td .sub{display:block;font-size:var(--fs-small);color:var(--faint)}
.truncate{max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank{width:28px;color:var(--faint)}
.thumb{width:36px;height:64px;object-fit:cover;border-radius:6px;flex:none;background:var(--raised)}

/* ---- personas: inicial con su tinte pálido (identidad, no dato) ---- */
.av{--h:42;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font-size:12px;font-weight:600;
  background:hsl(var(--h) 45% 82%);color:hsl(var(--h) 45% 18%)}
.av.lg{width:40px;height:40px;font-size:15px}
.avs{display:inline-flex}.avs .av+.av{margin-left:-6px;box-shadow:0 0 0 2px var(--surface)} /* taste-skill-ignore: anillo que separa iniciales solapadas, no una sombra */
.who{display:flex;align-items:center;gap:10px;min-width:0}

/* ---- barras de valor dentro de filas ---- */
.vbar{height:6px;border-radius:3px;background:var(--raised);overflow:hidden;min-width:60px}
.vbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.vbar.muted i{background:#6b6b6b}

/* ---- pastillas ---- */
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:var(--fs-small);font-weight:500;background:var(--pill-neutral-bg);color:var(--pill-neutral-ink);white-space:nowrap}
.pill.pos{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.pill.neg{background:var(--pill-negative-bg);color:var(--pill-negative-ink)}
.pill.warn{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}

/* ---- formularios ---- */
label.l{display:block;color:var(--muted);margin:14px 0 8px}
.input,select.input,textarea.input{width:100%;height:40px;padding:0 14px;border:1px solid var(--control);border-radius:12px;background:#0a0a0a;color:var(--text)}
textarea.input{height:auto;min-height:84px;padding:10px 14px;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23b4b4b4' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:34px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline .input{width:auto}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:999px;background:var(--raised);cursor:pointer;color:var(--muted);transition:color var(--t-hover) ease}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk:has(input:checked){color:#fff;background:#3a3a3a}
.chk:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---- pestañas ---- */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--rule);margin-bottom:var(--gap);overflow-x:auto}
.tabs a{position:relative;padding:10px 0;color:var(--muted);white-space:nowrap}
.tabs a[aria-selected=true]{color:var(--text)}
.tabs a[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text)}

/* ---- cola de aprobación ---- */
.qitem{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px}
.qitem video{width:100%;aspect-ratio:9/16;max-height:470px;border-radius:14px;background:#000;object-fit:contain}
details summary{cursor:pointer;color:var(--muted)}
pre{white-space:pre-wrap;font:13px/1.55 var(--font);background:var(--raised);border-radius:12px;padding:14px;margin:10px 0 0;max-height:360px;overflow:auto}
.alert{background:var(--surface);border-radius:14px;padding:12px 16px;margin-bottom:var(--gap);color:var(--muted)}
.alert b{color:var(--text)}
.empty{display:grid;place-items:center;min-height:96px;padding:16px;border:1px dashed #333;border-radius:14px;color:var(--faint);text-align:center}
.chart{position:relative;min-width:0}

/* ---- móvil ---- */
@media (max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;inset:0;width:100%;height:100%;z-index:30;transform:translateX(-100%);transition:transform var(--t-ui) var(--ease-out)}
  .sidebar.open{transform:none}
  .btn.menu-toggle{display:inline-flex}
  .topbar{padding:0 16px;height:56px}
  .topbar .hide-sm{display:none}
  .canvas{padding:18px 16px 56px}
  .kpis{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi+.kpi{border-left:0}.kpi:nth-child(2n){border-left:1px solid var(--ground)}.kpi:nth-child(n+3){border-top:1px solid var(--ground)}
  .kpi:last-child:nth-child(odd){grid-column:1/-1}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .qitem{grid-template-columns:minmax(0,1fr)}
  .qitem video{max-height:520px}
  .title-row{flex-wrap:wrap;align-items:flex-start}
  .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}
/* ---- notas del Obsidian ---- */
.doc{font-size:15px;line-height:1.6;max-width:none}
.doc h1{font-size:24px;line-height:1.25;font-weight:600;margin:0 0 14px}
.doc h2{font-size:18px;font-weight:600;margin:26px 0 10px}.doc h3{font-size:15px;font-weight:600;margin:20px 0 8px}
.doc p,.doc ul,.doc ol{margin:0 0 12px;max-width:78ch}.doc li{margin:3px 0}
.doc a{text-decoration:underline;text-decoration-color:#555;text-underline-offset:3px}
.doc a:hover{text-decoration-color:var(--accent)}
.doc table{margin:8px 0 16px;font-size:14px}.doc td{padding:10px 12px;vertical-align:top}
.doc code{background:var(--raised);border-radius:6px;padding:1px 6px;font-size:13px}
.doc pre code{background:none;padding:0}
.doc blockquote{margin:0 0 12px;padding:2px 0 2px 14px;border-left:3px solid var(--accent);color:var(--muted)}
.doc strong{font-weight:600}
/* ---- guía de conexión ---- */
.guia{background:#15140f}
.pasos{margin:0;padding-left:22px;display:grid;gap:10px;max-width:90ch}
.pasos li{padding-left:4px;color:var(--muted)}.pasos li b{color:var(--text);font-weight:500}
.guia a{text-decoration:underline;text-underline-offset:3px}
.guia code{background:var(--raised);border-radius:6px;padding:1px 6px;font-size:13px}
/* ---- hilo de cambios de un vídeo ---- */
.hilo{margin-top:14px;display:grid;gap:8px}
.msg{background:var(--raised);border-radius:14px;padding:10px 14px}
.msg p{margin-top:2px}
/* ---- conocimiento ---- */
.mapa{margin-bottom:var(--gap);padding-bottom:10px}
#grafo svg{display:block;width:100%;height:auto;touch-action:none}
.kb{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--gap);align-items:start}
.kb-nav{position:sticky;top:80px;max-height:calc(100svh - 100px);overflow:auto;padding-right:4px}
.kb-list summary{display:none}
.kb-folder{font-size:12px;color:var(--faint);font-weight:400;margin:16px 8px 4px}
.kb-item{height:auto;min-height:30px;padding:5px 8px;line-height:1.35}
@media (max-width:980px){
  .kb{grid-template-columns:minmax(0,1fr)}
  .kb-nav{position:static;max-height:none}
  .kb-list summary{display:block;margin:12px 0 4px;color:var(--text)}
}
.kb-nav form .input{flex:1;min-width:0;width:auto}
.stack>*{min-width:0}
@media (max-width:860px){.card>header .meta{display:none}.topbar .crumb b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}