@font-face{font-family:"Literata";src:url(fonts/literata-latin-opsz-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(fonts/literata-latin-opsz-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap}
:root{
  --paper:#EEF2F1; --surface:#FFFFFF; --ink:#16222A; --muted:#58676F; --line:#CFD8DB; --soft:#E3E9EA;
  --accent:#0E5C63; --accent-ink:#FFFFFF; --mark:#F3D58A; --warn:#9A5B00;
  --k-FOR:#3D5AA8; --k-NAT:#2E7A4C; --k-SOC:#7E4A9C; --k-HUM:#8E3B2E; --k-ART:#A8701A; --k-TEC:#1D7385; --k-GES:#A0365A; --k-DES:#5F7424;
  --serif:"Literata",Georgia,"Times New Roman",serif; --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#11191D; --surface:#172228; --ink:#E4ECEE; --muted:#9AAAB1; --line:#2B3A41; --soft:#1E2B31;
  --accent:#57B5BC; --accent-ink:#0B1417; --mark:#6B5418; --warn:#E3A94B;
  --k-FOR:#8BA3E8; --k-NAT:#6CC28E; --k-SOC:#C597DE; --k-HUM:#E08A78; --k-ART:#E2B25A; --k-TEC:#62C1D2; --k-GES:#E57FA2; --k-DES:#AFC46A;}}
:root[data-theme="dark"]{
  --paper:#11191D; --surface:#172228; --ink:#E4ECEE; --muted:#9AAAB1; --line:#2B3A41; --soft:#1E2B31;
  --accent:#57B5BC; --accent-ink:#0B1417; --mark:#6B5418; --warn:#E3A94B;
  --k-FOR:#8BA3E8; --k-NAT:#6CC28E; --k-SOC:#C597DE; --k-HUM:#E08A78; --k-ART:#E2B25A; --k-TEC:#62C1D2; --k-GES:#E57FA2; --k-DES:#AFC46A;}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);display:flex;flex-direction:column}
a{color:var(--accent)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:var(--r);padding:.45em .9em}
button.ghost,.ghost{background:transparent;color:var(--accent);border:1px solid var(--line);border-radius:var(--r);padding:.4em .8em}
button.link{border:0;background:none;color:var(--accent);padding:0;font-size:.85rem}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.45em .6em;width:100%}
label{display:block;font-size:.85rem;color:var(--muted)}
label>input,label>select,label>textarea{margin-top:.25rem;color:var(--ink);font-size:.95rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted);font-size:.88rem}
kbd{font:600 .8rem var(--sans);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 .35em;background:var(--surface)}
h2{font:600 1.05rem var(--serif);margin:0 0 .5rem}

/* barra superior */
.top{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.25rem;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20}
.mark{font:600 1.55rem/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-variation-settings:"opsz" 72}
.modes{display:flex;gap:.25rem;flex-wrap:wrap}
.modes button{background:none;border:0;color:var(--muted);padding:.5em .8em;border-radius:var(--r)}
.modes button.on{color:var(--ink);background:var(--soft);font-weight:600}
.due{display:inline-block;min-width:1.4em;font-size:.75rem;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 .4em;text-align:center}
.due:empty{display:none}
.icon.theme{margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);width:2.2rem;height:2.2rem;padding:0;border-radius:50%;display:grid;place-items:center}
.icon.theme svg{width:1.1rem;height:1.1rem}

.view{flex:1;min-height:0}
.app{display:flex;flex-direction:column;min-height:100vh}
.loading{margin:30vh auto;font:1.2rem var(--serif);color:var(--muted);text-align:center;padding:0 16px}
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper);z-index:60;padding:16px}
.login-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:2rem;width:min(380px,100%);display:grid;gap:.6rem}
.login-box .mark{margin:0 0 .5rem}
.extra .chk{display:flex;gap:.45rem;align-items:center;color:var(--ink);font-size:.88rem}
.extra .chk input{width:auto;margin:0}
/* explorar */
.explorar{display:grid;grid-template-columns:290px minmax(0,1fr) minmax(380px,40%);min-height:0}
.side{border-right:1px solid var(--line);overflow:auto;padding:1rem 1rem 3rem;max-height:calc(100vh - 58px);position:sticky;top:58px}
.side-head{display:flex;justify-content:space-between;align-items:baseline}
.tree{font-size:.9rem}
.tree details{margin:0}
.tree summary{list-style:none;cursor:pointer;display:flex;gap:.45rem;align-items:baseline;padding:.2rem .25rem;border-radius:4px}
.tree summary::-webkit-details-marker{display:none}
.tree summary:hover{background:var(--soft)}
.tree .sw{width:.6rem;height:.6rem;border-radius:2px;flex:none;transform:translateY(1px)}
.tree .n{margin-left:auto;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.tree .lvl2{padding-left:1rem}
.tree .lvl3{padding-left:2rem}
.tree .sel>summary,.tree .leaf.sel{background:var(--soft);font-weight:600}
.tree .leaf{display:flex;gap:.4rem;padding:.15rem .25rem;border-radius:4px;cursor:pointer;color:var(--ink)}
.tree .leaf:hover{background:var(--soft)}
.facets-h{margin-top:1.4rem}
.facets label{margin:.55rem 0}
.facets select{font-size:.85rem;padding:.3em .4em}

.results{padding:1rem 1.25rem 3rem;min-width:0}
.search{display:flex;gap:.5rem}
.search input{font:1.1rem var(--serif);padding:.65em .8em;border-width:1.5px}
#toggleSide{display:none}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 0}
.chip{font-size:.8rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.15em .3em .15em .7em}
.chip b{font-weight:600}
.chip button{background:none;border:0;color:var(--muted);padding:0 .35em}
.res-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.8rem 0 .4rem;flex-wrap:wrap}
#count{font:italic 1rem var(--serif);color:var(--muted)}
.res-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.res-actions label{display:flex;align-items:center;gap:.4rem}
.res-actions select{width:auto;padding:.3em}
.list{list-style:none;margin:0;padding:0}
.item{border-bottom:1px solid var(--line);padding:.75rem .5rem .75rem .9rem;cursor:pointer;position:relative}
.item::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:3px;border-radius:2px;background:var(--kc,var(--line))}
.item:hover{background:var(--surface)}
.item.cur{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.item h3{font:600 1.02rem/1.35 var(--serif);margin:0}
.item .path{font-size:.78rem;color:var(--muted);margin:.15rem 0 .25rem}
.item p{margin:0;font-size:.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .ep{font-size:.72rem;border:1px solid var(--line);border-radius:3px;padding:0 .35em;margin-left:.35rem;color:var(--muted);font-family:var(--sans);font-weight:500;vertical-align:2px}
mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
.more{margin:1rem auto;display:block}

/* ficha / etiqueta de espécimen */
.detail{border-left:1px solid var(--line);background:var(--surface);overflow:auto;max-height:calc(100vh - 58px);position:sticky;top:58px;padding:1.4rem 1.6rem 3rem}
.empty-detail{max-width:34ch;margin:4rem auto;color:var(--muted)}
.lede{font:1.1rem/1.5 var(--serif);color:var(--ink)}
.close-detail{display:none}
.d-title{font:600 1.7rem/1.2 var(--serif);margin:.2rem 0 .8rem;font-variation-settings:"opsz" 60;letter-spacing:-.005em}
.specimen{border:1.5px solid var(--ink);border-left:10px solid var(--kc);border-radius:2px;padding:.8rem 1rem;margin:0 0 1.2rem;background:var(--paper);font-size:.86rem}
.specimen dl{display:grid;grid-template-columns:5.6rem 1fr;gap:.12rem .8rem;margin:0}
.specimen dt{color:var(--muted);font-style:italic;font-family:var(--serif)}
.specimen dd{margin:0}
.specimen dd.sp{font:italic 600 .95rem var(--serif)}
.specimen .facets-line{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .9rem}
.specimen .facets-line div span{display:block;color:var(--muted);font-size:.74rem}
.specimen .id{float:right;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.d-body{font:1rem/1.65 var(--serif);white-space:pre-wrap;max-width:68ch}
.d-quote{font:italic 1.2rem/1.55 var(--serif);border-left:3px solid var(--kc);padding-left:1rem;margin:0 0 1rem}
.d-sec{margin-top:1.4rem}
.d-sec h4{font:600 .9rem var(--sans);margin:0 0 .4rem;color:var(--muted)}
.bridge-note{background:var(--soft);border-radius:var(--r);padding:.8rem 1rem;font:1rem/1.55 var(--serif)}
.warnings li{color:var(--warn);font-size:.85rem;margin:.2rem 0}
table.fields{border-collapse:collapse;width:100%;font-size:.85rem}
table.fields td{border-top:1px solid var(--line);padding:.35rem .4rem;vertical-align:top}
table.fields td:first-child{color:var(--muted);width:34%}
.links a{word-break:break-all;font-size:.85rem}
.conn{list-style:none;padding:0;margin:0}
.conn li{margin:.2rem 0;font-size:.9rem}
.conn .rt{color:var(--muted);font-size:.78rem;margin-right:.35rem}
.d-img{max-width:100%;border-radius:var(--r);border:1px solid var(--line);margin:.5rem 0}
.d-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.cardlist{list-style:none;padding:0;margin:0}
.cardlist li{border:1px solid var(--line);border-radius:var(--r);padding:.5rem .7rem;margin:.35rem 0;font-size:.88rem}
.cardlist li span{display:block;color:var(--muted);font-size:.75rem}

/* repasar */
.study{padding:1.2rem 1.5rem 3rem;max-width:900px;margin:0 auto;width:100%}
.study-bar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.study-bar label{min-width:12rem}
.study-bar input[type=number]{width:6rem}
.study-area{margin-top:1.5rem}
.study-empty{max-width:52ch;color:var(--muted)}
.flash{background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--kc);border-radius:var(--r);padding:1.6rem 1.8rem;min-height:16rem}
.flash .meta{font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem}
.flash .q{font:600 1.35rem/1.4 var(--serif);margin:1rem 0;white-space:pre-wrap}
.flash .a{font:1.05rem/1.6 var(--serif);white-space:pre-wrap;border-top:1px dashed var(--line);padding-top:1rem;margin-top:1rem}
.flash textarea{margin-top:.8rem}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1rem}
.grade button{display:flex;flex-direction:column;align-items:center;padding:.6em}
.grade button small{opacity:.8;font-size:.75rem}
.grade .g1{background:#8E3B2E;border-color:#8E3B2E;color:#fff}
.grade .g2{background:var(--surface);color:var(--ink);border-color:var(--line)}
.grade .g4{background:var(--k-NAT);border-color:var(--k-NAT);color:#fff}
.opts{display:grid;gap:.5rem;margin-top:1rem}
.opts button{text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);font:1rem/1.45 var(--serif);padding:.7em .9em}
.opts button.ok{border-color:var(--k-NAT);box-shadow:inset 4px 0 0 var(--k-NAT)}
.opts button.bad{border-color:#8E3B2E;box-shadow:inset 4px 0 0 #8E3B2E}
.progress{height:4px;background:var(--soft);border-radius:2px;margin:.8rem 0}
.progress i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* puente */
.bridge{padding:1.2rem 1.5rem 3rem;max-width:1180px;margin:0 auto;width:100%}
.bridge-bar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.bridge-bar label{min-width:15rem}
.bridge-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;margin:1.4rem 0;align-items:stretch}
.b-card{background:var(--surface);border:1px solid var(--line);border-left:8px solid var(--kc);border-radius:var(--r);padding:1rem 1.2rem}
.b-card .path{font-size:.78rem;color:var(--muted)}
.b-card h3{font:600 1.25rem/1.3 var(--serif);margin:.3rem 0 .6rem}
.b-card p{font:.98rem/1.6 var(--serif);margin:0;max-height:15rem;overflow:auto;white-space:pre-wrap}
.b-join{display:flex;align-items:center;justify-content:center;font:2.4rem var(--serif);color:var(--muted)}
.b-write h2{font-size:1.3rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.7rem}

/* capturar */
.capture{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2rem;padding:1.2rem 1.5rem 3rem;max-width:1200px;margin:0 auto;width:100%}
.cap-form label{margin:.6rem 0}
.cap-form fieldset{border:1px solid var(--line);border-radius:var(--r);padding:.6rem 1rem 1rem;margin:1rem 0}
.cap-form legend{font:600 1rem var(--serif);padding:0 .4rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .8rem}
.apps{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.6rem 0}
.apps label{display:flex;gap:.35rem;align-items:center;color:var(--ink)}
.apps input{width:auto;margin:0}
.mini{padding-left:1.1rem;font-size:.88rem}
.mini li{margin:.25rem 0}
.io{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}
.file{position:relative;text-align:center;color:var(--accent);font-size:.95rem;cursor:pointer}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.server{margin-top:1.2rem;font-size:.9rem}

/* panorama */
.panorama{padding:1.5rem;max-width:1180px;margin:0 auto;width:100%}
.pano-hero{font:1.5rem/1.35 var(--serif);max-width:44ch;margin:0 0 1.6rem}
.pano-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.8rem}
.bars{list-style:none;padding:0;margin:0}
.bars li{display:grid;grid-template-columns:minmax(0,11rem) 1fr 3.5rem;gap:.6rem;align-items:center;font-size:.85rem;margin:.28rem 0;cursor:pointer}
.bars li:hover .lbl{text-decoration:underline}
.bars .bar{height:.7rem;background:var(--soft);border-radius:2px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--kc,var(--accent))}
.bars .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.bars .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(150%);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:var(--r);transition:transform .25s ease;z-index:50;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

@media (max-width:1150px){
  .explorar{grid-template-columns:260px minmax(0,1fr)}
  .detail{position:fixed;inset:58px 0 0 auto;width:min(560px,100%);z-index:30;box-shadow:-8px 0 24px rgba(0,0,0,.12);display:none;max-height:none}
  .detail.open{display:block}
  .close-detail{display:inline-block;float:right}
}
@media (max-width:760px){
  .top{gap:.6rem;padding:.5rem 16px;flex-wrap:wrap}
  .modes{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .modes button{white-space:nowrap}
  .explorar{grid-template-columns:1fr}
  .side{display:none;position:fixed;inset:0;z-index:40;background:var(--paper);max-height:none;top:0}
  .side.open{display:block}
  #toggleSide{display:inline-block}
  .results{padding:1rem 16px 3rem}
  .detail{inset:0;width:100%;top:0;padding:1rem 16px 3rem}
  .bridge-grid{grid-template-columns:1fr}
  .b-join{font-size:1.6rem}
  .capture{grid-template-columns:1fr;padding:1rem 16px}
  .two,.three{grid-template-columns:1fr}
  .grade{grid-template-columns:repeat(2,1fr)}
  .study,.bridge,.panorama{padding:1rem 16px}
  .specimen .facets-line{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}