/* HyperForge · memoria viva (diseño v2): la lectura del bibliotecario, la ficha de la pieza, la leyenda, las secciones por nivel
   (T0 a T3, solo lo visible) y «Proponer recuerdo». El marco es de visual-base.css; los colores, de tokens.css. */
.mem-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--hf-e3) var(--hf-e5); }
.mem-cab .bajada { flex: 1 1 360px; }
.vis-lectura { font: 400 var(--hf-t-data)/1.6 var(--hf-f-mono); color: var(--hf-tenue); }
.vis-medidas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--hf-linea); }
.vis-medidas div { padding: var(--hf-e3) var(--hf-e3) var(--hf-e2); border-right: 1px solid var(--hf-linea); min-width: 0; }
.vis-medidas div:last-child { border-right: 0; }
.vis-medidas b { display: block; font: 600 var(--hf-t-lg)/1.1 var(--hf-f-display); font-feature-settings: 'tnum'; color: var(--hf-texto); }
.vis-medidas span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--hf-tenue); overflow-wrap: anywhere; }
.vis-registro { list-style: none; margin: 0; padding: var(--hf-e3); display: grid; gap: 7px; flex: 1; align-content: start; }
.vis-registro li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--hf-e2); opacity: .55; transition: opacity var(--hf-dur-lenta); }
.vis-registro li.hecho { opacity: .85; } .vis-registro li.ahora { opacity: 1; }
.vis-registro .op { color: var(--hf-tenue); font-weight: 500; }
.vis-registro li.ahora .op, .vis-registro li.hecho .op { color: var(--hf-brasa-texto); }
.vis-registro li.ahora .txt { color: var(--hf-texto); }
.vis-registro .ms { color: var(--hf-tenue); }
.vis-registro .vacio { grid-template-columns: 1fr; opacity: 1; color: var(--hf-tenue); }
.vis-resp { border-top: 1px solid var(--hf-linea); padding: var(--hf-e3); display: grid; gap: var(--hf-e2); }
.vis-resp pre { margin: 0; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hf-texto);
  font: 400 var(--hf-t-sm)/1.5 var(--hf-f-texto); border-left: 2px solid var(--hf-brasa); padding-left: var(--hf-e3); }
.vis-cita { text-align: left; border: 1px solid var(--hf-linea); background: var(--hf-panel); border-radius: var(--hf-r-fila); padding: var(--hf-e2) var(--hf-e3);
  cursor: pointer; font: 400 var(--hf-t-xs)/1.45 var(--hf-f-mono); color: var(--hf-tenue); overflow-wrap: anywhere; min-height: 44px;
  transition: border-radius var(--hf-dur) var(--hf-facil); }
.vis-cita:hover { border-color: var(--hf-texto); border-radius: var(--hf-r-fila-inv); }
.vis-cita b { color: var(--hf-brasa-texto); font-weight: 500; }
.vis-ficha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px var(--hf-e4); padding: var(--hf-e3) var(--hf-e5);
  border-top: 1px solid var(--hf-linea); background: var(--hf-panel-2); font: 400 var(--hf-t-xs)/1.4 var(--hf-f-mono); color: var(--hf-texto); }
.vis-ficha div { min-width: 0; }
.vis-ficha span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--hf-tenue); }
.vis-ficha b { font-weight: 500; overflow-wrap: anywhere; }
.vis-ficha .ruta b { color: var(--hf-verdin-texto); }
.vis-leyenda { display: flex; flex-wrap: wrap; gap: 6px var(--hf-e4); padding: var(--hf-e3) var(--hf-e5); border-top: 1px solid var(--hf-linea);
  font: 400 var(--hf-t-xs) var(--hf-f-mono); color: var(--hf-tenue); }
.vis-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.vis-leyenda .azul i { background: var(--hf-verdin); } .vis-leyenda .brasa i { background: var(--hf-brasa); }
.vis-leyenda .calor i { background: transparent; box-shadow: inset 0 0 0 2px var(--hf-brasa); border-radius: 2px; }
.vis-error { color: var(--hf-alerta-texto); font: 400 var(--hf-t-data)/1.5 var(--hf-f-mono); margin: 6px 0 0; width: 100%; }

/* secciones por nivel */
.mem-niveles { margin-top: var(--hf-e6); }
.mem-niveles-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hf-e3); }
.mem-nivel { border: 1px solid var(--hf-linea); border-radius: var(--hf-r-fila); background: var(--hf-panel); padding: var(--hf-e4); min-width: 0;
  transition: border-radius var(--hf-dur) var(--hf-facil), border-color var(--hf-dur); }
.mem-nivel:hover { border-radius: var(--hf-r-fila-inv); border-color: var(--hf-linea-2); }
.mem-nivel-cab { display: flex; align-items: baseline; gap: var(--hf-e2); margin: 0 0 var(--hf-e2); }
.mem-nivel-cab b { font: 600 var(--hf-t-h2)/1 var(--hf-f-display); color: var(--hf-texto); }
.mem-nivel[data-nivel="T0"] .mem-nivel-cab b, .mem-nivel[data-nivel="T1"] .mem-nivel-cab b { color: var(--hf-brasa-texto); }
.mem-nivel-cab span { font: 400 var(--hf-t-label) var(--hf-f-mono); letter-spacing: var(--hf-track-label); text-transform: uppercase; color: var(--hf-tenue); }
.mem-nivel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mem-nivel li { display: grid; gap: 1px; font: 400 var(--hf-t-data)/1.4 var(--hf-f-mono); }
.mem-nivel .ruta { color: var(--hf-texto); overflow-wrap: anywhere; }
.mem-nivel .vig { color: var(--hf-tenue); font-size: var(--hf-t-xs); }

/* Proponer recuerdo */
.mem-prop-zona:empty { display: none; }
.mem-prop { margin: 0 0 var(--hf-e5); padding: var(--hf-e5); border: 1px solid var(--hf-brasa); border-radius: var(--hf-r-tarjeta); background: var(--hf-panel);
  display: grid; gap: var(--hf-e3); max-width: 760px; }
.mem-prop h2 { margin: 0; font: 600 var(--hf-t-h3)/1.2 var(--hf-f-display); text-transform: uppercase; word-spacing: var(--hf-ws-display); }
.mem-prop-nota { margin: 0; color: var(--hf-tenue); font-size: var(--hf-t-sm); max-width: 62ch; }
.mem-prop select { width: 100%; min-height: 44px; }
.mem-prop textarea { width: 100%; font: 400 var(--hf-t-sm)/1.5 var(--hf-f-mono); }
.mem-prop > .hf-btn { justify-self: start; }
.mem-prop-acciones { display: flex; flex-wrap: wrap; gap: var(--hf-e3); }
.mem-prop-aviso { margin: 0; font: 400 var(--hf-t-data) var(--hf-f-mono); color: var(--hf-tenue); }
.mem-prop-aviso:empty { display: none; }
.mem-prop .hf-chip { justify-self: start; }

@media (max-width: 1100px) { .vis-ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vis-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--hf-e3); } .mem-prop { padding: var(--hf-e4); } }