:root {
  --fondo: #0f1117; --panel: #171a23; --panel2: #1e2230; --borde: #2a2f40;
  --texto: #e6e8ef; --suave: #9aa1b4; --acento: #7c9cff;
  /* Expuesta como variable para poder leerla desde JS al colocar el menu
     flotante: env() no es accesible directamente desde getComputedStyle. */
  --sai-izq: env(safe-area-inset-left, 0px);
}
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f6f7fb; --panel: #ffffff; --panel2: #eef0f7; --borde: #d9dde8;
    --texto: #1a1d27; --suave: #5a6178; --acento: #4a6ee0;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}
.spacer { flex: 1; }

/* En pantallas estrechas el separador flexible no cabe: se anula para que
   los controles se repartan en varias filas sin desbordar a lo ancho. */
@media (max-width: 560px) {
  .spacer { display: none; }
  #toolbar { justify-content: space-between; }
}

.file-btn {
  background: var(--acento);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.file-btn input { display: none; }

.badge {
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  color: var(--suave);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--suave);
}
.zoom-controls button {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.4rem;
  border: 1px solid var(--borde);
  background: var(--panel2);
  color: var(--texto);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.zoom-controls button:hover { background: var(--borde); }
#zoom-label { min-width: 3.5ch; text-align: center; }

.target-lang-label {
  font-size: 0.85rem;
  color: var(--suave);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
select {
  background: var(--panel2);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 0.4rem;
  padding: 0.3rem 0.5rem;
}

#main {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* PDFViewer necesita un contenedor posicionado con desplazamiento propio.
   El envoltorio #viewer-wrap le da el hueco flexible dentro de #main. */
#viewer-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

#viewerContainer {
  position: absolute;
  inset: 0;
  overflow: auto;
  /* pan-x ademas de pan-y: al ampliar hay que poder desplazarse en horizontal.
     El pellizco lo gestiona TouchManager, no el navegador. */
  touch-action: pan-x pan-y;
}

#empty-hint {
  color: var(--suave);
  margin-top: 3rem;
  text-align: center;
  padding: 0 1rem;
}

/* pdf.js da a .page un `width` mas un `border` de 9 px contando con el modelo
   de caja por defecto (content-box). El `* { box-sizing: border-box }` global
   de mas arriba le descontaba ese borde, de modo que la capa de texto acababa
   midiendo 18 px mas que el lienzo y las palabras salian estiradas un 5,4%:
   la seleccion se veia desplazada, y cada vez mas cuanto mas lejos del origen.
   Hay que devolver content-box dentro del visor. */
.pdfViewer, .pdfViewer * {
  box-sizing: content-box;
}

.pdfViewer .page {
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* --- Seleccion propia en pantallas tactiles ---
   En iOS, en cuanto hay una seleccion nativa aparece el menu del sistema
   (Copiar / Consultar / Traducir) y no hay forma de suprimirlo: solo se evita
   impidiendo que llegue a existir esa seleccion. Por eso en punteros gruesos
   se desactiva la seleccion nativa de la capa de texto y se dibuja la nuestra.
   `-webkit-touch-callout: none` quita ademas el menu de la pulsacion larga. */
@media (pointer: coarse) {
  .pdfViewer .textLayer {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

.selLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.selRect {
  position: absolute;
  background: rgba(124, 156, 255, 0.4);
  border-radius: 2px;
}

#sel-menu {
  position: fixed;
  z-index: 50;
  max-width: min(20rem, calc(100vw - 1.5rem));
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 0.6rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
}
#sel-menu[hidden] { display: none; }
#sel-menu-word { font-weight: 600; margin-bottom: 0.2rem; }
#sel-menu-body { color: var(--suave); }
#sel-menu-body .t { color: var(--acento); font-size: 0.95rem; }
#sel-menu-body .d { margin-top: 0.25rem; }
#sel-menu-body .e { color: #e07a7a; }
#sel-menu-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
#sel-menu-actions button {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--borde);
  background: var(--panel2);
  color: var(--texto);
  font-size: 0.8rem;
  cursor: pointer;
}
#sel-menu-actions button:hover { background: var(--borde); }

#sidebar {
  width: 320px;
  flex-shrink: 0;
  background: var(--panel);
  border-left: 1px solid var(--borde);
  padding: 1rem;
  overflow-y: auto;
}
#sidebar h2 { font-size: 1rem; margin: 0 0 0.75rem; }
#lookup-results .hint { color: var(--suave); font-size: 0.85rem; }

.lookup-card {
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.lookup-card .selection { font-weight: 600; }
.lookup-card .lang-pair { font-size: 0.75rem; color: var(--suave); margin: 0.15rem 0 0.5rem; }
.lookup-card .translation { color: var(--acento); margin: 0.25rem 0; }
.lookup-card .definition { font-size: 0.85rem; margin: 0.4rem 0 0; }
.lookup-card .pos { font-size: 0.75rem; color: var(--suave); font-style: italic; }
.lookup-card .synonyms { font-size: 0.8rem; color: var(--suave); }
.lookup-card .loading { color: var(--suave); font-size: 0.85rem; }
.lookup-card .error { color: #e07a7a; font-size: 0.85rem; }

@media (max-width: 800px) {
  #main { flex-direction: column; }
  #sidebar { width: auto; border-left: none; border-top: 1px solid var(--borde); max-height: 40vh; }
}