/* ==========================================================================
       1. VARIABLES GLOBALES Y RESET
       ========================================================================== */
    :root {
        --bg-app: #101010;
        --bg-panel: #181818;
        --bg-input: #202020;
        --border-color: #2a2a2a;
        --text-main: #e0e0e0;
        --text-muted: #888888;
        --accent: #0078ff;
        --danger: #ff4444;
        --warning: #ff9f43;
        --success: #2ecc71;
        --duplicate: #A6BC09;
        --dup-valid: #00cec9;
        --info: #00a8ff;
        --migaja: #9c27b0;
        --panel-width: 380px;
    }

    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:0; background: var(--bg-app); color: var(--text-main); display:flex; height:100vh; overflow: hidden; font-size: 13px; }

    /* ==========================================================================
       2. ESTRUCTURA BASE (BARRAS Y PANELES)
       ========================================================================== */
    .top-bar { position: fixed; top:0; left:0; width: 100%; height: 40px; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); display:flex; align-items: center; padding: 0 15px; z-index: 100; box-sizing: border-box; transition: opacity 0.3s;}
    .app-title { font-weight: bold; font-size: 14px; letter-spacing: 0.5px; color: #fff; }
    .top-utils { margin-left: auto; display:flex; gap: 15px; align-items: center; }

    .main-container { display: flex; width: 100%; height: 100%; padding-top: 40px; box-sizing: border-box; }

    .control-panel { width: var(--panel-width); background: var(--bg-panel); border-right: 1px solid var(--border-color); display:flex; flex-direction:column; box-sizing: border-box; overflow: hidden; flex-shrink: 0; z-index: 10; position: relative;}
    .panel-scroll-area { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
    .panel-scroll-area::-webkit-scrollbar { width: 8px; }
    .panel-scroll-area::-webkit-scrollbar-track { background: var(--bg-panel); }
    .panel-scroll-area::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
    .panel-scroll-area::-webkit-scrollbar-thumb:hover { background: #555; }
    .panel-fixed-bottom { flex-shrink: 0; background: var(--bg-panel); border-top: 1px solid var(--border-color); padding: 15px 20px; z-index: 20; box-shadow: 0 -5px 15px rgba(0,0,0,0.5); transition: opacity 0.3s; }

    /* ==========================================================================
       3. COMPONENTES DE INTERFAZ (BOTONES, TEXTAREA, TOOLTIPS)
       ========================================================================== */
    .section-title { font-size: 11px; text-transform: uppercase; color: var(--text-muted); font-weight: bold; margin-bottom: 10px; margin-top: 20px; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center;}
    .section-title:first-child { margin-top: 0; }

    button.pro-btn { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #333; background: #222; color: var(--text-main); font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 12px; margin-bottom: 8px;}
    button.pro-btn:hover { background: #2a2a2a; border-color: #444; color: #fff; }
    .btn-primary-action { background: var(--accent) !important; color: white !important; border: none !important; box-shadow: 0 2px 10px rgba(0,120,255,0.3); }
    .btn-primary-action:hover { background: #005ce6 !important; box-shadow: 0 4px 15px rgba(0,120,255,0.5); transform: translateY(-1px); }

    textarea.pro-input { width: 100%; min-height: 80px; flex-shrink: 0; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); font-family: 'Consolas', monospace; font-size: 11px; padding: 8px; border-radius: 4px; box-sizing: border-box; resize: none; margin-bottom: 10px; line-height: 1.4; transition: min-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.2s; }
    textarea.pro-input.expanded { outline: none; border-color: var(--accent); min-height: 250px; background: #1a1a1a; }
    hr.pro-hr { border: 0; border-top: 1px solid var(--border-color); margin: 15px 0; flex-shrink: 0; }

    .help-icon { cursor: help; font-size: 13px; opacity: 0.6; transition: 0.2s; margin-left: 5px; }
    .help-icon:hover { opacity: 1; filter: drop-shadow(0 0 5px rgba(0,120,255,0.5)); transform: scale(1.1); }

    .ui-tooltip-mock { position: fixed; background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(5px); color: #e0e0e0; border: 1px solid var(--accent); padding: 12px 15px; border-radius: 6px; width: 260px; font-size: 11px; line-height: 1.5; font-weight: normal; z-index: 5000; box-shadow: 0 10px 30px rgba(0,0,0,0.8); pointer-events: none; opacity: 0; transform: translateY(5px) scale(0.95); transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); display: none; text-transform: none; letter-spacing: normal; }
    .ui-tooltip-mock::before { content: ""; position: absolute; top: 50%; left: -6px; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-style: solid; border-color: transparent var(--accent) transparent transparent; }
    .ui-tooltip-mock.show { opacity: 1; transform: translateY(0) scale(1); }

    .accordion-mock { border: 1px solid var(--border-color); border-radius: 6px; background: rgba(0,0,0,0.2); overflow: hidden; margin-bottom: 15px; margin-top: 10px; flex-shrink: 0; }
    .accordion-header { padding: 10px 15px; background: var(--bg-input); cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
    .accordion-header:hover { background: #252525; }
    .accordion-title { font-size: 11px; text-transform: uppercase; color: var(--text-main); font-weight: bold; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px;}

    /* ==========================================================================
       4. ESTILOS DE ESTADOS Y COLORES
       ========================================================================== */
    .text-danger { color: var(--danger); }
    .text-warning { color: var(--warning); }
    .text-migaja { color: var(--migaja); }

    .filter-btn-mock { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); padding: 2px 6px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; display: flex; align-items: center; gap: 4px; transition: 0.2s; }
    .filter-btn-mock:hover { background: #252525; color: var(--text-main); }
    .filter-btn-mock.inactive { opacity: 0.4; filter: grayscale(100%); }

    .active-neutral { background: #333; border-color: #555; color: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
    .active-sn { color: white; border-color: var(--danger); background: var(--danger); }
    .active-res { color: white; border-color: var(--danger); background: #b33939; }
    .active-mask { color: #fff; border-color: var(--warning); background: var(--warning); }
    .active-rect { color: #fff; border-color: var(--info); background: var(--info); }
    .active-migaja { color: #fff; border-color: var(--migaja); background: var(--migaja); }
    .active-ok { color: #fff; border-color: var(--success); background: var(--success); }
    .active-dup { color: #fff; border-color: var(--duplicate); background: var(--duplicate); }
    .active-dup-valid { color: #fff; border-color: var(--dup-valid); background: var(--dup-valid); }

    /* ==========================================================================
       5. LIENZO Y VISOR SVG (NÚCLEO GRÁFICO TURBO)
       ========================================================================== */
    .viewer-container { flex:1; display:flex; flex-direction:column; background: var(--bg-app); position:relative; overflow: hidden; }
    .viewer-container.no-select { user-select: none; -webkit-user-select: none; }

    .viewer-mock { flex:1; position:relative; cursor:grab; overflow:hidden; }
    .viewer-mock:active { cursor:grabbing; }
    .map-wrapper { position:absolute; transform-origin:0 0; }

    #preview { position:relative; display:inline-block; line-height:0; background-color:#1a1a1a; box-shadow:0 10px 40px rgba(0,0,0,0.8); transition: width 0.1s, height 0.1s; }
    #preview-img { display:block; pointer-events:none; transition: opacity 0.2s; }
    #preview-overlay { position:absolute; top:0; left:0; width:100%; height:100%; }

    /* MODO FANTASMA (Ocultar al arrastrar para salvar rendimiento) */
    body.is-panning #svgShapes { opacity: 0 !important; pointer-events: none !important; transition: none !important; }
    body.is-panning .label { display: none !important; }

    .zona-ok, .zona-sin-nombre, .zona-residuo, .zona-mask, .zona-rec, .zona-migaja, .zona-duplicado, .zona-dup-valid { stroke-width:1.3; stroke-linejoin:round; transition:.15s; cursor:pointer; pointer-events:all; }
    .zona-ok{ fill:rgba(46,204,113,.2); stroke:var(--success); } .zona-ok:hover{ fill:rgba(46,204,113,.5); }
    .zona-sin-nombre{ fill:rgba(255,68,68,.3); stroke:var(--danger); } .zona-sin-nombre:hover{ fill:rgba(255,68,68,.6); }
    .zona-residuo{ fill:rgba(255,68,68,.2); stroke:var(--danger); stroke-dasharray: 4;} .zona-residuo:hover{ fill:rgba(255,68,68,.6); }
    .zona-mask{ fill:rgba(255,159,67,.3); stroke:var(--warning); } .zona-mask:hover{ fill:rgba(255,159,67,.6); }
    .zona-rec{ fill:rgba(0,168,255,.2); stroke:var(--info); } .zona-rec:hover{ fill:rgba(0,168,255,.5); }
    .zona-migaja{ fill:rgba(156, 39, 176, 0.4); stroke:var(--migaja); } .zona-migaja:hover{ fill:rgba(156, 39, 176, 0.7); }
    .zona-duplicado{ fill:rgba(166, 188, 9, .2); stroke:var(--duplicate); } .zona-duplicado:hover{ fill:rgba(166, 188, 9, .5); }
    .zona-dup-valid{ fill:rgba(0, 206, 201, 0.2); stroke:var(--dup-valid); } .zona-dup-valid:hover{ fill:rgba(0, 206, 201, 0.5); }

    @keyframes marchingAnts { to { stroke-dashoffset: -16; } }
    .dup-link-line { opacity: 0.5; animation: marchingAnts 3s linear infinite; transition: opacity 0.3s, stroke-width 0.3s; }
    .dup-link-node { opacity: 0.25; transition: opacity 0.3s, r 0.3s; }
    .dup-link-shadow { opacity: 0.25; transition: opacity 0.3s, stroke-width 0.3s; }
    .active-family.dup-link-line { opacity: 1 !important; stroke-width: 2.5px !important; animation: marchingAnts 0.6s linear infinite !important; }
    .active-family.dup-link-node { opacity: 1 !important; r: 5px !important; }
    .active-family.dup-link-shadow { opacity: 0.6 !important; stroke-width: 4.5px !important; }

    .label { position:absolute; transform:translate(-50%, -50%); pointer-events:none; font-size: 7.5px; padding: 2.5px 4px; border-radius: 3px; color: white; white-space: nowrap; font-weight: bold; z-index: 10; box-shadow: 0 1px 3px rgba(0,0,0,0.3); font-family: sans-serif; transition: opacity 0.2s; line-height: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
    #tt { position:fixed; padding: 7px 12px; color: white; border-radius: 4px; font-size: 14.5px; pointer-events:none; display:none; z-index:9999; font-weight:bold; box-shadow:0 4px 15px rgba(0,0,0,0.5); opacity:0; transform: scale(0.5); font-family:sans-serif; line-height: normal; }
    #tt.flash { display:block; animation: ttPop 0.1s ease-out forwards; }
    @keyframes ttPop { 0% { opacity:0; transform: scale(0.5); } 100% { opacity:1; transform: scale(1); } }

    /* ==========================================================================
       6. MODOS ESPECIALES (DIBUJO, EDICIÓN Y SIMULADOR)
       ========================================================================== */
    body.mode-focus .top-bar, body.mode-focus .panel-fixed-bottom, body.mode-focus .panel-scroll-area { opacity: 0.05; pointer-events: none; transition: opacity 0.3s ease; }
    body.mode-focus #topDashboard, body.mode-focus #frame-status-badge { display: none !important; }

    .panel-draw-edit { display: none; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; position: absolute; top: 20px; left: 20px; right: 20px; z-index: 100; }
    .focus-panel { border-color: var(--accent) !important; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 120, 255, 0.25); background: #131b24 !important; transform: scale(1.02); transition: all 0.3s ease; }

    .dimmed-svg { opacity: 0.6; pointer-events: none; }
    .interactive-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: all; }
    .isolated-poly { fill: rgba(255, 159, 67, 0.2); stroke: #ff9f43; stroke-width: 1.05; stroke-dasharray: 4; pointer-events: none; }
    .edge-hit-area { fill: none; stroke: rgba(255, 255, 255, 0.01); cursor: crosshair; pointer-events: stroke; }
    .poly-line { fill: none; stroke: #2ecc71; stroke-width: 2; stroke-dasharray: 4; }
    .edit-node { fill: #ff9f43; stroke: white; stroke-width: 0.7; opacity: 0.6; cursor: grab; pointer-events: all; transition: opacity 0.2s, fill 0.2s; }
    .edit-node:hover { fill: #ff4444; opacity: 1; }
    .edit-node:active { cursor: grabbing; fill: #ff4444; opacity: 1; }
    .start-node { fill: #2ecc71; stroke: white; stroke-width: 1.5; cursor: pointer; pointer-events: all; transition: r 0.1s, fill 0.2s; }

    /* Simulador */
    body.simulator-mode .control-panel, body.simulator-mode .top-bar { display: none !important; }
    body.simulator-mode .main-container { padding-top: 0 !important; }
    body.simulator-mode #topDashboard, body.simulator-mode #frame-status-badge, body.simulator-mode .mode-indicator-mock { display: none !important; }
    body.simulator-mode #svgShapes polygon, body.simulator-mode #svgShapes rect, body.simulator-mode #svgShapes line, body.simulator-mode #svgShapes circle { stroke-width: 0 !important; stroke: transparent !important; transition: filter 0.2s, stroke 0.2s, stroke-width 0.2s !important; }
    body.simulator-mode #svgShapes polygon:hover, body.simulator-mode #svgShapes rect:hover { filter: brightness(1.25) contrast(1.1); stroke-width: 2px !important; stroke: white !important; cursor: pointer; }

    /* Etiquetas blancas y limpias en el Simulador */
    body.simulator-mode .label { background-color: #ffffff !important; color: #000000 !important; border: none !important; box-shadow: none !important; font-weight: bold !important; }

    .btn-exit-sim { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #111; border: 2px solid var(--accent); color: white; padding: 12px 24px; border-radius: 30px; font-weight: bold; font-size: 14px; cursor: pointer; z-index: 9999; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.8); transition: 0.2s; align-items: center; gap: 8px; }
    .btn-exit-sim:hover { background: var(--accent); transform: translateX(-50%) scale(1.05); }

    /* Filtros del Simulador (Subidos a 85px para no tapar la timeline) */
    .sim-filters-mock { position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); background: rgba(20, 20, 20, 0.95); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 40px; display: flex; gap: 8px; z-index: 9999; box-shadow: 0 10px 40px rgba(0,0,0,0.9); backdrop-filter: blur(8px); align-items: center;}
    .sim-filter-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 8px 18px; border-radius: 30px; cursor: pointer; font-weight: bold; font-size: 13px; transition: all 0.2s; }
    .sim-filter-btn:hover { background: rgba(255,255,255,0.05); color: white; }
    .sim-filter-btn.active { background: #333; color: white; border-color: #555; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }

    /* ==========================================================================
       7. LÍNEA DE TIEMPO (TIMELINE Y SLIDER)
       ========================================================================== */
    .timeline-mock { height: 60px; background: var(--bg-panel); border-top: 1px solid var(--border-color); display:flex; align-items: center; padding: 0 20px; gap: 15px; flex-shrink: 0; z-index: 10; display:none; }
    .tl-btn-mock { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); width: 30px; height: 30px; border-radius: 4px; cursor: pointer; display:flex; align-items:center; justify-content:center; font-size: 14px;}
    .tl-btn-mock:hover { background: #2a2a2a; }
    .tl-btn-mock.active-play { background: var(--text-main); color: var(--bg-panel); border-color: var(--text-main); }

    input[type=range] { flex:1; cursor:pointer; -webkit-appearance: none; appearance: none; background: transparent; height: 20px; }
    input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #333; border-radius: 2px; border: none; }
    input[type=range]::-moz-range-track { width: 100%; height: 4px; background: #333; border-radius: 2px; border: none; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 14px; width: 14px; border-radius: 50%; background: var(--accent); margin-top: -5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: transform 0.15s ease, background 0.2s ease; }
    input[type=range]::-moz-range-thumb { height: 14px; width: 14px; border-radius: 50%; background: var(--accent); border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: transform 0.15s ease, background 0.2s ease; }
    input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.3); background: #005ce6; }
    input[type=range]:hover::-moz-range-thumb { transform: scale(1.3); background: #005ce6; }
    input[type=range]:active::-webkit-slider-thumb { transform: scale(1.4); }
    input[type=range]:active::-moz-range-thumb { transform: scale(1.4); }

    /* ==========================================================================
       8. MODALES Y DROPDOWNS
       ========================================================================== */
    .modal-overlay { display:none; position:fixed; top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8); backdrop-filter: blur(3px); z-index:2000; align-items:center; justify-content:center; }
    .modal-content { background: var(--bg-panel); border: 1px solid var(--border-color); padding:25px; border-radius:8px; width:90%; max-width:450px; box-shadow:0 10px 40px rgba(0,0,0,0.6); position:relative; color: var(--text-main); }
    .modal-close { position:absolute; top:15px; right:15px; font-size:24px; cursor:pointer; color:var(--text-muted); font-weight:bold; }
    .modal-close:hover { color: white; }
    .modal-input { width:100%; padding:10px; border:1px solid #333; border-radius:4px; font-family:monospace; font-size:13px; margin-bottom:5px; background: var(--bg-input); color: white; box-sizing:border-box; }
    .modal-input:focus { outline: none; border-color: var(--accent); }

    .floating-dash { position: absolute; top: 10px; left: 10px; right: 10px; background: rgba(24, 24, 24, 0.85); backdrop-filter: blur(5px); border: 1px solid var(--border-color); border-radius: 6px; padding: 5px 10px; z-index: 50; display:flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: opacity 0.3s; }
    .dash-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; flex-wrap: wrap;}
    .filter-group { display:flex; gap: 5px; flex-wrap: wrap; align-items: center;}

    .mode-indicator-mock { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); background: #444444; color: #ffffff; padding: 8px 24px; border-radius: 30px; font-size: 13px; font-weight: bold; z-index: 60; display: none; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid #666; letter-spacing: 1px; text-transform: uppercase; }
    .frame-badge-mock { position: absolute; top: 85px; right: 20px; color: white; padding: 6px 15px; border-radius: 6px; font-weight: bold; font-size: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 40; letter-spacing: 0.5px; display:none;}
    .welcome-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(16,16,16,0.95); backdrop-filter: blur(8px); z-index:3000; display:flex; align-items:center; justify-content:center; }
    .welcome-content { background: var(--bg-panel); border: 1px solid var(--border-color); padding:40px; border-radius:12px; width:90%; max-width:550px; box-shadow:0 15px 50px rgba(0,0,0,0.8); position:relative; text-align:center; }
    .welcome-title { font-size: 22px; font-weight: bold; margin-bottom: 10px; color: white; letter-spacing: 1px; }
    .welcome-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 30px; }
    .welcome-close { position:absolute; top:15px; right:20px; font-size:28px; cursor:pointer; color:var(--text-muted); font-weight:bold; transition: 0.2s;}
    .welcome-close:hover { color: white; transform: scale(1.1);}
    .drop-zone-mock { border: 2px dashed var(--border-color); padding: 40px 20px; text-align: center; border-radius: 8px; color: var(--text-muted); background: rgba(0,120,255,0.02); cursor: pointer; margin-bottom: 15px; transition: 0.2s;}
    .drop-zone-mock:hover, .drop-zone-mock.dragover { border-color: var(--accent); color: var(--text-main); background: rgba(0,120,255,0.08); }
    #warning-panel { display:none; background:#302010; color:var(--warning); padding:10px 15px; border-radius:6px; margin-bottom:15px; font-size:11px; border:1px solid #503010; }
    .export-box-mock { background: linear-gradient(145deg, rgba(0,120,255,0.08) 0%, rgba(0,0,0,0) 100%); border: 1px solid rgba(0, 120, 255, 0.4); border-radius: 8px; padding: 15px; margin-bottom: 12px; box-shadow: 0 4px 15px rgba(0,120,255,0.05); }
    .export-box-mock .section-title { color: #fff; margin-top: 0; font-size: 12px; margin-bottom: 12px; }