/* Paleta de colores por plantilla. Se activa poniendo data-plantilla="..." en ; display.js lo hace automáticamente según la configuración guardada en el panel de administración. La plantilla "clasica" es el diseño original (valores por defecto en :root). */ :root { --valla-fondo: #8cc63f; --color-texto: #00104a; --color-acento: #8cc63f; --color-pildora-fondo: #00104a; --color-pildora-texto: #ffffff; --color-borde-pildora: transparent; --color-etiqueta-alerta: #ffcc00; --color-etiqueta-trabajo: #ff9900; --color-etiqueta-ruta: #00ccff; --color-alerta-roja: #ff4d4d; --sombra-valla: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Evita el "parpadeo" de contenido por defecto (marca/plantilla/tamaño de ejemplo) al cargar o recargar la página: la valla queda oculta hasta que display.js aplica la configuración real guardada, y recién ahí se revela. */ .valla-contenedor, .valla-vertical { opacity: 0; transition: opacity 0.25s ease; } .valla-contenedor.lista, .valla-vertical.lista { opacity: 1; } /* NOCTURNA · alto contraste ámbar/negro, estilo señalética de autopista */ [data-plantilla="nocturna"] { --valla-fondo: #05070a; --color-texto: #ffb703; --color-acento: #ffb703; --color-pildora-fondo: #171b21; --color-pildora-texto: #ffe08a; --color-borde-pildora: rgba(255, 183, 3, 0.35); --color-etiqueta-alerta: #ffd60a; --color-etiqueta-trabajo: #fb8500; --color-etiqueta-ruta: #4cc9f0; --color-alerta-roja: #ff5a5f; --sombra-valla: 0 10px 40px rgba(0, 0, 0, 0.7); } /* CORPORATIVA · degradado azul institucional con tarjetas tipo "cristal" */ [data-plantilla="corporativa"] { --valla-fondo: linear-gradient(135deg, #001233 0%, #023e7d 60%, #0466c8 100%); --color-texto: #ffffff; --color-acento: #ffd60a; --color-pildora-fondo: rgba(255, 255, 255, 0.12); --color-pildora-texto: #ffffff; --color-borde-pildora: rgba(255, 255, 255, 0.35); --color-etiqueta-alerta: #ffd60a; --color-etiqueta-trabajo: #ff9f1c; --color-etiqueta-ruta: #90e0ef; --color-alerta-roja: #ff6b6b; --sombra-valla: 0 10px 40px rgba(0, 0, 0, 0.55); } /* MINIMAL · fondo claro, ideal para interiores o uso diurno */ [data-plantilla="minimal"] { --valla-fondo: #f5f7fa; --color-texto: #00104a; --color-acento: #3f7d1a; --color-pildora-fondo: #00104a; --color-pildora-texto: #ffffff; --color-borde-pildora: transparent; --color-etiqueta-alerta: #e08e00; --color-etiqueta-trabajo: #d94f04; --color-etiqueta-ruta: #0077b6; --color-alerta-roja: #d63b3b; --sombra-valla: 0 6px 24px rgba(0, 0, 0, 0.15); } /* Diapositiva de galeria: imagen a pantalla completa, sin datos encima, cubre toda la valla (logo, panel de datos y pie) cuando esta activa. */ .valla-imagen-completa { display: none; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #000; z-index: 50; opacity: 0; } /* Misma animacion de entrada que usan las filas/tarjetas de las secciones de datos (desplazarHaciaArriba, definida en styles.css / styles-vertical.css), para que la transicion se sienta igual en toda la valla. */ .valla-imagen-completa.activa { display: block; animation: desplazarHaciaArriba 0.6s ease-out forwards; } /* Indicador de paginacion (puntos) para las secciones de lista con mas elementos de los que caben en una pagina. Oculto si solo hay una pagina. */ .paginacion-dots { display: none; gap: 8px; justify-content: center; margin-top: 14px; color: var(--color-acento); } .paginacion-dots.visible { display: flex; } .paginacion-punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.3; } .paginacion-punto.activo { opacity: 1; } /* Icono/imagen decorativa por vista: es un unico elemento compartido, se posiciona sobre TODA la valla (no queda encerrado en la columna de datos), y muestra la imagen de la seccion de datos que este activa en ese momento. */ .decor-icono { position: absolute; display: none; background-size: contain; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: 45; } .decor-icono.visible { display: block; } /* Solo en el modo de vista previa del panel admin: permite hacer clic y arrastrar/redimensionar el icono decorativo de la vista activa. */ .decor-icono.interactivo { pointer-events: auto; cursor: move; } .decor-icono.seleccionado { outline: 2px dashed #4cc9f0; outline-offset: 3px; } .decor-icono-manija { position: absolute; width: 14px; height: 14px; background: #4cc9f0; border: 2px solid #fff; border-radius: 50%; pointer-events: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .decor-icono-manija.esquina-nw { top: -7px; left: -7px; cursor: nwse-resize; } .decor-icono-manija.esquina-ne { top: -7px; right: -7px; cursor: nesw-resize; } .decor-icono-manija.esquina-sw { bottom: -7px; left: -7px; cursor: nesw-resize; } .decor-icono-manija.esquina-se { bottom: -7px; right: -7px; cursor: nwse-resize; } /* Seccion de datos (Destinos/Transito/Alertas/Obras) con posicion propia: igual mecanismo que el icono decorativo (mover + 4 manijas de esquina), pero para la vista completa en vez de una imagen. Sin esto, la vista vive en su lugar normal de flujo (panel-derecho/central) sin estas reglas. */ .vista-carrusel.vista-personalizada-pos { position: absolute; z-index: 41; } .vista-carrusel.vista-personalizada-pos.interactivo { cursor: move; } .vista-carrusel.vista-personalizada-pos.interactivo:hover, .vista-carrusel.vista-personalizada-pos.interactivo { outline: 2px dashed #4cc9f0; outline-offset: 3px; } .seccion-manija { position: absolute; width: 14px; height: 14px; background: #4cc9f0; border: 2px solid #fff; border-radius: 50%; pointer-events: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); z-index: 46; } .seccion-manija.esquina-nw { top: -7px; left: -7px; cursor: nwse-resize; } .seccion-manija.esquina-ne { top: -7px; right: -7px; cursor: nesw-resize; } .seccion-manija.esquina-sw { bottom: -7px; left: -7px; cursor: nesw-resize; } .seccion-manija.esquina-se { bottom: -7px; right: -7px; cursor: nwse-resize; } /* ---------- TEXTO ARRASTRABLE (marca, titulos, encabezados de columna) ---------- Un texto sin posicion guardada (x/y null) se queda en su flujo normal (sin este atributo). Al arrastrarlo una vez en el panel admin, se le fija una posicion absoluta en % relativa al contenedor de toda la valla (que ya es position:relative), sin importar en que panel/columna este anidado. */ .texto-personalizado-pos { position: absolute; z-index: 40; max-width: 90%; } /* Caja de texto libre (agregada/quitada a mano en Marca/Encabezado). Siempre tiene posicion propia (ver .texto-personalizado-pos); esto solo define su tipografia por defecto, antes de que se le asigne fuente/color propios. */ .texto-libre { color: var(--color-texto); font-weight: 700; font-size: 1.6rem; line-height: 1.2; } /* Solo en el modo de vista previa del panel admin: permite hacer clic y arrastrar cualquier texto configurable (mismo lenguaje visual que el icono decorativo). */ .texto-arrastrable.interactivo { cursor: move; } .texto-arrastrable.interactivo:hover { outline: 2px dashed rgba(76, 201, 240, 0.6); outline-offset: 4px; } .texto-arrastrable.arrastrando { outline: 2px dashed #4cc9f0; outline-offset: 4px; } /* Elementos que solo se pueden seleccionar (no arrastrar): filas/tarjetas de datos y el mensaje de "sin datos". */ .seleccionable { cursor: pointer; } .seleccionable:hover { outline: 2px dashed rgba(76, 201, 240, 0.6); outline-offset: 2px; } /* Marca el elemento cuyo panel de edicion esta abierto en el panel admin. */ .seleccionado-texto { outline: 2px solid #4cc9f0 !important; outline-offset: 3px; } /* ---------- TRANSICIONES DE ENTRADA POR SECCION ---------- Se activan poniendo data-transicion="..." en el contenedor de la valla; display.js lo hace segun la seccion que se muestra en cada momento. 'subir' (o sin atributo) usa la animacion original, sin cambios. */ [data-transicion="fundido"] .vista-carrusel.active, [data-transicion="fundido"] .valla-imagen-completa.activa { animation: entradaFundido 0.6s ease-out forwards; } [data-transicion="izquierda"] .vista-carrusel.active, [data-transicion="izquierda"] .valla-imagen-completa.activa { animation: entradaIzquierda 0.6s ease-out forwards; } [data-transicion="derecha"] .vista-carrusel.active, [data-transicion="derecha"] .valla-imagen-completa.activa { animation: entradaDerecha 0.6s ease-out forwards; } [data-transicion="zoom"] .vista-carrusel.active, [data-transicion="zoom"] .valla-imagen-completa.activa { animation: entradaZoom 0.6s ease-out forwards; } @keyframes entradaFundido { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes entradaIzquierda { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes entradaDerecha { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes entradaZoom { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }