:root{
  --bg:#f4eee2; --bg2:#ece3d1; --ink:#2b2418; --muted:#7d725f; --card:#fffdf8; --line:#e2d8c3;
  --gold:hsl(38 62% 40%); --panel-w:360px;
  --white:#fff; --glass:rgba(255,253,248,.92); --glass2:rgba(255,253,248,.97); --soft:#f1eadb; --hover:#faf4e6; --hover2:#fffaf0;
  --dot:var(--dot); --vig:var(--vig); --abierta:#fbf5e6; --raiz-a:#fffaf0; --raiz-b:#fbf0d6; --exline:var(--exline); --tagmix:0%;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

/* ---------- Cabecera ---------- */
.top{display:flex;align-items:center;gap:18px;padding:10px 18px;background:var(--glass);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:30;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:34px;height:34px;color:var(--gold);flex:none}
h1{font-family:var(--serif);font-size:1.3rem;line-height:1.1;margin:0;font-weight:700;letter-spacing:.2px}
#sub{margin:2px 0 0;font-size:.74rem;color:var(--muted)}
.search{position:relative;flex:1;min-width:200px;max-width:420px;margin-left:auto}
.search input{width:100%;padding:9px 14px 9px 36px;border-radius:999px;border:1px solid var(--line);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d725f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px 50%/16px no-repeat;outline:none;font-size:.9rem}
.search input:focus{border-color:var(--gold);box-shadow:0 0 0 3px hsl(38 62% 40% / .15)}
#resultados{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -12px rgba(60,40,10,.35);overflow:hidden;display:none;max-height:60vh;overflow-y:auto}
#resultados.on{display:block}
#resultados button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border:0;background:none;border-bottom:1px solid var(--soft)}
#resultados button:last-child{border:0}
#resultados button:hover,#resultados button.act{background:var(--hover)}
#resultados small{display:block;color:var(--muted);font-size:.72rem}
#resultados .vacio{padding:12px;color:var(--muted);font-size:.85rem}
.acciones{display:flex;align-items:center;gap:8px}
.acciones button{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-size:.82rem;font-weight:500;white-space:nowrap}
.acciones button:hover{border-color:var(--gold);color:var(--gold)}
.sw{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);cursor:pointer;user-select:none}
.sw input{accent-color:hsl(38 62% 40%)}

/* ---------- Lienzo ---------- */
#vista{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab;
  background-color:var(--bg);
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.4px);
  background-size:26px 26px}
#vista.arrastrando{cursor:grabbing}
#vista::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px var(--vig)}
#lienzo{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#lineas{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#lineas path{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.45;transition:stroke-width .2s,opacity .2s}
#lineas path.ruta{stroke-width:3.6;opacity:.95}
#cartas{position:absolute;left:0;top:0}

/* ---------- Tarjetas ---------- */
.card{position:absolute;left:0;top:0;width:268px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:16px;
  box-shadow:0 1px 2px rgba(60,40,10,.08),0 10px 24px -14px rgba(60,40,10,.45);padding:8px 14px 8px 12px;cursor:pointer;user-select:none;outline:none;
  transition:box-shadow .2s,border-color .2s,background .2s}
.card:hover{box-shadow:0 2px 4px rgba(60,40,10,.1),0 16px 30px -12px rgba(60,40,10,.5)}
.card:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.card.sel{box-shadow:0 0 0 2.5px var(--c),0 18px 34px -12px rgba(60,40,10,.55);background:var(--white)}
.card.abierta{background:linear-gradient(180deg,var(--card),var(--abierta))}
.tag{height:14px;font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--c),white var(--tagmix));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.main{display:flex;gap:10px;align-items:center;height:50px}
.av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.82rem;letter-spacing:.03em;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.card.fall .av{background:#9b9181}
.txt{min-width:0}
.nm{font-weight:600;font-size:.84rem;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yr{font-size:.72rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjs{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.pj{display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:8px;background:color-mix(in srgb,var(--c) 9%,var(--white));font-size:.76rem;cursor:pointer}
.pj:hover{background:color-mix(in srgb,var(--c) 18%,var(--white))}
.pj i{font-style:normal;flex:none;width:20px;text-align:center;color:var(--c);font-size:.78rem}
.pj.ex{background:transparent;border:1px dashed var(--exline);color:#8a7f6b}
.pj.ex i{font-size:.62rem;font-weight:600;text-transform:uppercase;color:#a09580;letter-spacing:.04em}
.pj .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj .py{flex:none;color:var(--muted);font-size:.7rem}
.tog{position:absolute;right:-15px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;border:3px solid var(--bg);background:var(--c);color:#fff;font-weight:600;font-size:.78rem;display:grid;place-items:center;padding:0;box-shadow:0 3px 8px rgba(0,0,0,.25);transition:transform .2s}
.tog:hover{transform:scale(1.12)}
.card.abierta .tog{background:var(--white);color:var(--c);border-color:var(--c)}
.card.raiz{border-left-width:6px;background:linear-gradient(180deg,var(--raiz-a),var(--raiz-b))}

/* ---------- Flotantes ---------- */
#ruta{position:absolute;left:14px;top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:calc(100% - 28px - var(--panel-w));z-index:5;font-size:.76rem}
#ruta button{border:0;background:var(--glass);border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:var(--muted)}
#ruta button:hover{color:var(--ink);border-color:var(--gold)}
#ruta button:last-child{color:var(--ink);font-weight:600}
#ruta span{color:#b6a98f}
.leyenda{position:absolute;left:14px;bottom:12px;display:flex;gap:14px;flex-wrap:wrap;background:var(--glass);border:1px solid var(--line);padding:7px 12px;border-radius:12px;font-size:.72rem;color:var(--muted);z-index:5}
.leyenda span{display:flex;align-items:center;gap:6px}
.lg{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.55rem}
.lg.viva{background:hsl(160 48% 42%)} .lg.muerta{background:#9b9181}
.lg.h{color:hsl(342 48% 42%);font-size:.8rem;width:auto} .lg.ex{width:auto;font-weight:600;color:#a09580;text-transform:uppercase;font-size:.56rem}
.zoom{position:absolute;right:calc(var(--panel-w) + 24px);bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:6;transition:right .3s}
#panel.cerrado ~ .zoom{right:14px}
.zoom button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--glass);font-size:1.2rem;line-height:1;box-shadow:0 4px 12px -6px rgba(60,40,10,.4)}
.zoom button:hover{border-color:var(--gold);color:var(--gold)}
.ayuda{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(43,36,24,.86);color:#fff;font-size:.76rem;padding:8px 16px;border-radius:999px;z-index:7;transition:opacity .6s;pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.ayuda.off{opacity:0}

/* ---------- Panel de detalle ---------- */
#panel{position:absolute;top:0;right:0;bottom:0;width:var(--panel-w);background:var(--glass2);backdrop-filter:blur(10px);border-left:1px solid var(--line);box-shadow:-18px 0 40px -24px rgba(60,40,10,.45);padding:20px 20px 24px;overflow-y:auto;z-index:10;transition:transform .3s cubic-bezier(.2,.7,.2,1);cursor:default}
#panel.cerrado{transform:translateX(104%)}
#panel .x{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;border:0;background:var(--soft);font-size:1.2rem;line-height:1}
.p-head{display:flex;gap:14px;align-items:center;padding-right:30px}
.av.big{width:62px;height:62px;font-size:1.15rem}
#panel h2{font-family:var(--serif);font-size:1.25rem;line-height:1.15;margin:0 0 6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.7rem;padding:3px 9px;border-radius:999px;background:var(--soft);color:#6b604d;font-weight:500}
.chip.v{background:hsl(160 40% 90%);color:hsl(160 50% 25%)} .chip.f{background:#e8e3da;color:#6c6455}
.rel{margin:18px 0 6px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--c) 11%,var(--white));border:1px solid color-mix(in srgb,var(--c) 28%,var(--white))}
.rel small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.rel b{font-family:var(--serif);font-size:1.35rem;color:var(--c)}
#panel h3{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:20px 0 8px;font-weight:600}
.datos{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:.86rem;margin:0}
.datos dt{color:var(--muted)} .datos dd{margin:0;font-weight:500}
.lista{display:flex;flex-direction:column;gap:6px}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--white);text-align:left;width:100%}
.item:hover{border-color:var(--c);background:var(--hover2)}
.item .av{width:32px;height:32px;font-size:.7rem}
.item b{display:block;font-size:.83rem;font-weight:600;line-height:1.2}
.item small{color:var(--muted);font-size:.72rem}
.accion{margin-top:18px;width:100%;padding:11px;border-radius:12px;border:0;background:var(--c);color:#fff;font-weight:600}
.accion:hover{filter:brightness(1.08)}
.yo{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}
.yo select{display:block;width:100%;margin-top:6px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--white)}
.nota{font-size:.78rem;color:var(--muted);margin:0}

/* ---------- Móvil ---------- */
@media (max-width:820px){
  .top{gap:8px;padding:8px 12px}
  #sub{display:none}
  h1{font-size:1.05rem}
  .logo{width:28px;height:28px}
  .search{order:3;max-width:none;flex-basis:100%;margin-left:0}
  .acciones{margin-left:auto}
  .sw span{display:none}
  .acciones button{padding:7px 11px;font-size:.78rem}
  #panel{top:auto;left:0;width:auto;height:52%;border-left:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:0 -18px 40px -24px rgba(60,40,10,.5)}
  #panel.cerrado{transform:translateY(104%)}
  #ruta{max-width:calc(100% - 28px)}
  .leyenda{display:none}
  .zoom{right:12px;bottom:calc(52% + 12px)}
  #panel.cerrado ~ .zoom{bottom:14px}
  .ayuda{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Modo oscuro ---------- */
:root[data-theme="dark"]{
  --bg:#15120d; --ink:#f0e9da; --muted:#a79c87; --card:#231f17; --line:#3b3427; --gold:hsl(38 72% 58%);
  --white:#2c271d; --glass:rgba(30,26,19,.92); --glass2:rgba(30,26,19,.97); --soft:#352f23; --hover:#2f291e; --hover2:#2f291e;
  --dot:rgba(200,185,150,.16); --vig:rgba(0,0,0,.45); --abierta:#2a2418; --raiz-a:#2e2616; --raiz-b:#392d17; --exline:#5a5040; --tagmix:38%;
  color-scheme:dark;
}
:root[data-theme="dark"] .card{box-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 24px -14px rgba(0,0,0,.9)}
:root[data-theme="dark"] .card.sel{background:#2b261b}
:root[data-theme="dark"] .pj i, :root[data-theme="dark"] .rel b{color:color-mix(in srgb,var(--c),white 38%)}
:root[data-theme="dark"] .pj.ex{color:#9a8f7a}
:root[data-theme="dark"] .chip{color:#cfc5b0}
:root[data-theme="dark"] .chip.v{background:hsl(160 30% 20%);color:hsl(160 50% 75%)}
:root[data-theme="dark"] .chip.f{background:#3b362d;color:#b9ae98}
:root[data-theme="dark"] .tog{border-color:var(--bg)}
:root[data-theme="dark"] .card.abierta .tog{background:var(--card)}
:root[data-theme="dark"] .ayuda{background:rgba(240,233,218,.92);color:#15120d}
:root[data-theme="dark"] .lg.h{color:hsl(342 60% 68%)}
.tema{width:38px;height:38px;padding:0!important;display:grid;place-items:center;border-radius:50%!important}
.tema svg{width:18px;height:18px}
.tema .sol{display:none} :root[data-theme="dark"] .tema .sol{display:block} :root[data-theme="dark"] .tema .luna{display:none}

/* ---------- Horizontal en móvil/tablet ---------- */
@media (orientation:landscape) and (max-height:520px){
  :root{--panel-w:310px}
  .top{flex-wrap:nowrap;padding:5px 12px;gap:10px}
  #sub,.sw span,.leyenda,.ayuda{display:none}
  h1{font-size:.98rem} .logo{width:24px;height:24px}
  .search{order:0;flex:1;flex-basis:auto;max-width:300px;margin-left:auto;min-width:120px}
  .search input{padding:6px 12px 6px 34px;font-size:.82rem}
  .acciones{margin-left:0;gap:6px}
  .acciones button{padding:6px 10px;font-size:.74rem}
  .tema{width:32px;height:32px}
  #panel{top:0;left:auto;right:0;bottom:0;width:var(--panel-w);height:auto;border-radius:0;border-top:0;border-left:1px solid var(--line);padding:14px 14px 18px}
  #panel.cerrado{transform:translateX(104%)}
  #ruta{max-width:calc(100% - 28px - var(--panel-w));top:8px}
  .zoom{right:calc(var(--panel-w) + 14px);bottom:10px;flex-direction:row}
  #panel.cerrado ~ .zoom{right:12px;bottom:10px}
  .zoom button{width:34px;height:34px}
}
.vlink{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-size:.82rem;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--ink)}
.vlink:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:820px){.vlink{display:none}}