/* Estilo de la sección Notas.
   Reutiliza la hoja de /deportes (paleta "verde monte", modo claro/oscuro y
   todos los componentes: .wrap, .card, .toc, .ficha, .grupo…) y añade sólo
   lo propio de una nota larga: puntos clave, índice automático y migas. */
@import url("/deportes/estilo.css");

/* Migas de pan: /notas → Legal → Contratos → … */
.migas { font-size: .85rem; color: var(--text-dim); margin-bottom: 4px; }
.migas a { color: var(--text-dim); text-decoration: none; }
.migas a:hover { color: var(--accent); }
.migas span { opacity: .5; margin: 0 5px; }

/* Puntos clave: lo primero de cada nota, lo único que hay que leer con prisa */
.clave {
  background: var(--accent-bg); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 15px 18px; margin: 0 0 22px;
}
.clave h2 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin: 0 0 8px; border: 0; padding: 0;
}
.clave ul { margin: 0; padding-left: 20px; }
.clave li { color: var(--text); }

/* Índice automático (lo genera js/toc.js a partir de los h2/h3 de la nota) */
.indice-auto {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 26px;
}
.indice-auto > .indice-titulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); font-weight: 600; margin-bottom: 8px;
}
.indice-auto ol { list-style: none; margin: 0; padding: 0; counter-reset: sec; }
.indice-auto > ol > li { counter-increment: sec; margin-bottom: 4px; }
.indice-auto > ol > li > a::before { content: counter(sec) ". "; color: var(--text-dim); }
.indice-auto a { text-decoration: none; font-size: .88rem; }
.indice-auto a:hover { text-decoration: underline; }
.indice-auto ol ol { padding-left: 18px; margin: 3px 0 6px; }
.indice-auto ol ol a { font-size: .82rem; color: var(--text-dim); }
.indice-auto ol ol a:hover { color: var(--accent); }
.indice-auto:empty { display: none; }

/* Anclas: que el título no quede debajo del borde al saltar desde el índice */
h2[id], h3[id] { scroll-margin-top: 16px; }

/* Nota de sección todavía sin contenido */
.vacio {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 14px 18px; color: var(--text-dim); font-size: .86rem;
  background: transparent;
}

/* Subtítulo dentro de una celda de cabecera (tablas comparativas de 3 columnas) */
.nota-col { display: block; font-weight: 400; font-size: .92em; opacity: .8; margin-top: 2px; }

/* Ejemplos gráficos ✅/❌: mini-mockups ilustrativos junto a cada recomendación.
   No son capturas reales — son maquetas mínimas en HTML/CSS que ilustran el patrón. */
.ejemplos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 16px; }
@media (max-width: 480px) { .ejemplos { grid-template-columns: 1fr; } }
.ej { border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.ej-si { border-color: var(--accent); }
.ej-no { border-color: var(--danger); }
.ej-etq { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.ej-si .ej-etq { color: var(--accent); }
.ej-no .ej-etq { color: var(--danger); }
.ej-lienzo {
  background: var(--card); border-radius: 6px; padding: 10px 12px; font-size: .84rem;
  min-height: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ej-lienzo.col { flex-direction: column; align-items: flex-start; gap: 4px; }
.ej-lienzo.entre { justify-content: space-between; flex-wrap: nowrap; }

/* Diagrama único (no es comparación ✅/❌, es una sola ilustración) */
.ej-diagrama { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 10px 0 16px; }
.ej-diagrama .vacio { border: 0; padding: 8px 0 0; margin: 0; }

/* Micro-widgets reutilizables dentro de un .ej-lienzo / .ej-diagrama */
.m-link { color: var(--accent); text-decoration: underline; }
.m-texto { color: var(--text); }
.m-btn { display: inline-block; background: var(--accent); color: #fff; border-radius: 6px; padding: 5px 12px; font-size: .8rem; font-weight: 600; }
.m-btn-plano { display: inline-block; color: var(--text); padding: 5px 2px; font-size: .8rem; }
.m-icono { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: .8rem; color: var(--text); }
.m-nav { display: flex; gap: 12px; font-size: .78rem; color: var(--text-dim); }
.m-nav b { color: var(--text); }
.m-crumb { font-size: .78rem; color: var(--text-dim); }
.m-crumb b { color: var(--text); font-weight: 600; }
.m-tabs { display: flex; gap: 2px; width: 100%; }
.m-tab { padding: 5px 12px; font-size: .78rem; background: var(--bg); border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; color: var(--text-dim); }
.m-tab.on { background: var(--card); color: var(--text); font-weight: 600; border-color: var(--accent); }
.m-chip { display: inline-block; background: var(--accent-bg); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 600; }
.m-titulo { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.m-subtitulo { font-size: .82rem; color: var(--text-dim); }
.m-cuerpo { font-size: .74rem; color: var(--text-dim); }
.m-target { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; }
.m-swatch { display: inline-block; border-radius: 4px; background: var(--text-dim); }
.m-lista { list-style: none; margin: 0; padding: 0; width: 100%; font-size: .8rem; }
.m-lista li { padding: 3px 0; color: var(--text-dim); }
.m-lista li.destacado { color: var(--text); font-weight: 700; }
.m-stack { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.m-capa { background: var(--accent-bg); color: var(--accent); border-radius: 6px; padding: 5px 10px; font-size: .74rem; font-weight: 600; text-align: center; }
.m-arbol, .m-arbol ul { list-style: none; margin: 0; padding: 0; font-size: .8rem; width: 100%; }
.m-arbol ul { margin-left: 9px; padding-left: 10px; border-left: 1px solid var(--border); }
.m-arbol li { padding: 3px 0; color: var(--text-dim); }
.m-arbol > li { color: var(--text); font-weight: 600; }
.m-arbol .activo { color: var(--accent); font-weight: 700; }
.m-sangria { list-style: none; margin: 0; padding: 0; font-size: .8rem; width: 100%; }
.m-sangria li { padding: 3px 0; color: var(--text-dim); }
.m-sangria > li { color: var(--text); font-weight: 600; }
.m-sangria ul { list-style: none; margin: 0; padding-left: 18px; }

/* Comparación de modo claro/oscuro: colores fijos (no ligados al tema del
   propio sitio) para poder mostrar los dos lados a la vez, en cualquier tema. */
.m-modo { display: flex; gap: 10px; flex-wrap: wrap; }
.m-modo > div { flex: 1 1 150px; border-radius: 8px; padding: 12px; font-size: .78rem; }
.m-tema-claro { background: #f7f6f3; color: #1f2321; border: 1px solid #e2e0da; }
.m-tema-oscuro { background: #17181a; color: #eceae5; border: 1px solid #33352f; }
.m-tema-claro .m-etiq, .m-tema-oscuro .m-etiq { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; opacity: .7; }
.m-btn2 { display: inline-block; border-radius: 6px; padding: 5px 12px; font-size: .78rem; font-weight: 600; margin-top: 6px; }
.m-tema-claro .m-btn2 { background: #2f6f4f; color: #fff; }
.m-tema-oscuro .m-btn2 { background: #5fb98a; color: #0c1210; }
.m-tema-oscuro .m-btn2-mal { background: #1f5c40; color: #baf0d4; }

/* Celdas de tamaño uniforme vs. variable, para ejemplos de consistencia. */
.m-celdas { display: flex; gap: 8px; align-items: flex-end; width: 100%; }
.m-celda { flex: 1; background: var(--accent-bg); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--accent); font-weight: 600; }

/* Scroll: página con contenido + barra lateral, y carril horizontal de tarjetas */
.m-pagina { display: flex; align-items: stretch; gap: 6px; width: 100%; height: 60px; }
.m-pagina-contenido { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.m-pagina-linea { height: 6px; border-radius: 3px; background: currentColor; opacity: .15; }
.m-pagina-linea.corta { width: 55%; }
.m-scroll { width: 4px; border-radius: 4px; background: var(--text-dim); opacity: .35; }
.m-scroll.llamativa { width: 11px; border-radius: 0; background: var(--accent); opacity: 1; }
.m-carril { display: flex; gap: 8px; width: 100%; overflow: hidden; }
.m-tarjeta { flex: 0 0 auto; width: 46px; height: 34px; background: var(--accent-bg); border-radius: 6px; }

/* ============ Editor de notas (notas-editor.js) ============ */
header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-editar-nota {
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 5px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.btn-editar-nota:hover { opacity: .85; }

/* Formulario de nota nueva (index.html): título + plantilla + Crear. */
.nueva-nota { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.nueva-nota[hidden] { display: none; }
.nueva-nota label { flex: 1 1 100%; font-size: .82rem; font-weight: 600; }
.nueva-nota input, .nueva-nota select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px;
  font: inherit; font-size: 1rem; color: var(--text, inherit); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
}
.nueva-nota .ayuda { flex: 1 1 100%; margin: 0; font-size: .78rem; opacity: .75; }
.nueva-nota .error { flex: 1 1 100%; margin: 0; font-size: .82rem; color: #b3261e; }

.notas-editor-panel {
  position: sticky; top: 0; z-index: 5; margin: 0 0 16px;
  background: var(--bg); padding: 10px 0 12px; border-bottom: 1px solid var(--border);
}

.notas-editor-barra { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.notas-editor-barra button {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 4px 10px; font-size: .78rem; cursor: pointer;
}
.notas-editor-barra button:hover { border-color: var(--accent); color: var(--accent); }

.notas-editor-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.notas-editor-acciones button {
  border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.notas-editor-guardar { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.notas-editor-eliminar { color: #b3261e !important; border-color: currentColor !important; }
:root[data-theme="dark"] .notas-editor-eliminar { color: #f2b8b5 !important; }
.notas-editor-estado { font-size: .82rem; color: var(--text-dim); }

/* Aviso de borrador local sin guardar (notas-editor.js, sección 4-bis) */
.notas-aviso-borrador { margin: 0 0 16px; font-size: .9rem; }
.notas-aviso-borrador button {
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text); margin-top: 4px;
}

/* «+ nota» (notas-editor.js, sección 5-bis): botón bajo el título «Notas», cuadro
   de texto y la fecha de cada nota como prefijo mono atenuado en la misma línea. */
.nota-rapida { margin: 0 0 10px; }
.nota-rapida-abrir {
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 8px 16px; min-height: 40px; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.nota-rapida-abrir:hover { opacity: .85; }
.nota-rapida-abrir[hidden], .nota-rapida-form[hidden] { display: none; }
.nota-rapida-texto {
  display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; resize: vertical;
  font: inherit; font-size: 1rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
}
.nota-rapida-texto:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.nota-rapida-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.nota-rapida-acciones button {
  border-radius: 999px; padding: 8px 16px; min-height: 40px; font-size: .88rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.nota-rapida-acciones .nota-rapida-enviar { background: var(--accent); color: #fff; border-color: var(--accent); }
.nota-rapida-acciones button:disabled, .nota-rapida-texto:disabled { opacity: .6; cursor: default; }
.nota-rapida-atajo { font-size: .78rem; color: var(--text-dim); }
.nota-rapida-estado { display: block; margin-top: 6px; font-size: .82rem; color: var(--text-dim); overflow-wrap: anywhere; }
.nota-rapida-estado:empty { display: none; }
/* Una dirección larga en una nota no debe ensanchar la página en el móvil. */
article.nota li { overflow-wrap: anywhere; }
.nota-fecha {
  font-family: var(--fuente-mono);
  font-size: .82em; color: var(--text-dim); white-space: nowrap;
}

.notas-editor-modo {
  display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 10px; cursor: pointer;
  background: var(--card); user-select: none;
}
.notas-editor-modo input { accent-color: var(--accent); cursor: pointer; }
.notas-editor-modo:has(input:checked) { border-color: var(--accent); color: var(--accent); }

.notas-editor-historial { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.notas-editor-historial-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; font-size: .85rem; border-bottom: 1px solid var(--border);
}
.notas-editor-historial-fila button {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--accent); padding: 3px 9px; font-size: .78rem; cursor: pointer;
}

/* Contenido editable en el sitio: recuadro sutil para que se note dónde
   se puede escribir, y algo de aire al final para no pegar el cursor al
   pie de la nota. */
article.nota[contenteditable="true"],
.clave[contenteditable="true"] {
  outline: 1px dashed var(--border); outline-offset: 6px; border-radius: var(--radius);
  padding-bottom: 12px;
}

/* Modo "control de cambios": lo borrado se tacha en rojo y queda visible
   pero no editable; lo añadido se subraya en verde. */
ins.notas-diff-ins {
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: inherit; text-decoration-skip-ink: none;
}
del.notas-diff-del {
  color: var(--danger); text-decoration: line-through; opacity: .75; cursor: not-allowed;
}
.notas-diff-bloque-nuevo {
  border-left: 3px solid var(--accent); padding-left: 12px; margin-left: -15px;
}
.notas-diff-bloque-borrado {
  border-left: 3px solid var(--danger); padding-left: 12px; margin-left: -15px;
  opacity: .65; text-decoration: line-through; cursor: not-allowed;
}

/* ============ Home en árbol: áreas → temas → proyectos → notas ============ */
.arbol, .arbol ul { list-style: none; margin: 0; padding: 0; }
.arbol { margin: 0 0 8px; }
.nodo-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.nodo-btn {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; color: var(--text); font: inherit; text-align: left;
  padding: 6px 4px; cursor: pointer; border-radius: 8px;
}
.nodo-btn:hover { background: var(--accent-bg); }
.nodo-btn:focus-visible, .nodo-enlace:focus-visible, .ficha-corta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.flecha {
  flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px 0 2px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform .15s;
}
.nodo-btn[aria-expanded="true"] > .flecha { transform: rotate(45deg); }
.nodo-btn .ico { flex: 0 0 auto; font-size: 1.15rem; }
.nodo-btn .nom { min-width: 0; overflow-wrap: anywhere; }
.nodo-btn .cuenta { margin-left: auto; flex: 0 0 auto; font-size: .78rem; color: var(--text-dim); font-weight: 400; }

/* Áreas: lo único visible al cargar; tarjeta como el resto del sitio */
.nodo-area {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 10px; padding: 2px 12px;
}
.nodo-area > .nodo-fila > .nodo-btn { font-size: 1.05rem; font-weight: 700; }
.nodo-area > .nodo-hijos { padding: 0 0 8px; border-top: 1px solid var(--border); }

/* Temas y proyectos: sangría con riel, texto más fino */
.nodo-hijos .nodo-hijos { margin-left: 14px; padding-left: 12px; border-left: 1px solid var(--border); }
.nodo-tema > .nodo-fila > .nodo-btn { font-weight: 600; font-size: .95rem; }
.nodo-proyecto > .nodo-fila > .nodo-btn { font-weight: 500; font-size: .9rem; }
.hoja { padding: 8px 4px 8px 30px; font-size: .9rem; color: var(--text-dim); }
.nodo-enlace { display: block; padding: 10px 4px 10px 30px; font-size: .9rem; min-height: 24px; overflow-wrap: anywhere; }

/* Tema desplegado en la portada: mismo contenido que su tarjeta en la página del área (v1.41) */
.tema-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px 14px 30px; min-width: 0; }
.tema-cuerpo:empty { display: none; }

/* Acceso directo a la ficha de un tema (Grand Tibidabo): visible sin desplegar el tema */
.ficha-corta {
  flex: 0 0 auto; font-size: .78rem; font-weight: 600; text-decoration: none;
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 6px 12px; margin: 0;
}
.nodo-fila:has(.ficha-corta) > .nodo-btn { flex: 0 0 auto; }
.pendiente {
  font-size: .68rem; font-weight: 600; color: var(--text-dim); border: 1px dashed var(--border);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}

/* ============ Modo «✎ Estructura» de la home (renombrar y mover) ============
   Controles solo en modo edición (los pinta notas-estructura.js). En móvil
   se usa el selector «Mover a…»; el asa ⠿ de arrastre solo aparece con ratón. */
.acciones-cab { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#btn-editar-estructura[aria-pressed="true"] { background: var(--accent); color: var(--card); }
.estr-ayuda { font-size: .8rem; color: var(--text-dim); margin: -4px 0 10px; }
.estr-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 8px 12px; border-radius: 10px; font-size: .85rem;
  border: 1px solid var(--border); background: var(--card);
}
.estr-estado[hidden] { display: none; }
.estr-estado.estr-ok { border-color: var(--accent); }
.estr-estado.estr-error { border-color: var(--danger); color: var(--danger); }
.estr-estado.estr-error .btn-editar-nota { color: inherit; }
.estr-ctrl { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.estr-btn {
  min-width: 40px; min-height: 40px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text); font-size: 1rem; cursor: pointer;
}
.estr-mover {
  min-height: 40px; max-width: 10rem; font-size: .82rem; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text);
}
.estr-asa { display: none; cursor: grab; color: var(--text-dim); padding: 0 4px; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) { .estr-asa { display: inline; } }
.estr-input {
  flex: 1 1 10rem; min-width: 0; min-height: 40px; font: inherit; padding: 6px 8px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--card); color: var(--text);
}
.nodo-btn[hidden] { display: none; }
.nodo-area.estr-drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.estr-arrastrando { opacity: .5; }
.arbol.estr-guardando .estr-ctrl { opacity: .5; pointer-events: none; }

/* ============ Bullets plegables (notas-editor.js, sección 3-ter) ============
   Un punto con subpuntos lleva un botón de plegar en el sitio de la viñeta
   (misma flecha que el árbol de la home). Plegado: se ocultan sus
   subpuntos y se ve cuántos esconde (+N). Es solo presentación: el
   Markdown guardado no cambia. */
li.nl-padre { position: relative; }
ul > li.nl-padre { list-style: none; }
.nl-toggle {
  position: absolute; left: -28px; top: -3px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; border-radius: 6px; background: none;
  color: var(--text-dim); cursor: pointer; user-select: none; -webkit-user-select: none;
}
/* En listas numeradas el número se queda; el botón va delante del texto. */
ol > li.nl-padre > .nl-toggle { position: static; vertical-align: -8px; margin: -4px 2px -4px -4px; }
.nl-toggle:hover { background: var(--accent-bg); }
.nl-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nl-toggle > .flecha { margin: 0; }
.nl-toggle[aria-expanded="true"] > .flecha { transform: rotate(45deg); }
li.nl-plegado > ul, li.nl-plegado > ol { display: none; }
/* Sangría de los niveles (hasta 15, ver MAX_NIVELES en notas-editor.js): 28px
   por nivel hasta el quinto (cabe el botón de plegar), 12px del sexto al
   décimo y 6px del undécimo en adelante, para que 15 niveles sigan
   teniendo ancho de texto en un móvil. */
article.nota li > ul, article.nota li > ol, .clave li > ul, .clave li > ol { padding-left: 28px; }
article.nota li li li li li > ul, article.nota li li li li li > ol,
.clave li li li li li > ul, .clave li li li li li > ol { padding-left: 12px; }
article.nota li li li li li li li li li li > ul, article.nota li li li li li li li li li li > ol,
.clave li li li li li li li li li li > ul, .clave li li li li li li li li li li > ol { padding-left: 6px; }
article.nota li, .clave li { overflow-wrap: anywhere; }
li.nl-plegado::after {
  content: attr(data-ocultos); margin-left: 6px; font-size: .72rem; font-weight: 600;
  color: var(--accent); background: var(--accent-bg); border-radius: 999px; padding: 0 6px;
}

/* Aviso con icono propio (clase .warn.warn-ico, la que escribe el editor al
   pintar ":::aviso" y con el botón «Aviso»). El icono es un triángulo con
   exclamación dibujado con una máscara SVG: no depende de ninguna fuente de
   emoji, toma el color del texto y no entra en el Markdown (es CSS). Los
   avisos escritos a mano en las fichas HTML (con su emoji propio) no llevan
   la clase y quedan como estaban. */
.warn.warn-ico { position: relative; padding-left: 40px; }
.warn.warn-ico::before {
  content: ""; position: absolute; left: 14px; top: 11px; width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22L12 2zm-1 7h2v6h-2V9zm0 8h2v2h-2v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}

/* ============ Tablas y enlaces en edición (notas-editor.js, sección 3-quater) ============ */
.notas-editor-barra[hidden], .notas-editor-enlace[hidden], .notas-editor-enlace button[hidden] { display: none; }
.notas-editor-tabla button { border-color: var(--accent); color: var(--accent); }

/* Cajita de enlace: texto + dirección + botones */
.notas-editor-enlace {
  display: grid; gap: 8px; margin: 0 0 10px; padding: 10px;
  background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius);
}
.notas-editor-enlace label { display: grid; gap: 3px; font-size: .78rem; color: var(--text-dim); }
.notas-editor-enlace input {
  font: inherit; font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); min-width: 0; width: 100%; box-sizing: border-box;
}
.notas-editor-enlace-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.notas-editor-enlace-botones button {
  border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}

.notas-editor-enlace-botones .notas-editor-enlace-aplicar { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Una dirección larga sin espacios no debe ensanchar la página. */
article.nota a, article.nota td, article.nota th { overflow-wrap: anywhere; }
.tabla-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; }
/* En edición, una celda no se queda en un hilo de ancho: con muchas
   columnas la tabla se desplaza (dentro de su contenedor) en vez de aplastarse. */
article.nota[contenteditable="true"] .tabla-scroll th,
article.nota[contenteditable="true"] .tabla-scroll td { min-width: 6.5rem; }
article.nota[contenteditable="true"] .tabla-scroll td:empty,
article.nota[contenteditable="true"] .tabla-scroll td:has(> br:only-child) { height: 2.2em; }

/* Móvil (375 px): botones del editor pulsables (alto >= 40px) y las filas de
   botones se desplazan en una sola línea para que el panel fijo no tape la nota. */
@media (max-width: 600px) {
  .notas-editor-barra { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .notas-editor-barra button { flex: 0 0 auto; min-height: 40px; min-width: 40px; white-space: nowrap; font-size: .85rem; }
  .notas-editor-acciones button, .notas-editor-modo { min-height: 40px; }
  .notas-editor-enlace-botones button { min-height: 40px; }
}

/* ---- Navegación: barra de áreas + panel lateral (js/notas-nav.js, v1.0) ----
   Solo se activa cuando el script añade body.con-nav; sin sesión o sin red la
   página se queda como estaba. */
.arbol > li[hidden] { display: none; }
.nav-areas { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.nav-areas-fila { display: flex; gap: 4px; overflow-x: auto; padding: 2px; min-width: 0; flex: 1 1 auto; }
.nav-area, .nav-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .88rem; cursor: pointer;
}
.nav-area { text-decoration: none; }
.nav-area:hover { border-color: var(--accent); }
.nav-area[aria-current="page"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.nav-area:focus-visible, .nav-toggle:focus-visible, .nav-nueva:focus-visible,
.nav-lado summary:focus-visible, .nav-claude summary:focus-visible, .nav-nota:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle { display: none; }
.nav-estado { font-size: .85rem; padding: 8px 12px; margin: 0 0 12px; border-radius: 8px; background: var(--accent-bg); color: var(--text); }
.nav-estado.nav-error { border: 1px solid #b3261e; }
.nav-estado[hidden] { display: none; }
.nav-lado, .nav-claude { font-size: .88rem; }
.nav-titulo { margin: 0 0 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
:is(.nav-lado, .nav-claude) ul { list-style: none; margin: 0; padding: 0; }
:is(.nav-lado, .nav-claude) details > ul { padding-left: 12px; border-left: 1px solid var(--border); margin: 2px 0 8px 6px; }
:is(.nav-lado, .nav-claude) summary { cursor: pointer; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
:is(.nav-lado, .nav-claude) summary:hover { background: var(--accent-bg); }
.nav-nota { display: block; padding: 4px 8px; border-radius: 6px; text-decoration: none; overflow-wrap: anywhere; }
.nav-nota:hover { background: var(--accent-bg); }
.nav-nota.actual { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.nav-proy-nom { display: block; padding: 4px 8px; color: var(--text-dim); font-size: .82rem; }
/* Índice de la página, colgado de la nota actual */
.nav-lado ul.nav-indice { margin: 2px 0 6px 14px; padding-left: 10px; border-left: 2px solid var(--accent-bg); }
.nav-indice a { display: block; padding: 2px 6px; border-radius: 4px; text-decoration: none; font-size: .82rem; color: var(--text); overflow-wrap: anywhere; }
.nav-indice a:hover { background: var(--accent-bg); color: var(--accent); }
.nav-indice ul { margin: 0 0 2px 10px; padding: 0; }
.nav-indice ul a { font-size: .78rem; color: var(--text-dim); }
.nav-vacio { margin: 2px 0 8px 18px; color: var(--text-dim); font-size: .8rem; }
.nav-nueva, .nav-ok, .nav-cancel {
  margin-top: 10px; border: 1px dashed var(--accent); background: transparent; color: var(--accent);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .85rem; cursor: pointer; width: 100%;
}
.nav-form { display: grid; gap: 6px; margin-top: 10px; }
.nav-form .nav-ok, .nav-form .nav-cancel { margin-top: 0; }
.nav-input { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); min-width: 0; }
.nav-ver { margin-top: 14px; font-size: .72rem; color: var(--text-dim); }

@media (min-width: 821px) {
  body.con-nav .wrap { max-width: 1080px; }
  body.con-nav:has(.nav-lado) .wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  body.con-nav:has(.nav-lado) .wrap > * { grid-column: 2; min-width: 0; }
  body.con-nav:has(.nav-lado) .wrap > header,
  body.con-nav:has(.nav-lado) .wrap > .nav-areas { grid-column: 1 / -1; }
  body.con-nav:has(.nav-lado) .wrap > .nav-lado {
    grid-column: 1; grid-row: 3 / span 60; position: sticky; top: 12px;
    max-height: calc(100vh - 24px); overflow-y: auto;
    border-right: 1px solid var(--border); padding-right: 12px;
  }
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav-toggle[hidden] { display: none; }
  .nav-lado { display: none; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
  .nav-lado.abierto { display: block; }
}

/* ---- Documentos automático, portada y formato enriquecido (v1.0) ---- */
.docs-auto, .portada {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 18px;
}
.docs-auto > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.docs-auto > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docs-grupo { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.docs-grupo-titulo { flex: 1 0 100%; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.docs-chip {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: .84rem; text-decoration: none;
  border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; color: var(--text);
}
.docs-chip:hover { background: var(--accent-bg); border-color: var(--accent); }
.docs-ver { margin-top: 10px; font-size: .72rem; color: var(--text-dim); }
.portada { background: var(--accent-bg); border-color: var(--accent); }
.portada-titulo { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.portada ul { margin: 0; padding-left: 20px; }
.portada-fechas { margin: 8px 0 0; }

/* Rotulador azul: ==texto== en Markdown (botón «Resaltar»). Solo para lo más importante. */
:root { --hl: rgba(24, 95, 165, .10); --hl-texto: #0C447C; }
:root[data-theme="dark"] { --hl: rgba(133, 183, 235, .16); --hl-texto: #B5D4F4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl: rgba(133, 183, 235, .16); --hl-texto: #B5D4F4; } }
/* Estilo coriodash (GUIA_JERARQUIA_VISUAL): fondo azul muy suave, texto azul de contraste y peso medio,
   caja completa y centrada en la línea. */
mark { background: var(--hl); color: var(--hl-texto); font-weight: 500; padding: .05em .3em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Etiquetas de estado: {{ok …}} {{aviso …}} {{mal …}} {{info …}} */
.et { display: inline-block; font-size: .8em; font-weight: 600; line-height: 1.5; padding: 0 9px; border-radius: 999px; border: 1px solid currentColor; }
.et-ok { color: #1f7a4d; background: #e4f2ea; }
.et-aviso { color: #8a5f00; background: #fbf0d4; }
.et-mal { color: #b3261e; background: #fbe3e0; }
.et-info { color: #2b4a6f; background: #e6edf5; }
:root[data-theme="dark"] .et-ok { color: #6fcf9c; background: #183326; }
:root[data-theme="dark"] .et-aviso { color: #e5b94e; background: #352b10; }
:root[data-theme="dark"] .et-mal { color: #f08a82; background: #3a1b18; }
:root[data-theme="dark"] .et-info { color: #8fb4e3; background: #1b2a3d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .et-ok { color: #6fcf9c; background: #183326; }
  :root:not([data-theme="light"]) .et-aviso { color: #e5b94e; background: #352b10; }
  :root:not([data-theme="light"]) .et-mal { color: #f08a82; background: #3a1b18; }
  :root:not([data-theme="light"]) .et-info { color: #8fb4e3; background: #1b2a3d; }
}

/* Bloques con icono: hecho (✓) e info (i), además del aviso (⚠) */
.warn.warn-hecho, .warn.warn-info { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
.warn.warn-info { background: var(--card); border-color: var(--border); }
.warn.warn-hecho::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E");
  color: var(--accent);
}
.warn.warn-info::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 8h2v7h-2v-7zm0-3h2v2h-2V7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 8h2v7h-2v-7zm0-3h2v2h-2V7z'/%3E%3C/svg%3E");
  color: var(--text-dim);
}

/* Secciones plegables (lectura): tocar el título pliega la sección */
article.nota h2.sec-plegable { cursor: pointer; position: relative; padding-left: 22px; }
article.nota h2.sec-plegable::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg); transition: transform .15s;
}
article.nota h2.sec-plegable.sec-cerrada::before { transform: rotate(-45deg); }
article.nota h2.sec-plegable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { article.nota h2.sec-plegable::before { transition: none; } }

/* Tablas con cabecera fija: la tabla desplaza por dentro si es alta */
.tabla-scroll { max-height: 70vh; overflow: auto; }
.tabla-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--accent-bg); }

/* Desarrollos de un tema (notas cuyo texto empieza por 🛠), en el panel lateral */
.nav-dev { font-size: .84rem; }
.nav-devs { margin-top: 6px; }

/* ---- Plan vivo de alfplan (js/plan-ratioc.js): también en las fichas vinculadas ---- */
#plan-vivo { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 26px; }
.pv-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pv-cab h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0; border: 0; padding: 0; }
.pv-fuente { font-size: .78rem; color: var(--text-dim); }
.pv-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pv-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-etq { min-width: 78px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 600; }
.pv-chip { font: inherit; font-size: .82rem; line-height: 1; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.pv-chip:hover { border-color: var(--accent); }
.pv-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pv-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-reset { border-style: dashed; color: var(--text-dim); }
.pv-cuenta { font-size: .82rem; color: var(--text-dim); margin: 0 0 8px; }
.pv-obj { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.pv-obj h3 { font-size: .95rem; margin: 0 0 6px; }
.pv-contexto h3 { color: var(--text-dim); font-weight: 500; }
.pv-hor { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; background: var(--accent-bg); color: var(--accent); border-radius: 999px; padding: 2px 8px; margin-right: 4px; }
.pv-tareas { list-style: none; margin: 0 0 6px; padding: 0 0 0 4px; }
.pv-fila { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: .88rem; flex-wrap: wrap; }
.pv-sub { padding-left: calc(var(--nivel, 0) * 20px); position: relative; }
.pv-sub::before { content: "\21B3"; position: absolute; left: calc((var(--nivel, 1) - 1) * 20px + 2px); color: var(--text-dim); }
.pv-est { flex: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 4px; padding: 1px 6px; border: 1px solid var(--border); color: var(--text-dim); }
.pv-doing .pv-est { border-color: var(--accent); color: var(--accent); }
.pv-done .pv-est { background: var(--accent-bg); }
.pv-done .pv-txt { text-decoration: line-through; color: var(--text-dim); }
.pv-meta { font-size: .76rem; color: var(--text-dim); font-weight: 400; }
.pv-aviso { font-size: .88rem; color: var(--text-dim); margin: 6px 0; }

/* Selector «alfplan» del modo estructura */
.estr-alfplan, .estr-icono { font: inherit; font-size: .78rem; max-width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }

/* Área «Claude» (md de los desarrollos): en la home vive en su propia caja; en las notas, en el panel lateral */
.nav-claude { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.nav-claude[hidden] { display: none; }
.nav-docs > summary { font-weight: 500; font-size: .84rem; color: var(--text-dim); }
.nav-docs-cuerpo { padding: 2px 0 6px 6px; }
.nav-grupo { margin: 4px 0 8px; }
.nav-grupo ul { list-style: none; margin: 0; padding: 0 0 0 6px; }
.nav-grupo > summary { cursor: pointer; padding: 4px 8px; color: var(--text-dim); font-size: .82rem; }
.nav-md { font-size: .84rem; padding: 3px 8px; }
.nav-vacio a { text-decoration: underline; }

/* Página de un tema (tema.html) y su acceso desde el árbol */
.tema-pag { flex: 0 0 auto; font-size: .76rem; text-decoration: none; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.tema-pag:hover { background: var(--accent-bg); border-color: var(--accent); }
.tema-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.tema-lista ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.nav-tema-pag { font-weight: 600; }

/* Página de un área: una tarjeta por tema (notas-nav.js, renderPaginaArea) */
.area-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.area-tarjeta {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.area-tarjeta:hover { border-color: var(--accent); }
.at-cab { display: flex; align-items: center; gap: 10px; }
.at-mono {
  width: 38px; height: 38px; border-radius: 10px; background: var(--accent-bg); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; flex: none; text-decoration: none;
}
.at-emoji { font-size: 1.35rem; font-weight: 400; }
.at-tit { min-width: 0; }
.at-nom { font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.at-nom:hover { color: var(--accent); }
.at-meta { font-size: .78rem; color: var(--text-dim); }
.at-plan { margin-left: auto; font-size: .75rem; border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; text-decoration: none; }
.at-plan:hover { background: var(--accent-bg); border-color: var(--accent); }
.at-icono { flex: none; }
.at-ficha, .at-enlace, .at-repo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.at-ficha { background: var(--accent-bg); border-radius: 8px; padding: 8px 10px; font-weight: 600; font-size: .92rem; }
.at-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.at-enlace { padding: 4px 6px; border-radius: 6px; font-size: .92rem; line-height: 1.35; }
.at-enlace:hover, .at-ficha:hover { background: var(--accent-bg); color: var(--accent); }
.at-grupo { margin-top: 2px; }
.at-sub { padding-left: 14px; }
.at-etq { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); font-weight: 600; padding: 0 6px 2px; }
.at-n { background: var(--border); border-radius: 999px; padding: 0 6px; font-size: .68rem; letter-spacing: 0; }
.at-vacios, .at-repos { display: flex; gap: 6px; flex-wrap: wrap; }
.at-vacio { font-size: .75rem; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 999px; padding: 1px 9px; }
.at-repos { border-top: 1px solid var(--border); padding-top: 10px; }
.at-repo { font-size: .78rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px 2px 5px; gap: 5px; color: var(--text-dim); }
.at-repo .at-icono { width: 14px; height: 14px; }
.at-repo:hover { border-color: var(--accent); color: var(--accent); }

/* ============ Espaciado (revisado 04/10/2026) ============
   Una sola escala para todo el cuaderno: 4 · 8 · 12 · 20 · 34 px.
   - 12 px: entre la cabecera, la barra de áreas y lo que sigue (barra de herramientas).
   - 20 px: entre bloques de primer nivel (plan vivo, portada, documentos, índice, puntos clave).
   - 34 px: antes de cada título de sección (h2), el que ya traía la hoja base.
   El primer título de una nota no suma su margen al hueco del bloque anterior. */
.nav-areas { margin-bottom: 12px; }
.nav-estado { margin: 0 0 12px; }
#plan-vivo, .portada, .docs-auto, .indice-auto, .clave { margin: 0 0 20px; }
article.nota > h2:first-child, article.nota > .card:first-child > h2:first-child { margin-top: 0; }

/* Panel lateral: el mismo ritmo vertical en notas, títulos de grupo y desplegables */
.nav-nota, .nav-proy-nom { padding: 5px 8px; line-height: 1.35; }
:is(.nav-lado, .nav-claude) summary { padding: 5px 6px; line-height: 1.35; }
.nav-devs, .nav-grupo { margin: 8px 0 8px; }
.nav-titulo { margin: 0 0 12px; }
.nav-lado > .nav-panel > .nav-vacio { margin: 0 0 12px; }

/* Acceso a la página del tema: siempre al borde derecho de la fila, haya ficha o no */
.nodo-fila:has(.ficha-corta) > .tema-pag { margin-left: auto; }

/* Documentos de un repo dentro de la página del tema: la lista va directa bajo su título */
.nav-docs-plano .nav-docs-cuerpo { padding: 0; }

/* Visor de md (/notas/claude): código, citas y metadatos con el mismo ritmo que el texto */
#claude-cuerpo p, #claude-cuerpo ul, #claude-cuerpo ol, #claude-cuerpo pre,
#claude-cuerpo blockquote, #claude-cuerpo .tabla-scroll, #claude-cuerpo .md-front { margin: 0 0 14px; }
#claude-cuerpo pre {
  padding: 12px 14px; overflow-x: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; line-height: 1.5;
}
#claude-cuerpo pre code { background: none; border: 0; padding: 0; white-space: pre; }
#claude-cuerpo blockquote { padding: 4px 0 4px 14px; border-left: 3px solid var(--border); color: var(--text-dim); }
#claude-cuerpo .md-front { font-size: .85rem; color: var(--text-dim); }
#claude-cuerpo .md-front pre { margin: 8px 0 0; }
#claude-cuerpo li { margin: 0 0 4px; }

/* Retoques finos de espaciado */
.sub { margin-bottom: 20px; }
body.con-nav h1 { margin-top: 0; } /* el título arranca a la altura del panel lateral */
#claude-cuerpo li > ul, #claude-cuerpo li > ol { margin: 4px 0 0; }

/* ---- Archivo de notas (notas-archivo.js, notas-nav.js) ---- */
header > .btn-archivar { margin-left: auto; }
header > #btn-editar-nota { margin-left: 0; }
.btn-esencial { border-color: var(--border); color: var(--text-dim); background: transparent; }
.btn-esencial[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.btn-archivar { border-color: var(--border); color: var(--text-dim); background: transparent; }
.nav-estado-btn {
  margin: 4px 0 0 8px; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .82rem; cursor: pointer;
}
.nav-estado-btn:hover { background: var(--accent-bg); }
.archivo-lista { list-style: none; margin: 0; padding: 0; }
.archivo-lista li { padding: 8px 0; border-top: 1px solid var(--border); }
.archivo-lista li:first-child { border-top: 0; }
.archivo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.archivo-meta { font-size: .78rem; color: var(--text-dim); padding: 0 8px; }
.nav-restaurar {
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .82rem; cursor: pointer; flex: 0 0 auto;
}
.nav-restaurar:hover:not(:disabled) { background: var(--accent-bg); }
.nav-restaurar:disabled { opacity: .5; cursor: default; }
.nav-claude > .nav-vacio { margin-left: 0; }

/* ============ Arrastrar puntos (notas-editor.js, activarArrastre) ============
   El asa y la línea viven fuera del contenido (cuelgan de <body>): no entran
   en el Markdown. El punto arrastrado se atenúa; durante el arrastre no se
   selecciona texto. */
.nl-asa {
  position: absolute; z-index: 20; width: 24px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; color: var(--text-dim); cursor: grab; font-size: 15px; letter-spacing: -3px;
  user-select: none; -webkit-user-select: none; touch-action: none; background: var(--card);
  border: 1px solid var(--border);
}
.nl-asa[hidden], .nl-linea[hidden] { display: none; }
.nl-asa:hover { background: var(--accent-bg); color: var(--accent); }
.nl-linea { position: absolute; z-index: 20; height: 3px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.nl-linea::before { content: ""; position: absolute; left: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
li.nl-arrastrando { opacity: .4; }
body.nl-arrastre, body.nl-arrastre * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
@media (pointer: coarse) { .nl-asa { width: 32px; height: 32px; } }

/* ---- Fechas clave (v1.1): lista ordenada, las 3 últimas y el resto agrupado ----
   Sustituye en lectura a la tabla «Fecha | Evento» (que sigue en la nota, oculta).
   Guías verticales a la izquierda para año > mes > día (guía de estilo §17). */
.fc-origen { display: none; }
.fc-vista { margin: 0 0 20px; }
.fc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 14px 10px; }
.fc-fila { display: grid; grid-template-columns: 5.6rem 1fr; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: .9rem; line-height: 1.45; align-items: baseline; }
.fc-fila:last-child { border-bottom: 0; }
/* La fecha nunca se parte: ancho fijo, una línea, cifras tabulares. */
.fc-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: .84rem; }
/* El evento puede ocupar varias líneas, pero sin partir palabras a mitad. */
.fc-ev { min-width: 0; overflow-wrap: break-word; }
.fc-ev strong { font-weight: inherit; }
/* Hito: marca verde a la izquierda y título en peso medio; la fecha no va en negrita. */
.fc-fila.hito .fc-ev { font-weight: 600; }
.fc-fila.hito .fc-fecha { color: var(--accent); font-weight: 600; }
.fc-fila.hito { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; margin: 0 -14px; padding-right: 14px; }
.fc-mas { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 2px;
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 9px 16px; min-height: 40px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.fc-mas:hover { opacity: .85; }
.fc-mas .fl { transition: transform .15s; display: inline-block; }
.fc-mas[aria-expanded="true"] .fl { transform: rotate(180deg); }
.fc-mas:focus-visible, .fc-g > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-resto[hidden] { display: none; }
.fc-g { margin: 6px 0 0; }
.fc-g > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px;
  font-weight: 600; font-size: .92rem; padding: 6px 0; color: var(--text); }
.fc-g > summary::-webkit-details-marker { display: none; }
.fc-g > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(-45deg); flex: 0 0 auto; align-self: center; transition: transform .15s; }
.fc-g[open] > summary::before { transform: rotate(45deg); }
.fc-g .n { font-weight: 400; color: var(--text-dim); font-size: .78rem; }
.fc-g.mes > summary { font-size: .86rem; color: var(--text-dim); }
.fc-g.mes > summary .t::first-letter { text-transform: uppercase; }
.fc-hijos { margin-left: 3px; padding-left: 12px; border-left: 2px solid var(--border); }
.fc-g.mes > .fc-hijos { border-left-color: var(--accent-bg); }
.fc-g .fc-fila { grid-template-columns: 3.4rem 1fr; }
.fc-g.mes .fc-fila { grid-template-columns: 2.2rem 1fr; }
.fc-g .fc-fila.hito { margin: 0 0 0 -14px; padding-left: 11px; padding-right: 0; }
@media (prefers-reduced-motion: reduce) { .fc-mas .fl, .fc-g > summary::before { transition: none; } }
@media (max-width: 420px) {
  .fc { padding: 4px 10px 8px; }
  .fc-fila { grid-template-columns: 5.2rem 1fr; gap: 8px; }
  .fc-fila.hito { margin: 0 -10px; padding-right: 10px; }
  .fc-g .fc-fila { grid-template-columns: 3rem 1fr; }
}

/* ============ Higiene (revisión de diseño 09/10/2026) ============
   1. Cabecera: «← Volver» a la izquierda y TODOS los botones (Archivar,
      Editar, Estructura, Nueva nota, Claro/Oscuro) juntos a la derecha. Antes
      el botón de tema y «Archivar» se repartían el hueco con margin-left:auto
      y el de tema quedaba en medio de la cabecera. En el móvil, si no caben,
      bajan a una segunda línea en vez de partir su texto en dos.
   2. Botones de la cabecera con el mismo alto (36 px; 40 px en el móvil) y
      la misma forma de píldora que el resto.
   3. Tarjetas: el primer y el último bloque no suman su margen al relleno
      (antes 32 px arriba frente a 18 px a los lados).
   4. Tablas: las palabras ya no se parten por cualquier letra
      («Operacione|s»); se corta con guion y solo si una palabra no cabe. */
header { flex-wrap: wrap; row-gap: 8px; }
header > .back { margin-right: auto; }
header > .btn-archivar, header > #btn-tema { margin-left: 0 !important; }
header .btn-editar-nota, header > #btn-tema {
  min-height: 36px; padding: 6px 14px; border-radius: 999px !important;
  font-size: .82rem !important; white-space: nowrap;
}
@media (max-width: 600px) {
  header .btn-editar-nota, header > #btn-tema { min-height: 40px; }
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
article.nota td, article.nota th { overflow-wrap: break-word; hyphens: auto; }
/* En el móvil el botón de tema es solo el icono (lleva aria-label): así
   «← Home», «Estructura», «Nueva nota» y el tema caben en una línea. */
@media (max-width: 600px) { #btn-tema .tema-txt { display: none; } header > #btn-tema { padding: 6px 12px; } }

/* ============ Higiene, tanda 1 (09/10/2026) ============ */
/* 5. Un solo separador por sección: si al título le sigue su tarjeta, la
      raya bajo el título sobra (la tarjeta ya marca dónde empieza). */
article.nota h2:has(+ .card) { border-bottom: 0; padding-bottom: 0; }

/* 6. Un solo icono de plegar en todo el cuaderno: la flecha fina del árbol
      sustituye al triángulo negro nativo de los desplegables. */
:is(.nav-lado, .nav-claude, .docs-auto, .pie, #tema-cuerpo) summary { list-style: none; display: flex; align-items: center; gap: 8px; }
:is(.nav-lado, .nav-claude, .docs-auto, .pie, #tema-cuerpo) summary::-webkit-details-marker { display: none; }
:is(.nav-lado, .nav-claude, .docs-auto, .pie, #tema-cuerpo) summary::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 2px 0 3px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform .15s;
}
:is(.nav-lado, .nav-claude, .docs-auto, .pie, #tema-cuerpo) details[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { :is(.nav-lado, .nav-claude, .docs-auto, .pie, #tema-cuerpo) summary::before { transition: none; } }

/* 7. Barra de áreas: en el ordenador salta de línea (se ven todas); en el
      móvil se desplaza de lado y un degradado avisa de que hay más. */
@media (min-width: 821px) {
  .nav-areas-fila { flex-wrap: wrap; overflow: visible; }
}
.nav-areas-fila.mas-der, .notas-editor-barra.mas-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.nav-areas-fila.mas-izq, .notas-editor-barra.mas-izq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.nav-areas-fila.mas-izq.mas-der, .notas-editor-barra.mas-izq.mas-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* 10. Historial de versiones del pie de la portada, plegado. */
.pie details > summary { cursor: pointer; color: var(--text-dim); }
.pie details[open] > summary { margin-bottom: 4px; }

/* ============ Tanda 2 (09/10/2026): buscador, recientes y menos navegación ============ */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buscador de la home */
.buscador { display: grid; gap: 12px; margin: 0 0 20px; }
.buscar { position: relative; }
.buscar input {
  width: 100%; min-height: 46px; padding: 10px 44px 10px 40px; font: inherit; font-size: 1rem;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
}
.buscar input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.buscar::before { content: ""; position: absolute; left: 15px; top: 15px; width: 11px; height: 11px; border: 2px solid var(--text-dim); border-radius: 50%; pointer-events: none; }
.buscar::after { content: ""; position: absolute; left: 26px; top: 27px; width: 6px; height: 2px; background: var(--text-dim); transform: rotate(45deg); pointer-events: none; }
.buscar-atajo { position: absolute; right: 12px; top: 12px; font: .75rem var(--fuente-mono); color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; pointer-events: none; }
@media (hover: none), (max-width: 600px) { .buscar-atajo { display: none; } }
.buscar-res { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; }
.buscar-cuenta { margin: 0; padding: 4px 8px; font-size: .78rem; color: var(--text-dim); }
.buscar-cuenta:empty { display: none; }
.buscar-item { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); min-width: 0; }
.buscar-item:hover, .buscar-item.primero { background: var(--accent-bg); }
.buscar-tit { font-weight: 600; overflow-wrap: anywhere; }
.buscar-donde { font-size: .8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.buscar-frag { font-size: .8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.buscar-item mark { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 1px; }
.buscar-vacio { margin: 0; padding: 10px; font-size: .86rem; color: var(--text-dim); }
nav[hidden] { display: none; }

/* Recientes */
.recientes { display: grid; gap: 8px; }
.recientes-t { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); font-weight: 600; }
.recientes-fila { display: flex; flex-wrap: wrap; gap: 6px; }
.reciente {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; overflow-wrap: anywhere;
  border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px;
  padding: 6px 12px; font-size: .86rem; text-decoration: none;
}
.reciente:hover { border-color: var(--accent); background: var(--accent-bg); }
.reciente small { color: var(--text-dim); font-size: .76rem; }

/* «+ Nuevo tema» (✎ Estructura de la home) */
.estr-nuevo { padding: 6px 0 2px 4px; display: flex; }
.estr-nuevo-tema {
  min-height: 40px; border: 1px dashed var(--accent); background: transparent; color: var(--accent);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer;
}
.estr-nuevo .estr-input { flex: 1 1 auto; }

/* Enlazar / desenlazar notas de un tema (✎ Estructura, v1.42) */
.estr-nota { display: flex; align-items: center; gap: 6px; }
.estr-nota .nodo-enlace { flex: 1 1 auto; min-width: 0; }
.estr-quitar { flex: 0 0 auto; color: var(--danger); }
.estr-enlazar {
  min-height: 36px; border: 1px dashed var(--border); background: transparent; color: var(--accent);
  border-radius: 8px; padding: 4px 12px; margin-left: 26px; font: inherit; font-size: .82rem; cursor: pointer;
}
.estr-enlazar:hover { border-color: var(--accent); background: var(--accent-bg); }
.estr-enlazar-form { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; margin-left: 26px; }
.estr-enlazar-form .estr-input { flex: 1 1 14rem; }
.estr-enlazar-form .estr-input[hidden] { display: none; }

/* Una sola navegación por pantalla: en las notas con panel no hacen falta
   las migas (seguían las carpetas del repo, no el árbol), y en el ordenador
   el índice vive en el panel lateral. Sin panel (sin sesión), todo sigue. */
body.con-nav .migas { display: none; }
@media (min-width: 821px) {
  body.con-nav:has(.nav-lado .nav-indice) .indice-auto { display: none; }
}
/* Con menos de 3 secciones, el índice no ayuda (toc.js pone la clase). */
.indice-auto.indice-corto { display: none; }

/* Plan vivo plegado en una línea con su resumen; sin conexión, una línea gris */
#plan-vivo { padding: 0; }
#plan-vivo .pv-plegable > summary { list-style: none; cursor: pointer; padding: 12px 18px; margin: 0; align-items: center; justify-content: flex-start; }
#plan-vivo .pv-plegable > summary::-webkit-details-marker { display: none; }
#plan-vivo .pv-plegable > summary::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 2px 0 3px;
  border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform .15s;
}
#plan-vivo .pv-plegable[open] > summary::before { transform: rotate(45deg); }
#plan-vivo .pv-plegable > summary .pv-fuente { margin-left: auto; }
#plan-vivo .pv-plegable > :not(summary) { margin-left: 18px; margin-right: 18px; }
#plan-vivo .pv-plegable > :last-child { margin-bottom: 14px; }
.pv-origen { margin: 0 0 10px; font-size: .76rem; color: var(--text-dim); }
.pv-origen:empty { display: none; }
#plan-vivo.pv-error { background: transparent; border-style: dashed; }
.pv-sin { margin: 0; padding: 10px 18px; font-size: .86rem; color: var(--text-dim); }
.pv-sin-eti { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { #plan-vivo .pv-plegable > summary::before { transition: none; } }
.buscar-res[hidden], .recientes[hidden], .buscador[hidden] { display: none; }

/* Página de un área (/notas/tema?a=…) y sus accesos */
.nav-titulo a { color: inherit; text-decoration: none; }
.nav-titulo a:hover { color: var(--accent); text-decoration: underline; }
article.nota h2 > a.area-tema { color: inherit; text-decoration: none; }
article.nota h2 > a.area-tema:hover { color: var(--accent); text-decoration: underline; }
.area-pag { flex: 0 0 auto; font-size: .76rem; text-decoration: none; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-right: 4px; }
.area-pag:hover { background: var(--accent-bg); border-color: var(--accent); }

/* Panel lateral v1.17: niveles que se leen de un vistazo (área › tema › grupo › nota › índice)
   y, en cada nota, el tipo (icono + etiqueta de color) separado del título (en negrita).
   El camino hasta la nota abierta se pinta de acento. */
:root {
  --tipo-nota: #2c64c0; --tipo-ficha: #7a49c0; --tipo-diario: #a8620c;
  --tipo-mapa: #0b7a73; --tipo-web: #3a6a82; --tipo-dev: #5b636d; --tipo-doc: #5b636d;
}
:root[data-theme="dark"] {
  --tipo-nota: #7aa7f0; --tipo-ficha: #b89aea; --tipo-diario: #e8b062;
  --tipo-mapa: #5fd0c6; --tipo-web: #8fc0d8; --tipo-dev: #aab2bb; --tipo-doc: #aab2bb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tipo-nota: #7aa7f0; --tipo-ficha: #b89aea; --tipo-diario: #e8b062;
    --tipo-mapa: #5fd0c6; --tipo-web: #8fc0d8; --tipo-dev: #aab2bb; --tipo-doc: #aab2bb;
  }
}
/* Nivel 1 · área */
.nav-lado .nav-titulo { display: flex; align-items: center; margin: 0 0 10px; padding: 0 6px 6px; border-bottom: 1px solid var(--border); font-weight: 700; letter-spacing: .14em; }
.nav-lado .nav-titulo.camino { color: var(--accent); border-bottom: 2px solid var(--accent); }
/* Nivel 2 · tema */
.nav-lado .nav-tema > details > summary { margin: 0 0 2px; padding: 8px 10px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 8px; }
.nav-lado .nav-tema > details > summary:hover { background: var(--accent-bg); }
.nav-nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-cnt { margin-left: auto; flex: 0 0 auto; min-width: 22px; padding: 0 7px; font-size: .7rem; font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: 0; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; }
.nav-lado .nav-tema.camino > details > summary { color: var(--accent); background: var(--accent-bg); }
.nav-lado .nav-tema.camino > details > summary::before { border-color: var(--accent); }
.nav-lado .nav-tema.camino > details > ul { padding-left: 11px; border-left: 2px solid var(--accent); }
/* Nivel 3 · grupo (carpeta) */
.nav-lado .nav-proy-nom { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 6px 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid var(--border); }
.nav-lado .nav-proyecto > ul { margin: 0 0 4px 8px; padding-left: 8px; border-left: 1px solid var(--border); }
/* Nivel 4 · nota: icono, tipo y título */
.nav-lado .nav-nota:has(> .nav-ico) { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; }
.nav-lado .nav-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.nav-lado .nav-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-tipo { margin-right: 6px; font-size: .64rem; font-weight: 800; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; vertical-align: .08em; color: var(--tipo, var(--text-dim)); }
.nav-tit { font-weight: 600; color: var(--text); }
.nav-nota.actual .nav-tit { color: var(--accent); }
.nav-t-nota { --tipo: var(--tipo-nota); }
.nav-t-ficha { --tipo: var(--tipo-ficha); }
.nav-t-diario { --tipo: var(--tipo-diario); }
.nav-t-mapa { --tipo: var(--tipo-mapa); }
.nav-t-web { --tipo: var(--tipo-web); }
.nav-t-dev, .nav-t-repo { --tipo: var(--tipo-dev); }
.nav-t-sheet, .nav-t-slides, .nav-t-pdf, .nav-t-carpeta { --tipo: var(--tipo-doc); }
/* «Página del tema»: acceso, no documento, así que pesa menos que las notas */
.nav-lado .nav-tema-pag { align-items: center; font-size: .8rem; font-weight: 500; color: var(--text-dim); }
.nav-lado .nav-tema-pag > .nav-ico { margin-top: 0; }
.nav-lado .nav-tema-pag.actual { color: var(--accent); font-weight: 600; }
/* Nivel 5 · índice de la nota abierta */
.nav-lado ul.nav-indice { border-left-color: var(--accent); }
.nav-lado .nav-indice a { font-size: .78rem; color: color-mix(in srgb, var(--text-dim) 80%, var(--bg)); }
.nav-lado .nav-indice a:hover { color: var(--accent); }

/* ============ Páginas intermedias: una tarjeta por carpeta (notas-nav.js v1.18) ============
   Home (una tarjeta por área), área, tema y carpeta usan la misma rejilla. El menú de arriba
   y toda carpeta (flecha ›) son enlaces: nada se filtra ni se despliega en sitio. */
:root {
  --pi-nota: #2c64c0; --pi-ficha: #7a49c0; --pi-diario: #a8620c; --pi-mapa: #0b7a73; --pi-web: #3a6a82; --pi-dev: #5b636d; --pi-otro: #5b636d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pi-nota: #7aa7f0; --pi-ficha: #b89aea; --pi-diario: #e8b062; --pi-mapa: #5fd0c6; --pi-web: #8fc0d8; --pi-dev: #aab2bb; --pi-otro: #aab2bb;
  }
}
:root[data-theme="dark"] {
  --pi-nota: #7aa7f0; --pi-ficha: #b89aea; --pi-diario: #e8b062; --pi-mapa: #5fd0c6; --pi-web: #8fc0d8; --pi-dev: #aab2bb; --pi-otro: #aab2bb;
}
body.con-tarjetas:not(.editando-estructura) #nav-arbol { display: none; }
body.editando-estructura #home-tarjetas { display: none; }
.pi-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; align-items: start; margin: 0 0 20px; }
.pi-tarjeta { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 12px; display: grid; gap: 8px; min-width: 0; }
.pi-tarjeta:hover { border-color: var(--accent); }
.pi-ancha { grid-column: 1 / -1; }
.pi-ancha .pi-filas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pi-cab { display: flex; align-items: center; gap: 10px; }
.pi-mono { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-bg); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.pi-emoji { font-size: 1.15rem; font-weight: 400; }
.pi-cab-tit { min-width: 0; }
.pi-cab h3 { margin: 0; padding: 0; border: 0; font-size: 1.05rem; line-height: 1.2; color: var(--text); }
.pi-cab h3 a { color: var(--text); text-decoration: none; }
.pi-cab h3 a:hover { color: var(--accent); }
.pi-meta { font-size: .75rem; color: var(--text-dim); }
.pi-cnt { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; }
.pi-chip { margin-left: auto; font-size: .78rem; border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; background: var(--card); white-space: nowrap; color: var(--text); text-decoration: none; }
.pi-cab .pi-chip { margin-left: auto; }
.pi-chip:hover { border-color: var(--accent); background: var(--accent-bg); }
.pi-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.pi-fila { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: .9rem; line-height: 1.3; color: var(--text); text-decoration: none; }
a.pi-fila:hover { background: var(--accent-bg); }
.pi-fila .nav-ico { flex: none; }
.pi-tipo { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; flex: none; min-width: 50px; }
.pi-tit { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pi-sub { color: var(--text-dim); font-weight: 400; }
.pi-t-nota { color: var(--pi-nota); } .pi-t-ficha { color: var(--pi-ficha); } .pi-t-diario { color: var(--pi-diario); }
.pi-t-mapa { color: var(--pi-mapa); } .pi-t-web { color: var(--pi-web); } .pi-t-dev, .pi-t-repo { color: var(--pi-dev); }
.pi-t-sheet, .pi-t-slides, .pi-t-pdf, .pi-t-carpeta { color: var(--pi-otro); }
.pi-destacada { background: var(--accent-bg); font-weight: 700; }
.pi-destacada.pi-fila:has(.pi-t-mapa) { background: color-mix(in srgb, var(--pi-mapa) 12%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--pi-mapa); }
.pi-carp::after { content: "›"; margin-left: auto; color: var(--text-dim); font-weight: 700; }
.pi-vacia { color: var(--text-dim); }
.pi-pie { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 8px; font-size: .78rem; color: var(--text-dim); }
.pi-pie a { color: var(--accent); font-weight: 700; text-decoration: none; }
.pi-vacios { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }
.pi-vacio { font-size: .75rem; color: var(--text-dim); border: 1px dashed var(--border); border-radius: 999px; padding: 1px 9px; }
.pi-tarjeta .nav-docs-cuerpo { font-size: .88rem; }
#tema-sub .pi-chip { margin-left: 8px; }
.pi-migas { font-size: .85rem; color: var(--text-dim); margin: 0 0 4px; }
.pi-migas a { color: var(--text-dim); text-decoration: none; }
.pi-migas a:hover { color: var(--accent); }
.pi-migas span { opacity: .5; margin: 0 5px; }

/* Cancionero (nota «Cancionero»): lo añade notas-cancionero.js */
.cancionero details { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 8px; overflow: hidden; }
.cancionero summary { cursor: pointer; list-style: none; padding: 9px 12px 9px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cancionero summary::-webkit-details-marker { display: none; }
.cancionero summary::before { content: "▸"; color: var(--dim); transition: transform .15s; }
.cancionero details[open] > summary::before { transform: rotate(90deg); }
.cancionero details[open] > summary { border-bottom: 1px solid var(--border); }
.cancionero details.instr > summary { font-weight: 700; font-size: 1.05rem; padding: 13px 14px; }
.cancionero details.instr > details.autor { margin: 8px 10px; }
.cancionero details.instr[open] { padding-bottom: 4px; }
.cancionero details.autor > summary { font-weight: 650; padding: 11px 14px; }
.cancionero details.can > summary { font-weight: 400; font-size: .92rem; padding: 7px 10px 7px 12px; }
.cancionero details.can { background: var(--bg); }
.cancionero summary:focus-visible, .cancionero button:focus-visible, .cancionero .cc-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cancionero .cc-n { color: var(--dim); font-size: .8rem; font-weight: 500; }
.cancionero .cc-chips { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.cancionero .cc-chip { font-size: .74rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--dim); white-space: nowrap; font-weight: 400; }
.cancionero .cc-chip.cc-t { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cancionero .cc-fs { font: inherit; font-size: .78rem; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 2px 9px; white-space: nowrap; }
.cancionero .cc-fs:hover, .cancionero .cc-tools button:hover { border-color: var(--accent); color: var(--accent); }
.cancionero .cc-cab { display: grid; gap: 8px; margin: 0 0 12px; }
.cancionero .cc-q { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); }
.cancionero .cc-tools { display: flex; gap: 6px; }
.cancionero .cc-tools button { font: inherit; font-size: .82rem; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 99px; padding: 3px 13px; }
.cancionero .cc-cuenta { color: var(--dim); font-size: .82rem; }
.cancionero .cc-vacio { color: var(--dim); font-size: .9rem; padding: 14px 4px; }
.cancionero .autor > details.can { margin: 6px 10px; }
.cancionero details.autor[open] { padding-bottom: 4px; }
.cancionero .cc-cuerpo { padding: 10px 12px 12px; }
.cancionero .cc-marco { width: 100%; height: 85vh; min-height: 520px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.cancionero .cc-marco.cc-pc { position: fixed; inset: 0; z-index: 50; width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.cancionero mark { background: var(--accent-bg); color: inherit; border-radius: 3px; }