:root{
  --bg:#175075; --card:#000; --text:#111; --muted:#667085; --line:#e8eaef;
  --topbar-h:56px; --subbar-h:44px;
  --bar-bg:#184f6a; --bar-fg:#fff;
  --subbar-bg:#216FA2;
  --cols:4;
  --app-header-h: calc(var(--topbar-h) + var(--subbar-h));
}
*{ box-sizing:border-box }
body{
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; background:var(--bg); color:var(--text);
  padding-top: var(--app-header-h);
}

/* Topbar / Subbar */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:0 24px; background:var(--bar-bg); color:var(--bar-fg);
  z-index:1000; box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.topbar > div{ flex:1 1 0; min-width:0 }
.tb-left{text-align:left} .tb-center{text-align:center} .tb-right{text-align:right}
.tb-name,.tb-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tb-sub{ margin-top:4px; font-weight:600; opacity:.98; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.subbar{
  position:fixed; top:var(--topbar-h); left:0; right:0; height:var(--subbar-h);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background:var(--subbar-bg); color:#fff; z-index:1000;
  box-shadow:0 2px 4px rgba(0,0,0,.08) inset;
}
.subbar .sb-content{
  flex:1 1 auto; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:flex; align-items:center; gap:12px; justify-content:space-between;
}

/* Utilidades */
.hidden{ display:none !important }
.container{ padding:0 12px 24px }

/* Grid mosaico */
.grid{ display:grid; gap:8px; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); }
@media (max-width:1500px){ :root{ --cols:3 } }
@media (max-width:1080px){ :root{ --cols:2 } }
@media (max-width:680px ){ :root{ --cols:1 } }

.tile{ position:relative; background:var(--card); overflow:hidden; }
.tile video{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  -webkit-media-controls:none !important;
}
video::-webkit-media-controls, video::-webkit-media-controls-enclosure,
video::-moz-media-controls, video::-ms-media-controls{ display:none !important; }

.title-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:.35rem .45rem;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  background:rgba(0,0,0,.35); z-index:3; pointer-events:auto;
}
.cam-title{ font-weight:600; color:#fff; }
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; background:#C4D8DF; color:#1A5074;
  border:1px solid rgba(0,0,0,.2); border-radius:0; cursor:pointer;
}
.btn-icon:hover{ background:#B9CFD8; }
.btn-ghost{
  border:1px solid rgba(255,255,255,.25); background:#1a5f8e; color:#fff;
  border-radius:8px; padding:8px 12px; cursor:pointer;
}
button,.btn,a.btn,.btn-apply,.btn-back,.sb-content .btn{
  opacity:1 !important; visibility:visible !important; color:#1A5074 !important;
  background:#C4D8DF !important; border:1px solid rgba(0,0,0,.15) !important; mix-blend-mode:normal !important;
}
button:hover,.btn:hover{ background:#B9CFD8 !important; color:#1A5074 !important; }
.err{ position:absolute; left:10px; top:10px; color:#ffb4b4; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.6) }

/* Grabaciones */
.grid-rec{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.card{ background:#0f3e61; color:#eef6ff; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.thumb{ width:100%; aspect-ratio:16/9; background:#000; display:block; object-fit:cover; }
.meta{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; border-top:1px solid rgba(255,255,255,.12); }
.row{ display:flex; justify-content:space-between; gap:10px; color:rgba(255,255,255,.9); font-size:13px; }
.name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty{ color:#e1efff; padding:12px; }

.viewer{ margin-top:18px; }
.viewer video{ width:100%;   background:#000; border-radius:10px; }

/* Área de grabaciones (scroller) + toolbar sticky */
#viewRecs{ height:calc(100vh - var(--app-header-h)); overflow-y:auto; position:relative; }
#viewRecs .toolbar{
  position:sticky; top:0; z-index:100; background:#124e65; color:#fff;
  padding:8px 12px; box-shadow:0 2px 6px rgba(0,0,0,.25); border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(120%) blur(2px);
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap; white-space:nowrap;
}

/* Miniaturas ON/OFF */
.no-thumbs .card .thumb, .no-thumbs .card video.thumb{ display:none !important; }
.no-thumbs .card{ min-height:auto; padding-top:12px; }
.no-thumbs .card .name{ font-weight:600; }

/* Botón volver arriba + spinner */
.back-to-top{
  position:fixed; right:16px; bottom:16px; width:46px; height:46px; border-radius:999px;
  background:#C4D8DF; color:#0b2734; border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.35);
  font-size:20px; line-height:42px; text-align:center; cursor:pointer; opacity:.98;
  transition:transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
.back-to-top:hover{ transform:translateY(-2px); opacity:1; box-shadow:0 8px 20px rgba(0,0,0,.4); }
#viewRecs.loading{ cursor:progress !important; }
#viewRecs.loading::after{
  content:""; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%; border:10px solid rgba(255,255,255,.25);
  border-top-color:#C4D8DF; animation:spin .9s linear infinite; z-index:99999;
  box-shadow:0 2px 8px rgba(0,0,0,.35); background:rgba(0,0,0,.18); pointer-events:none;
}
#viewRecs.loading::before{
  content:"Cargando…"; position:fixed; top:calc(50% + 86px); left:50%; transform:translateX(-50%);
  z-index:99999; padding:0 6px; line-height:1; background:transparent; font-size:18px; font-weight:700;
  color:#C4D8DF; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none;
}
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Modal REC */
#recViewer{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding:24px; z-index:10000; }
#recViewer:not(.hidden){ display:flex; }
#recViewer .dialog{ width:min(1600px, 98vw); max-height:96vh; display:flex; flex-direction:column; gap:8px; }
#recPlayer{ width:100%; max-height:calc(96vh - 64px); background:#000; border-radius:12px; outline:none; object-fit:contain; }
#btnCloseRec{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.45); color:#fff;
  font-size:22px; line-height:38px; cursor:pointer;
}
#btnCloseRec:hover{ filter:brightness(1.15); }
body.modal-open{ overflow:hidden; }

/* Modal LIVE */
#liveViewer{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding:24px; z-index:10050; }
#liveViewer:not(.hidden){ display:flex; }
#liveViewer .dialog{ width:min(1600px, 98vw); max-height:96vh; display:flex; flex-direction:column; gap:8px; }
#liveZoomWrap{ width:100%; max-height:calc(96vh - 64px); overflow:hidden; border-radius:12px; background:#000; cursor:zoom-in; position:relative; }
#livePlayer{ width:100%; max-height:calc(96vh - 64px); background:#000; border-radius:12px; object-fit:contain; transform-origin:center; }
#liveZoomWrap.zoomed{ cursor:grab; }
#liveZoomWrap.dragging{ cursor:grabbing; }
.live-toolbar{ margin-top:8px; display:flex; gap:8px; justify-content:flex-end; }

/* Licencia overlay */
#licOverlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:100000; }
#licOverlay.hidden{ display:none; }
.lic-card{ width:min(720px, 92vw); padding:20px 24px; border-radius:12px; background:rgba(18,78,101,.92); color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.45); text-align:center; }
.lic-card h2{ margin:0 0 8px; font-size:22px; letter-spacing:.5px; }
.lic-card p{ margin:0; opacity:.95; }

/* Mosaico específico */
#mosaicGrid{
  --tile-min:320px; display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--tile-min),1fr)); gap:10px;
}
#mosaicGrid .tile{ aspect-ratio:16/9; box-shadow:0 2px 10px rgba(0,0,0,.12); background:#000; }
#mosaicGrid .tile .tile-close{
  position:absolute; top:6px; right:6px; width:28px; height:28px; display:grid; place-items:center; font-weight:700;
  color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.6); cursor:pointer; user-select:none; border-radius:0; z-index:5;
}
#mosaicGrid .tile .tile-close:hover{ background:rgba(0,0,0,.8); }
#mosaicGrid .tile.is-hidden{ display:none; }
#mosaicGrid.size-xs{ --tile-min:220px; }
#mosaicGrid.size-sm{ --tile-min:280px; }
#mosaicGrid.size-md{ --tile-min:320px; }
#mosaicGrid.size-lg{ --tile-min:420px; }

/* Controles de tamaño */
.size-controls{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px; background:rgba(196,216,223,.35); border:1px solid #1A5074; }
.size-controls .label{ font-size:12px; opacity:.85; margin-right:4px; }
.btn-size{ padding:6px 10px; border:1px solid #1A5074; background:#1A5074; color:#fff; font-weight:600; cursor:pointer; border-radius:0; }
.btn-size:hover,.btn-size.active{ background:#C4D8DF; color:#1A5074; }

/* Métricas LIVE */
.live-metrics{
  position:absolute; top:8px; left:8px; z-index:10; background:rgba(0,0,0,.55); color:#fff;
  font:600 12px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; padding:6px 8px; border:1px solid rgba(255,255,255,.35);
  white-space:nowrap; pointer-events:none;
}
.live-metrics .m-ok{ color:#b7f397; }
.live-metrics .m-warn{ color:#ffd27a; }
.live-metrics .m-bad{ color:#ff9aa2; }
.live-metrics b{ color:#fff; }

/* Ajustes visuales mosaico */
#mosaicGrid .tile .title-overlay{ background:transparent !important; padding:6px 8px; }
#mosaicGrid .tile .cam-title{
  background:rgba(0,0,0,.55); backdrop-filter:blur(1px); color:#fff; padding:2px 6px; border-radius:4px;
}
#mosaicGrid .tile .title-overlay .btn-icon{
  position:relative; z-index:2; background:#C4D8DF; border:1px solid rgba(0,0,0,.2);
}

/* Grabaciones: botones en tarjeta */
.grid-rec .card .meta .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.grid-rec .card .meta .name{ flex:1 1 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.grid-rec .card .meta .row a{
  margin-left:0 !important; appearance:none; display:inline-block; padding:6px 12px; background:#1a5f8e; color:#fff !important;
  text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:8px; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .05s ease, filter .15s ease;
}
.grid-rec .card .meta .row a:hover{ filter:brightness(1.08); }
.grid-rec .card .meta .row a:active{ transform:scale(.98); }
.grid-rec .card .meta .row a:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(127,201,255,.35); }

/* Responsivo filtros */
@media (max-width:840px){
  #viewRecs .toolbar{ flex-wrap:wrap; }
  #viewRecs .toolbar .filters{ flex-wrap:wrap; margin-left:0; }
}

/* Subbar en modo “solo logo” */
.subbar.only-logo .size-controls{ display:none !important; }
.subbar.only-logo .sb-content{ justify-content:flex-start; gap:0; }
.subbar.only-logo .sb-logo{ margin-right:8px; }

/* Inputs de filtros (date/time/text) */
#viewRecs .toolbar .filters input[type="date"],
#viewRecs .toolbar .filters input[type="time"],
#viewRecs .toolbar .filters input[type="text"]{
  height:32px; padding:6px 8px; border:1px solid rgba(255,255,255,.25);
  border-radius:8px; color:#fff; background:#0f3e61;
}
/* Claros para icono negro */
#viewRecs .toolbar .filters input[type="date"],
#viewRecs .toolbar .filters input[type="time"]{
  background:#e8eef5; color:#111; border:1px solid #c8d2dc;
}

/* Fix Firefox / indicadores visibles en todos */
#fFrom,#fTo{
  appearance:auto !important; -moz-appearance:auto !important; -webkit-appearance:auto !important;
  padding-right:8px !important; height:32px; line-height:32px;
}
#fFrom::-webkit-calendar-picker-indicator,
#fTo::-webkit-calendar-picker-indicator{ display:inline-block !important; opacity:1 !important; pointer-events:auto !important; }
#fFrom::-moz-calendar-picker-indicator,
#fTo::-moz-calendar-picker-indicator{ display:inline-block !important; }
#fFrom::-moz-number-spin-box, #fTo::-moz-number-spin-box{ display:inline-block !important; }

/* Date: estilo + evitar vacíos por CSS (el valor lo controlas en JS) */
#viewRecs .toolbar .filters input[type="date"]{
  appearance:auto; -webkit-appearance:auto; background:#e8eef5; color:#111;
  border:1px solid #c8d2dc; border-radius:8px; height:32px; padding:6px 8px;
}

/* Salud (Health Widget) */
.health-widget{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:6px; cursor:default; user-select:none; background:rgba(0,0,0,.08);
}
.health-widget .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(0,0,0,.12) inset; }
.health-widget .txt{ font:12px/1 system-ui, Segoe UI, Arial; opacity:.95; }
.health-widget .popover{
  position:absolute; top:100%; right:0; margin-top:6px; min-width:240px;
  background:#0d1117; color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:8px;
  padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.3); display:none; z-index:50;
}
.health-widget:hover .popover{ display:block; }
.health-widget .popover .row{
  display:flex; justify-content:space-between; gap:12px; padding:4px 0; font:12px/1.2 system-ui, Segoe UI, Arial;
}
.health-widget .popover hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:6px 0; }
.health-widget .popover .row.ok b{ color:#22c55e }
.health-widget .popover .row.deg b{ color:#eab308 }
.health-widget .popover .row.ko b{ color:#ef4444 }
.dot.green{ background:#22c55e } .dot.amber{ background:#eab308 } .dot.red{ background:#ef4444 }
.health-widget .popover .list{ max-height:240px; overflow:auto; margin-top:4px; }
.health-widget .popover .cam-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px; border-radius:6px; cursor:pointer;
}
.health-widget .popover .cam-row:hover{ background:rgba(255,255,255,.06); }
.health-widget .popover .cam-name{ font:12px/1.2 system-ui,Segoe UI,Arial; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.health-widget .popover .badge{ font:11px/1 system-ui,Segoe UI,Arial; padding:2px 6px; border-radius:999px; }
.health-widget .popover .badge.deg{ background:#3a2f00; color:#facc15; }
.health-widget .popover .badge.ko { background:#3a0d0d; color:#f87171; }
.tile.flash{ outline:3px solid #eab308; transition:outline-color .8s ease; }

/* Reglas clave añadidas */
html[data-recs="0"] [data-role="btn-grab"]{ display:none !important; }
/* Garantiza que el clic llegue al botón y no se quede en el SVG */
.btn-icon svg, .btn-icon svg *{ pointer-events:none; }


/* Ocultar nombres de cámaras en el mosaico */
.hide-names #mosaicGrid .tile .cam-title{ display:none !important; }
/* Al no haber título, alinea el icono a la derecha sin hueco */
.hide-names #mosaicGrid .tile .title-overlay{ justify-content:flex-end; }  




/* ===== ROI detector (grabaciones) ===== */
.player-wrap
{
	position: relative;
	background: #000;
}
.player-wrap video,
#roiPaint,
#roiOverlay
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#roiOverlay
{
	pointer-events: none; /* se activa al seleccionar */
}
.roi-toolbar
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px;
	background: rgba(0,0,0,.55);
	position: absolute;
	left: 8px;
	top: 8px;
	border: 1px solid rgba(255,255,255,.15);
	z-index: 5;
}
.roi-toolbar button,
.roi-toolbar input,
.roi-toolbar select,
.roi-toolbar label
{
	font: inherit;
	color: #fff;
	background: rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.15);
	padding: 4px 8px;
}
.roi-toolbar button:hover
{
	background: rgba(255,255,255,.08);
	cursor: pointer;
}
.roi-badge
{
	margin-left: 8px;
	font-size: 12px;
	color: #cfe1ff;
}
.roi-hits
{
	position: absolute;
	right: 8px;
	top: 8px;
	max-height: 70%;
	overflow: auto;
	display: grid;
	gap: 6px;
	background: rgba(0,0,0,.25);
	padding: 6px;
	border: 1px solid rgba(255,255,255,.15);
	z-index: 5;
}
.roi-hits .hit
{
	background: rgba(0,0,0,.5);
	border: 1px solid rgba(255,255,255,.15);
	padding: 6px;
	color: #fff;
	font-size: 12px;
}
.roi-hits .hit button
{
	width: 100%;
	margin-top: 4px;
}





/* Tamaño del dialog y del reproductor dentro del modal de grabaciones */
#recViewer .dialog
{
	/* Ajusta si ya tienes reglas aquí */
	width: min(95vw, 1280px);
	margin: 0 auto;
	background: #000; /* opcional */
}

/* El wrapper del player DEBE tener altura fija o por ratio */
#recViewer .dialog .player-wrap
{
	position: relative;
	width: 100%;
	/* Opción A: por viewport (suele ir bien en modales) */
	height: min(70vh, calc(95vw * 9 / 16));
	/* Opción B alternativa: usa ratio
	   aspect-ratio: 16/9; min-height: 320px;  (si prefieres ratio) */
	background: #000;
	overflow: hidden;
}

/* Capas: vídeo debajo, canvas encima, toolbar arriba */
#recViewer .dialog .player-wrap video { z-index: 1; display: block; }
#roiPaint, #roiOverlay { z-index: 2; }
.roi-toolbar, .roi-hits { z-index: 3; }









/* === Fix 1: que se vean y se puedan clicar los CONTROLES nativos === */
/* Dejamos una franja inferior libre (altura aprox. de la barra de controles) */
#recViewer .dialog .player-wrap
{
	--controls-h: 46px; /* ajusta a 40–52px si lo ves raro en tu navegador */
}

/* Vídeo ocupa todo (contiene el área de controles) */
#recViewer .dialog .player-wrap video
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 1;            /* debajo de toolbar/hits */
	display: block;
}

/* Canvas por encima para dibujar ROI, pero SIN capturar el ratón */
#roiPaint,
#roiOverlay
{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: var(--controls-h);  /* ← deja libre la franja de controles */
	width: 100%;
	height: auto;
	object-fit: contain;
	z-index: 2;
	pointer-events: none;       /* MUY IMPORTANTE para no bloquear clicks */
}

/* Overlay sólo capta eventos cuando estamos seleccionando: lo activa JS
   (dejamos esta regla por si algún navegador lo resetea) */
#roiOverlay.selecting
{
	pointer-events: auto;
}

/* Toolbar y lista de hits por encima */
.roi-toolbar,
.roi-hits
{
	z-index: 3;
}

/* === Fix 2: tamaño cómodo del MODAL === */
#recViewer .dialog
{
	/* Ancho grande pero con margen en viewport */
	width: min(96vw, 1400px);
	margin: 0 auto;
}

/* El reproductor ocupa buena parte de la altura visible */
#recViewer .dialog .player-wrap
{
	position: relative;
	width: 100%;
	/* Usa el que prefieras (a) por altura de viewport o (b) por aspect-ratio: */

	/* (a) Por altura de viewport: */
	height: min(78vh, calc(96vw * 9 / 16));

	/* (b) Alternativa por ratio (descomenta si prefieres):
	aspect-ratio: 16 / 9;
	min-height: 420px;
	*/

	background: #000;
	overflow: hidden;
}

.swal2-container
{
	z-index: 100000 !important;
}


/* ==== Modal de reproducción: más grande ==== */
#recViewer .dialog
{
	/* ancho casi completo y centrado */
	width: min(96vw, 1600px);
	margin: 3vh auto;            /* pequeño margen superior/inferior */
}

/* El player ocupa gran parte de la altura de la ventana */
#recViewer .dialog .player-wrap
{
	position: relative;
	width: 100%;
	/* alto calculado por viewport o por ancho (16:9), lo que sea menor */
	height: calc(min(86vh, 96vw * 9 / 16));
	background: #000;
	overflow: hidden;
}

/* (Opcional) si tu CSS anterior está imponiendo límites, fuerza prioridad */
#recViewer .dialog,
#recViewer .dialog .player-wrap
{
	max-width: none !important;
	max-height: none !important;
}








/* Ocultador genérico si no lo tienes */
.hidden
{
	display: none !important;
}

/* Botón flotante (pequeño, no molesta) */
.roi-toggle
{
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 4;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(0,0,0,.55);
	color: #fff;
	border-radius: 10px;
	padding: 6px 8px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.roi-toggle:hover
{
	background: rgba(255,255,255,.08);
}

/* Cuando la barra está visible, movemos el botón un poco para que no tape */
.roi-toolbar:not(.hidden) ~ .roi-toggle,
.roi-toggle[aria-expanded="true"]
{
	top: 10px;
	left: 10px;
}

/* Asegurar capas */
.roi-toolbar, .roi-hits { z-index: 3; }
#roiPaint, #roiOverlay { z-index: 2; }


 
.roi-toolbar{
  left: 48px;            /* antes: 8px */
}

/* Botón compacto y cuadrado para que no “pise” */
.roi-toggle{
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
}

 
 
 
 
 
:root
{
	/* altura del footer */
	--footer-h: 28px;
}

/* evita que el footer tape el contenido */
body
{
	padding-bottom: var(--footer-h);
}

/* footer fijo y bajo */
.app-footer
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--footer-h);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bar-bg, #184f6a);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	border-top: 1px solid var(--line, #e8eaef);
	z-index: 1000;
}

.app-footer a
{
	color: inherit;
	text-decoration: none;
}
.app-footer a:hover
{
	text-decoration: underline;
}  


.app-footer
{
	gap: .5rem;
}

.app-footer .foot-label
{
	opacity: .85;
}

.app-footer .foot-sep
{
	opacity: .5;
}

/* ultra-compacto en móviles: oculto la etiqueta y el separador */
@media (max-width: 480px)
{
	.app-footer .foot-label,
	.app-footer .foot-sep
	{
		display: none;
	}
}



/* Global: cuerpo de la app */
html, body
{
	/* Mantener el scroll funcionando */
	overflow: auto; /* o overflow: hidden; en body y scroll en tus contenedores, según tu layout */

	/* Ocultar barras (cross-browser) */
	-ms-overflow-style: none;        /* IE/Edge Legacy */
	scrollbar-width: none;           /* Firefox */
}

/* WebKit (Chrome/Edge/Safari/Opera) */
html::-webkit-scrollbar,
body::-webkit-scrollbar
{
	display: none;
}

/* Utilidad para cualquier contenedor que quieras sin barras, pero con scroll */
.hide-scrollbar
{
	overflow: auto;                  /* o overflow-y: auto; */
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar
{
	display: none;
}

/* Opcional (móvil iOS): scrolling suave sin mostrar barras */
.hide-scrollbar
{
	-webkit-overflow-scrolling: touch;
}


/* Botón info (mostrar/ocultar métricas en LIVE) */
.info-toggle{
  position:absolute;
  top:8px; right:8px;         /* pon left si lo prefieres */
  z-index:20;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);
  color:#fff; border-radius:10px;
  font-weight:700; font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer;
}
.info-toggle:hover{ background:rgba(255,255,255,.08); }
.info-toggle[aria-pressed="true"]{ outline:2px solid rgba(127,201,255,.35); }

/* Por defecto, ocultamos el cuadro de métricas */
.live-metrics{ display:none; }
.live-metrics.is-visible{ display:block; }


.live-metrics{ left:auto !important; right:8px !important; }
.info-toggle{ right:8px !important; left:auto !important; }



#liveZoomWrap{ --info-gap: 48px; }        /* ancho del hueco para el botón "i" */

/* BOTÓN "i" anclado al borde (derecha por defecto) */
.info-toggle{
  position:absolute;
  top:8px;
  right:8px;              /* cambia a left:8px si lo quieres a la izquierda */
  z-index: 11;            /* por encima del panel */
}

/* PANEL: a la derecha dejando hueco para el botón */
.live-metrics{
  position:absolute;
  top:8px;
  right: calc(var(--info-gap) + 8px); /* ← deja hueco */
  left:auto;
  z-index:10;
}

/* Si prefieres el panel/botón a la IZQUIERDA, añade esta clase al wrap:
   document.getElementById('liveZoomWrap').classList.add('metrics-left'); */
#liveZoomWrap.metrics-left .info-toggle{
  left:8px; right:auto;
}
#liveZoomWrap.metrics-left .live-metrics{
  left: calc(var(--info-gap) + 8px); right:auto;
}

/* (Opcional) en pantallas pequeñas, usa un hueco menor */
@media (max-width: 480px){
  #liveZoomWrap{ --info-gap: 40px; }
}


/* Botón "i" anclado a la esquina derecha */
#liveZoomWrap .info-toggle{
  position:absolute;
  top:8px;
  right:8px;
  z-index:11;
}

/* Panel de información a la DERECHA, dejando hueco para el botón */
#liveZoomWrap .live-metrics{
  position:absolute;
  top:8px;
  left:auto !important;      /* anula cualquier left previo */
  right:56px !important;     /* separa ~48px + margen del botón */
  z-index:10;
}

/* (Opcional) si quieres todo a la IZQUIERDA, añade la clase metrics-left al wrap */
#liveZoomWrap.metrics-left .info-toggle{ left:8px; right:auto; }
#liveZoomWrap.metrics-left .live-metrics{
  right:auto !important;
  left:56px !important;
}


.health-widget .popover .row span{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  word-break: break-all;
}


/* Subbar en fila */
#subbar .sb-content
{
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Controles: scroll lateral en móvil */
#subbar .size-controls
{
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;                 /* ← deslizable */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;            /* Firefox: oculta barra */
	touch-action: pan-x;              /* gesto horizontal suave */
}
#subbar .size-controls::-webkit-scrollbar
{
	display: none;                    /* Chrome */
}

/* Botones que no se encogen ni parten texto */
#subbar .size-controls .btn-size
{
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Ajustes en pantallas pequeñas */
@media (max-width: 576px)
{
	#subbar .size-controls .btn-size
	{
		padding: 4px 8px;
		font-size: 12px;
	}
	/* Si quieres aún más espacio, oculta la etiqueta "Vista:" en móvil */
	#subbar .size-controls .label
	{
		display: none;
	}
	/* Evita que el logo comprima los botones */
	#subbar .sb-logo
	{
		max-width: 20%;
		height: 36px !important;
	}
}

 


/* Popover bajo la topbar */
.tb-pop
{
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	top: 0;                     /* lo coloca el JS */
	background: #1A5074;       
	color: #fff;
	padding: 10px 14px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.12); /* sutil */
	max-width: 92vw;
	z-index: 9999;
	font-size: 14px;
	line-height: 1.25;
	display: none;
}
.tb-pop.show { display:block; }

.tb-pop .tb-pop-line
{
	white-space: normal;
}

/* flechita visual (opcional) */
.tb-pop::before
{
	content: "";
	position: absolute;
	top: -8px; left: 50%;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(0,0,0,.92);
	border-bottom-color: #1A5074;
}

/* modo hoja en móvil estrecho (más ancho) */
@media (max-width: 480px)
{
	.tb-pop
	{
		left: 8px;
		right: 8px;
		transform: none;
		border-radius: 10px;
	}
	.tb-pop::before { left: 24px; transform: none; }
}

.tb-pop { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35); }