.card .title { font-weight:600; margin:8px 0 2px; color:#eaf6fb; }
.card .sub   { opacity:.9; font-size:.95rem; margin-bottom:10px; }
.card .sub .size { opacity:.8; margin-left:.75rem; }



/* ===== Vista compacta de grabaciones ===== */
#grabaciones.compact
	{
	--grab-gap: 8px;
	--grab-font: 12px;
	--grab-thumb-h: 96px;
	}

/* Tarjetas (Bootstrap .card o equivalente) */
#grabaciones.compact .card,
#grabaciones.compact .grab-card
	{
	padding: 8px;
	border-radius: 10px;
	}

/* Cuerpo de tarjeta */
#grabaciones.compact .card-body
	{
	padding: 8px;
	font-size: var(--grab-font);
	line-height: 1.15;
	}

/* Miniatura (intenta varios selectores comunes) */
#grabaciones.compact .card-img-top,
#grabaciones.compact .thumb,
#grabaciones.compact .thumb img,
#grabaciones.compact .thumb picture,
#grabaciones.compact .card img
	{
	display: block;
	width: 100%;
	height: var(--grab-thumb-h) !important;
	object-fit: cover;
	border-radius: 6px;
	}

/* Título y metas más apretados, con elipsis */
#grabaciones.compact .card-title,
#grabaciones.compact .meta,
#grabaciones.compact .meta .line
	{
	margin: 0 0 4px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

/* Botones pequeños y en fila */
#grabaciones.compact .actions
	{
	margin-top: 6px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	}
#grabaciones.compact .actions .btn,
#grabaciones.compact .card .btn
	{
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 8px;
	}

/* Separación entre tarjetas si usas .row/.col */
#grabaciones.compact .row > [class*="col-"]
	{ margin-bottom: var(--grab-gap); }

/* Botón activo (opcional) */
#btn-compact.active
	{ opacity: .9; box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset; }













/* ===== Rejilla de grabaciones ===== */
#recsGrid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	align-items: start;
}

/* Ítems (sirve para .card o cualquier div hijo) */
#recsGrid > .card,
#recsGrid > .rec-card,
#recsGrid > div
{
	padding: 12px;
	border-radius: 12px;
}

/* Miniatura general (cubre img/video) */
#recsGrid .thumb,
#recsGrid .thumb img,
#recsGrid .thumb video,
#recsGrid img.card-img-top
{
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
}

/* Textos y acciones */
#recsGrid .meta
{
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.2;
}
#recsGrid .actions
{
	margin-top: 8px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
#recsGrid .actions .btn
{
	padding: 6px 10px;
	font-size: 13px;
	border-radius: 10px;
}

/* ====== MODO COMPACTO ====== */
#recsGrid.compact
{
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}
#recsGrid.compact > .card,
#recsGrid.compact > .rec-card,
#recsGrid.compact > div
{
	padding: 8px;
	border-radius: 10px;
}
#recsGrid.compact .thumb,
#recsGrid.compact .thumb img,
#recsGrid.compact .thumb video,
#recsGrid.compact img.card-img-top
{
	height: 96px;
	border-radius: 6px;
}
#recsGrid.compact .meta
{
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#recsGrid.compact .actions
{
	margin-top: 6px;
	gap: 6px;
}
#recsGrid.compact .actions .btn
{
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 8px;
}

/* Botón visual activo (opcional) */
#btn-compact.active
{
	opacity: .9;
	box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset;
}









/* Centrar fila de botones en modo compacto */
#recsGrid.compact .actions
	{
	justify-content: center;   /* centra los botones en la fila */
	text-align: center;        /* fallback si no es flex en tu markup */
	}

/* Opcional: igualar tamaño visual */
#recsGrid.compact .actions .btn
	{
	min-width: 110px;          /* quita si no lo quieres */
	}
#recsGrid.compact .card .card-body
	{ text-align: center; }
#recsGrid.compact .card .card-body .actions
	{ text-align: inherit; justify-content: center; }
	
	
	
	
/* === Centrar botones en vista compacta (robusto) === */
#recsGrid.compact .card .card-body,
#recsGrid.compact > .rec-card,
#recsGrid.compact > div
	{
	text-align: center;               /* centro por defecto */
	}

#recsGrid.compact .actions
	{
	display: flex !important;         /* aunque antes fuera block o grid */
	justify-content: center !important;
	gap: 6px;
	flex-wrap: wrap;
	}

/* Forzar que los botones NO ocupen todo el ancho */
#recsGrid.compact .actions .btn,
#recsGrid.compact .card .btn
	{
	display: inline-flex !important;  /* evita block/grid heredado */
	align-items: center;
	justify-content: center;
	width: auto !important;           /* por si alguien puso 100% */
	min-width: 110px;                 /* opcional, homogéneos */
	margin-left: 0 !important;
	margin-right: 0 !important;
	}

/* Si no tienes contenedor .actions, céntralos igual */
#recsGrid.compact .card .card-body > .btn
	{
	display: inline-flex !important;
	width: auto !important;
}

 
 
 /* === Centrar los botones dentro de cada tarjeta === */
#grid .card .acciones
	{
	margin-top: 8px;
	display: flex !important;              /* fuerza fila flexible */
	justify-content: center !important;    /* centra horizontal */
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;                        /* que puedan saltar a 2 filas */
	text-align: center;                     /* fallback */
	}

/* Asegurar que no ocupan 100% y se alinean bonitos */
#grid .card .acciones button,
#grid .card .acciones a
	{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;                 /* por si algún estilo pone 100% */
	min-width: 110px;                       /* opcional, mismo ancho visual */
	margin: 0 !important;
	}

/* Si algún estilo global fuerza alineación a la izquierda en .card */
#grid .card
	{ text-align: initial; }                /* textos normales */
#grid .card .titulo,
#grid .card .sub
	{ text-align: left; }                   /* mantiene títulos a la izquierda */



#recsGrid .meta .actions { flex-wrap: nowrap; }

#recsGrid .meta .actions a,
#recsGrid .meta .actions button { min-width:80px; }
@media (max-width: 480px){
  #recsGrid .meta .actions { flex-wrap: wrap; }
  #recsGrid .meta .actions a,
  #recsGrid .meta .actions button { flex: 1 1 100%; }
}


#recsGrid .meta .actions .action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none; /* sin subrayado */
}
#recsGrid .meta .actions .action-btn svg{
  flex:0 0 auto;
  width:16px;
  height:16px;
  opacity:.95;
}


/* Separador por defecto entre info y acciones */
#recsGrid .meta{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:8px;
  padding-top:8px;
}

/* En vista compacta: separador más sutil (o quítalo) */
#recsGrid.compact .meta{
  border-top:1px solid rgba(255,255,255,.06);   /* ← muy tenue */
  /* Si lo prefieres sin línea, usa: border-top-color: transparent; */
  margin-top:6px;
  padding-top:6px;
}


#recsGrid .meta .actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;                /* separación real entre botones */
  flex-wrap:wrap;
}

/* Anula la regla global .btn + .btn que mete margen negativo */
#recsGrid .meta .actions .btn + .btn{
  margin-left:0 !important;
}

/* Layout con icono */
#recsGrid .meta .actions .action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;    /* sin subrayado morado */
  line-height:1;
  padding:8px 12px;        /* por si tu .btn es austera */
}
#recsGrid .meta .actions .action-btn svg{
  width:16px; height:16px;
  flex:0 0 auto;
  display:block;
}

/* (Opcional) apretar un poco en modo compacto */
#recsGrid.compact .meta .actions{ gap:8px; }
#recsGrid.compact .meta .actions .action-btn{ padding:6px 10px; }

#recsGrid .meta .actions .action-btn:hover svg{ opacity:1; }
#recsGrid .meta .actions .action-btn:hover{ filter:brightness(1.08); }



/* Tamaño de fuente más pequeño en los botones de acciones */
#recsGrid .meta .actions .action-btn,
#recsGrid .meta .actions .btn{
  font-size: 12px;   /* antes ~14–16 */
}

/* Aún más pequeño en vista compacta */
#recsGrid.compact .meta .actions .action-btn,
#recsGrid.compact .meta .actions .btn{
  font-size: 12px;
}
#btnReloadHls.loading svg{ animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


#recsGrid .meta .actions .action-btn,
#recsGrid .meta .actions .btn{ font-size:12px; }
#recsGrid.compact .meta .actions .action-btn,
#recsGrid.compact .meta .actions .btn{ font-size:12px; }


/* botón de descarga ocupado */
.action-btn[aria-disabled="true"]{
  opacity:.6;
  pointer-events:none;   /* no acepta más clics */
}
.action-btn .spin{
  width:16px;height:16px;
  margin-right:6px;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}


/* Normaliza TODOS los botones/links del control */
.btn-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;               /* reemplaza margin-left inline */
	height: 32px;           /* mismo alto para todos */
	padding: 0 10px;        /* quita padding vertical del UA */
	box-sizing: border-box;
	line-height: 1;         /* evita que el texto suba el alto */
	vertical-align: middle; /* alinear con los vecinos */
}

/* Diferencia clave: los <button> traen estilos del navegador */
button.btn-size {
	appearance: none;       /* quita estilo nativo */
	-webkit-appearance: none;
	border: 1px solid currentColor; /* o el que uses en .btn-ghost */
}

/* Icono y texto dentro del botón */
.btn-size svg { 
	display: block; 
	width: 16px; 
	height: 16px; 
	flex: 0 0 16px; 
}
.btn-size span { line-height: 1; }
#controles .btn-size { font-size: 14px; }


#liveZoomWrap { backface-visibility: hidden; }
#livePlayer   { will-change: transform; }




/* === Modal LIVE: ocupar casi toda la altura de la ventana === */
#liveViewer
{
	position: fixed;           /* asegúrate de que cubre viewport */
	inset: 0;
	display: flex;             /* centra el cuadro */
	align-items: center;
	justify-content: center;
}

#liveViewer .dialog
{
	width: min(96vw, 1400px);
	height: 94vh;              /* ⬆️ más alto */
	display: flex;
	flex-direction: column;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
}

#liveZoomWrap
{
	/* el área del vídeo se estira para ocupar el espacio disponible */
	flex: 1;
	min-height: 320px;
	position: relative;
	background: #000;
	overflow: hidden;
}

#livePlayer
{
	width: 100%;
	height: 100%;
	object-fit: contain;        /* encaja sin recortar */
	background: #000;
}

.live-toolbar
{
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;  /* botones a la derecha */
	padding: 10px;
	background: #0b0b0b;        /* separa visualmente de la zona de vídeo */
}


.no-scrollbar
{
	overflow-y: auto;           /* sigue habiendo scroll */
	-ms-overflow-style: none;   /* IE/Edge viejo */
	scrollbar-width: none;      /* Firefox */
	padding-inline-end: 8px;    /* evita que se corte contenido al ocultar la barra */
}
.no-scrollbar::-webkit-scrollbar
{
	width: 0;                   /* Chrome/Safari/Edge */
	height: 0;
}

.scroll-hide-wrap{
	overflow: hidden;          /* recorta lo que sobresalga (la barra) */
	max-height: 60vh;          /* ajusta a tu gusto */
}

.scroll-hide-body{
	overflow-y: auto;          /* aquí está el scroll real */
	max-height: inherit;
	padding-right: 24px;       /* espacio para que no se corte contenido */
	margin-right: -24px;       /* desplaza la barra fuera del recorte */
	/* Intenta además ocultarla por motor (si el navegador lo permite) */
	scrollbar-width: none;     /* Firefox */
	-ms-overflow-style: none;  /* IE/Edge Legacy */
}
.scroll-hide-body::-webkit-scrollbar{
	width: 0;
	height: 0;
}

#mosaicGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  /* Cambia el tamaño de las tiles */
  gap: 10px;  /* Espaciado entre tiles */
}

/* Tamaños para cada vista */
.size-xs {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  /* Tiles pequeñas */
}

.size-sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  /* Tiles medianas */
}

.size-md {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  /* Tiles medianas grandes */
}

.size-lg {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));  /* Tiles grandes */
}

.size-xl {
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));  /* Tiles extra grandes */
}

.tile {
  width: 100%; /* Hace que las tiles ocupen el 100% del espacio disponible */
  height: auto; /* Mantiene la proporción de la imagen/video */
  background-color: #222; /* Fondo de las tiles */
  border-radius: 5px; /* Opcional: borde redondeado */
  overflow: hidden; /* Esconde cualquier contenido que sobresalga */
}

/* Para los botones de cierre */
.tile-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  font-size: 16px;
}


#mosaicGrid .tile video,
#mosaicGrid .tile img { width:100%; height:auto; display:block; }

#mosaicGrid{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center; /* centra horizontalmente */
  gap:12px;
}


#mosaicGrid .tile{ position: relative; }
#mosaicGrid .tile .tile-close{
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; border:0; border-radius:4px;
  background:#cbd5e1; color:#0f172a; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:.9; z-index: 50;   /* por encima del vídeo/overlay */
  pointer-events:auto;
}
#mosaicGrid .tile:hover .tile-close{ opacity:1 }



/* La tile crea el contexto para posicionar la X */
#mosaicGrid .tile{
  position: relative;
  overflow: visible !important; /* por si algún padre la recorta */
}

/* Botón X arriba-derecha, por encima de todo */
#mosaicGrid .tile .tile-close{
  position: absolute !important;
  top: 6px; right: 6px;
  z-index: 2147483647;                 /* por encima de overlays/vídeo */
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 6px;
  background: rgba(15,23,42,.85);      /* fondo oscuro translúcido */
  color: #1B4F69 !important;
  font: 700 16px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  pointer-events: auto !important;
  opacity: 1;
}

 
#mosaicGrid .tile .title-overlay{ pointer-events: none; z-index: 90; }
#mosaicGrid .tile .title-overlay *{ pointer-events: auto; } /* sus propios botones sí */






.m-ok   { color: #7bd88f; }   /* verde */
.m-warn { color: #ffcc66; }   /* ámbar */
.m-bad  { color: #ff6b6b; }   /* rojo  */











/* help icon + tooltip (versión legible) */
.live-help {
  display:inline-flex; align-items:center; margin-left:6px; position:relative;
}

.live-help .help-icon{
  width:18px; height:18px; line-height:18px;
  font-size:12px; font-weight:700; text-align:center;
  border-radius:999px; cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#dbeafe,#bfdbfe);
  color:#1e3a8a; border:1px solid #93c5fd;
  box-shadow:0 1px 0 rgba(0,0,0,.12) inset, 0 1px 2px rgba(0,0,0,.12);
}

/* tooltip */
.live-help .tooltip{
  position:absolute; left:22px; top:50%;
  transform:translateY(-50%) translateX(6px) scale(.98);
  transform-origin:left center;

  max-width:340px; min-width:220px; /* más ancho y mínimo cómodo */
  padding:10px 12px; border-radius:10px;

  background:#0b1220;            /* más contraste */
  color:#e2e8f0;                  /* texto claro */
  border:1px solid #334155;       /* borde sutil */
  box-shadow:0 10px 28px rgba(0,0,0,.35);

  font-size:13px; line-height:1.35; letter-spacing:.1px;
  white-space:normal; word-break:break-word;

  opacity:0; pointer-events:none; z-index:1000;
  transition:opacity .12s ease, transform .12s ease;
}

.live-help .tooltip::before{
  content:""; position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  border-width:7px; border-style:solid;
  border-color:transparent #0b1220 transparent transparent; /* flecha */
}

/* estados visibles (hover, focus, tap) */
.live-help.is-open .tooltip,
.live-help:focus-within .tooltip,
.live-help:hover .tooltip{
  opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(6px) scale(1);
}
.live-help .help-icon:focus{ outline:2px solid #60a5fa; outline-offset:2px; }

/* etiqueta con icono */
.live-metrics .label { display:flex; align-items:center; gap:6px; }

/* móvil: colocar el tooltip arriba y centrado para que no tape el texto */
@media (max-width: 480px){
  .live-help .tooltip{
    left:0; right:auto; top:auto; bottom:calc(100% + 8px);
    transform:translateY(0) translateX(0);
  }
  .live-help .tooltip::before{
    left:10px; top:auto; bottom:-7px; transform:rotate(90deg);
    border-color:#0b1220 transparent transparent transparent;
  }
}



/* Botón “i” */
.live-help { display:inline-flex; align-items:center; margin-left:6px; }
.live-help .help-icon{
  width:18px; height:18px; line-height:18px; font-size:12px; font-weight:700;
  text-align:center; border-radius:999px; cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#dbeafe,#bfdbfe);
  color:#1e3a8a; border:1px solid #93c5fd;
  box-shadow:0 1px 0 rgba(0,0,0,.12) inset, 0 1px 2px rgba(0,0,0,.12);
}
.live-help .help-icon:focus{ outline:2px solid #60a5fa; outline-offset:2px; }

/* Portal global del tooltip (fixed => no le afectan los overflow) */
.live-help-portal{
  position:fixed; z-index:99999;
  display:none; visibility:hidden;

  max-width:360px; min-width:220px;
  padding:10px 12px; border-radius:10px;

  background:#0b1220; color:#e2e8f0;           /* opaco y legible */
  border:1px solid #334155;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
  font-size:13px; line-height:1.35; letter-spacing:.1px;
  white-space:normal; word-break:break-word;
}









#liveZoomWrap{
  position: relative;
  overflow: hidden;      /* ← clave */
  z-index: 1;            /* por debajo de la toolbar */
}

/* superficie que escalamos y desplazamos */
#liveStage{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform;  /* suave */
}

/* el <video> se ajusta al stage */
#livePlayer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* o cover si prefieres llenar recortando */
  background: #000;
  pointer-events: none;    /* no roba clics a la UI */
}

/* la toolbar siempre por encima */
.live-toolbar{
  position: relative;
  z-index: 10;             /* ← sobre el stage */
  pointer-events: auto;
}



/* ====================== TOPBAR & SUBBAR ====================== */

header#topbar.topbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
  background: var(--bar-bg); color: var(--bar-fg);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  white-space: nowrap; overflow: hidden;
  z-index: 3000;                 /* por encima de todo lo demás */
  cursor: pointer; pointer-events: auto;
}

/* columnas */
.topbar > .tb-left,
.topbar > .tb-center,
.topbar > .tb-right{
  display: flex; flex-direction: column;
  flex: 1 1 0; min-width: 0;     /* necesario para elipsis en flex */
}

.tb-left  { text-align: left;  }
.tb-center{ text-align: center; align-items: center; }
.tb-right { text-align: right; align-items: flex-end; }

/* reparto (2–1–2) */
.topbar .tb-left  { flex: 2 1 0; }
.topbar .tb-center{ flex: 1 1 0; }
.topbar .tb-right { flex: 2 1 0; }

/* tipografías / truncado */
.topbar .tb-name,
.topbar .tb-title{
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar .tb-sub{
  margin-top: 4px; font-weight: 600; opacity: .98;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  display: none !important;      /* ocultamos subs para evitar duplicados */
}

/* Subbar (debajo de topbar) */
.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;
  box-shadow: 0 2px 4px rgba(0,0,0,.08) inset;
  z-index: 900;                   /* por debajo de la topbar */
}
.subbar .sb-content{
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ====================== POPOVER ====================== */

.tb-pop{
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 0;                              /* la posición final la pone el JS */
  background: #1A5074; color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 30px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  width: clamp(360px, 60vw, 900px);
  max-width: 92vw;
  font-size: 14px; line-height: 1.25;
  display: none;
  z-index: 9999;
}
.tb-pop.show{ display: block; }
.tb-pop .tb-pop-line{ white-space: normal; margin: 2px 0; }

/* flechita */
.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 #1A5074;
}

/* móvil muy estrecho: popover más ancho y bordes suaves */
@media (max-width: 480px){
  .tb-pop{
    left: 8px; right: 8px; transform: none;
    border-radius: 10px; max-width: none;
    width: calc(100vw - 16px);
  }
  .tb-pop::before{ left: 24px; transform: none; }
}

/* ====================== RESPONSIVE TOPBAR ====================== */

/* compacto en móvil: solo columna central visible */
@media (max-width: 680px){
  .topbar{ gap: 8px; padding: 4px 10px; }
  .topbar .tb-left, .topbar .tb-right{ display: none !important; }
  .topbar .tb-center{ flex: 1 1 0; }
  .topbar .tb-name{ font-size: 14px; line-height: 1.2; }
}



/* Desktop/normal: sin cambios */
#liveViewer #livePlayer
{
	max-width:100vw;
	max-height:100vh;
	object-fit:contain;
}







/* MÓVIL (vertical): que el video llene el modal rotado */
@media (max-width: 768px) and (orientation: portrait)
{
	#liveViewer .dialog
	{
		width:100vw;
		height:100dvh;
		margin:0;
		border-radius:0;
		background:#000;
		display:flex;
		flex-direction:column;
	}

	#liveViewer #liveZoomWrap
	{
		position:relative;
		flex:1 1 auto;
		width:100%;
		height:100%;
		overflow:hidden;
		display:block;
		background:#000;
	}

	/* Centrado absoluto + rotación + dimensiones “invertidas”
	   (usar unidades dinámicas de viewport para evitar recortes) */
#liveViewer #livePlayer
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) rotate(90deg);
	transform-origin:center center;

	/* === Clave para evitar recortes === */
	width:auto;           /* antes: 100dvh */
	height:auto;          /* antes: 100dvw */
	max-width:100dvh;     /* límite por alto del viewport (rotado) */
	max-height:100dvw;    /* límite por ancho del viewport (rotado) */
	object-fit:contain;
}
	
	/* Opcional: que la barra quede superpuesta abajo */
	#liveViewer .live-toolbar
	{
		position:absolute;
		left:0; right:0; bottom:0;
		background:rgba(0,0,0,.35);
	}
}


/* Define alturas de UI (ajústalas si tu X o barra cambian de tamaño) */
#liveViewer
{
	--ui-top: 44px;     /* botón X */
	--ui-bottom: 48px;  /* toolbar */
}

/* En móvil vertical: sustituye SOLO los límites del #livePlayer */
@media (max-width: 768px) and (orientation: portrait)
{
	#liveViewer #livePlayer
	{
		/* ...tu posicionamiento y rotate ya puestos... */

		width:auto;
		height:auto;
		max-width:calc(100dvh - env(safe-area-inset-left) - env(safe-area-inset-right));
		max-height:calc(100dvw - var(--ui-top) - var(--ui-bottom) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		object-fit:contain;
	}
}







 
/* ===== GRABACIONES: móvil (vertical) ===== */
@media (max-width: 768px) and (orientation: portrait)
{
	/* Asegura referencia para posicionar el wrap */
	#recViewer .dialog
	{
		position:relative;
		width:100vw;
		height:100dvh;
		margin:0; border-radius:0;
		background:#000;
	}

	/* ROTAMOS EL CONTENEDOR (no el video) y lo centramos */
	#recViewer #recZoomWrap
	{
		position:absolute;
		top:50%; left:50%;
		width:calc(100dvh - env(safe-area-inset-left) - env(safe-area-inset-right));
		height:calc(100dvw - var(--ui-top,44px) - var(--ui-bottom,48px) - env(safe-area-inset-top) - env(safe-area-inset-bottom));

		transform:translate(-50%, -50%) rotate(90deg) !important;
		transform-origin:center center !important;

		display:flex; align-items:center; justify-content:center;
		overflow:hidden; background:#000;
	}

	/* El VIDEO rellena TODO el wrap, sin transformaciones propias */
	#recViewer #recPlayer,
	#recViewer video
	{
		position:static !important;
		transform:none !important;      /* anula cualquier zoom/translate previo */
		max-width:100%; max-height:100%;
		width:100%; height:auto;        /* encaja ancho del wrap rotado */
		object-fit:contain;
	}
}


@media (max-width: 768px) and (orientation: portrait)
{
	/* El modal de grabaciones ocupa toda la pantalla */
	#recViewer{ position:fixed; inset:0; }
	#recViewer .dialog{ height:100dvh; }

	/* La barra de acciones va superpuesta, no “empuja” el contenido */
	#recViewer .rec-toolbar,
	#recViewer .live-toolbar
	{
		position:absolute; left:0; right:0; bottom:0;
	}
}







/* ===== Responsive toolbar filtros (<= 480px) ===== */
@media (max-width: 480px)
{
	/* Evita desbordes horizontales */
	html, body
	{
		overflow-x: hidden;
	}

	/* Reorganiza la barra en móvil */
	.toolbar
	{
     display: grid !important;
		grid-template-columns: 1fr;   
		row-gap: 8px;
		align-items: stretch;
		padding-right: 8px;
	}

	/* Botón volver y título */
	#btnBack
	{
		justify-self: start;
	}

	#recsTitle
	{
		font-size: 16px;              /* evita zoom iOS */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Contenedor de filtros en grid (2 columnas) */
	.toolbar .filters
	{
		order: 3;
		margin-left: 0 !important;    /* anula el inline que empuja a la derecha */
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: min-content;
		gap: 8px;
		width: 100%;
		min-width: 0;
	}

	/* Cada control ocupa 100% de su celda */
	.toolbar .filters label,
	.toolbar .filters input[type="date"],
	.toolbar .filters input[type="time"],
	.toolbar .filters input[type="text"],
	.toolbar .filters button
	{
		width: 100% !important;
		min-width: 0 !important;
		font-size: 16px;              /* evita zoom iOS */
		padding: .45rem .6rem;
	}

	/* El buscador a ancho completo */
	#fQuery
	{
		grid-column: 1 / -1;
	}
}


/* === Compacta date/time en toolbar (<=480px) === */
@media (max-width: 480px)
{
	/* Cada label actúa como fila: [Etiqueta][Campo] */
	.toolbar .filters label
	{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 6px;
		margin: 0;            /* por si el navegador mete extra */
	}

	/* Campos de fecha/hora más estrechos */
	#fDate,
	#fFrom,
	#fTo
	{
		inline-size: min(140px, 100%);  /* ~140px máx. */
		max-width: 140px;
		justify-self: start;            /* no estirar */
		padding: .45rem .6rem;
		font-size: 16px;                /* evita zoom iOS */
	}

	/* Mantén el buscador a ancho completo */
	#fQuery
	{
		grid-column: 1 / -1;
	}
}



 
 
.icon-only
{
	padding: .35rem .5rem;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px; line-height: 1;
}

/* Estado oculto de filtros */
#filtersBox.is-hidden
{
	display: none !important;
}

/* Cambia el icono según estado */
#btnToggleFilters
{
	font-size: 0; /* ocultar texto del botón */
}
#btnToggleFilters::after
{
	content: "▾";             /* abierto */
	font-size: 18px; line-height: 1;
}
#btnToggleFilters[aria-expanded="false"]::after
{
	content: "▸";             /* cerrado */
}


/* === FIX subbar: logo sin deformar + semáforo compacto === */
.subbar .sb-content
{
	display:flex;
	align-items:center;
	gap:10px;
	overflow:visible;          /* que nada se “muerda” */
}

/* Logo: respeta proporción siempre */
.subbar .sb-logo{
	height: 28px !important;   /* antes 32px */
	max-width: 160px !important;
}

/* Widget Salud (semaforo): en una línea, compacto */
.health-widget
{
	margin-left:auto;          /* empuja a la derecha */
	display:inline-flex !important;
	align-items:center;
	gap:6px;
	white-space:nowrap !important;
	flex:0 0 auto;
}

/* Punto (verde/ámbar/rojo) perfectamente circular */
.health-widget .dot
{
	width:12px; height:12px;
	min-width:12px; min-height:12px;
	border-radius:50%;
	box-shadow:0 0 0 2px rgba(0,0,0,.08) inset;
	flex:0 0 12px;
}

/* Texto de contadores “5/0/0” alineado */
.health-widget .txt
{
	font:600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Popover: que no empuje el layout */
.health-widget .popover
{
	position:absolute;
	right:8px; top:100%;
	margin-top:8px;
	min-width:220px;
	z-index:1000;
}

/* Ajustes móviles */
@media (max-width: 640px){
	.subbar .sb-logo{
		height: 22px !important;  /* antes 26px */
		max-width: 140px !important;
	}
}


 .sub .dur.bad{
	color:#e74c3c;
	font-weight:600;
}


.btn-icon{
	padding:6px 8px;
	display:inline-flex; align-items:center; justify-content:center;
	min-width:auto; line-height:1;
	margin-left:8px; /* ajusta si quieres pegarlo al logo */
}
.size-controls[hidden]{ display:none !important; }






 /* --- Móvil: controles debajo, 100% y con scroll; respeta [hidden] --- */
@media (max-width: 768px){
	/* La subbarra no debe recortar nada */
	.subbar, #subbar, #subbar-content{
		overflow: visible !important;
		height: auto !important;
		white-space: normal !important;
		width: 100%;
		box-sizing: border-box;
	}

	/* Contenedor: permite salto de línea */
	#subbar-content{
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	/* Arriba: logo + botón mini */
	#subbar-content .sb-logo{ order:1; max-height:36px; flex:0 0 auto; }
	#btnTogglePanel{ order:2; flex:0 0 auto; margin-left:8px; }

	/* Panel de controles: DEBAJO y a 100% del ancho */
	#subbar-content .size-controls{
		order:3;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;

		margin-top: 16px;
		padding: 6px 8px;

		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	/* Clave: respeta el toggle basado en [hidden] */
	#subbar-content .size-controls[hidden]{ display: none !important; }
	#subbar-content .size-controls:not([hidden]){ display: block !important; }

	/* Botones en carrusel horizontal */
	#subbar-content .size-controls .btn-size,
	#subbar-content .size-controls .label{
		display:inline-block;
		margin-right:6px;
	}
}

@media (max-width: 768px){
	/* Asegura que el contenedor ocupe todo el ancho disponible */
	#subbar-content{
		width: 100% !important;
		max-width: none !important;
	}

	/* Clave: en flex, evita que el bloque se encoja y fuerza 100% real */
	#subbar-content .size-controls{
		flex: 1 0 100% !important;  /* basis 100%, no shrink */
		width: 100% !important;
		min-width: 100% !important; /* ← evita min-content shrink */
	}
}


@media (max-width: 768px){
	:root{ --subbar-pad: 24px; } /* ajusta si tu subbar usa otro padding */

	#subbar-content .size-controls{
		margin-left: calc(-1 * var(--subbar-pad));
		margin-right: calc(-1 * var(--subbar-pad));
		padding-left: var(--subbar-pad);
		padding-right: var(--subbar-pad);
		box-sizing: border-box;
	}
}


@media (max-width: 768px){
	#subbar-content .size-controls{
		display: block !important;
		width: 100% !important;
		min-width: 100% !important;
		flex: 0 0 100% !important;

		clear: both !important;   /* ← clave: baja por debajo del float derecho */
		margin-top: 16px !important;
		overflow-x: auto;
		white-space: nowrap;
	}
	#subbar-content .size-controls[hidden]{ display:none !important; }
}


@media (max-width: 768px){
	#subbar-content .size-controls{
		/* tus líneas que ya funcionan… */
		flex: 0 0 140% !important;
		width: 100% !important;
		min-width: 150% !important;
		align-self: stretch !important;
		float: none !important;
		position: static !important;

		/* añade SOLO esto */
		max-width: none !important; /* evita límites heredados del contenedor */
	}
}

/* === HLS responsivo en móvil (una columna, ancho completo) === */
@media (max-width: 768px){
	/* Mantén tu layout flex pero en una sola columna */
	#mosaicGrid{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;  
		gap: 10px;
	}

	/* Cada tile ocupa todo el ancho disponible */
	#mosaicGrid .tile{
		flex: 1 1 100%;
		max-width: 98%;
		margin-left: auto;
		margin-right: auto;
	}

	/* El reproductor HLS se adapta al ancho del contenedor */
	video.hls-player{
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}