@import url("tipos/tipos.css");

/* =============================================================================
   Parentela — hoja de estilo común (árbol + administración)

   La idea visual viene del original: papel cuadriculado, lápiz grafito, tinta
   azul para lo que se puede tocar y rojo apagado para lo que está en duda.

   Tres tipografías, cada una con un trabajo:
     Archivo Narrow  los nombres. Condensada, aire de libro de registro.
     Spectral        los textos corridos. Serifa de lectura, no decorativa.
     IBM Plex Mono   fechas, referencias al manuscrito, etiquetas.
   Van autoalojadas en tipos/: si las pidiéramos a Google, cada visita de un
   pariente quedaría registrada en un servidor ajeno.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Paleta: una foto de 1925.

   Nada de gris neutro. El papel es crema virado, los textos son tinta sepia
   oxidada y las reglas tienen el tono del cartón de un álbum viejo. El único
   frío del sitio es el azul de lo que se puede tocar: es el azul de una lapicera
   sobre una foto marrón, y por contraste es lo primero que encuentra el ojo.
   --------------------------------------------------------------------------- */
:root{
  --paper:#E9DFC9; --paper2:#F3EBDB; --panel:#DFD3B9;
  --rule:#CDBC9B; --rule-strong:#AC9670;
  --graphite:#33291E; --graphite2:#6A5741; --graphite3:#907C60;
  --ink:#2C4A63; --ink-soft:#456B8B;
  --red:#8E3A2B; --verde:#4E6B3E; --ambar:#8A6516;
  --grid1:rgba(120,95,60,.14); --grid2:rgba(120,95,60,.26);
  --sombra-foto:rgba(60,42,22,.30);
  --grano:.075; --vineta:.30;
  --shadow:0 1px 0 rgba(90,66,36,.07), 0 6px 18px -12px rgba(70,48,24,.45);
  --serif:Spectral,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --cond:"Archivo Narrow","Roboto Condensed","Arial Narrow",system-ui,sans-serif;

  /* La sobremesa vive en una columna fija a la derecha. `--lat` es cuánto lugar
     le está sacando al resto de la página en este momento: vale 0 salvo que el
     panel esté anclado, y de ahí sale el ancho útil del que depende el lienzo.
     Sin esto, un elemento a 100vw se metería por debajo del panel.

     El ancho útil se calcula donde se usa y no acá: una variable declarada en
     :root se resuelve con el valor que --lat tiene EN :root, que es siempre 0.
     Heredada hasta el lienzo, en cambio, toma el valor puesto en el body. */
  --lat-w:356px; --lat:0px;
}
/* El oscuro no es el negativo del claro: es el mismo álbum a media luz. Los
   marrones se mantienen, bajados; el papel se vuelve el cuero de la tapa. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#16110C; --paper2:#1E1810; --panel:#261F16;
    --rule:#3B3123; --rule-strong:#544632;
    --graphite:#EADDC3; --graphite2:#B7A488; --graphite3:#8B7A61;
    --ink:#8FB6DA; --ink-soft:#6E96BC;
    --red:#D4917E; --verde:#93B584; --ambar:#D7B268;
    --grid1:rgba(200,170,120,.07); --grid2:rgba(200,170,120,.14);
    --sombra-foto:rgba(0,0,0,.6);
    --grano:.055; --vineta:.44;
    --shadow:0 1px 0 rgba(0,0,0,.45), 0 8px 22px -14px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#16110C; --paper2:#1E1810; --panel:#261F16;
  --rule:#3B3123; --rule-strong:#544632;
  --graphite:#EADDC3; --graphite2:#B7A488; --graphite3:#8B7A61;
  --ink:#8FB6DA; --ink-soft:#6E96BC;
  --red:#D4917E; --verde:#93B584; --ambar:#D7B268;
  --grid1:rgba(200,170,120,.07); --grid2:rgba(200,170,120,.14);
  --sombra-foto:rgba(0,0,0,.6);
  --grano:.055; --vineta:.44;
  --shadow:0 1px 0 rgba(0,0,0,.45), 0 8px 22px -14px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --paper:#E9DFC9; --paper2:#F3EBDB; --panel:#DFD3B9;
  --rule:#CDBC9B; --rule-strong:#AC9670;
  --graphite:#33291E; --graphite2:#6A5741; --graphite3:#907C60;
  --ink:#2C4A63; --ink-soft:#456B8B;
  --red:#8E3A2B; --verde:#4E6B3E; --ambar:#8A6516;
  --grid1:rgba(120,95,60,.14); --grid2:rgba(120,95,60,.26);
  --sombra-foto:rgba(60,42,22,.30);
  --grano:.075; --vineta:.30;
  --shadow:0 1px 0 rgba(90,66,36,.07), 0 6px 18px -12px rgba(70,48,24,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* El cuadriculado de papel milimetrado quedaba compitiendo con las líneas del
   árbol y con los bordes de las cajas: tres retículas encimadas leen como ruido.
   Queda una sola luz difusa desde arriba, que da profundidad sin dibujar nada. */
body{
  margin:0; color:var(--graphite); font-family:var(--serif); font-size:17px; line-height:1.55;
  background-color:var(--paper);
  background-image:radial-gradient(130% 78% at 50% -6%, var(--paper2) 0%, transparent 62%);
  background-repeat:no-repeat; background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  /* El lienzo se sale a los costados con width:100vw para ocupar toda la
     ventana. En Windows la barra de scroll ocupa lugar y 100vw termina siendo
     más ancho que lo visible: aparecía una barra horizontal en toda la página.
     `clip` lo recorta; `hidden` no sirve acá porque convertiría al body en un
     contenedor de scroll y rompería la barra de búsqueda pegajosa. */
  overflow-x:clip;
  /* le deja el lugar al panel de la sobremesa cuando está anclado */
  padding-right:var(--lat);
  transition:padding-right .22s ease;
}
@media (prefers-reduced-motion:reduce){body{transition:none}}
/* -----------------------------------------------------------------------------
   El grano y el viñeteado de la foto.

   Van en dos capas fijas por encima de TODO —incluido el panel lateral— porque
   el efecto solo funciona si la página entera parece una sola copia fotográfica
   y no un collage con una textura pegada atrás. `pointer-events:none` es lo que
   hace que estén ahí sin existir: no reciben un solo clic.

   El grano es un feTurbulence embebido, no una imagen: pesa unos 300 bytes, no
   pide nada a ningún servidor y no se pixela en pantallas retina.
   --------------------------------------------------------------------------- */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:var(--grano);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  opacity:var(--vineta);
  background:radial-gradient(125% 95% at 50% 42%, transparent 38%, var(--sombra-foto) 100%);
}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px 96px}
section{margin-top:44px;scroll-margin-top:76px}
[hidden]{display:none !important}

/* ------------------------------------------------------------- tipografía --*/
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.06;margin:0 0 14px;font-weight:600;
   letter-spacing:-.012em;text-wrap:balance;max-width:16em}
h1 em{font-style:normal;color:var(--graphite3)}
h2{font-size:24px;margin:0;font-weight:600;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
   color:var(--ink);margin:0 0 14px}
.lede{margin:0;max-width:60ch;color:var(--graphite2);font-size:17px}
.sec-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule-strong);
   padding-bottom:8px;margin-bottom:8px}
.sec-head .doc{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
   color:var(--graphite3);margin-left:auto;white-space:nowrap}
.sec-note{font-size:14.5px;color:var(--graphite2);margin:10px 0 18px;max-width:62ch}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- portada ----*/
/* La tapa. El nombre va en la condensada y en mayúsculas: es la letra de los
   libros de registro, y es lo que le da cara al sitio ahora que el fondo no
   dibuja nada. */
.portada{text-align:center;padding:64px 0 34px;border-bottom:0}
.portada .eyebrow{margin-bottom:26px}
.portada h1{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  font-size:clamp(42px,10vw,96px);line-height:.94;letter-spacing:.06em;
  margin:0;max-width:none;color:var(--graphite);
}
.bajo-titulo{font-style:italic;color:var(--graphite2);font-size:clamp(16px,2.2vw,20px);
   margin:14px 0 0}
.portada .lede{margin:22px auto 0;text-align:left;max-width:56ch}

/* filete: dos rayas y un rombo. Separa sin cortar, como en un frontispicio. */
.filete{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px auto;
   max-width:340px;color:var(--rule-strong)}
.filete span{flex:1;height:1px;background:currentColor}
.filete b{font-size:9px;color:var(--ink);line-height:1}

/* ----------------------------------------------------------------- header --*/
header{padding:40px 0 22px;border-bottom:1px solid var(--rule-strong)}
header .filete{margin:20px 0 18px;max-width:220px;justify-content:flex-start}
.barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.barra .sp{margin-left:auto}
.marca{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
   color:var(--ink);text-decoration:none;font-weight:600}
.quien{font-family:var(--mono);font-size:11.5px;color:var(--graphite3)}
.quien b{color:var(--graphite2);font-weight:600}

.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border:1px solid var(--rule-strong);
   background:var(--paper2)}
.stat{flex:1 1 130px;padding:12px 16px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;
   font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
   color:var(--graphite3)}

/* --------------------------------------------------------------- controles --*/
button.b, .b{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 12px;background:var(--paper2);color:var(--graphite2);
  border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
button.b:hover,.b:hover{color:var(--ink);border-color:var(--ink-soft)}
button.b:focus-visible,.b:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
button.b[aria-pressed="true"]{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
button.b:disabled{opacity:.45;cursor:not-allowed}
button.b.pri{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
button.b.pri:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper2)}
button.b.danger{color:var(--red);border-color:var(--red)}

/* Campos generosos a propósito: la mitad de la familia que va a usar esto tiene
   más de setenta años. 16px es además el mínimo que evita que iOS haga zoom
   solo al tocar un campo. */
input[type=text],input[type=email],input[type=search],input[type=password],textarea,select{
  width:100%;padding:12px 13px;font-family:var(--serif);font-size:16px;
  color:var(--graphite);background:var(--paper2);
  border:1px solid var(--rule-strong);border-radius:2px;
}
input[type=search]{font-family:var(--mono);font-size:14px}
input[readonly]{color:var(--graphite3);background:var(--panel)}
textarea{font-family:var(--serif);font-size:15px;line-height:1.45;resize:vertical;min-height:76px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
label.campo{display:block;margin:12px 0}
label.campo > span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
   text-transform:uppercase;color:var(--graphite3);margin-bottom:5px}
label.campo > span i{font-style:italic;text-transform:none;letter-spacing:0;font-size:11px}
.ayuda{font-size:13px;color:var(--graphite3);margin:5px 0 0}

/* Dos campos que se leen como uno solo (nombre y apellido, papá y mamá). En el
   teléfono se apilan: partidos al medio no entra ni un nombre. */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:620px){.dupla{grid-template-columns:1fr}}

button.b.grande{font-size:13px;padding:13px 22px}

/* ------------------------------------------------------------- el acceso ---*/
.acceso{max-width:480px}
.pestanas{display:flex;gap:0;border-bottom:1px solid var(--rule-strong);margin-bottom:0}
.pest{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 16px;background:none;border:1px solid transparent;border-bottom:0;
  color:var(--graphite3);cursor:pointer;margin-bottom:-1px;border-radius:2px 2px 0 0;
}
.pest:hover{color:var(--ink)}
.pest:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pest.on{color:var(--ink);background:var(--paper2);border-color:var(--rule-strong);
   border-bottom:1px solid var(--paper2);font-weight:600}
.acceso .caja{margin-top:0;border-top:0}

/* La contraseña se puede mostrar. Escribir a ciegas es donde más se traba
   alguien que no tipea rápido, y esto no baja la seguridad: la pantalla ya la
   está mirando quien la escribe. */
.clave-caja{display:flex;gap:0;align-items:stretch}
.clave-caja input{border-radius:2px 0 0 2px}
.ojo{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:0 13px;background:var(--panel);color:var(--graphite2);cursor:pointer;
  border:1px solid var(--rule-strong);border-left:0;border-radius:0 2px 2px 0;flex:0 0 auto;
}
.ojo:hover{color:var(--ink)}
.ojo:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

.salidas{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
   margin-top:20px;padding-top:16px;border-top:1px solid var(--rule)}
.enlace{background:none;border:0;padding:0;cursor:pointer;font-family:var(--serif);
   font-size:14.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;
   text-decoration-thickness:1px}
.enlace:hover{color:var(--ink-soft)}
.enlace:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.toolbar{position:sticky;top:0;z-index:40;margin:0 -20px;padding:12px 20px;
   background:color-mix(in srgb, var(--paper) 88%, transparent);
   backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
   display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{position:relative;flex:1 1 260px;min-width:0}
.search input{padding-left:32px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;
   stroke:var(--graphite3);fill:none;stroke-width:1.6}
.hits{font-family:var(--mono);font-size:12px;color:var(--graphite3);white-space:nowrap}

/* ------------------------------------------------------------------ árbol --*/
nav.troncos{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
nav.troncos a{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-decoration:none;
   color:var(--graphite2);border:1px solid var(--rule-strong);border-radius:2px;
   padding:6px 10px;background:var(--paper2)}
nav.troncos a:hover{color:var(--ink);border-color:var(--ink-soft)}

.tree{margin-top:6px}
.kids{margin:0;padding:0;list-style:none}
.node{position:relative;padding-left:26px}
.node::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px solid var(--rule-strong)}
.node:last-child::before{bottom:auto;height:23px}
.node::after{content:"";position:absolute;left:0;top:23px;width:26px;border-top:1.5px solid var(--rule-strong)}
.tree > .kids > .node{padding-left:0}
.tree > .kids > .node::before,.tree > .kids > .node::after{display:none}
.node.closed > .kids{display:none}
.node.closed > .card .toggle::after{content:"+";margin-left:1px}

.card{display:flex;align-items:flex-start;gap:2px;flex-direction:column;
   background:var(--paper2);border:1px solid var(--rule-strong);border-radius:2px;
   padding:8px 12px 9px;margin:5px 0;box-shadow:var(--shadow);position:relative;max-width:640px}
.card.is-root{border-color:var(--ink);border-left-width:3px}
.card.hit{border-color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 22%,transparent),var(--shadow)}
.card.dim{opacity:.34}
.card.pend{border-left:3px solid var(--ambar)}

.pers{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;cursor:pointer;width:100%;
   background:none;border:0;padding:1px 0;font:inherit;color:inherit;text-align:left}
.pers:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nm{font-size:16.5px;letter-spacing:.005em}
.nm .sur{font-variant-caps:all-small-caps;letter-spacing:.06em;font-weight:600}
.pers.unnamed .nm{color:var(--graphite3);font-style:italic}
.pers:hover .nm{color:var(--ink)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--graphite3);font-variant-numeric:tabular-nums}
.meta i{font-style:normal;color:var(--graphite2)}
.joiner{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
   color:var(--graphite3);padding:1px 0}

.flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
   border:1px solid currentColor;border-radius:2px;padding:0 4px;line-height:1.5}
.flag.q{color:var(--red)}
.flag.nk{color:var(--graphite3)}
.flag.pend{color:var(--ambar)}
.flag.ok{color:var(--verde)}

.toggle{position:absolute;right:8px;top:8px;width:26px;height:22px;
   font-family:var(--mono);font-size:10.5px;color:var(--graphite3);
   background:var(--panel);border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
   display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.toggle:hover{color:var(--ink);border-color:var(--ink-soft)}
.toggle:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ------------------------------------------------------------- panel lateral --*/
.drawer{position:fixed;right:0;top:0;height:100%;width:min(420px,94vw);z-index:60;
   background:var(--paper2);border-left:1px solid var(--rule-strong);
   box-shadow:-12px 0 40px -24px rgba(20,30,40,.6);
   transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;padding:22px 22px 60px}
.drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer h3{margin:0 0 2px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.drawer .sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);margin-bottom:18px}
.drawer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 18px;font-size:14px}
.drawer dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);padding-top:3px}
.drawer dd{margin:0}
.drawer .note{font-size:14px;color:var(--graphite2);border-left:2px solid var(--ink);
   padding-left:12px;margin:0 0 18px}
.drawer .note.warn{border-color:var(--red)}
.drawer .rel a{display:block;font-size:15px;color:var(--ink);text-decoration:none;padding:3px 0;
   border-bottom:1px solid var(--rule);cursor:pointer}
.drawer .rel a:hover{text-decoration:underline}
.drawer .close{position:absolute;right:14px;top:14px}
.scrim{position:fixed;inset:0;background:rgba(15,22,28,.35);z-index:55;opacity:0;
   pointer-events:none;transition:opacity .22s}
.scrim.on{opacity:1;pointer-events:auto}

/* --------------------------------------------------------------- tarjetas --*/
.caja{border:1px solid var(--rule-strong);background:var(--paper2);padding:16px 18px;
   margin:12px 0;max-width:72ch;box-shadow:var(--shadow)}
.caja.acento{border-left:3px solid var(--ink)}
.caja.duda{border-left:3px solid var(--red)}
.caja.resuelta{opacity:.6}
.caja .t{font-size:16.5px;font-weight:600;margin:0}
.caja .d{font-size:14.5px;color:var(--graphite2);margin:6px 0 0}
.caja .pie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

/* diff de una propuesta: lo viejo tachado, lo nuevo en tinta */
.diff{font-family:var(--mono);font-size:13px;margin:10px 0;display:grid;
   grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.diff dt{color:var(--graphite3);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.diff dd{margin:0}
.diff .viejo{color:var(--graphite3);text-decoration:line-through;text-decoration-thickness:1px}
.diff .nuevo{color:var(--ink);font-weight:600}
.diff .vacio{font-style:italic;color:var(--graphite3);text-decoration:none}

/* A quién se parece el que pide entrar. El moderador confirma, no elige el
   servidor: la coincidencia más alta puede ser un hermano, que tiene los mismos
   padres y el mismo apellido. */
.candidatos{border:1px solid var(--rule);background:var(--paper);padding:10px 12px;margin:12px 0}
.candidatos .rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
   text-transform:uppercase;color:var(--graphite3);margin:0 0 6px}
.opcion{display:flex;align-items:flex-start;gap:10px;padding:7px 3px;cursor:pointer;
   border-top:1px solid var(--rule)}
.opcion:first-of-type{border-top:0}
.opcion:hover{background:var(--paper2)}
.opcion input{flex:0 0 auto;width:17px;height:17px;margin:3px 0 0;accent-color:var(--ink)}
.opcion > span{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:15px}
.opcion i{font-style:normal;color:var(--graphite3);font-size:11.5px}
.opcion em{font-style:normal}

/* =============================================================================
   LA SOBREMESA
   No son globitos de chat. Son entradas de un cuaderno: sello con las iniciales,
   quién habló, cuándo, y lo dicho. Encaja con el resto del sitio y además se lee
   mejor cuando hay que seguir una conversación larga hacia atrás.

   Vive en una columna fija a la derecha, siempre a la vista mientras se mira el
   árbol: la charla es sobre lo que se está mirando, y mandarla al pie de la
   página la volvía un lugar al que había que ir. Acá está al lado.
   ============================================================================= */

.lateral{
  position:fixed;top:0;right:0;bottom:0;width:var(--lat-w);z-index:50;
  display:none;flex-direction:column;          /* se muestra dentro del árbol */
  background:var(--paper2);border-left:1px solid var(--rule-strong);
  box-shadow:-16px 0 36px -24px var(--sombra-foto);
  transform:translateX(100%);transition:transform .22s ease;
}
body.en-app .lateral{display:flex}
body.lat-abierto .lateral{transform:none}
@media (prefers-reduced-motion:reduce){.lateral{transition:none}}

.lat-cab{flex:0 0 auto;display:flex;align-items:baseline;gap:10px;
   padding:13px 14px 11px;background:var(--panel);
   border-bottom:1px solid var(--rule-strong)}
.lat-cab h2{font-family:var(--cond);font-size:17px;font-weight:700;letter-spacing:.04em;
   text-transform:uppercase}
.lat-cab .doc{margin-left:0}
.lat-x{margin-left:auto;background:none;border:0;padding:0 2px;cursor:pointer;
   font-size:21px;line-height:1;color:var(--graphite3);align-self:center}
.lat-x:hover{color:var(--red)}
.lat-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* El hilo es lo único elástico: el encabezado y el campo de escribir quedan
   clavados, y lo que crece o se achica es la conversación. `min-height:0` es lo
   que le permite encogerse dentro del flex en vez de desbordar el panel. */
.hilo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0}
.hilo .vacio-msg{padding:26px 18px}

/* El botón de la barra, con la cuenta de lo que llegó mientras estaba cerrado */
#btnChat{display:none;position:relative}
body.en-app #btnChat{display:inline-block}
.pico{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;
   border-radius:9px;background:var(--red);color:#F6F0E4;
   font-family:var(--mono);font-size:10px;font-weight:600;line-height:18px;
   text-align:center;letter-spacing:0}

/* El velo del panel de la sobremesa va por DEBAJO de él (45 < 50). Si tuviera
   el z-index del otro velo lo estaría tapando en vez de destacarlo. */
#scrimLat{z-index:45}

/* -------------------------------------------------------------- anclada ----
   De acá para arriba hay lugar para dos columnas: el panel deja de ser un cajón
   que tapa y pasa a empujar la página. Es el estado normal en una computadora.
   -------------------------------------------------------------------------- */
@media (min-width:1100px){
  body.en-app.lat-abierto{--lat:var(--lat-w)}
  #scrimLat{display:none}                 /* anclada no oscurece nada */

  /* La ficha de una persona se abre al lado de la sobremesa, no encima: se
     puede mirar a alguien y comentarlo sin que una cosa esconda la otra. */
  body.en-app.lat-abierto .drawer{right:var(--lat-w);
     transform:translateX(calc(100% + var(--lat-w)))}
  body.en-app.lat-abierto .drawer.open{transform:none}
  body.en-app.lat-abierto #scrim{right:var(--lat-w)}
}

.msj{display:grid;grid-template-columns:auto 1fr;gap:0 13px;padding:12px 18px;
   border-bottom:1px solid var(--rule)}
.msj:last-child{border-bottom:0}
.msj.mio{background:color-mix(in srgb,var(--ink) 5%,transparent)}
/* mensajes seguidos de la misma persona: se calla el encabezado y se alinea el
   texto con el de arriba. Repetir el nombre cinco veces es ruido. */
.msj.sigue{border-top:0;padding-top:2px}
.msj.sigue .sello,.msj.sigue .quien-msj{visibility:hidden;height:0;overflow:hidden}

.sello{grid-row:1 / span 2;width:34px;height:34px;border-radius:2px;
   display:flex;align-items:center;justify-content:center;
   font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.04em;
   color:#F6F8F4;text-transform:uppercase;user-select:none}
.msj.sigue .sello{height:0;width:34px}

.quien-msj{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:2px}
.quien-msj b{font-family:var(--cond);font-size:15px;font-weight:700;letter-spacing:.03em;
   color:var(--graphite)}
.quien-msj time{font-family:var(--mono);font-size:10.5px;color:var(--graphite3);
   font-variant-numeric:tabular-nums}
.quien-msj .borrar{margin-left:auto;background:none;border:0;padding:0 2px;cursor:pointer;
   font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);opacity:0;transition:opacity .15s}
.msj:hover .borrar,.borrar:focus-visible{opacity:1}
.quien-msj .borrar:hover{color:var(--red)}
.dicho{margin:0;font-size:15.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

.dia{position:sticky;top:0;z-index:2;text-align:center;padding:7px 0;
   font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
   color:var(--graphite3);background:color-mix(in srgb,var(--paper2) 92%,transparent);
   backdrop-filter:blur(4px);border-bottom:1px solid var(--rule)}

/* En una columna angosta el campo y el botón no entran uno al lado del otro sin
   que el campo quede inservible: el texto va a todo el ancho y Mandar debajo. */
.decir{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:12px 14px;
   border-top:1px solid var(--rule-strong);background:var(--panel)}
.decir textarea{flex:1 1 100%;min-height:56px;margin:0;background:var(--paper2)}
.decir button{flex:0 0 auto;margin-left:auto}
.decir #chatMsg{flex:1 1 100%;margin:0}
.decir #chatMsg:empty{display:none}

/* ------------------------------------------------------------------ avisos --*/
.aviso{border:1px solid var(--rule-strong);border-left:3px solid var(--ink);background:var(--paper2);
   padding:12px 16px;margin:14px 0;font-size:14.5px;max-width:72ch}
.aviso.mal{border-left-color:var(--red);color:var(--red)}
.aviso.bien{border-left-color:var(--verde)}
.vacio-msg{color:var(--graphite3);font-style:italic;padding:18px 0}

.cargando{color:var(--graphite3);font-family:var(--mono);font-size:12px;padding:24px 0}
.cargando::after{content:"";display:inline-block;width:1ch;animation:pts 1.2s steps(4) infinite}
@keyframes pts{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.cargando::after{animation:none;content:"..."}}

/* ------------------------------------------------------------------ tablas --*/
.tabla-scroll{overflow-x:auto;margin:12px 0}
table.datos{border-collapse:collapse;font-size:14px;width:100%;min-width:520px}
table.datos th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid var(--rule-strong)}
table.datos td{padding:8px 14px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.datos tr:hover td{background:var(--panel)}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule-strong);
   font-size:13.5px;color:var(--graphite3);max-width:70ch}
footer code{font-family:var(--mono);font-size:12.5px;color:var(--graphite2)}

/* =============================================================================
   EL LIENZO
   Un plano continuo en vez de páginas. De lejos se ve la forma de la familia;
   al acercarse aparecen los datos. El corte entre un nivel y otro lo decide
   Lienzo.aplicar() poniendo .z-lejos / .z-medio / .z-cerca sobre el <svg>.
   ============================================================================= */

.lienzo-caja{
  position:relative;
  /* A todo el ancho de la ventana menos lo que le saca la sobremesa: si se
     usara 100vw a secas, el plano se metería por debajo del panel y quedarían
     personas escondidas atrás. */
  width:calc(100vw - var(--lat));
  margin-left:calc(50% - (100vw - var(--lat)) / 2);
  height:clamp(460px,74vh,860px);
  border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
  background:var(--paper2);
  /* Puntos en vez de cuadrícula: adentro del plano hace falta ALGO fijo para
     percibir que uno se está moviendo al arrastrar, pero las líneas competían
     con las del árbol. Los puntos dan la referencia y desaparecen solos. */
  background-image:radial-gradient(var(--grid2) 1px, transparent 1px);
  background-size:30px 30px;
  overflow:hidden;
}
svg.lienzo{
  display:block;width:100%;height:100%;
  cursor:grab;touch-action:none;   /* si no, el navegador se queda el gesto */
  user-select:none;-webkit-user-select:none;
}
svg.lienzo.arrastrando{cursor:grabbing}

.lienzo .l{stroke:var(--rule-strong);stroke-width:1.25;vector-effect:non-scaling-stroke;fill:none}
.lienzo .l-union{stroke:var(--graphite3);stroke-width:2;vector-effect:non-scaling-stroke}

.lienzo .ficha{cursor:pointer}
.lienzo .ficha .caja{fill:var(--paper2);stroke:var(--rule-strong);stroke-width:1;
   vector-effect:non-scaling-stroke}
.lienzo .ficha:hover .caja{stroke:var(--ink);stroke-width:2}
.lienzo .ficha:focus{outline:none}
.lienzo .ficha:focus-visible .caja{stroke:var(--ink);stroke-width:2.5}
.lienzo .ficha.es-conyuge .caja{fill:var(--panel)}

.lienzo .ape{font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.055em;
   fill:var(--graphite)}
.lienzo .nom{font-family:var(--cond);font-size:14px;font-weight:500;fill:var(--graphite2)}
.lienzo .fec{font-family:var(--mono);font-size:9.5px;fill:var(--graphite3);
   font-variant-numeric:tabular-nums}
.lienzo .marca{font-family:var(--mono);font-size:13px;fill:var(--red);text-anchor:middle}

/* zoom semántico ---------------------------------------------------------- */
.lienzo.z-lejos .ape,.lienzo.z-lejos .nom,
.lienzo.z-lejos .fec,.lienzo.z-lejos .marca{display:none}
.lienzo.z-lejos .ficha .caja{stroke-width:.6}
.lienzo.z-medio .fec,.lienzo.z-medio .marca{display:none}

/* estados ----------------------------------------------------------------- */
.lienzo .ficha.apagada{opacity:.16}
.lienzo .ficha.marcada .caja{stroke:var(--ink);stroke-width:2.5;
   filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ink) 40%,transparent))}
.lienzo .ficha.yo .caja{stroke:var(--verde);stroke-width:2.5}
.lienzo .l.apagada{opacity:.14}

/* mandos ------------------------------------------------------------------ */
.mandos{position:absolute;right:14px;bottom:14px;z-index:5;
   display:flex;flex-direction:column;gap:6px}
.mandos button{width:36px;height:36px;padding:0;font-size:15px;line-height:1;
   font-family:var(--mono);
   background:color-mix(in srgb,var(--paper2) 92%,transparent);backdrop-filter:blur(6px)}
.nivel{position:absolute;left:14px;bottom:14px;z-index:5;
   font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
   color:var(--graphite3);background:color-mix(in srgb,var(--paper2) 82%,transparent);
   border:1px solid var(--rule);border-radius:2px;padding:5px 9px;
   font-variant-numeric:tabular-nums;pointer-events:none}
.pista{position:absolute;left:14px;top:14px;z-index:5;max-width:min(46ch,60vw);
   font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--graphite3);
   background:color-mix(in srgb,var(--paper2) 82%,transparent);
   border:1px solid var(--rule);border-radius:2px;padding:6px 10px;
   transition:opacity .5s;pointer-events:none}
.pista.ida{opacity:0}

/* =============================================================================
   PANTALLAS CHICAS

   No es una versión reducida: es la misma página con menos aire y los dedos en
   lugar del mouse. Lo que cambia de verdad son tres cosas —el alto del lienzo,
   el tamaño de lo que hay que tocar, y que nada quede debajo de la barra del
   navegador ni del notch.
   ============================================================================= */

@media (max-width:860px){
  .wrap{max-width:none}
  .stats{display:grid;grid-template-columns:repeat(2,1fr)}
  .stat{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:0}
  .caja,.aviso,.sec-note,.lede{max-width:none}
  /* sin lugar para dos columnas, la sobremesa se corre desde el costado */
  .lateral{width:min(400px,92vw)}
}

@media (max-width:620px){
  .wrap{padding:0 15px 80px}
  /* debajo del notch y de la barra de gestos */
  @supports(padding:max(0px)){
    .wrap{padding-left:max(15px,env(safe-area-inset-left));
          padding-right:max(15px,env(safe-area-inset-right));
          padding-bottom:max(80px,env(safe-area-inset-bottom))}
  }

  body{font-size:16.5px}
  section{margin-top:34px}
  header{padding:26px 0 18px}
  .portada{padding:38px 0 24px}

  /* La barra de arriba: la marca ocupa su renglón y los botones el siguiente,
     grandes. Apretados en una sola línea no se le acierta a ninguno. */
  .barra{gap:8px;margin-bottom:20px;padding-top:14px}
  .barra .marca{flex:1 1 100%;font-size:13px}
  .barra .sp{display:none}
  .quien{flex:1 1 100%;order:9;font-size:11px;word-break:break-all}
  button.b,.b{padding:11px 13px}
  .barra button.b,.barra .b{flex:1 1 auto;text-align:center}

  .stats{grid-template-columns:1fr 1fr}
  .stat b{font-size:20px}

  /* La barra de búsqueda pegajosa: el buscador entero arriba, los botones abajo */
  .toolbar{margin:0 -15px;padding:10px 15px;gap:8px}
  .search{flex:1 1 100%}
  .hits{flex:1 1 100%;order:9}

  .drawer{width:100vw;padding:20px 18px 80px}
  .lienzo-caja{height:min(64vh,520px)}
  .pista{display:none}
  .mandos{right:10px;bottom:10px}
  .mandos button{width:44px;height:44px;font-size:17px}
  .nivel{left:10px;bottom:10px}

  .acceso{max-width:none}
  .pest{flex:1;padding:12px 8px;font-size:11px;text-align:center}
  .clave-caja input{min-width:0}

  /* Mandar a todo el ancho: con el teclado abierto, un botón chico al costado
     es imposible de acertar. */
  .decir{gap:8px;padding:11px 13px}
  .decir button{width:100%;margin-left:0;padding:13px}
  .msj{padding:11px 13px;gap:0 10px}
  .sello{width:30px;height:30px;font-size:12px}
  .msj.sigue .sello{width:30px}
  /* sin hover no hay cómo revelar el botón de borrar: se deja siempre visible */
  .quien-msj .borrar{opacity:.6}
  /* que el campo de escribir no quede debajo de la barra de gestos */
  @supports(padding:max(0px)){
    .decir{padding-bottom:max(11px,env(safe-area-inset-bottom))}
  }

  .node{padding-left:18px}
  .node::after{width:18px}
  footer{margin-top:40px}
}

@media (max-width:380px){
  .stats{grid-template-columns:1fr}
  .stat{border-right:0}
}