/* ============================================================
   Identidad tomada del emblema del CEPPB:
   rojo #FF000E · oro #FFCF00 · tinta #141311
   Motto del club: "belleza y funcionalidad" — las dos vías del
   reglamento de cría (estructura / utilidad) llevan cada una su color.
   ============================================================ */
:root{
  --ground:#f3f1ed; --surface:#ffffff; --surface-2:#faf7f3; --surface-3:#efeae2;
  --ink:#141311; --ink-2:#494339; --muted:#797166; --faint:#a79d90;
  --line:#e6dfd5; --line-2:#d3c9bb;
  --brand:#d3040f; --brand-str:#a90309; --brand-pure:#ff000e; --on-brand:#fffaf8;
  --gold:#b58500; --gold-pure:#ffcf00;
  --via-est:#b58500; --via-uti:#d3040f;
  --ok:#1f7a4d; --ok-bg:#e7f1ea; --ok-line:#b3d4c1;
  --warn:#8a5a08; --warn-bg:#f9efd8; --warn-line:#e5cf98;
  --block:#9b1c1c; --block-bg:#f8e7e4; --block-line:#e4bcb6;
  --v-mal:#b8822f; --v-ter:#9c4a25; --v-gro:#333a47; --v-lae:#867749;
  --sh-1:0 1px 2px rgba(35,25,15,.07);
  --sh-2:0 1px 2px rgba(35,25,15,.06), 0 10px 26px -18px rgba(35,25,15,.4);
  --r:8px; --r-sm:5px;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#121110; --surface:#1b1917; --surface-2:#221f1d; --surface-3:#2b2724;
    --ink:#f5f1eb; --ink-2:#d0c8bd; --muted:#9a9186; --faint:#6e675f;
    --line:#302c28; --line-2:#443e37;
    --brand:#ff5a63; --brand-str:#ff8189; --brand-pure:#ff000e; --on-brand:#1a0607;
    --gold:#ffcf00; --gold-pure:#ffcf00;
    --via-est:#ffcf00; --via-uti:#ff5a63;
    --ok:#5cc294; --ok-bg:#152a20; --ok-line:#2b4a39;
    --warn:#e0b25e; --warn-bg:#2a2113; --warn-line:#4c3c1d;
    --block:#f0736f; --block-bg:#2c1917; --block-line:#4e2926;
    --v-mal:#d6a355; --v-ter:#cd6f45; --v-gro:#93a0b6; --v-lae:#bda876;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#121110; --surface:#1b1917; --surface-2:#221f1d; --surface-3:#2b2724;
  --ink:#f5f1eb; --ink-2:#d0c8bd; --muted:#9a9186; --faint:#6e675f;
  --line:#302c28; --line-2:#443e37;
  --brand:#ff5a63; --brand-str:#ff8189; --brand-pure:#ff000e; --on-brand:#1a0607;
  --gold:#ffcf00; --gold-pure:#ffcf00;
  --via-est:#ffcf00; --via-uti:#ff5a63;
  --ok:#5cc294; --ok-bg:#152a20; --ok-line:#2b4a39;
  --warn:#e0b25e; --warn-bg:#2a2113; --warn-line:#4c3c1d;
  --block:#f0736f; --block-bg:#2c1917; --block-line:#4e2926;
  --v-mal:#d6a355; --v-ter:#cd6f45; --v-gro:#93a0b6; --v-lae:#bda876;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -20px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;text-wrap:balance;letter-spacing:-.018em;line-height:1.15}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.crest-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .crest-light{display:none}
  :root:not([data-theme="light"]) .crest-dark{display:block}
}
:root[data-theme="dark"] .crest-light{display:none}
:root[data-theme="dark"] .crest-dark{display:block}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}

/* ---------- armazón ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:16px 16px 14px;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:center}
.brand img{width:42px;height:42px;object-fit:contain;flex:none}
.brand b{display:block;font-family:var(--disp);font-size:15.5px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.brand span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.nav{padding:8px;display:flex;flex-direction:column;gap:1px;flex:1}
.nav-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:15px 10px 6px}
.nav a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500;position:relative}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--surface-3);color:var(--ink);font-weight:600}
.nav a.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav a .ct{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.side-foot{padding:11px 12px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;justify-content:space-between}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:13px 28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.topbar h1{font-size:20px;font-weight:700}
/* La barra superior: el selector de idioma y el botón, uno al lado
   del otro. El selector va estrecho porque enseña sólo el código. */
#acciones{display:flex;gap:8px;align-items:center}
#acciones .elegir-idioma{width:auto;min-width:0;padding:5px 26px 5px 9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.topbar .sub{font-size:12px;color:var(--muted);margin-top:2px}
.spacer{flex:1}
.page{padding:22px 28px 64px;max-width:1420px;width:100%}

/* ---------- portada ---------- */
.masthead{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-2);margin-bottom:18px}
.mast-top{display:flex;gap:20px;align-items:center;padding:22px 26px 20px;flex-wrap:wrap;position:relative;z-index:1}
.mast-top img{width:82px;height:82px;object-fit:contain;flex:none}
.mast-top h2{font-size:27px;font-weight:800;letter-spacing:-.028em}
.mast-top .motto{font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--muted);margin-top:5px;letter-spacing:.005em}
.mast-top .motto em{font-style:normal;color:var(--gold)}
.mast-top .motto i{font-style:normal;color:var(--brand)}
.flag{height:4px;display:flex}
.flag i{display:block;height:100%}
.flag i:nth-child(1){flex:1;background:var(--brand-pure)}
.flag i:nth-child(2){flex:2;background:var(--gold-pure)}
.flag i:nth-child(3){flex:1;background:var(--brand-pure)}
.mast-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-top:1px solid var(--line)}
.mast-stats .stat{border-right:1px solid var(--line)}
.mast-stats .stat:last-child{border-right:0}

/* ---------- controles ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:var(--sh-1)}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn.primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn.primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn.brand{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn.brand:hover{background:var(--brand-str);border-color:var(--brand-str)}
.btn.sm{padding:3px 10px;font-size:12px;font-weight:500}
.btn:disabled{opacity:.45;cursor:not-allowed}
.inp,select.inp,textarea.inp{width:100%;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font-size:13px}
.inp:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
textarea.inp{min-height:66px;resize:vertical;line-height:1.45}
.search{position:relative;flex:0 1 250px}
.search .inp{padding-left:29px}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);opacity:.45}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters select,.filters input{width:auto;min-width:118px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:4px 11px;cursor:pointer;font-size:12px;color:var(--muted);border-right:1px solid var(--line);font-weight:500}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--ground);font-weight:600}

/* ---------- superficies ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card.lift{box-shadow:var(--sh-2)}
.card-h{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card-h h3{font-size:14.5px;font-weight:700}
.card-h .hint{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:auto;letter-spacing:.04em}
.card-b{padding:16px}
.grid{display:grid;gap:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--surface);padding:14px 16px}
.stat .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--disp);font-size:29px;font-weight:800;line-height:1.05;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat .n{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}

/* ---------- tablas ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-1)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:9px 13px;border-bottom:1px solid var(--line-2);background:var(--surface-2);position:sticky;top:0;white-space:nowrap;cursor:pointer;user-select:none;z-index:2}
th.nos{cursor:default}
th .ar{color:var(--brand);font-size:9px}
td{padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tr.clic{cursor:pointer}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px}
.nm{font-weight:600}
.dim{color:var(--faint)}
.empty{padding:48px 24px;text-align:center;color:var(--muted)}
.empty b{display:block;font-family:var(--disp);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}

/* ---------- distintivos ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.chip.block{background:var(--block-bg);color:var(--block);border-color:var(--block-line)}
.chip.mono{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.02em}
.chip.est{background:var(--surface-2);color:var(--via-est);border-color:var(--via-est)}
.chip.uti{background:var(--surface-2);color:var(--via-uti);border-color:var(--via-uti)}
.var-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.vM{background:var(--v-mal)} .vT{background:var(--v-ter)} .vG{background:var(--v-gro)} .vL{background:var(--v-lae)}
.sexo{font-family:var(--mono);font-weight:600;font-size:14px}

/* medidor de las cinco figuras */
.meter{display:flex;gap:3px;align-items:center}
.meter i{display:block;width:15px;height:5px;border-radius:2px;background:var(--line-2)}
.meter i.on{background:var(--ok)}
.meter i.x{background:var(--block)}

/* ---------- requisitos ---------- */
.reqs{display:flex;flex-direction:column}
.req{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.req:last-child{border-bottom:0}
.req .mk{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;margin-top:1px}
.req .mk.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.req .mk.falta{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.req .mk.no{background:var(--block-bg);color:var(--block);border:1px solid var(--block-line)}
.req .tx{min-width:0}
.req .tx b{font-weight:600;font-size:13px}
.req .tx small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4}

/* ---------- figuras de apto ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:12px}
.fig{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.fig::before{content:"";display:block;height:3px;background:var(--via)}
.fig[data-via="mixta"]::before{background:linear-gradient(90deg,var(--via-est),var(--via-uti))}
.fig.cumple{border-color:var(--ok-line)}
.fig-h{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.fig.cumple .fig-h{background:var(--ok-bg)}
.fig-h .code{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:-.02em;color:var(--via)}
.fig-h .nm2{font-size:11.5px;color:var(--muted);line-height:1.25}
.fig-b{padding:6px 14px 12px;flex:1}

/* ---------- fotos y vídeos ---------- */
.avatar{border-radius:50%;object-fit:cover;background:var(--surface-3);border:1px solid var(--line-2);flex:none}
img.avatar{display:block}
.avatar.ph{display:inline-grid;place-items:center;font-family:var(--disp);font-weight:700;color:var(--faint);letter-spacing:-.02em}
.avatar.cuadrado{border-radius:var(--r)}
.avatar.centrado{margin:0 auto}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
.gal figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2);position:relative}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-3)}
.gal figcaption{padding:7px 10px;font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:center;border-top:1px solid var(--line)}
.gal .acts{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .14s}
.gal figure:hover .acts,.gal figure:focus-within .acts{opacity:1}
.gal .vid{aspect-ratio:4/3;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);text-decoration:none}
.gal .vid:hover{color:var(--brand);background:var(--surface-2)}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:24px 18px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5}
.btn.danger{color:var(--block);border-color:var(--block-line)}
.thumb{width:34px;height:34px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-3);border:1px solid var(--line);display:block;flex:none}
.celda-nm{display:flex;gap:10px;align-items:center;min-width:0}

/* ---------- pedigrí ---------- */
/* ---------- el pedigrí y sus líneas ----------
   Cada casilla vive dentro de una banda —la porción de alto que le
   toca en su columna—. Eso es lo que permite trazar las líneas sin
   medir nada con JavaScript: el centro de la banda del padre cae
   justo en la frontera entre las bandas de sus dos hijos, así que
   media banda es exactamente el tramo vertical que hay que dibujar.

   El primer hijo de cada pareja baja hacia el padre; el segundo sube.
   Y de cada uno sale un tramo horizontal que cruza el hueco entre
   columnas hasta encontrarse con el del hermano. */
.ped{--ped-hueco:6px;--ped-linea:var(--line-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ped-hueco);min-width:560px}
.ped-col{display:flex;flex-direction:column;justify-content:space-around}
.ped-celda{flex:1;display:flex;align-items:center;position:relative;min-height:0}
.ped-celda > .ped-n{flex:1;min-width:0}

/* El tramo horizontal, del borde de la casilla al hueco */
.ped-col:not(:first-child) .ped-celda::before{
  content:"";position:absolute;right:100%;top:50%;
  width:calc(var(--ped-hueco) / 2);
  border-top:1px solid var(--ped-linea)}

/* El tramo vertical, media banda, hacia donde esté el padre */
.ped-col:not(:first-child) .ped-celda::after{
  content:"";position:absolute;right:calc(100% + var(--ped-hueco) / 2);
  height:50%;width:0;border-right:1px solid var(--ped-linea)}
.ped-col:not(:first-child) .ped-celda:nth-child(odd)::after{top:50%}
.ped-col:not(:first-child) .ped-celda:nth-child(even)::after{bottom:50%}
.ped-n{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-sm);padding:7px 10px;background:var(--surface-2);min-height:46px;display:flex;flex-direction:column;justify-content:center}
.ped-n.m{border-left-color:var(--v-gro)} .ped-n.h{border-left-color:var(--v-ter)}
.ped-n b{font-size:12.5px;font-weight:600;line-height:1.25}
.ped-n small{font-family:var(--mono);font-size:10px;color:var(--muted)}
.ped-n.vacio{background:transparent;border-style:dashed;color:var(--faint);font-size:11px;align-items:center;justify-content:center}

/* ---------- barras ---------- */
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:120px 1fr 40px;gap:10px;align-items:center;font-size:12.5px}
.bar .tr{height:8px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.bar .fl{height:100%;border-radius:2px;background:var(--ink-2)}
.bar .vl{font-family:var(--mono);font-size:11.5px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.bar .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}

/* ---------- panel lateral ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,14,10,.45);z-index:60;display:none}
.scrim.on{display:block}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(530px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:61;display:none;flex-direction:column;box-shadow:-18px 0 46px -26px rgba(0,0,0,.55)}
.sheet.on{display:flex}
.sheet-h{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sheet-h h3{font-size:17px;font-weight:700}
.sheet-b{padding:18px 20px;overflow-y:auto;flex:1}
.sheet-f{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:var(--surface-2)}
.fset{border:0;padding:0;margin:0 0 20px}
.fset legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 0 9px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.f{display:flex;flex-direction:column;gap:3px}
.f.wide{grid-column:1/-1}
.f label{font-size:11.5px;color:var(--ink-2);font-weight:500}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;background:var(--surface)}
.chk{display:flex;gap:7px;align-items:center;cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.chk input{margin:0;flex:none}
.f .hint2{font-size:10.5px;color:var(--faint);line-height:1.35}

/* ---------- fichas ---------- */
.ficha-h{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ficha-h h2{font-size:29px;font-weight:800;letter-spacing:-.03em}
.ficha-h .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;align-items:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px;margin:0}
.kv dt{color:var(--muted);font-size:11.5px;padding-top:1px}
.kv dd{margin:0;font-weight:500}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:8px 13px;cursor:pointer;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* `min-width:0` es la diferencia entre que el pedigrí se quede dentro
   de su marco y que empuje la rejilla hasta sacar de la pantalla el
   resto de la pantalla: por defecto una columna de grid no encoge por
   debajo del contenido que lleva dentro. */
.cols23{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
.cols23 > *{min-width:0}
.note{padding:10px 13px;border-radius:var(--r-sm);font-size:12.5px;border:1px solid var(--line-2);background:var(--surface-2);line-height:1.45}
.note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.note.block{background:var(--block-bg);border-color:var(--block-line);color:var(--block)}
.note.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:9px 18px;border-radius:20px;font-size:13px;z-index:90;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .18s}
.toast.on{opacity:1}
.linkish{color:var(--brand);text-decoration:none;font-weight:600;cursor:pointer}
.linkish:hover{text-decoration:underline}
.mini{font-size:11.5px;color:var(--muted);line-height:1.4}
.rule-src{font-size:11px;color:var(--faint);font-style:italic}
.badge-ej{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--line-2);padding:1px 6px;border-radius:3px;vertical-align:middle}
.feed-row{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.feed-row:last-child{border-bottom:0}
.feed-row .when{font-family:var(--mono);font-size:10.5px;color:var(--faint);flex:none;width:64px;padding-top:2px;text-align:right}

/* El botón del menú y la cortina: se definen ANTES del bloque de
   pantallas estrechas. Si van después, su «display:none» anula al
   «display:inline-flex» de dentro y el botón no aparece nunca: el
   menú queda inalcanzable en el móvil. */
.abrir-menu{display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;padding:0;color:var(--ink-2)}
.abrir-menu:hover{background:var(--surface-2)}
.tapa-menu{display:none}

/* Cuando ya le has dado a «me gusta» */
.btn.megusta-on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  background:color-mix(in srgb,var(--brand) 10%,var(--surface))}

/* El panel del buscador de la barra de arriba */
.search{position:relative}
.busca-caidas{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  max-height:min(60vh,420px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:5px}
.busca-grupo{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.busca-fila{display:flex;flex-direction:column;gap:1px;padding:7px 10px;
  border-radius:var(--r-sm);text-decoration:none;color:inherit}
.busca-fila:hover{background:var(--surface-2)}
.busca-fila b{font-size:13px;font-weight:600}
.busca-vacio{padding:14px 12px;color:var(--muted);font-size:12.5px}

/* ============================================================
   El carnet de socio.

   Con la proporción de una tarjeta, para que se reconozca como lo
   que es. En el móvil se enseña tal cual; en papel sale a tamaño
   de tarjeta.
   ============================================================ */
.carnet{max-width:440px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-2);overflow:hidden}
.carnet-flag{height:5px;display:flex}
.carnet-flag i:nth-child(1){flex:1;background:var(--brand-pure)}
.carnet-flag i:nth-child(2){flex:2;background:var(--gold-pure)}
.carnet-flag i:nth-child(3){flex:1;background:var(--brand-pure)}

.carnet-cab{display:flex;gap:12px;align-items:center;padding:15px 18px 12px;
  border-bottom:1px solid var(--line)}
.carnet-cab img{width:52px;height:52px;object-fit:contain;flex:none}
.carnet-club{font-size:11px;color:var(--muted);line-height:1.3}
.carnet-tipo{font-family:var(--disp);font-size:16px;font-weight:800;letter-spacing:-.02em}
.carnet-num{text-align:right;flex:none}
.carnet-num b{display:block;font-family:var(--mono);font-size:25px;font-weight:600;
  line-height:1.05;font-variant-numeric:tabular-nums}

.carnet-cuerpo{display:flex;gap:16px;padding:18px}
.carnet-foto{flex:none;width:92px;height:92px;border-radius:10px;overflow:hidden;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.carnet-foto img{width:100%;height:100%;object-fit:cover}
.carnet-nombre{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.carnet-datos{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin-top:10px}
.carnet-datos .mini{display:block;line-height:1.2}
.carnet-datos b{font-size:13px;font-weight:600}

.carnet-pie{display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-top:1px solid var(--line);background:var(--surface-2)}
.carnet-pie .num{font-family:var(--mono);font-size:12px;letter-spacing:.02em}

@media (max-width:600px){
  .carnet-cuerpo{gap:12px;padding:14px}
  .carnet-foto{width:74px;height:74px}
  .carnet-datos{grid-template-columns:1fr}
}

/* En papel, el carnet solo y a su tamaño */
@media print{
  .carnet{max-width:86mm;box-shadow:none;border:1px solid #999;page-break-inside:avoid}
}

/* El distintivo de los documentos descargables */
.doc-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:44px;border-radius:5px;background:var(--brand);color:#fff;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em}

/* Buscar una ficha del club escribiendo. Ocupa lo mismo que ocupaba
   el desplegable al que sustituye. */
.buscaficha{position:relative}
.buscaficha .inp{width:100%}

/* Los pasos para instalarla en el iPhone, que allí van a mano. */
.pasos-instalar{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px;line-height:1.6}
.pasos-instalar li{margin-bottom:6px}
.pasos-instalar li::marker{color:var(--brand);font-weight:700}

/* La web del club empotrada: alta como una pantalla, y con su propia
   barra de desplazamiento para que no arrastre a la página entera. */
.marco-web{position:relative;width:100%;height:min(78vh,900px);min-height:460px;
  overflow:hidden;border-radius:0 0 var(--r) var(--r)}
.marco-web iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
@media (max-width:960px){ .marco-web{height:min(70vh,620px);min-height:380px} }

/* ============================================================
   Pantallas estrechas

   La mayoría de los socios entran desde el teléfono. Con veinte
   secciones, un menú desplegado en horizontal se come la pantalla
   entera y el contenido queda debajo: hay que recogerlo.
   ============================================================ */
@media (max-width:960px){
  .shell{grid-template-columns:1fr}

  /* El menú se guarda y sale por la izquierda al pulsar el botón.

     Se mueve con «left» y no con «transform»: el transform de la
     regla base seguía ganando y el menú no salía nunca. Con left se
     ve de un vistazo qué manda, y funciona igual de suave. */
  .side{position:fixed;top:0;left:-100%;bottom:0;width:min(280px,84vw);z-index:60;
    transition:left .22s ease;
    box-shadow:0 0 40px -8px rgba(0,0,0,.35);height:100dvh}
  html[data-menu="abierto"] .side{left:0}
  .nav{flex-direction:column}

  /* La cortina que apaga el fondo mientras el menú está abierto */
  .tapa-menu{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,19,17,.45);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  :root[data-menu="abierto"] .tapa-menu{opacity:1;pointer-events:auto}

  .abrir-menu{display:inline-flex}
  .topbar{padding:10px 14px;gap:10px}
  .topbar h1{font-size:17px}
  .topbar .sub{display:none}
  .search{display:none}
  .page{padding:14px 14px 80px}
  .cols2,.cols23{grid-template-columns:1fr}
  .mast-top{padding:16px 18px;gap:14px}
  .mast-top h2{font-size:21px}
  .mast-top img{width:56px;height:56px}
  .mast-stats{grid-template-columns:1fr 1fr}
  .feed-row .when{width:auto}
  .filters{gap:6px}
  .filters .inp{flex:1 1 45%;min-width:0}
  .card-b{padding:13px}
  .fgrid{grid-template-columns:1fr}
  .cert-firma{grid-template-columns:1fr;gap:14px;text-align:center}
  .cert-codigo{text-align:center}

  /* Cada fila de tabla pasa a ser una ficha: nueve columnas no caben
     en un teléfono, y en horizontal no se leen. */
  .tabla-movil table, .tabla-movil thead, .tabla-movil tbody,
  .tabla-movil tr, .tabla-movil td{display:block;width:auto}
  .tabla-movil thead{display:none}
  .tabla-movil tr{border:1px solid var(--line);border-radius:var(--r);
    margin-bottom:8px;padding:10px 12px;background:var(--surface)}
  .tabla-movil td{border:0;padding:3px 0;display:flex;gap:10px;align-items:baseline}
  .tabla-movil td::before{content:attr(data-col);flex:none;width:38%;
    font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
  .tabla-movil td:first-child{padding-bottom:7px;margin-bottom:5px;
    border-bottom:1px solid var(--line);font-weight:600}
  .tabla-movil td:first-child::before{display:none}
  .tabla-movil td:first-child .celda-nm{font-size:14px}

  /* Los botones, alcanzables con el pulgar */
  .btn{min-height:38px}
  .btn.sm{min-height:32px}
  .seg button{min-height:34px}
}


/* ---------- certificado del ejemplar ---------- */
.certificado{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);max-width:820px;margin:0 auto;overflow:hidden}
.cert-flag{height:5px;display:flex}
.cert-flag i:nth-child(1){flex:1;background:var(--brand-pure)}
.cert-flag i:nth-child(2){flex:2;background:var(--gold-pure)}
.cert-flag i:nth-child(3){flex:1;background:var(--brand-pure)}
.cert-cab{display:flex;gap:18px;align-items:center;padding:26px 34px 18px;border-bottom:1px solid var(--line)}
.cert-cab img{flex:none;object-fit:contain}
.cert-club{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cert-cab h1{font-size:25px;font-weight:800;letter-spacing:-.025em;margin-top:5px}
.cert-sub{font-size:12px;color:var(--muted);margin-top:4px}
.certificado section{padding:20px 34px;border-bottom:1px solid var(--line)}
.certificado h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.certificado h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:10px}
.certificado h4{font-size:12px;font-weight:700;margin:12px 0 5px;color:var(--ink-2)}
.cert-lista{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7}
.cert-art{color:var(--muted);font-size:12px}
.cert-nada{font-size:13px;color:var(--muted);font-style:italic;margin:0}
.cert-tabla{width:100%;font-size:13px}
.cert-tabla td{padding:5px 0;border-bottom:1px solid var(--line)}
.cert-tabla td:last-child{text-align:right;font-family:var(--mono);font-size:12px}
.cert-pie-tabla{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.cert-firma{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;
  padding:26px 34px 30px}
.cert-fecha{font-size:12px;color:var(--muted)}
.cert-rubrica{text-align:center;font-size:12.5px}
.cert-rubrica img{max-height:62px;margin-bottom:2px}
.cert-linea{border-top:1px solid var(--line-2);margin:0 0 7px;min-width:210px}
.cert-cargo{font-size:11px;color:var(--muted);margin-top:2px}
.cert-codigo{text-align:right;font-size:11px;color:var(--muted)}
.cert-codigo .num{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin:3px 0}

.solo-imprimir{display:none}

@media print{
  .side, .topbar, .no-imprimir, .toast, .sheet, .scrim{display:none!important}
  .shell{display:block}
  .page{padding:0;max-width:none}
  .certificado{border:0;box-shadow:none;max-width:none}
  .certificado section{break-inside:avoid}
  body{background:#fff}

  .solo-imprimir{display:block}

  /* En papel no hay barras que arrastrar: el árbol se imprime entero,
     apaisado, y encogido para que quepa a lo ancho de la hoja. */
  @page{size:A4 landscape;margin:8mm}
  .ped-caja{overflow:visible!important;max-height:none!important;
    border:0;padding:0;background:#fff}
  .ped{min-width:0!important;--ped-hueco:5px;--ped-linea:#999}
  .ped-n{min-height:0;padding:1px 3px;background:#fff;
    border-color:#bbb;break-inside:avoid}
  .ped-n b{font-size:6.5pt;line-height:1.1}
  .ped-n small, .ped-veces{display:none}
  .ped-n.vacio{border-style:dotted}
  .card{border:0;box-shadow:none;break-inside:avoid}
}
.cert-rubrica-svg{display:block;margin:0 auto 2px;color:var(--ink-2);opacity:.9}
@media print{ .cert-rubrica-svg{color:#141311} }

/* ---------- retransmisión en directo ---------- */
.directo{border:1px solid var(--brand);border-radius:var(--r);overflow:hidden;
  background:var(--surface);box-shadow:var(--sh-2);margin-bottom:16px}
.directo-cab{display:flex;align-items:center;gap:9px;padding:10px 14px;
  background:var(--brand);color:var(--on-brand);font-size:13px}
.directo-cab b{font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.directo-cab .mini{color:var(--on-brand);opacity:.85}
.directo-cab .btn{background:transparent;border-color:currentColor;color:inherit}
.directo-punto{width:9px;height:9px;border-radius:50%;background:currentColor;
  animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
.directo-marco{position:relative;padding-top:56.25%;background:#000}
.directo-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){ .directo-punto{animation:none} }

/* ---------- pedigrí desplegado ---------- */
.ped.g3{grid-template-columns:repeat(3,1fr);min-width:560px}
.ped.g4{grid-template-columns:repeat(4,1fr);min-width:820px}
.ped.g5{grid-template-columns:repeat(5,1fr);min-width:1120px}
/* ---------- el pedigrí, encerrado en su marco ----------
   Ocho generaciones son 510 casillas y varios miles de píxeles en las
   dos direcciones. Va dentro de una caja con sus propias barras y se
   arrastra con el ratón: la página no se mueve ni se ensancha. */
.ped-marco{min-width:0}
.ped-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding-top:0;padding-bottom:10px}
.ped-barra .seg{flex:none}
.ped-caja{position:relative;overflow:auto;max-height:min(72vh,620px);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);padding:10px;
  cursor:grab;overscroll-behavior:contain}
.ped-caja.agarrando{cursor:grabbing;user-select:none}
.ped-caja.agarrando .ped-n{pointer-events:none}

/* Seis, siete y ocho generaciones: 510 ancestros en la última.
   Las casillas encogen hasta lo que se puede leer y el pedigrí se
   mira con scroll, como uno impreso en pliego. */
.ped.g6{grid-template-columns:repeat(6,1fr);min-width:1180px}
.ped.g7{grid-template-columns:repeat(7,1fr);min-width:1300px}
.ped.g8{grid-template-columns:repeat(8,1fr);min-width:1420px}
.ped.g6, .ped.g7, .ped.g8{--ped-hueco:8px}
.ped.g6 .ped-n, .ped.g7 .ped-n, .ped.g8 .ped-n{
  padding:2px 5px;min-height:0;border-left-width:3px}
.ped.g6 .ped-n b{font-size:10px;line-height:1.15}
.ped.g7 .ped-n b{font-size:9.5px;line-height:1.1}
.ped.g8 .ped-n b{font-size:9px;line-height:1.08;word-break:break-word}
.ped.g6 .ped-n small, .ped.g7 .ped-n small, .ped.g8 .ped-n small{display:none}
.ped.g6 .ped-n.vacio, .ped.g7 .ped-n.vacio, .ped.g8 .ped-n.vacio{min-height:16px;font-size:9px}
/* La marca ×N no cabe en las columnas estrechas; el color del borde sí */
.ped.g7 .ped-veces, .ped.g8 .ped-veces{display:none}

.ped.g4 .ped-n, .ped.g5 .ped-n{padding:4px 7px}
.ped.g4 .ped-n b{font-size:11.5px}
.ped.g5 .ped-n b{font-size:10.5px;line-height:1.2}
.ped.g5 .ped-n small{display:none}
.ped-n.clic{cursor:pointer}
.ped-n.clic:hover{border-color:var(--brand);background:var(--surface-2)}
.ped-n.vacio{min-height:26px}

/* Los ancestros que salen por varias ramas son los que meten la
   consanguinidad. Cada uno lleva SU color de fondo, el mismo en todas
   las casillas donde aparece: así se sigue el rastro de un vistazo,
   sin ir leyendo nombre por nombre.

   El fondo se mezcla con el de la tarjeta, así que funciona igual en
   claro que en oscuro. */
.ped-n{position:relative}
.ped-n.rep, .chip.rep{border-left-width:4px;border-left-style:solid}
.chip.rep{text-decoration:none}

.rep.r1{--c:#d3040f} .rep.r2{--c:#b58500} .rep.r3{--c:#1f7a4d} .rep.r4{--c:#5a4ac7}
.rep.r5{--c:#0b7285} .rep.r6{--c:#c2410c} .rep.r7{--c:#a21caf} .rep.r8{--c:#4d7c0f}

/* El borde va con «.ped-n.rep» y no con «.rep» a secas: la casilla ya
   lleva un borde del color de la variedad —.ped-n.m, .ped-n.h— con la
   misma fuerza, y ganaba ese. El ancestro repetido salía pintado del
   color del sexo, que es justo lo contrario de lo que se busca. */
.ped-n.rep, .chip.rep{border-left-color:var(--c)}
.rep{background:color-mix(in srgb, var(--c) 26%, var(--surface))}
.ped-n.rep:hover{background:color-mix(in srgb, var(--c) 38%, var(--surface))}
.chip.rep{background:color-mix(in srgb, var(--c) 22%, var(--surface));
  border-color:color-mix(in srgb, var(--c) 45%, var(--line))}

/* Cuántas veces sale ese ancestro en el árbol, en su color. Es lo que
   de verdad se lee de un vistazo: el fondo sólo agrupa. */
.ped-veces{position:absolute;top:3px;right:4px;
  font-family:var(--mono);font-size:9px;font-weight:600;line-height:1;
  padding:2px 4px;border-radius:3px;color:#fff;background:var(--c)}

/* en oscuro basta con subir un poco la mezcla */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rep{background:color-mix(in srgb, var(--c) 34%, var(--surface))}
}
:root[data-theme="dark"] .rep{background:color-mix(in srgb, var(--c) 34%, var(--surface))}

/* por si el navegador no entiende color-mix, que se vea el borde igual */
@supports not (background: color-mix(in srgb, red 10%, white)){
  .rep{background:var(--surface-2)}
}

/* ---------- cotejo de ejemplares repetidos ----------
   Cada coincidencia es una ficha con la que hay que hacer algo, no
   un aviso que se lee: por eso van sueltas y con sus botones a la
   derecha, y no dentro de la caja gris de las notas. */
.cotejo-lista{display:grid;gap:8px}
.coin{display:flex;gap:12px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface)}
.coin > div:first-child{min-width:0;flex:1 1 15em}
.coin b{font-size:14px}
.coin .mini{margin-top:3px}
.coin-b{display:flex;gap:7px;flex-wrap:wrap}
@media (max-width:560px){
  .coin{align-items:flex-start}
  .coin-b{width:100%}
  .coin-b .btn{flex:1;justify-content:center}
}