* { box-sizing: border-box; }
/* ═══════════ BENTHOS DESIGN TOKENS — capa deep-sea ═══════════
   Dark-first. La ÚNICA variable que toca config.js es --bv-accent (window.BENTOS.brand.accent).
   Las paletas de DATO (cividis, Okabe-Ito, GnBu) NO viven aquí: son del dato, no de la marca. */
:root {
  color-scheme: dark;
  /* ── MARCA (temable por instalación) ── */
  --bv-accent: #5ee0ff;
  --bv-accent-ink: #06131f;        /* texto sobre acento sólido */
  --bv-accent-text: var(--bv-accent);   /* acento COMO texto (gancho para tema claro futuro) */
  /* derivados (se recalculan solos; no configurar) */
  --bv-accent-ghost:  color-mix(in srgb, var(--bv-accent)  8%, transparent);
  --bv-accent-soft:   color-mix(in srgb, var(--bv-accent) 14%, transparent);
  --bv-accent-tint:   color-mix(in srgb, var(--bv-accent) 18%, transparent);
  --bv-accent-strong: color-mix(in srgb, var(--bv-accent) 28%, transparent);
  --bv-accent-border: color-mix(in srgb, var(--bv-accent) 55%, transparent);
  /* ── SUPERFICIES por elevación (0 = fondo marino) ── */
  --bv-abyss: #04060d; --bv-surface-0: #0b1020; --bv-surface-1: #0e1530;
  --bv-surface-2: #16203f; --bv-surface-3: #1d2a52;
  --bv-glass: rgba(10,16,32,.82); --bv-glass-raised: rgba(16,24,48,.88);
  --bv-glass-solid: rgba(14,23,51,.97); --bv-scrim: rgba(4,8,16,.62);
  --bv-grad-bar: linear-gradient(180deg, var(--bv-surface-2), var(--bv-surface-1));
  --bv-grad-glass: linear-gradient(160deg, rgba(18,26,51,.90), rgba(9,13,28,.86));
  /* ── TEXTO ── */
  --bv-text-hi: #fff; --bv-text: #e7ecf5; --bv-text-bright: #eaf6ff;
  --bv-text-soft: #cfe0ff; --bv-text-muted: #aebed9; --bv-text-faint: #8ea0c0;
  --bv-text-inverse: #06131f;
  /* ── BORDES ── */
  --bv-border-soft: rgba(120,150,210,.16); --bv-border: rgba(120,150,210,.30);
  --bv-border-strong: rgba(120,150,210,.55); --bv-border-input: #647499;
  --bv-hairline: rgba(120,160,220,.22); --bv-fill-hover: rgba(120,150,210,.16);
  /* ── PROFUNDIDAD (sombra + luz de canto) ── */
  --bv-shadow-1: 0 4px 14px rgba(0,0,0,.35); --bv-shadow-2: 0 10px 30px rgba(0,0,0,.45);
  --bv-shadow-3: 0 18px 50px rgba(0,0,0,.55); --bv-edge-light: inset 0 1px 0 rgba(255,255,255,.06);
  --bv-blur-sm: 6px; --bv-blur: 8px; --bv-blur-lg: 10px;   /* backdrop-filter: NUNCA subir de aquí */
  /* radios */
  --bv-r-sm: 8px; --bv-r-md: 12px; --bv-r-lg: 16px; --bv-r-pill: 999px;
  /* ── GLOW (decorativo; jamás única pista de estado) ── */
  --bv-glow-dot: 0 0 6px var(--bv-accent);
  --bv-glow: 0 0 9px color-mix(in srgb, var(--bv-accent) 65%, transparent);
  --bv-glow-ring: 0 0 0 1px color-mix(in srgb, var(--bv-accent) 30%, transparent),
                  0 0 16px -2px color-mix(in srgb, var(--bv-accent) 40%, transparent);
  --bv-glow-soft: 0 0 14px color-mix(in srgb, var(--bv-accent) 12%, transparent);   /* halo tenue de paneles flotantes */
  /* ── ESTADO (UI, no dato; forma+texto siempre acompañan) ── */
  --bv-ok: #34d17a; --bv-ok-text: #7fe0a8; --bv-ok-soft: rgba(52,209,122,.16); --bv-ok-ink: #06210f;
  --bv-warn: #f0a93a; --bv-warn-text: #ffcf6b; --bv-danger: #ff6b6b; --bv-danger-text: #ff9b9b;
  --bv-focus: #ffd24d;             /* foco = conformidad, NO temable */
  /* ── PIEZAS FUNCIONALES (alto contraste sobre teselas; NO atar al acento) ── */
  --bv-rov-course: #34e1ff; --bv-rov-heading: #ff7a1a;
  --bv-scroll-thumb: #44567c; --bv-scroll-thumb-hover: #5b7099; --bv-handle: rgba(150,180,230,.55);
  /* ── FONDO DEEP-SEA ── */
  --bv-bg-deepsea: linear-gradient(180deg, #060a16 0%, #0b1020 45%, #101a38 100%);
  --bv-contour-ink: rgba(120,160,220,.05);
  --bv-contour-ink-2: color-mix(in srgb, var(--bv-accent) 4%, transparent);
}
@media (prefers-contrast: more) {
  :root {
    --bv-border: rgba(150,180,230,.6); --bv-border-soft: rgba(150,180,230,.35);
    --bv-glass: rgba(6,10,20,.96); --bv-glass-raised: rgba(8,14,28,.97); --bv-glass-solid: rgba(6,10,20,.98);
    --bv-grad-glass: linear-gradient(160deg, rgba(8,12,24,.97), rgba(5,9,20,.96));   /* fondo del dock/#hud/#annpanel: casi opaco en alto contraste */
    --bv-text-faint: #a9bcd9; --bv-contour-ink: transparent; --bv-contour-ink-2: transparent;
    --bv-glow-soft: 0 0 0 transparent;
  }
}
/* ── Degradación del cristal (a11y + rendimiento) ── */
/* Motor sin backdrop-filter (WebKitGTK viejo de Tauri): el cristal se vuelve casi opaco (mismo look, cero transparencia peligrosa). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --bv-glass: rgba(10,16,32,.96); --bv-glass-raised: rgba(8,14,28,.97);
          --bv-grad-glass: linear-gradient(160deg, rgba(12,18,36,.97), rgba(8,12,26,.96)); }
}
/* Usuario que pide menos transparencia (accesibilidad del SO) */
@media (prefers-reduced-transparency: reduce) {
  :root { --bv-glass: rgba(10,16,32,.97); --bv-glass-raised: rgba(8,14,28,.98);
          --bv-grad-glass: linear-gradient(160deg, rgba(12,18,36,.98), rgba(8,12,26,.97)); }
  header, #hud, #annpanel, .usermenu, .fxbtn, .iconbtn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  header { background: var(--bv-glass-solid); }
}
/* Kill-switch de rendimiento (runtime): enganchable al blindaje WebGL — el visor sigue idéntico, opaco */
html.bv-glass-off header, html.bv-glass-off #hud, html.bv-glass-off #annpanel, html.bv-glass-off .usermenu,
html.bv-glass-off .fxbtn, html.bv-glass-off .iconbtn {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--bv-glass-solid);
}
/* Iconos "Benthos Line" (SVG, sustituyen a los emojis que cada SO pinta distinto) */
.bv-icon { width: var(--bv-icon-size, 20px); height: var(--bv-icon-size, 20px);
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle; flex: 0 0 auto; }
@media (prefers-contrast: more) { .bv-icon { stroke-width: 2.25; } }
/* candado: dos iconos (abierto/cerrado) conmutados por estado — dibujo distinto, no solo color */
#annlock .ic-locked { display: none; }
#annlock[aria-pressed="true"] .ic-locked { display: inline-block; }
#annlock[aria-pressed="true"] .ic-unlocked { display: none; }
html { font-size: 14px; }              /* ancla rem del documento (texto global) */
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  font: 1rem/1.4 system-ui, sans-serif;
  background: var(--bv-bg-deepsea) fixed var(--bv-surface-0); color: var(--bv-text);
}
/* textura de contornos (isóbatas): una capa fija estática, GPU-friendly, sin imágenes ni JS.
   Asoma en gutters y páginas de contenido; en el visor los paneles la cubren (columna de agua). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;   /* detrás de TODO el contenido: no toca el apilado del visor */
  background:
    repeating-radial-gradient(ellipse 140% 100% at 88% 115%, transparent 0 52px, var(--bv-contour-ink) 52px 54px),
    repeating-radial-gradient(ellipse 120% 90% at -8% -15%, transparent 0 68px, var(--bv-contour-ink-2) 68px 70px);
}
header, footer {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; color: var(--bv-text-hi, #eef3fb);
}
footer { background: linear-gradient(180deg, #16203f, #0e1530); }
/* CABECERA = dock flotante de cristal: despegada de los bordes, hovering sobre el fondo abisal
   (isóbatas asoman por los gutters). Sustituye a la barra sólida soldada al borde superior. */
header {
  /* z-index alto A PROPÓSITO: el backdrop-filter del dock crea un CONTEXTO DE APILADO que
     atrapa el z-index de sus menús desplegables (offline/export/cuenta) a su propio nivel.
     Debe superar TODO el contenido del stage (máx = annpanel 1500, controles Leaflet) para que
     los menús caigan por encima; queda bajo los overlays superiores (reattach 2000, panel a11y). */
  position: relative; z-index: 1600; margin: 10px 12px 3px; padding: 9px 16px;
  border-radius: var(--bv-r-lg, 16px);
  background: var(--bv-grad-glass);
  -webkit-backdrop-filter: blur(var(--bv-blur-lg)); backdrop-filter: blur(var(--bv-blur-lg));
  border: 1px solid var(--bv-border, rgba(120,150,210,.30));
  box-shadow: var(--bv-shadow-2), var(--bv-edge-light);
}
footer { border-top: 1px solid rgba(120,150,210,.30); font-size: 0.893rem; }
header strong { font-size: 1.071rem; letter-spacing: .2px; }
header #brand-logo { height: 40px; width: auto; border-radius: 4px; }   /* logo de la institución (co-marca) */
#brand-logo[hidden] { display: none; }
.muted { color: #aebed9; }
.grow { flex: 1; }
.credit a { color: var(--bv-accent); text-decoration: none; font-weight: 600; }
.credit a:hover { text-decoration: underline; }
.chk { display: flex; align-items: center; gap: 5px; color: #8ea0c0; font-size: 0.857rem; }
header select {
  background: var(--bv-surface-0, #0b1020); color: var(--bv-text-bright, #e7ecf5);
  border: 1px solid var(--bv-border-input, #647499);
  border-radius: var(--bv-r-sm, 8px); padding: 4px 8px;
}
header select:hover { border-color: var(--bv-border-strong, #7c8fb8); }
/* App de escritorio (Tauri/WebKitGTK): los <select>/inputs NATIVOS ignoran el tema
   oscuro y salen con fondo blanco del sistema. Se fuerza apariencia custom SOLO dentro
   de la app (html.bv-native, que pone bv-tauri.js) → el visor online no se toca. */
html.bv-native select,
html.bv-native input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.bv-native textarea {
  -webkit-appearance: none; appearance: none;
  background-color: #0b1020; color: #e7ecf5;
}
html.bv-native select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%239fb2d0' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px;
}
html.bv-native option { background-color: #0b1020; color: #e7ecf5; }
/* Checkbox con on/off CLARO en la app (el nativo apenas se nota en oscuro). */
html.bv-native input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border: 1.5px solid #647499; border-radius: 3px;
  background: #0b1020; vertical-align: middle; cursor: pointer; position: relative; flex: 0 0 auto;
}
html.bv-native input[type=checkbox]:checked { background: var(--bv-accent, #5ee0ff); border-color: var(--bv-accent, #5ee0ff); }
html.bv-native input[type=checkbox]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #0b1020; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* App de escritorio (Lite): "Comparar 3D" (split multiventana con iframes) aún no
   soportado en Tauri → oculto. "Terreno 3D" y "Desacoplar" SÍ abren ventana suelta nativa. */
html.bv-native #open3dsplit { display: none !important; }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#stage { flex: 1 1 0; display: flex; min-height: 0; overflow: hidden; }
#stage.swapped { flex-direction: row-reverse; }   /* intercambia lados (vídeo ⇄ mapa) */
#left, #right { flex: 1 1 0; min-width: 0; min-height: 0; font-size: 1rem; }  /* root de panel: ancla de scope= */
#left { display: flex; }

/* divisor vertical (mapa | vídeo) */
#divider {
  flex: 0 0 8px; cursor: col-resize; position: relative;
  background: linear-gradient(180deg, #1a2547, #0e1530);
  border-left: 1px solid rgba(120,150,210,.18);
  border-right: 1px solid rgba(120,150,210,.18);
}
#divider::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 2px; height: 34px; border-radius: 2px;
  background: rgba(150,180,230,.55);
  box-shadow: -3px 0 0 rgba(150,180,230,.55), 3px 0 0 rgba(150,180,230,.55);
}
#divider:hover { background: linear-gradient(180deg, #26356a, #141d3f); }

/* divisor horizontal (escenario / perfil) */
#hdivider {
  flex: 0 0 8px; cursor: row-resize; position: relative;
  background: linear-gradient(90deg, #1a2547, #0e1530);
  border-top: 1px solid rgba(120,150,210,.18);
  border-bottom: 1px solid rgba(120,150,210,.18);
}
#hdivider::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); height: 2px; width: 34px; border-radius: 2px;
  background: rgba(150,180,230,.55);
  box-shadow: 0 -3px 0 rgba(150,180,230,.55), 0 3px 0 rgba(150,180,230,.55);
}
#hdivider:hover { background: linear-gradient(90deg, #26356a, #141d3f); }

#mapwrap { position: relative; flex: 1; min-height: 0; min-width: 0; }
#map { position: absolute; inset: 0; }
#right { background: #000; display: flex; align-items: center; justify-content: center; position: relative; }
#bv-vidnote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; max-width: min(460px, 86%);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center;
  padding: 12px 16px; border-radius: 10px; background: rgba(12,18,34,.94); border: 1px solid rgba(240,180,90,.45); color: #f3dcb4; font-size: .9em; }
#bv-vidnote .vn-retry { font: inherit; font-weight: 600; color: #fff; background: rgba(94,224,255,.16); border: 1px solid var(--bv-accent); border-radius: 7px; padding: 4px 12px; cursor: pointer; }
/* ── Transporte de vídeo propio (sustituye a los controles nativos) — barra de cristal ──
   El scrubber es un <input type=range> NATIVO: conserva teclado (flechas/Home/End) y semántica
   ARIA de deslizador gratis. Acciona el <video> directamente → la sincronización (marcador, HUD,
   3D, perfil) sigue por los listeners de eventos del propio vídeo. */
.vtransport {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border-radius: var(--bv-r-lg); background: var(--bv-grad-glass); border: 1px solid var(--bv-border);
  -webkit-backdrop-filter: blur(var(--bv-blur-lg)); backdrop-filter: blur(var(--bv-blur-lg));
  box-shadow: var(--bv-shadow-2), var(--bv-edge-light);
}
.vtransport[hidden] { display: none; }
.vbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--bv-r-md); border: 1px solid var(--bv-border); background: var(--bv-glass);
  color: var(--bv-text-soft); cursor: pointer; --bv-icon-size: 18px;
  transition: color .12s, border-color .12s, background-color .12s, transform .1s; }
.vbtn:hover { color: var(--bv-text-hi); border-color: var(--bv-border-strong); transform: translateY(-1px); }
.vbtn:active { transform: translateY(0); }
.vtime { font-variant-numeric: tabular-nums; font-size: .82em; color: var(--bv-text-soft); min-width: 3.3em; text-align: center; }
.vseek { flex: 1 1 auto; min-width: 60px; height: 6px; -webkit-appearance: none; appearance: none; cursor: pointer;
  border-radius: 999px; background: linear-gradient(to right, var(--bv-accent) 0 var(--p,0%), rgba(120,150,210,.28) var(--p,0%) 100%); }
.vseek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #eaf6ff;
  border: 2px solid var(--bv-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--bv-accent) 70%, transparent); }
.vseek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #eaf6ff; border: 2px solid var(--bv-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--bv-accent) 70%, transparent); }
.vseek:focus-visible { outline: 2px solid var(--bv-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vbtn:hover, .vbtn:active { transform: none; } }
.vtransport { container-type: inline-size; }   /* en paneles estrechos se retiran los controles finos (siguen por teclado) */
.vrate { flex: 0 0 auto; height: 34px; padding: 0 6px; border-radius: var(--bv-r-md); border: 1px solid var(--bv-border);
  background: var(--bv-glass); color: var(--bv-text-soft); font: inherit; font-size: .82em; font-variant-numeric: tabular-nums; cursor: pointer; }
.vrate:hover { color: var(--bv-text-hi); border-color: var(--bv-border-strong); }
.vrate option { background: var(--bv-glass-solid); color: var(--bv-text); }
.vbtn:focus-visible, .vrate:focus-visible { outline: 2px solid var(--bv-focus); outline-offset: 2px; }
.vframeinfo { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: var(--bv-glass-solid); border: 1px solid var(--bv-border);
  color: var(--bv-text-hi); font-size: .85em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vframeinfo[hidden] { display: none; }
.vkeyspop { position: absolute; right: 8px; bottom: calc(100% + 8px); width: min(380px, calc(100% - 16px)); max-height: 60vh; overflow: auto;
  padding: 12px 14px; border-radius: var(--bv-r-lg); background: var(--bv-glass-solid); border: 1px solid var(--bv-border);
  box-shadow: var(--bv-shadow-2); color: var(--bv-text); font-size: .85em; z-index: 10; }
.vkeyspop[hidden] { display: none; }
.vkeyspop h3 { margin: 0 0 8px; font-size: 1em; color: var(--bv-text-hi); }
.vkeyspop table { width: 100%; border-collapse: collapse; }
.vkeyspop th, .vkeyspop td { padding: 4px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bv-hairline); }
.vkeyspop th { font-weight: normal; padding-right: 12px; }
.vkeyspop td { white-space: nowrap; text-align: right; }
.vkeyspop kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 0 1px; border-radius: 5px; text-align: center;
  border: 1px solid var(--bv-border-strong); background: var(--bv-glass); font: inherit; font-size: .92em; }
.vkeyspop p { margin: 8px 0 0; color: var(--bv-text-muted); }
@container (max-width: 520px) { .vstep, .vkeysbtn { display: none; } }
@container (max-width: 400px) { .vrate { display: none; } }
#revnote { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 620;
  max-width: 80%; text-align: center; pointer-events: none;
  background: rgba(10,16,32,.72); color: #ffd9a8; font-size: 0.857em; line-height: 1.3;
  border: 1px solid rgba(255,180,110,.35); border-radius: 8px; padding: 5px 10px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#revnote[hidden] { display: none; }
#video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* atenuar SOLO la base (teselas), no el track ni el marcador */
#map.dimmed .leaflet-tile-pane { filter: brightness(.5) saturate(.85); transition: filter .15s; }

/* Botoneras por panel (mapa / vídeo) */
.panelbar { position: absolute; z-index: 600; display: flex; gap: 8px; }
#mapbar { top: 12px; left: 12px; }
#vidbar { top: 12px; right: 12px; }
.fxbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--bv-glass); color: var(--bv-text-muted);
  border: 1px solid var(--bv-border); border-radius: var(--bv-r-md);
  padding: 6px 11px; font: 600 0.857em system-ui, sans-serif;
  -webkit-backdrop-filter: blur(var(--bv-blur)); backdrop-filter: blur(var(--bv-blur));
  box-shadow: var(--bv-shadow-1); transition: color .12s, border-color .12s, background-color .12s, box-shadow .12s, transform .12s;
}
.fxbtn:hover { color: var(--bv-text-hi); border-color: var(--bv-border-strong); transform: translateY(-1px); box-shadow: var(--bv-shadow-2); }
.fxbtn:active { transform: translateY(0); box-shadow: var(--bv-shadow-1); }   /* pulsación táctil */
.fxbtn.on { box-shadow: var(--bv-shadow-1), var(--bv-glow-ring); }   /* glow ADEMÁS del dot/borde (no única pista) */
header .fxbtn, header .iconbtn, footer .fxbtn { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* debajo ya es opaco: blur gratis */
.fxbtn.on {
  background: linear-gradient(160deg, color-mix(in srgb, var(--bv-accent) 26%, transparent), rgba(33,208,122,.16));
  color: #eaf6ff; border-color: color-mix(in srgb, var(--bv-accent) 60%, transparent);
}
.fxbtn .dot { width: 8px; height: 8px; border-radius: 50%; background: #5a6b88; }

/* Menú de cuenta (cabecera): avatar + desplegable perfil/admin/logout */
.userbox { position: relative; }
.userbox .avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: .72em; font-weight: 700;
  background: color-mix(in srgb, var(--bv-accent) 30%, #1a2742); color: #eaf6ff;
}
.usermenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1700; min-width: 210px;
  background: var(--bv-glass); border: 1px solid var(--bv-hairline); border-radius: var(--bv-r-lg);
  padding: 6px; box-shadow: var(--bv-shadow-3), var(--bv-edge-light), var(--bv-glow-soft);
  -webkit-backdrop-filter: blur(var(--bv-blur-lg)); backdrop-filter: blur(var(--bv-blur-lg));
}
/* aparición: los desplegables (cuenta/exportar/offline) caen con un leve fade+scale desde arriba */
.usermenu:not([hidden]) { animation: bv-menu-in .15s cubic-bezier(.2,.7,.3,1); transform-origin: top; }
@keyframes bv-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .usermenu:not([hidden]) { animation: none; } }
.usermenu .um-head { padding: 8px 10px 10px; border-bottom: 1px solid rgba(120,150,210,.22); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.usermenu a, .usermenu button {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 9px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  color: #dbe6f7; font: inherit; text-decoration: none;
}
.usermenu a:hover, .usermenu button:hover { background: rgba(120,150,210,.16); color: #fff; }
#um-logout { color: #ff9b9b; }

/* Selector de idioma en la barra (entre el estado y el menú de cuenta) */
.langsel select {
  background: rgba(10,16,32,.82); color: #aebed9; border: 1px solid rgba(120,150,210,.30);
  border-radius: 10px; padding: 6px 9px; font: 600 0.857em system-ui, sans-serif; cursor: pointer;
}
.langsel select:hover { color: #fff; border-color: rgba(120,150,210,.55); }

/* Menú "Exportar": cada ítem = formato (estándar) + descriptor tenue (herramientas/uso) */
#exportmenu { min-width: 250px; }
#exportmenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
#exportmenu .exp-fmt { font-weight: 600; }
#exportmenu .exp-sub { font-size: .76rem; color: #8ea0c0; font-weight: 400; }
#exportmenu .exp-crs { display: flex; align-items: center; gap: 8px; padding: 9px 10px 4px; margin-top: 4px; border-top: 1px solid rgba(120,150,210,.22); }
#exportmenu .exp-crs label { font-size: .8rem; color: #aebed9; font-weight: 600; flex: 0 0 auto; }
#exportmenu .exp-crs select { flex: 1 1 auto; min-width: 0; background: rgba(20,30,52,.95); color: #dbe6f7; border: 1px solid rgba(120,150,200,.4); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: .8rem; }
.fxbtn.on .dot { background: var(--bv-accent); box-shadow: 0 0 6px var(--bv-accent); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; cursor: pointer; font-size: 1.071em; line-height: 1;
  background: var(--bv-glass); color: var(--bv-text-muted);
  border: 1px solid var(--bv-border); border-radius: var(--bv-r-md);
  -webkit-backdrop-filter: blur(var(--bv-blur)); backdrop-filter: blur(var(--bv-blur));
  transition: color .12s, border-color .12s, background-color .12s, transform .12s;
}
.iconbtn:hover { color: #fff; border-color: color-mix(in srgb, var(--bv-accent) 60%, transparent); transform: translateY(-1px); }
.iconbtn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .fxbtn:hover, .fxbtn:active, .iconbtn:hover, .iconbtn:active { transform: none; } }
/* Popup del mapa con el estilo del visor (no la caja blanca por defecto de Leaflet) */
/* Etiqueta de cristal del mapa (popup): chip translúcido con borde+glow de acento */
.leaflet-popup-content-wrapper { background: var(--bv-glass-raised); color: var(--bv-text-bright);
  border: 1px solid var(--bv-accent-border); border-radius: var(--bv-r-md);
  box-shadow: var(--bv-glow-ring), var(--bv-shadow-2);
  -webkit-backdrop-filter: blur(var(--bv-blur-lg)); backdrop-filter: blur(var(--bv-blur-lg)); }
.leaflet-popup-content { margin: 10px 14px; font-size: 1.143em; line-height: 1.5; } /* 12px rel. a .leaflet-container 0.75em */
.annpop .pp-row b, .annpop .pp-v { color: #fff; font-variant-numeric: tabular-nums; }
.leaflet-popup-close-button { color: var(--bv-text-muted) !important; }
.leaflet-popup-close-button:hover { color: var(--bv-text-hi) !important; }
.leaflet-popup { animation: bv-pop-in .14s ease-out; margin-bottom: 30px; }
@keyframes bv-pop-in { from { opacity: 0; transform: translateY(4px); } }
/* conector luminoso punto→etiqueta: el rombo del "tip" de Leaflet pasa a línea fina con glow */
.leaflet-popup-tip-container { width: 2px; height: 28px; margin-left: -1px; overflow: visible; }
.leaflet-popup-tip { width: 2px; height: 28px; margin: 0; padding: 0; transform: none; border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bv-accent) 85%, #fff), color-mix(in srgb, var(--bv-accent) 30%, transparent));
  border-radius: 1px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--bv-accent) 55%, transparent), 1px 0 0 rgba(0,0,0,.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .leaflet-popup-content-wrapper { background: var(--bv-glass-solid); } }
@media (prefers-reduced-motion: reduce) { .leaflet-popup { animation: none; } }
.annpop .pp-head { display: flex; align-items: center; gap: 7px; }
.annpop .pp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.annpop .pp-tt { font-weight: 700; font-size: 1.083em; color: #eef4ff; }
.annpop .pp-cat { color: #9fb3d4; margin: 1px 0 5px 17px; }
.annpop .pp-row { margin-top: 3px; }
.annpop .pp-row b { color: #fff; }
.annpop .pp-com { color: #cfe0ff; font-style: italic; margin-top: 6px; }
.annpop .pp-hint { color: #8fa3c4; font-style: italic; margin-top: 7px; font-size: 0.917em; }
.annpop .pp-edited { margin-top: 7px; padding-top: 5px; border-top: 1px solid rgba(120,150,210,.18); font-size: 0.833em; }
.capopt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 0.857em; color: #cfe0ff; background: rgba(10,16,32,.82);
  border: 1px solid rgba(120,150,210,.30); border-radius: 9px; padding: 0 8px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#profbar .iconbtn { width: 26px; height: 24px; font-size: 1.083em; }

#reattach { display: none; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2000; }
/* en ventana desacoplada con píldora (mapa/vídeo), "Reacoplar" baja DEBAJO de la píldora para no solaparse */
body.solo-map #reattach, body.solo-video #reattach { top: 58px; }

/* modo "solo panel" (ventana desacoplada) */
body.solo header, body.solo #divider, body.solo #hdivider { display: none; }
body.solo .detach { display: none; }
body.solo #reattach { display: inline-flex; }
body.solo-map #right, body.solo-map #profile { display: none; }
body.solo-video #left, body.solo-video #profile { display: none; }
body.solo-profile #stage { display: none; }
body.solo-profile #profile { flex: 1 1 auto; height: auto; }

/* panel desacoplado desde la ventana principal (oculto aquí mientras está fuera) */
body.det-map #left, body.det-map #divider { display: none; }
body.det-video #right, body.det-video #divider { display: none; }
body.det-profile #profile, body.det-profile #hdivider { display: none; }

/* --- Panel de anotaciones --- */
#annpanel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 292px; z-index: 1500;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--bv-grad-glass);
  border: 1px solid var(--bv-border); border-radius: var(--bv-r-lg);
  box-shadow: var(--bv-shadow-2), var(--bv-edge-light);
  -webkit-backdrop-filter: blur(var(--bv-blur-lg)); backdrop-filter: blur(var(--bv-blur-lg));
}
#annpanel[hidden] { display: none; }
.annhead { display: flex; align-items: center; gap: 5px; }
#annpanel.editing .annnew, #annpanel.editing .annopacity, #annpanel.editing #kindfilters, #annpanel.editing #catfilters, #annpanel.editing #speciesbox { display: none; }   /* editando: sitio para el editor */
/* si el panel se desplaza entero (pantallas bajas), la cabecera con Deshacer/Rehacer/Cerrar se queda arriba */
#annpanel > .annhead { position: sticky; top: -12px; z-index: 2; margin: -12px -12px 0; padding: 12px 12px 6px;
  background: var(--bv-grad-glass); border-radius: var(--bv-r-lg) var(--bv-r-lg) 0 0; }
.annhead strong { font-size: 1em; }
.annhead .iconbtn { width: 27px; height: 27px; font-size: 0.929em; }
#annstatus { font-size: 0.821em; }
#annstatus:empty { display: none; }
.annnew, #catmgr { border-top: 1px solid rgba(120,150,210,.16); padding-top: 8px; }
.annrow { display: flex; gap: 6px; margin: 6px 0; }
.annrow > * { min-width: 0; }
#annpanel select, #anntitle, #catname, #anncount, #annq, #annsincedate {
  flex: 1; background: #0b1020; color: #e7ecf5; border: 1px solid #647499;
  border-radius: 8px; padding: 5px 8px; font: inherit;
}
#catcolor { width: 36px; padding: 2px; border: 1px solid #647499; border-radius: 8px; background: #0b1020; cursor: pointer; }
.annopacity { display: flex; align-items: center; gap: 8px; font-size: 0.857em; color: #aebed9; }
.annopacity input[type=range] { flex: 1; }
.catfilters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid rgba(120,150,210,.3); cursor: pointer; font-size: 0.857em; color: #cfe0ff; user-select: none; }
.chip.off { opacity: .4; text-decoration: line-through; }
.chip.kind { border-style: dashed; }
/* distintivo de disponibilidad offline de la inmersión actual (junto al selector) */
.clip-offline { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78em; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.clip-offline.on { color: #06131f; background: var(--bv-accent); box-shadow: 0 0 9px color-mix(in srgb, var(--bv-accent) 65%, transparent); }
/* datos + vídeo: verde (todo descargado) */
.clip-offline.full { color: #06210f; background: #34d17a; box-shadow: 0 0 9px rgba(52,209,122,.6); }
.clip-offline.off { color: #8ea0c0; background: rgba(120,150,210,.12); border: 1px solid rgba(120,150,210,.3); }
.clip-offline.act { cursor: pointer; }
.clip-offline.off.act { color: #cfe0ff; border-color: var(--bv-accent-border); }
.clip-offline.off.act:hover { background: color-mix(in srgb, var(--bv-accent) 16%, transparent); }
.clip-offline.busy { color: #aebed9; background: rgba(120,150,210,.12); }
.clip-offline .co-x { margin-left: 2px; border: none; background: none; color: #06131f; cursor: pointer; font: inherit; font-weight: 700; padding: 0 2px; border-radius: 50%; line-height: 1; }
.clip-offline .co-x:hover { background: rgba(0,0,0,.25); }
/* popover offline: dos capas (Datos + Vídeo) + espacio */
.offlinebox { position: relative; display: inline-flex; }
.offlinebox .clip-offline { cursor: pointer; }
.offlinebox .caret { font-size: .8em; opacity: .8; }
.offlinemenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; z-index: 9999; padding: 8px 10px; }
.offlinemenu .off-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 2px; border-bottom: 1px solid rgba(120,150,210,.14); }
.offlinemenu .off-row:last-child { border-bottom: none; }
.offlinemenu .off-h { font-weight: 600; color: #cfe0ff; min-width: 96px; font-size: .9em; }
.offlinemenu .off-ok { color: #8ee0a8; font-size: .9em; }
.offlinemenu .off-dl { background: color-mix(in srgb, var(--bv-accent) 18%, transparent); color: #eaf6ff; border: 1px solid var(--bv-accent-border); border-radius: 7px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: .85em; }
.offlinemenu .off-dl:hover { background: color-mix(in srgb, var(--bv-accent) 28%, transparent); }
.offlinemenu .off-dl[disabled] { opacity: .5; cursor: default; }
.offlinemenu .off-x { background: none; border: none; color: #8ea0c0; cursor: pointer; font: inherit; font-size: .82em; text-decoration: underline; padding: 0; }
.offlinemenu .off-x:hover { color: #ff8a8a; }
.offlinemenu .off-prog { flex: 1; min-width: 80px; height: 7px; background: rgba(120,150,210,.2); border-radius: 4px; overflow: hidden; }
.offlinemenu .off-prog .off-bar { height: 100%; background: var(--bv-accent); transition: width .2s; }
.offlinemenu .off-space { font-size: .8em; padding-top: 4px; }
/* indicador discreto de conexión (modo campo): pill en la barra superior, punto de color */
.netstatus { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font: 600 12px system-ui, sans-serif; padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  transition: opacity .4s; }
.netstatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.netstatus.off { background: rgba(38,28,12,.96); color: #f0c98a; border: 1px solid rgba(240,180,90,.4); }
.netstatus.off::before { background: #f0a93a; box-shadow: 0 0 6px #f0a93a; }
.netstatus .netfix { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.netstatus .netfix:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.netstatus.on { background: rgba(13,38,24,.96); color: #8ee0a8; border: 1px solid rgba(120,220,150,.4); }
.netstatus.on::before { background: #34d17a; box-shadow: 0 0 6px #34d17a; }
@media (prefers-reduced-motion: reduce) { .netstatus { transition: none; } }
/* chips de especie: nombre científico en cursiva + marca taxonómica (teal) para distinguirlos de las categorías */
.chip.species { border-color: var(--bv-accent-border); }
.chip.species::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--bv-accent); box-shadow: 0 0 5px var(--bv-accent); }
.chip.species i { font-style: italic; }
/* filtro de especies colapsable (escala a catálogos grandes): contador + buscador + scroll */
.speciesbox { margin: 2px 0; }
.speciesbox > summary { cursor: pointer; color: #aebed9; font-size: 0.857em; list-style-position: inside; padding: 2px 0; }
.speciesbox > summary:hover { color: var(--bv-accent); }
.speciesbox #species-search { width: 100%; margin: 6px 0; background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 0.857em; }
.species-chips { max-height: 150px; overflow-y: auto; }
.annitem.ann-off { opacity: .42; }
/* anotación creada/editada sin conexión, aún sin subir */
.annitem.ann-pending { box-shadow: inset 3px 0 0 #f0a93a; }
.pend-dot { color: #f0a93a; }
.annitem .eye { border: none; background: none; cursor: pointer; padding: 0; line-height: 0; color: #dbe6f7; display: inline-flex; align-items: center; }
.annitem .eye:hover { color: var(--bv-accent); }
.annitem .eye svg { width: 18px; height: 18px; display: block; }
.annitem.ann-off .eye { color: #9fb3da; }   /* oculto: ojo tachado, algo más tenue pero legible */
.cdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
/* la lista nunca se queda en una rendija: en portátiles (1280×800, 1366×768) el mapa es bajo y el resto del panel
   se comía todo el alto. Sitio para ~2 anotaciones y, si con eso el panel no cabe, se desplaza el panel entero */
.annlist { flex: 1; min-height: 150px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
#annpanel { overflow-y: auto; }
.annitem { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 8px;
  background: rgba(255,255,255,.03); cursor: pointer; }
.annitem:hover { background: color-mix(in srgb, var(--bv-accent) 12%, transparent); }
/* anotación seleccionada (referencia mapa ⇄ lista): barra lateral, sin desplazar el contenido */
.annitem.sel { background: color-mix(in srgb, var(--bv-accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--bv-accent); }
.annitem.flash { animation: annflash 1.3s ease-out; }
@keyframes annflash {
  0% { background: color-mix(in srgb, var(--bv-accent) 55%, transparent); }
  100% { background: color-mix(in srgb, var(--bv-accent) 16%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .annitem.flash { animation: none; } }
/* marcador seleccionado en el mapa: halo del color de acento */
.annmk-sel { filter: drop-shadow(0 0 5px var(--bv-accent)); }   /* UN glow; el anillo discontinuo (.mk-ring) da la pista de forma */
.annmk-sel .mk-ring { stroke-dasharray: 4 3; stroke-width: 2; opacity: 1; }
.annmk-sel .mk-ring2 { opacity: .95; }
.annitem .meta { flex: 1; min-width: 0; border-radius: 6px; }
.annitem .meta:focus-visible { outline: 2px solid var(--bv-accent); outline-offset: 2px; }
.annitem .meta .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annitem .meta .t { color: #8ea0c0; font-size: 0.786em; }
.annitem .del { color: #8ea0c0; cursor: pointer; border: none; background: none; font-size: 1em; }
.annitem .del:hover { color: #ff6b6b; }
.annitem .edit { color: #8ea0c0; cursor: pointer; border: none; background: none; font-size: 0.929em; }
.annitem .edit:hover { color: var(--bv-accent); }
.anneditor { display: flex; flex-direction: column; gap: 5px; padding: 7px; margin: 2px 0 6px;
  background: color-mix(in srgb, var(--bv-accent) 6%, transparent); border: 1px solid rgba(120,150,210,.25); border-radius: 8px; }
.anneditor select, .anneditor input, .anneditor textarea {
  background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 5px 7px; font: inherit; }
.anneditor textarea { resize: vertical; }
.anneditor .fxbtn { padding: 4px 10px; }
.ed-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.857em; color: #aebed9; }
.ed-times label { display: flex; align-items: center; gap: 4px; }
.ed-times input { width: 64px; }
.ed-depth-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.857em; color: #aebed9; }
.ed-depth-row label { display: flex; align-items: center; gap: 4px; }
.ed-depth-row .ed-depth { width: 72px; }
.ed-depth-row .ed-depth-src { font-style: italic; }
.ed-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.857em; color: #aebed9; }
.ed-qty-row label { display: flex; align-items: center; gap: 4px; }
.ed-qty-row .ed-count, .ed-qty-row .ed-cover { width: 64px; }
.ann-qtyrow { align-items: center; }
.ann-qtyrow #anncount { flex: 0 0 84px; width: 84px; box-sizing: border-box; }
/* Selector de especie marina (WoRMS) — editor inline y panel de nueva anotación */
.ed-species-row, .ann-sprow { display: flex; align-items: flex-start; gap: 6px; }
.ed-splabel { font-size: .857em; color: #aebed9; padding-top: 6px; white-space: nowrap; }
.species-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.species-pick .sp-row { display: flex; gap: 6px; }
.species-pick .sp-in { flex: 1; min-width: 0; background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 5px 7px; font: inherit; }
.species-pick .sp-kind { background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 5px 4px; font: inherit; font-size: .85em; }
.species-pick .sp-menu { display: flex; flex-direction: column; background: #0b1020; border: 1px solid rgba(120,150,210,.3); border-radius: 7px; overflow: hidden auto; max-height: 220px; }
.species-pick .sp-opt, .species-pick .sp-asfree { text-align: left; background: none; border: none; border-bottom: 1px solid rgba(120,150,210,.14); color: #e7ecf5; padding: 6px 8px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 1px; }
.species-pick .sp-opt:hover, .species-pick .sp-asfree:hover { background: color-mix(in srgb, var(--bv-accent) 14%, transparent); }
.species-pick .sp-meta { font-size: .78em; color: #8ea0c0; }
.species-pick .sp-empty { padding: 6px 8px; font-size: .82em; color: #8ea0c0; }
.species-pick .sp-asfree { color: #cfe0ff; }
.species-pick .sp-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: color-mix(in srgb, var(--bv-accent) 10%, transparent); border: 1px solid rgba(120,150,210,.3); border-radius: 7px; padding: 4px 8px; }
.species-pick .sp-name { color: #eaf2ff; }
.species-pick .sp-aphia { font-size: .78em; color: var(--bv-accent); text-decoration: none; }
.species-pick .sp-aphia:hover { text-decoration: underline; }
.species-pick .sp-unverified { font-size: .78em; color: #cdb98a; }
.species-pick .sp-clear { margin-left: auto; background: none; border: none; color: #8ea0c0; cursor: pointer; font-size: 1em; line-height: 1; }
.species-pick .sp-clear:hover { color: #ff6b6b; }
.species-pick .sp-note { font-size: .8em; }
.species-pick .sp-useaccepted { background: none; border: none; color: var(--bv-accent); cursor: pointer; font: inherit; padding: 0; }
.species-pick .sp-useaccepted:hover { text-decoration: underline; }
.pp-species { margin: 2px 0 4px; color: #eaf2ff; }
.ed-times button { background: color-mix(in srgb, var(--bv-accent) 14%, transparent); color: #cfe0ff; border: 1px solid rgba(120,150,210,.3);
  border-radius: 7px; padding: 3px 7px; cursor: pointer; font: inherit; }
.ed-times button:hover { color: #fff; }
.catlist { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; max-height: 130px; overflow: auto; }
.catrow { display: flex; align-items: center; gap: 7px; }
.catrow .nm { flex: 1; }
.catrow .del { color: #8ea0c0; cursor: pointer; border: none; background: none; }
.catrow .del:hover { color: #ff6b6b; }
#catmgr summary { cursor: pointer; color: #aebed9; }

/* candado: modo consulta (bloquea crear/editar/borrar) */
#annpanel.locked .annnew,
#annpanel.locked #catmgr,
#annpanel.locked .annitem .edit,
#annpanel.locked .annitem .del,
#annpanel.locked .anneditor { display: none; }
#annpanel.locked #annlock { color: #ffcf6b; border-color: rgba(255,207,107,.6); }

.anndot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55); cursor: grab; }
.anndot:active { cursor: grabbing; }

#hud {
  position: absolute; top: 58px; left: 12px; z-index: 500; width: 234px;
  padding: 14px 16px 12px;
  background: var(--bv-grad-glass);
  border: 1px solid var(--bv-hairline); border-radius: var(--bv-r-lg);
  box-shadow: var(--bv-shadow-2), var(--bv-edge-light);
  backdrop-filter: blur(var(--bv-blur-lg)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--bv-blur-lg)) saturate(1.2);
}
#hud b { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
#hud span { color: #8ea0c0; font-size: 0.786em; text-transform: uppercase; letter-spacing: .6px; }

.hud-main { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(120,150,210,.16); }
.metric { display: flex; flex-direction: column; }
.metric b { font-size: 1.429em; line-height: 1.05; font-weight: 650; }
.metric.big b { font-size: 2.429em; font-weight: 700; color: var(--bv-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--bv-accent) 45%, transparent); white-space: nowrap; }
.metric.big b.long { font-size: 2em; }
.metric span { margin-top: 3px; }

.hud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  padding: 12px 0; }
.hud-grid div { display: flex; flex-direction: column; }
.hud-grid b { font-size: 1.071em; }
.hud-grid span { margin-top: 1px; }

.hud-foot { display: flex; flex-direction: column; gap: 2px;
  padding-top: 10px; border-top: 1px solid rgba(120,150,210,.16); }
.hud-foot b { font-size: 0.893em; color: #cfe0ff; }
.hud-foot span { text-transform: none; letter-spacing: 0; font-size: 0.821em; }

#legend {
  position: absolute; bottom: 10px; left: 10px; z-index: 500;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,16,32,.82); border: 1px solid #647499; border-radius: 8px;
  padding: 5px 9px; font-size: 0.857em;  /* base #legend (hijos rel. a esta) */
}
#legendbar { border-radius: 3px; display: block; }

#profile { height: 150px; flex: 0 0 auto; min-height: 0; background: #0a0f1f; font-size: 1rem;
  display: flex; flex-direction: column; }
#profbar { display: flex; align-items: center; gap: 10px; padding: 5px 10px;
  font-size: 0.857em; flex: 0 0 auto; }  /* base #profbar (hijos rel. a esta) */
.ptitle { font-weight: 600; color: #dbe6ff; }
#psub::before { content: "· "; }   /* separador del subtítulo: se va con él cuando no cabe (móvil) */
#prof { flex: 1 1 0; width: 100%; min-height: 0; display: block; cursor: pointer; }
.seg { display: flex; border: 1px solid rgba(120,150,210,.30); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: #aebed9; border: none;
  padding: 3px 11px; font: inherit; cursor: pointer; }
.seg button.on { background: color-mix(in srgb, var(--bv-accent) 18%, transparent); color: #eaf6ff; }
.seg button:hover { color: #fff; }

/* Marcador del ROV: alto contraste */
.rovmark { width: 30px; height: 30px; position: relative; }
/* aguja de avance (curso): emana del centro, con punta de flecha, bien visible */
.rovmark .course {
  position: absolute; left: 12.5px; top: -18px; width: 5px; height: 33px; border-radius: 3px;
  background: #34e1ff;
  transform-origin: 50% 100%; transition: transform .08s linear;
  box-shadow: 0 0 6px rgba(52,225,255,.95), 0 0 2px #000; pointer-events: none;
}
.rovmark .course::after { /* punta de flecha hacia delante */
  content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid #34e1ff;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.rovmark .arrow {
  width: 0; height: 0; margin: 0 auto;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 26px solid #ff7a1a;
  transform-origin: 50% 70%; transition: transform .08s linear;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(0,0,0,.9));
}
/* Leaflet ancla su tipografía a 0.75rem (cuelga de <html>); la pasamos a em para que cuelgue de #left
   y ESCALE con la píldora de accesibilidad del 2D (popups, tooltips, zoom, atribución). 0.75em = mismo tamaño base. */
.leaflet-container { background: #04060d; font-size: 0.75em; }

/* Botones de zoom a juego con el tema */
.leaflet-control-zoom { border: none !important; box-shadow: 0 6px 18px rgba(0,0,0,.45) !important; }
.leaflet-control-zoom a {
  background: rgba(14,21,44,.85) !important; color: #dbe6ff !important;
  border: 1px solid rgba(120,150,210,.30) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  width: 32px; height: 32px; line-height: 30px; font-size: 1.714em; font-weight: 600;  /* 18px rel. a .leaflet-container 0.75em */
}
.leaflet-control-zoom a:first-child { border-radius: 10px 10px 0 0 !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 10px 10px !important; border-top: none !important; }
.leaflet-control-zoom a:hover { background: rgba(40,55,108,.95) !important; color: #fff !important; }

/* Casita (recentrar al recorrido) + indicador de nivel de zoom, junto al control de zoom */
.bv-mapctl, .bv-zoomlvl { border: none !important; background: transparent !important; box-shadow: none !important; margin-top: 6px !important; }
.bv-mapctl a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: rgba(14,21,44,.85); color: #dbe6ff; border: 1px solid rgba(120,150,210,.30);
  border-radius: 10px; font-size: 17px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bv-mapctl a:hover { background: rgba(40,55,108,.95); color: #fff; }
.bv-zoomlvl span { display: block; min-width: 36px; padding: 3px 7px; text-align: center;
  background: rgba(14,21,44,.85); color: #cfe0ff; border: 1px solid rgba(120,150,210,.30);
  border-radius: 8px; font: 600 0.93em system-ui, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bv-zoomlvl.at-limit span { color: #ffcf6b; border-color: rgba(255,207,107,.55); }

/* ── Accesibilidad base (conformidad por defecto, no opt-in del panel) ── */
:focus-visible { outline: 3px solid #ffd24d; outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* selector de paleta en la leyenda (compacto, tema oscuro) */
#legend #depthpal { background:#0b1020; color:#e7ecf5; border:1px solid #647499;
  border-radius:5px; font-size:0.917em; padding:1px 4px; margin-left:6px; }

/* selector de FUENTE de marea en el HUD (visible solo si hay >=2 fuentes) */
.tidesrcrow { display: block; font-size: 0.857em; margin-top: 3px; }   /* apilado: el nombre largo no se corta */
.tidesrcrow[hidden] { display: none; }
.tidesrcrow .tslbl { display: block; margin-bottom: 1px; }
#tidesrc { width: 100%; max-width: 100%; background:#0b1020; color:#e7ecf5; border:1px solid #647499;
  border-radius:5px; padding:1px 4px; font: inherit; }
/* cross-check: concordancia entre fuentes (confianza) */
.tidecheck { font-size: 0.786em; margin-top: 2px; }
.tidecheck[hidden] { display: none; }
.tidecheck.ok { color: #7fe0a8; }
.tidecheck.warn { color: #ffcf6b; }

/* ── Marcadores de anotación por FORMA (a11y 1.4.1) + zoom al apuntar/enfocar ── */
.annmk { background: transparent; border: 0; }
.annmk-inner { width: 26px; height: 26px; transition: transform .12s ease; transform-origin: 50% 50%; }
.annmk-inner svg { width: 100%; height: 100%; display: block; }   /* sin drop-shadow: el halo va dibujado en el SVG (gratis) */
/* hover/foco: crece + aparece el 2º anillo (cambio de FORMA, no solo brillo) */
.leaflet-marker-icon.annmk:hover .annmk-inner,
.leaflet-marker-icon.annmk:focus .annmk-inner,
.leaflet-marker-icon.annmk:focus-visible .annmk-inner { transform: scale(1.3); }
.leaflet-marker-icon.annmk:hover .mk-ring2,
.leaflet-marker-icon.annmk:focus .mk-ring2,
.leaflet-marker-icon.annmk:focus-visible .mk-ring2 { opacity: .95; }
.leaflet-marker-icon.annmk:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .annmk-inner { transition: none; } }
.anntip.leaflet-tooltip { background: #0a1020; border: 1px solid #647499; color: #e7ecf5;
  font-size: 1.143em; box-shadow: 0 2px 8px rgba(0,0,0,.5); }  /* 12px rel. a .leaflet-container 0.75em */
.anntip.leaflet-tooltip-top::before { border-top-color: #647499; }

/* gestor de categorías: preview de forma + selects compactos */
.cpreview { width: 18px; height: 18px; flex: 0 0 auto; }
.cpreview svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.catrow .cshape { font-size: 0.786em; padding: 1px 2px; max-width: 92px; }
.catrow .ccolor { width: 26px; height: 22px; padding: 1px; flex: 0 0 auto; }

/* ── Scrollbars modernas (adiós Win95) ── */
* { scrollbar-width: thin; scrollbar-color: #44567c transparent; }       /* Firefox */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #44567c; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #5b7099; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* gestor: barra "ver como daltónico" + avisos */
.catmgr-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.catmgr-bar select { font-size: 0.786em; padding: 1px 3px; }
.warn { color: #ffcf6b; font-size: 0.786em; }
.ok   { color: #7fe0a8; font-size: 0.786em; }
#catlist { transition: filter .12s ease; }

/* ── Barra de arrastre del panel de anotaciones (reparte lista / categorías) ── */
.psplit { height: 8px; flex: 0 0 auto; cursor: row-resize; border-radius: 4px;
  background: rgba(120,150,210,.14); margin: 2px 0; position: relative; }
.psplit::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 28px; height: 3px; border-radius: 2px; background: rgba(150,180,230,.55); }
.psplit:hover { background: rgba(120,150,210,.3); }
#annsplit { display: none; }                               /* solo cuando el gestor está abierto */
#annpanel:has(#catmgr[open]) #annsplit { display: block; }
#annpanel:has(#catmgr[open]) .annlist { flex: 0 0 var(--annlist-h, 150px); }
#annpanel:has(#catmgr[open]) #catmgr { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#annpanel:has(#catmgr[open]) #catmgr .catlist { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }


/* aviso de formas repetidas (solo visible cuando hay conflicto real) */
.catwarn { color: #ffcf6b; font-size: 0.786em; margin: 4px 0; }
.catwarn:empty { display: none; }


/* ── HUD colapsable (se quita de en medio) ── */
.hudx { position: absolute; top: 5px; right: 7px; width: 20px; height: 20px; padding: 0;
  background: none; border: 0; color: #8ea0c0; cursor: pointer; font-size: 1.143em; line-height: 1;
  border-radius: 6px; }
.hudx:hover { color: #fff; background: rgba(120,150,210,.2); }
.huddock { display: none; }
#hud.collapsed { width: auto; padding: 4px; }
#hud.collapsed > :not(.huddock) { display: none !important; }
#hud.collapsed .huddock { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: none; border: 0; color: #cfe0ff; cursor: pointer;
  font-size: 1.357em; border-radius: 8px; }
#hud.collapsed .huddock:hover { color: #fff; background: rgba(120,150,210,.2); }

/* tema del trigger del panel de accesibilidad (componente) — acorde al visor oscuro */
oksigenia-access-panel { --oks-bg: #0e1733; --oks-icon: #cfe0ff; --oks-h-bg: #16224a; --oks-h-icon: #fff; --oks-btn-size: 40px; }
/* el elemento-host del panel scoped no debe ocupar sitio (su UI vive en position:fixed dentro del shadow) */
oksigenia-access-panel { position: absolute; width: 0; height: 0; }

/* ── Pastilla de accesibilidad POR PANEL (host-driven; dispara el panel acotado con scope=) ──
   Una por división, arriba-centro de su zona. Forma de PASTILLA (píldora, como .fxbtn): glifo + etiqueta. */
.a11y-pill {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 650;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;                 /* píldora: extremos redondeados */
  color: #cfe0ff; background: rgba(10,16,32,.82);
  border: 1px solid rgba(120,150,210,.45);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 0.857em system-ui, sans-serif;                 /* a juego con .fxbtn */
  transition: color .12s, border-color .12s, background .12s;
}
.a11y-pill svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.a11y-pill .lbl { white-space: nowrap; }
.a11y-pill:hover { color: #fff; border-color: color-mix(in srgb, var(--bv-accent) 60%, transparent); }
/* mientras el panel está ABIERTO, la píldora queda tapada por el diálogo (no asoma pálida) */
.a11y-pill.on, .a11y-pill[aria-expanded="true"] { visibility: hidden; }
/* dentro de la barra de su panel: un control más, en el flujo (no centrada encima de los botones) */
.panelbar .a11y-pill { position: static; transform: none; box-shadow: none; }
/* color de foco temable (0.6.1) en cian del visor, por panel (hereda en el scope) */
#left, #right { --oks-focus-color: var(--bv-accent); }

/* === Permisos por rol === El viewer (solo lectura) puede VER y navegar anotaciones y
   ocultar/mostrar por categoría, pero NO añadir/editar/borrar ni exportar. (El backend ya
   rechaza las escrituras; esto es la UI.) */
body.role-unknown #annpanel .annnew, body.role-unknown #annundo, body.role-unknown #annredo, body.role-unknown #annlock,
body.role-unknown #catmgr, body.role-unknown .annitem .edit, body.role-unknown .annitem .del,   /* rol aún desconocido (sin red y sin recordar): solo ver */
body.role-viewer #exportbox,
body.role-viewer #annpanel .annnew,
body.role-viewer #annundo,
body.role-viewer #annredo,
body.role-viewer #annlock,
body.role-viewer #catmgr,
body.role-viewer .annitem .edit,
body.role-viewer .annitem .del { display: none !important; }

/* BenthosLite (entregable offline solo-ver): oculta TODA la edicion (como el rol
   viewer) + la cuenta (no hay sesion) + el export por servidor. Deja intacto ver
   video, mapa 2D, terreno 3D (y comparacion), filtros, unidades e idiomas. */
body.lite #annpanel .annnew,
body.lite #annundo,
body.lite #annredo,
body.lite #annlock,
body.lite #catmgr,
body.lite .annitem .edit,
body.lite .annitem .del,
body.lite #userbox,
body.lite #offlinebox { display: none !important; }   /* el Lite ya es todo local: nada que descargar */
/* Skip-link (WCAG 2.4.1): oculto hasta recibir foco de teclado; salta al contenido principal. */
.bv-skip { position: fixed; left: 8px; top: -60px; z-index: 4000; background: #0b1020; color: #e7ecf5;
  padding: 10px 16px; border: 2px solid var(--bv-accent, #5ee0ff); border-radius: 8px; font: inherit;
  text-decoration: none; transition: top .15s ease; }
.bv-skip:focus { top: 8px; }
#bvmain:focus { outline: none; }   /* destino del skip-link: foco programático, sin contorno de página */
/* Placeholder con contraste conocido (~7:1 sobre el fondo oscuro); opacity:1 evita el atenuado del navegador (1.4.3). */
::placeholder { color: #8ea0c0; opacity: 1; }
/* Export en Lite: oculto por defecto; visible solo si el paquete lo permite (Óscar). */
body.lite:not(.canexport) #exportbox { display: none !important; }
/* En Lite solo GeoJSON funciona sin conexión (el resto necesita servidor): ocultarlos. */
body.lite #exp-gpkg, body.lite #exp-csv, body.lite #exp-kml, body.lite #exp-shp,
body.lite #exp-iso, body.lite #exp-dwca, body.lite #exp-netcdf, body.lite #exportmenu .exp-crs { display: none !important; }

/* ===================== RESPONSIVE / TABLET ===================== */
header { flex-wrap: wrap; }      /* NUNCA desbordar/recortar: si no cabe, envuelve (a cualquier ancho) */
.fxbtn { white-space: nowrap; }  /* el texto del botón no se parte ("Terreno 3D" entero) */

/* Cabecera en una fila en portátiles: el subtítulo de la instalación (largo, la partía en dos) se recorta con «…»
   (entero en el title) y hasta 1500 px no se muestra; en 1280-1400 sobra además la palabra «unidades», y a 1280 el
   nombre de la cuenta (queda el avatar). */
#brand-subtitle { flex: 0 1 auto; min-width: 0; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1500px) { #brand-subtitle { display: none; } }
@media (max-width: 1400px) { header [data-i18n="viewer.units"] { display: none; } }
@media (max-width: 1320px) { #user-name { display: none; } }
/* Tablet (estrecho O pantalla táctil): botonera compacta para que TODO entre bien. */
@media (max-width: 1200px), (pointer: coarse) {
  header { gap: 8px 10px; padding: 8px 12px; margin: 6px 8px 2px; }   /* dock: menos aire en pantalla estrecha */
  #brand-name { display: none; }      /* deja solo el icono (B) */
  #brand-subtitle { display: none; }  /* "El Hierro — circalitoral": redundante con el selector de inmersión */
  #open3dsplit { display: none; }     /* "Comparar 3D" (hasta 4 vistas): función de escritorio, fuera en tablet */
  #user-name { display: none; }       /* botón de cuenta: solo avatar + ▾ (gana sitio; estándar en estrecho) */
  header [data-i18n="viewer.units"] { display: none; }   /* la palabra "unidades": el desplegable ya se explica */
  header .grow { display: none; }     /* sin el espaciador flex:1: los controles se empaquetan a la izquierda (no deja hueco que fuerce saltos) */
  .fxbtn, header select, .chk { font-size: .92rem; }
  .detach { display: none; }          /* "Desacoplar" abre ventana aparte: no aplica en tablet */
  .a11y-pill .lbl { display: none; }  /* pastilla de accesibilidad SOLO ICONO: centrada y pequeña, no pisa las barras de panel a ninguna resolución */
}
@media (max-width: 560px) {
  header { padding: 8px 10px; gap: 6px 8px; }
  header #brand-logo { height: 30px; }
  .fxbtn { padding: 6px 9px; }
  .usermenu, .offlinemenu, #exportmenu { max-width: 92vw; }   /* desplegables no se salen */
  /* Perfil: «Perfil» y el selector tiempo/distancia en una fila, entero; el subtítulo y el resumen sobran aquí */
  #profbar #psub, #profbar #pinfo { display: none; }
  #profbar [data-i18n="viewer.diveProfile"] { white-space: nowrap; }
  #xmode { flex: 0 0 auto; margin-left: auto; }
  /* Anotaciones: el panel ocupa todo el mapa (que al abrirlo crece, ver .annsheet) */
  #annpanel { top: 8px; left: 8px; right: 8px; bottom: 8px; width: auto; }
  /* dibujando un área, el panel se queda en su cabecera, el aviso y «+ Área» (que cancela), y deja ver el mapa */
  body.drawing-area #annpanel { bottom: auto; }
  body.drawing-area #annpanel > :not(.annhead):not(#annstatus):not(.annnew),
  body.drawing-area #annpanel .annnew > :not(:last-child),
  body.drawing-area #annpanel .annnew > :last-child > :not(#annarea) { display: none !important; }
}

/* Escenario: en vertical/estrecho, mapa y vídeo se APILAN (cada uno a todo el ancho). */
@media (max-width: 820px) {
  #stage, #stage.swapped { flex-direction: column; }
  #divider {
    flex: 0 0 12px; cursor: row-resize;
    background: linear-gradient(90deg, #1a2547, #0e1530);
    border: 0;
    border-top: 1px solid rgba(120,150,210,.18);
    border-bottom: 1px solid rgba(120,150,210,.18);
  }
  #divider::after {                                   /* el tirador pasa a horizontal */
    width: 34px; height: 2px;
    box-shadow: 0 -3px 0 rgba(150,180,230,.55), 0 3px 0 rgba(150,180,230,.55);
  }
  /* el mapa se lleva algo más de la mitad (es la herramienta del barco); el tirador lo sigue ajustando */
  #left { flex: 1.3 1 0; }
  /* HUD abierto: nunca más alto que el mapa ni encima de la leyenda (desplaza por dentro) */
  #hud:not(.collapsed) { max-height: calc(100% - 58px - 52px); overflow-y: auto; }
  /* panel de anotaciones abierto: el mapa crece y el perfil se aparta; el vídeo sigue a la vista (tramos) */
  body.annsheet #profile, body.annsheet #hdivider { display: none; }
  body.annsheet #left { flex: 2.6 1 0 !important; }
}

/* Pantallas táctiles: tiradores con más área de agarre y sin scroll accidental al arrastrar,
   y ningún control por debajo de ~40 px de toque (WCAG 2.5.8). */
@media (pointer: coarse) {
  #divider, #hdivider { flex-basis: 16px; touch-action: none; }
  #annsplit { touch-action: none; min-height: 16px; }
  .annitem .eye, .annitem .edit, .annitem .del, .catrow .del, .catlist .del { min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; }
  .annitem { padding-top: 2px; padding-bottom: 2px; }
  .iconbtn, #profbar .iconbtn, .annhead .iconbtn { min-width: 40px; min-height: 40px; }
  .catrow .ccolor { width: 40px; height: 36px; }
  .leaflet-control-zoom a, .leaflet-touch .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 38px; }
  #legend #depthpal { min-height: 36px; }
  html.bv-native #capdata, #capdata { width: 22px; height: 22px; }
  /* sin mover nada: el área de toque crece por fuera del dibujo */
  .hudx::after { content: ""; position: absolute; inset: -10px; }
  .annmk::after { content: ""; position: absolute; inset: -7px; }
  .annhelp, .menuhelp .annhelp { min-height: 36px; }
}

/* Ayuda con voz: botón «Cómo funciona» en la cabecera del panel y ventana modal con la pieza (ayuda/tut-*.html) */
.annhelprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
/* «Cómo funciona» al pie de un desplegable (Exportar, Offline) */
.menuhelp { display: flex; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid rgba(120,150,210,.22); }
.offlinemenu .menuhelp { margin-top: 0; padding: 8px 2px 2px; border-top: 0; }   /* la fila de encima ya lleva su raya */
#exportmenu .menuhelp .annhelp { flex-direction: row; align-items: center; gap: 6px; }   /* los formatos van en columna; la pastilla no */
.menuhelp .annhelp { display: inline-flex; width: auto; padding: 3px 10px 3px 8px; border-radius: 999px; color: var(--bv-text);
  border: 1px solid color-mix(in srgb, var(--bv-accent) 55%, transparent); background: color-mix(in srgb, var(--bv-accent) 10%, transparent); font: 600 .8em/1.25 system-ui, sans-serif; }
.menuhelp .annhelp:hover, .menuhelp .annhelp:focus-visible { background: color-mix(in srgb, var(--bv-accent) 22%, transparent); border-color: var(--bv-accent); color: var(--bv-text); }
.annhelp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bv-accent) 55%, transparent); background: color-mix(in srgb, var(--bv-accent) 10%, transparent);
  color: var(--bv-text); font: 600 .8em/1.25 system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.annhelp:hover, .annhelp:focus-visible { background: color-mix(in srgb, var(--bv-accent) 22%, transparent); border-color: var(--bv-accent); outline: none; }
.annhelp .bv-icon { --bv-icon-size: 12px; color: var(--bv-accent); }
.helpdlg { width: min(1180px, 94vw); padding: 0; border: 1px solid rgba(120,150,210,.35); border-radius: 12px; background: #070b16;
  box-shadow: 0 30px 90px rgba(0,0,0,.7); overflow: hidden; }
.helpdlg::backdrop { background: rgba(3,6,14,.72); backdrop-filter: blur(4px); }
.helpdlg iframe { display: block; width: 100%; aspect-ratio: 1280 / 864; max-height: 90vh; border: 0; }
.helpdlg .helpx { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(7,11,22,.8); }

/* Resumen de la inmersión (diálogo con dos tablas: por categoría y por especie) */
.sumdlg { width: min(980px, 94vw); max-height: 88vh; padding: 0; border: 1px solid var(--bv-border); border-radius: 12px;
  background: var(--bv-glass-solid); color: var(--bv-text); display: none; flex-direction: column; }
.sumdlg[open] { display: flex; }
.sumdlg::backdrop { background: rgba(3,6,14,.72); backdrop-filter: blur(4px); }
.sum-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 10px; border-bottom: 1px solid var(--bv-hairline); }
.sum-head > div { flex: 1; min-width: 0; }
.sum-head h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--bv-text-hi); }
.sum-sub { font-size: .85rem; }
.sum-body { overflow: auto; padding: 6px 18px 12px; }
.sum-body h3 { margin: 14px 0 6px; font-size: .95rem; color: var(--bv-accent); }
.sum-note { margin: 10px 0 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--bv-accent) 14%, transparent); font-size: .85rem; }
.sum-empty { margin: 18px 0; }
.sum-scroll { overflow-x: auto; }
.sum-t { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.sum-t th, .sum-t td { padding: 5px 8px; border-bottom: 1px solid var(--bv-hairline); text-align: left; white-space: nowrap; }
.sum-t thead th { font-weight: 600; color: var(--bv-text-muted); font-size: .78rem; }
.sum-t tbody th { font-weight: normal; }
.sum-t .n { text-align: right; }
.sum-t .cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.sum-t tfoot th, .sum-t tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--bv-border-strong); }
.sum-foot { margin: 8px 0 0; font-size: .78rem; }
.sum-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px 14px; border-top: 1px solid var(--bv-hairline); }

/* Buscar y filtrar la lista de anotaciones */
.annfind { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
#annpanel .annfind #annq { flex: none; width: 100%; box-sizing: border-box; }
.annfind-row { display: flex; gap: 6px; }
.annfind-more .annfind-row { flex-direction: column; margin-top: 6px; }
#annpanel .annfind-row select, #annpanel .annfind-row input { flex: none; width: 100%; box-sizing: border-box; font-size: .9em; }
.annfind-row [hidden] { display: none; }
.annfindinfo:empty { display: none; }
.annfindinfo { font-size: .85em; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--bv-accent); text-decoration: underline; cursor: pointer; font: inherit; }
.linkbtn:focus-visible { outline: 2px solid var(--bv-focus); outline-offset: 2px; }

/* Validación de anotaciones: etiqueta de estado (lista, ficha, 3D), contador/filtro y acciones de quien valida */
.rvb { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .78em; font-weight: 600;
  line-height: 1.6; vertical-align: 1px; border: 1px solid currentColor; white-space: nowrap; }
.rv-pending { color: #c9b27a; }
.rv-validated { color: #6fdc9a; }
.rv-rejected { color: #ff8f8f; }
.annrv { align-items: center; }
.rvchip.on { background: color-mix(in srgb, currentColor 22%, transparent); }
.rvbatch { font-size: .85em; }
.pp-rv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-rv .fxbtn { font-size: .85em; padding: 3px 10px; }
.pp-rvnote { display: flex; gap: 6px; width: 100%; }
.pp-rvnote[hidden] { display: none; }
.pp-rvnote input { flex: 1; min-width: 0; background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: .85em; }
.rv-note { color: #ffc2c2; }
.sum-rv { margin: 8px 0 0; font-size: .85rem; color: var(--bv-text-soft); }
.exp-opt { display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; font-size: .82em; color: var(--bv-text-soft); cursor: pointer; }
.exp-opt[hidden] { display: none; }
.exp-opt input { width: auto; margin: 0; }

/* Datos de campaña de la inmersión: una línea discreta en el panel de información + diálogo */
.hud-dive { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--bv-hairline); font-size: .82em; }
.hud-dive[hidden] { display: none; }
.hud-dive .hd-txt { color: var(--bv-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dive-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; padding: 10px 0; }
.dive-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--bv-text-soft); }
.dive-form .dv-wide { grid-column: 1 / -1; }
.dive-form input, .dive-form select, .dive-form textarea { background: #0b1020; color: #e7ecf5; border: 1px solid #647499;
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .95rem; box-sizing: border-box; width: 100%; }
.dive-form small { font-size: .78rem; }
.dive-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.dive-dl dt { color: var(--bv-text-muted); }
.dive-dl dd { margin: 0; white-space: pre-wrap; }
.divedlg { width: min(720px, 94vw); }
#hud .hud-dive .hd-txt { font-size: inherit; text-transform: none; letter-spacing: normal; color: var(--bv-text-soft); }

/* Miniatura del fotograma: en la ficha del mapa, en el editor y como vista previa junto a la lista */
.annpop .pp-thumb { display: block; width: 240px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: contain; margin: 6px 0 4px; border-radius: 6px; background: #000; }   /* tamaño fijo: la ficha se coloca antes de que llegue la imagen */
.ed-thumb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.ed-thumb-row .ed-thumbimg { width: 120px; border-radius: 5px; background: #000; }
.ed-thumb-row .fxbtn { font-size: .85em; }
.annthumbtip { position: fixed; z-index: 1300; width: 260px; border-radius: 8px; border: 1px solid var(--bv-border);
  box-shadow: var(--bv-shadow-2); background: #000; pointer-events: none; }
.annthumbtip[hidden] { display: none; }

/* Categorías: código de clasificación discreto y su detalle (código, esquema, categoría superior) al pulsar el nombre */
.catrow .nm.linkbtn { color: inherit; text-decoration: none; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catrow .nm.linkbtn:hover { text-decoration: underline; }
.catrow .ccode, .pp-code { font-size: .8em; color: var(--bv-text-muted); }
.catdet { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 2px 0 8px 22px; font-size: .85em; color: #aebed9; }
.catdet label { display: flex; flex-direction: column; gap: 3px; }
.catdet input, .catdet select { background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 4px 7px; font: inherit; width: 130px; }

/* Importar anotaciones y vocabulario (diálogo: comprobar, informe por filas, vista previa) */
.impdlg { width: min(900px, 94vw); }
.imp-hint { font-size: .88rem; color: var(--bv-text-soft); margin: 10px 0; }
.imp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 8px 0 12px; font-size: .9rem; }
.imp-form select { background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 7px; padding: 4px 7px; font: inherit; }
.imp-report p { margin: 6px 0; font-size: .9rem; }
.imp-sum { font-size: 1rem !important; }
.imp-cols { line-height: 1.8; }
.imp-col { display: inline-block; padding: 0 8px; margin: 0 4px 2px 0; border-radius: 999px; border: 1px solid var(--bv-hairline); font-size: .82rem; }
.imp-warn { color: #ffc98a; }
.imp-sec { margin: 8px 0; }
.imp-sec summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.imp-list { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; max-height: 220px; overflow: auto; }
.imp-list li { margin: 2px 0; }
.imp-prev { margin-top: 8px; }
.catimport { display: block; margin: 8px 0 2px; font-size: .85em; }
.imp-lists { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--bv-hairline); border-radius: 10px; font-size: .88rem; }
.imp-listrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; }
.imp-listrow > span { flex: 1 1 260px; }
.imp-listrow .fxbtn { font-size: .85em; padding: 3px 12px; }
.imp-listhint { margin: 6px 0 0; font-size: .82rem; }

/* Vista de conjunto: el mapa ocupa todo; vídeo, perfil, panel de datos y la inmersión actual se apartan */
body.ov-on #right, body.ov-on #divider, body.ov-on #profile, body.ov-on #hdivider { display: none !important; }
body.ov-on #left { flex: 1 1 0 !important; }
body.ov-on #hud, body.ov-on #annpanel, body.ov-on #legend { display: none !important; }
body.ov-on #map .leaflet-overlay-pane, body.ov-on #map .leaflet-marker-pane, body.ov-on #map .leaflet-shadow-pane { visibility: hidden; }
#ovpanel { position: absolute; top: 58px; left: 10px; bottom: 10px; width: min(380px, calc(100% - 80px)); z-index: 800;   /* a la izquierda: el zoom y las capas quedan libres */
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--bv-r-lg);
  background: var(--bv-glass-solid); border: 1px solid var(--bv-border); box-shadow: var(--bv-shadow-2); color: var(--bv-text); overflow: hidden; }
#ovpanel[hidden] { display: none; }
#ovpanel input, #ovpanel select { background: #0b1020; color: #e7ecf5; border: 1px solid #647499; border-radius: 8px; padding: 5px 8px; font: inherit; box-sizing: border-box; }
#ovpanel #ov-q { width: 100%; }
.ov-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .85em; color: #aebed9; }
.ov-filters label { display: flex; align-items: center; gap: 4px; }
.ov-filters input[type=date] { width: 140px; }
.ov-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ov-dive { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 9px; border-radius: 8px; background: rgba(120,150,210,.08); }
.ov-dive .ov-zoom { text-align: left; color: var(--bv-text-hi); text-decoration: none; font-weight: 600; }
.ov-dive .ov-zoom:hover { text-decoration: underline; }
.ov-dive .muted { grid-column: 1; font-size: .82em; }
.ov-dive .ov-open { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85em; padding: 3px 12px; }
#ovbtn.on { color: var(--bv-accent); border-color: var(--bv-accent); }

/* el selector de inmersiones no debe partir la cabecera en dos filas (el título lleva campaña y estación) */
#clip { max-width: clamp(170px, calc(100vw - 1090px), 380px); text-overflow: ellipsis; }   /* lo que deja libre el resto de la cabecera */