/* ============================================================
   Agenda doctoral — paleta librARy
   Tokens convertidos a CSS estándar (sin build, sin Tailwind)
   ============================================================ */

:root{
  /* ── MARCA ── */
  --brand:        #7ECACC;
  --brand-neon:   #0FC2C0;
  --brand-dim:    #4E8C8E;
  --brand-ghost:  #7ECACC1A;

  /* ── SUPERFICIES ── */
  --bg:           #2A2D32;
  --surface:      #32363C;
  --surface-2:    #3A3F46;
  --surface-3:    #464C55;
  --border:       #FFFFFF14;
  --border-strong:#FFFFFF26;

  /* ── TEXTO ── */
  --fg:           #F2F4F5;
  --fg-muted:     #A8AEB6;
  --fg-subtle:    #6E757E;

  /* ── SEMÁNTICOS ── */
  --done:         #8DE667;
  --progress:     #0FC2C0;
  --soon:         #E6C067;
  --overdue:      #E6675F;
  --idle:         #6E757E;

  /* ── FASES ── */
  --phase-1:      #2D6E1A;
  --phase-2:      #5B8C2A;
  --phase-3:      #8DE667;
  --phase-4:      #C4E88A;

  /* ── TIPOGRAFÍA ── */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-2xs:  .6875rem;
  --text-xs:   .75rem;
  --text-sm:   .8125rem;
  --text-base: .9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;

  --tracking-tight: -.015em;
  --tracking-wide:   .08em;

  /* ── RADIOS ── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* ── SOMBRAS ── */
  --shadow-card: 0 1px 2px #00000040, 0 8px 24px #00000026;
  --shadow-pop:  0 4px 12px #00000059, 0 24px 48px #0000003D;
  --glow-brand:  0 0 0 1px #0FC2C059, 0 0 20px #0FC2C033;
  --glow-done:   0 0 0 1px #8DE66759, 0 0 16px #8DE66726;

  /* ── MOVIMIENTO ── */
  --dur-instant: 120ms;
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    500ms;
  --dur-travel:  1200ms;

  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes breathe {
  0%,100%{ box-shadow:0 0 0 1px #0FC2C040, 0 0 12px #0FC2C01A }
  50%    { box-shadow:0 0 0 1px #0FC2C099, 0 0 28px #0FC2C040 }
}
@keyframes fillBar { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes spin    { to{transform:rotate(360deg)} }

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  letter-spacing:var(--tracking-tight);
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-dim)}
::selection{background:var(--brand-neon);color:var(--bg)}
:focus-visible{outline:2px solid var(--brand-neon);outline-offset:2px}
button{font:inherit;letter-spacing:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}

.label{
  font-size:var(--text-2xs);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--fg-subtle);font-weight:500;
}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.shell{max-width:1240px;margin:0 auto;padding:0 clamp(12px,3vw,28px) 96px}

.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  margin:0 calc(-1 * clamp(12px,3vw,28px));
  padding:12px clamp(12px,3vw,28px);
}
.topbar-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:10px;min-width:0}
.brandmark img{height:26px;width:auto;display:block}
.brandmark .fallback{
  height:26px;padding:0 9px;border-radius:var(--radius-sm);
  border:1px solid var(--brand-dim);color:var(--brand);
  display:flex;align-items:center;font-size:var(--text-2xs);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
}
.brandmark h1{font-size:var(--text-sm);font-weight:600;margin:0;white-space:nowrap}
.brandmark .sep{width:1px;height:20px;background:var(--border-strong)}

.tabs{display:flex;gap:4px;margin-left:auto;background:var(--surface);padding:4px;border-radius:var(--radius)}
.tab{
  padding:.45rem .85rem;font-size:var(--text-sm);color:var(--fg-muted);
  border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tab:hover{color:var(--fg);background:var(--surface-2)}
.tab[data-active="true"]{color:var(--bg);background:var(--brand-neon);box-shadow:var(--glow-brand);font-weight:600}
.tabcount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;margin-left:2px;border-radius:99px;
  background:var(--overdue);color:var(--bg);font-size:var(--text-2xs);font-weight:700;line-height:16px;
}

.countdown{display:flex;gap:16px;align-items:center;font-size:var(--text-xs);color:var(--fg-muted)}
.countdown b{font-family:var(--font-mono);color:var(--brand);font-size:var(--text-sm)}

/* ── barra de guardado ── */
.savebar{
  display:flex;flex-direction:column;gap:7px;margin-top:10px;
  padding:8px 12px;border-radius:var(--radius-sm);
  background:var(--brand-ghost);border:1px solid var(--brand-dim);
  font-size:var(--text-xs);animation:fadeInUp var(--dur-fast) var(--ease-out);
}
.savebar-row{display:flex;align-items:center;gap:10px}
.savebar-row .grow{flex:1}
.savebar-list{list-style:none;margin:0;padding:6px 0 0;border-top:1px solid var(--brand-dim);
  display:flex;flex-direction:column;gap:3px;max-height:140px;overflow-y:auto}
.savebar-list li{display:flex;justify-content:space-between;gap:12px;color:var(--fg-muted)}
.savebar-list li .mono{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  background:var(--brand-neon);color:var(--bg);border-radius:var(--radius-sm);
  padding:.5rem 1rem;font-size:var(--text-sm);font-weight:600;
  transition:filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover{filter:brightness(1.12);box-shadow:var(--glow-brand)}
.btn:active{filter:brightness(.92)}
.btn:disabled{opacity:.5;cursor:default;filter:none;box-shadow:none}
.btn--ghost{background:transparent;color:var(--brand);border:1px solid var(--brand-dim)}
.btn--ghost:hover{background:var(--brand-ghost);filter:none}
.btn--ghost[data-active="true"]{background:var(--brand-ghost);color:var(--brand-neon);border-color:var(--brand-neon)}
.btn--sm{padding:.3rem .6rem;font-size:var(--text-xs)}

/* ============================================================
   TARJETAS
   ============================================================ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.card:hover{background:var(--surface-2);border-color:var(--border-strong);transform:translateY(-1px)}
.card--done{border-left:3px solid var(--done)}
.card--progress{border-left:3px solid var(--progress)}
.card--soon{border-left:3px solid var(--soon)}
.card--overdue{border-left:3px solid var(--overdue)}
.card--idle{border-left:3px solid var(--idle)}
.card--urgent{animation:breathe 3.2s var(--ease-in-out) infinite}

/* ── item de agenda ── */
.ev{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;cursor:pointer;text-align:left;width:100%}
.ev-check{
  width:18px;height:18px;flex:none;margin-top:1px;border-radius:5px;
  border:1.5px solid var(--fg-subtle);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast) var(--ease-out);
}
.ev-check:hover{border-color:var(--brand-neon)}
.ev-check[data-on="true"]{background:var(--done);border-color:var(--done);box-shadow:var(--glow-done)}
.ev-check svg{width:11px;height:11px;stroke:var(--bg);stroke-width:3.2;fill:none;opacity:0}
.ev-check[data-on="true"] svg{opacity:1}
.ev-body{flex:1;min-width:0}
.ev-title{font-size:var(--text-sm);line-height:1.35;margin:0 0 3px}
.ev[data-done="true"] .ev-title{color:var(--fg-subtle);text-decoration:line-through}
.ev-meta{display:flex;gap:9px;flex-wrap:wrap;font-size:var(--text-2xs);color:var(--fg-subtle)}
.ev-meta .mono{color:var(--fg-muted)}
.chip{
  padding:1px 7px;border-radius:99px;font-size:var(--text-2xs);
  border:1px solid var(--border-strong);color:var(--fg-muted);
}
.chip--soon{color:var(--soon);border-color:#E6C06759}
.chip--overdue{color:var(--overdue);border-color:#E6675F59}
.chip--done{color:var(--done);border-color:#8DE66759}

/* ── control de transición de estado (sustituye a la casilla) ── */
.transicion{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev-tr{padding:0 13px 12px;margin-top:-3px}

/* ============================================================
   VISTA: SEMANA / HOY
   ============================================================ */
.view{animation:fadeInUp var(--dur-slow) var(--ease-out);padding-top:22px}
.sec{margin-bottom:30px}
.sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sec-h h2{font-size:var(--text-lg);font-weight:600;margin:0}
.sec-h .n{margin-left:auto;font-size:var(--text-xs);color:var(--fg-subtle)}
.stack{display:flex;flex-direction:column;gap:8px}

/* ── vista Urgente: accionable vs. esperando ── */
.urgente-bloque{margin-bottom:32px}
.urgente-bloque:last-child{margin-bottom:0}
.urgente-h{
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  color:var(--fg-subtle);font-weight:600;margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:9px;min-height:118px;
}
.day[data-today="true"]{border-color:var(--brand-neon);box-shadow:var(--glow-brand)}
.day[data-weekend="true"]{background:#2E3238}
.day-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.day-h .dw{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--fg-subtle)}
.day-h .dn{font-family:var(--font-mono);font-size:var(--text-base);color:var(--fg-muted)}
.day[data-today="true"] .dn{color:var(--brand-neon);font-weight:600}
.pill{
  display:block;width:100%;text-align:left;font-size:var(--text-2xs);line-height:1.3;
  padding:4px 6px;border-radius:5px;margin-bottom:4px;
  background:var(--surface-2);border-left:2px solid var(--idle);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-instant) var(--ease-out);
}
.pill:hover{background:var(--surface-3)}
.pill[data-k="congreso"]{border-left-color:var(--brand-neon)}
.pill[data-k="artículo"]{border-left-color:var(--phase-3)}
.pill[data-k="critico"]{border-left-color:var(--overdue)}
.pill[data-k="estancia"]{border-left-color:var(--soon)}
.pill[data-done="true"]{opacity:.45;text-decoration:line-through}

/* ============================================================
   VISTA: MES
   ============================================================ */
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.month .dow{
  text-align:center;padding:6px 0;font-size:var(--text-2xs);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--fg-subtle);
}
.mday{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px;min-height:92px;font-size:var(--text-2xs);
}
.mday[data-out="true"]{opacity:.32}
.mday[data-today="true"]{border-color:var(--brand-neon);box-shadow:var(--glow-brand)}
.mday .n{font-family:var(--font-mono);color:var(--fg-muted);display:block;margin-bottom:4px}
.mday[data-today="true"] .n{color:var(--brand-neon);font-weight:600}

/* ============================================================
   VISTA: PLAN (gantt)
   ============================================================ */
.chart{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow-x:auto;overflow-y:hidden;
  --rl-w: 118px; --lane-h: 24px;
}
.chart-inner{min-width:760px}
.axis-years,.axis-months{display:flex;background:var(--surface-2)}
.axis-years{border-bottom:1px solid var(--border)}
.axis-months{border-bottom:1px solid var(--border)}
.axis-years .sp,.axis-months .sp{width:var(--rl-w);flex:none}
.axis-years .row,.axis-months .row{display:flex;flex:1;min-width:0}
.y{flex:1;text-align:center;padding:6px 0;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--fg-subtle);border-left:1px solid var(--border-strong)}
.m{flex:1;text-align:center;padding:3px 0;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--fg-subtle);border-left:1px solid var(--border);overflow:hidden;white-space:nowrap}
.m[data-enero="true"]{border-left:1px solid var(--brand-dim)}
.grow-rows{position:relative}
.grow-row{display:flex;align-items:center;min-height:40px;border-bottom:1px solid var(--border);position:relative}
.grow-row:last-child{border-bottom:none}
.rl{width:var(--rl-w);flex:none;padding:6px 9px;border-right:1px solid var(--border);position:relative;z-index:3}
.rl .id{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:600;color:var(--brand)}
.rl .id[data-no="true"]{color:var(--fg-subtle)}
.rl .t{font-size:var(--text-2xs);color:var(--fg-muted);line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk{position:relative;flex:1;min-height:40px}
.bar{position:absolute;top:calc(11px + var(--lane,0) * var(--lane-h));height:18px;display:flex;border-radius:3px;overflow:hidden;cursor:pointer}
.bar .s{height:100%;background:var(--brand-neon);opacity:.85}
.bar .h{height:100%;background:repeating-linear-gradient(45deg,#0FC2C059 0 3px,transparent 3px 6px);border:1px solid #0FC2C059;border-left:none}
.bar[data-risk="true"] .s{background:var(--overdue)}
.bar[data-risk="true"] .h{background:repeating-linear-gradient(45deg,#E6675F59 0 3px,transparent 3px 6px);border-color:#E6675F59}
.bar[data-no="true"] .s{background:var(--idle)}
.bar[data-no="true"] .h{background:repeating-linear-gradient(45deg,#6E757E59 0 3px,transparent 3px 6px);border-color:#6E757E59}
.bar-tag{position:absolute;left:calc(100% + 8px);top:0;white-space:nowrap;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--fg-subtle)}
.stay{position:absolute;top:calc(11px + var(--lane,0) * var(--lane-h));height:18px;border-radius:3px;background:#E6C06726;border:1px solid var(--soon);cursor:pointer}
.stay[data-verificar="true"]{border-style:dashed}
.stay span{position:absolute;left:7px;line-height:16px;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--soon);white-space:nowrap}
.nowline{position:absolute;top:0;bottom:0;width:1px;background:var(--brand-neon);z-index:2;pointer-events:none}
.depline{position:absolute;top:0;bottom:0;width:1px;background:var(--overdue);z-index:2;pointer-events:none}
.yearline{position:absolute;top:0;bottom:0;width:1px;background:var(--border-strong);pointer-events:none}
.hoverline{position:absolute;top:0;bottom:0;width:1px;background:var(--fg-muted);opacity:.8;z-index:2;pointer-events:none}
.fiestaband{position:absolute;top:0;bottom:0;background:var(--idle);opacity:.15;pointer-events:none}

/* modo compacto: bandas de fondo para periodos largos (estancias,
   ventana de envío-a-aceptación de cada artículo), a toda altura en
   vez de una fila cada una */
.bandalarga{position:absolute;top:0;bottom:0;opacity:.16;pointer-events:none;border-radius:3px}
.bandalarga--estancia{background:var(--soon)}
.bandalarga--articulo{background:var(--brand-neon)}
.bandalarga--articulo[data-risk="true"]{background:var(--overdue)}

/* marcadores puntuales del gantt: congresos, hitos, candidatos */
.mk-wrap{
  position:absolute;top:calc(10px + var(--lane,0) * var(--lane-h));
  display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;
}
.mk-wrap[data-flip="true"]{flex-direction:row-reverse}
.mk-label{font-size:var(--text-2xs);color:var(--fg-subtle)}
.mk{
  width:10px;height:10px;flex:none;border-radius:99px;
  background:var(--brand-neon);box-shadow:0 0 0 2px var(--surface);
  transition:transform var(--dur-fast) var(--ease-out);
}
.mk-wrap:hover .mk{transform:scale(1.5)}
.mk--sub{width:6px;height:6px;background:var(--fg-subtle)}
.mk--hito{background:var(--idle)}
.mk--hito[data-tipo="critico"]{background:var(--overdue)}
.mk--cand{background:transparent;border:2px dashed var(--soon);width:9px;height:9px;box-shadow:none}

/* fecha estimada (verificar: true): banda del mes en vez de punto */
.estband{
  position:absolute;top:calc(6px + var(--lane,0) * var(--lane-h));height:18px;border-radius:3px;
  background:transparent;border:1.5px dashed var(--fg-subtle);cursor:pointer;box-sizing:border-box;
}
.estband--congreso{border-color:var(--brand-neon)}

/* contador compendio */
.tally{display:flex;gap:7px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.pip{
  width:34px;height:34px;border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--fg-subtle);
}
.pip[data-on="true"]{border-color:var(--brand-neon);color:var(--brand-neon)}
.pip[data-spare="true"]{border-style:dashed}
.pip[data-ok="true"]{border-color:var(--done);color:var(--done);box-shadow:var(--glow-done)}

/* ============================================================
   VISTA: CANDIDATOS
   ============================================================ */
.cand{padding:14px 16px}
.cand-porque{font-size:var(--text-sm);color:var(--fg-muted);line-height:1.5;margin:7px 0}
.cand-fuente{margin:0 0 11px}
.cand-actions{display:flex;gap:8px}
.cand[data-descartado="true"]{opacity:.5}
.cand[data-descartado="true"] .ev-title{text-decoration:line-through}

/* ============================================================
   VISTA: PLAN — tarjetas de detalle
   ============================================================ */
.cards2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){ .cards2{grid-template-columns:1fr 1fr} }
.cardplan{padding:16px}
.cardplan-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.cardplan-h h3{font-size:var(--text-sm);font-weight:600;margin:0;line-height:1.4}
.cardplan-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.cardplan-dl{margin:0}
.dls{list-style:none;margin:9px 0 0;padding:0}
.dls li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:var(--text-sm);flex-wrap:wrap}
.dls li:last-child{border-bottom:none}
.dls li>span:first-child{flex:1;min-width:0}
.dls li .mono{color:var(--fg-muted);font-size:var(--text-xs);white-space:nowrap}
.linklist{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px}
.link{font-size:var(--text-xs);color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.link:hover{color:var(--brand-neon)}

/* ============================================================
   VISTA: RANGO
   ============================================================ */
.rangebar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:4px}
.field input,.field select{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.42rem .6rem;font-size:var(--text-sm);
  font-family:var(--font-mono);color-scheme:dark;
}
.field textarea{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.6rem .7rem;font-size:var(--text-sm);
  font-family:var(--font-sans);color-scheme:dark;width:100%;resize:vertical;line-height:1.5;
}
.quick{display:flex;gap:5px;flex-wrap:wrap}

/* ============================================================
   VISTA: LOGROS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:26px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.stat b{display:block;font-family:var(--font-mono);font-size:var(--text-2xl);line-height:1.1;color:var(--brand-neon)}
.stat[data-done="true"] b{color:var(--done)}
.stat span{font-size:var(--text-2xs);color:var(--fg-subtle);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.progress{height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden;margin-top:9px}
.progress i{display:block;height:100%;background:var(--done);border-radius:99px;transform-origin:left;animation:fillBar var(--dur-slow) var(--ease-out)}

.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1px;background:var(--border-strong)}
.tl-i{position:relative;padding:9px 0}
.tl-i::before{
  content:"";position:absolute;left:-21px;top:14px;width:9px;height:9px;border-radius:99px;
  background:var(--done);box-shadow:var(--glow-done);
}

/* ============================================================
   PANEL DE DETALLE
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:60;background:#00000080;backdrop-filter:blur(3px);
  animation:fadeIn var(--dur-fast) var(--ease-out);
}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(460px,100%);
  background:var(--surface);border-left:1px solid var(--border-strong);
  box-shadow:var(--shadow-pop);overflow-y:auto;
  animation:slideIn var(--dur-base) var(--ease-out);
}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
.panel-h{
  position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);
  padding:16px 18px;display:flex;gap:12px;align-items:flex-start;
}
.panel-h h3{font-size:var(--text-lg);margin:0 0 5px;line-height:1.25;font-weight:600}
.panel-b{padding:18px}
.row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--text-sm)}
.row:last-child{border-bottom:none}
.row dt{width:118px;flex:none;color:var(--fg-subtle);font-size:var(--text-xs)}
.row dd{margin:0;flex:1;min-width:0}
.note{
  margin-top:16px;padding:13px;border-radius:var(--radius-sm);
  background:var(--surface-2);border-left:2px solid var(--brand-dim);
  font-size:var(--text-sm);line-height:1.55;color:var(--fg-muted);
}
.x{width:30px;height:30px;flex:none;border-radius:var(--radius-sm);color:var(--fg-muted);font-size:18px;line-height:1}
.x:hover{background:var(--surface-3);color:var(--fg)}

/* ============================================================
   MODAL TOKEN
   ============================================================ */
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:70;
  width:min(460px,92vw);max-height:90vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:22px;
}
.modal--ancho{width:min(640px,92vw)}
.panel--ancho{width:min(760px,96vw)}

/* Lector de markdown del corpus: tipografía básica para el cuerpo
   renderizado, con los mismos tokens que el resto de la app. */
.lector-md{font-size:var(--text-sm);line-height:1.7;color:var(--fg)}
.lector-md h2,.lector-md h3,.lector-md h4,.lector-md h5{margin:1.3em 0 .5em;line-height:1.3;color:var(--fg)}
.lector-md h2:first-child,.lector-md h3:first-child,.lector-md h4:first-child{margin-top:0}
.lector-md p{margin:0 0 1em}
.lector-md ul,.lector-md ol{margin:0 0 1em;padding-left:1.4em}
.lector-md li{margin:.25em 0}
.lector-md blockquote{
  margin:0 0 1em;padding:2px 14px;border-left:2px solid var(--brand-dim);
  color:var(--fg-muted);
}
.lector-md code{
  font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);
  padding:.1em .35em;border-radius:4px;
}
.lector-md pre{
  background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;
  overflow-x:auto;margin:0 0 1em;
}
.lector-md pre code{background:none;padding:0}
.lector-md a{color:var(--brand)}

/* Calendario del diario: cuadrícula de un mes, un botón por día. */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{font-size:var(--text-2xs);color:var(--fg-subtle);text-align:center;text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.cal-dia{
  aspect-ratio:1;border-radius:var(--radius-sm);font-size:var(--text-xs);
  font-family:var(--font-mono);color:var(--fg-subtle);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.cal-dia[data-active="true"]{
  background:var(--brand-ghost);color:var(--brand);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--brand-dim);cursor:pointer;
}
.cal-dia[data-active="true"]:hover{background:var(--brand-dim);color:var(--bg)}
.modal h3{margin:0 0 10px;font-size:var(--text-lg)}
.modal p{margin:0 0 14px;font-size:var(--text-sm);color:var(--fg-muted);line-height:1.55}
.modal input{
  width:100%;background:var(--bg);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font-family:var(--font-mono);
  font-size:var(--text-sm);margin-bottom:12px;
}
.spinner{width:13px;height:13px;border:2px solid var(--brand-dim);border-top-color:transparent;border-radius:99px;animation:spin .7s linear infinite;display:inline-block}

.empty{padding:34px 16px;text-align:center;color:var(--fg-subtle);font-size:var(--text-sm)}
.empty b{display:block;color:var(--fg-muted);margin-bottom:5px;font-size:var(--text-base)}

/* ============================================================
   GANTT — panel de hover del modo compacto
   ============================================================ */
#gantt-hover-panel{
  position:fixed;z-index:55;pointer-events:none;max-width:280px;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-pop);
  padding:10px 13px;font-size:var(--text-xs);color:var(--fg-muted);
}
#gantt-hover-panel .fecha{display:block;font-family:var(--font-mono);color:var(--fg);font-weight:600;margin-bottom:6px}
#gantt-hover-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
#gantt-hover-panel li b{color:var(--fg-muted);font-weight:600}

/* ============================================================
   BANDEJA DE ENTRADA — barra fija de captura rápida
   ============================================================ */
.inboxbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:10px clamp(12px,3vw,28px);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.inboxbar input{
  flex:1;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.55rem .8rem;
  font-family:var(--font-sans);font-size:var(--text-sm);color:inherit;
}
.inboxbar input:focus-visible{outline:2px solid var(--brand-neon);outline-offset:2px}
.inboxbar #inbox-msg{white-space:nowrap;flex:none}

/* ============================================================
   EDITOR AMPLIADO — pantalla completa para escritura larga
   ============================================================ */
.editor-ampliado{
  position:fixed;inset:0;z-index:80;background:var(--bg);
  display:flex;flex-direction:column;
  animation:fadeIn var(--dur-fast) var(--ease-out);
}
.ea-cabecera{background:var(--surface);border-bottom:1px solid var(--border);flex:none}
.ea-fila{display:flex;align-items:center;gap:10px;padding:10px clamp(12px,3vw,24px);flex-wrap:wrap}
.ea-titulo{
  flex:1;min-width:160px;background:var(--bg);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:.5rem .7rem;font-size:var(--text-base);
  font-family:var(--font-sans);color:inherit;
}
.ea-label-suelta{text-transform:none;letter-spacing:normal;white-space:nowrap;color:var(--fg-subtle)}
.ea-detalles{padding:0 clamp(12px,3vw,24px) 14px}
.ea-barra{
  display:flex;gap:5px;flex-wrap:wrap;padding:8px clamp(12px,3vw,24px);
  border-bottom:1px solid var(--border);flex:none;background:var(--surface-2);
}
.ea-cuerpo{
  flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);overflow:hidden;
}
.ea-cuerpo--sin-vista{grid-template-columns:1fr}
.ea-cuerpo textarea{
  background:var(--bg);border:none;resize:none;outline:none;
  padding:clamp(14px,3vw,32px);font-family:var(--font-sans);font-size:var(--text-base);
  line-height:1.7;color:var(--fg);height:100%;overflow-y:auto;
}
.ea-vista{background:var(--bg);padding:clamp(14px,3vw,32px);overflow-y:auto;height:100%}
.ea-msg{padding:0 clamp(12px,3vw,24px) 10px;text-align:right;flex:none;min-height:1.2em}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .week{grid-template-columns:1fr;gap:6px}
  .day{min-height:auto}
  .tabs{width:100%;margin-left:0;overflow-x:auto}
  .countdown{width:100%;order:3}
  .ea-cuerpo{grid-template-columns:1fr !important;grid-template-rows:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}