/* ══════════════════════════════════════════════════════════════
   KORA · EL ARCHIVO DE LA FAMILIA — hoja compartida
   Viste cuatro módulos, cada uno con su prefijo, sin tocar
   styles.css ni kora-momentos.css:
     .fi-  Quién es          .tr-  Traer lo de tus libros
     .lb-  La página a mano  .kp-  Dar de alta a una persona
     .ar-  El árbol
   Revertible: quita el <link> de index.html.
   ══════════════════════════════════════════════════════════════ */

:root{ --ar-card:120px; --ar-face:74px; --ar-face-chico:46px; }

/* ── las repisas ── */
.mo-shelves{display:flex;gap:.4rem;margin:0 0 1.6rem;border-bottom:.5px solid var(--sand-light)}
.mo-shelf{background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe);padding:.7rem 1rem;margin-bottom:-1px;transition:all .18s}
.mo-shelf:hover{color:var(--clay)}
.mo-shelf.on{color:var(--dark);border-bottom-color:var(--clay)}

/* ── quién está abierto: se ve en las tres repisas ── */
.fi-who{display:flex;gap:1.1rem;align-items:center;margin:0 0 1.3rem}
.fi-portrait{position:relative;flex:0 0 80px;width:80px;height:80px;border-radius:50%;overflow:hidden;
  background:var(--linen-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--font-display);font-size:34px;color:var(--clay);border:.5px solid var(--sand-light)}
.fi-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.fi-pedit{position:absolute;left:0;right:0;bottom:0;background:rgba(44,37,32,.62);color:#fff;
  font-family:var(--font-body);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:.25rem 0;opacity:0;transition:opacity .18s}
.fi-portrait:hover .fi-pedit{opacity:1}
@media (hover:none){ .fi-pedit{opacity:1} }
.fi-whotx{flex:1;min-width:0}
.fi-name{font-family:var(--font-display);font-size:clamp(26px,4vw,34px);font-weight:300;
  line-height:1.08;color:var(--dark);margin:0}
.fi-edp{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:11px;
  letter-spacing:.1em;color:var(--taupe);vertical-align:middle;text-decoration:underline;
  text-underline-offset:3px;padding:0 .2rem}
.fi-edp:hover{color:var(--clay)}
.fi-sub{font-size:12.5px;color:var(--taupe);margin:.25rem 0 0}

.fi-count{font-size:13.5px;line-height:1.7;color:var(--taupe);margin:0 0 1.2rem;max-width:58ch}
.fi-count b{color:var(--clay);font-weight:400}

/* ── traer lo de tus libros ── */
.fi-traer{margin:0 0 1.2rem}

/* ── los temas ── */
.fi-group{background:var(--white);border:.5px solid var(--sand-light);border-radius:16px;
  margin-bottom:.7rem;overflow:hidden}
.fi-gtoggle{display:flex;align-items:baseline;gap:.8rem;width:100%;background:none;border:none;
  cursor:pointer;text-align:left;padding:1.05rem 1.4rem;font-family:var(--font-body)}
.fi-gtoggle:hover .fi-gtitle{color:var(--clay)}
.fi-gtitle{font-family:var(--font-display);font-size:21px;font-weight:300;color:var(--dark);
  flex:1;transition:color .18s}
.fi-gcount{font-size:11px;letter-spacing:.1em;color:var(--taupe)}
.fi-caret{font-size:16px;color:var(--taupe);width:1rem;text-align:center}
.fi-group.open{box-shadow:0 10px 30px -26px rgba(44,37,32,.7)}
.fi-gbody{padding:0 1.4rem 1.1rem}
.fi-gnote{font-size:12.5px;color:var(--taupe);margin:0 0 .5rem;max-width:52ch}

.fi-row{display:flex;gap:1rem;align-items:baseline;padding:.7rem 0;border-top:.5px solid var(--linen-dark)}
.fi-gbody .fi-row:first-child{border-top:none}
.fi-label{flex:0 0 38%;max-width:220px;font-size:12.5px;color:var(--taupe);line-height:1.5}
.fi-vals{flex:1;min-width:0}

.fi-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;padding:.1rem 0}
.fi-val+.fi-val{opacity:.6}
.fi-v{font-family:var(--font-display);font-size:19px;line-height:1.3;color:var(--dark);word-break:break-word}
.fi-val:not(.now) .fi-v{font-size:16px}
.fi-when{font-size:11px;letter-spacing:.05em;color:var(--taupe)}
.fi-src{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage,#8a9a86);
  border:.5px solid currentColor;border-radius:999px;padding:.1rem .45rem}

.fi-acts{display:inline-flex;gap:.5rem;opacity:0;transition:opacity .16s}
.fi-val:hover .fi-acts,.fi-val:focus-within .fi-acts{opacity:1}
@media (hover:none){ .fi-acts{opacity:1} }
.fi-act{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:11px;
  letter-spacing:.08em;color:var(--taupe);padding:.1rem 0;text-decoration:underline;text-underline-offset:3px}
.fi-act:hover{color:var(--clay)}
.fi-act.del:hover{color:#a4564b}

/* lo que falta: una sola línea, no una lista de pendientes */
.fi-add{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:13px;
  color:var(--clay);padding:.5rem 0 .1rem;text-align:left;display:block}
.fi-add:hover{text-decoration:underline;text-underline-offset:3px}
.fi-add.small{font-size:12px;padding:.2rem 0}

.fi-picker{padding:.8rem 0 .2rem;border-top:.5px solid var(--linen-dark);margin-top:.5rem}
.fi-picker.sola{border-top:none;padding-top:.2rem;margin-top:0}
.fi-plbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:.6rem}
.fi-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.fi-pill{font-family:var(--font-body);font-size:12.5px;color:var(--taupe);background:transparent;
  border:.5px solid var(--sand-light);border-radius:999px;padding:.45rem .95rem;cursor:pointer;transition:all .16s}
.fi-pill:hover{border-color:var(--clay);color:var(--clay)}

/* el campo: la pregunta vive AQUÍ, una sola vez */
.fi-edit{margin:.7rem 0 .2rem;padding:.85rem 1rem;background:var(--linen);border-radius:12px}
.fi-erow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.fi-in{font-family:var(--font-body);font-size:15px;color:var(--dark);background:var(--white);
  border:.5px solid var(--sand-light);border-radius:9px;padding:.6rem .8rem;min-width:12rem;flex:1 1 14rem}
.fi-in::placeholder{color:var(--taupe);opacity:.85}
.fi-in:focus{outline:none;border-color:var(--clay)}
.fi-unit{font-size:12px;color:var(--taupe)}
.fi-year{font-family:var(--font-body);font-size:13px;color:var(--dark);background:var(--white);
  border:.5px solid var(--sand-light);border-radius:9px;padding:.55rem .7rem}
.fi-ok{padding:.6rem 1.2rem;font-size:12px}

.fi-empty{font-size:14px;color:var(--taupe);padding:1.4rem 0}
.fi-setup{background:var(--white);border:.5px solid var(--sand-light);border-radius:14px;
  padding:1.3rem 1.4rem;font-size:14px;line-height:1.65;color:var(--taupe)}
.fi-setup b{color:var(--dark);font-weight:400}
.fi-setup code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--linen);
  padding:.1rem .35rem;border-radius:5px}
.fi-why{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--taupe);
  background:var(--linen);border-radius:8px;padding:.6rem .7rem;margin-top:.8rem;word-break:break-word}

/* ── el retrato grande, sus fotos, la rejilla y los capítulos ── */
.fi-who.grande{gap:1.4rem;margin-bottom:1rem}
.fi-who.grande .fi-portrait{flex:0 0 132px;width:132px;height:132px;font-size:54px}
.fi-who.grande .fi-name{font-size:clamp(30px,5vw,42px)}

.fi-fotos{margin:0 0 1.4rem}
.fi-ftira{display:flex;gap:.6rem;overflow-x:auto;padding:.2rem .1rem 1rem;scroll-snap-type:x mandatory}
.fi-foto{flex:0 0 auto;margin:0;scroll-snap-align:start}
.fi-foto img{height:150px;width:auto;max-width:220px;object-fit:cover;border-radius:12px;display:block;
  border:.5px solid var(--sand-light)}
.fi-foto figcaption{font-size:10.5px;letter-spacing:.04em;color:var(--taupe);margin-top:.3rem;text-align:center}

.fi-grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.6rem}
.fi-celda{padding:.6rem 0;border-top:.5px solid var(--linen-dark);min-width:0}
.fi-clabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin-bottom:.15rem}
.fi-cval{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.fi-cvacio{background:none;border:none;cursor:pointer;font-family:var(--font-display);
  font-size:19px;color:var(--sand-light);padding:0}
.fi-cvacio:hover{color:var(--clay)}

.fi-caps{margin:0 0 1.2rem}
.fi-capsh{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:.5rem}
.fi-cap{background:var(--white);border:.5px solid var(--sand-light);border-radius:12px;
  padding:.7rem 1rem;margin-bottom:.4rem}
.fi-cap summary{cursor:pointer;font-family:var(--font-display);font-size:17px;color:var(--dark);
  display:flex;align-items:baseline;gap:.6rem}
.fi-cap summary::-webkit-details-marker{display:none}
.fi-capn{font-family:var(--font-body);font-size:10.5px;color:var(--taupe);margin-left:auto}
.fi-capt{font-size:14px;line-height:1.7;color:var(--dark);margin:.6rem 0 0;white-space:pre-wrap}

/* la entrada al árbol, a la altura de los integrantes */
.mo-fam{margin:0 0 1.4rem}
.mo-arbol{background:none;border:.5px solid var(--sand-light);border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:12px;letter-spacing:.1em;color:var(--taupe);padding:.5rem 1.1rem}
.mo-arbol:hover{border-color:var(--clay);color:var(--clay)}
.mo-arbol.on{background:var(--clay);border-color:var(--clay);color:var(--white)}

/* ══════════ EL ÁRBOL ══════════ */
.ar-head{margin-bottom:1.2rem}
.ar-lede{font-size:13.5px;line-height:1.7;color:var(--taupe);max-width:60ch;margin:0}
.ar-lede b{color:var(--clay);font-weight:400}
.ar-canvas{background:linear-gradient(180deg,var(--white),var(--linen));
  border:.5px solid var(--sand-light);border-radius:22px;
  padding:2.6rem 1.2rem 2.4rem;overflow-x:auto}
.ar-tree{display:flex;flex-direction:column;align-items:center;min-width:max-content;margin:0 auto}

/* los papás, cada uno con su rama hacia arriba */
.ar-gen{display:flex;justify-content:center}
.ar-parents{align-items:flex-end}
.ar-branchup{display:flex;flex-direction:column;align-items:center}
.ar-pair{display:flex;align-items:flex-start;justify-content:center}

/* los hermanos de mamá y de papá —los tíos— se abren hacia afuera, para que
   mamá y papá sigan juntos en el centro y los abuelos caigan encima de quien
   les toca */
.ar-withsibs{display:flex;align-items:flex-end;gap:.7rem}
.ar-core{display:flex;flex-direction:column;align-items:center}
.ar-sibs{display:flex;align-items:flex-end;gap:.35rem;padding-bottom:.5rem}
.ar-withsibs.izq .ar-sibs{flex-direction:row-reverse}
.ar-sibs .ar-mini{white-space:nowrap;opacity:.55;transition:opacity .16s}
.ar-withsibs:hover .ar-sibs .ar-mini,.ar-sibs:focus-within .ar-mini{opacity:1}
@media(max-width:720px){
  .ar-sibs .ar-slot.chico{display:none}
  .ar-sibs .ar-slot.chico:first-child,.ar-sibs .ar-slot.chico:nth-child(2){display:flex}
}
.ar-join{align-self:flex-end;width:32px;height:1px;background:var(--sand-light);
  margin-bottom:calc(var(--ar-face)/2 + 34px)}
.ar-join.corta{width:20px;margin-bottom:calc(var(--ar-face-chico)/2 + 26px)}
.ar-stem{width:1px;height:32px;background:var(--sand-light)}
.ar-stem.corto{height:22px}

.ar-kidsrow{display:flex;justify-content:center;gap:1.4rem;position:relative;padding-top:26px}
.ar-kidsrow.many::before{content:'';position:absolute;top:0;
  left:calc(var(--ar-card)/2);right:calc(var(--ar-card)/2);height:1px;background:var(--sand-light)}
.ar-kid{position:relative;display:flex;flex-direction:column;align-items:center}
.ar-kidsrow .ar-kid::before{content:'';position:absolute;top:-26px;left:50%;width:1px;height:26px;
  background:var(--sand-light)}

.ar-slot{display:flex;flex-direction:column;align-items:center}
.ar-card,.ar-empty-card{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:.4rem;padding:.4rem .3rem;width:var(--ar-card);
  font-family:var(--font-body);border-radius:16px;transition:background .16s}
.ar-card:hover,.ar-empty-card:hover{background:rgba(255,255,255,.75)}
.ar-slot.chico .ar-card,.ar-slot.chico .ar-empty-card{width:calc(var(--ar-card) * .74)}
.ar-face{width:var(--ar-face);height:var(--ar-face);border-radius:50%;background:var(--linen-dark);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-display);font-size:30px;color:var(--clay);
  border:.5px solid var(--sand-light);box-shadow:0 8px 20px -14px rgba(44,37,32,.6)}
.ar-face img{width:100%;height:100%;object-fit:cover;display:block}
.ar-card.chico .ar-face,.ar-slot.chico .ar-face{width:var(--ar-face-chico);height:var(--ar-face-chico);font-size:20px}
.ar-face.vacio{background:transparent;border:1px dashed var(--sand-light);color:var(--taupe);
  font-size:26px;box-shadow:none}
.ar-empty-card:hover .ar-face.vacio{border-color:var(--clay);color:var(--clay)}
.ar-n{font-family:var(--font-display);font-size:17px;line-height:1.15;color:var(--dark);text-align:center}
.ar-card.chico .ar-n{font-size:14px}
.ar-empty-card .ar-n{color:var(--taupe);font-family:var(--font-body);font-size:11.5px;letter-spacing:.05em}
.ar-e{font-size:10.5px;color:var(--taupe);text-align:center;line-height:1.3}
.ar-card.chico .ar-e{display:none}

.ar-mini{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:10.5px;
  letter-spacing:.06em;color:var(--taupe);text-decoration:underline;text-underline-offset:3px;
  padding:.2rem;margin-top:.1rem}
.ar-mini:hover{color:var(--clay)}

.ar-pick{background:var(--white);border:.5px solid var(--clay);border-radius:16px;
  padding:1.2rem 1.3rem;margin-top:1rem}
.ar-ph{font-family:var(--font-display);font-size:20px;color:var(--dark);margin-bottom:.8rem}
.ar-plist{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.ar-pit{background:none;border:.5px solid var(--sand-light);border-radius:14px;cursor:pointer;padding:.2rem}
.ar-pit:hover{border-color:var(--clay)}
.ar-prow{display:flex;align-items:center;gap:.9rem}

.ar-loose{margin-top:1.2rem;background:var(--white);border:.5px dashed var(--sand-light);
  border-radius:18px;padding:1.3rem 1.4rem}
.ar-lh{font-family:var(--font-display);font-size:19px;color:var(--dark);margin-bottom:.3rem}
.ar-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.9rem}
.ar-empty{font-size:14px;color:var(--taupe);padding:1.4rem 0}
.ar-setup{background:var(--white);border:.5px solid var(--sand-light);border-radius:14px;
  padding:1.3rem;font-size:14px;line-height:1.65;color:var(--taupe)}
.ar-setup b{color:var(--dark);font-weight:400}
.ar-setup code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--linen);padding:.1rem .35rem;border-radius:5px}
.ar-why{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--linen);
  border-radius:8px;padding:.6rem .7rem;margin-top:.8rem;word-break:break-word}

/* ══════════ TRAER LO DE TUS LIBROS ══════════ */
.tr-box{background:var(--white);border:.5px solid var(--sand-light);border-radius:16px;
  padding:1.3rem 1.4rem;margin-top:.8rem}
.tr-back{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);padding:0 0 .8rem}
.tr-back:hover{color:var(--clay)}
.tr-h{font-family:var(--font-display);font-size:22px;font-weight:300;color:var(--dark)}
.tr-lede{font-size:13px;line-height:1.65;color:var(--taupe);margin:.4rem 0 1rem;max-width:58ch}
.tr-lede b{color:var(--dark);font-weight:400}
.tr-empty{font-size:13.5px;color:var(--taupe);line-height:1.6}
.tr-list{display:flex;flex-wrap:wrap;gap:.6rem}
.tr-book{display:flex;align-items:center;gap:.75rem;background:var(--linen);border:.5px solid transparent;
  border-radius:13px;padding:.6rem .9rem .6rem .6rem;cursor:pointer;font-family:var(--font-body);
  text-align:left;transition:all .18s}
.tr-book:hover{border-color:var(--clay)}
.tr-book img,.tr-nocover{width:38px;height:50px;border-radius:4px;object-fit:cover;display:block;
  background:var(--linen-dark);flex:0 0 38px}
.tr-bt{display:block;font-family:var(--font-display);font-size:17px;color:var(--dark);line-height:1.15}
.tr-bs{display:block;font-size:11px;color:var(--taupe);margin-top:2px}
.tr-year{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--linen);
  border-radius:11px;padding:.7rem .9rem;margin-bottom:1rem}
.tr-year label{font-size:12.5px;color:var(--taupe)}
.tr-year select{font-family:var(--font-body);font-size:13px;background:var(--white);
  border:.5px solid var(--sand-light);border-radius:8px;padding:.4rem .6rem;color:var(--dark)}
.tr-group{border-top:.5px solid var(--linen-dark);padding:1rem 0 .4rem}
.tr-gh{font-family:var(--font-display);font-size:19px;color:var(--dark);margin-bottom:.5rem}
.tr-rol{font-family:var(--font-body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.tr-dest{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.tr-dest label{font-size:11.5px;letter-spacing:.06em;color:var(--taupe)}
.tr-dest select{font-family:var(--font-body);font-size:13px;background:var(--white);
  border:.5px solid var(--sand-light);border-radius:8px;padding:.4rem .6rem;color:var(--dark)}
.tr-item{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;cursor:pointer}
.tr-item input{margin-top:.35rem;flex:0 0 auto;accent-color:var(--clay)}
.tr-lab{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)}
.tr-val{display:block;font-size:14px;line-height:1.6;color:var(--dark);margin-top:.2rem;white-space:pre-wrap}
.tr-tag{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--taupe);border:.5px solid var(--sand-light);border-radius:999px;padding:.1rem .5rem;margin-top:.35rem}
.tr-fotos{display:flex;flex-wrap:wrap;gap:.5rem}
.tr-foto{width:74px;height:74px;border-radius:10px;overflow:hidden;padding:0;cursor:pointer;
  border:2px solid transparent;background:var(--linen-dark)}
.tr-foto img{width:100%;height:100%;object-fit:cover;display:block}
.tr-foto.on{border-color:var(--clay)}
.tr-go{padding-top:1rem;border-top:.5px solid var(--linen-dark);margin-top:.6rem}

/* ══════════ LA PÁGINA ESCRITA A MANO ══════════ */
.lb-box{background:var(--white);border:.5px solid var(--sand-light);border-radius:16px;
  padding:1.5rem;margin-bottom:1.6rem}
.lb-box h3{font-family:var(--font-display);font-size:22px;font-weight:300;color:var(--dark);margin:0 0 .5rem}
.lb-box p{font-size:13.5px;line-height:1.7;color:var(--taupe);margin:0 0 1.1rem;max-width:60ch}
.lb-box p b{color:var(--dark);font-weight:400}
.lb-drop{display:flex;align-items:center;gap:.9rem;border:.5px dashed var(--sand-light);
  border-radius:14px;padding:1rem 1.2rem;cursor:pointer;transition:all .18s;
  font-family:var(--font-body);font-size:14px;color:var(--clay)}
.lb-drop:hover{border-color:var(--clay);background:var(--linen)}
.lb-drop small{display:block;font-size:11.5px;color:var(--taupe);margin-top:2px}
.lb-plus{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--linen-dark);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--clay)}
.lb-pages{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.lb-page{position:relative;width:104px}
.lb-page img{width:100%;height:132px;object-fit:cover;border-radius:10px;display:block;
  border:.5px solid var(--sand-light)}
.lb-page.busy img{opacity:.5}
.lb-st{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--taupe);margin-top:.3rem;text-align:center}
.lb-st.bad{color:#a4564b}
.lb-err{display:block;font-size:10.5px;line-height:1.45;color:var(--taupe);margin-top:.25rem;
  background:var(--linen);border-radius:7px;padding:.35rem .45rem;word-break:break-word}
.lb-quitar{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:.5px solid var(--sand-light);background:var(--white);color:var(--taupe);cursor:pointer;
  font-size:15px;line-height:1;padding:0}
.lb-quitar:hover{color:#a4564b;border-color:#a4564b}
.lb-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1rem}
.lb-prop{border-top:.5px solid var(--linen-dark);margin-top:1.2rem;padding-top:1.2rem}
.lb-ph{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.8rem}
.lb-ph img{width:64px;height:80px;object-fit:cover;border-radius:8px;flex:0 0 64px;border:.5px solid var(--sand-light)}
.lb-when{font-size:13px;color:var(--taupe);line-height:1.5}
.lb-when b{color:var(--dark);font-weight:400}
.lb-date{font-family:var(--font-body);font-size:13px;background:var(--white);
  border:.5px solid var(--sand-light);border-radius:8px;padding:.42rem .6rem;color:var(--dark)}
.lb-aprox{font-size:11.5px;color:var(--taupe);display:inline-flex;align-items:center;gap:.35rem}
.lb-aprox input{accent-color:var(--clay)}
.lb-lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin:1rem 0 .3rem}
.lb-tr{margin-top:.8rem}
.lb-tr summary{font-size:12px;color:var(--taupe);cursor:pointer;letter-spacing:.05em}
.lb-tr summary:hover{color:var(--clay)}
.lb-trtx{font-size:13.5px;line-height:1.8;color:var(--dark);white-space:pre-wrap;
  background:var(--linen);border-radius:11px;padding:1rem 1.1rem;margin-top:.6rem;max-height:22rem;overflow:auto}
.lb-go{padding-top:1.1rem;border-top:.5px solid var(--linen-dark);margin-top:1.1rem}
.lb-hint{font-size:11.5px;color:var(--taupe);margin:.6rem 0 0}

/* ══════════ DAR DE ALTA A UNA PERSONA ══════════ */
.kp-back{position:fixed;inset:0;z-index:9000;background:rgba(44,37,32,.42);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  backdrop-filter:blur(2px);animation:kpIn .18s ease}
@keyframes kpIn{from{opacity:0}to{opacity:1}}
.kp-card{position:relative;background:var(--white);border-radius:20px;width:min(560px,100%);
  max-height:92vh;overflow:auto;padding:2rem 2rem 1.6rem;box-shadow:0 40px 80px -40px rgba(44,37,32,.7)}
.kp-x{position:absolute;top:.9rem;right:1.1rem;background:none;border:none;font-size:24px;
  line-height:1;color:var(--taupe);cursor:pointer;padding:.2rem .4rem}
.kp-x:hover{color:var(--clay)}
.kp-eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin:0 0 .6rem}
.kp-h{font-family:var(--font-display);font-size:clamp(24px,4vw,32px);font-weight:300;
  line-height:1.1;color:var(--dark);margin:0}
.kp-lede{font-size:14px;line-height:1.65;color:var(--taupe);margin:.6rem 0 1.4rem;max-width:46ch}
.kp-lbl{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe);margin:1.2rem 0 .5rem}
.kp-in{font-family:var(--font-body);font-size:16px;color:var(--dark);background:var(--linen);
  border:.5px solid var(--sand-light);border-radius:11px;padding:.75rem .9rem;width:100%}
.kp-in:focus{outline:none;border-color:var(--clay);background:var(--white)}
.kp-date{width:auto;min-width:11rem}
.kp-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.kp-hint{font-family:var(--font-display);font-size:17px;color:var(--clay)}
.kp-why{font-size:12px;line-height:1.6;color:var(--taupe);margin:.5rem 0 0;max-width:48ch}
.kp-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.kp-pill{font-family:var(--font-body);font-size:12.5px;color:var(--taupe);background:transparent;
  border:.5px solid var(--sand-light);border-radius:999px;padding:.5rem 1rem;cursor:pointer;transition:all .16s}
.kp-pill:hover{border-color:var(--clay);color:var(--clay)}
.kp-pill.on{background:var(--clay);border-color:var(--clay);color:var(--white)}
.kp-go{display:flex;justify-content:flex-end;align-items:center;gap:.8rem;margin-top:1.8rem;
  padding-top:1.2rem;border-top:.5px solid var(--linen-dark)}
.kp-ghost{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:13px;color:var(--taupe)}
.kp-ghost:hover{color:var(--clay)}

/* los chips de personas, con cara */
.mo-person.kp-rich{padding:.75rem 1.1rem .75rem .75rem}
.mo-person.kp-rich .mo-avatar{width:46px;height:46px;flex:0 0 46px;overflow:hidden;font-size:21px}
.mo-avatar.kp-hasimg{background:var(--linen-dark)}
.mo-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.mo-person.on{box-shadow:0 10px 26px -18px rgba(44,37,32,.75)}
.mo-person.on .mo-pname{color:var(--clay)}
.mo-person.add.yo{border-style:solid;border-color:var(--clay)}
.mo-person.add.yo .mo-avatar{border-color:var(--clay);color:var(--clay)}
.mo-person.add.yo .mo-pname{color:var(--clay)}

@media (max-width:640px){
  :root{ --ar-card:96px; --ar-face:58px; --ar-face-chico:38px; }
  .fi-grid{grid-template-columns:1fr}
  .fi-who.grande .fi-portrait{flex:0 0 92px;width:92px;height:92px;font-size:38px}
  .fi-foto img{height:120px;max-width:170px}
  .fi-row{flex-direction:column;gap:.15rem;align-items:stretch}
  .fi-label{flex:none;max-width:none;font-size:11.5px;letter-spacing:.04em}
  .fi-gtoggle{padding:1rem 1.1rem}
  .fi-gbody{padding:0 1.1rem 1rem}
  .fi-who{gap:.9rem}
  .fi-portrait{flex:0 0 64px;width:64px;height:64px;font-size:26px}
  .mo-shelf{padding:.7rem .7rem;font-size:10.5px;letter-spacing:.1em}
  .ar-canvas{padding:1.6rem .6rem}
  .ar-kidsrow{gap:.6rem}
  .ar-n{font-size:14px}
  .kp-card{padding:1.6rem 1.2rem 1.2rem}
  .lb-box{padding:1.2rem}
  .lb-page{width:88px}
  .lb-page img{height:112px}
  .tr-box{padding:1.1rem}
}
.tr-o{font-size:12px;color:var(--taupe)}

/* el sello: qué versión de cada pieza está publicada. Discreto a propósito. */
.fi-sello{margin-top:2.4rem;padding-top:.9rem;border-top:.5px solid var(--sand-light);
  font-family:var(--font-body);font-size:9.5px;letter-spacing:.06em;color:var(--sand);
  text-align:center;opacity:.7}

/* ── la casa ────────────────────────────────────────────────────────────────
   Un lugar más en la repisa, pero se nota que no es una persona: el retrato
   es cuadrado de esquinas suaves, no un círculo. */
.mo-person.casa .mo-avatar{border-radius:12px;background:var(--linen-dark);
  color:var(--clay);border:.5px solid var(--sand-light)}
.mo-person.add.casa .mo-avatar{border:1px dashed var(--sand-light);background:transparent}
.fi-who.grande.casa .fi-portrait{border-radius:20px}