/* ============================================================
   Digitalizador de plantas arqueológicas — sistema de diseño
   Dos temas conmutables vía [data-theme]:
     · oscuro  (por defecto) — "Topográfico": grafito-negro, siena cálido
     · claro              — "Campo": neutro clínico de alto contraste
   Tipografía: IBM Plex Sans (texto) · IBM Plex Mono (datos/etiquetas)
   ============================================================ */

/* ---- TOKENS · tema oscuro (por defecto) ---- */
:root, [data-theme="dark"] {
  --bg:#090b0e; --panel:#0f1216; --panel-head:#0c0f12; --card:#14181d; --field:#0b0e11;
  --line:#20262d; --line-strong:#2c343d; --major-line:#2c343d;
  --txt:#e4e8ec; --muted:#919aa4; --faint:#636d77;
  --accent:#c06a3c; --accent-hover:#d57e4c; --accent-2:#5b97a8; --on-accent:#0b0e11;
  --accent-soft:rgba(192,106,60,.16); --accent-line:rgba(192,106,60,.45); --accent-ring:rgba(192,106,60,.3);
  --ok:#4fb98a; --ok-line:#2c5346; --ok-soft:rgba(79,185,138,.12);
  --warn:#d8a64a;
  --err:#d96678; --err-line:#532e35; --err-soft:rgba(217,102,120,.12);
  --num-bg:#1b2128; --num-fg:#919aa4;
  --btn:#1a2026; --btn-line:#2c343d; --btn-hover:#222a31; --btn-hover-line:#3a444e;
  --seg-bg:#0b0e11; --seg-hover:#1b2128;
  --item-hover:#1a2026;
  --float:rgba(20,24,29,.86); --scroll:#283038;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --backdrop:rgba(5,7,9,.8);
  --paper:#fff;
  /* Lienzo (mesa de dibujo) — idéntico en ambos temas: gris claro con cuadrícula */
  --canvas:#dfe3e8;
  --canvas-tex:
    linear-gradient(rgba(40,55,75,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,55,75,.05) 1px, transparent 1px);
}

/* ---- TOKENS · tema claro ---- */
[data-theme="light"] {
  --bg:#eef0f3; --panel:#ffffff; --panel-head:#fbfbfc; --card:#ffffff; --field:#ffffff;
  --line:#e3e6ea; --line-strong:#cdd2d9; --major-line:#d9dde2;
  --txt:#1d2128; --muted:#5d6675; --faint:#8a93a1;
  --accent:#b05a30; --accent-hover:#984a25; --accent-2:#5a4ba8; --on-accent:#ffffff;
  --accent-soft:rgba(176,90,48,.10); --accent-line:rgba(176,90,48,.32); --accent-ring:rgba(176,90,48,.22);
  --ok:#1f9d6b; --ok-line:#b7e0cd; --ok-soft:rgba(31,157,107,.10);
  --warn:#9a6b12;
  --err:#c0413f; --err-line:#ecc4c3; --err-soft:rgba(192,65,63,.08);
  --num-bg:#eef0f3; --num-fg:#5d6675;
  --btn:#f4f5f7; --btn-line:#d7dbe1; --btn-hover:#eaecf0; --btn-hover-line:#c4cad2;
  --seg-bg:#f0f2f5; --seg-hover:#e6e9ee;
  --item-hover:#f4f5f7;
  --float:rgba(255,255,255,.92); --scroll:#c4cad2;
  --shadow:0 18px 50px rgba(30,40,60,.22);
  --backdrop:rgba(40,50,65,.45);
  --paper:#fff;
  /* --canvas y --canvas-tex se heredan del bloque base (lienzo común a ambos temas) */
}

/* ---- base ---- */
* { box-sizing:border-box; }
body {
  margin:0; height:100vh; height:100dvh; overflow:hidden; display:flex;
  font:12.5px/1.45 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg); color:var(--txt);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono, #stCoord, #status b { font-family:'IBM Plex Mono', ui-monospace, "SFMono-Regular", Consolas, monospace; }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--scroll); border-radius:6px; border:2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background:var(--line-strong); }
::-webkit-scrollbar-track { background:transparent; }

/* ============================================================
   BARRA LATERAL
   ============================================================ */
#sidebar {
  width:328px; min-width:328px; display:flex; flex-direction:column;
  background:var(--panel); border-right:1px solid var(--line); z-index:30;
}
#appHead {
  display:flex; align-items:center; gap:11px; padding:13px 14px;
  background:var(--panel-head); border-bottom:1px solid var(--line);
  font-size:13.5px; font-weight:600; line-height:1.2;
}
#appHead .brandMark {
  width:31px; height:31px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
#appHead .brandMark svg { width:18px; height:18px; }
#appHead .brandText { min-width:0; }
#appHead small {
  display:block; margin-top:3px; font-family:'IBM Plex Mono', monospace; font-weight:400;
  font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint);
}
#themeToggle { margin-left:auto; }

#sideScroll { flex:1; overflow-y:auto; padding:11px; display:flex; flex-direction:column; gap:9px; }

#msg {
  display:flex; align-items:center; gap:8px; padding:9px 14px; min-height:36px;
  border-top:1px solid var(--line); background:var(--panel-head);
  font-size:11.5px; line-height:1.4; color:var(--warn);
}

/* botón de icono genérico (tema, navegación) */
.iconbtn {
  width:32px; height:32px; flex:none; padding:0; border-radius:8px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--btn); border:1px solid var(--btn-line); color:var(--muted);
  transition:background .12s, color .12s, border-color .12s;
}
.iconbtn:hover { background:var(--btn-hover); color:var(--txt); border-color:var(--btn-hover-line); }
.iconbtn svg { width:17px; height:17px; }
.i-moon { display:none; } .i-sun { display:block; }
[data-theme="light"] .i-moon { display:block; } [data-theme="light"] .i-sun { display:none; }

/* ============================================================
   SECCIONES PLEGABLES (<details class="sec">)
   ============================================================ */
.sec { flex:none; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.sec.major { border-color:var(--major-line); }
.sec > summary {
  list-style:none; display:flex; align-items:center; gap:9px; padding:10px 12px; cursor:pointer;
  user-select:none; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:500;
  letter-spacing:.085em; text-transform:uppercase; color:var(--muted);
}
.sec > summary::-webkit-details-marker { display:none; }
.sec.major > summary { color:var(--txt); box-shadow:inset 2px 0 0 var(--accent); }
.sec .num {
  width:19px; height:19px; flex:none; border-radius:5px; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:600;
  background:var(--num-bg); color:var(--num-fg);
}
.sec.major .num { background:var(--accent-soft); color:var(--accent); }
.sec .chev { margin-left:auto; color:var(--faint); display:flex; transition:transform .18s ease; }
.sec .chev svg { width:13px; height:13px; display:block; }
.sec[open] > summary .chev { transform:rotate(90deg); }
.secBody { padding:4px 12px 13px; }

/* ============================================================
   AYUDA PLEGABLE + PISTAS
   ============================================================ */
.help { margin-top:9px; }
.help > summary {
  list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:7px;
  font-size:11px; color:var(--muted); padding:2px 0;
}
.help > summary::-webkit-details-marker { display:none; }
.help > summary::before {
  content:''; width:0; height:0; flex:none;
  border:4px solid transparent; border-left-color:currentColor;
  transition:transform .18s ease;
}
.help[open] > summary::before { transform:rotate(90deg); }
.help > summary:hover { color:var(--accent); }
.hint { font-size:11px; line-height:1.5; color:var(--muted); margin:6px 0 0; }
.hint b { color:var(--txt); font-weight:600; }

/* ============================================================
   CAMPOS
   ============================================================ */
label {
  display:block; margin:9px 0 4px; font-family:'IBM Plex Mono', monospace;
  font-size:10px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
input[type=text], input[type=number], select {
  width:100%; padding:7px 9px; border-radius:7px;
  background:var(--field); border:1px solid var(--line-strong); color:var(--txt);
  font-family:'IBM Plex Sans', sans-serif; font-size:12.5px;
  transition:border-color .12s, box-shadow .12s;
}
input[type=number] { font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
input::placeholder { color:var(--faint); }
input[type=checkbox] { accent-color:var(--accent); width:auto; }
label.cjk { display:flex; align-items:center; gap:6px; cursor:pointer; }
label.cjk input[type=checkbox] { margin:0; flex:none; }
select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23919aa4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; padding-right:28px;
}
.row { display:flex; gap:8px; }
.row > div { flex:1; min-width:0; }

/* ============================================================
   BOTONES
   ============================================================ */
button {
  font-family:'IBM Plex Sans', sans-serif; font-size:12px; font-weight:500;
  padding:7px 11px; border-radius:7px; cursor:pointer;
  background:var(--btn); border:1px solid var(--btn-line); color:var(--txt);
  transition:background .12s, border-color .12s, color .12s;
}
button:hover { background:var(--btn-hover); border-color:var(--btn-hover-line); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
button.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
button.ok { background:transparent; border-color:var(--ok-line); color:var(--ok); font-weight:600; }
button.ok:hover { background:var(--ok-soft); border-color:var(--ok); }
button.danger { background:transparent; border-color:var(--err-line); color:var(--err); }
button.danger:hover { background:var(--err-soft); border-color:var(--err); }
.btnrow { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.btnrow button { flex:1 1 auto; }

/* control segmentado de modos */
#modes, #modesFeat {
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin-top:4px;
  background:var(--seg-bg); border:1px solid var(--line-strong); border-radius:9px; padding:3px;
}
#modesFeat { grid-template-columns:repeat(auto-fit, minmax(0,1fr)); }
#modes button, #modesFeat button {
  background:transparent; border:none; border-radius:6px; padding:6px 2px;
  font-size:11px; font-weight:500; color:var(--muted);
}
#modes button:hover, #modesFeat button:hover { background:var(--seg-hover); color:var(--txt); }
#modes button.active, #modesFeat button.active {
  background:var(--accent); color:var(--on-accent); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
#modesFeat button.active { background:var(--accent-2); color:#fff; }
#featOpts { margin-top:8px; }

/* ============================================================
   LISTAS (artefactos, rasgos, unidades)
   ============================================================ */
#artList, #featList, #unitList {
  border:1px solid var(--line); border-radius:9px; margin-top:9px; overflow-y:auto; background:var(--field);
}
#artList { max-height:230px; }
#featList { max-height:150px; margin-top:7px; }
#unitList { max-height:168px; }
#featList:empty, #unitList:empty { display:none; }
#artList:empty::after {
  content:'Sin artefactos aún'; display:block; padding:11px; text-align:center;
  font-size:11px; color:var(--faint);
}
.unit, .art {
  display:flex; align-items:center; gap:7px; padding:7px 10px;
  border-bottom:1px solid var(--line); font-size:12.5px; cursor:pointer;
}
.unit:last-child, .art:last-child { border-bottom:none; }
.unit:hover, .art:hover { background:var(--item-hover); }
.unit.activa, .art.sel { background:var(--accent-soft); box-shadow:inset 2px 0 0 var(--accent); }
#featList .art b { color:var(--accent-2); font-weight:600; }
.unit .act { margin-left:auto; cursor:pointer; padding:0 5px; color:var(--muted); border-radius:5px; }
.unit .act:hover { color:var(--txt); }
.unit .del, .art .del {
  margin-left:auto; color:var(--err); cursor:pointer; padding:0 6px; font-weight:700;
  opacity:.5; border-radius:5px; line-height:1.6;
}
.unit .act + .del { margin-left:4px; }
.unit:hover .del, .art:hover .del { opacity:1; }
.unit .del:hover, .art .del:hover { background:var(--err-soft); }
#featList .perfil { margin-left:auto; cursor:pointer; padding:0 5px; font-size:11px; color:var(--accent-2); }
#featList .perfil:hover { text-decoration:underline; }
#featList .perfil + .del { margin-left:4px; }
.pill {
  font-family:'IBM Plex Mono', monospace; font-size:10px; background:var(--num-bg);
  color:var(--muted); border-radius:5px; padding:2px 7px; white-space:nowrap;
}
#unitCount { color:var(--ok); font-weight:600; font-family:'IBM Plex Mono', monospace; }

#editPanel {
  border:1px solid var(--accent-line); border-radius:10px; padding:11px; margin-top:9px;
  background:linear-gradient(180deg, var(--accent-soft), transparent 72%);
}
#editPanel .pill { background:var(--accent-soft); color:var(--accent); }

/* ============================================================
   LIENZO + BARRA DE ESTADO
   ============================================================ */
#main { flex:1; display:flex; flex-direction:column; min-width:0; }
#canvasWrap { flex:1; position:relative; overflow:hidden; background:var(--canvas); }
#canvasWrap::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--canvas-tex); background-size:28px 28px;
}
#cv { position:absolute; top:0; left:0; cursor:crosshair; touch-action:none; }

#centerBtn {
  position:absolute; top:14px; right:14px; z-index:5; width:40px; height:40px; padding:0;
  border-radius:10px; display:grid; place-items:center;
  background:var(--float); border:1px solid var(--line); color:var(--txt); backdrop-filter:blur(6px);
}
#centerBtn svg { width:20px; height:20px; }

#dropHint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; padding:24px; }
#dropHint > div {
  border:1.5px dashed var(--line-strong); border-radius:16px; padding:26px 36px;
  color:var(--muted); font-size:14px; text-align:center; line-height:1.6;
  background:color-mix(in srgb, var(--panel) 65%, transparent);
}

#status {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:8px 14px; background:var(--panel-head); border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted);
}
#status span {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:3px 10px;
}
#status b { color:var(--txt); font-weight:600; }

/* ============================================================
   VISTA PREVIA / PDF
   ============================================================ */
#preview { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:var(--backdrop); backdrop-filter:blur(3px); }
#pvBar {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:9px 14px; background:var(--panel); border-bottom:1px solid var(--line);
}
#pvBar span { color:var(--txt); font-weight:600; font-size:12.5px; margin:0 4px; }
#pvTitle { white-space:nowrap; max-width:46ch; overflow:hidden; text-overflow:ellipsis; }
#pvWarn {
  font-size:11px; font-weight:500; color:var(--warn); margin:0;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:8px; padding:3px 10px;
  max-width:44ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#pvBody { flex:1; display:flex; min-height:0; }
#pvThumbs {
  width:160px; min-width:160px; overflow-y:auto; padding:9px; display:flex; flex-direction:column; gap:8px;
  background:var(--panel); border-right:1px solid var(--line);
}
.pvTh {
  cursor:pointer; border:1.5px solid var(--line); border-radius:8px; padding:5px;
  font-size:10px; color:var(--muted); text-align:center; background:var(--card);
  transition:border-color .12s, color .12s;
}
.pvTh:hover { border-color:var(--line-strong); }
.pvTh.sel { border-color:var(--accent); color:var(--txt); }
.pvTh canvas { width:100%; display:block; background:var(--paper); border-radius:4px; }
#pvPages { flex:1; overflow:auto; padding:18px; cursor:grab; }
.pvPage { background:var(--paper); box-shadow:var(--shadow); border-radius:2px; margin:0 auto 18px; }
.pvPage canvas { display:block; width:100%; height:100%; }
.pvOpt { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.pvOpt select { width:auto; }
#pvClose { margin-left:auto; }

/* ============================================================
   SELECTOR DE PÁGINAS DE PDF
   ============================================================ */
#pgPick { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:var(--backdrop); backdrop-filter:blur(3px); padding:20px; }
#pgBox {
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;
  max-width:720px; max-height:82vh; display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow);
}
#pgTitle { font-weight:600; font-size:13.5px; }
#pgThumbs { display:flex; flex-wrap:wrap; gap:10px; overflow-y:auto; }
.pgTh {
  width:140px; cursor:pointer; border:1.5px solid var(--line); border-radius:9px; padding:5px;
  text-align:center; font-size:11px; color:var(--muted); background:var(--card);
  transition:border-color .12s, color .12s;
}
.pgTh:hover { border-color:var(--line-strong); }
.pgTh.sel { border-color:var(--accent); color:var(--txt); }
.pgTh canvas { width:100%; display:block; background:var(--paper); border-radius:4px; }

/* ============================================================
   NAVEGACIÓN RESPONSIVE (drawer en pantallas angostas)
   ============================================================ */
#navToggle { position:fixed; top:12px; left:12px; z-index:45; display:none; background:var(--float); backdrop-filter:blur(6px); }
#navBackdrop { display:none; }

@media (max-width:860px) {
  #navToggle { display:grid; }
  #sidebar {
    position:fixed; top:0; left:0; bottom:0; width:min(340px,86vw); min-width:0;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow);
  }
  body.nav-open #sidebar { transform:none; }
  #navBackdrop { position:fixed; inset:0; z-index:25; background:var(--backdrop); opacity:0; pointer-events:none; transition:opacity .2s; }
  body.nav-open #navBackdrop { display:block; opacity:1; pointer-events:auto; }
  #centerBtn { top:auto; bottom:64px; }
  #status { padding-left:60px; }
}

@media (max-width:520px) {
  #status span:nth-child(n+3) { display:none; }
  #pvThumbs { width:108px; min-width:108px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; }
}