* { box-sizing: border-box; }
/* Color de acento de UI (cian por defecto), temable por instalación vía config.js
   (window.BENTOS.brand.accent). NO afecta a las paletas de DATO (cividis, Okabe-Ito,
   GnBu): esas son del dato, no de la marca. Los translúcidos usan color-mix sobre esta var. */
:root { --bv-accent: #5ee0ff; }
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: #0b1020; color: #e7ecf5;
}
header, footer {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; color: #eef3fb;
  background: linear-gradient(180deg, #16203f, #0e1530);
}
header { border-bottom: 1px solid rgba(120,150,210,.30); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
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: #0b1020; color: #e7ecf5; border: 1px solid #647499;
  border-radius: 6px; padding: 4px 8px;
}
/* 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; }
#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: rgba(10,16,32,.82); color: #aebed9;
  border: 1px solid rgba(120,150,210,.30); border-radius: 10px;
  padding: 6px 11px; font: 600 0.857em system-ui, sans-serif;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: all .12s;
}
.fxbtn:hover { color: #fff; border-color: rgba(120,150,210,.55); }
.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: rgba(14,23,51,.97); border: 1px solid rgba(120,150,210,.4); border-radius: 12px;
  padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.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: rgba(10,16,32,.82); color: #aebed9;
  border: 1px solid rgba(120,150,210,.30); border-radius: 9px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.iconbtn:hover { color: #fff; border-color: color-mix(in srgb, var(--bv-accent) 60%, transparent); }
/* Popup del mapa con el estilo del visor (no la caja blanca por defecto de Leaflet) */
.leaflet-popup-content-wrapper { background: rgba(10,16,32,.93); color: #dbe6ff;
  border: 1px solid rgba(120,150,210,.35); border-radius: 11px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.leaflet-popup-content { margin: 9px 13px; font-size: 1.143em; line-height: 1.45; } /* 12px rel. a .leaflet-container 0.75em (hijos en em rel. a esta) */
.leaflet-popup-tip { background: rgba(10,16,32,.93); border: 1px solid rgba(120,150,210,.35); }
.leaflet-popup-close-button { color: #aebed9 !important; }
.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: linear-gradient(160deg, rgba(18,26,51,.95), rgba(9,13,28,.93));
  border: 1px solid rgba(120,150,210,.3); border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#annpanel[hidden] { display: none; }
.annhead { display: flex; align-items: center; gap: 5px; }
.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 {
  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: rgba(94,224,255,.45); }
.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 rgba(94,224,255,.4); 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.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: rgba(94,224,255,.45); }
.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; }
.annlist { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.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)) drop-shadow(0 0 9px var(--bv-accent)); }
.annitem .meta { flex: 1; min-width: 0; }
.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; }
/* 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: linear-gradient(160deg, rgba(18,26,51,.86), rgba(9,13,28,.80));
  border: 1px solid rgba(120,150,210,.28); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) 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); }
.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; }
#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: 18px; height: 18px; transition: transform .12s ease; transform-origin: 50% 50%; }
.annmk-inner svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.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.45); }
@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; }
/* 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-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 { display: none !important; }
/* 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 { 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) */

/* Tablet (estrecho O pantalla táctil): botonera compacta para que TODO entre bien. */
@media (max-width: 1200px), (pointer: coarse) {
  header { gap: 8px 10px; padding: 9px 12px; }
  #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 */
}

/* 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);
  }
}

/* Pantallas táctiles: tiradores con más área de agarre y sin scroll accidental al arrastrar. */
@media (pointer: coarse) {
  #divider, #hdivider { flex-basis: 16px; touch-action: none; }
}