body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #000;
            font-family: Arial, sans-serif;
            color: #fff; <!-- era fff-->
        }
        #menuBar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 30;
            background: rgba(0,0,0,0.6);
            padding: 4px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            height: 40px;
        }
        #menuContainer { display: flex; gap: 10px; padding-left: 5px; align-items: center; }
        #regionSesion { display: flex; align-items: center; gap: 5px; padding-right: 10px; font-size: 12px; }
        #langSelector { display: flex; gap: 3px; }
        #lienzoFondo, #lienzoNodos {
            position: absolute;
            top: 50px;
            left: 0;
            margin: 0;
        }
        #lienzoFondo { z-index: 1; background: #000; }
        #lienzoNodos { z-index: 2; pointer-events: none; }
        #overlayDibujoBase {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 100;
            display: none;
            background: transparent;
            cursor: crosshair;
        }
        #canvasDibujoBase {
            position: fixed;
            top: 0; left: 0;
            z-index: 101;
            display: none;
            background: transparent;
            cursor: crosshair;
        }
        #overlayPictograma {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 100;
            display: none;
            background: transparent;
            cursor: crosshair;
        }
        #canvasPictograma {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 101;
            display: none;
            background: transparent;
            cursor: crosshair;
        }
        .debug-borde {
            border: 2px solid red !important;
        }
        .debug-visible {
            border: 2px solid #00f;
        }
        #campoOTP {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 200;
            display: none;
            font-size: 24px;
            text-align: center;
            width: 120px;
            background: rgba(0,0,0,0.8);
            color: #0f0;
            border: 1px solid #0f0;
            border-radius: 5px;
            padding: 5px;
        }
        #mensajeFlotante {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 150;
            background: rgba(0,0,0,0.7);
            color: #fff; <!-- era fff-->
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
            display: none;
            text-align: center;
        }
        .oculto { display: none !important; }
.auto-index-1 { color: #0f0; font-size: 12px; margin-right: 8px; }
.auto-index-2 { background:#333; color:#fff; border:1px solid #aaa; cursor:pointer; }