:root{--miel:#b8701c;
  --paper:#f5f2ec; --surface:#fcfbf8; --surface2:#eeeae2; --border:#e7e1d7; --border2:#d7cfc1;
  --ink:#1c1a17; --ink2:#4f4a42; --muted:#8a8276;
  --espresso:#43342a; --walnut:#6b4f38; --tan:#b79b6e;        /* madera = acento estructural */
  --tline:rgba(107,79,56,.20);                                /* líneas guía del árbol */
  --coral:#ec6a78;                                            /* SOLO: punto del logo + fila seleccionada */
  --coral-deep:#6b4f38; --coral-wash:#ece4d9;                 /* remapeados: texto->walnut, fondo->crema cálida */
  --ok:#3f7a5c; --ok-wash:#e6efe8; --amber:#a6772e; --red:#b24a38;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(60,45,30,.05);
  --shadow:0 10px 30px rgba(70,50,30,.08);
  --z-modal:100;
  --z-confirm:120;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink2);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.mono{font-family:var(--mono)}
button{font-family:inherit}
header{display:flex;align-items:center;gap:16px;padding:13px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.brand{display:flex;align-items:center;gap:9px}
.logoMark{width:27px;height:27px;flex:none;display:block}
.logo{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.brand .tag{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:15px}
.rel{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12.5px}
.rel .chip{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px 11px;color:var(--ink)}
.spacer{flex:1}
.toggle{display:flex;border:1px solid var(--border2);border-radius:9px;overflow:hidden;font-size:12.5px;font-weight:650}
.toggle button{padding:6px 12px;background:var(--surface);color:var(--ink2);border:0;cursor:pointer}
.toggle button.on{background:var(--espresso);color:#fff}
.toggle a{padding:6px 12px;background:var(--surface);color:var(--ink2);border:0;cursor:pointer;text-decoration:none}
.toggle a.on{background:var(--espresso);color:#fff}
.toggle-product a{padding:4px 9px;display:flex;align-items:center}
.toggle-product svg{width:19px;height:19px;display:block}
.hbtn{background:var(--surface);border:1px solid var(--border2);color:var(--ink2);border-radius:9px;padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:600}
.hbtn:hover{border-color:var(--tan);color:var(--walnut)}
.inp{width:100%;box-sizing:border-box;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;color:var(--ink);padding:11px 13px;font-size:14px;outline:none;font-family:inherit;transition:border-color .15s,background .15s,box-shadow .15s}
.inp::placeholder{color:var(--muted)}
.inp:hover:not(:focus){border-color:var(--tan)}
.inp:focus{border-color:var(--walnut);background:var(--surface);box-shadow:0 0 0 3px rgba(107,79,56,.14)}
.act{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 14px;font-weight:650;font-size:13px;cursor:pointer;text-decoration:none;border:1px solid transparent}
.act.primary{background:var(--espresso);color:#fff} .act.primary:hover{background:#352a22}
.act.ghost{background:var(--surface);color:var(--ink2);border-color:var(--border2)} .act.ghost:hover{border-color:var(--tan);color:var(--walnut)}
.act.off{background:var(--surface);color:var(--muted);border-color:var(--border2);cursor:not-allowed}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
#loginModal{position:fixed;inset:0;background:rgba(40,30,22,.42);display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:24px}
#loginModal.on{display:flex}
#loginModal .box{background:var(--surface);border-radius:18px;width:min(460px,95vw);height:auto;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px rgba(40,30,20,.32)}
header{flex-wrap:wrap;row-gap:9px}
@media(max-width:1250px){
  header{gap:10px;padding:11px 14px}
  .spacer{display:none}
  #lang{margin-left:auto}
}
@media(max-width:760px){
  header{padding:9px 11px;gap:8px}
  .tag{display:none}
  #relstats{display:none}
  .hbtn{padding:6px 10px;font-size:12px}
}
@media(max-width:480px){
  .brand .logo{font-size:17px}
  .rel{font-size:11.5px}
  #keybtn{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}