/* Lecturas y escrituras — estilos de la app. Base: maqueta aprobada en diseno/ (etapa 2). */

:root {
  --fondo: #ffffff;
  --fondo-lateral: #f7f7f5;
  --texto: #37352f;
  --texto-2: #787774;
  --texto-3: #a5a39d;
  --borde: rgba(55, 53, 47, 0.09);
  --borde-fuerte: rgba(55, 53, 47, 0.16);
  --hover: rgba(55, 53, 47, 0.06);
  --activo: rgba(55, 53, 47, 0.09);
  --acento: #2e6b5e;
  --acento-suave: rgba(46, 107, 94, 0.1);
  --sombra: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2);
  --cita: #37352f;

  --t-gris: #e3e2e0;   --t-gris-tx: #32302c;
  --t-marron: #eee0da; --t-marron-tx: #442a1e;
  --t-naranja: #fadec9; --t-naranja-tx: #49290e;
  --t-amarillo: #fdecc8; --t-amarillo-tx: #402c1b;
  --t-verde: #dbeddb;  --t-verde-tx: #1c3829;
  --t-azul: #d3e5ef;   --t-azul-tx: #183347;
  --t-morado: #e8deee; --t-morado-tx: #412454;
  --t-rosa: #f5e0e9;   --t-rosa-tx: #4c2337;
  --t-rojo: #ffe2dd;   --t-rojo-tx: #5d1715;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ancho-lateral: 248px;
  --ancho-pagina: 708px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #191919;
    --fondo-lateral: #202020;
    --texto: rgba(255, 255, 255, 0.84);
    --texto-2: rgba(255, 255, 255, 0.5);
    --texto-3: rgba(255, 255, 255, 0.32);
    --borde: rgba(255, 255, 255, 0.09);
    --borde-fuerte: rgba(255, 255, 255, 0.16);
    --hover: rgba(255, 255, 255, 0.055);
    --activo: rgba(255, 255, 255, 0.09);
    --acento: #6fb5a4;
    --acento-suave: rgba(111, 181, 164, 0.14);
    --sombra: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 6px rgba(0, 0, 0, 0.4), 0 9px 24px rgba(0, 0, 0, 0.5);
    --cita: rgba(255, 255, 255, 0.84);
    --t-gris: #373737;   --t-gris-tx: #e3e2e0;
    --t-marron: #4a3228; --t-marron-tx: #eee0da;
    --t-naranja: #5c3b23; --t-naranja-tx: #fadec9;
    --t-amarillo: #564328; --t-amarillo-tx: #fdecc8;
    --t-verde: #243d30;  --t-verde-tx: #dbeddb;
    --t-azul: #143a4e;   --t-azul-tx: #d3e5ef;
    --t-morado: #3c2d49; --t-morado-tx: #e8deee;
    --t-rosa: #4e2c3c;   --t-rosa-tx: #f5e0e9;
    --t-rojo: #522e2a;   --t-rojo-tx: #ffe2dd;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fondo: #191919;
  --fondo-lateral: #202020;
  --texto: rgba(255, 255, 255, 0.84);
  --texto-2: rgba(255, 255, 255, 0.5);
  --texto-3: rgba(255, 255, 255, 0.32);
  --borde: rgba(255, 255, 255, 0.09);
  --borde-fuerte: rgba(255, 255, 255, 0.16);
  --hover: rgba(255, 255, 255, 0.055);
  --activo: rgba(255, 255, 255, 0.09);
  --acento: #6fb5a4;
  --acento-suave: rgba(111, 181, 164, 0.14);
  --sombra: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 6px rgba(0, 0, 0, 0.4), 0 9px 24px rgba(0, 0, 0, 0.5);
  --cita: rgba(255, 255, 255, 0.84);
  --t-gris: #373737;   --t-gris-tx: #e3e2e0;
  --t-marron: #4a3228; --t-marron-tx: #eee0da;
  --t-naranja: #5c3b23; --t-naranja-tx: #fadec9;
  --t-amarillo: #564328; --t-amarillo-tx: #fdecc8;
  --t-verde: #243d30;  --t-verde-tx: #dbeddb;
  --t-azul: #143a4e;   --t-azul-tx: #d3e5ef;
  --t-morado: #3c2d49; --t-morado-tx: #e8deee;
  --t-rosa: #4e2c3c;   --t-rosa-tx: #f5e0e9;
  --t-rojo: #522e2a;   --t-rojo-tx: #ffe2dd;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
svg { flex: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— Estructura ——— */
.app { display: flex; height: 100vh; height: 100dvh; }

.lateral {
  width: var(--ancho-lateral);
  flex: none;
  background: var(--fondo-lateral);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: var(--texto-2);
  overflow-y: auto;
}
.lateral-cabecera { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 14px; color: var(--texto); font-weight: 600; }
.marca {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  background: var(--acento); color: var(--fondo); font: 600 13px/1 var(--serif);
}
.lateral-grupo { padding: 4px 6px; }
.lateral-titulo { padding: 14px 8px 4px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px;
  padding: 4px 8px; border-radius: 6px; text-align: left; color: var(--texto-2);
}
.item:hover { background: var(--hover); }
.item[aria-current="page"] { background: var(--activo); color: var(--texto); font-weight: 500; }
.item .icono { width: 20px; text-align: center; font-size: 15px; }
.item.hijo { padding-left: 30px; }
.lateral-pie { margin-top: auto; padding: 10px 14px 14px; border-top: 1px solid var(--borde); font-size: 12.5px; display: grid; gap: 6px; }
.estado { display: flex; align-items: center; gap: 7px; }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra {
  height: 45px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  font-size: 14px; color: var(--texto-2);
}
.migas { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
.migas span { padding: 2px 6px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; }
.migas .actual { color: var(--texto); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.boton-barra { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; }
.boton-barra:hover { background: var(--hover); }
.insignia { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); font-size: 12.5px; font-weight: 500; }
.solo-movil { display: none; }

.lienzo { flex: 1; overflow-y: auto; }
.pantalla[hidden] { display: none; }

/* ——— Página ——— */
.portada { height: 190px; background: linear-gradient(120deg, #c8b89a, #8f7a5c 55%, #5b4b3a); }
.portada.verde { background: linear-gradient(120deg, #a9c3b4, #5f8a7a 55%, #2e5249); }
.pagina { max-width: calc(var(--ancho-pagina) + 192px); margin: 0 auto; padding: 0 96px 120px; }
.pagina.ancha { max-width: none; padding: 0 96px 120px; }
.icono-pagina { font-size: 64px; line-height: 1; margin-top: 64px; }
.portada + .pagina .icono-pagina { margin-top: -38px; }
h1.titulo { font-size: 40px; line-height: 1.2; font-weight: 700; margin: 12px 0 6px; letter-spacing: -0.01em; }
.descripcion { color: var(--texto-2); margin: 0 0 18px; }

/* Propiedades */
.propiedades { display: grid; gap: 2px; margin: 10px 0 18px; font-size: 14px; }
.prop { display: grid; grid-template-columns: 160px 1fr; align-items: center; min-height: 34px; }
.prop-nombre { display: flex; align-items: center; gap: 8px; color: var(--texto-2); padding: 4px 6px; border-radius: 4px; }
.prop-valor { padding: 4px 8px; border-radius: 4px; min-width: 0; }
.prop-valor:hover, .prop-nombre:hover { background: var(--hover); }
.vacio { color: var(--texto-3); }
.enlace-pagina { display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }
hr.separador { border: 0; border-top: 1px solid var(--borde); margin: 8px 0 18px; }

/* Etiquetas */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 13px; line-height: 1; white-space: nowrap; margin: 1px 4px 1px 0; }
.tag.gris { background: var(--t-gris); color: var(--t-gris-tx); }
.tag.marron { background: var(--t-marron); color: var(--t-marron-tx); }
.tag.naranja { background: var(--t-naranja); color: var(--t-naranja-tx); }
.tag.amarillo { background: var(--t-amarillo); color: var(--t-amarillo-tx); }
.tag.verde { background: var(--t-verde); color: var(--t-verde-tx); }
.tag.azul { background: var(--t-azul); color: var(--t-azul-tx); }
.tag.morado { background: var(--t-morado); color: var(--t-morado-tx); }
.tag.rosa { background: var(--t-rosa); color: var(--t-rosa-tx); }
.tag.rojo { background: var(--t-rojo); color: var(--t-rojo-tx); }
.tag.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; margin-right: 6px; }
.estrellas { letter-spacing: 1px; color: #c69026; }
.estrellas .no { color: var(--texto-3); }

/* ——— Base de datos ——— */
.vistas { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--borde); margin-top: 8px; font-size: 14px; }
.vista { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vista:hover { color: var(--texto); }
.vista[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--texto); font-weight: 500; }
.vistas-acciones { margin-left: auto; display: flex; gap: 2px; }
.boton-suave { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 4px; color: var(--texto-2); font-size: 14px; }
.boton-suave:hover { background: var(--hover); }
.boton-nuevo { background: var(--acento); color: #fff; padding: 3px 10px; border-radius: 5px; font-weight: 500; font-size: 14px; }
:root[data-theme="dark"] .boton-nuevo { color: #10201c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton-nuevo { color: #10201c; } }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: var(--texto-2); }
.chip.on { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }

.tabla-envoltorio { overflow-x: auto; border-top: 1px solid var(--borde); }
table.tabla { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; }
.tabla th { text-align: left; font-weight: 400; color: var(--texto-2); padding: 7px 8px; border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); white-space: nowrap; }
.tabla th span { display: inline-flex; align-items: center; gap: 6px; }
.tabla td { padding: 6px 8px; border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); vertical-align: middle; }
.tabla th:last-child, .tabla td:last-child { border-right: 0; }
@media (hover: hover) { .tabla tbody tr:hover { background: var(--hover); } }
.fila-titulo { display: flex; align-items: center; gap: 6px; font-weight: 500; text-align: left; }
.fila-titulo:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde-fuerte); }
.tabla .tenue { color: var(--texto-2); white-space: nowrap; }
.fila-nueva td { color: var(--texto-3); }
.recuento { font-size: 13px; color: var(--texto-3); padding: 8px; }

.tablero { display: flex; gap: 12px; overflow-x: auto; padding: 14px 0 6px; align-items: flex-start; }
.columna { width: 260px; flex: none; }
.columna-cab { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px; font-size: 14px; color: var(--texto-2); }
.tarjeta { display: block; width: 100%; text-align: left; background: var(--fondo); border-radius: 6px; box-shadow: 0 0 0 1px var(--borde-fuerte), 0 2px 4px rgba(15, 15, 15, 0.06); padding: 9px 10px; margin-bottom: 8px; font-size: 14px; }
.tarjeta:hover { background: var(--hover); }
.tarjeta strong { display: block; font-weight: 500; margin-bottom: 4px; }
.tarjeta .meta { color: var(--texto-2); font-size: 12.5px; display: block; margin-bottom: 4px; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 14px 0; }
.ficha { text-align: left; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--borde-fuerte); background: var(--fondo); }
.ficha:hover { background: var(--hover); }
.libro { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 12px; text-align: center; font: 600 15px/1.25 var(--serif); color: #fff; }
.libro.c1 { background: linear-gradient(150deg, #b7553a, #6e2c1d); }
.libro.c2 { background: linear-gradient(150deg, #3e6d8d, #1f3a4d); }
.libro.c3 { background: linear-gradient(150deg, #8a7b52, #4a3f24); }
.libro.c4 { background: linear-gradient(150deg, #5b8a72, #2b4a3b); }
.libro.c5 { background: linear-gradient(150deg, #7b5c8f, #3e2b4c); }
.libro.c6 { background: linear-gradient(150deg, #a0784a, #5a3f22); }
.ficha-cuerpo { padding: 8px 10px 10px; font-size: 13.5px; }
.ficha-cuerpo strong { display: block; font-weight: 500; }
.ficha-cuerpo span { color: var(--texto-2); font-size: 12.5px; }

/* ——— Bloques ——— */
.bloques { font-size: 16px; }
.bloque { position: relative; margin: 2px 0; padding: 3px 2px; border-radius: 4px; }
.bloque:hover .asa, .bloque:focus-within .asa { opacity: 1; }
.asa {
  position: absolute; left: -46px; top: 3px; display: flex; gap: 0; opacity: 0;
  color: var(--texto-3); transition: opacity 0.12s;
}
.asa button { width: 22px; height: 24px; display: grid; place-items: center; border-radius: 4px; }
.asa button:hover { background: var(--hover); color: var(--texto-2); }
.bloques h2 { font-size: 24px; font-weight: 600; margin: 26px 0 4px; line-height: 1.3; }
.bloques h3 { font-size: 19px; font-weight: 600; margin: 18px 0 2px; }
.bloques p { margin: 0; }
.bloque.cita { border-left: 3px solid var(--cita); padding: 2px 14px; margin: 8px 0; font-size: 17px; }
.bloque.cita .pag { display: block; color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.lista { margin: 0; padding-left: 26px; }
.lista li { padding: 2px 0; }
.casilla { display: flex; align-items: flex-start; gap: 8px; }
.caja { width: 16px; height: 16px; margin-top: 4px; border: 1.5px solid var(--texto-2); border-radius: 3px; flex: none; display: grid; place-items: center; }
.caja.hecha { background: var(--acento); border-color: var(--acento); color: #fff; }
.casilla.hecha span { color: var(--texto-3); text-decoration: line-through; }
.aviso { display: flex; gap: 10px; padding: 14px 16px; border-radius: 6px; background: var(--hover); margin: 10px 0; font-size: 15px; }
.mencion { display: inline-flex; align-items: center; gap: 3px; color: var(--texto); font-weight: 500; border-bottom: 1px solid var(--borde-fuerte); }
.marcador { color: var(--texto-3); }

/* Escrito en serif */
.pagina.escrito h1.titulo { font-family: var(--serif); font-weight: 600; }
.pagina.escrito .bloques { font: 18px/1.7 var(--serif); }
.pagina.escrito .bloques p + p { margin-top: 0.6em; }
.cursor-barra { display: inline-block; width: 1.5px; height: 1.1em; background: var(--texto); vertical-align: text-bottom; animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Menú / */
.menu-barra {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 4px); width: 320px; max-height: 340px; overflow-y: auto;
  background: var(--fondo); border-radius: 8px; box-shadow: var(--sombra); padding: 6px; font: 14px/1.4 var(--sans);
}
.menu-barra[hidden] { display: none; }
.menu-seccion { padding: 8px 8px 4px; font-size: 12px; color: var(--texto-3); font-weight: 500; }
.menu-op { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border-radius: 5px; text-align: left; }
.menu-op:hover, .menu-op.sel { background: var(--hover); }
.menu-op .ico { width: 40px; height: 40px; border-radius: 5px; box-shadow: 0 0 0 1px var(--borde-fuerte); display: grid; place-items: center; font: 600 15px/1 var(--sans); background: var(--fondo); color: var(--texto); }
.menu-op small { display: block; color: var(--texto-2); font-size: 12px; }
.menu-op kbd { margin-left: auto; font: 11.5px var(--mono); color: var(--texto-3); }

.pie-escrito { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--borde); color: var(--texto-3); font-size: 13px; }
.foto-original { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 6px; box-shadow: 0 0 0 1px var(--borde-fuerte); font-size: 13.5px; margin: 6px 0 22px; }
.miniatura { width: 46px; height: 58px; border-radius: 3px; flex: none; background: repeating-linear-gradient(180deg, #f4efe4 0 9px, #b9c7d9 9px 10px); box-shadow: 0 0 0 1px var(--borde-fuerte); }
.foto-original span { color: var(--texto-2); display: block; font-size: 12.5px; }

.velo { display: none; }

/* ——— Móvil ——— */
@media (max-width: 860px) {
  .pagina, .pagina.ancha { padding: 0 16px 120px; }
  .asa { display: none; }
}
@media (max-width: 760px) {
  .solo-movil { display: flex; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(84vw, 300px);
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .app.menu-abierto .lateral { transform: none; box-shadow: var(--sombra); }
  .app.menu-abierto .velo { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15, 15, 15, 0.35); }
  .item { min-height: 40px; }
  .portada { height: 120px; }
  .icono-pagina { font-size: 48px; margin-top: 28px; }
  .portada + .pagina .icono-pagina { margin-top: -28px; }
  h1.titulo { font-size: 30px; }
  .prop { grid-template-columns: 118px 1fr; }
  .migas span:not(.actual) { display: none; }
  .migas .sep { display: none; }
  .ocultar-movil { display: none; }
  .vistas { overflow-x: auto; }
  .vista { white-space: nowrap; }
  .menu-barra { width: min(320px, calc(100vw - 32px)); }
  .pagina.escrito .bloques { font-size: 17px; }
  .lienzo { overflow-x: hidden; }

  /* Pestañas de vista: caben en 343 px sin cortar «Nueva» */
  .vista { padding: 6px 6px 8px; font-size: 14px; }
  .vistas-acciones .boton-suave { display: none; }
  .vistas { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .vistas-acciones { margin-left: auto; padding-bottom: 6px; }
  .boton-nuevo { padding: 3px 9px; }

  /* Tabla → fichas apiladas: cada lectura entera a la vista */
  .tabla-envoltorio { overflow: visible; }
  table.tabla, .tabla tbody { display: block; min-width: 0; }
  .tabla thead { display: none; }
  .tabla tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 12px 2px; border-bottom: 1px solid var(--borde);
  }
  .tabla td { display: block; padding: 0; border: 0; }
  .tabla td[data-tipo="titulo"] { flex-basis: 100%; }
  .tabla td[data-tipo="titulo"] .fila-titulo { font-size: 16px; }
  .tabla td[data-tipo="texto"], .tabla td[data-tipo="url"] { flex-basis: 100%; color: var(--texto-2); font-size: 14px; margin-top: -4px; }
  .tabla td[data-tipo="texto"]:empty, .tabla td[data-tipo="url"]:empty,
  .tabla td[data-tipo="fecha"], .tabla td[data-tipo="creado"], .tabla td[data-tipo="editado"],
  .tabla td[data-tipo="relleno"], .tabla td:empty, .tabla td .vacio { display: none; }
  .tabla td[data-tipo="multi"], .tabla td[data-tipo="relacion"] { flex-basis: 100%; }
  .tabla td.editable:hover { background: none; }
  .tabla .fila-nueva td { padding: 2px; }

  /* Tablero: una columna por pantalla, se pasa con el dedo */
  .tablero { scroll-snap-type: x mandatory; }
  .columna { width: 82vw; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ======================================================================
   App real — lo que la maqueta no tenía
   ====================================================================== */
[hidden] { display: none !important; }
a { color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
.campo {
  width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--borde-fuerte);
  background: var(--fondo); outline: none; font-size: 15px;
}
.campo:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
textarea.campo { min-height: 90px; resize: vertical; line-height: 1.5; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--borde-fuerte); font-size: 14.5px; font-weight: 500;
}
.boton:hover { background: var(--hover); }
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
:root[data-theme="dark"] .boton.primario { color: #10201c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton.primario { color: #10201c; } }
.boton.primario:hover { filter: brightness(1.08); }
.boton.peligro { color: #c4332a; border-color: rgba(196, 51, 42, 0.35); }
.boton[disabled] { opacity: 0.5; cursor: default; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nota { color: var(--texto-2); font-size: 13.5px; }
.error { color: #c4332a; font-size: 14px; min-height: 1.4em; }

/* Acceso: crear frase / desbloquear */
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--fondo-lateral); }
.acceso-caja { width: 100%; max-width: 420px; background: var(--fondo); border-radius: 12px; box-shadow: var(--sombra); padding: 28px 24px; }
.acceso-caja h1 { font: 600 24px/1.25 var(--serif); margin: 10px 0 6px; }
.acceso-caja .marca { width: 34px; height: 34px; font-size: 19px; border-radius: 8px; }
.acceso-caja label { display: block; font-size: 13.5px; color: var(--texto-2); margin: 14px 0 5px; }
.acceso-enlaces { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: 13.5px; }
.acceso-enlaces button { color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; }
.clave-rec { font: 600 16px/1.7 var(--mono); letter-spacing: 0.02em; padding: 12px; border-radius: 8px; background: var(--hover); text-align: center; overflow-wrap: normal; word-break: normal; user-select: all; }

/* Barra lateral: árbol */
.lateral .item { position: relative; }
.item .titulo-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .mas { opacity: 0; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; }
.item:hover .mas, .item:focus-within .mas { opacity: 1; }
.item .mas:hover { background: var(--activo); }
@media (hover: none) { .item .mas { opacity: 0.6; } }
.sinc-error .punto { background: #c4332a; }
.sinc-pendiente .punto { background: #c69026; }
.sinc-apagada .punto { background: var(--texto-3); }

/* Títulos editables */
[contenteditable] { outline: none; }
[contenteditable]:empty::before, .vacio-ph::before { content: attr(data-ph); color: var(--texto-3); pointer-events: none; }
h1.titulo[contenteditable] { cursor: text; }
.descripcion[contenteditable] { cursor: text; }
.icono-pagina button { font-size: inherit; line-height: 1; border-radius: 6px; }
.icono-pagina button:hover { background: var(--hover); }
.acciones-pagina { display: flex; gap: 4px; min-height: 28px; margin-top: 6px; opacity: 0; transition: opacity 0.12s; }
.pagina:hover .acciones-pagina, .acciones-pagina:focus-within { opacity: 1; }
@media (hover: none) { .acciones-pagina { opacity: 1; } }

/* Propiedades editables */
.prop-valor { cursor: pointer; min-height: 30px; display: flex; flex-wrap: wrap; align-items: center; }
.prop-valor input.campo { padding: 3px 6px; font-size: 14px; }
.tabla td.editable { cursor: pointer; }
.tabla td.editable:hover { background: var(--hover); }
.th-boton { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); }
.th-boton:hover { color: var(--texto); }
.estrellas button { font-size: 16px; color: var(--texto-3); padding: 0 1px; }
.estrellas button.on { color: #c69026; }
.relacion-chip { display: inline-flex; align-items: center; gap: 4px; margin: 1px 6px 1px 0; text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }

/* Menús flotantes y diálogos */
.flotante {
  position: fixed; z-index: 50; min-width: 220px; max-width: min(340px, calc(100vw - 24px)); max-height: min(420px, 70vh);
  overflow-y: auto; background: var(--fondo); border-radius: 8px; box-shadow: var(--sombra); padding: 6px; font-size: 14px;
}
.flotante .menu-op { min-height: 32px; }
.flotante .menu-op .ico { width: 24px; height: 24px; box-shadow: none; background: none; font-size: 15px; }
.flotante .menu-op.peligro { color: #c4332a; }
.flotante .buscador { margin: 2px 2px 6px; }
.flotante .sep-menu { height: 1px; background: var(--borde); margin: 6px 4px; }
.velo-dialogo { position: fixed; inset: 0; z-index: 60; background: rgba(15, 15, 15, 0.4); display: grid; place-items: center; padding: 16px; }
.dialogo { width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--fondo); border-radius: 12px; box-shadow: var(--sombra); padding: 20px; }
.dialogo h2 { margin: 0 0 10px; font-size: 18px; }
.dialogo label { display: block; font-size: 13.5px; color: var(--texto-2); margin: 12px 0 5px; }
.avisos { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--texto); color: var(--fondo); border-radius: 8px; padding: 10px 14px; font-size: 14px; box-shadow: var(--sombra); display: flex; gap: 10px; align-items: center; }
.toast button { margin-left: auto; text-decoration: underline; color: inherit; }
.buscar-resultados { display: grid; gap: 2px; margin-top: 10px; }

/* Editor de bloques */
.bloques { padding-bottom: 30vh; }
.bloque { display: flex; align-items: flex-start; gap: 0; }
.bloque > .editable { flex: 1; min-width: 0; padding: 1px 2px; white-space: pre-wrap; word-break: break-word; }
.bloque.h1 > .editable { font-size: 30px; font-weight: 700; line-height: 1.25; margin-top: 22px; }
.bloque.h2 > .editable { font-size: 24px; font-weight: 600; line-height: 1.3; margin-top: 18px; }
.bloque.h3 > .editable { font-size: 19px; font-weight: 600; margin-top: 12px; }
.bloque.lista > .vineta, .bloque.numerada > .vineta { width: 24px; flex: none; text-align: center; user-select: none; }
.bloque.casilla .caja { margin-right: 8px; cursor: pointer; }
.bloque.casilla.hecha > .editable { color: var(--texto-3); text-decoration: line-through; }
.bloque.cita { flex-direction: column; }
.bloque.cita > .editable { width: 100%; }
.cita-pag { display: flex; align-items: center; gap: 4px; color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.cita-pag input { width: 9em; border: 0; background: none; color: inherit; padding: 0; outline: none; }
.bloque.aviso { background: var(--hover); border-radius: 6px; padding: 12px 14px; margin: 8px 0; }
.bloque.aviso > .emoji { margin-right: 10px; }
.bloque.separador { padding: 10px 2px; }
.bloque.separador hr { flex: 1; border: 0; border-top: 1px solid var(--borde-fuerte); margin: 0; }
.bloque.imagen img { max-width: 100%; border-radius: 4px; display: block; }
.bloque.arrastrando { opacity: 0.4; }
.bloque.destino-antes { box-shadow: 0 -3px 0 var(--acento); }
.bloque.destino-despues { box-shadow: 0 3px 0 var(--acento); }
.asa button { touch-action: none; cursor: grab; }
.editable strong { font-weight: 600; }
.editable code { font: 0.88em var(--mono); background: var(--hover); padding: 1px 4px; border-radius: 3px; color: #c4554d; }
.mencion { cursor: pointer; }
.pagina.escrito .bloques .bloque > .editable { line-height: 1.7; }
.pagina.escrito .bloques .bloque { margin: 4px 0; }
.bloques .bloque + .bloque { margin-top: 1px; }
.anadir-bloque { color: var(--texto-3); padding: 6px 2px; font-size: 15px; width: 100%; text-align: left; }
.anadir-bloque:hover { color: var(--texto-2); }
.subpagina { display: flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; }

/* Vistas: lista y portadas */
.lista-filas { border-top: 1px solid var(--borde); }
.lista-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%; text-align: left; padding: 10px 4px; border-bottom: 1px solid var(--borde); }
.lista-fila:hover { background: var(--hover); }
.lista-fila .lf-titulo { font-weight: 500; flex: 1 1 200px; }
.lista-fila .lf-meta { color: var(--texto-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.libro.c7 { background: linear-gradient(150deg, #4f6d7a, #283a42); }
.libro.c8 { background: linear-gradient(150deg, #9a5b6f, #4e2c39); }
.libro img { width: 100%; height: 100%; object-fit: cover; }
.libro.con-imagen { padding: 0; }
.columna.sobre { outline: 2px dashed var(--acento); outline-offset: 2px; border-radius: 8px; }
.tarjeta[draggable="true"] { cursor: grab; }
.vacio-vista { padding: 28px 8px; color: var(--texto-2); text-align: center; }

/* Foto del cuaderno */
.foto-lienzo { position: relative; max-width: 100%; touch-action: none; user-select: none; margin: 12px 0; }
.foto-lienzo canvas { max-width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 0 0 1px var(--borde-fuerte); }
.recorte { position: absolute; border: 2px solid var(--acento); background: rgba(46, 107, 94, 0.08); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); pointer-events: none; }
.revision-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.revision-foto img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px var(--borde-fuerte); }
.revision-foto textarea { min-height: 420px; font: 16px/1.6 var(--serif); }
.progreso { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; margin: 10px 0; }
.progreso > span { display: block; height: 100%; width: 0; background: var(--acento); transition: width 0.2s; }
.aviso-ia { border-left: 3px solid #c69026; padding: 8px 12px; background: var(--hover); border-radius: 4px; font-size: 14px; margin: 10px 0; }

/* Ajustes */
.seccion-ajustes { padding: 18px 0; border-bottom: 1px solid var(--borde); }
.seccion-ajustes h2 { font-size: 17px; margin: 0 0 6px; }
.seccion-ajustes p { margin: 4px 0; }
.lista-comprobaciones { list-style: none; padding: 0; margin: 8px 0; font-size: 14.5px; }
.lista-comprobaciones li { padding: 5px 0; display: flex; gap: 8px; }

@media (max-width: 760px) {
  .revision-foto { grid-template-columns: 1fr; }
  .revision-foto textarea { min-height: 300px; }
  .bloque.h1 > .editable { font-size: 26px; }
  .flotante { max-height: 55vh; }
  .lista-fila .lf-titulo { flex-basis: 100%; }
}
@media print {
  .lateral, .barra, .acceso-enlaces, .fila-botones { display: none !important; }
  .acceso { background: none; }
}

/* Añadidos de la app: iconos, imágenes, portadas */
.rejilla-iconos { display: grid; grid-template-columns: repeat(6, 40px); gap: 2px; }
.rejilla-iconos button { font-size: 22px; height: 40px; justify-content: center; }
.foto-grande { width: 100%; height: auto; border-radius: 6px; }
.portada.con-imagen { background: none; }
.portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-original { width: 100%; text-align: left; }
.foto-original:hover { background: var(--hover); }
.lista-comprobaciones small { display: inline; }
.vistas-acciones input.campo { width: 160px; padding: 3px 8px; font-size: 14px; }
.lateral-pie .estado { text-align: left; font-size: 12.5px; color: var(--texto-2); }
.lateral-pie .item { min-height: 28px; padding: 3px 4px; }
.fila-nueva button { color: var(--texto-3); }
.fila-nueva button:hover { color: var(--texto-2); }
.dialogo .boton-barra { justify-content: center; }
details summary { cursor: pointer; }
@media (max-width: 760px) {
  .vistas-acciones input.campo { width: 120px; }
  .rejilla-iconos { grid-template-columns: repeat(6, 44px); }
}