/* Bitácora en la mano: la ficha de la tarea, la prosa del cerebro y los medios que se
   piden a la Mac. Los turnos y sus eventos viven en bitacora-turno.css. La regla que
   ordena todo: lo que uno vino a leer (la respuesta) manda; las herramientas y el código
   largo se pliegan para no sepultarla, y nada ancho (código, tablas) mueve la página de
   costado: scrollea adentro de su caja. */

/* ── Ficha de la tarea ─────────────────────────────────────────────────── */
.ficha { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ficha-linea { align-items: center; }
.ficha-ws { color: var(--faint); font-size: var(--fs-xs); white-space: nowrap; }
.ficha-titulo {
  font-size: 18px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha-chips:empty { display: none; }

/* Tipo de trabajo: acá el chip NO es sólo lectura como en la card, es el control para
   clasificar la tarea (el KindChips del escritorio). Desplegado, la grilla se ancla al
   chip como un menú y no empuja el resto de la ficha. */
.tipo-selector { position: relative; display: inline-flex; min-width: 0; }
.tipo-elegir {
  max-width: none; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--tinta) 45%, transparent);
}
.tipo-vacio { --tinta: var(--faint); }
.tipos-grilla {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 6px;
  width: max-content; max-width: min(300px, calc(100vw - 2 * var(--sp-4)));
  padding: var(--sp-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 10px 24px rgb(0 0 0 / 45%);
}
.tipos-grilla .tipo {
  max-width: none; padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent);
  cursor: pointer;
}
.tipos-grilla .tipo.elegido {
  color: var(--ground);
  background: var(--tinta);
  font-weight: 800;
}
.ficha-aviso { text-align: left; padding: var(--sp-2) var(--sp-3); }
/* La descripción larga se clampa a dos líneas; un tap la abre entera. */
.desc-tarea { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desc-tarea.entera { display: block; }

/* Dependencias: qué la frena y a qué le abre paso, con link a la otra tarea. */
.deps {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
}
.dep-fila { display: flex; flex-direction: column; gap: 2px; }
.dep-rotulo { color: var(--faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.dep-bloqueada .dep-rotulo { color: var(--conflict); }
.dep-lista { display: flex; flex-direction: column; }
.dep-link {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-1); margin: 0 calc(var(--sp-1) * -1);
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink); font: inherit; text-align: left;
}
.dep-link:active { background: var(--fill); }
.dep-link .ref { flex: 0 0 auto; }
.dep-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--muted); }
.dep-flecha { color: var(--faint); font-size: var(--fs-lg); line-height: 1; }

/* Esfuerzo del hilo: las cifras de la TaskBar del escritorio, en una línea. */
.esfuerzo {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
}
.stat { display: inline-flex; align-items: baseline; gap: 4px; font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; }
.stat b {
  font: 600 var(--fs-sm) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-tok b { color: var(--accent); }

/* Plan: «x de y · %» con barra en la cabecera; la lista scrollea en su caja si es larga. */
.plan-cab { display: flex; align-items: center; gap: var(--sp-3); }
.plan-xy { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-riel { flex: 1; height: 5px; }
.avance-lleno.completo { background: var(--ok); }
.plan .pasos { max-height: 38vh; overflow-y: auto; }
.paso-marca { flex: 0 0 14px; }
.paso-txt { overflow-wrap: anywhere; }

/* ── Prosa ─────────────────────────────────────────────────────────────── */
.prosa { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; max-width: 100%; }
.prosa > * { min-width: 0; max-width: 100%; }
.parrafo { margin: 0; font-size: var(--fs-bit); line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.parrafo strong, .lista strong { color: var(--ink); }
.titulillo { margin: var(--sp-2) 0 0; font-size: var(--fs-bit); color: var(--ink); }
.titulillo.chico { font-size: var(--fs-sm); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.lista { margin: 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.lista li { font-size: var(--fs-bit); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.lista li::marker { color: var(--faint); }
.casilla-md { list-style: none; margin-left: calc(var(--sp-4) * -1); display: flex; gap: var(--sp-2); align-items: baseline; }
.casilla { color: var(--faint); flex: 0 0 auto; }
.casilla-md.hecha { color: var(--done); text-decoration: line-through; text-decoration-color: var(--border-hi); }
.casilla-md.hecha .casilla { color: var(--ok); }
.prosa code { font-size: 0.92em; background: var(--fill); border-radius: var(--r-sm); padding: 1px 5px; overflow-wrap: anywhere; }
/* Mismo lenguaje que el archivo inline: color de acento y un subrayado tenue. */
.enlace {
  color: var(--accent); overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}
.cita {
  margin: 0; padding: var(--sp-1) var(--sp-3);
  border-left: 3px solid var(--border-ctl); color: var(--faint);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.regla { border: 0; border-top: 1px solid var(--border); margin: var(--sp-1) 0; }

/* Código: la caja scrollea de costado por adentro; la página, nunca. */
.codigo-caja { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--ground); overflow: hidden; }
.codigo-cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 3px var(--sp-2) 3px var(--sp-3);
  color: var(--faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.codigo-copiar {
  min-height: 28px; padding: 0 var(--sp-2);
  background: transparent; border: 1px solid var(--border-hi); border-radius: var(--r-pill);
  color: var(--muted); font: 600 var(--fs-xs) / 1 inherit; letter-spacing: 0.04em; text-transform: uppercase;
}
.codigo-copiar:active { background: var(--fill); }
.codigo {
  margin: 0; padding: var(--sp-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-size: var(--fs-bit-sm); line-height: 1.45; color: var(--muted);
}
.codigo code { background: none; padding: 0; white-space: pre; }
.plegado > summary {
  display: flex; align-items: center; min-height: var(--toque);
  color: var(--faint); font-size: var(--fs-bit-sm); cursor: pointer; list-style: none;
}
.plegado > summary::-webkit-details-marker { display: none; }
.plegado > summary::before { content: '⌄'; margin-right: var(--sp-2); }
.plegado[open] > summary::before { content: '⌃'; }

/* Tablas: scrollean adentro de su marco; las celdas largas cortan a un ancho razonable. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); }
.tabla { border-collapse: collapse; font-size: var(--fs-bit-sm); min-width: 100%; }
.tabla th, .tabla td {
  border-bottom: 1px solid var(--border); padding: var(--sp-1) var(--sp-2);
  text-align: left; vertical-align: top; min-width: 80px; max-width: 240px; overflow-wrap: anywhere;
}
.tabla th { color: var(--faint); font-weight: 600; background: var(--panel2); white-space: nowrap; }
.tabla td { color: var(--muted); }
.tabla tr:last-child td { border-bottom: 0; }

/* ── Imágenes y archivos ───────────────────────────────────────────────── */
.figura { margin: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--ground); }
/* Tope de alto: una captura vertical de 2000 px empujaría el resto del turno fuera de
   la pantalla y habría que scrollearla entera para seguir leyendo. */
.img-bit { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.img-hueco {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3); text-align: center;
  color: var(--faint); font-size: var(--fs-xs); border: 1px dashed var(--border);
  border-radius: var(--r-sm);
}
.figura.cargando .img-hueco { animation: latido 1.4s ease-in-out infinite; }
.img-hueco.roto { color: var(--conflict); border-color: var(--conflict); }
@keyframes latido { 50% { opacity: 0.45; } }

.adjuntos { padding: 0 var(--sp-3) var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.adjunto-img { width: 92px; }
.adjunto-img .img-hueco { min-height: 72px; }
/* Un archivo mencionado DENTRO de un párrafo se ve como un link, no como un botón: es
   texto corriendo entre texto. Con forma de píldora (32px de alto, fondo y borde) abría el
   interlineado de ese renglón y descuadraba la bitácora entera. Sigue siendo un <button>:
   tocarlo abre el visor igual. */
.chip-archivo {
  display: inline; padding: 0; margin: 0; border: 0; background: transparent;
  font: inherit; color: var(--accent); cursor: pointer; text-align: left;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}
.chip-archivo:active { text-decoration-color: var(--accent); }
.chip-archivo .chip-icono { display: none; } /* el 📄 era parte de la píldora */

/* En la tira de adjuntos del pie del turno SÍ es un control suelto: ahí vuelve la píldora. */
.adjuntos .chip-archivo {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 32px; padding: var(--sp-1) var(--sp-2);
  background: var(--fill); color: var(--ink);
  border: 1px solid var(--border-hi); border-radius: var(--r-pill);
  font-size: var(--fs-sm); max-width: 100%; text-decoration: none;
}
.adjuntos .chip-archivo .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjuntos .chip-archivo:active { background: var(--fill-hi); }
.adjuntos .chip-archivo .chip-icono { display: inline; font-size: var(--fs-sm); }

/* ── Visor ─────────────────────────────────────────────────────────────── */
.visor {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 12, 22, 0.94);
  display: flex; flex-direction: column;
  padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-2) calc(var(--safe-bottom) + var(--sp-2));
}
.visor-barra { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--toque); }
.visor-titulo {
  flex: 1; color: var(--ink); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.visor-cerrar {
  width: var(--toque); height: var(--toque);
  background: transparent; border: 0; color: var(--ink); font-size: var(--fs-lg); cursor: pointer;
}
.visor-cuerpo { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.visor-img { max-width: 100%; margin: auto; display: block; }
.visor-texto {
  margin: 0; padding: var(--sp-3);
  background: var(--panel); border-radius: var(--r-sm);
  font-size: var(--fs-bit-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.visor-pie { color: var(--faint); font-size: var(--fs-xs); text-align: center; min-height: 16px; }
.skel.alto { height: 180px; }