/* =========================================================================== KAIRO -- hoja de estilos TODO color sale de una variable. Un color suelto en una regla queda invisible en modo oscuro: ya paso, y por eso esta reescrita entera. =========================================================================== */ :root { --marino: #16294b; --marino-claro: #2b436d; --fondo: #f0f1f4; --panel: #ffffff; --panel-2: #f7f8fa; /* filas de encabezado, zonas hundidas */ --linea: #dfe1e6; --linea-fuerte: #c9ccd2; --tinta: #1c1c1a; --tinta-2: #616161; /* minimo para texto secundario (WCAG AA) */ --tinta-3: #8a8a86; --acento: var(--marino); --acento-texto: #ffffff; --ok-fondo: #e1f5ee; --ok-texto: #0f6e56; --ok-solido: #1d9e75; --mal-fondo: #fcebeb; --mal-texto: #a32d2d; --mal-solido: #a32d2d; --avi-fondo: #fdf3e0; --avi-texto: #633806; --neu-fondo: #eef0f3; --neu-texto: #5f5e5a; --chip-fondo: #eef1f6; --chip-texto: var(--marino); /* Recuadro del seguidor visual sobre el video. Va sobre imagen de camara, no sobre el fondo de la interfaz, asi que no cambia con el tema. */ --seguido: #29c5f6; --radio: 8px; --marca-font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; } /* El tema lo fija un atributo en , que escribe el script ANTES de pintar, para que no haya un destello blanco al entrar en modo oscuro. */ [data-tema="oscuro"] { --marino: #7fa3d8; /* el marino puro no contrasta sobre oscuro */ --marino-claro: #a9c2e6; --fondo: #14171c; --panel: #1b1f26; --panel-2: #22272f; --linea: #2e343d; --linea-fuerte: #3d444f; --tinta: #e8eaed; --tinta-2: #a8adb6; --tinta-3: #7d838d; --acento: #4a7fc7; --acento-texto: #ffffff; --ok-fondo: #10312a; --ok-texto: #6fd8b4; --ok-solido: #1d9e75; --mal-fondo: #3a1a1a; --mal-texto: #f0a0a0; --mal-solido: #c94a4a; --avi-fondo: #38290f; --avi-texto: #f0cd93; --neu-fondo: #262b33; --neu-texto: #a8adb6; --chip-fondo: #24303f; --chip-texto: #9dbde8; --seguido: #29c5f6; } * { box-sizing: border-box; } html, body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; font-size: 15px; color: var(--tinta); background: var(--fondo); } h1 { font-size: 22px; font-weight: 500; margin: 0 0 16px; } h2.seccion { font-size: 16px; font-weight: 500; margin: 22px 0 6px; } a { color: var(--acento); } .tenue { color: var(--tinta-2); } .chico { font-size: 13px; } .mono { font-family: ui-monospace, Consolas, monospace; } .rojo { color: var(--mal-texto); } .ok { color: var(--ok-texto); font-size: 13px; } .mal { color: var(--mal-texto); font-size: 13px; } .cargando { padding: 40px; color: var(--tinta-2); } /* ------------------------------------------------------------- login ----- */ .login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-caja { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 28px; } .isotipo { display: flex; justify-content: center; margin-bottom: 14px; color: var(--marino); } .login-caja .marca-grande { font-family: var(--marca-font); font-size: 30px; font-weight: 500; letter-spacing: .32em; text-indent: .32em; color: var(--marino); margin: 0; text-align: center; } .login-caja .sub { font-family: var(--marca-font); margin: 8px 0 26px; color: var(--tinta-2); font-size: 10px; font-weight: 500; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; text-align: center; } .login-caja label { display: block; font-size: 13px; color: var(--tinta-2); margin: 12px 0 4px; } .login-caja input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 15px; background: var(--panel); color: var(--tinta); } .login-caja input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); } .login-caja button { width: 100%; height: 40px; margin-top: 20px; border: none; border-radius: var(--radio); background: var(--acento); color: var(--acento-texto); font-size: 15px; cursor: pointer; } .login-caja button:disabled { opacity: .6; cursor: default; } .error { margin-top: 14px; padding: 9px 11px; border-radius: var(--radio); background: var(--mal-fondo); color: var(--mal-texto); font-size: 14px; } /* -------------------------------------------------------------- barra ---- */ .barra-sup { display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; } .marca-enlace { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--marino); } .marca-enlace:hover { opacity: .78; } .marca { font-family: var(--marca-font); font-size: 16px; font-weight: 500; letter-spacing: .24em; text-indent: .24em; color: var(--marino); } .menu { display: flex; gap: 4px; align-items: center; } .menu a { color: var(--tinta-2); text-decoration: none; font-size: 14px; padding: 7px 12px; border-radius: var(--radio); } .menu a:hover { color: var(--tinta); background: var(--panel-2); } .menu a.activo { color: var(--tinta); background: var(--panel-2); font-weight: 500; } .derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Desplegable con
: nativo, sin JavaScript y con teclado gratis. */ .grupo { position: relative; } .grupo > summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--tinta-2); padding: 7px 12px; border-radius: var(--radio); display: flex; align-items: center; gap: 6px; } .grupo > summary::-webkit-details-marker { display: none; } .grupo > summary::after { content: "▾"; font-size: 11px; color: var(--tinta-3); } .grupo > summary:hover { color: var(--tinta); background: var(--panel-2); } .grupo[open] > summary { color: var(--tinta); background: var(--panel-2); } .grupo-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; padding: 6px; min-width: 190px; box-shadow: 0 8px 24px rgb(0 0 0 / 14%); display: flex; flex-direction: column; gap: 2px; } .grupo-menu a { display: block; padding: 8px 12px; text-decoration: none; color: var(--tinta-2); border-radius: var(--radio); } .grupo-menu a:hover { background: var(--panel-2); color: var(--tinta); } .grupo-menu a.activo { color: var(--tinta); font-weight: 500; } .contexto { font-size: 13px; color: var(--tinta-2); padding: 4px 10px; background: var(--panel-2); border-radius: 999px; } .icono { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); color: var(--tinta-2); cursor: pointer; font-size: 15px; line-height: 1; } .icono:hover { color: var(--tinta); border-color: var(--linea-fuerte); } .usuario { display: flex; align-items: center; gap: 10px; font-size: 14px; } .salir { border: 1px solid var(--linea); background: var(--panel); border-radius: var(--radio); padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--tinta); } .salir:hover { border-color: var(--linea-fuerte); } main { padding: 24px 20px; max-width: 1150px; } /* -------------------------------------------------------------- tabla ---- */ .tabla { width: 100%; /* separate y no collapse: con collapse, el borde propio de la tabla se fusiona con el de las celdas y contra las esquinas redondeadas salen lineas dobles y cortadas. */ border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; } .tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; } .tabla tbody tr:last-child td { border-bottom: none; } .tabla th { font-weight: 500; font-size: 13px; color: var(--tinta-2); background: var(--panel-2); } .tabla td.num, .tabla th.num { text-align: right; } .tabla td.acciones { white-space: nowrap; text-align: right; } .pendiente { color: var(--mal-texto); font-weight: 500; } /* Fila de alta del ABM de motivos y motivos dados de baja. */ .fila-motivo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fila-motivo input[type=text], .fila-motivo input:not([type]) { flex: 1; min-width: 260px; } .fila-motivo input:not([type=checkbox]), .fila-motivo select { height: 34px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); color: var(--tinta); font-size: 14px; } .fila-motivo button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); border-radius: var(--radio); padding: 7px 16px; font-size: 14px; border: 1px solid var(--acento); cursor: pointer; } /* Dado de baja: se sigue viendo porque hay eventos historicos que lo usan. */ .tabla tr.inactivo td { opacity: .55; } tr.tenue-fila td { opacity: .55; } /* ------------------------------------------------------------ botones ---- */ button { font-family: inherit; } .tabla td.acciones button, .marco-alta button, .barra-seleccion button { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: var(--radio); padding: 6px 12px; font-size: 13px; cursor: pointer; margin-left: 6px; } .barra-seleccion button { margin-left: 0; padding: 3px 10px; font-size: 12px; } .tabla td.acciones button:hover, .marco-alta button:hover { border-color: var(--acento); } button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); } button:disabled { opacity: .5; cursor: default; } /* --------------------------------------------------------------- chips --- */ .estado { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .estado.vivo { background: var(--ok-fondo); color: var(--ok-texto); } .estado.caido { background: var(--mal-fondo); color: var(--mal-texto); } .estado.neutro { background: var(--neu-fondo); color: var(--neu-texto); } .chip { background: var(--chip-fondo); color: var(--chip-texto); font-size: 12px; padding: 3px 9px; border-radius: var(--radio); } /* ------------------------------------------------------ configuracion ---- */ .descubierto { background: var(--panel-2); } .barra-seleccion { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .canales { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .canal { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: var(--radio); padding: 5px 10px; font-size: 13px; background: var(--panel); color: var(--tinta); cursor: pointer; } .canal.existente { opacity: .5; cursor: default; } .marco-alta { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 16px; margin-top: 24px; max-width: 720px; } .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .campos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-2); } .campos input, .celda { height: 36px; padding: 0 10px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 14px; color: var(--tinta); background: var(--panel); } .celda { width: 100%; height: 32px; } .celda.chica { width: 76px; text-align: right; } select.celda { padding: 0 6px; } .aviso { margin: 14px 0; padding: 9px 12px; background: var(--avi-fondo); color: var(--avi-texto); border-radius: var(--radio); font-size: 13px; } /* ------------------------------------------- presupuesto de computo ------ */ .presupuesto { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; } .presupuesto-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .presupuesto-cabeza strong { font-weight: 500; } .barra { display: flex; height: 10px; background: var(--neu-fondo); border-radius: 999px; overflow: hidden; } .barra .alta { background: var(--mal-solido); } .barra .normal { background: var(--acento); } .barra .analitica { background: var(--ok-solido); } .leyenda { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .punto { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; } .punto.alta { background: var(--mal-solido); } .punto.normal { background: var(--acento); } .punto.analitica { background: var(--ok-solido); } .punto.apagada { background: var(--linea-fuerte); } /* ------------------------------------------------------ cola de alertas -- */ .encabezado { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .encabezado h1 { margin: 0 0 12px; } .atajos { margin-left: auto; font-size: 13px; } .tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 20px; } .tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .tarjeta span { font-size: 13px; color: var(--tinta-2); } .tarjeta strong { font-size: 24px; font-weight: 500; } .evento { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 14px; margin-bottom: 12px; cursor: pointer; /* Para poder colgar la confianza del angulo sin que empuje al resto. */ position: relative; } /* La confianza de la deteccion, arriba a la derecha de la tarjeta. Deliberadamente en gris y no en rojo: es una medida de cuan seguro esta el modelo de que hay alguien manipulando mercaderia, NO de que haya un hurto. Pintarla de rojo la haria leer como alarma y sesgaria al que revisa. */ .confianza { position: absolute; top: 12px; right: 14px; text-align: right; line-height: 1; pointer-events: none; } .confianza strong { display: block; font-size: 32px; font-weight: 650; color: var(--tinta); font-variant-numeric: tabular-nums; } .confianza strong span { font-size: 17px; font-weight: 500; margin-left: 1px; } .confianza .rotulo { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); } /* En pantalla chica el numero grande le come el lugar al nombre de la camara, asi que se achica y se queda en la misma fila que el resto. */ @media (max-width: 560px) { .confianza strong { font-size: 23px; } .confianza strong span { font-size: 13px; } } .evento.foco { border-color: var(--acento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 18%, transparent); } .evento-datos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .evento-imagenes { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; margin-bottom: 10px; } .general, .recorte { position: relative; overflow: hidden; background: #10151f; /* fijo: es el fondo de una foto, no de la interfaz */ border-radius: var(--radio); aspect-ratio: 16 / 9; } .general img { width: 100%; height: 100%; object-fit: cover; display: block; } .general .caja { position: absolute; border: 2px solid #ff4d4d; border-radius: 2px; pointer-events: none; } .recorte img { position: absolute; max-width: none; display: block; } .recorte .sin-caja { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--tinta-3); } .evento-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .evento-acciones button { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: var(--radio); padding: 7px 14px; font-size: 14px; cursor: pointer; } .evento-acciones button:hover { border-color: var(--acento); } .evento-acciones button.peligro { border-color: var(--mal-solido); color: var(--mal-texto); } .evento-acciones button.peligro:hover { background: var(--mal-fondo); } /* ------------------------------- cartel de error de Blazor -------------- Va oculto y Blazor lo muestra (display:block en linea) cuando hay una excepcion sin atrapar. Sin esta regla queda visible siempre y parece que la aplicacion esta rota; PERO si se lo esconde de mas, una pagina que revienta al dibujarse queda en blanco sin decir nada. Por eso va bien visible, arriba y en rojo: que se note. */ #blazor-error-ui { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 12px 16px; background: var(--mal-fondo); color: var(--mal-texto); border-bottom: 2px solid var(--mal-solido); font-size: 14px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; } /* --------------------------------------------------------------- modal --- OJO: la plantilla de Blazor traia Bootstrap, que define .modal con display:none (lo muestra su propio JavaScript). Como esta hoja usa el mismo nombre, el modal quedaba en el DOM pero de 0x0: el fondo tapaba la pantalla y no se veia nada. Se saco Bootstrap entero, que ademas no se usaba. Si alguna vez vuelve, hay que renombrar esta clase. */ .titulo-con-accion { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .redondo { width: 34px; height: 34px; border-radius: 50%; padding: 0; margin: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; } /* El signo va en SVG y no como caracter: el glifo "+" tiene su propia linea base y queda siempre corrido dentro del circulo, distinto en cada fuente. */ .redondo svg { display: block; } .fondo-modal { position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / 45%); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 18px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; } .modal-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } .modal-pie button { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: var(--radio); padding: 8px 16px; font-size: 14px; cursor: pointer; } .modal-pie button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); } /* ------------------------------------------------------- vista en vivo --- */ .vista-vivo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; } .marco-vivo { position: relative; background: #10151f; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 9; } .marco-vivo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* La franja se ancla ABAJO: una persona se mide desde el piso hacia arriba. */ .guia-piso { position: absolute; left: 0; right: 0; bottom: 0; border-top: 2px dashed #ffd24d; background: linear-gradient(to top, rgb(255 210 77 / 16%), transparent); pointer-events: none; } .guia-piso span { position: absolute; top: 4px; left: 8px; font-size: 11px; color: #ffd24d; background: rgb(0 0 0 / 45%); padding: 1px 6px; border-radius: 3px; } .ayuda-vivo p { margin: 0 0 10px; } .ayuda-vivo button { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: var(--radio); padding: 6px 12px; font-size: 13px; cursor: pointer; } /* El filtro va en el encabezado, alineado a la derecha del titulo. */ .encabezado .filtro { width: auto; min-width: 220px; margin-left: auto; height: 34px; } /* -------------------------------------------------------------- agentes -- */ .carga { display: flex; flex-direction: column; gap: 4px; min-width: 240px; } .carga .barra { height: 8px; } .carga .celda.chica { width: 62px; height: 26px; display: inline-block; } .token { background: var(--panel-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; font-size: 13px; word-break: break-all; user-select: all; } .pie-vivo { display: flex; align-items: center; gap: 8px; font-size: 13px; } /* ---------------------------------------------------------------- reglas -- */ .modal.ancho { max-width: 760px; } .bloque { margin: 16px 0; } .condiciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; min-height: 28px; align-items: center; } .chip-cond { display: inline-flex; align-items: center; gap: 6px; background: var(--chip-fondo); color: var(--chip-texto); font-size: 13px; padding: 4px 10px; border-radius: var(--radio); } .chip-cond .quitar { border: none; background: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; opacity: .7; } .chip-cond .quitar:hover { opacity: 1; } .agregar-cond { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .agregar-cond select, .agregar-cond input, .campos select, .campos input[type=time] { height: 34px; padding: 0 8px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); color: var(--tinta); font-size: 14px; } .agregar-cond button, button.mini { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: var(--radio); padding: 6px 12px; font-size: 13px; cursor: pointer; } button.mini { padding: 2px 9px; font-size: 12px; } .linea-check { flex-direction: row !important; align-items: center; gap: 8px !important; } /* ------------------------------------------------------------ etiquetas -- */ .etiquetas-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .tag { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta-2); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; } .tag:hover { border-color: var(--linea-fuerte); color: var(--tinta); } .tag.activo { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); } .ambar { color: var(--avi-texto); } .aviso.mal-aviso { background: var(--mal-fondo); color: var(--mal-texto); } /* Marcas de referencia sobre la barra de carga. */ .barra-marcada { position: relative; padding-bottom: 16px; } .barra .excedido { background: var(--mal-solido); } .marca-carga { position: absolute; top: 0; height: 10px; border-left: 2px solid var(--panel); pointer-events: none; } .marca-carga.limite { border-left-color: var(--mal-solido); } .marca-carga span { position: absolute; top: 11px; left: -7px; font-size: 10px; color: var(--tinta-3); } .marca-carga.limite span { color: var(--mal-texto); } /* --------------------------------------------------- visor de secuencia -- */ .secuencia { margin: 4px 0 12px; } .marco-secuencia { /* El 16/9 es solo el valor inicial, hasta que se sepa la medida real del clip: marcar.js lo pisa con la proporcion del video apenas carga. Si queda uno que no es 16/9 y no se corrige, vuelven las franjas negras y con ellas el desfasaje entre lo que se marca y lo que se dibuja. */ background: #10151f; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 9; max-height: 460px; display: grid; place-items: center; } .marco-secuencia img, .marco-secuencia video { width: 100%; height: 100%; object-fit: contain; display: block; } /* El recuadro de lo que vio el modelo, encima del video. Lo posiciona rastro.js en pixeles siguiendo la reproduccion; aca solo va como se ve. */ .marco-secuencia.con-rastro { position: relative; } /* El recuadro que sigue a la persona. Escuadras en las esquinas en vez de un marco cerrado: el marco tapa a la persona justo en el borde, que es donde estan las manos, y ademas es lo que distingue de un vistazo un sistema que MIDE de un rectangulo dibujado. El color lo pone rastro.js segun la confianza; aca solo va la forma. */ .caja-video { --c: var(--mal-solido); --esq: 22%; /* cuanto ocupa cada escuadra */ --g: 3px; /* grosor */ position: absolute; display: none; pointer-events: none; border-radius: 3px; /* Marco tenue para que se entienda hasta donde llega el recuadro... */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); /* ...y las cuatro escuadras, dos gradientes por esquina. */ background: linear-gradient(var(--c), var(--c)) 0 0 / var(--esq) var(--g) no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / var(--g) var(--esq) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--esq) var(--g) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--g) var(--esq) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--esq) var(--g) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--g) var(--esq) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--esq) var(--g) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--g) var(--esq) no-repeat; /* Suaviza el salto entre muestras. El rastro trae un punto cada 200 ms y la pantalla pinta a 60: sin esto se ve el escalon. */ transition: left .12s linear, top .12s linear, width .12s linear, height .12s linear; } /* Franja con la posicion de cada deteccion dentro del clip. De un vistazo se ve si el modelo marco todo el rato o un instante suelto. */ /* Perfil de confianza a lo largo del clip. Mas alto = mas confianza. Antes eran marcas de si/no y con el rastreo nuevo quedaba llena de punta a punta: una barra llena no dice donde mirar. */ .franja-rastro { position: relative; height: 22px; margin-top: 6px; background: var(--neu-fondo); border-radius: 3px; overflow: hidden; } /* Cada barrita es un instante; la altura la pone rastro.js segun la confianza. Anclada abajo para que se lea como un grafico y no como marcas flotando. */ .franja-rastro i { position: absolute; bottom: 0; background: var(--mal-solido); } /* Por debajo del umbral: presente pero callado. Que no parezca que ahi nadie miro, sin competir con los picos. */ .franja-rastro i.bajo { background: var(--linea-fuerte); max-height: 45%; } /* Entidad a la que se llego por enlace: se marca un momento y se apaga. Ver ir.js. Fijo no sirve -- al volver por el menu quedaria una fila resaltada sin motivo aparente. */ .recien-llegado { animation: llegada 2.4s ease-out; } @keyframes llegada { 0%, 40% { background: var(--acento-suave, rgba(120, 170, 255, .22)); } 100% { background: transparent; } } /* Nombre de una entidad que lleva a su propia pantalla. Se distingue del texto comun pero sin el azul subrayado del enlace clasico: en una tabla con muchas filas eso seria ruido. */ /* Un iconito, no un subrayado. El borde punteado de abajo se leia como texto raro y no como "esto lleva a otra pantalla". Israel: "hacele como un iconito con un enlace o algo, asi subrayado es inentendible". Va como ::after y no en el marcado porque son cuatro lugares -- el numero y la camara en /ultimos y en Inicio, y el numero en Pruebas -- y asi el icono sale de una sola regla en vez de cuatro copias que se desincronizan. */ .enlace-entidad { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; /* el icono nunca cae solo al renglon de abajo */ } .enlace-entidad::after { /* El glifo literal y no su codigo de escape: escrito como escape, los primeros dos digitos se comieron como octal y quedo un caracter de control 0x11 seguido del resto. El resto del archivo ya usa el glifo directo, ver la regla de .grupo > summary::after. */ content: "↗"; display: inline-block; margin-left: 3px; font-size: .78em; font-family: system-ui, "Segoe UI Symbol", sans-serif; color: var(--acento); /* Sin text-decoration heredada: si el contenedor subraya, la flecha quedaba tachada por abajo. */ text-decoration: none; } .enlace-entidad:hover { color: var(--acento); } .enlace-entidad:hover::after { transform: translate(1px, -1px); } /* Gestos de CONTEXTO: los que el modelo vio y NO abren aviso -- doblando, probandose, prenda en la mano. Explican por que se disparo, asi que se muestran; pero van tenues y colgados de ARRIBA, no anclados abajo, para que se lean como anotacion y no se confundan con el perfil del gesto que avisa. Sin esa separacion la franja mezclaria dos cosas distintas en la misma forma, y dejaria de responder "donde mirar". */ .franja-rastro i.contexto { background: var(--linea-fuerte); opacity: .5; bottom: auto; top: 0; max-height: 40%; } /* Numero de evento. Seleccionable a mano (el resto de la tarjeta no lo es, porque un clic en cualquier lado la enfoca) para poder copiarlo. */ .id-evento { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--tinta-2); background: var(--neu-fondo); border-radius: 4px; padding: 2px 6px; /* user-select para poder copiar solo el numero y pasarselo a otro. Pero el cursor ya no es de texto: ahora el numero ES el enlace a las acciones, y un cursor de I sobre algo que navega dice lo contrario de lo que hace. */ user-select: text; } /* Chip del clip que todavia no llego. En gris, no en amarillo: no es una advertencia, es que falta esperar. */ .chip.esperando { background: var(--neu-fondo); color: var(--neu-texto); display: inline-flex; align-items: center; gap: 7px; } /* La mecha: cuanto falta para que llegue el clip. Dura lo que la espera real (~220 s) y arranca ya empezada, con retraso negativo, segun cuando ocurrio el evento. */ .mecha { display: inline-block; width: 46px; height: 3px; background: var(--linea-fuerte); border-radius: 2px; overflow: hidden; } .mecha i { display: block; height: 100%; width: 100%; background: var(--neu-texto); transform-origin: left center; transform: scaleX(0); animation: llenando 220s linear forwards; } @keyframes llenando { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .mecha i { animation: none; transform: scaleX(.5); opacity: .5; } } /* ---------------------------------------------- motivo y comentario ----- */ .explicacion { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel-2); padding: 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; cursor: default; } .motivos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .motivo { border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; } .motivo:hover { border-color: var(--linea-fuerte); } .motivo.elegido { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); } .explicacion textarea { width: 100%; resize: vertical; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); color: var(--tinta); font: inherit; font-size: 14px; } .explicacion textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); } /* Marca en el boton cuando el evento ya tiene motivo cargado. */ .punto { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--ok-solido); vertical-align: middle; } /* El porcentaje sale de data-pct, que actualiza el mismo script. Va por encima del recuadro salvo cuando la caja toca el borde de arriba, que ahi se daria vuelta y quedaria cortado. */ /* El porcentaje. Mas grande que antes a proposito: es el numero que la persona mira, y en 11px sobre imagen de camara se perdia. */ .caja-video::after { content: attr(data-pct); position: absolute; top: -26px; left: -3px; background: var(--c); color: #fff; font: 700 14px/1.45 system-ui, sans-serif; letter-spacing: .02em; padding: 1px 8px; border-radius: 3px; white-space: nowrap; box-shadow: 0 1px 6px rgb(0 0 0 / 45%); } /* Barrita de confianza pegada abajo del recuadro. El ancho lo pone rastro.js en --pct. Dice lo mismo que el numero, pero se lee sin leer. */ .caja-video::before { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--c) 0 calc(var(--pct, 0) * 1%), color-mix(in srgb, var(--c) 22%, transparent) calc(var(--pct, 0) * 1%) 100%); } /* Con el recuadro pegado al borde de arriba, la etiqueta se saldria del marco. Las clases las pone rastro.js, que es el unico que conoce las medidas reales del video dentro del marco. */ .caja-video.etiqueta-abajo::after { top: auto; bottom: -20px; } .caja-video.etiqueta-adentro::after { top: 2px; left: 2px; } /* Barra de cuenta regresiva del refresco de la cola. Es fina a proposito: no es informacion que haya que mirar, es una senal de vida. */ .refresco { height: 3px; background: var(--linea); border-radius: 2px; overflow: hidden; margin: 0 0 14px; } .refresco .avance { height: 100%; width: 100%; background: var(--acento); transform-origin: left center; animation: vaciando 20s linear forwards; } @keyframes vaciando { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Si alguien tiene el movimiento reducido, la barra se queda quieta en vez de animarse. */ @media (prefers-reduced-motion: reduce) { .refresco .avance { animation: none; opacity: .35; } } /* ------------------------------------------------- marcar a mano -------- */ /* Capa transparente sobre el video donde se arrastra el recuadro. Sin marcando no recibe eventos, para no robarle los clics a los controles. */ /* Deja libres los 46 px de abajo: ahi estan los controles del video. Si la capa los tapara, en modo marcar no se podria mover la linea de tiempo -- y para marcar hay que ubicarse primero en el momento. */ .capa-marcar { position: absolute; inset: 0 0 46px 0; pointer-events: none; } .capa-marcar.marcando { pointer-events: auto; cursor: crosshair; } .caja-marcando { position: absolute; pointer-events: none; border: 2px dashed var(--ok-solido); background: color-mix(in srgb, var(--ok-solido) 12%, transparent); } /* Marca ya guardada, dibujada sobre el video al pasar por su momento. */ .caja-marca { position: absolute; pointer-events: none; border: 3px solid var(--ok-solido); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); } .caja-marca::after { content: attr(data-gesto); position: absolute; top: -21px; left: -3px; background: var(--ok-solido); color: #fff; font: 600 11px/1.6 system-ui, sans-serif; padding: 0 6px; border-radius: 2px; white-space: nowrap; } .marcas-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .marcas-lista .marca { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 13px; background: var(--panel); } .marcas-lista .marca button { border: none; background: none; color: var(--tinta-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; } .marcas-lista .marca button:hover { color: var(--mal-texto); } /* Fuera del tramo que el modelo analizo: senala donde va a estar la marca, sin afirmar que ahi hay algo. Punteado, palido y sin porcentaje. */ /* Lo puso el seguidor, no el modelo. En CELESTE y no en un rojo palido: sobre el piso de cemento el rojo suave se perdia, y ademas conviene que sean dos colores distintos y no dos intensidades del mismo. Rojo = lo reconocio el modelo. Celeste = lo esta siguiendo el seguidor. SIN la sombra que si lleva el recuadro firme: el box-shadow dibuja un anillo SOLIDO por fuera del borde, y contra un borde punteado eso se ve como un rectangulo negro entero rodeando los guiones. Sobre el borde solido pasa desapercibido; sobre este, no. La legibilidad la aporta el celeste, que se eligio justamente por contrastar con el piso. */ /* Lo puso el seguidor y no el modelo: escuadras finas en celeste, sin brillo y sin barrita. Que se note que ahi nadie midio nada. */ .caja-video.previsto { --c: var(--seguido); --g: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seguido) 25%, transparent); } .caja-video.previsto::before { content: none; } .caja-video.previsto::after { content: none; } .mando { display: flex; align-items: center; gap: 8px; margin-top: 8px; } /* Un con cara de boton. Es y no