/* ============================================================================
ESTILOS PARA LA APLICACIÓN BIM IOT - ANOTACIÓN DE IMÁGENES
============================================================================
Este archivo define los estilos visuales para:
- Contenedor de imagen y posicionamiento relativo
- Imagen principal responsive
- Puntos marcadores interactivos
- Etiquetas de identificación de puntos
============================================================================ */
/* ----------------------------------------------------------------------------
CONTENEDOR DE IMAGEN
----------------------------------------------------------------------------
Contenedor principal que alberga la imagen y todos los puntos marcadores.
Propiedades clave:
- position: relative - Permite posicionar puntos de forma absoluta dentro
- display: inline-block - Se ajusta al tamaño de su contenido (la imagen)
- border: 1px solid #ccc - Borde gris claro para delimitar el área
- padding: 0 - Sin padding para evitar desplazamientos en coordenadas
---------------------------------------------------------------------------- */
#image-container {
position: relative;
display: inline-block;
border: 1px solid #ccc;
padding: 0; /* Sin padding adicional: garantiza que las coordenadas
de los puntos se calculen correctamente */
/* Mejoras para dispositivos táctiles */
touch-action: pan-y pinch-zoom; /* Permitir scroll vertical y zoom, pero no pan horizontal */
overflow: hidden; /* Evitar scroll dentro del contenedor */
}
/* ----------------------------------------------------------------------------
IMAGEN PRINCIPAL
----------------------------------------------------------------------------
Imagen sobre la que se marcan los puntos de interés.
Características:
- Responsive: Se adapta al ancho del contenedor
- Mantiene proporción: height auto preserva el aspect ratio original
- Display block: Elimina espacio extra debajo de la imagen
---------------------------------------------------------------------------- */
#main-image {
display: block; /* Elimina el espacio en línea debajo de la imagen
que se crea cuando es inline por defecto */
width: 100%; /* Se adapta al 100% del ancho del contenedor */
height: auto; /* Altura automática para mantener la proporción
original de la imagen (aspect ratio) */
}
/* ----------------------------------------------------------------------------
PUNTO MARCADOR
----------------------------------------------------------------------------
Elemento visual que representa un punto de interés en la imagen.
Funcionalidades:
- Arrastrable (drag & drop) gracias a jQuery UI
- Eliminable mediante click
- Muestra distancias al pasar el cursor (hover)
- Color personalizable por punto
Diseño visual:
- Círculo con color personalizable (por defecto rojo)
- Borde blanco para contraste
- Tamaño: 20x20 píxeles
---------------------------------------------------------------------------- */
.point {
position: absolute; /* Posicionamiento absoluto dentro del contenedor
permite colocar el punto en coordenadas precisas */
width: 20px; /* Ancho del punto */
height: 20px; /* Alto del punto (igual al ancho para círculo perfecto) */
/* Color de fondo: se define con estilo inline, por defecto rojo con transparencia 70% */
background-color: rgba(255, 0, 0, 0.7);
/* Borde blanco de 2px para que el punto sea visible sobre cualquier imagen */
border: 2px solid #fff;
/* border-radius: 50% convierte el cuadrado en círculo perfecto */
border-radius: 50%;
/* Cursor en forma de mano al pasar sobre el punto, indica que es arrastrable */
cursor: move;
/* Mejoras para dispositivos táctiles */
touch-action: none; /* Desactiva gestos del navegador (zoom, scroll) al tocar punto */
user-select: none; /* Evita selección de texto al arrastrar */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* Transición suave para animaciones */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Efecto visual cuando se está arrastrando el punto */
.point.dragging {
transform: scale(1.3); /* Aumentar tamaño 30% para feedback visual */
box-shadow: 0 0 15px currentColor; /* Sombra del mismo color del punto */
z-index: 1000; /* Asegurar que esté por encima de otros elementos */
opacity: 0.9; /* Hacer más opaco al arrastrar */
}
/* Aumentar área de toque en dispositivos móviles sin cambiar apariencia visual */
@media (max-width: 768px) {
.point::before {
content: '';
position: absolute;
top: -10px; /* Expandir área de toque 10px en todas direcciones */
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
/* Area invisible pero interactiva */
}
/* Aumentar tamaño visual de puntos en móviles para mejor manipulación */
.point {
width: 24px;
height: 24px;
}
/* Ajustar tamaño de etiqueta en móviles */
.point-id {
font-size: 11px;
}
}
/* ----------------------------------------------------------------------------
ETIQUETA DE IDENTIFICACIÓN DE PUNTO
----------------------------------------------------------------------------
Texto que muestra el ID numérico del punto (actualmente no usado en la app,
pero disponible para futuras implementaciones).
Características:
- Centrado perfectamente dentro del punto
- No interfiere con eventos del mouse (pointer-events: none)
- Texto blanco para visibilidad
---------------------------------------------------------------------------- */
.point-id {
position: absolute; /* Posicionado dentro del punto */
/* Centrado vertical y horizontal usando el truco de 50% + translate */
top: 50%; /* Empezar desde el centro vertical */
left: 50%; /* Empezar desde el centro horizontal */
transform: translate(-50%, -50%); /* Ajustar para centrar verdaderamente
el elemento respecto a su propio tamaño */
color: #fff; /* Texto blanco para contraste con fondo rojo */
font-size: 10px; /* Fuente pequeña para que quepa en el punto */
/* pointer-events: none - El texto no captura eventos del mouse,
permite que los clicks pasen al punto subyacente */
pointer-events: none;
}
/* ----------------------------------------------------------------------------
MODO BORRADOR
----------------------------------------------------------------------------
Estilos para el modo de eliminación de puntos.
Características:
- Cursor personalizado con forma de borrador
- Botón activo con fondo destacado
- Puntos cambian cursor a crosshair para indicar que serán eliminados
---------------------------------------------------------------------------- */
/* Botón de borrador en estado activo */
#eraser-btn.active {
background-color: #dc3545 !important; /* Rojo para indicar modo destructivo */
color: white !important;
border-color: #dc3545 !important;
}
/* Botón de selector de color en estado activo */
#color-picker-btn.active {
background-color: #0d6efd !important; /* Azul para indicar modo activo */
color: white !important;
border-color: #0d6efd !important;
}
/* Cursor de borrador para el contenedor de imagen en modo borrador */
#image-container.eraser-mode {
cursor: url('data:image/svg+xml;utf8,'), crosshair;
}
/* Cursor de borrador para los puntos en modo borrador */
#image-container.eraser-mode .point {
cursor: url('data:image/svg+xml;utf8,'), pointer;
}
/* Resaltar puntos al pasar el mouse en modo borrador */
#image-container.eraser-mode .point:hover {
opacity: 1 !important; /* Hacer completamente opaco */
transform: scale(1.3); /* Aumentar tamaño 30% */
border-color: #fff;
border-width: 3px;
box-shadow: 0 0 10px currentColor; /* Sombra del mismo color del punto */
transition: all 0.2s ease; /* Animación suave */
z-index: 1000; /* Asegurar que esté por encima de otros elementos */
}
/* ----------------------------------------------------------------------------
SELECTOR DE COLOR
----------------------------------------------------------------------------
Elementos para seleccionar el color de los puntos.
Características:
- Botones circulares con el color correspondiente
- Efecto hover para indicar interacción
- Borde blanco cuando está seleccionado
---------------------------------------------------------------------------- */
.color-selector-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 4px;
transition: opacity 0.3s ease, transform 0.3s ease;
transform-origin: top center;
}
.color-selector-container.hidden {
opacity: 0;
transform: scaleY(0);
height: 0;
padding: 0;
overflow: hidden;
}
.color-option {
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.color-option:hover {
transform: scale(1.15);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.color-option.selected {
border-color: #fff;
box-shadow: 0 0 0 2px #333, 0 3px 8px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
/* Selector de color inline (para las tablas) */
.color-selector-inline {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.color-selector-dropdown {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.color-option-inline {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.color-option-inline:hover {
transform: scale(1.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.color-option-inline.selected {
border-color: #333;
box-shadow: 0 0 0 1px #333, 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Encabezado fijo de tabla de puntos */
#point-table thead th {
position: sticky;
top: 0;
z-index: 1;
background-color: #fff;
}
/* Botón circular de color en tabla */
.btn-group button[data-bs-toggle="dropdown"] {
transition: transform 0.2s ease;
}
.btn-group button[data-bs-toggle="dropdown"]:hover {
transform: scale(1.1);
}