/* 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: 17px; 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: var(--z-hoja);
  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(--line-hi); border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
/* `display: flex` le gana al `display: none` del user-agent para `[hidden]`: sin esta
   regla la grilla queda visible al cerrarla (elegir un tipo no la esconde). */
.tipos-grilla[hidden] { display: none; }
/* En el composer (pegado al pie de la pantalla) la grilla se abre hacia ARRIBA: abajo no
   hay lugar y quedaría fuera de la vista. */
.tipos-grilla.arriba { top: auto; bottom: calc(100% + 6px); }
.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 */
/* El chip de una ruta ABSOLUTA (archivoChip.js) sí lleva su ícono por extensión: es la
   pista de qué se va a abrir, porque puede ser cualquier cosa del disco de la Mac. */
.chip-archivo.chip-abs .chip-icono { display: inline; margin-right: 2px; }

/* 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: var(--z-modal);
  background: var(--panel-velo);
  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; }

/* PDF / HTML de `file.preview` (archivoHoja.js): el PDF es el visor nativo del propio
   navegador móvil adentro del iframe; el HTML va con `sandbox` (ver relay/server.js, que
   además manda `Content-Security-Policy: sandbox` al servirlo). */
.visor-iframe { flex: 1; width: 100%; min-height: 60vh; border: 0; border-radius: var(--r-sm); background: var(--panel); }
/* Fila de acciones del pie: Descargar/Compartir, Abrir en la Mac, Copiar ruta. Envuelve
   en vez de apretarse: en un teléfono angosto entran dos por fila y listo. */
.visor-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); padding-top: var(--sp-2); }
.visor-nota { color: var(--faint); font-size: var(--fs-xs); align-self: center; }